mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-06-02 19:55:18 +02:00
feat(hero-section): restructure hero section with new use case categories and enhanced UI components
- Introduced new use case categories for better organization of features. - Updated the hero section to include additional use cases with detailed descriptions and media sources. - Added new UI components such as Empty states, ScrollArea, and Tabs for improved user interaction. - Refactored existing use cases to align with the new structure and enhance clarity.
This commit is contained in:
DESKTOP-RTLN3BA\$punk
parent
0f2e3c7655
commit
2dc4f6ade4
1 changed files with 408 additions and 197 deletions
|
|
@ -1,6 +1,6 @@
|
|||
"use client";
|
||||
import { ChevronDown, Download, Monitor } from "lucide-react";
|
||||
import { AnimatePresence, motion } from "motion/react";
|
||||
import { ChevronDown, Clock, Download, 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";
|
||||
import Balancer from "react-wrap-balancer";
|
||||
|
|
@ -11,7 +11,18 @@ import {
|
|||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Empty,
|
||||
EmptyDescription,
|
||||
EmptyHeader,
|
||||
EmptyMedia,
|
||||
EmptyTitle,
|
||||
} from "@/components/ui/empty";
|
||||
import { ExpandedMediaOverlay, useExpandedMedia } from "@/components/ui/expanded-gif-overlay";
|
||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import {
|
||||
GITHUB_RELEASES_URL,
|
||||
|
|
@ -50,96 +61,193 @@ const GoogleLogo = ({ className }: { className?: string }) => (
|
|||
</svg>
|
||||
);
|
||||
|
||||
const TAB_ITEMS = [
|
||||
type HeroUseCase = {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
src: string | null;
|
||||
comingSoon?: boolean;
|
||||
};
|
||||
|
||||
type HeroCategory = {
|
||||
id: string;
|
||||
label: string;
|
||||
desktopOnly?: boolean;
|
||||
useCases: HeroUseCase[];
|
||||
};
|
||||
|
||||
const HERO_TUTORIAL = "/homepage/hero_tutorial";
|
||||
const HERO_REALTIME = "/homepage/hero_realtime";
|
||||
|
||||
const CATEGORIES: HeroCategory[] = [
|
||||
{
|
||||
title: "General Assist",
|
||||
description: "Launch SurfSense instantly from any application.",
|
||||
src: "/homepage/hero_tutorial/general_assist.mp4",
|
||||
featured: true,
|
||||
id: "desktop",
|
||||
label: "Desktop App",
|
||||
desktopOnly: true,
|
||||
useCases: [
|
||||
{
|
||||
id: "general",
|
||||
title: "General Assist",
|
||||
description: "Launch SurfSense instantly from any application with a global shortcut.",
|
||||
src: `${HERO_TUTORIAL}/general_assist.mp4`,
|
||||
},
|
||||
{
|
||||
id: "quick",
|
||||
title: "Quick Assist",
|
||||
description: "Select text anywhere, then ask AI to explain, rewrite, or act on it.",
|
||||
src: `${HERO_TUTORIAL}/quick_assist.mp4`,
|
||||
},
|
||||
{
|
||||
id: "screenshot",
|
||||
title: "Screenshot Assist",
|
||||
description: "Capture any region of your screen and ask AI about what’s in it.",
|
||||
src: `${HERO_TUTORIAL}/screenshot_assist.mp4`,
|
||||
},
|
||||
{
|
||||
id: "watch-folder",
|
||||
title: "Watch Local Folder",
|
||||
description: "Auto-sync a local folder to your knowledge base. Great for Obsidian vaults.",
|
||||
src: `${HERO_TUTORIAL}/folder_watch.mp4`,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Quick Assist",
|
||||
description: "Select text anywhere, then ask AI to explain, rewrite, or act on it.",
|
||||
src: "/homepage/hero_tutorial/quick_assist.mp4",
|
||||
featured: true,
|
||||
id: "deliverables",
|
||||
label: "Deliverable Studio",
|
||||
useCases: [
|
||||
{
|
||||
id: "report",
|
||||
title: "AI Report Generator",
|
||||
description:
|
||||
"Generate cited research reports from your documents, then export to PDF or Markdown.",
|
||||
src: `${HERO_TUTORIAL}/ReportGenGif_compressed.mp4`,
|
||||
},
|
||||
{
|
||||
id: "podcast",
|
||||
title: "AI Podcast Generator",
|
||||
description: "Turn any document or folder into a two-host AI podcast in under 20 seconds.",
|
||||
src: `${HERO_TUTORIAL}/PodcastGenGif.mp4`,
|
||||
},
|
||||
{
|
||||
id: "presentation",
|
||||
title: "AI Presentation & Video Maker",
|
||||
description: "Create editable slide decks and narrated video overviews from your sources.",
|
||||
src: `${HERO_TUTORIAL}/video_gen_surf.mp4`,
|
||||
},
|
||||
{
|
||||
id: "image",
|
||||
title: "AI Image Generator",
|
||||
description: "Generate high-quality images straight from your chats and documents.",
|
||||
src: `${HERO_TUTORIAL}/ImageGenGif.mp4`,
|
||||
},
|
||||
{
|
||||
id: "resume",
|
||||
title: "AI Resume Builder",
|
||||
description: "Draft and format an ATS-ready resume as a polished PDF.",
|
||||
src: null,
|
||||
comingSoon: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Screenshot Assist",
|
||||
description:
|
||||
"Use a global shortcut to select a region on your screen and attach it to your chat message.",
|
||||
src: "/homepage/hero_tutorial/screenshot_assist.mp4",
|
||||
featured: true,
|
||||
id: "automations",
|
||||
label: "Automations",
|
||||
useCases: [
|
||||
{
|
||||
id: "sort",
|
||||
title: "AI Document Sorting",
|
||||
description: "Let AI automatically organize files into the right folders as they arrive.",
|
||||
src: null,
|
||||
comingSoon: true,
|
||||
},
|
||||
{
|
||||
id: "schedule",
|
||||
title: "Scheduled AI Workflows",
|
||||
description: "Run an agent on a schedule: daily briefs, weekly digests, recurring reports.",
|
||||
src: null,
|
||||
comingSoon: true,
|
||||
},
|
||||
{
|
||||
id: "event",
|
||||
title: "Event-Triggered Automations",
|
||||
description:
|
||||
"Fire an agent the moment a document lands in a folder, then post the result to your tools.",
|
||||
src: null,
|
||||
comingSoon: true,
|
||||
},
|
||||
{
|
||||
id: "chat-built",
|
||||
title: "Chat-Built Automations",
|
||||
description: "Describe an automation in plain English and SurfSense builds it for you.",
|
||||
src: null,
|
||||
comingSoon: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Watch Local Folder",
|
||||
description:
|
||||
"Watch a local folder and automatically sync file changes to your knowledge base. Works great with Obsidian vaults.",
|
||||
src: "/homepage/hero_tutorial/folder_watch.mp4",
|
||||
featured: true,
|
||||
},
|
||||
// {
|
||||
// title: "Connect & Sync",
|
||||
// description:
|
||||
// "Connect data sources like Notion, Drive and Gmail. Automatically sync to keep them updated.",
|
||||
// src: "/homepage/hero_tutorial/ConnectorFlowGif.mp4",
|
||||
// featured: true,
|
||||
// },
|
||||
// {
|
||||
// title: "Upload Documents",
|
||||
// description: "Upload documents directly, from images to massive PDFs.",
|
||||
// src: "/homepage/hero_tutorial/DocUploadGif.mp4",
|
||||
// featured: true,
|
||||
// },
|
||||
{
|
||||
title: "Video & Presentations",
|
||||
description:
|
||||
"Create short videos and editable presentations with AI-generated visuals and narration from your sources.",
|
||||
src: "/homepage/hero_tutorial/video_gen_surf.mp4",
|
||||
featured: false,
|
||||
id: "search-chat",
|
||||
label: "Search & Chat",
|
||||
useCases: [
|
||||
{
|
||||
id: "chat-docs",
|
||||
title: "Chat With Your PDFs & Docs",
|
||||
description: "Ask questions across all your files and get answers with inline citations.",
|
||||
src: `${HERO_TUTORIAL}/BQnaGif_compressed.mp4`,
|
||||
},
|
||||
{
|
||||
id: "search",
|
||||
title: "AI Search With Citations",
|
||||
description: "Hybrid semantic and keyword search across your entire knowledge base.",
|
||||
src: `${HERO_TUTORIAL}/BSNCGif.mp4`,
|
||||
},
|
||||
{
|
||||
id: "collab",
|
||||
title: "Collaborative AI Chat",
|
||||
description: "Work on AI conversations with your team in real time.",
|
||||
src: `${HERO_REALTIME}/RealTimeChatGif.mp4`,
|
||||
},
|
||||
{
|
||||
id: "comments",
|
||||
title: "Comments & Mentions",
|
||||
description: "Comment and tag teammates on any AI message.",
|
||||
src: `${HERO_REALTIME}/RealTimeCommentsFlow.mp4`,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Search & Citation",
|
||||
description: "Ask questions and get cited responses from your knowledge base.",
|
||||
src: "/homepage/hero_tutorial/BSNCGif.mp4",
|
||||
featured: false,
|
||||
id: "connectors",
|
||||
label: "Connectors & Integrations",
|
||||
useCases: [
|
||||
{
|
||||
id: "connect",
|
||||
title: "Connect & Sync Your Tools",
|
||||
description:
|
||||
"Sync Notion, Slack, Google Drive, Gmail, GitHub, Linear and 25+ sources into one searchable corpus.",
|
||||
src: `${HERO_TUTORIAL}/ConnectorFlowGif.mp4`,
|
||||
},
|
||||
{
|
||||
id: "upload",
|
||||
title: "Chat With Uploaded Files",
|
||||
description: "Drop in PDFs, Office docs, images and audio. Instantly searchable.",
|
||||
src: `${HERO_TUTORIAL}/DocUploadGif.mp4`,
|
||||
},
|
||||
{
|
||||
id: "write-back",
|
||||
title: "Connector Write-Back",
|
||||
description: "Let the agent post results back to Notion, Slack, Linear and Drive.",
|
||||
src: null,
|
||||
comingSoon: true,
|
||||
},
|
||||
{
|
||||
id: "obsidian",
|
||||
title: "Obsidian & Knowledge Base Sync",
|
||||
description: "Keep your Obsidian vault and personal knowledge base in sync.",
|
||||
src: null,
|
||||
comingSoon: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Document Q&A",
|
||||
description: "Mention specific documents in chat for targeted answers.",
|
||||
src: "/homepage/hero_tutorial/BQnaGif_compressed.mp4",
|
||||
featured: false,
|
||||
},
|
||||
{
|
||||
title: "Reports",
|
||||
description: "Generate reports from your sources in many formats.",
|
||||
src: "/homepage/hero_tutorial/ReportGenGif_compressed.mp4",
|
||||
featured: false,
|
||||
},
|
||||
{
|
||||
title: "Podcasts",
|
||||
description: "Turn anything into a podcast in under 20 seconds.",
|
||||
src: "/homepage/hero_tutorial/PodcastGenGif.mp4",
|
||||
featured: false,
|
||||
},
|
||||
{
|
||||
title: "Image Generation",
|
||||
description: "Generate high-quality images easily from your conversations.",
|
||||
src: "/homepage/hero_tutorial/ImageGenGif.mp4",
|
||||
featured: false,
|
||||
},
|
||||
{
|
||||
title: "Collaborative Chat",
|
||||
description: "Collaborate on AI-powered conversations in realtime with your team.",
|
||||
src: "/homepage/hero_realtime/RealTimeChatGif.mp4",
|
||||
featured: false,
|
||||
},
|
||||
{
|
||||
title: "Comments",
|
||||
description: "Add comments and tag teammates on any message.",
|
||||
src: "/homepage/hero_realtime/RealTimeCommentsFlow.mp4",
|
||||
featured: false,
|
||||
},
|
||||
] as const;
|
||||
];
|
||||
|
||||
export function HeroSection() {
|
||||
return (
|
||||
|
|
@ -279,117 +387,15 @@ function DownloadButton() {
|
|||
);
|
||||
}
|
||||
|
||||
const BrowserWindow = () => {
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
const selectedItem = TAB_ITEMS[selectedIndex];
|
||||
const { expanded, open, close } = useExpandedMedia();
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div className="relative my-4 flex w-full flex-col items-start justify-start overflow-hidden rounded-2xl shadow-2xl md:my-12">
|
||||
<div className="flex w-full items-center justify-start overflow-hidden bg-gray-200 py-4 pl-4 dark:bg-neutral-800">
|
||||
<div className="mr-6 flex items-center gap-2">
|
||||
<div className="size-3 rounded-full bg-red-500" />
|
||||
<div className="size-3 rounded-full bg-yellow-500" />
|
||||
<div className="size-3 rounded-full bg-green-500" />
|
||||
</div>
|
||||
<div className="no-visible-scrollbar flex min-w-0 shrink flex-row items-center justify-start gap-2 overflow-x-auto mask-l-from-98% py-0.5 pr-2 pl-2 md:pl-4">
|
||||
{TAB_ITEMS.map((item, index) => (
|
||||
<React.Fragment key={item.title}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => setSelectedIndex(index)}
|
||||
className={cn(
|
||||
"h-auto shrink-0 gap-1.5 rounded-md px-2 py-1 text-xs transition duration-150 hover:bg-white sm:text-sm dark:hover:bg-neutral-950",
|
||||
selectedIndex === index &&
|
||||
!item.featured &&
|
||||
"bg-white shadow ring-1 shadow-black/10 ring-black/10 dark:bg-neutral-900",
|
||||
selectedIndex === index &&
|
||||
item.featured &&
|
||||
"bg-amber-50 shadow ring-1 shadow-amber-200/50 ring-amber-400/60 dark:bg-amber-950/40 dark:shadow-amber-900/30 dark:ring-amber-500/50",
|
||||
item.featured &&
|
||||
selectedIndex !== index &&
|
||||
"hover:bg-amber-50 dark:hover:bg-amber-950/30"
|
||||
)}
|
||||
>
|
||||
{item.title}
|
||||
{item.featured && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className="inline-flex shrink-0 items-center justify-center rounded border border-amber-300 bg-amber-100 p-0.5 text-amber-700 dark:border-amber-700 dark:bg-amber-900/50 dark:text-amber-400">
|
||||
<Monitor className="size-3" />
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">Desktop app only</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Button>
|
||||
{index !== TAB_ITEMS.length - 1 && (
|
||||
<div className="h-4 w-px shrink-0 rounded-full bg-neutral-300 dark:bg-neutral-700" />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full overflow-hidden bg-gray-100/50 px-4 pt-4 perspective-distant dark:bg-neutral-950">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
initial={{
|
||||
opacity: 0,
|
||||
scale: 0.99,
|
||||
filter: "blur(10px)",
|
||||
}}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
filter: "blur(0px)",
|
||||
}}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
scale: 0.98,
|
||||
filter: "blur(10px)",
|
||||
}}
|
||||
transition={{
|
||||
duration: 0.3,
|
||||
ease: "easeOut",
|
||||
}}
|
||||
key={selectedItem.title}
|
||||
className="relative overflow-hidden rounded-tl-xl rounded-tr-xl bg-white shadow-sm ring-1 shadow-black/10 ring-black/10 will-change-transform dark:bg-neutral-950"
|
||||
>
|
||||
<div className="flex items-center gap-3 border-b border-neutral-200/60 px-4 py-3 sm:px-6 sm:py-4 dark:border-neutral-700/60">
|
||||
<div className="min-w-0">
|
||||
<h3 className="truncate text-base font-semibold text-neutral-900 sm:text-lg dark:text-white">
|
||||
{selectedItem.title}
|
||||
</h3>
|
||||
<p className="text-sm text-neutral-500 dark:text-neutral-400">
|
||||
{selectedItem.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className="h-auto w-full cursor-pointer rounded-none bg-neutral-50 p-2 hover:bg-neutral-50 sm:p-3 dark:bg-neutral-950 dark:hover:bg-neutral-950"
|
||||
onClick={open}
|
||||
>
|
||||
<TabVideo key={selectedItem.src} src={selectedItem.src} />
|
||||
</Button>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<AnimatePresence>
|
||||
{expanded && (
|
||||
<ExpandedMediaOverlay src={selectedItem.src} alt={selectedItem.title} onClose={close} />
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const TabVideo = memo(function TabVideo({ src }: { src: string }) {
|
||||
const TabVideo = memo(function TabVideo({
|
||||
src,
|
||||
title,
|
||||
reduceMotion,
|
||||
}: {
|
||||
src: string;
|
||||
title: string;
|
||||
reduceMotion: boolean;
|
||||
}) {
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const [hasLoaded, setHasLoaded] = useState(false);
|
||||
|
||||
|
|
@ -398,8 +404,11 @@ const TabVideo = memo(function TabVideo({ src }: { src: string }) {
|
|||
const video = videoRef.current;
|
||||
if (!video) return;
|
||||
video.currentTime = 0;
|
||||
video.play().catch(() => {});
|
||||
}, []);
|
||||
// Respect reduced-motion: show the first frame and expose controls instead of autoplaying.
|
||||
if (!reduceMotion) {
|
||||
video.play().catch(() => {});
|
||||
}
|
||||
}, [reduceMotion]);
|
||||
|
||||
const handleCanPlay = useCallback(() => {
|
||||
setHasLoaded(true);
|
||||
|
|
@ -411,7 +420,10 @@ const TabVideo = memo(function TabVideo({ src }: { src: string }) {
|
|||
ref={videoRef}
|
||||
key={src}
|
||||
src={src}
|
||||
preload="auto"
|
||||
preload={reduceMotion ? "metadata" : "auto"}
|
||||
aria-label={`${title} demo`}
|
||||
autoPlay={!reduceMotion}
|
||||
controls={reduceMotion}
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
|
|
@ -419,8 +431,207 @@ const TabVideo = memo(function TabVideo({ src }: { src: string }) {
|
|||
className="aspect-video w-full rounded-lg sm:rounded-xl"
|
||||
/>
|
||||
{!hasLoaded && (
|
||||
<div className="absolute inset-0 aspect-video w-full animate-pulse rounded-lg bg-neutral-100 sm:rounded-xl dark:bg-neutral-800" />
|
||||
<Skeleton className="absolute inset-0 aspect-video w-full rounded-lg bg-neutral-100 motion-reduce:animate-none sm:rounded-xl dark:bg-neutral-800" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const UseCasePlaceholder = ({ title }: { title: string }) => (
|
||||
<Empty className="size-full justify-center rounded-lg border border-dashed bg-muted/30 sm:rounded-xl">
|
||||
<EmptyHeader>
|
||||
<EmptyMedia variant="icon">
|
||||
<Clock aria-hidden="true" />
|
||||
</EmptyMedia>
|
||||
<EmptyTitle>Demo coming soon</EmptyTitle>
|
||||
<EmptyDescription className="text-pretty">{`A walkthrough of ${title} is on the way.`}</EmptyDescription>
|
||||
</EmptyHeader>
|
||||
</Empty>
|
||||
);
|
||||
|
||||
const DesktopBadge = () => (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className="ml-0.5 inline-flex items-center text-amber-600 dark:text-amber-400">
|
||||
<Monitor aria-hidden="true" className="size-3.5" />
|
||||
<span className="sr-only">Desktop app only</span>
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">Desktop app only</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
const UseCasePane = memo(function UseCasePane({
|
||||
useCase,
|
||||
reduceMotion,
|
||||
}: {
|
||||
useCase: HeroUseCase;
|
||||
reduceMotion: boolean;
|
||||
}) {
|
||||
const { expanded, open, close } = useExpandedMedia();
|
||||
const hasVideo = !useCase.comingSoon && Boolean(useCase.src);
|
||||
|
||||
const media = hasVideo ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={open}
|
||||
aria-label={`Expand ${useCase.title} demo`}
|
||||
className="h-auto w-full cursor-pointer rounded-none bg-neutral-50 p-2 hover:bg-neutral-50 sm:p-3 dark:bg-neutral-950 dark:hover:bg-neutral-950"
|
||||
>
|
||||
<TabVideo src={useCase.src as string} title={useCase.title} reduceMotion={reduceMotion} />
|
||||
</Button>
|
||||
) : (
|
||||
<div className="bg-neutral-50 p-2 sm:p-3 dark:bg-neutral-950">
|
||||
<div className="aspect-video w-full">
|
||||
<UseCasePlaceholder title={useCase.title} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const card = (
|
||||
<div className="relative overflow-hidden rounded-tl-xl rounded-tr-xl bg-white shadow-sm ring-1 shadow-black/10 ring-black/10 dark:bg-neutral-950">
|
||||
<div className="flex items-center gap-3 border-b border-neutral-200/60 px-4 py-3 sm:px-6 sm:py-4 dark:border-neutral-700/60">
|
||||
<div className="min-w-0">
|
||||
<h3 className="truncate text-base font-semibold text-neutral-900 sm:text-lg dark:text-white">
|
||||
{useCase.title}
|
||||
</h3>
|
||||
<p className="text-sm text-neutral-500 text-pretty dark:text-neutral-400">
|
||||
{useCase.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{media}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{reduceMotion ? (
|
||||
card
|
||||
) : (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.99, filter: "blur(10px)" }}
|
||||
animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
className="will-change-transform"
|
||||
>
|
||||
{card}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<AnimatePresence>
|
||||
{expanded && hasVideo && (
|
||||
<ExpandedMediaOverlay
|
||||
src={useCase.src as string}
|
||||
alt={`${useCase.title} demo`}
|
||||
onClose={close}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
const CategoryPanel = memo(function CategoryPanel({
|
||||
category,
|
||||
reduceMotion,
|
||||
}: {
|
||||
category: HeroCategory;
|
||||
reduceMotion: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
{category.desktopOnly && (
|
||||
<div className="flex items-start gap-2 rounded-lg border border-amber-300/60 bg-amber-50 px-3 py-2 text-xs text-amber-800 sm:text-sm dark:border-amber-500/40 dark:bg-amber-950/30 dark:text-amber-200">
|
||||
<Sparkles aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
|
||||
<span className="text-pretty">
|
||||
The desktop app includes everything in SurfSense, plus these native-only superpowers.
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<Tabs
|
||||
defaultValue={category.useCases[0]?.id}
|
||||
orientation="vertical"
|
||||
className="flex w-full flex-col gap-3 md:flex-row md:gap-4"
|
||||
>
|
||||
<ScrollArea className="w-full md:w-56 md:shrink-0">
|
||||
<TabsList className="flex h-auto w-max gap-1 bg-transparent p-0 md:w-full md:flex-col md:items-stretch">
|
||||
{category.useCases.map((useCase) => (
|
||||
<TabsTrigger
|
||||
key={useCase.id}
|
||||
value={useCase.id}
|
||||
className="h-auto shrink-0 touch-manipulation justify-start rounded-md px-3 py-2 text-left text-xs whitespace-normal data-[state=active]:bg-background data-[state=active]:shadow-sm sm:text-sm md:w-full"
|
||||
>
|
||||
{useCase.title}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
<ScrollBar orientation="horizontal" className="md:hidden" />
|
||||
</ScrollArea>
|
||||
<div className="min-w-0 flex-1">
|
||||
{category.useCases.map((useCase) => (
|
||||
<TabsContent key={useCase.id} value={useCase.id} className="mt-0">
|
||||
<UseCasePane useCase={useCase} reduceMotion={reduceMotion} />
|
||||
</TabsContent>
|
||||
))}
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const BrowserWindow = () => {
|
||||
const [activeCategory, setActiveCategory] = useState(CATEGORIES[0].id);
|
||||
const reduceMotion = useReducedMotion() ?? false;
|
||||
|
||||
return (
|
||||
<Tabs
|
||||
value={activeCategory}
|
||||
onValueChange={setActiveCategory}
|
||||
className="relative my-4 flex w-full flex-col items-start justify-start gap-0 overflow-hidden rounded-2xl shadow-2xl md:my-12"
|
||||
>
|
||||
<div className="flex w-full items-center justify-start overflow-hidden bg-gray-200 py-4 pl-4 dark:bg-neutral-800">
|
||||
<div className="mr-6 flex items-center gap-2">
|
||||
<div className="size-3 rounded-full bg-red-500" />
|
||||
<div className="size-3 rounded-full bg-yellow-500" />
|
||||
<div className="size-3 rounded-full bg-green-500" />
|
||||
</div>
|
||||
<ScrollArea className="min-w-0 flex-1">
|
||||
<TabsList className="flex h-auto w-max items-center gap-1 bg-transparent p-0 pr-4">
|
||||
{CATEGORIES.map((category, index) => (
|
||||
<React.Fragment key={category.id}>
|
||||
<TabsTrigger
|
||||
value={category.id}
|
||||
className={cn(
|
||||
"h-auto shrink-0 touch-manipulation gap-1.5 rounded-md px-2.5 py-1 text-xs sm:text-sm",
|
||||
category.desktopOnly
|
||||
? "bg-amber-100/70 text-amber-800 hover:bg-amber-100 data-[state=active]:bg-amber-200/80 data-[state=active]:text-amber-900 data-[state=active]:shadow-sm dark:bg-amber-950/40 dark:text-amber-200 dark:hover:bg-amber-900/40 dark:data-[state=active]:bg-amber-900/60 dark:data-[state=active]:text-amber-50"
|
||||
: "data-[state=active]:bg-background data-[state=active]:shadow"
|
||||
)}
|
||||
>
|
||||
{category.label}
|
||||
{category.desktopOnly && <DesktopBadge />}
|
||||
</TabsTrigger>
|
||||
{index !== CATEGORIES.length - 1 && (
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
className="h-4 bg-neutral-300 dark:bg-neutral-700"
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</TabsList>
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
<div className="w-full overflow-hidden bg-gray-100/50 px-4 pt-4 dark:bg-neutral-950">
|
||||
{CATEGORIES.map((category) => (
|
||||
<TabsContent key={category.id} value={category.id} className="mt-0">
|
||||
<CategoryPanel category={category} reduceMotion={reduceMotion} />
|
||||
</TabsContent>
|
||||
))}
|
||||
</div>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue