import React, { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Menu, X, ArrowRight, ArrowUpRight, MapPin, Phone, Instagram, Mail, Cpu, Droplet, Home as HomeIcon, Gamepad2, Shirt, Snowflake, Sparkles } from 'lucide-react'; const categories = [ { name: 'TECH & GEAR', subtitle: 'Gadgets worth the counter space', image: 'https://images.unsplash.com/photo-1628911774602-74a0cfee9b0d?w=900&auto=format&fit=crop', span: 'lg', }, { name: 'BODY & CARE', subtitle: 'Rituals, simplified', image: 'https://images.unsplash.com/photo-1714479140002-62d1824fffb5?w=700&auto=format&fit=crop', span: 'sm', }, { name: 'STREET STYLE', subtitle: 'The full fit, sorted', image: 'https://images.unsplash.com/photo-1544441893-675973e31985?w=700&auto=format&fit=crop', span: 'sm', }, { name: 'HOME EDIT', subtitle: 'Objects that earn their shelf', icon: HomeIcon, span: 'sm', }, { name: 'PLAY & LEISURE', subtitle: 'For the hours off the clock', icon: Gamepad2, span: 'sm', }, { name: 'SEASONAL DROPS', subtitle: 'Here for a moment, then gone', icon: Snowflake, span: 'sm', }, ]; const drops = [ { name: 'IRON & OAK', tag: 'Everyday carry', blurb: 'Hard-wearing bags and accessories built to actually take a beating.', icon: Shirt, color: 'from-lime-400 to-emerald-500', }, { name: 'BLOOM LAB', tag: 'Skin & body', blurb: 'Small-batch skincare, reformulated until the ingredient list made sense.', icon: Droplet, color: 'from-emerald-400 to-teal-500', }, { name: 'SALT & ASH', tag: 'Home objects', blurb: 'Tableware and candles from makers who still answer their own email.', icon: Sparkles, color: 'from-teal-400 to-lime-500', }, ]; const locations = [ { name: 'EAST DRIVE', address: '148 Ashgrove Ave, Portside', phone: '(555) 019-2244' }, { name: 'SOUTH CITY', address: '62 Marlow Street, Downtown', phone: '(555) 019-2245' }, { name: 'NORTH BLOCK', address: '9 Fenwick Court, Uptown', phone: '(555) 019-2246' }, { name: 'MILL QUARTER', address: '311 Cooper Lane, Millside', phone: '(555) 019-2247' }, ]; const fadeUp = { hidden: { opacity: 0, y: 24 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }, }; const stagger = { hidden: {}, visible: { transition: { staggerChildren: 0.08 } }, }; export default function App() { const [menuOpen, setMenuOpen] = useState(false); const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); return (

{/* Nav */} {/* Hero */}

SHOP

THE FULL EDIT

VERGE

NEW DROPS WEEKLY

SCROLL

{/* Statement */}

BUILT DIFFERENT Verge exists for people who don't shop off a script. We mix the practical with the unexpected — gear that works, pieces that turn heads, and everything in between. EXPLORE THE EDIT

{/* Category Grid */}

Brand collabs that keep the aisles shifting

{drops.map((drop) => { const Icon = drop.icon; return (

{drop.tag}

{drop.name}

{drop.blurb}

); })}

{/* Drop Zones / Locations */}

DROP ZONES

Find us on the ground

{locations.map((loc) => (

{loc.name}

{loc.address}

{loc.phone}

))}

{/* Contact / Footer */}

); }

Streetwear Concept Store