117 lines
5.7 KiB
TypeScript
117 lines
5.7 KiB
TypeScript
'use client';
|
|
|
|
import React, { useRef, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
|
|
function useMagnetic() {
|
|
const ref = useRef<HTMLAnchorElement | null>(null);
|
|
useEffect(() => {
|
|
const el = ref.current;
|
|
if (!el) return;
|
|
const onMove = (e: MouseEvent) => {
|
|
const r = el.getBoundingClientRect();
|
|
el.style.transform = `translate(${((e.clientX - r.left) / r.width - 0.5) * 18}px,${((e.clientY - r.top) / r.height - 0.5) * 18}px) scale(1.04)`;
|
|
};
|
|
const onLeave = () => { el.style.transform = 'translate(0,0) scale(1)'; };
|
|
el.addEventListener('mousemove', onMove);
|
|
el.addEventListener('mouseleave', onLeave);
|
|
return () => { el.removeEventListener('mousemove', onMove); el.removeEventListener('mouseleave', onLeave); };
|
|
}, []);
|
|
return ref;
|
|
}
|
|
|
|
const proof = [
|
|
{ val: '50K+', label: 'Active users', color: '#f4be28' },
|
|
{ val: '10K+', label: 'Partner stores', color: '#16a34a' },
|
|
{ val: '₹28L+', label: 'Rewards given', color: '#2563eb' },
|
|
{ val: '4.9★', label: 'App rating', color: '#9333ea' },
|
|
];
|
|
|
|
export default function FinalCTASection() {
|
|
const mag1 = useMagnetic();
|
|
const mag2 = useMagnetic();
|
|
|
|
return (
|
|
<section className="fp-panel fp-light" style={{ background: '#ffffff', textAlign: 'center' }}>
|
|
|
|
{/* Vivid background shape */}
|
|
<div className="fp-deco" style={{
|
|
position: 'absolute', top: '-10%', left: '50%', transform: 'translateX(-50%)',
|
|
width: '70%', height: '60%', borderRadius: '50%',
|
|
background: 'radial-gradient(ellipse, rgba(244,190,40,0.12) 0%, transparent 70%)',
|
|
zIndex: 0, filter: 'blur(50px)',
|
|
}} />
|
|
<div className="fp-deco" style={{
|
|
position: 'absolute', bottom: 0, left: 0, right: 0, textAlign: 'center', zIndex: 0, overflow: 'hidden',
|
|
}}>
|
|
<span style={{
|
|
fontSize: 'clamp(130px, 24vw, 340px)', fontWeight: 900, fontFamily: 'Sora, sans-serif',
|
|
color: 'transparent', WebkitTextStroke: '1.5px rgba(244,190,40,0.15)', letterSpacing: '-0.06em', lineHeight: 1, display: 'block',
|
|
}}>LOYALY</span>
|
|
</div>
|
|
|
|
<div className="fp-shell" style={{ maxWidth: 760 }}>
|
|
|
|
{/* Live badge */}
|
|
<div className="fp-rise" style={{
|
|
display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 32,
|
|
background: '#f0fdf4', border: '1.5px solid #16a34a', borderRadius: 100, padding: '10px 22px',
|
|
}}>
|
|
<span style={{ width: 8, height: 8, borderRadius: '50%', background: '#16a34a', display: 'block', animation: 'fpPulse 1.5s infinite', boxShadow: '0 0 0 3px rgba(22,163,74,0.2)' }} />
|
|
<span style={{ fontSize: 13, fontWeight: 700, color: '#16a34a', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.06em' }}>
|
|
Now live in Coimbatore
|
|
</span>
|
|
</div>
|
|
|
|
{/* Headline */}
|
|
<h2 style={{
|
|
fontSize: 'clamp(48px, 7.5vw, 112px)', fontWeight: 900, letterSpacing: '-0.06em', lineHeight: 0.92,
|
|
color: '#171512', margin: '0 0 28px', fontFamily: 'Sora, sans-serif',
|
|
}}>
|
|
<span className="fp-mask"><span>Your rewards</span></span>
|
|
<span className="fp-mask"><span className="fp-shimmer">are waiting.</span></span>
|
|
</h2>
|
|
|
|
<p className="fp-rise" style={{
|
|
fontSize: 18, lineHeight: 1.7, color: '#4f463a', fontFamily: 'Manrope, sans-serif',
|
|
maxWidth: 460, margin: '0 auto 48px', transitionDelay: '0.1s',
|
|
}}>
|
|
Download Loyaly and start earning on your very next purchase. Free. Instant. Yours.
|
|
</p>
|
|
|
|
{/* CTAs */}
|
|
<div className="fp-rise" style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 56, transitionDelay: '0.2s' }}>
|
|
<Link href="/contacts" ref={mag1} className="fp-btn fp-btn-primary">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
|
|
Download for iOS
|
|
</Link>
|
|
<Link href="/contacts" ref={mag2} className="fp-btn" style={{
|
|
padding: '17px 34px', background: '#171512', color: '#fff',
|
|
border: 'none', borderRadius: 100,
|
|
transition: 'all 0.35s cubic-bezier(0.34,1.56,0.64,1)',
|
|
}}>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="2" y="8" width="20" height="10" rx="2"/><path d="M7.83 3l1.3 2.35M16.17 3l-1.3 2.35"/></svg>
|
|
Get on Android
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Proof stats — colored chips */}
|
|
<div className="fp-rise" style={{
|
|
display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap', transitionDelay: '0.3s',
|
|
}}>
|
|
{proof.map((p, i) => (
|
|
<div key={i} style={{
|
|
padding: '16px 24px', borderRadius: 18, textAlign: 'center',
|
|
background: `${p.color}0f`, border: `2px solid ${p.color}`,
|
|
minWidth: 110,
|
|
}}>
|
|
<div style={{ fontSize: 'clamp(20px, 2.5vw, 28px)', fontWeight: 900, color: p.color, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em' }}>{p.val}</div>
|
|
<div style={{ fontSize: 11, color: 'rgba(23,21,18,0.55)', fontFamily: 'Manrope, sans-serif', marginTop: 5, letterSpacing: '0.04em' }}>{p.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|