+ {/* Mobile menu overlay */}
+ {mobileOpen && (
+
setMobileOpen(false)}
+ aria-hidden="true"
+ style={{ position: 'fixed', inset: 0, zIndex: 99999998, background: 'rgba(10,4,20,0.6)' }}
+ />
+ )}
+
+ {/* Mobile slide-in panel — night dot-grid, neobrutalist links */}
+
+
+
+
+
+
+
+
+
+
+
+
+ Follow us
+
+
+ {SOCIALS.map(({ href, label, icon }) => (
+
+ {icon}
+
+ ))}
+
+
+
+
setMobileOpen(false)}
+ className="font-sora"
+ style={{
+ display: 'block',
+ marginTop: 'auto',
+ padding: '16px 24px',
+ background: '#FFC72C',
+ color: INK,
+ border: `3px solid ${INK}`,
+ borderRadius: 14,
+ fontWeight: 900,
+ fontSize: 16,
+ textTransform: 'uppercase',
+ textDecoration: 'none',
+ textAlign: 'center',
+ boxShadow: `5px 5px 0 0 ${INK}`,
+ }}
+ >
+ Get Started →
+
+
+
+ {/* ——— Funky neobrutalist floating bar ——— */}
+
+
+ {/* Logo */}
+
+
+
+
+
+
+ {/* Desktop nav — boxy neobrutalist sticker tabs */}
+
+
+ {/* Right actions */}
+
+
+ Get Started
+
+
+ {/* Hamburger — mobile only */}
+
+
+
+
+
+
+ );
+}
+
+/* ——— Inline SVG social icons ——— */
+const SOCIALS = [
+ {
+ label: 'Instagram', href: 'https://instagram.com/lytsup',
+ icon:
,
+ },
+ {
+ label: 'X / Twitter', href: 'https://twitter.com/lytsup',
+ icon:
,
+ },
+ {
+ label: 'YouTube', href: 'https://www.youtube.com/@lytsup',
+ icon:
,
+ },
+];
diff --git a/src/components/layout/ScrollProgress.tsx b/src/components/layout/ScrollProgress.tsx
new file mode 100644
index 0000000..644ef5b
--- /dev/null
+++ b/src/components/layout/ScrollProgress.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+/* Site-wide reading-progress bar — sits at the very top edge and fills with the
+ brand gradient as you scroll. Driven by a rAF lerp so it glides smoothly and
+ works with Lenis smooth-scroll (reads native window.scrollY). */
+export default function ScrollProgress() {
+ const barRef = useRef
(null);
+ const target = useRef(0);
+ const current = useRef(0);
+
+ useEffect(() => {
+ let raf = 0;
+ const tick = () => {
+ // Read scroll position every frame so it tracks regardless of how the
+ // smooth-scroll library emits events.
+ const max = document.documentElement.scrollHeight - window.innerHeight;
+ target.current = max > 0 ? Math.min(1, Math.max(0, window.scrollY / max)) : 0;
+ current.current += (target.current - current.current) * 0.12;
+ if (barRef.current) {
+ barRef.current.style.transform = `scaleX(${current.current.toFixed(4)})`;
+ }
+ raf = requestAnimationFrame(tick);
+ };
+ raf = requestAnimationFrame(tick);
+ return () => cancelAnimationFrame(raf);
+ }, []);
+
+ return (
+
+ );
+}
diff --git a/src/components/story/SectionsA.tsx b/src/components/story/SectionsA.tsx
index c6dbfde..97fab30 100644
--- a/src/components/story/SectionsA.tsx
+++ b/src/components/story/SectionsA.tsx
@@ -1,45 +1,109 @@
-import { Section, Pill, Card, Chip, Heading, Logo, Group, Reveal } from "./ui";
+import { Section, Pill, Card, Chip, Heading, Group, Reveal } from "./ui";
import { C } from "./palette";
/* 01 — INTRO / HERO */
export function Intro() {
return (
- {/* giant watermark */}
-
+ {/* animated ambient glows — soft washes, heavily blurred so no hard edge shows */}
+
+
+
+
+ {/* giant drifting watermark */}
+
LYTS
-
-
-
-
-
-
we built this for you.
-
- social currency is value earned for participating in life.
-
-
a LYTIAN believes every meaningful interaction has value.
-
-
- social
-
- currency
-
- for real life.
-
-
-
- "earn. spend. live more."
-
- a quiet belief that everyday moments matter.
+
+
+ {/* eyebrow badge */}
+
+
+
+
+
-
-
+ social currency, reimagined
+
+
+
+ {/* eyebrow copy */}
+
+
+
we built this for you.
+
+ social currency is value earned for participating in life.
+
+
a LYTIAN believes every meaningful interaction has value.
+
+ social
+ currency
+
+
+ for{" "}
+
+ real life.
+
+
+
+
+
+ {/* CTA buttons */}
+
+
+
+
+ {/* tagline chip */}
+
+
+
+ "earn. spend. live more."
+
+ a quiet belief that everyday moments matter.
+
+
+
+
-
-
-
psst
- make everyday count.
+
+ {/* floating reward stickers (desktop) */}
+
+
+ +50 LYTs
+
+
+ 🔥 7-day streak
+
+
+ 🎁 rewards unlocked
+
+
+
+ {/* rotating "make everyday count" badge — pinned to the right, vertically centered */}
+
+
+
+
psst
+ make everyday count.
+
@@ -78,7 +142,7 @@ export function TheWhy() {
- 🎬 DISCOVER ON TIKTOK
+ 🎬 DISCOVER ON SOCIAL MEDIA
brand relationships start before purchase
diff --git a/src/components/story/SectionsB.tsx b/src/components/story/SectionsB.tsx
index 88f467a..22d7e24 100644
--- a/src/components/story/SectionsB.tsx
+++ b/src/components/story/SectionsB.tsx
@@ -231,22 +231,20 @@ export function OurBelief() {
return (
-
- 🌱 our belief
-
+
🌱 our belief
-
-
1
-
- traditional loyalty begins when you SPEND.
+
+
+ 1
+
+ traditional loyalty begins when you SPEND.
-
-
2
-
-
- LYTs begins when you ENGAGE.
+
+
2
+
+
+ LYTs begins when you ENGAGE.