feat: update layout, styling, story sections, footer, and add Header and ScrollProgress components
This commit is contained in:
R-Bharathraj
@@ -1,152 +1,246 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useState } from "react";
|
||||
import { Send, Instagram, Twitter, MessageSquare, Heart } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
|
||||
const INK = '#0a0a0a';
|
||||
|
||||
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' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Platform',
|
||||
color: '#FF2E88', // pink
|
||||
links: [
|
||||
{ label: 'For You', href: '#for-you' },
|
||||
{ label: 'For Business', href: '#for-business' },
|
||||
{ label: 'How It Works', href: '#how-it-works' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
color: '#8B3DFF', // purple
|
||||
links: [
|
||||
{ label: 'The Vision', href: '#the-vision' },
|
||||
{ label: 'The Why', href: '#the-why' },
|
||||
{ label: 'Contact Us', href: '#for-business' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const SOCIALS = [
|
||||
{
|
||||
label: 'Instagram', href: 'https://instagram.com/lytsup', bg: '#FF2E88',
|
||||
icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>,
|
||||
},
|
||||
{
|
||||
label: 'X / Twitter', href: 'https://twitter.com/lytsup', bg: '#8B3DFF',
|
||||
icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M13.98 10.62 20.54 3h-1.55l-5.7 6.62L8.74 3H3.5l6.88 10.01L3.5 21h1.55l6.01-6.99L15.87 21h5.24l-7.13-10.38zm-2.13 2.47-.7-1-5.54-7.93H8l4.47 6.4.7 1 5.82 8.32h-2.39l-4.74-6.79z"/></svg>,
|
||||
},
|
||||
{
|
||||
label: 'YouTube', href: 'https://www.youtube.com/@lytsup', bg: '#FF6B35',
|
||||
icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M21.8 8s-.2-1.38-.8-1.99c-.76-.8-1.61-.8-2-.85C16.2 5 12 5 12 5s-4.2 0-7 .17c-.39.05-1.24.05-2 .85C2.4 6.62 2.2 8 2.2 8S2 9.62 2 11.24v1.52c0 1.62.2 3.24.2 3.24s.2 1.38.8 1.99c.76.8 1.76.77 2.2.85C6.8 19 12 19.03 12 19.03s4.2-.01 7-.22c.39-.05 1.24-.05 2-.85.6-.61.8-1.99.8-1.99S22 14.38 22 12.76v-1.52C22 9.62 21.8 8 21.8 8zm-11.87 6.59V8.79l5.4 2.82-5.4 2.98z"/></svg>,
|
||||
},
|
||||
];
|
||||
|
||||
export default function Footer() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [subscribed, setSubscribed] = useState(false);
|
||||
const [showScroll, setShowScroll] = useState(false);
|
||||
|
||||
const handleSubscribe = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (email) {
|
||||
setSubscribed(true);
|
||||
setEmail("");
|
||||
setTimeout(() => setSubscribed(false), 5000);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
const onScroll = () => setShowScroll(window.scrollY > 400);
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
return () => window.removeEventListener('scroll', onScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<footer className="relative bg-[#060606] border-t border-white/5 pt-16 pb-8 overflow-hidden">
|
||||
{/* Ambient background light glows */}
|
||||
<div className="absolute top-0 left-1/4 -translate-y-1/2 w-80 h-80 rounded-full bg-accent-purple/10 blur-[80px] pointer-events-none" />
|
||||
<div className="absolute top-0 right-1/4 -translate-y-1/2 w-80 h-80 rounded-full bg-accent-pink/10 blur-[80px] pointer-events-none" />
|
||||
<>
|
||||
<footer className="lu-footer bg-night font-sora" style={{
|
||||
color: '#fff',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
margin: '0 var(--sec-gutter) var(--sec-gap)',
|
||||
border: `4px solid ${INK}`,
|
||||
borderRadius: 28,
|
||||
boxShadow: `0 12px 0 0 rgba(0,0,0,0.35)`,
|
||||
}}>
|
||||
{/* ── BIG CTA STICKER CARD ── */}
|
||||
<div className="lu-cta-wrap" style={{ padding: '56px 48px 40px' }}>
|
||||
<div className="lu-cta bg-cream" style={{
|
||||
position: 'relative',
|
||||
color: INK,
|
||||
border: `4px solid ${INK}`,
|
||||
borderRadius: 24,
|
||||
boxShadow: `8px 8px 0 0 ${INK}`,
|
||||
padding: '44px 48px',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
flexWrap: 'wrap', gap: 28,
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
{/* corner sticker */}
|
||||
<span style={{
|
||||
position: 'absolute', top: -18, right: 34, transform: 'rotate(8deg)',
|
||||
background: '#FF2E88', color: '#fff', border: `3px solid ${INK}`,
|
||||
borderRadius: 12, padding: '6px 14px', fontSize: 12, fontWeight: 900,
|
||||
textTransform: 'uppercase', letterSpacing: '0.05em', boxShadow: `3px 3px 0 0 ${INK}`,
|
||||
}}>join the loop</span>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
|
||||
{/* Brand Info */}
|
||||
<div className="space-y-4 col-span-1 md:col-span-1">
|
||||
<Link href="/" className="inline-block">
|
||||
<span className="text-2xl font-extrabold tracking-wider font-sora text-white">
|
||||
Lyts<span className="text-primary text-glow-yellow">Up</span>
|
||||
<div style={{ maxWidth: 620 }}>
|
||||
<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}` }}>
|
||||
Earn. Spend. Live More.
|
||||
</span>
|
||||
<h2 className="lu-cta-heading" style={{ fontSize: 'clamp(32px, 4.6vw, 60px)', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 0.98, margin: 0 }}>
|
||||
Turn everyday moments<br />
|
||||
<span style={{ position: 'relative', display: 'inline-block' }}>
|
||||
into <span style={{ color: '#FF2E88' }}>real value.</span>
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<Link href="#for-business" 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',
|
||||
border: `4px solid ${INK}`, borderRadius: 16, textDecoration: 'none',
|
||||
boxShadow: `5px 5px 0 0 ${INK}`, whiteSpace: 'nowrap',
|
||||
transition: 'transform 0.12s ease, box-shadow 0.12s ease',
|
||||
}}>
|
||||
Get Started
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||||
</Link>
|
||||
<p className="text-white/60 text-sm leading-relaxed max-w-xs">
|
||||
The premier social currency app for Gen Z. Earn rewards for walking, playing, and living your best life.
|
||||
</p>
|
||||
<p className="text-primary font-semibold text-xs tracking-wider uppercase">
|
||||
Earn. Spend. Live More.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Site Navigation */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-white font-bold text-sm tracking-wider uppercase font-sora">Navigate</h4>
|
||||
<ul className="space-y-2.5">
|
||||
<li>
|
||||
<a href="#earn" className="text-white/60 hover:text-primary transition-colors text-sm">Earn Points</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#spend" className="text-white/60 hover:text-primary transition-colors text-sm">Redeem Rewards</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#play" className="text-white/60 hover:text-primary transition-colors text-sm">Mini-Game</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#leaderboard" className="text-white/60 hover:text-primary transition-colors text-sm">Leaderboard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Corporate Links */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-white font-bold text-sm tracking-wider uppercase font-sora">Partnerships</h4>
|
||||
<ul className="space-y-2.5">
|
||||
<li>
|
||||
<Link href="#" className="text-white/60 hover:text-primary transition-colors text-sm">Become a Partner</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="text-white/60 hover:text-primary transition-colors text-sm">Brands Portal</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="text-white/60 hover:text-primary transition-colors text-sm">API Integration</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#" className="text-white/60 hover:text-primary transition-colors text-sm">Support Hub</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Newsletter subscription */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-white font-bold text-sm tracking-wider uppercase font-sora">Get Secret Drops</h4>
|
||||
<p className="text-white/60 text-xs">
|
||||
Subscribe to get notified about ultra-rare brand voucher drops.
|
||||
</p>
|
||||
<form onSubmit={handleSubscribe} className="relative flex">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="your.email@gmail.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-primary/50 transition-colors pr-10"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="absolute right-1 top-1 bottom-1 bg-primary text-dark font-bold px-3.5 rounded-lg hover:bg-primary/95 transition-colors flex items-center justify-center cursor-pointer"
|
||||
aria-label="Subscribe"
|
||||
>
|
||||
<Send className="w-4 h-4" />
|
||||
</button>
|
||||
</form>
|
||||
{subscribed && (
|
||||
<p className="text-accent-lime text-xs font-semibold animate-pulse">
|
||||
You're in! Check your inbox for secret codes.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="border-white/5 mb-8" />
|
||||
|
||||
{/* Socials & Copyright */}
|
||||
<div className="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
|
||||
<div className="flex items-center space-x-2 text-xs text-white/40">
|
||||
<span>© {new Date().getFullYear()} LytsUp.com. All rights reserved.</span>
|
||||
<span className="hidden sm:inline">•</span>
|
||||
<span className="flex items-center">
|
||||
Made with <Heart className="w-3.5 h-3.5 text-accent-pink fill-current mx-1" /> for Gen Z
|
||||
</span>
|
||||
{/* ── COLUMNS ── */}
|
||||
<div className="lu-columns" style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1.6fr 1fr 1fr 1fr',
|
||||
gap: 40, padding: '24px 48px 44px',
|
||||
alignItems: 'start',
|
||||
}}>
|
||||
{/* Brand */}
|
||||
<div className="lu-brand" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
|
||||
<Link href="#intro" aria-label="LytsUp home" style={{
|
||||
display: 'inline-flex', marginBottom: 20, textDecoration: 'none',
|
||||
background: '#fff', border: `3px solid ${INK}`, borderRadius: 14,
|
||||
padding: '10px 14px', boxShadow: `4px 4px 0 0 ${INK}`,
|
||||
}}>
|
||||
<Image src="/images/lytsup_app.png" alt="LytsUp" width={2048} height={554} style={{ height: 30, width: 'auto', display: 'block' }} />
|
||||
</Link>
|
||||
<p style={{ fontSize: 14.5, lineHeight: 1.7, color: 'rgba(255,255,255,0.6)', margin: '0 0 24px', maxWidth: 300 }}>
|
||||
Social currency for real life. Earn LYTs for the things you already do — then spend them on stuff you actually want.
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: 12 }}>
|
||||
{SOCIALS.map(({ label, href, icon, bg }) => (
|
||||
<a key={label} href={href} target="_blank" rel="noopener noreferrer" aria-label={label}
|
||||
className="lu-social"
|
||||
style={{
|
||||
width: 42, height: 42, borderRadius: 12,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
background: bg, color: '#fff', border: `3px solid ${INK}`,
|
||||
boxShadow: `3px 3px 0 0 ${INK}`,
|
||||
transition: 'transform 0.12s ease, box-shadow 0.12s ease',
|
||||
}}
|
||||
>{icon}</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Icons */}
|
||||
<div className="flex space-x-4">
|
||||
<a
|
||||
href="#"
|
||||
className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-white/60 hover:bg-accent-pink hover:text-white transition-all scale-95 hover:scale-100"
|
||||
aria-label="Instagram"
|
||||
>
|
||||
<Instagram className="w-4 h-4" />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-white/60 hover:bg-accent-purple hover:text-white transition-all scale-95 hover:scale-100"
|
||||
aria-label="Twitter"
|
||||
>
|
||||
<Twitter className="w-4 h-4" />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-white/60 hover:bg-primary hover:text-dark transition-all scale-95 hover:scale-100"
|
||||
aria-label="Discord"
|
||||
>
|
||||
<MessageSquare className="w-4 h-4" />
|
||||
</a>
|
||||
{/* Nav columns */}
|
||||
{NAV.map(col => (
|
||||
<nav key={col.title} className="lu-nav" aria-label={col.title}>
|
||||
<h4 style={{ display: 'inline-block', margin: '0 0 18px', fontSize: 12, fontWeight: 900, letterSpacing: '0.08em', textTransform: 'uppercase', color: INK, background: col.color, border: `2px solid ${INK}`, borderRadius: 8, padding: '4px 10px', boxShadow: `2px 2px 0 0 ${INK}` }}>
|
||||
{col.title}
|
||||
</h4>
|
||||
<ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
{col.links.map(({ label, href }) => (
|
||||
<li key={label}>
|
||||
<Link href={href} className="lu-link" style={{ textDecoration: 'none', fontSize: 15, color: 'rgba(255,255,255,0.65)', fontWeight: 600, transition: 'color 0.15s, transform 0.15s', display: 'inline-block' }}
|
||||
onMouseEnter={e => { const el = e.currentTarget as HTMLElement; el.style.color = col.color; el.style.transform = 'translateX(4px)'; }}
|
||||
onMouseLeave={e => { const el = e.currentTarget as HTMLElement; el.style.color = 'rgba(255,255,255,0.65)'; el.style.transform = 'translateX(0)'; }}
|
||||
>{label}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* ── BOTTOM BAR ── */}
|
||||
<div className="lu-bottom" style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
flexWrap: 'wrap', gap: 14,
|
||||
padding: '18px 48px 30px',
|
||||
borderTop: `2px dashed rgba(255,255,255,0.2)`,
|
||||
fontSize: 13, color: 'rgba(255,255,255,0.5)',
|
||||
}}>
|
||||
<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.
|
||||
</span>
|
||||
<div style={{ display: 'flex', gap: 20 }}>
|
||||
{[['Terms', '#'], ['Privacy', '#'], ['Cookies', '#']].map(([l, h]) => (
|
||||
<Link key={l} href={h} style={{ textDecoration: 'none', color: 'inherit', fontWeight: 600, transition: 'color 0.15s' }}
|
||||
onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = '#FFC72C')}
|
||||
onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = 'rgba(255,255,255,0.5)')}
|
||||
>{l}</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>{`
|
||||
.lu-cta-btn:hover, .lu-social:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 ${INK} !important; }
|
||||
.lu-cta-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 0 ${INK} !important; }
|
||||
@media (max-width: 900px) {
|
||||
.lu-footer { margin: 0 12px 12px; border-radius: 22px; }
|
||||
.lu-cta-wrap { padding: 32px 20px 24px !important; }
|
||||
.lu-cta { padding: 32px 26px !important; align-items: flex-start !important; }
|
||||
.lu-cta-btn { width: 100%; justify-content: center; }
|
||||
.lu-columns { grid-template-columns: 1fr 1fr !important; gap: 32px 24px !important; padding: 16px 24px 36px !important; }
|
||||
.lu-brand { grid-column: 1 / -1; }
|
||||
.lu-bottom { padding: 18px 24px 26px !important; flex-direction: column !important; align-items: flex-start !important; }
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.lu-columns { grid-template-columns: 1fr !important; }
|
||||
.lu-cta-heading { font-size: clamp(26px, 8vw, 40px) !important; }
|
||||
}
|
||||
`}</style>
|
||||
</footer>
|
||||
|
||||
{/* Scroll-to-top — neobrutalist */}
|
||||
<style>{`
|
||||
@keyframes luBounce { 0%,100% { transform: translateY(0);} 40% { transform: translateY(-4px);} 60% { transform: translateY(-2px);} }
|
||||
.lu-stt:hover { transform: translate(-2px,-2px) !important; box-shadow: 6px 6px 0 0 ${INK} !important; }
|
||||
.lu-stt:active { transform: translate(1px,1px) !important; box-shadow: 1px 1px 0 0 ${INK} !important; }
|
||||
.lu-stt-arrow { animation: luBounce 1.5s ease-in-out infinite; }
|
||||
`}</style>
|
||||
<button
|
||||
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
||||
aria-label="Scroll to top"
|
||||
className="lu-stt"
|
||||
style={{
|
||||
position: 'fixed', bottom: 28, right: 28, zIndex: 9999,
|
||||
width: 60, height: 60, borderRadius: 16,
|
||||
background: '#FFC72C', color: INK, border: `3px solid ${INK}`,
|
||||
cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
boxShadow: `4px 4px 0 0 ${INK}`,
|
||||
opacity: showScroll ? 1 : 0,
|
||||
transform: showScroll ? 'translateY(0)' : 'translateY(16px)',
|
||||
pointerEvents: showScroll ? 'auto' : 'none',
|
||||
transition: 'opacity 0.25s ease, transform 0.15s ease, box-shadow 0.15s ease',
|
||||
}}
|
||||
>
|
||||
<span className="lu-stt-arrow" style={{ display: 'flex' }}>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user