Update website layout, styles, and story components
This commit is contained in:
R-Bharathraj
@@ -4,6 +4,7 @@ import { useState, useEffect, useRef } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { gsap, useGSAP, syncLenisScrollTrigger } from '../story/gsapkit';
|
||||
import { Ico } from '../story/Ico';
|
||||
|
||||
const INK = '#0a0a0a';
|
||||
const BLUE = '#2F6BFF';
|
||||
@@ -13,18 +14,18 @@ const NAV = [
|
||||
title: 'Earn',
|
||||
color: '#C8FF37', // lime
|
||||
links: [
|
||||
{ label: 'Walk to Earn', href: '#for-you' },
|
||||
{ label: 'Play & Win', href: '#for-you' },
|
||||
{ label: 'Refer Friends', href: '#for-you' },
|
||||
{ label: 'Walk to Earn', href: '#how-it-works' },
|
||||
{ label: 'Play & Win', href: '#how-it-works' },
|
||||
{ label: 'Refer Friends', href: '#how-it-works' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Platform',
|
||||
color: '#FF2E88', // pink
|
||||
links: [
|
||||
{ label: 'For You', href: '#for-you' },
|
||||
{ label: 'For Business', href: '#for-business' },
|
||||
{ label: 'Why Now', href: '#why-now' },
|
||||
{ label: 'How It Works', href: '#how-it-works' },
|
||||
{ label: 'The Loop', href: '#the-loop' },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -33,7 +34,7 @@ const NAV = [
|
||||
links: [
|
||||
{ label: 'The Vision', href: '#the-vision' },
|
||||
{ label: 'The Why', href: '#the-why' },
|
||||
{ label: 'Contact Us', href: '#for-business' },
|
||||
{ label: 'Our Belief', href: '#our-belief' },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -79,10 +80,111 @@ export default function Footer() {
|
||||
syncLenisScrollTrigger();
|
||||
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
// Infinite marquee ticker (two identical halves → seamless).
|
||||
if (!reduce) {
|
||||
/* Continuous continuous animations */
|
||||
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 });
|
||||
gsap.to('.foot-cta-star-spin', { rotate: 360, duration: 9, ease: 'none', repeat: -1 });
|
||||
|
||||
/* ── 3D Sticker Fold-Out & Stamp Burst Reveal for Footer CTA Banner ── */
|
||||
gsap.set('.lu-cta', {
|
||||
transformStyle: 'preserve-3d',
|
||||
transformOrigin: '50% 100%',
|
||||
rotationX: 35,
|
||||
rotationY: -10,
|
||||
scale: 0.85,
|
||||
y: 70,
|
||||
autoAlpha: 0,
|
||||
boxShadow: '0 40px 80px rgba(0,0,0,0.4)',
|
||||
});
|
||||
|
||||
gsap.set('.foot-cta-star', { scale: 0, rotation: -180, autoAlpha: 0 });
|
||||
gsap.set('.lu-cta-pill', { y: -25, autoAlpha: 0 });
|
||||
gsap.set('.lu-cta-heading', { y: 30, rotationX: -40, autoAlpha: 0 });
|
||||
gsap.set('.lu-cta-btn', { scale: 0.6, rotationZ: -12, autoAlpha: 0 });
|
||||
gsap.set('.lu-columns > *', { y: 40, autoAlpha: 0 });
|
||||
|
||||
const tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: '.lu-cta-wrap',
|
||||
start: 'top 78%',
|
||||
once: true,
|
||||
},
|
||||
defaults: { ease: 'power3.out' },
|
||||
});
|
||||
|
||||
/* Phase 1: Card Unfolds from 3D Stack */
|
||||
tl.to('.lu-cta', {
|
||||
rotationX: 0,
|
||||
rotationY: 0,
|
||||
scale: 1,
|
||||
y: 0,
|
||||
autoAlpha: 1,
|
||||
boxShadow: '8px 8px 0 0 #0a0a0a',
|
||||
duration: 0.85,
|
||||
ease: 'back.out(1.5)',
|
||||
onComplete: () => {
|
||||
gsap.set('.lu-cta', { clearProps: 'transform,transformStyle' });
|
||||
},
|
||||
})
|
||||
/* Phase 2: Pink Star Pops Out from Top Corner */
|
||||
.to(
|
||||
'.foot-cta-star',
|
||||
{
|
||||
scale: 1,
|
||||
rotation: 0,
|
||||
autoAlpha: 1,
|
||||
duration: 0.5,
|
||||
ease: 'back.out(2)',
|
||||
},
|
||||
'-=0.4'
|
||||
)
|
||||
/* Phase 3: Purple Pill Tag Drops Down */
|
||||
.to(
|
||||
'.lu-cta-pill',
|
||||
{
|
||||
y: 0,
|
||||
autoAlpha: 1,
|
||||
duration: 0.4,
|
||||
ease: 'back.out(1.8)',
|
||||
},
|
||||
'-=0.3'
|
||||
)
|
||||
/* Phase 4: Heading 3D Unrolls */
|
||||
.to(
|
||||
'.lu-cta-heading',
|
||||
{
|
||||
y: 0,
|
||||
rotationX: 0,
|
||||
autoAlpha: 1,
|
||||
duration: 0.55,
|
||||
ease: 'power4.out',
|
||||
},
|
||||
'-=0.3'
|
||||
)
|
||||
/* Phase 5: Yellow Download Button Stamps On */
|
||||
.to(
|
||||
'.lu-cta-btn',
|
||||
{
|
||||
scale: 1,
|
||||
rotationZ: 0,
|
||||
autoAlpha: 1,
|
||||
duration: 0.5,
|
||||
ease: 'back.out(2.2)',
|
||||
},
|
||||
'-=0.35'
|
||||
)
|
||||
/* Phase 6: Footer columns cascade in */
|
||||
.to(
|
||||
'.lu-columns > *',
|
||||
{
|
||||
y: 0,
|
||||
autoAlpha: 1,
|
||||
duration: 0.6,
|
||||
stagger: 0.1,
|
||||
ease: 'power3.out',
|
||||
},
|
||||
'-=0.2'
|
||||
);
|
||||
}
|
||||
},
|
||||
{ scope: rootRef },
|
||||
@@ -120,8 +222,8 @@ export default function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── BIG CTA STICKER CARD ── */}
|
||||
<div className="lu-cta-wrap" style={{ padding: '56px 48px 40px' }}>
|
||||
{/* ── BIG CTA STICKER CARD (3D Fold-Out Reveal) ── */}
|
||||
<div className="lu-cta-wrap" style={{ padding: '56px 48px 40px', perspective: 1200 }}>
|
||||
<div className="lu-cta" style={{
|
||||
position: 'relative',
|
||||
background: BLUE,
|
||||
@@ -136,13 +238,13 @@ export default function Footer() {
|
||||
}}>
|
||||
{/* rotating star sticker */}
|
||||
<span className="foot-cta-star" aria-hidden style={{ position: 'absolute', top: -20, right: 30, willChange: 'transform' }}>
|
||||
<span style={{ display: 'inline-flex', background: '#FF2E88', border: `3px solid ${INK}`, borderRadius: '50%', padding: 10, boxShadow: `3px 3px 0 0 ${INK}` }}>
|
||||
<span className="foot-cta-star-spin" style={{ display: 'inline-flex', background: '#FF2E88', border: `3px solid ${INK}`, borderRadius: '50%', padding: 10, boxShadow: `3px 3px 0 0 ${INK}` }}>
|
||||
<Star size={22} color="#fff" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div style={{ maxWidth: 640 }}>
|
||||
<span style={{ display: 'inline-block', background: '#8B3DFF', color: '#fff', border: `3px solid ${INK}`, borderRadius: 10, padding: '5px 12px', fontSize: 11, fontWeight: 900, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 18, boxShadow: `3px 3px 0 0 ${INK}` }}>
|
||||
<span className="lu-cta-pill" style={{ display: 'inline-block', background: '#8B3DFF', color: '#fff', border: `3px solid ${INK}`, borderRadius: 10, padding: '5px 12px', fontSize: 11, fontWeight: 900, textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 18, boxShadow: `3px 3px 0 0 ${INK}` }}>
|
||||
Earn. Spend. Live More.
|
||||
</span>
|
||||
<h2 className="lu-cta-heading" style={{ fontSize: 'clamp(32px, 4.8vw, 62px)', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 0.96, margin: 0 }}>
|
||||
@@ -154,7 +256,7 @@ export default function Footer() {
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<Link href="#for-business" className="lu-cta-btn" style={{
|
||||
<Link href="#how-it-works" className="lu-cta-btn" style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 10,
|
||||
padding: '18px 36px', background: '#FFC72C', color: INK,
|
||||
fontSize: 17, fontWeight: 900, textTransform: 'uppercase', letterSpacing: '0.03em',
|
||||
@@ -231,7 +333,7 @@ export default function Footer() {
|
||||
}}>
|
||||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 600 }}>
|
||||
© {new Date().getFullYear()} LytsUp. Made with
|
||||
<span style={{ color: '#FF2E88' }}>♥</span> for Gen Z.
|
||||
<Ico e="♥" size={14} /> for Gen Z.
|
||||
</span>
|
||||
<div style={{ display: 'flex', gap: 20 }}>
|
||||
{[['Terms', '#'], ['Privacy', '#'], ['Cookies', '#']].map(([l, h]) => (
|
||||
|
||||
Reference in New Issue
Block a user