From 03ed08d7dda6e9fe8f226a232dd71dd2f72f3868 Mon Sep 17 00:00:00 2001 From: R-Bharathraj Date: Sat, 11 Jul 2026 12:38:33 +0530 Subject: [PATCH] updated sections design and content --- src/app/about_us/page.tsx | 100 +++++- src/app/globals.css | 21 ++ src/app/solutions_page/page.tsx | 68 ++-- src/app/use_cases/page.tsx | 297 ++++++++++-------- src/components/Footer.tsx | 14 +- src/components/Header.tsx | 4 +- src/components/ScrollStack.css | 1 + src/components/ScrollStack.tsx | 31 +- .../for-people/DiscoverDealsSection.tsx | 38 +-- .../for-people/EarnRewardsSection.tsx | 4 +- .../for-people/ExperienceSection.tsx | 2 +- src/components/for-people/FinalCTASection.tsx | 2 +- src/components/for-people/HeroSection.tsx | 20 +- .../for-people/LytsUniverseSection.tsx | 4 +- src/components/for-people/PillarsSection.tsx | 6 +- .../for-people/SpendAnywhereSection.tsx | 2 +- .../for-people/WhyLoyalySection.tsx | 6 +- src/components/home/HeroContent.tsx | 9 - src/components/home/LytsUpSection.tsx | 201 ++++++++++-- src/components/home/ProblemSection.tsx | 216 ++++++++++--- src/components/home/ProductsSection.tsx | 12 +- src/components/home/ShiftSection.tsx | 138 +++++--- src/components/home/WhatWeDo.tsx | 92 +++--- src/components/home/heroCarouselData.ts | 24 +- 24 files changed, 907 insertions(+), 405 deletions(-) diff --git a/src/app/about_us/page.tsx b/src/app/about_us/page.tsx index 5e52552..dbece88 100644 --- a/src/app/about_us/page.tsx +++ b/src/app/about_us/page.tsx @@ -87,27 +87,65 @@ export default function AboutUsPage() { {/* โ”€โ”€ MISSION & VISION โ”€โ”€ */} -
-
+
+ {/* Ambient top glow */} +
+ + {/* Section header */} +
+

+ What drives everything we do. +

+
+ +
{[ { - label: 'Mission', bg: '#07070d', textColor: '#fff', accent: '#f4be28', + label: 'Mission', emoji: '๐ŸŽฏ', bg: 'linear-gradient(160deg, #ffffff 0%, #fdf4e2 100%)', textColor: '#171512', + border: 'rgba(244,190,40,0.45)', + pillBg: 'rgba(244,190,40,0.14)', pillText: '#8a5a14', pillBorder: 'rgba(244,190,40,0.5)', + orb1: 'rgba(244,190,40,0.20)', orb2: 'rgba(255,152,0,0.14)', + gfx: 'rgba(244,190,40,0.38)', body: 'Loyaly exists to close the gap between digital discovery and physical purchase. We give local stores the tools to compete, and give shoppers a reason to keep coming back.', }, { - label: 'Vision', bg: '#f4be28', textColor: '#111', accent: '#c9960f', - body: 'Empowering every neighbourhood, making exceptional in-store experiences and real rewards accessible to all.', + label: 'Vision', emoji: '๐Ÿ”ฎ', bg: 'linear-gradient(160deg, #fff7e2 0%, #ffe6a8 100%)', textColor: '#171512', + border: 'rgba(244,190,40,0.55)', + pillBg: '#f4be28', pillText: '#171512', pillBorder: 'rgba(201,150,15,0.6)', + orb1: 'rgba(255,255,255,0.7)', orb2: 'rgba(244,190,40,0.3)', + gfx: 'rgba(201,150,15,0.32)', + body: 'Empowering every neighbourhood, making exceptional in-store experiences and real Lyts accessible to all.', }, ].map((mv, i) => ( -
-
{mv.label}
-

+ {/* Animated background orbs (clipped to the card) */} +

+ + +
+ + {/* Pop-out corner sticker */} + {mv.emoji} + + {/* Tilted sticker-pill label */} + {mv.emoji} {mv.label} + +

{mv.body}

@@ -178,6 +216,46 @@ export default function AboutUsPage() {
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index f757efe..e7790d6 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -10,7 +10,7 @@ const NAV = [ links: [ { label: 'For People', href: '/for_people' }, { label: 'For Business', href: '/use_cases' }, - { label: 'Meet the Crew', href: '/solutions_page' }, + { label: 'Meet the Agents', href: '/solutions_page' }, ], }, { @@ -119,9 +119,13 @@ export default function Footer() { alignItems: 'start', }}> {/* Brand */} -
- - Loyaly.AI +
+ + {/* logo-dark.png is 250x150 with the wordmark in the middle strip (y 58โ€“107); + an overflow box crops the transparent top/bottom padding so it fills at size */} + + Loyaly.AI +

AI powered retail intelligence that turns every walk in into a loyal customer. @@ -195,7 +199,7 @@ export default function Footer() { @media (max-width: 560px) { .ly-footer-heading { font-size: clamp(30px, 9vw, 44px) !important; } .ly-footer-columns { grid-template-columns: 1fr !important; gap: 32px !important; } - .ly-footer-brand img { height: 110px !important; } + .ly-footer-logo { width: 260px !important; } .ly-footer-bottom { gap: 16px !important; } .ly-footer-bottom > div { gap: 18px !important; } } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 86211f8..338b0ce 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -9,9 +9,9 @@ const NAV_LINKS = [ { label: 'Home', href: '/' }, { label: 'For People', href: '/for_people' }, { label: 'For Business', href: '/use_cases' }, - { label: 'Meet the Crew', href: '/solutions_page' }, - { label: 'Blogs', href: '/blog_main' }, + { label: 'Meet the Agents', href: '/solutions_page' }, { label: 'About us', href: '/about_us' }, + { label: 'Blogs', href: '/blog_main' }, ]; const MOBILE_QUERY = '(max-width: 1023px)'; diff --git a/src/components/ScrollStack.css b/src/components/ScrollStack.css index 797ff8e..a8f812f 100644 --- a/src/components/ScrollStack.css +++ b/src/components/ScrollStack.css @@ -31,6 +31,7 @@ -webkit-transform: translateZ(0); transform: translateZ(0); position: relative; + transition: opacity 0.35s ease; } .scroll-stack-end { diff --git a/src/components/ScrollStack.tsx b/src/components/ScrollStack.tsx index d618d18..485f99e 100644 --- a/src/components/ScrollStack.tsx +++ b/src/components/ScrollStack.tsx @@ -27,6 +27,7 @@ interface ScrollStackProps { scaleDuration?: number; rotationAmount?: number; blurAmount?: number; + hideBehind?: boolean; useWindowScroll?: boolean; onStackComplete?: () => void; } @@ -42,6 +43,7 @@ const ScrollStack = ({ baseScale = 0.85, rotationAmount = 0, blurAmount = 0, + hideBehind = false, useWindowScroll = false, onStackComplete, }: ScrollStackProps) => { @@ -122,6 +124,14 @@ const ScrollStack = ({ const endElementTop = endTopRef.current; + // Which card is currently on top of the stack (used for blur + hide-behind) + let topCardIndex = 0; + for (let j = 0; j < cardsRef.current.length; j++) { + const jCardTop = cardTopsRef.current[j] ?? 0; + const jTriggerStart = jCardTop - stackPositionPx - itemStackDistance * j; + if (scrollTop >= jTriggerStart) topCardIndex = j; + } + cardsRef.current.forEach((card, i) => { if (!card) return; @@ -137,20 +147,14 @@ const ScrollStack = ({ const rotation = rotationAmount ? i * rotationAmount * scaleProgress : 0; let blur = 0; - if (blurAmount) { - let topCardIndex = 0; - for (let j = 0; j < cardsRef.current.length; j++) { - const jCardTop = cardTopsRef.current[j] ?? 0; - const jTriggerStart = jCardTop - stackPositionPx - itemStackDistance * j; - if (scrollTop >= jTriggerStart) { - topCardIndex = j; - } - } + if (blurAmount && i < topCardIndex) { + const depthInStack = topCardIndex - i; + blur = Math.max(0, depthInStack * blurAmount); + } - if (i < topCardIndex) { - const depthInStack = topCardIndex - i; - blur = Math.max(0, depthInStack * blurAmount); - } + // Hide cards stacked behind the current top card entirely + if (hideBehind) { + card.style.opacity = i < topCardIndex ? '0' : '1'; } let translateY = 0; @@ -207,6 +211,7 @@ const ScrollStack = ({ baseScale, rotationAmount, blurAmount, + hideBehind, useWindowScroll, onStackComplete, calculateProgress, diff --git a/src/components/for-people/DiscoverDealsSection.tsx b/src/components/for-people/DiscoverDealsSection.tsx index ce3c24e..846c8ac 100644 --- a/src/components/for-people/DiscoverDealsSection.tsx +++ b/src/components/for-people/DiscoverDealsSection.tsx @@ -12,9 +12,9 @@ if (typeof window !== 'undefined') gsap.registerPlugin(ScrollTrigger); const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect; const TAGS = [ - { label: 'Live coupons', icon: '๐ŸŽŸ๏ธ' }, - { label: 'Nearby stores', icon: '๐Ÿ“' }, - { label: 'Game-based deals', icon: '๐ŸŽฎ' }, + { label: 'Earn as you live', icon: 'โšก' }, + { label: 'Play to win', icon: '๐ŸŽฎ' }, + { label: 'Spend anywhere', icon: '๐Ÿ›๏ธ' }, ]; export default function DiscoverDealsSection() { @@ -54,10 +54,10 @@ export default function DiscoverDealsSection() {

{/* Background photo */} - +
{/* Soft radial โ€” drifts with parallax for depth */} @@ -71,37 +71,23 @@ export default function DiscoverDealsSection() { {/* Headline column */}
-
Discover01
+
Meet LytsUp01

- Every - deal in - your city. + The app that + rewards you for + living your life.

- Find participating stores nearby and see their active game based discount campaigns, live coupons, and LYTs earning opportunities, all surfaced in real time so you never miss a deal. + LytsUp turns everyday moments โ€” walking, playing, exploring, shopping โ€” into LYTs you can spend instantly at the brands you love.

-
+
{TAGS.map((tag) => ( {tag.label} ))}
- - - - - - )} - > - Coimbatore, TN -
{/* Discover GIF */} @@ -117,7 +103,7 @@ export default function DiscoverDealsSection() { {/* eslint-disable-next-line @next/next/no-img-element */} Discover deals in the Loyaly.AI app diff --git a/src/components/for-people/EarnRewardsSection.tsx b/src/components/for-people/EarnRewardsSection.tsx index 291ceb6..fc7d1ed 100644 --- a/src/components/for-people/EarnRewardsSection.tsx +++ b/src/components/for-people/EarnRewardsSection.tsx @@ -81,7 +81,7 @@ export default function EarnRewardsSection() {
@@ -103,7 +103,7 @@ export default function EarnRewardsSection() {
{earnTags.map((tag) => ( - {tag.label} Lyts + {tag.label} ))}
diff --git a/src/components/for-people/ExperienceSection.tsx b/src/components/for-people/ExperienceSection.tsx index 83fe4a4..0ce6901 100644 --- a/src/components/for-people/ExperienceSection.tsx +++ b/src/components/for-people/ExperienceSection.tsx @@ -83,7 +83,7 @@ export default function ExperienceSection() { fontSize: 16, lineHeight: 1.85, color: 'rgba(7, 7, 13, 0.75)', fontFamily: 'Sora, sans-serif', margin: '0 0 36px', maxWidth: 360, fontWeight: 500, }}> - No plastic cards. No coupon hunting. No app open required at checkout. Loyaly works quietly in the background while you shop the way you always have. + No plastic cards. No coupon hunting. No app open required at checkout. LytsUp works quietly in the background while you shop the way you always have.

diff --git a/src/components/for-people/FinalCTASection.tsx b/src/components/for-people/FinalCTASection.tsx index 6f06cf6..b263ea5 100644 --- a/src/components/for-people/FinalCTASection.tsx +++ b/src/components/for-people/FinalCTASection.tsx @@ -30,7 +30,7 @@ function useMagnetic() { const PROOF = [ { val: '50K+', label: 'Active users', color: '#f4be28', icon: '๐Ÿ‘ฅ', iconBg: '#fffbeb' }, { val: '10K+', label: 'Partner stores', color: '#16a34a', icon: '๐Ÿฌ', iconBg: '#f0fdf4' }, - { val: 'โ‚น28L+', label: 'Rewards given', color: '#2563eb', icon: '๐ŸŽ', iconBg: '#eff6ff' }, + { val: 'โ‚น28L+', label: 'Lyts given', color: '#2563eb', icon: '๐ŸŽ', iconBg: '#eff6ff' }, { val: '4.9โ˜…', label: 'App rating', color: '#9333ea', icon: 'โญ', iconBg: '#faf5ff' }, ]; diff --git a/src/components/for-people/HeroSection.tsx b/src/components/for-people/HeroSection.tsx index 0f0d7c2..b96dc19 100644 --- a/src/components/for-people/HeroSection.tsx +++ b/src/components/for-people/HeroSection.tsx @@ -63,23 +63,33 @@ export default function HeroSection() { fontSize: 'clamp(40px, 5.4vw, 82px)', fontWeight: 800, lineHeight: 1.02, letterSpacing: '-0.045em', color: '#fff', margin: '50px 0 28px', fontFamily: 'Sora, sans-serif', }}> - Get Lit. - Live More. + Earn LYTs. + Lit Yourself.

- Meet Lyts: rewards for the things you already do. Walk, play, explore, shop, or complete a challenge, then spend your Lyts instantly at the brands you love. No waiting. No cashback. No complicated redemption. + Every purchase unlocks more than points. Earn LYTs, discover experiences, and make every shopping trip count. +

+ +

+ Shop nearby, collect LYTs, unlock exclusive drops, and become part of a living ecosystem designed around you.

+
diff --git a/src/components/for-people/LytsUniverseSection.tsx b/src/components/for-people/LytsUniverseSection.tsx index 023b9b6..d397d6b 100644 --- a/src/components/for-people/LytsUniverseSection.tsx +++ b/src/components/for-people/LytsUniverseSection.tsx @@ -51,11 +51,11 @@ export default function LytsUniverseSection() {

Welcome to the - World of Lyts. + World of Lytians.

- A world where every action has value. Meet the Lytians, real people with real stories and real rewards, straight from the app. + A world where every action has value. Meet the Lytians, real people with real stories and real Lyts, straight from the app.

diff --git a/src/components/for-people/PillarsSection.tsx b/src/components/for-people/PillarsSection.tsx index 740ea15..2c0b9f6 100644 --- a/src/components/for-people/PillarsSection.tsx +++ b/src/components/for-people/PillarsSection.tsx @@ -11,14 +11,14 @@ const PILLARS = [ }, { n: '02', - title: 'Earn Rewards', + title: 'Earn Lyts', desc: 'Every rupee spent earns LYT points. Zero expiry. Redeem anytime, at any partner store.', color: '#16a34a', }, { n: '03', title: 'Make It a Pleasure', - desc: 'Shopping should feel good. Loyaly makes every trip more rewarding, more fun, and more personal.', + desc: 'Shopping should feel good. LytsUp makes every trip more rewarding, more fun, and more personal.', color: '#a78bfa', }, ]; @@ -41,7 +41,7 @@ export default function PillarsSection() { fontSize: 16, lineHeight: 1.8, color: '#4f463a', margin: '0 0 56px', fontFamily: 'Sora, sans-serif', maxWidth: 560, }}> - Earn Loyaly rewards on everyday shopping, from groceries to fashion to home essentials. Every purchase brings you closer to your next reward. + Earn Lyts on everyday shopping, from groceries to fashion to home essentials. Every purchase brings you closer to your next Lyt.

diff --git a/src/components/for-people/SpendAnywhereSection.tsx b/src/components/for-people/SpendAnywhereSection.tsx index 0cbfd48..7ea40e4 100644 --- a/src/components/for-people/SpendAnywhereSection.tsx +++ b/src/components/for-people/SpendAnywhereSection.tsx @@ -72,7 +72,7 @@ export default function SpendAnywhereSection() { fontSize: 'clamp(17px, 1.7vw, 21px)', lineHeight: 1.3, color: '#fff', fontFamily: 'Sora, sans-serif', margin: 0, fontWeight: 800, letterSpacing: '-0.02em', }}> - One Wallet. Thousands of Rewards. + One Wallet. Thousands of Lyts.

diff --git a/src/components/for-people/WhyLoyalySection.tsx b/src/components/for-people/WhyLoyalySection.tsx index 79d39da..b443c39 100644 --- a/src/components/for-people/WhyLoyalySection.tsx +++ b/src/components/for-people/WhyLoyalySection.tsx @@ -32,7 +32,7 @@ export default function WhyLoyalySection() { const bars = [ { label: 'Online retail rewards', pct: 78, color: '#171512' }, { label: 'Offline retail rewards', pct: 2, color: '#bc7122' }, - { label: 'Loyaly target', pct: 60, color: '#f4be28' }, + { label: 'LytsUp target', pct: 60, color: '#f4be28' }, ]; return ( @@ -77,7 +77,7 @@ export default function WhyLoyalySection() { {[ { val: 'โ‚น2.1L Cr', label: 'Offline retail market size', accent: '#171512' }, { val: '<2%', label: 'Currently getting rewards', accent: '#bc7122' }, - { val: '10Cr+', label: 'Shoppers Loyaly can reach', accent: '#16a34a' }, + { val: '10Cr+', label: 'Shoppers LytsUp can reach', accent: '#16a34a' }, ].map((m, i) => (
- India's offline retail market is worth โ‚น2.1 lakh crore. Yet rewards penetration sits at effectively zero. Loyaly exists to close that gap, permanently. + India's offline retail market is worth โ‚น2.1 lakh crore. Yet rewards penetration sits at effectively zero. LytsUp exists to close that gap, permanently.

{/* Data bars */} diff --git a/src/components/home/HeroContent.tsx b/src/components/home/HeroContent.tsx index ad75ef1..8ab965e 100644 --- a/src/components/home/HeroContent.tsx +++ b/src/components/home/HeroContent.tsx @@ -10,7 +10,6 @@ interface HeroContentProps { } export default function HeroContent({ slide }: HeroContentProps) { - const badgeRef = useRef(null); const headlineRef = useRef(null); const descRef = useRef(null); const ctaRef = useRef(null); @@ -23,14 +22,11 @@ export default function HeroContent({ slide }: HeroContentProps) { : []; const desc = descRef.current; const cta = ctaRef.current; - const badge = badgeRef.current; gsap.set(wordEls, { yPercent: 120, opacity: 0, rotateZ: 4 }); gsap.set([desc, cta], { opacity: 0, y: 24 }); - gsap.set(badge, { opacity: 0, y: -12, scale: 0.92 }); const tl = gsap.timeline({ defaults: { ease: 'power4.out' } }); - tl.to(badge, { opacity: 1, y: 0, scale: 1, duration: 0.6 }, 0); tl.to( wordEls, { yPercent: 0, opacity: 1, rotateZ: 0, duration: 1, stagger: 0.055 }, @@ -44,11 +40,6 @@ export default function HeroContent({ slide }: HeroContentProps) { return (
-
- - {slide.badge} -
-

{words.map((word, i) => { const isHighlighted = slide.highlightWords.includes(word); diff --git a/src/components/home/LytsUpSection.tsx b/src/components/home/LytsUpSection.tsx index 32c44b4..7a84c94 100644 --- a/src/components/home/LytsUpSection.tsx +++ b/src/components/home/LytsUpSection.tsx @@ -43,10 +43,12 @@ export default function LytsUpSection({ isLoaded = true }: LytsUpSectionProps) { const tl = gsap.timeline({ scrollTrigger: { trigger: '.lytsup-header', start: 'top 85%', toggleActions: 'play none none none' }, }); - tl.fromTo('.lytsup-word-inner', { yPercent: 115, rotate: 4 }, { yPercent: 0, rotate: 0, duration: 0.85, stagger: 0.08, ease: 'expo.out' }, 0) - .fromTo('.lytsup-sticker-wrap', { opacity: 0, scale: 0.4, rotate: 16 }, { opacity: 1, scale: 1, rotate: -4, duration: 0.7, ease: 'back.out(2.2)' }, 0.18) + tl.fromTo('.lytsup-eyebrow', { opacity: 0, y: -12 }, { opacity: 1, y: 0, duration: 0.6, ease: 'power3.out' }, 0) + .fromTo('.lytsup-word-inner', { yPercent: 115, rotate: 4 }, { yPercent: 0, rotate: 0, duration: 0.85, stagger: 0.08, ease: 'expo.out' }, 0.05) + .fromTo('.lytsup-sticker-wrap', { opacity: 0, scale: 0.4, rotate: 16 }, { opacity: 1, scale: 1, rotate: -4, duration: 0.7, ease: 'back.out(2.2)' }, 0.22) .fromTo('.lytsup-header-sub', { opacity: 0, y: 24, filter: 'blur(6px)' }, { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.8, ease: 'expo.out' }, 0.45) - .fromTo('.lytsup-stat-chip', { opacity: 0, y: 18, scale: 0.85 }, { opacity: 1, y: 0, scale: 1, duration: 0.55, stagger: 0.1, ease: 'back.out(1.8)' }, 0.6); + .fromTo('.lytsup-tag', { opacity: 0, y: 12, scale: 0.9 }, { opacity: 1, y: 0, scale: 1, duration: 0.5, stagger: 0.07, ease: 'back.out(1.8)' }, 0.55) + .fromTo('.lytsup-stat-chip', { opacity: 0, y: 18, scale: 0.85 }, { opacity: 1, y: 0, scale: 1, duration: 0.55, stagger: 0.1, ease: 'back.out(1.8)' }, 0.68); // Stat numbers count up once the chips have landed PROOF_STATS.forEach((stat, i) => { @@ -159,8 +161,12 @@ export default function LytsUpSection({ isLoaded = true }: LytsUpSectionProps) { borderRadius: 32, padding: 'clamp(64px, 8vw, 110px) clamp(20px, 4vw, 64px) clamp(64px, 8vw, 96px)', zIndex: 2, - background: 'radial-gradient(ellipse 110% 80% at 50% 0%, #17130d 0%, #0d0b09 55%, #0a0807 100%)', - boxShadow: 'inset 0 0 0 1px rgba(244,190,40,0.12)', + background: + 'radial-gradient(120% 90% at 50% -12%, rgba(244,194,26,0.24) 0%, rgba(244,194,26,0) 52%),' + + 'radial-gradient(90% 70% at 86% 16%, rgba(255,217,90,0.14) 0%, rgba(255,217,90,0) 55%),' + + 'radial-gradient(80% 80% at 10% 96%, rgba(244,194,26,0.09) 0%, rgba(244,194,26,0) 50%),' + + 'linear-gradient(180deg, #17140a 0%, #121009 42%, #0b0906 100%)', + boxShadow: 'inset 0 0 0 1px rgba(244,194,26,0.16)', }} > {/* Faint dot-grid texture for depth, matching the light sections elsewhere */} @@ -192,6 +198,21 @@ export default function LytsUpSection({ isLoaded = true }: LytsUpSectionProps) { {/* Header */}
+
+ + + Earn as you live + +
+

- LytsUp transforms your everyday activities into real shopping rewards. Walk, play, explore, visit your favorite places, complete fun challenges, and earn Lyts that you can spend instantly at participating brands. + Walk. Play. Explore. Earn Lyts just by living your life โ€” then spend them instantly at the brands you already love.

+ {/* Gen-Z vibe tags */} +
+ {['#WalkToEarn', '#PlayDaily', '#ExploreMore', '#LevelUp'].map((t) => ( + + {t} + + ))} +
+ {/* Social-proof stat chips โ€” numbers count up on reveal */}
{PROOF_STATS.map((stat, i) => ( @@ -265,6 +303,22 @@ export default function LytsUpSection({ isLoaded = true }: LytsUpSectionProps) {

+ {/* Gen-Z gradient marquee ticker */} +
+
+ {[0, 1].map((dup) => ( +
+ {['Earn Lyts', 'Play Daily', 'Explore', 'Level Up', 'Spend Instantly'].map((w) => ( + + {w} + โœฆ + + ))} +
+ ))} +
+
+ {/* Visual flow โ€” numbered stepper; active step + connectors are driven by scroll position */}
{['Earn', 'Spend', 'Live More'].map((step, i) => ( @@ -304,42 +358,70 @@ export default function LytsUpSection({ isLoaded = true }: LytsUpSectionProps) {
- ๐Ÿ”ฅ -
+ {/* Rotated sticker badge */} + + ๐Ÿš€ Join 50K+ vibing + + +

+ Your life. Your Lyts.
Let's get it. +

- The more you live, the more you earn. Every step, every visit, and every adventure brings you closer to your next reward. + The more you live, the more you earn โ€” every step, visit, and adventure drops fresh Lyts straight into your pocket.

+ {/* Logo in a sticker chip so it pops on the amber card */} +
+ + {/* eslint-disable-next-line @next/next/no-img-element */} + LytsUp + +
+ - Download LytsUp + Download @@ -352,8 +434,73 @@ export default function LytsUpSection({ isLoaded = true }: LytsUpSectionProps) { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.25) rotate(-12deg); } } + + /* Live pulsing dot on the eyebrow badge */ + .lytsup-live-dot { animation: lytsupPulse 1.8s ease-out infinite; } + @keyframes lytsupPulse { + 0% { box-shadow: 0 0 0 0 rgba(244,190,40,0.6); } + 70% { box-shadow: 0 0 0 8px rgba(244,190,40,0); } + 100% { box-shadow: 0 0 0 0 rgba(244,190,40,0); } + } + + /* Vibe tags */ + .lytsup-tag { transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease; cursor: default; } + .lytsup-tag:hover { + background: rgba(244,190,40,0.12); + border-color: rgba(244,190,40,0.45); + color: #ffffff; + transform: translateY(-2px); + } + + /* Scrolling gradient marquee */ + .lytsup-marquee { + overflow: hidden; + margin: 10px 0 46px; + -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); + mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); + } + .lytsup-marquee-track { + display: inline-flex; + gap: 2.5rem; + white-space: nowrap; + will-change: transform; + animation: lytsupMarquee 24s linear infinite; + } + @keyframes lytsupMarquee { + from { transform: translateX(0); } + to { transform: translateX(-50%); } + } + .lytsup-marquee-item { + font-family: 'Sora', sans-serif; + font-weight: 900; + font-size: clamp(1.1rem, 2vw, 1.7rem); + letter-spacing: -0.02em; + text-transform: uppercase; + background: linear-gradient(135deg, #f4be28 0%, #FF9800 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + } + .lytsup-marquee-star { + color: rgba(244,190,40,0.5); + font-size: clamp(0.9rem, 1.4vw, 1.2rem); + } + + /* Funky sticker emojis bob gently */ + .lytsup-sticker-emoji { animation: lytsupBob 3.2s ease-in-out infinite; } + .lytsup-sticker-emoji:nth-of-type(2) { animation-delay: 0.5s; } + .lytsup-sticker-emoji:nth-of-type(3) { animation-delay: 1s; } + .lytsup-sticker-emoji:nth-of-type(4) { animation-delay: 1.5s; } + @keyframes lytsupBob { + 0%, 100% { margin-top: 0; } + 50% { margin-top: -7px; } + } + @media (prefers-reduced-motion: reduce) { - .lytsup-sticker-spark { animation: none; } + .lytsup-sticker-spark, + .lytsup-live-dot, + .lytsup-marquee-track, + .lytsup-sticker-emoji { animation: none; } } @media (max-width: 900px) { .lytsup-flow { max-width: 380px !important; } diff --git a/src/components/home/ProblemSection.tsx b/src/components/home/ProblemSection.tsx index 903cffb..c20f5b6 100644 --- a/src/components/home/ProblemSection.tsx +++ b/src/components/home/ProblemSection.tsx @@ -22,7 +22,7 @@ const DARK_CARDS = [ description: 'No compelling reason for customers to visit your store', image: '/problems/4.png', icon: ( - + ), @@ -32,7 +32,7 @@ const DARK_CARDS = [ description: 'Traditional discounts erode profit margins', image: '/problems/5.png', icon: ( - + ), @@ -42,28 +42,28 @@ const DARK_CARDS = [ description: 'Digital ads rarely convert into store footfall', image: '/problems/6.png', icon: ( - + ), }, { - title: 'No Real-Time Signal', + title: 'No Real-Time Signals', description: 'No real-time connection between online activity and offline shopping', image: '/problems/7.png', wide: true, icon: ( - + ), }, { title: 'Customer Amnesia', - description: 'Customers forget about stores between visits', + description: 'Customers forget about brands between visits', image: '/problems/8.png', icon: ( - + ), @@ -162,18 +162,45 @@ export default function ProblemSection({ isLoaded = true }: ProblemSectionProps) gap: 'clamp(8px, 1.2vw, 14px)', }}> {[ - { val: '$2 Tn', label: 'India retail market by 2032, 25% CAGR' }, - { val: '5th', label: 'Largest retail destination globally' }, - { val: '10%', label: "Of India's GDP from retail" }, - { val: '12%', label: 'Of retail is organised, the rest is offline' }, - { val: '500M', label: 'Indians shopping online by 2030, up from 220M' }, + { + val: '$2 Tn', label: 'Indian retail market by 2032, 26% CAGR', + icon: (<>), + }, + { + val: '5th', label: 'Largest retail destination globally', + icon: (<>), + }, + { + val: '10%', label: "Of India's GDP from retail", + icon: (<>), + }, + { + val: '12%', label: 'Of retail is organized, the rest is offline', + icon: (<>), + }, + { + val: '500M', label: "India's online shoppers by 2030, up from 250M", + icon: (<>), + }, ].map((s, i) => ( -
-
{s.val}
-
{s.label}
+
+ + + {s.icon} + + +
{s.val}
+
+
{s.label}
))}
@@ -196,28 +223,25 @@ export default function ProblemSection({ isLoaded = true }: ProblemSectionProps) clickEffect={true} particleCount={6} style={{ - background: '#e12d2d', borderRadius: '24px', padding: 'clamp(20px, 2.4vw, 28px)', - border: '1px solid rgba(255, 255, 255, 0.15)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', minHeight: '230px', - boxShadow: '0 10px 30px -12px rgba(225, 45, 45, 0.4)', position: 'relative', overflow: 'hidden', }} > -
+
- 68%+ + 68%+
Walk in once,
never return
-
-
+
- 0+ + 0+
Visibility
after they leave
-
-
+
- 5+ + 5+
Recurring pain points,
every quarter
-
-
- {card.icon} +
+
{card.icon}

{card.title}

@@ -387,7 +403,7 @@ export default function ProblemSection({ isLoaded = true }: ProblemSectionProps)

{card.wide ? ( -
) : ( -