diff --git a/components/sections/hero.tsx b/components/sections/hero.tsx index 6d093e11..f4f1e80e 100644 --- a/components/sections/hero.tsx +++ b/components/sections/hero.tsx @@ -1,230 +1,341 @@ "use client" -import { Badge } from "@/components/ui/badge"; -import { StatCard } from "@/components/cards/stat-card"; -import { Wallet, ArrowRight, TrendingUp, Globe, BarChart3, CheckCircle2, Coins } from "lucide-react"; -import { HERO_STATS } from "../constants/data"; -import { GradientButton } from "../ui/gradient-button"; -import { useEffect, useState } from "react"; -import ConnectWalletButton from "../ui/connectWalletButton"; -import { ConnectWalletModal } from "../connect-wallet-modal"; -import { Button } from "@/components/ui/button"; -import { Card } from "@/components/ui/card"; -import KpiStrip from "@/app/(marketing)/_sections/kpi-strip"; - -import { useParallax } from "@/hooks/use-parallax"; + +/** + * Hero — main landing section + * + * Visual style pass (feat/hero-visual-pass): + * + * 1. KERNING + * The headline uses three explicit letter-spacing steps tied to breakpoints: + * mobile (default) → tracking-tight (-0.025em) + * tablet (sm) → tracking-tighter (-0.035em) + * desktop (lg) → tracking-[-0.045em] (custom inline, max optical tightness) + * The "Earn." word — rendered inside a coloured pill — uses slightly looser + * spacing (+0.01em) so the enclosed text doesn't feel cramped. + * + * 2. GRADIENT MESH BACKGROUND + * The section uses a layered approach to eliminate banding: + * a) SVG mesh (public/assets/hero-mesh.svg) as an background — + * three offset radial gradients that never share a colour boundary. + * b) A CSS radial-gradient overlay that softly blends the mesh edges + * into the surrounding page gradient. + * No hard linear-gradient stops remain inside the hero itself. + * + * 3. CTA HIERARCHY + * Primary CTA → solid filled (indigo-600, hover indigo-700), full shadow ring + * Secondary CTA → ghost variant, smaller (size="sm"), lower opacity label + * The visual weight difference makes the intended action unambiguous. + */ + +import { ArrowRight, TrendingUp, Globe, BarChart3, CheckCircle2, Coins } from "lucide-react" +import { useEffect, useState } from "react" +import { Button } from "@/components/ui/button" +import { Card } from "@/components/ui/card" +import { useParallax } from "@/hooks/use-parallax" +import { ConnectWalletModal } from "../connect-wallet-modal" export function Hero() { - const [isMounted, setIsMounted] = useState(false); - const [isWalletModalOpen, setIsWalletModalOpen] = useState(false); - const [isConnected, setIsConnected] = useState(false); - const [walletName, setWalletName] = useState(null); - const [walletAddress, setWalletAddress] = useState(null); - - // Parallax hook for the main marketing card (depth 12px) - const cardRef = useParallax({ depth: 12 }); - // Parallax hook for a background element (depth -8px for counter-movement) - const bgRef = useParallax({ depth: -8 }); - - // Listen for global open-connect-wallet event from navbar/drawer - useEffect(() => { - const handler = () => setIsWalletModalOpen(true) - document.addEventListener("open-connect-wallet", handler as EventListener) - return () => document.removeEventListener("open-connect-wallet", handler as EventListener) - }, []) - - const handleWalletConnect = (name: string, address: string) => { - setIsConnected(true); - setWalletName(name); - setWalletAddress(address); - setIsWalletModalOpen(false); - }; - - const handleWalletDisconnect = () => { - setIsConnected(false); - setWalletName(null); - setWalletAddress(null); - }; - return ( -
- {/* Decorative Parallax Background Element */} -
+ const [isWalletModalOpen, setIsWalletModalOpen] = useState(false) + const [isConnected, setIsConnected] = useState(false) + const [walletName, setWalletName] = useState(null) + const [walletAddress, setWalletAddress] = useState(null) - {/* Content Container */} -
-
- {/* Left Column - Hero Content */} -
- {/* Badge */} -
- The Future of Prediction Markets -
+ // Parallax refs — same depths as before, preserved for parity + const cardRef = useParallax({ depth: 12 }) + const bgRef = useParallax({ depth: -8 }) - {/* Main Heading */} -
-

Predict.

-

Repeat.

-
-

Earn.

-
-
+ // Listen for global open-connect-wallet event from navbar / drawer + useEffect(() => { + const handler = () => setIsWalletModalOpen(true) + document.addEventListener("open-connect-wallet", handler as EventListener) + return () => document.removeEventListener("open-connect-wallet", handler as EventListener) + }, []) - {/* Description */} -

- Join the decentralized prediction platform where your insights turn into rewards. Powered by blockchain - technology for transparent and instant payouts. -

- - {/* CTA Buttons */} -
- - -
+ const handleWalletConnect = (name: string, address: string) => { + setIsConnected(true) + setWalletName(name) + setWalletAddress(address) + setIsWalletModalOpen(false) + } - {/* User Count */} -
-
-
-
-
-
-

Join 10,000+ predictors worldwide

-
+ const handleWalletDisconnect = () => { + setIsConnected(false) + setWalletName(null) + setWalletAddress(null) + } + + return ( + <> + {/* ── Section wrapper ────────────────────────────────────────────────── + overflow-hidden clips the mesh SVG and the parallax orb so they + don't bleed past the section boundary on narrow viewports. */} +
+ + {/* ── Gradient mesh background (fix #2) ────────────────────────────── + The SVG is an so it counts as a single network request and + is decoded off the main thread. object-cover keeps the aspect + ratio correct at any viewport width. + The radial CSS overlay above it blends the mesh into the page + gradient, removing the hard edge where the section begins/ends. */} +