mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-26 01:06:23 +02:00
508 lines
16 KiB
TypeScript
508 lines
16 KiB
TypeScript
"use client";
|
|
import { ChevronDown, Download, Monitor } from "lucide-react";
|
|
import { AnimatePresence, motion } from "motion/react";
|
|
import Link from "next/link";
|
|
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import Balancer from "react-wrap-balancer";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { ExpandedMediaOverlay, useExpandedMedia } from "@/components/ui/expanded-gif-overlay";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
|
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>
|
|
);
|
|
|
|
const TAB_ITEMS = [
|
|
{
|
|
title: "General Assist",
|
|
description: "Launch SurfSense instantly from any application.",
|
|
src: "/homepage/hero_tutorial/general_assist.mp4",
|
|
featured: true,
|
|
},
|
|
{
|
|
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,
|
|
},
|
|
{
|
|
title: "Extreme Assist",
|
|
description:
|
|
"Get inline writing suggestions powered by your knowledge base as you type in any app.",
|
|
src: "/homepage/hero_tutorial/extreme_assist.mp4",
|
|
featured: 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,
|
|
},
|
|
{
|
|
title: "Search & Citation",
|
|
description: "Ask questions and get cited responses from your knowledge base.",
|
|
src: "/homepage/hero_tutorial/BSNCGif.mp4",
|
|
featured: false,
|
|
},
|
|
{
|
|
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 (
|
|
<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>
|
|
<h2
|
|
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"
|
|
)}
|
|
>
|
|
An open source, privacy focused alternative to NotebookLM for teams with no data
|
|
limits.
|
|
</h2>
|
|
|
|
<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 handleGoogleLogin = () => {
|
|
trackLoginAttempt("google");
|
|
window.location.href = `${BACKEND_URL}/auth/google/authorize-redirect`;
|
|
};
|
|
|
|
if (isGoogleAuth) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={handleGoogleLogin}
|
|
className="flex h-14 w-full cursor-pointer items-center justify-center gap-3 rounded-lg bg-white text-center text-base font-medium text-neutral-700 shadow-sm ring-1 shadow-black/10 ring-black/10 transition duration-150 active:scale-98 hover:bg-neutral-50 sm:w-56 dark:bg-neutral-900 dark:text-neutral-200 dark:ring-neutral-700/50 dark:hover:bg-neutral-800"
|
|
>
|
|
<GoogleLogo className="h-5 w-5" />
|
|
<span>Continue with Google</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
href="/login"
|
|
className="flex h-14 w-full items-center justify-center 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 sm:w-52 dark:bg-white dark:text-black"
|
|
>
|
|
Get Started
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
type OSInfo = {
|
|
os: "macOS" | "Windows" | "Linux";
|
|
arch: "arm64" | "x64";
|
|
};
|
|
|
|
function useUserOS(): OSInfo {
|
|
const [info, setInfo] = useState<OSInfo>({ os: "macOS", arch: "arm64" });
|
|
useEffect(() => {
|
|
const ua = navigator.userAgent;
|
|
let os: OSInfo["os"] = "macOS";
|
|
let arch: OSInfo["arch"] = "x64";
|
|
|
|
if (/Windows/i.test(ua)) {
|
|
os = "Windows";
|
|
arch = "x64";
|
|
} else if (/Linux/i.test(ua)) {
|
|
os = "Linux";
|
|
arch = "x64";
|
|
} else {
|
|
os = "macOS";
|
|
arch = /Mac/.test(ua) && !/Intel/.test(ua) ? "arm64" : "arm64";
|
|
}
|
|
|
|
const uaData = (navigator as Navigator & { userAgentData?: { architecture?: string } })
|
|
.userAgentData;
|
|
if (uaData?.architecture === "arm") arch = "arm64";
|
|
else if (uaData?.architecture === "x86") arch = "x64";
|
|
|
|
setInfo({ os, arch });
|
|
}, []);
|
|
return info;
|
|
}
|
|
|
|
interface ReleaseAsset {
|
|
name: string;
|
|
url: string;
|
|
}
|
|
|
|
function useLatestRelease() {
|
|
const [assets, setAssets] = useState<ReleaseAsset[]>([]);
|
|
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
fetch("https://api.github.com/repos/MODSetter/SurfSense/releases/latest", {
|
|
signal: controller.signal,
|
|
})
|
|
.then((r) => r.json())
|
|
.then((data) => {
|
|
if (data?.assets) {
|
|
setAssets(
|
|
data.assets
|
|
.filter((a: { name: string }) => /\.(exe|dmg|AppImage|deb)$/.test(a.name))
|
|
.map((a: { name: string; browser_download_url: string }) => ({
|
|
name: a.name,
|
|
url: a.browser_download_url,
|
|
}))
|
|
);
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
return () => controller.abort();
|
|
}, []);
|
|
|
|
return assets;
|
|
}
|
|
|
|
const ASSET_LABELS: Record<string, string> = {
|
|
".exe": "Windows (exe)",
|
|
"-arm64.dmg": "macOS Apple Silicon (dmg)",
|
|
"-x64.dmg": "macOS Intel (dmg)",
|
|
"-arm64.zip": "macOS Apple Silicon (zip)",
|
|
"-x64.zip": "macOS Intel (zip)",
|
|
".AppImage": "Linux (AppImage)",
|
|
".deb": "Linux (deb)",
|
|
};
|
|
|
|
function getAssetLabel(name: string): string {
|
|
for (const [suffix, label] of Object.entries(ASSET_LABELS)) {
|
|
if (name.endsWith(suffix)) return label;
|
|
}
|
|
return name;
|
|
}
|
|
|
|
function DownloadButton() {
|
|
const { os, arch } = useUserOS();
|
|
const assets = useLatestRelease();
|
|
|
|
const { primary, alternatives } = useMemo(() => {
|
|
if (assets.length === 0) return { primary: null, alternatives: [] };
|
|
|
|
const matchers: Record<string, (n: string) => boolean> = {
|
|
Windows: (n) => n.endsWith(".exe"),
|
|
macOS: (n) => n.endsWith(`-${arch}.dmg`),
|
|
Linux: (n) => n.endsWith(".AppImage"),
|
|
};
|
|
|
|
const match = matchers[os];
|
|
const primary = assets.find((a) => match(a.name)) ?? null;
|
|
const alternatives = assets.filter((a) => a !== primary);
|
|
return { primary, alternatives };
|
|
}, [assets, os, arch]);
|
|
|
|
const fallbackUrl = GITHUB_RELEASES_URL;
|
|
|
|
if (!primary) {
|
|
return (
|
|
<a
|
|
href={fallbackUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex h-14 w-full items-center justify-center 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"
|
|
>
|
|
<Download className="size-4" />
|
|
Download for {os}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-14 w-full items-stretch sm:w-auto">
|
|
<a
|
|
href={primary.url}
|
|
className="flex flex-1 items-center justify-center gap-2 rounded-l-lg 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"
|
|
>
|
|
<Download className="size-4 shrink-0" />
|
|
Download for {os}
|
|
</a>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button
|
|
type="button"
|
|
className="flex items-center justify-center 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 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"
|
|
onClick={() => setSelectedIndex(index)}
|
|
className={cn(
|
|
"flex shrink-0 items-center 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"
|
|
className="cursor-pointer bg-neutral-50 p-2 sm:p-3 dark:bg-neutral-950 w-full"
|
|
onClick={open}
|
|
>
|
|
<TabVideo 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 videoRef = useRef<HTMLVideoElement>(null);
|
|
const [hasLoaded, setHasLoaded] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setHasLoaded(false);
|
|
const video = videoRef.current;
|
|
if (!video) return;
|
|
video.currentTime = 0;
|
|
video.play().catch(() => {});
|
|
}, [src]);
|
|
|
|
const handleCanPlay = useCallback(() => {
|
|
setHasLoaded(true);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative">
|
|
<video
|
|
ref={videoRef}
|
|
key={src}
|
|
src={src}
|
|
preload="auto"
|
|
loop
|
|
muted
|
|
playsInline
|
|
onCanPlay={handleCanPlay}
|
|
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" />
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
const GITHUB_RELEASES_URL = "https://github.com/MODSetter/SurfSense/releases/latest";
|