From 792d8520a619a0e5ddcbaa7a2a9f5dd2aa252ad2 Mon Sep 17 00:00:00 2001 From: "DESKTOP-RTLN3BA\\$punk" Date: Sun, 31 May 2026 18:25:14 -0700 Subject: [PATCH] feat(hero-section): enhance use case descriptions and add examples - Updated the hero section to include detailed examples for various use cases, improving user guidance. - Modified existing use case descriptions for clarity and relevance. - Introduced a new component to display example prompts, enhancing the overall user experience. --- .../components/homepage/hero-section.tsx | 80 +++++++++++++++++-- 1 file changed, 75 insertions(+), 5 deletions(-) diff --git a/surfsense_web/components/homepage/hero-section.tsx b/surfsense_web/components/homepage/hero-section.tsx index 8a831d492..0641d4e4e 100644 --- a/surfsense_web/components/homepage/hero-section.tsx +++ b/surfsense_web/components/homepage/hero-section.tsx @@ -1,5 +1,13 @@ "use client"; -import { ChevronDown, Clock, Download, Monitor, Sparkles } from "lucide-react"; +import { + ChevronDown, + Clock, + CornerDownLeft, + Download, + Lightbulb, + Monitor, + Sparkles, +} from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import Link from "next/link"; import React, { memo, useCallback, useEffect, useRef, useState } from "react"; @@ -67,6 +75,7 @@ type HeroUseCase = { description: string; src: string | null; comingSoon?: boolean; + examples?: string[]; }; type HeroCategory = { @@ -143,9 +152,16 @@ const CATEGORIES: HeroCategory[] = [ { id: "resume", title: "AI Resume Builder", - description: "Draft and format an ATS-ready resume as a polished PDF.", + description: "Tailor your existing resume to any job description and beat the ATS.", src: null, comingSoon: true, + examples: [ + "Tailor my resume to this job description so it gets past ATS and lands an interview.", + "Optimize my resume for ATS by matching the keywords in this job posting.", + "Rewrite my resume bullet points to highlight the skills this role is asking for.", + "Compare my resume against this job description and list the gaps to fix.", + "Write a matching cover letter from my resume and this job description.", + ], }, ], }, @@ -159,6 +175,13 @@ const CATEGORIES: HeroCategory[] = [ description: "Run an agent on a schedule: daily briefs, weekly digests, recurring reports.", src: null, comingSoon: true, + examples: [ + "Email me a daily brief of new documents in my knowledge base every morning.", + "Generate a weekly status report from my Slack and Gmail every Friday.", + "Run a monthly competitor analysis report and save it to my workspace.", + "Summarize my GitHub and Linear activity into a daily standup update.", + "Create a recurring weekly research report on the topics I track.", + ], }, { id: "event", @@ -167,6 +190,13 @@ const CATEGORIES: HeroCategory[] = [ "Fire an agent the moment a document lands in a folder, then post the result to your tools.", src: null, comingSoon: true, + examples: [ + "When a PDF lands in my Research folder, generate a cited AI summary.", + "When new meeting notes are added, turn them into meeting minutes with action items.", + "When an invoice is uploaded, extract the vendor, total, and due date into a table.", + "When a contract enters my Legal folder, flag key terms and renewal dates.", + "When a resume is added to Candidates, screen it against the job description.", + ], }, { id: "chat-built", @@ -174,6 +204,13 @@ const CATEGORIES: HeroCategory[] = [ description: "Describe an automation in plain English and SurfSense builds it for you.", src: null, comingSoon: true, + examples: [ + "Build an AI agent that emails me a summary of new Notion pages each morning.", + "Create a no-code automation that posts a weekly research digest to Slack.", + "Set up an AI note taker that turns new meeting notes into minutes.", + "Make a workflow that extracts action items from meeting notes and assigns owners.", + "Automate a daily email brief from my Gmail and Google Drive.", + ], }, ], }, @@ -230,6 +267,13 @@ const CATEGORIES: HeroCategory[] = [ description: "Let the agent post results back to Notion, Slack, Linear and Drive.", src: null, comingSoon: true, + examples: [ + "Post this research summary to my Notion workspace.", + "Send these meeting action items to our team Slack channel.", + "Create a Jira ticket from this bug report.", + "Open a Linear issue from this feature request.", + "Save this generated report to Google Drive as a doc.", + ], }, ], }, @@ -435,6 +479,28 @@ const UseCasePlaceholder = ({ title }: { title: string }) => ( ); +const UseCaseExamples = ({ examples }: { examples: string[] }) => ( +
+
+
+ +
+); + const DesktopBadge = () => ( @@ -469,9 +535,13 @@ const UseCasePane = memo(function UseCasePane({ ) : (
-
- -
+ {useCase.examples && useCase.examples.length > 0 ? ( + + ) : ( +
+ +
+ )}
);