From e41094a6fd874fe4658b846d7d234579e2bf3d54 Mon Sep 17 00:00:00 2001 From: R-Bharathraj Date: Tue, 21 Jul 2026 05:30:43 +0530 Subject: [PATCH] feat: update story sections, header, footer, styles, and add gsapkit component --- src/app/globals.css | 26 +- src/components/layout/Footer.tsx | 116 ++++-- src/components/layout/Header.tsx | 149 +++++--- src/components/story/SectionsA.tsx | 581 ++++++++++++++++++++++------- src/components/story/SectionsB.tsx | 119 ++++-- src/components/story/gsapkit.tsx | 105 ++++++ src/components/story/ui.tsx | 2 +- 7 files changed, 837 insertions(+), 261 deletions(-) create mode 100644 src/components/story/gsapkit.tsx diff --git a/src/app/globals.css b/src/app/globals.css index 2f5e5b1..8a25e30 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -70,13 +70,33 @@ --hdr-gutter: 48px; } -/* Phones — full-bleed sections, tighter header padding */ +/* Phones — full-bleed sections, tighter header padding, neat eyebrow pills */ @media (max-width: 600px) { :root { - --sec-gutter: 12px; - --sec-gap: 12px; + --sec-gutter: 10px; + --sec-gap: 10px; --hdr-gutter: 20px; } + /* All stacked sections use a 20px (m-5) margin on desktop; tighten to 10px + on phones so side + vertical gaps match the request. */ + section.m-5 { + margin: 10px !important; + } + + /* Eyebrow "Pill" badges — rounded-full + wrapped text turns them into tall + ovals on phones. Shrink type/padding, use a neat rounded-rectangle radius, + and keep the label to one line so they read as tidy tags. */ + .story-pill { + padding: 8px 14px !important; + font-size: 12.5px !important; + line-height: 1.1 !important; + letter-spacing: 0.02em !important; + gap: 7px !important; + border-radius: 14px !important; + border-width: 2.5px !important; + box-shadow: 4px 4px 0 0 #0a0a0a !important; + white-space: nowrap !important; + } } /* Custom Scrollbar — neobrutalist, on-theme (no track border) */ diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index fb56163..3a5c2cd 100644 --- a/src/components/layout/Footer.tsx +++ b/src/components/layout/Footer.tsx @@ -1,10 +1,12 @@ 'use client'; -import { useState, useEffect } from 'react'; +import { useState, useEffect, useRef } from 'react'; import Link from 'next/link'; import Image from 'next/image'; +import { gsap, useGSAP, syncLenisScrollTrigger } from '../story/gsapkit'; const INK = '#0a0a0a'; +const BLUE = '#2F6BFF'; const NAV = [ { @@ -51,8 +53,20 @@ const SOCIALS = [ }, ]; +/* Kinetic ticker phrases + the giant wordmark letters */ +const TICKER = ['Earn', 'Spend', 'Live More', 'Make Everyday Count', 'Join The Loop', 'Real Value']; + +function Star({ size = 22, color = INK }: { size?: number; color?: string }) { + return ( + + ); +} + export default function Footer() { const [showScroll, setShowScroll] = useState(false); + const rootRef = useRef(null); useEffect(() => { const onScroll = () => setShowScroll(window.scrollY > 400); @@ -60,46 +74,82 @@ export default function Footer() { return () => window.removeEventListener('scroll', onScroll); }, []); + useGSAP( + () => { + syncLenisScrollTrigger(); + const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + // Infinite marquee ticker (two identical halves → seamless). + if (!reduce) { + gsap.to('.foot-ticker-track', { xPercent: -50, duration: 22, ease: 'none', repeat: -1 }); + gsap.to('.foot-cta-star', { rotate: 360, duration: 9, ease: 'none', repeat: -1 }); + } + }, + { scope: rootRef }, + ); + return ( <> -