mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-29 19:06:24 +02:00
refactor: changed hero to a carousel
This commit is contained in:
Eric Lammertsma
parent
0fb6caa01f
commit
e917ff1056
3 changed files with 261 additions and 81 deletions
|
|
@ -36,8 +36,7 @@ function ExpandedGifOverlay({
|
|||
transition={{ duration: 0.25, ease: "easeOut" }}
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="max-h-[90vh] max-w-[90vw] rounded-2xl shadow-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="max-h-[90vh] max-w-[90vw] cursor-pointer rounded-2xl shadow-2xl"
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,87 +1,155 @@
|
|||
"use client";
|
||||
|
||||
import { AnimatePresence, motion, useScroll, useTransform } from "motion/react";
|
||||
import { useRef } from "react";
|
||||
import { AnimatePresence, motion } from "motion/react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { ExpandedGifOverlay, useExpandedGif } from "@/components/ui/expanded-gif-overlay";
|
||||
|
||||
const walkthroughSteps = [
|
||||
const carouselItems = [
|
||||
{
|
||||
step: 1,
|
||||
title: "Login",
|
||||
description: "Login to get started.",
|
||||
src: "/homepage/hero_tutorial/LoginFlowGif.gif",
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
title: "Connect & Sync",
|
||||
description: "Connect your connectors and sync. Enable periodic syncing to keep them updated.",
|
||||
description:
|
||||
"Connect data sources like Notion, Drive and Gmail. Enable periodic syncing to keep them updated.",
|
||||
src: "/homepage/hero_tutorial/ConnectorFlowGif.gif",
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: "Upload Documents",
|
||||
description: "While connectors index, upload your documents directly.",
|
||||
description: "Or upload your documents directly, including iamges and massive PDFs.",
|
||||
src: "/homepage/hero_tutorial/DocUploadGif.gif",
|
||||
},
|
||||
{
|
||||
title: "Search & Citation",
|
||||
description:
|
||||
"Ask questions and get Perplexity-style 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.",
|
||||
src: "/homepage/hero_tutorial/BQnaGif_compressed.gif",
|
||||
},
|
||||
{
|
||||
title: "Report Generation",
|
||||
description: "Generate and export reports in many formats.",
|
||||
src: "/homepage/hero_tutorial/ReportGenGif_compressed.gif",
|
||||
},
|
||||
{
|
||||
title: "Podcast Generation",
|
||||
description: "Turn your knowledge into podcasts in under 20 seconds.",
|
||||
src: "/homepage/hero_tutorial/PodcastGenGif.gif",
|
||||
},
|
||||
{
|
||||
title: "Image Generation",
|
||||
description: "Generate images directly from your conversations.",
|
||||
src: "/homepage/hero_tutorial/ImageGenGif.gif",
|
||||
},
|
||||
{
|
||||
title: "Realtime Chat",
|
||||
description: "Chat together in realtime with your team.",
|
||||
src: "/homepage/hero_realtime/RealTimeChatGif.gif",
|
||||
},
|
||||
{
|
||||
title: "Realtime Comments",
|
||||
description: "Add comments and tag teammates on any message.",
|
||||
src: "/homepage/hero_realtime/RealTimeCommentsFlow.gif",
|
||||
},
|
||||
];
|
||||
|
||||
function WalkthroughCard({
|
||||
i,
|
||||
step,
|
||||
index,
|
||||
title,
|
||||
description,
|
||||
src,
|
||||
progress,
|
||||
range,
|
||||
targetScale,
|
||||
isActive,
|
||||
onExpandedChange,
|
||||
}: {
|
||||
i: number;
|
||||
step: number;
|
||||
index: number;
|
||||
title: string;
|
||||
description: string;
|
||||
src: string;
|
||||
progress: ReturnType<typeof useScroll>["scrollYProgress"];
|
||||
range: [number, number];
|
||||
targetScale: number;
|
||||
isActive: boolean;
|
||||
onExpandedChange?: (expanded: boolean) => void;
|
||||
}) {
|
||||
const container = useRef<HTMLDivElement>(null);
|
||||
const scale = useTransform(progress, range, [1, targetScale]);
|
||||
const { expanded, open, close } = useExpandedGif();
|
||||
|
||||
useEffect(() => {
|
||||
onExpandedChange?.(expanded);
|
||||
}, [expanded, onExpandedChange]);
|
||||
const imgRef = useRef<HTMLImageElement>(null);
|
||||
const [frozenFrame, setFrozenFrame] = useState<string | null>(null);
|
||||
const [playKey, setPlayKey] = useState(0);
|
||||
|
||||
const captureFrame = useCallback((img: HTMLImageElement) => {
|
||||
try {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = img.naturalWidth;
|
||||
canvas.height = img.naturalHeight;
|
||||
canvas.getContext("2d")?.drawImage(img, 0, 0);
|
||||
setFrozenFrame(canvas.toDataURL());
|
||||
} catch {
|
||||
/* cross-origin or other issue */
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isActive) {
|
||||
setPlayKey((k) => k + 1);
|
||||
setFrozenFrame(null);
|
||||
} else {
|
||||
const img = imgRef.current;
|
||||
if (img && img.complete && img.naturalWidth > 0) {
|
||||
captureFrame(img);
|
||||
}
|
||||
}
|
||||
}, [isActive, captureFrame]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isActive && !frozenFrame) {
|
||||
const img = new Image();
|
||||
img.onload = () => captureFrame(img);
|
||||
img.src = src;
|
||||
}
|
||||
}, [isActive, frozenFrame, src, captureFrame]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
ref={container}
|
||||
className="sticky top-0 flex items-center justify-center px-4 sm:px-6 lg:px-8"
|
||||
>
|
||||
<motion.div
|
||||
style={{
|
||||
scale,
|
||||
top: `calc(10vh + ${i * 30}px)`,
|
||||
}}
|
||||
className="relative flex origin-top flex-col overflow-hidden rounded-2xl border border-neutral-200/60 bg-white shadow-xl sm:rounded-3xl dark:border-neutral-700/60 dark:bg-neutral-900
|
||||
w-full max-w-[340px] sm:max-w-[520px] md:max-w-[680px] lg:max-w-[900px]"
|
||||
<div className="rounded-2xl border border-neutral-200/60 bg-white shadow-xl sm:rounded-3xl dark:border-neutral-700/60 dark:bg-neutral-900">
|
||||
<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">
|
||||
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-xs font-semibold text-white sm:h-8 sm:w-8 sm:text-sm dark:bg-white dark:text-neutral-900">
|
||||
{index + 1}
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<h3 className="truncate text-sm font-semibold text-neutral-900 sm:text-base dark:text-white">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="truncate text-xs text-neutral-500 dark:text-neutral-400">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`bg-neutral-50 p-2 sm:p-3 dark:bg-neutral-950 ${
|
||||
isActive ? "cursor-pointer" : "pointer-events-none"
|
||||
}`}
|
||||
onClick={isActive ? open : undefined}
|
||||
>
|
||||
<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">
|
||||
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-xs font-semibold text-white sm:h-8 sm:w-8 sm:text-sm dark:bg-white dark:text-neutral-900">
|
||||
{step}
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<h3 className="truncate text-sm font-semibold text-neutral-900 sm:text-base dark:text-white">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="hidden text-xs text-neutral-500 sm:block dark:text-neutral-400">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="cursor-pointer bg-neutral-50 p-2 sm:p-3 dark:bg-neutral-950"
|
||||
onClick={open}
|
||||
>
|
||||
<img src={src} alt={title} className="w-full rounded-lg object-cover sm:rounded-xl" />
|
||||
</div>
|
||||
</motion.div>
|
||||
{isActive ? (
|
||||
<img
|
||||
ref={imgRef}
|
||||
key={`gif_${index}_${playKey}`}
|
||||
src={src}
|
||||
alt={title}
|
||||
className="w-full rounded-lg sm:rounded-xl"
|
||||
/>
|
||||
) : frozenFrame ? (
|
||||
<img
|
||||
src={frozenFrame}
|
||||
alt={title}
|
||||
className="w-full rounded-lg sm:rounded-xl"
|
||||
/>
|
||||
) : (
|
||||
<div className="aspect-video w-full rounded-lg bg-neutral-100 sm:rounded-xl dark:bg-neutral-800" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
|
|
@ -92,30 +160,145 @@ function WalkthroughCard({
|
|||
}
|
||||
|
||||
function WalkthroughScroll() {
|
||||
const container = useRef<HTMLDivElement>(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: container,
|
||||
offset: ["start start", "end end"],
|
||||
});
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const [isPaused, setIsPaused] = useState(false);
|
||||
const [isGifExpanded, setIsGifExpanded] = useState(false);
|
||||
const [containerWidth, setContainerWidth] = useState(0);
|
||||
const [cardHeight, setCardHeight] = useState(420);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const activeCardRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const el = containerRef.current;
|
||||
if (!el) return;
|
||||
const update = () => setContainerWidth(el.offsetWidth);
|
||||
update();
|
||||
const observer = new ResizeObserver(update);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const el = activeCardRef.current;
|
||||
if (!el) return;
|
||||
const update = () => setCardHeight(el.offsetHeight);
|
||||
update();
|
||||
const observer = new ResizeObserver(update);
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, [activeIndex, containerWidth]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isPaused || isGifExpanded) return;
|
||||
const timer = setTimeout(() => {
|
||||
setActiveIndex((prev) => (prev >= carouselItems.length - 1 ? 0 : prev + 1));
|
||||
}, 8000);
|
||||
return () => clearTimeout(timer);
|
||||
}, [activeIndex, isPaused, isGifExpanded]);
|
||||
|
||||
const cardWidth =
|
||||
containerWidth < 640
|
||||
? containerWidth * 0.85
|
||||
: containerWidth < 1024
|
||||
? Math.min(containerWidth * 0.7, 680)
|
||||
: Math.min(containerWidth * 0.55, 900);
|
||||
|
||||
const baseOffset =
|
||||
containerWidth < 640
|
||||
? containerWidth * 0.2
|
||||
: containerWidth < 1024
|
||||
? containerWidth * 0.15
|
||||
: 150;
|
||||
|
||||
const stackGap = containerWidth < 640 ? 35 : containerWidth < 1024 ? 45 : 55;
|
||||
const perspective = containerWidth < 640 ? 800 : containerWidth < 1024 ? 1000 : 1200;
|
||||
|
||||
const getCardStyle = useCallback(
|
||||
(index: number) => {
|
||||
const diff = index - activeIndex;
|
||||
|
||||
if (diff === 0) {
|
||||
return { x: -cardWidth / 2, rotateY: 0, zIndex: 20, originX: 1 };
|
||||
}
|
||||
|
||||
const dist = Math.abs(diff);
|
||||
const isLeft = diff < 0;
|
||||
const offset = baseOffset + (dist - 1) * stackGap;
|
||||
|
||||
return {
|
||||
x: -cardWidth / 2 + (isLeft ? -offset : offset),
|
||||
rotateY: isLeft ? 90 : -90,
|
||||
zIndex: 20 - dist,
|
||||
originX: isLeft ? 0 : 1,
|
||||
};
|
||||
},
|
||||
[activeIndex, cardWidth, baseOffset, stackGap],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={container}
|
||||
className="relative flex w-full flex-col items-center justify-center pb-[15vh] pt-[1vh] sm:pb-[18vh] sm:pt-[2vh]"
|
||||
>
|
||||
{walkthroughSteps.map((project, i) => {
|
||||
const targetScale = Math.max(0.6, 1 - (walkthroughSteps.length - i - 1) * 0.05);
|
||||
return (
|
||||
<WalkthroughCard
|
||||
key={`walkthrough_${i}`}
|
||||
i={i}
|
||||
{...project}
|
||||
progress={scrollYProgress}
|
||||
range={[i * (1 / walkthroughSteps.length), 1]}
|
||||
targetScale={targetScale}
|
||||
<div className="w-full py-4 sm:py-8">
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="relative mx-auto w-full"
|
||||
onMouseEnter={() => setIsPaused(true)}
|
||||
onMouseLeave={() => setIsPaused(false)}
|
||||
onTouchStart={() => setIsPaused(true)}
|
||||
onTouchEnd={() => setIsPaused(false)}
|
||||
>
|
||||
<div
|
||||
className="relative transition-[height] duration-700"
|
||||
style={{ perspective: `${perspective}px`, height: cardHeight }}
|
||||
>
|
||||
{containerWidth > 0 &&
|
||||
carouselItems.map((item, i) => {
|
||||
const style = getCardStyle(i);
|
||||
return (
|
||||
<motion.div
|
||||
key={`carousel_${i}`}
|
||||
ref={i === activeIndex ? activeCardRef : undefined}
|
||||
className="absolute top-0"
|
||||
style={{
|
||||
left: "50%",
|
||||
width: cardWidth,
|
||||
transformStyle: "preserve-3d",
|
||||
zIndex: style.zIndex,
|
||||
transformOrigin: `${style.originX * 100}% 50%`,
|
||||
}}
|
||||
animate={{
|
||||
x: style.x,
|
||||
rotateY: style.rotateY,
|
||||
}}
|
||||
transition={{ duration: 0.7, ease: [0.32, 0.72, 0, 1] }}
|
||||
>
|
||||
<WalkthroughCard
|
||||
index={i}
|
||||
title={item.title}
|
||||
description={item.description}
|
||||
src={item.src}
|
||||
isActive={i === activeIndex}
|
||||
onExpandedChange={setIsGifExpanded}
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-30 mt-6 flex justify-center gap-2">
|
||||
{carouselItems.map((_, i) => (
|
||||
<button
|
||||
key={`dot_${i}`}
|
||||
type="button"
|
||||
onClick={() => setActiveIndex(i)}
|
||||
className={`h-2 rounded-full transition-all duration-300 ${
|
||||
i === activeIndex
|
||||
? "w-6 bg-neutral-900 dark:bg-white"
|
||||
: "w-2 bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-600 dark:hover:bg-neutral-500"
|
||||
}`}
|
||||
aria-label={`Go to slide ${i + 1}`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue