96 lines
4.1 KiB
TypeScript
96 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useLayoutEffect, useRef } from 'react';
|
|
import { gsap } from 'gsap';
|
|
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
|
import { PhoneMockupImage } from './PhoneMockup';
|
|
|
|
if (typeof window !== 'undefined') gsap.registerPlugin(ScrollTrigger);
|
|
|
|
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
|
|
|
export default function LiveMoreSection() {
|
|
const panelRef = useRef<HTMLDivElement>(null);
|
|
const phoneRef = useRef<HTMLDivElement>(null);
|
|
|
|
useIsomorphicLayoutEffect(() => {
|
|
if (typeof window === 'undefined') return;
|
|
const section = panelRef.current;
|
|
const phone = phoneRef.current;
|
|
if (!section || !phone) return;
|
|
|
|
const ctx = gsap.context(() => {
|
|
gsap.fromTo(phone,
|
|
{ y: 160, opacity: 0 },
|
|
{
|
|
y: 0, opacity: 1, ease: 'power2.out',
|
|
scrollTrigger: { trigger: section, start: 'top 92%', end: 'top 25%', scrub: 1.2 },
|
|
}
|
|
);
|
|
}, section);
|
|
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
return (
|
|
<section ref={panelRef} className="fp-panel fp-light" style={{ background: '#ffffff' }}>
|
|
<div className="fp-shell">
|
|
<div className="fp-split" style={{ gridTemplateColumns: '0.95fr 1.05fr' }}>
|
|
|
|
{/* Left — phone mockup: lifestyle moments feed */}
|
|
<div ref={phoneRef} style={{ display: 'flex', justifyContent: 'center', opacity: 0, width: '100%' }}>
|
|
<PhoneMockupImage
|
|
src="/assets/For_people/03_live-cropped.png"
|
|
alt="LytsUp Live More screen showing today's lifestyle moments"
|
|
floatClassName="live-phone-shell"
|
|
aspectRatio={1608 / 3088}
|
|
/>
|
|
</div>
|
|
|
|
{/* Right — headline + copy */}
|
|
<div>
|
|
<div style={{ marginBottom: 20 }}><span className="fp-kicker fp-rise">Live<span className="fp-kicker-num">04</span></span></div>
|
|
|
|
<h2 className="fp-h1" style={{ color: '#171512' }}>
|
|
<span className="fp-mask"><span>Live</span></span>
|
|
<span className="fp-mask"><span style={{ color: '#f4be28' }}>More.</span></span>
|
|
</h2>
|
|
|
|
<p className="fp-rise" style={{ fontSize: 15, lineHeight: 1.8, color: '#4f463a', fontFamily: 'Sora, sans-serif', maxWidth: 420, margin: '0 0 24px' }}>
|
|
Life isn't about collecting points. It's about collecting moments.
|
|
</p>
|
|
|
|
<div className="fp-rise" style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 28, maxWidth: 460 }}>
|
|
{[
|
|
{ label: 'Walk more', icon: '🚶', bg: '#eef2ff' },
|
|
{ label: 'Explore more', icon: '🧭', bg: '#fdeef7' },
|
|
{ label: 'Meet friends', icon: '🤝', bg: '#eef9f1' },
|
|
{ label: 'Support local', icon: '🏪', bg: '#fef1e8' },
|
|
{ label: 'Discover new brands', icon: '🏷️', bg: '#fef7ea' },
|
|
{ label: 'Celebrate every day', icon: '🎊', bg: '#fdeeee' },
|
|
].map((tag) => (
|
|
<div key={tag.label} className="fp-card fp-card--light">
|
|
<span className="fp-card-icon" style={{ background: tag.bg }}>{tag.icon}</span>
|
|
<span style={{ fontSize: 13, fontWeight: 700, fontFamily: 'Sora, sans-serif', color: '#171512', letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>
|
|
{tag.label}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="fp-rise" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
|
<span style={{ width: 34, height: 3, borderRadius: 2, background: '#f4be28', flexShrink: 0 }} />
|
|
<p style={{
|
|
fontSize: 'clamp(17px, 1.7vw, 21px)', lineHeight: 1.3, color: '#171512', fontFamily: 'Sora, sans-serif',
|
|
margin: 0, fontWeight: 800, letterSpacing: '-0.02em',
|
|
}}>
|
|
LytsUp rewards <span style={{ color: '#f4be28' }}>your lifestyle,</span> not just your purchases.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|