158 lines
7.7 KiB
TypeScript
158 lines
7.7 KiB
TypeScript
'use client';
|
|
|
|
import React, { useRef, useEffect } from 'react';
|
|
import Image from 'next/image';
|
|
|
|
function useMagnetic<T extends HTMLElement>(strength = 12) {
|
|
const ref = useRef<T | null>(null);
|
|
useEffect(() => {
|
|
const el = ref.current;
|
|
if (!el) return;
|
|
const onMove = (e: MouseEvent) => {
|
|
const rect = el.getBoundingClientRect();
|
|
const x = ((e.clientX - rect.left) / rect.width - 0.5) * strength * 2;
|
|
const y = ((e.clientY - rect.top) / rect.height - 0.5) * strength * 2;
|
|
el.style.transform = `translate(${x}px, ${y}px)`;
|
|
};
|
|
const onLeave = () => { el.style.transform = 'translate(0,0)'; };
|
|
el.addEventListener('mousemove', onMove);
|
|
el.addEventListener('mouseleave', onLeave);
|
|
return () => {
|
|
el.removeEventListener('mousemove', onMove);
|
|
el.removeEventListener('mouseleave', onLeave);
|
|
};
|
|
}, [strength]);
|
|
return ref;
|
|
}
|
|
|
|
export default function HeroSection() {
|
|
const magSecondary = useMagnetic<HTMLButtonElement>(8);
|
|
|
|
return (
|
|
<section className="fp-panel" style={{ background: 'radial-gradient(ellipse 100% 85% at 78% 30%, #3a2b66 0%, #2a2150 45%, #1c1838 100%)' }}>
|
|
|
|
{/* Background photo */}
|
|
<Image src="/assets/images/stock/app-hero.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9, zIndex: 0 }} />
|
|
<div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 90% 80% at 78% 42%, rgba(58,43,102,0.15) 0%, rgba(42,33,80,0.35) 55%, rgba(28,24,56,0.55) 100%)', zIndex: 0 }} />
|
|
<div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 55% 65% at 30% 48%, rgba(18,14,30,0.7) 0%, rgba(18,14,30,0.3) 60%, transparent 100%)', zIndex: 0 }} />
|
|
|
|
{/* Ambient orbs + grid */}
|
|
<div className="fp-deco" style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
|
|
<div style={{
|
|
position: 'absolute', top: '14%', left: '58%', width: 460, height: 460, borderRadius: '50%',
|
|
background: 'radial-gradient(circle, rgba(244,190,40,0.13) 0%, transparent 70%)', animation: 'fpOrbFloat 7s ease-in-out infinite',
|
|
}} />
|
|
<div style={{
|
|
position: 'absolute', bottom: '8%', right: '6%', width: 280, height: 280, borderRadius: '50%',
|
|
background: 'radial-gradient(circle, rgba(130,88,200,0.18) 0%, transparent 70%)', animation: 'fpOrb2Float 9s ease-in-out infinite',
|
|
}} />
|
|
<div style={{
|
|
position: 'absolute', inset: 0,
|
|
backgroundImage: 'linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px)',
|
|
backgroundSize: '80px 80px', maskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 80%)',
|
|
WebkitMaskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 80%)',
|
|
}} />
|
|
</div>
|
|
|
|
<div className="fp-shell">
|
|
<div className="fp-split" style={{ gridTemplateColumns: '1fr', justifyItems: 'center', textAlign: 'center' }}>
|
|
|
|
{/* Text column */}
|
|
<div style={{ maxWidth: 720 }}>
|
|
<h1 className="fp-headline" style={{
|
|
fontSize: 'clamp(40px, 5.4vw, 82px)', fontWeight: 800, lineHeight: 1.02,
|
|
letterSpacing: '-0.045em', color: '#fff', margin: '50px 0 28px', fontFamily: 'Sora, sans-serif',
|
|
}}>
|
|
<span className="fp-mask"><span>Earn LYTs.</span></span>
|
|
<span className="fp-mask"><span className="fp-shimmer">Lit Yourself.</span></span>
|
|
</h1>
|
|
|
|
<p className="fp-content fp-subtext" style={{
|
|
fontSize: 'clamp(16px, 1.4vw, 19px)', lineHeight: 1.7, fontWeight: 400,
|
|
color: 'rgba(255,255,255,0.6)', maxWidth: 640, margin: '0 auto 16px', fontFamily: 'Sora, sans-serif',
|
|
}}>
|
|
Every purchase unlocks more than points. Earn <strong>LYTs</strong>, discover experiences, and make every shopping trip count.
|
|
</p>
|
|
|
|
<p className="fp-content fp-subtext" style={{
|
|
fontSize: 'clamp(14px, 1.2vw, 16px)', lineHeight: 1.7, fontWeight: 400,
|
|
color: 'rgba(255,255,255,0.45)', maxWidth: 560, margin: '0 auto 40px', fontFamily: 'Sora, sans-serif',
|
|
}}>
|
|
Shop nearby, collect LYTs, unlock exclusive drops, and become part of a living ecosystem designed around you.
|
|
</p>
|
|
|
|
<div className="fp-content fp-cta" style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' }}>
|
|
<button className="fp-btn fp-btn-primary">
|
|
Start Earning LYTs
|
|
</button>
|
|
<button
|
|
ref={magSecondary}
|
|
className="fp-btn fp-btn-ghost fp-magnetic"
|
|
>
|
|
Explore Nearby
|
|
</button>
|
|
</div>
|
|
|
|
{/* LYT Quick Facts */}
|
|
<div className="fp-content fp-cta" style={{
|
|
display: 'flex',
|
|
gap: 16,
|
|
justifyContent: 'center',
|
|
flexWrap: 'wrap',
|
|
margin: '36px auto 0',
|
|
maxWidth: 600,
|
|
}}>
|
|
{[
|
|
{ val: '10+ Ways', label: 'To earn Lyts' },
|
|
{ val: 'Instant Spend', label: 'No delay at checkout' },
|
|
{ val: '10,000+', label: 'Partner brands' }
|
|
].map((item, idx) => (
|
|
<div key={idx} style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
fontSize: 13,
|
|
fontFamily: 'Sora, sans-serif',
|
|
background: 'rgba(255, 255, 255, 0.03)',
|
|
border: '1px solid rgba(244, 190, 40, 0.22)',
|
|
padding: '8px 16px',
|
|
borderRadius: '100px',
|
|
backdropFilter: 'blur(8px)',
|
|
}}>
|
|
<span style={{ color: '#f4be28', fontWeight: 800 }}>{item.val}</span>
|
|
<span style={{ width: 4, height: 4, borderRadius: '50%', background: 'rgba(255,255,255,0.25)' }} />
|
|
<span style={{ color: 'rgba(255,255,255,0.5)', fontSize: 11.5 }}>{item.label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Trust row */}
|
|
<div className="fp-content fp-cta" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, marginTop: 32 }}>
|
|
<div style={{ display: 'flex' }}>
|
|
{['#f4be28', '#4ade80', '#a855f7', '#3b82f6'].map((c, i) => (
|
|
<div key={i} style={{ width: 30, height: 30, borderRadius: '50%', background: c, border: '2px solid #0a0a12', marginLeft: i > 0 ? -9 : 0, opacity: 0.9 }} />
|
|
))}
|
|
</div>
|
|
<span style={{ fontSize: 13, color: 'rgba(255,255,255,0.42)', fontFamily: 'Sora, sans-serif' }}>
|
|
<strong style={{ color: 'rgba(255,255,255,0.75)', fontWeight: 700 }}>50,000+</strong> Lytians earning and living more, every day
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll hint */}
|
|
<div style={{
|
|
position: 'absolute', bottom: 38, left: '50%', transform: 'translateX(-50%)',
|
|
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, zIndex: 10,
|
|
color: 'rgba(255,255,255,0.3)', fontSize: 10, fontFamily: 'Sora, sans-serif', letterSpacing: '0.16em', textTransform: 'uppercase',
|
|
}}>
|
|
<span>Scroll</span>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ animation: 'fpScrollHint 1.6s ease-in-out infinite' }}>
|
|
<polyline points="6 9 12 15 18 9" />
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|