From 837fa0627f7683a71089af7b63f672480f518c91 Mon Sep 17 00:00:00 2001 From: Eric Lammertsma Date: Mon, 23 Feb 2026 09:17:33 -0500 Subject: [PATCH] refactor: improved hero-carousel visuals, performance and descriptions --- .../components/homepage/hero-section.tsx | 4 +- ...lkthrough-scroll.tsx => hero-carousel.tsx} | 70 +++++++++++++------ 2 files changed, 50 insertions(+), 24 deletions(-) rename surfsense_web/components/ui/{walkthrough-scroll.tsx => hero-carousel.tsx} (76%) diff --git a/surfsense_web/components/homepage/hero-section.tsx b/surfsense_web/components/homepage/hero-section.tsx index 9d0cd6f0c..09d05f9ea 100644 --- a/surfsense_web/components/homepage/hero-section.tsx +++ b/surfsense_web/components/homepage/hero-section.tsx @@ -5,7 +5,7 @@ import Link from "next/link"; import type React from "react"; import { useEffect, useRef, useState } from "react"; import Balancer from "react-wrap-balancer"; -import { WalkthroughScroll } from "@/components/ui/walkthrough-scroll"; +import { HeroCarousel } from "@/components/ui/hero-carousel"; import { AUTH_TYPE, BACKEND_URL } from "@/lib/env-config"; import { trackLoginAttempt } from "@/lib/posthog/events"; import { cn } from "@/lib/utils"; @@ -108,7 +108,7 @@ export function HeroSection() { {/* */}
- +
); diff --git a/surfsense_web/components/ui/walkthrough-scroll.tsx b/surfsense_web/components/ui/hero-carousel.tsx similarity index 76% rename from surfsense_web/components/ui/walkthrough-scroll.tsx rename to surfsense_web/components/ui/hero-carousel.tsx index 560e4dde5..4a7d800cf 100644 --- a/surfsense_web/components/ui/walkthrough-scroll.tsx +++ b/surfsense_web/components/ui/hero-carousel.tsx @@ -8,43 +8,43 @@ const carouselItems = [ { title: "Connect & Sync", description: - "Connect data sources like Notion, Drive and Gmail. Enable periodic syncing to keep them updated.", + "Connect data sources like Notion, Drive and Gmail. Automatically sync to keep them updated.", src: "/homepage/hero_tutorial/ConnectorFlowGif.gif", }, { title: "Upload Documents", - description: "Or upload your documents directly, including iamges and massive PDFs.", + description: "Upload documents directly, from images to massive PDFs.", src: "/homepage/hero_tutorial/DocUploadGif.gif", }, { title: "Search & Citation", description: - "Ask questions and get Perplexity-style cited responses from your knowledge base.", + "Ask questions and get cited responses from your knowledge base.", src: "/homepage/hero_tutorial/BSNCGif.gif", }, { - title: "Document Mention Q&A", - description: "Mention specific documents in your queries for targeted answers.", + title: "Targeted Document Q&A", + description: "Mention specific documents in chat for targeted answers.", src: "/homepage/hero_tutorial/BQnaGif_compressed.gif", }, { - title: "Report Generation", - description: "Generate and export reports in many formats.", + title: "Produce Reports Instantly", + description: "Generate reports from your sources in many formats.", src: "/homepage/hero_tutorial/ReportGenGif_compressed.gif", }, { - title: "Podcast Generation", - description: "Turn your knowledge into podcasts in under 20 seconds.", + title: "Create Podcasts", + description: "Turn anything into a podcast in under 20 seconds.", src: "/homepage/hero_tutorial/PodcastGenGif.gif", }, { title: "Image Generation", - description: "Generate images directly from your conversations.", + description: "Generate high-quality images easily from your conversations.", src: "/homepage/hero_tutorial/ImageGenGif.gif", }, { - title: "Realtime Chat", - description: "Chat together in realtime with your team.", + title: "Collaborative AI Chat", + description: "Collaborate on AI-powered conversations in realtime with your team.", src: "/homepage/hero_realtime/RealTimeChatGif.gif", }, { @@ -54,7 +54,7 @@ const carouselItems = [ }, ]; -function WalkthroughCard({ +function HeroCarouselCard({ index, title, description, @@ -114,14 +114,14 @@ function WalkthroughCard({ <>
- + {/* {index + 1} - + */}
-

+

{title}

-

+

{description}

@@ -159,7 +159,7 @@ function WalkthroughCard({ ); } -function WalkthroughScroll() { +function HeroCarousel() { const [activeIndex, setActiveIndex] = useState(0); const [isPaused, setIsPaused] = useState(false); const [isGifExpanded, setIsGifExpanded] = useState(false); @@ -167,6 +167,15 @@ function WalkthroughScroll() { const [cardHeight, setCardHeight] = useState(420); const containerRef = useRef(null); const activeCardRef = useRef(null); + const directionRef = useRef<"forward" | "backward">("forward"); + + const goTo = useCallback( + (newIndex: number) => { + directionRef.current = newIndex >= activeIndex ? "forward" : "backward"; + setActiveIndex(newIndex); + }, + [activeIndex], + ); useEffect(() => { const el = containerRef.current; @@ -191,6 +200,7 @@ function WalkthroughScroll() { useEffect(() => { if (isPaused || isGifExpanded) return; const timer = setTimeout(() => { + directionRef.current = "forward"; setActiveIndex((prev) => (prev >= carouselItems.length - 1 ? 0 : prev + 1)); }, 8000); return () => clearTimeout(timer); @@ -218,18 +228,22 @@ function WalkthroughScroll() { const diff = index - activeIndex; if (diff === 0) { - return { x: -cardWidth / 2, rotateY: 0, zIndex: 20, originX: 1 }; + const originX = directionRef.current === "forward" ? 1 : 0; + return { x: -cardWidth / 2, rotateY: 0, zIndex: 20, originX, overlayOpacity: 0, blur: 0 }; } const dist = Math.abs(diff); const isLeft = diff < 0; const offset = baseOffset + (dist - 1) * stackGap; + const t = Math.min(1, dist / 3); return { x: -cardWidth / 2 + (isLeft ? -offset : offset), rotateY: isLeft ? 90 : -90, zIndex: 20 - dist, originX: isLeft ? 0 : 1, + overlayOpacity: t, + blur: t * 6, }; }, [activeIndex, cardWidth, baseOffset, stackGap], @@ -263,14 +277,20 @@ function WalkthroughScroll() { transformStyle: "preserve-3d", zIndex: style.zIndex, transformOrigin: `${style.originX * 100}% 50%`, + cursor: i !== activeIndex ? "pointer" : undefined, }} + onClick={i !== activeIndex ? () => goTo(i) : undefined} animate={{ x: style.x, rotateY: style.rotateY, }} transition={{ duration: 0.7, ease: [0.32, 0.72, 0, 1] }} > - + + + ); })}
@@ -289,7 +315,7 @@ function WalkthroughScroll() {