SurfSense/surfsense_web/components/homepage/hero-section.tsx

"use client";
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";
import { Button } from "@/components/ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	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,
	getAssetLabel,
	usePrimaryDownload,
} from "@/lib/desktop-download-utils";
import { AUTH_TYPE, BACKEND_URL } from "@/lib/env-config";
import { trackLoginAttempt } from "@/lib/posthog/events";
import { cn } from "@/lib/utils";

const GoogleLogo = ({ className }: { className?: string }) => (
	<svg
		className={className}
		viewBox="0 0 24 24"
		xmlns="http://www.w3.org/2000/svg"
		role="img"
		aria-label="Google logo"
	>
		<title>Google logo</title>
		<path
			d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
			fill="#4285F4"
		/>
		<path
			d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
			fill="#34A853"
		/>
		<path
			d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
			fill="#FBBC05"
		/>
		<path
			d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
			fill="#EA4335"
		/>
	</svg>
);

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[] = [
	{
		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`,
			},
		],
	},
	{
		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,
			},
		],
	},
	{
		id: "automations",
		label: "Automations",
		useCases: [
			{
				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,
			},
		],
	},
	{
		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`,
			},
		],
	},
	{
		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,
			},
		],
	},
];

export function HeroSection() {
	return (
		<div className="mx-auto w-full max-w-7xl min-w-0 pt-36">
			<div className="mt-4 flex w-full min-w-0 flex-col items-start px-2 md:px-8 xl:px-0">
				<h1
					className={cn(
						"relative mt-4 max-w-7xl text-left text-4xl font-bold tracking-tight text-balance text-neutral-900 sm:text-5xl md:text-6xl xl:text-8xl dark:text-neutral-50"
					)}
				>
					<Balancer>NotebookLM for Teams</Balancer>
				</h1>
				<div className="mt-4 flex w-full flex-col items-start justify-between gap-4 md:mt-12 md:flex-row md:items-end md:gap-10">
					<div>
						<p
							className={cn(
								"relative mb-8 max-w-2xl text-left text-sm tracking-wide text-neutral-600 antialiased sm:text-base md:text-xl dark:text-neutral-400"
							)}
						>
							A free, open source NotebookLM alternative for teams with no data limits. Use ChatGPT,
							Claude AI, and any AI model for free.
						</p>

						<div className="relative mb-4 flex w-full flex-col justify-center gap-y-2 sm:flex-row sm:justify-start sm:space-y-0 sm:space-x-4">
							<DownloadButton />
							<GetStartedButton />
						</div>
					</div>
				</div>
				<BrowserWindow />
			</div>
		</div>
	);
}

function GetStartedButton() {
	const isGoogleAuth = AUTH_TYPE === "GOOGLE";
	const [isRedirecting, setIsRedirecting] = useState(false);

	const handleGoogleLogin = () => {
		if (isRedirecting) return;
		setIsRedirecting(true);
		trackLoginAttempt("google");
		window.location.href = `${BACKEND_URL}/auth/google/authorize-redirect`;
	};

	if (isGoogleAuth) {
		return (
			<Button
				type="button"
				variant="ghost"
				onClick={handleGoogleLogin}
				disabled={isRedirecting}
				className="h-14 w-full cursor-pointer gap-3 rounded-lg border border-white bg-white text-center text-base font-medium text-[#1f1f1f] shadow-sm transition duration-150 hover:bg-zinc-100 hover:text-[#1f1f1f] sm:w-56 dark:border-white"
			>
				<GoogleLogo className="h-5 w-5" />
				<span>Continue with Google</span>
			</Button>
		);
	}

	return (
		<Button
			asChild
			variant="ghost"
			className="h-14 w-full rounded-lg bg-black text-center text-base font-medium text-white shadow-sm ring-1 shadow-black/10 ring-black/10 transition duration-150 active:scale-98 hover:bg-black sm:w-52 dark:bg-white dark:text-black dark:hover:bg-white"
		>
			<Link href="/login">Get Started</Link>
		</Button>
	);
}

function DownloadButton() {
	const { os, primary, alternatives } = usePrimaryDownload();

	const fallbackUrl = GITHUB_RELEASES_URL;

	if (!primary) {
		return (
			<Button
				asChild
				variant="ghost"
				className="h-14 w-full gap-2 rounded-lg border border-neutral-200 bg-white text-center text-base font-medium text-neutral-700 shadow-sm transition duration-150 active:scale-98 hover:bg-neutral-50 sm:w-auto sm:px-6 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800"
			>
				<a href={fallbackUrl} target="_blank" rel="noopener noreferrer">
					<Download className="size-4" />
					Download for {os}
				</a>
			</Button>
		);
	}

	return (
		<div className="flex h-14 w-full items-stretch sm:w-auto">
			<Button
				asChild
				variant="ghost"
				className="h-auto flex-1 gap-2 rounded-l-lg rounded-r-none border border-r-0 border-neutral-200 bg-white px-5 text-base font-medium text-neutral-700 shadow-sm transition duration-150 active:scale-[0.99] hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800"
			>
				<a href={primary.url}>
					<Download className="size-4 shrink-0" />
					Download for {os}
				</a>
			</Button>
			<DropdownMenu>
				<DropdownMenuTrigger asChild>
					<Button
						type="button"
						variant="ghost"
						className="h-auto rounded-l-none rounded-r-lg border border-neutral-200 bg-white px-2.5 text-neutral-500 shadow-sm transition duration-150 hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800"
					>
						<ChevronDown className="size-4" />
					</Button>
				</DropdownMenuTrigger>
				<DropdownMenuContent align="end" className="w-64">
					{alternatives.map((asset) => (
						<DropdownMenuItem key={asset.name} asChild>
							<a href={asset.url} className="cursor-pointer">
								<Download className="mr-2 size-3.5" />
								{getAssetLabel(asset.name)}
							</a>
						</DropdownMenuItem>
					))}
					<DropdownMenuItem asChild>
						<a
							href={fallbackUrl}
							target="_blank"
							rel="noopener noreferrer"
							className="cursor-pointer"
						>
							All downloads
						</a>
					</DropdownMenuItem>
				</DropdownMenuContent>
			</DropdownMenu>
		</div>
	);
}

const TabVideo = memo(function TabVideo({
	src,
	title,
	reduceMotion,
}: {
	src: string;
	title: string;
	reduceMotion: boolean;
}) {
	const videoRef = useRef<HTMLVideoElement>(null);
	const [hasLoaded, setHasLoaded] = useState(false);

	useEffect(() => {
		setHasLoaded(false);
		const video = videoRef.current;
		if (!video) return;
		video.currentTime = 0;
		// Respect reduced-motion: show the first frame and expose controls instead of autoplaying.
		if (!reduceMotion) {
			video.play().catch(() => {});
		}
	}, [reduceMotion]);

	const handleCanPlay = useCallback(() => {
		setHasLoaded(true);
	}, []);

	return (
		<div className="relative">
			<video
				ref={videoRef}
				key={src}
				src={src}
				preload={reduceMotion ? "metadata" : "auto"}
				aria-label={`${title} demo`}
				autoPlay={!reduceMotion}
				controls={reduceMotion}
				loop
				muted
				playsInline
				onCanPlay={handleCanPlay}
				className="aspect-video w-full rounded-lg sm:rounded-xl"
			/>
			{!hasLoaded && (
				<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>
	);
};