- {/* Header - Full width with diagonal layout */}
-
-
-
-
-
- What you get
-
-
- Thoughtful,
-
-
-
- Thoughtful,
-
- on autopilot.
-
-
- React.JSX.Element> = {
+ discover: DiscoverPanel,
+ swipe: SwipePanel,
+ gift: GiftPanel,
+ pool: PoolPanel,
+ maxi: MaxiPanel,
+};
+
+/* ── Hero section ───────────────────────────────────────────────────── */
export function HeroSection() {
const [isVisible, setIsVisible] = useState(false);
- const [wordIndex, setWordIndex] = useState(0);
+ const [activeTab, setActiveTab] = useState("discover");
+ const timerRef = useRef | null>(null);
useEffect(() => {
// eslint-disable-next-line react-hooks/set-state-in-effect -- hydration animation trigger
setIsVisible(true);
}, []);
- useEffect(() => {
- const interval = setInterval(() => {
- setWordIndex((prev) => (prev + 1) % words.length);
- }, 2500);
- return () => clearInterval(interval);
+ // Auto-cycle tabs
+ const startCycle = useCallback(() => {
+ if (timerRef.current) clearInterval(timerRef.current);
+ timerRef.current = setInterval(() => {
+ setActiveTab(prev => {
+ const idx = TABS.findIndex(t => t.id === prev);
+ return TABS[(idx + 1) % TABS.length].id;
+ });
+ }, AUTO_CYCLE_MS);
}, []);
+ useEffect(() => {
+ startCycle();
+ return () => { if (timerRef.current) clearInterval(timerRef.current); };
+ }, [startCycle]);
+
+ const handleTabClick = (id: TabId) => {
+ setActiveTab(id);
+ startCycle(); // restart timer on manual click
+ };
+
+ const Panel = PANELS[activeTab];
+
return (
-
- {/* Background image (Midjourney) with warm gradient fallback */}
+
+ {/* Background — warm gradient with subtle image */}
- {/* Cream overlays keep the left text crisp and blend the image edges */}
-
-
+
+
- {/* Subtle grid lines */}
+ {/* Subtle grid */}
- Everything you need to give a gift they'll remember — discovery, taste, and a companion that does the thinking. -
+
+ {/* Vertical connector line (skip on first) */}
+ {index > 0 && (
+
+ )}
+
+
+
diff --git a/web/components/landing/hero-section.tsx b/web/components/landing/hero-section.tsx
index e3dee97..4d95244 100644
--- a/web/components/landing/hero-section.tsx
+++ b/web/components/landing/hero-section.tsx
@@ -1,131 +1,442 @@
"use client";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef, useCallback } from "react";
import Link from "next/link";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, Heart, Search, Sparkles, Users, Gift, MessageCircle, Bookmark, Send } from "lucide-react";
-const words = ["love", "treasure", "remember", "show off"];
+/* ── Tab definitions ────────────────────────────────────────────────────── */
+type TabId = "discover" | "swipe" | "gift" | "pool" | "maxi";
-function BlurWord({ word, trigger }: { word: string; trigger: number }) {
- const letters = word.split("");
- const STAGGER = 45; // ms between each letter
- const DURATION = 500; // blur+opacity fade duration per letter
- const GRADIENT_HOLD = STAGGER * letters.length + DURATION + 200;
+interface Tab {
+ id: TabId;
+ label: string;
+ icon: typeof Heart;
+}
+
+const TABS: Tab[] = [
+ { id: "discover", label: "Discover", icon: Search },
+ { id: "swipe", label: "Swipe", icon: Heart },
+ { id: "gift", label: "Gift", icon: Gift },
+ { id: "pool", label: "Pool", icon: Users },
+ { id: "maxi", label: "Maxi", icon: Sparkles },
+];
+
+const AUTO_CYCLE_MS = 5000;
+
+/* ── Mock UI panels ─────────────────────────────────────────────────────── */
+
+function DiscoverPanel() {
+ const [liked, setLiked] = useState>({});
+
+ const items = [
+ { name: "Instant Film Camera", brand: "Halo", price: "$79", emoji: "📸", color: "#ffc2d1" },
+ { name: "Linen Throw Blanket", brand: "Parachute", price: "$129", emoji: "🧶", color: "#bfe3ff" },
+ { name: "Matcha Starter Kit", brand: "Ippodo", price: "$45", emoji: "🍵", color: "#cde6c5" },
+ { name: "Vinyl Record Player", brand: "Crosley", price: "$89", emoji: "🎵", color: "#d9c2ff" },
+ { name: "Scented Candle Set", brand: "Diptyque", price: "$68", emoji: "🕯️", color: "#ffe7a0" },
+ { name: "Leather Journal", brand: "Moleskine", price: "$32", emoji: "📓", color: "#ffd3a5" },
+ ];
+
+ return (
+ ([]);
- const timersRef = useRef[]>([]);
+}
+
+function PoolPanel() {
+ const [contributed, setContributed] = useState(false);
+ const progress = contributed ? 87 : 62;
+
+ return (
+
+ );
+}
+
+/* ── Maxi icon (small inline version) ───────────────────────────────── */
+function MaxiIcon({ size = 20 }: { size?: number }) {
+ return (
+
);
}
+/* ── Panel renderer (keyed for remount) ─────────────────────────────── */
+const PANELS: Record
+ {/* Text column */}
+
+ );
+}
+
+export function FeaturesSection() {
+ return (
+
+ {/* Tag */}
+
- {/* Bento grid */}
-
+
-
+
+ {feature.tag}
- {/* Large Maxi card */}
-
- {/* Three smaller cards */}
- {features.slice(1).map((f, i) => (
+ {/* Bullet cards */}
+
+ {feature.headline}
+
+ {feature.headlineAccent} + + +
+ {feature.cta.text}
+ + {feature.headlineAccent} + + +
+ {feature.description} +
+ + -
-
-
- {features[0].number}
-
- {features[0].title}
-{features[0].description}
-
- {features[0].stats.value}
- {features[0].stats.label}
-
-
- {
- (e.currentTarget as HTMLImageElement).style.display = "none";
- }}
- className="absolute inset-0 w-full h-full object-cover object-center"
- />
-
-
- 
{
- (e.currentTarget as HTMLImageElement).style.display = "none";
- }}
- className="absolute inset-0 w-full h-full object-cover object-center"
- />
-
-
+ {feature.bullets.map((b, i) => (
+
-
+
- {f.number}
-
- {f.title}
-{f.description}
-
- {f.stats.value}
- {f.stats.label}
+
))}
+
+ {/* "Alternative to" badges */}
+ {feature.alternatives && (
+
+
+
+
{b.title}
+{b.description}
+
+ Alternative to
+ {feature.alternatives.map((alt) => (
+
+ {alt}
+
+ ))}
+
+ )}
+
+ {/* Section header */}
+
+
+
+ Everything you need
+
+
+ From idea
+
+
+
+ {/* Feature blocks */}
+
+ From idea
+
+ to unwrap.
+
+
+ {FEATURES.map((feature, i) => (
+
+ {/* Top bar */}
+
+ );
+}
+
+function SwipePanel() {
+ const [swiped, setSwiped] = useState(false);
+ const [direction, setDirection] = useState<"left" | "right" | null>(null);
+
+ const handleSwipe = (dir: "left" | "right") => {
+ setDirection(dir);
+ setSwiped(true);
+ setTimeout(() => {
+ setSwiped(false);
+ setDirection(null);
+ }, 600);
+ };
+
+ return (
+
+
+ {/* Search */}
+
+
+
+
+
+
+ {/* Grid */}
+
+
+
+
+
+ {items.map((item, i) => (
+
+
+
+ ))}
+
+ {item.emoji}
+
+
+
+
+ {item.name}
+{item.brand} · {item.price}
+
+
+ );
+}
+
+function GiftPanel() {
+ const [claimed, setClaimed] = useState(false);
- const [letterStates, setLetterStates] = useState<{ opacity: number; blur: number }[]>(
- letters.map(() => ({ opacity: 0, blur: 20 }))
+ return (
+
+ Swipe Challenge
+ 4 of 12
+
+
+
+ {/* Swipe buttons */}
+
+
+
+ 📸
+
+
+
+ Instant Film Camera
+Halo · $79
+
+
+
+
+
+
+
+
+
);
- const [showGradient, setShowGradient] = useState(true);
- const framesRef = useRef
+ Maya's Wishlist
+ 3 items
+
+
+ {[
+ { name: "Instant Film Camera", price: "$79", emoji: "📸", color: "#ffc2d1", claimed: claimed },
+ { name: "Linen Throw Blanket", price: "$129", emoji: "🧶", color: "#bfe3ff", claimed: false },
+ { name: "Matcha Starter Kit", price: "$45", emoji: "🍵", color: "#cde6c5", claimed: false },
+ ].map((item, i) => (
+
+ {/* Tip */}
+
+
+ ))}
+
+ {item.emoji}
+
+
+
+ {i === 0 ? (
+
+ ) : (
+ Open
+ )}
+ {item.name}
+{item.price}
+
+
+ + Maxi tip: Maya saved 3 film cameras on Pinterest last month. This is a lock. +
+
+
+ );
+}
+
+function MaxiPanel() {
+ const [msgIndex, setMsgIndex] = useState(0);
+
+ const messages = [
+ { from: "user", text: "What should I get Maya for her birthday?" },
+ { from: "maxi", text: "Based on Maya's Pinterest saves and Spotify playlists, she's really into film photography and cozy aesthetics. Here are my top 3:" },
+ { from: "maxi", text: "1. Instant Film Camera ($79) — 94% match\n2. Linen Throw Blanket ($129) — 88% match\n3. Vinyl Record Player ($89) — 85% match" },
+ ];
useEffect(() => {
- // reset
- framesRef.current.forEach(cancelAnimationFrame);
- timersRef.current.forEach(clearTimeout);
- framesRef.current = [];
- timersRef.current = [];
-
- // eslint-disable-next-line react-hooks/set-state-in-effect -- animation reset requires imperative state init
- setLetterStates(letters.map(() => ({ opacity: 0, blur: 20 })));
- setShowGradient(true);
-
- // stagger each letter
- letters.forEach((_, i) => {
- const t = setTimeout(() => {
- const start = performance.now();
- const tick = (now: number) => {
- const progress = Math.min((now - start) / DURATION, 1);
- const eased = 1 - Math.pow(1 - progress, 3);
- setLetterStates(prev => {
- const next = [...prev];
- next[i] = { opacity: eased, blur: 20 * (1 - eased) };
- return next;
- });
- if (progress < 1) {
- const id = requestAnimationFrame(tick);
- framesRef.current.push(id);
- }
- };
- const id = requestAnimationFrame(tick);
- framesRef.current.push(id);
- }, i * STAGGER);
- timersRef.current.push(t);
- });
-
- // remove gradient once all letters are settled
- const gt = setTimeout(() => setShowGradient(false), GRADIENT_HOLD);
- timersRef.current.push(gt);
-
- return () => {
- framesRef.current.forEach(cancelAnimationFrame);
- timersRef.current.forEach(clearTimeout);
- };
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [trigger]);
-
- // gradient colours cycling across letter positions (Giftmaxxing warm palette)
- const gradientColors = ["#fb6f52", "#ff9a76", "#ffc2d1", "#ffc24b", "#fb6f52"];
+ if (msgIndex < messages.length - 1) {
+ const timer = setTimeout(() => setMsgIndex(prev => prev + 1), 1200);
+ return () => clearTimeout(timer);
+ }
+ }, [msgIndex, messages.length]);
return (
- <>
- {letters.map((char, i) => {
- const colorIndex = (i / Math.max(letters.length - 1, 1)) * (gradientColors.length - 1);
- const lower = Math.floor(colorIndex);
- const upper = Math.min(lower + 1, gradientColors.length - 1);
- const t = colorIndex - lower;
-
- // lerp hex colours
- const hex2rgb = (hex: string) => {
- const r = parseInt(hex.slice(1, 3), 16);
- const g = parseInt(hex.slice(3, 5), 16);
- const b = parseInt(hex.slice(5, 7), 16);
- return [r, g, b];
- };
- const [r1, g1, b1] = hex2rgb(gradientColors[lower]);
- const [r2, g2, b2] = hex2rgb(gradientColors[upper]);
- const r = Math.round(r1 + (r2 - r1) * t);
- const g = Math.round(g1 + (g2 - g1) * t);
- const b = Math.round(b1 + (b2 - b1) * t);
-
- return (
-
+
+ Gift Pool
+ Active
+
+
+ {/* Gift item */}
+
+ {/* CTA */}
+
+
+ {/* Progress */}
+
+ 🎵
+
+
+
+ Vinyl Record Player
+For Maya's birthday
+
+
+ {/* Contributors */}
+
+ ${Math.round(89 * progress / 100)} raised
+ ${89} goal
+
+
+
+
+
+
+ Contributors
+ {[ + { name: "Jules", amount: "$25", color: "#d9c2ff" }, + { name: "Theo", amount: "$20", color: "#cde6c5" }, + { name: "Priya", amount: "$10", color: "#ffc2d1" }, + ].map((c, i) => ( +
+
+ ))}
+ {contributed && (
+
+ {c.name[0]}
+
+ {c.name}
+ {c.amount}
+
+
+ )}
+
+ Y
+
+ You
+ $22
+
+
+
+
+
+
+ Maxi
+ AI
+
+
+ {messages.slice(0, msgIndex + 1).map((msg, i) => (
+
+ {/* Input */}
+
- {char}
-
- );
- })}
-
+ {msg.from === "maxi" && (
+
+ ))}
+ {msgIndex < messages.length - 1 && (
+
+
+ )}
+
+ {msg.text}
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
{[...Array(8)].map((_, i) => (
-
+
))}
{[...Array(12)].map((_, i) => (
-
+
))}
-
-
-
- {/* Eyebrow */}
-
-
- {/* Scroll indicator */}
-
);
}
-
-
- Social gifting, powered by Maxi
-
-
-
- {/* Main headline */}
-
-
- Know exactly what
-
- they'll{" "}
-
-
-
- {/* Stats — 3 metrics static, no auto-scroll */}
-
- Know exactly what
-
- they'll{" "}
-
-
+ finally figured out.
+
+
+ {/* Subtitle */}
+
+ The all-in-one social gifting app with an AI companion who actually gets their taste.
+
+
+ {/* CTAs */}
+
+
+ Try it now
+
+ {/* Left — copy */}
+
+ {/* Eyebrow */}
+
- {/* Dual CTA */}
-
+
+
+ Social gifting, powered by Maxi
-
-
-
+
-
- Try it now
-
+ finally figured out. + + + {/* Subtitle */} +
+
+ {/* Right — Interactive demo (Railway-style) */}
+ + finally figured out. + + + {/* Subtitle */} +
+ The all-in-one social gifting app with an AI companion who actually gets their taste. +
+ + {/* CTAs */} +
+
+ Try it now
+
+
- Share a challenge
-
-
+ {/* Device frame */}
+
+ {/* Browser chrome */}
+
+
+
+
+
+
+ giftmaxxing.app
+
+
+
+ {/* Panel content — fixed height for consistency */}
+
+
+
+ {/* Tab bar — Railway-style bottom pills */}
+
+
+
+ {TABS.map((tab) => {
+ const active = activeTab === tab.id;
+ const Icon = tab.icon;
+ return (
+
+ );
+ })}
+
+
@@ -241,16 +589,11 @@ export function HeroSection() {
].map((stat) => (
{stat.value}
-
- {stat.label}
-
+ {stat.label}
))}