/* nav-hero.jsx — sticky nav + editorial hero with draggable profile card stack */ const Icon = { Check: ({ size = 14 }) => , Arrow: ({ size = 14 }) => , Heart: ({ size = 22 }) => , X: ({ size = 20 }) => , Lock: ({ size = 14 }) => , Shield: ({ size = 24 }) => , Verified: ({ size = 24 }) => , Filters: ({ size = 24 }) => , Chat: ({ size = 24 }) => , Star: ({ size = 24 }) => , Concierge: ({ size = 24 }) => , Apple: ({ size = 22 }) => , Play: ({ size = 22 }) => }; function Nav() { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); } /* ─── Card stack ─────────────────────────────────────────────────────────── */ const PROFILES = [ { alias: "Mira S.", name: "Meera Shrestha", age: 28, prof: "Architect", loc: "Kathmandu → Brooklyn", tags: ["Newar", "Hindu", "Veg"], photo: "assets/profile-mira-blurred.png", blurred: true, preBlurred: true }, { alias: "Aarav T.", name: "Aarav Thapa", age: 31, prof: "Software Engineer", loc: "Pokhara → Atlanta", tags: ["Chhetri", "Hindu", "Non-veg"], photo: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=900&q=80", blurred: false }, { alias: "Sneha R.", name: "Sneha Rai", age: 26, prof: "Pediatric Doctor", loc: "Lalitpur → London", tags: ["Kirat", "Veg"], photo: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=900&q=80", blurred: true }, { alias: "Rohan K.", name: "Rohan KC", age: 30, prof: "MBA · Finance", loc: "Biratnagar → Toronto", tags: ["Chhetri", "Hindu"], photo: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=900&q=80", blurred: false }]; function Card({ profile, depth, total, onSwipe }) { const ref = React.useRef(null); const [drag, setDrag] = React.useState(null); // {dx, dy, dragging} React.useEffect(() => { if (depth !== 0) return; const el = ref.current;if (!el) return; let start = null; const onDown = (e) => { const p = e.touches ? e.touches[0] : e; start = { x: p.clientX, y: p.clientY }; setDrag({ dx: 0, dy: 0, dragging: true }); el.classList.add("is-dragging"); }; const onMove = (e) => { if (!start) return; const p = e.touches ? e.touches[0] : e; const dx = p.clientX - start.x; const dy = p.clientY - start.y; setDrag({ dx, dy, dragging: true }); }; const onUp = () => { if (!start) return; el.classList.remove("is-dragging"); setDrag((d) => { if (!d) return null; const threshold = 110; if (Math.abs(d.dx) > threshold) { const dir = d.dx > 0 ? 1 : -1; // animate off-screen setDrag({ dx: dir * 800, dy: d.dy + 80, dragging: false }); setTimeout(() => {onSwipe(dir);setDrag(null);}, 380); } else { setDrag({ dx: 0, dy: 0, dragging: false }); setTimeout(() => setDrag(null), 400); } }); start = null; }; el.addEventListener("mousedown", onDown); window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); el.addEventListener("touchstart", onDown, { passive: true }); window.addEventListener("touchmove", onMove, { passive: true }); window.addEventListener("touchend", onUp); return () => { el.removeEventListener("mousedown", onDown); window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); el.removeEventListener("touchstart", onDown); window.removeEventListener("touchmove", onMove); window.removeEventListener("touchend", onUp); }; }, [depth, onSwipe]); const baseY = depth * 14; const scale = 1 - depth * 0.05; const rot = drag ? drag.dx * 0.06 : 0; const tx = drag ? drag.dx : 0; const ty = drag ? drag.dy : 0; const opacity = depth > 2 ? 0 : 1 - depth * 0.05; return (
Verified {profile.blurred && Private photo }
{profile.blurred ? profile.alias : profile.name}, {profile.age}
{profile.prof} · {profile.loc}
{profile.tags.map((t) => {t} )}
); } function CardStack() { const [idx, setIdx] = React.useState(0); const order = React.useMemo(() => { return Array.from({ length: PROFILES.length }, (_, i) => PROFILES[(idx + i) % PROFILES.length]); }, [idx]); const advance = () => setIdx((i) => (i + 1) % PROFILES.length); const cards = order.slice(0, 3).reverse(); // render back to front return (
{cards.map((p, i) => { const depth = cards.length - 1 - i; return ( ); })}
); } function Hero() { return (
Nepali matrimony, modern by design

Find the one
who fits your life,
not just your feed.

Lahmee is a privacy-first matrimony app built for Nepalis who are serious about a life partner. Blur your photos, use an alias, and only reveal yourself to people who match your values.

Real couples across the global Nepali diaspora.
100% verified · Privacy-first by default
{/* ornaments */}
); } function Pillar({ k, v }) { return (
{k}
{v}
); } function StatBar() { const stats = [ { v: "10K+", k: "Registered members" }, { v: "200+", k: "Matched & counting" }, { v: "20+", k: "Countries worldwide" }, ]; return (
{stats.map((s) => (
{s.v}
{s.k}
))}
); } Object.assign(window, { Nav, Hero, StatBar, Icon, PROFILES });