357 lines
21 KiB
TypeScript
357 lines
21 KiB
TypeScript
'use client';
|
||
|
||
import React, { useRef, useState, useEffect } from 'react';
|
||
import Link from 'next/link';
|
||
import GSAPAnimator from '@/components/GSAPAnimator';
|
||
import { useReveal } from '@/hooks/useReveal';
|
||
|
||
const PRODUCTS = [
|
||
{
|
||
name: 'Behavision',
|
||
tag: 'Footfall AI',
|
||
desc: 'Track footfall, measure conversions, and understand in-store behavior with precision heatmaps and dwell-time analytics.',
|
||
metric: '3.2×', metricLabel: 'conversion uplift',
|
||
color: '#f4be28',
|
||
},
|
||
{
|
||
name: 'SpendSense',
|
||
tag: 'Spend Intelligence',
|
||
desc: 'Analyze spending patterns and identify high-value customers before your competition does.',
|
||
metric: '68%', metricLabel: 'retention improvement',
|
||
color: '#a78bfa',
|
||
},
|
||
{
|
||
name: 'Dyscount',
|
||
tag: 'Smart Discounts',
|
||
desc: 'Deliver targeted discounts that actually convert — without killing your margins.',
|
||
metric: '41%', metricLabel: 'discount waste reduced',
|
||
color: '#34d399',
|
||
},
|
||
];
|
||
|
||
const OUTCOMES = [
|
||
{ stat: '3.2×', label: 'Conversion rate increase' },
|
||
{ stat: '68%', label: 'Customer retention boost' },
|
||
{ stat: '41%', label: 'Discount spend saved' },
|
||
{ stat: '9ms', label: 'Real-time decision latency' },
|
||
];
|
||
|
||
const WHO = [
|
||
{
|
||
label: 'Retail Stores',
|
||
icon: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#f4be28" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9l1-4h16l1 4"/><path d="M3 9h18v11a1 1 0 01-1 1H4a1 1 0 01-1-1V9z"/><path d="M9 21V12h6v9"/><path d="M3 9a2 2 0 002 2 2 2 0 002-2 2 2 0 002 2 2 2 0 002-2 2 2 0 002 2 2 2 0 002-2"/></svg>,
|
||
},
|
||
{
|
||
label: 'Shopping Malls',
|
||
icon: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#f4be28" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="7" width="20" height="14" rx="1"/><path d="M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2"/><path d="M12 12v3"/><path d="M8 12h8"/></svg>,
|
||
},
|
||
{
|
||
label: 'QSR Chains',
|
||
icon: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#f4be28" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M18 8h1a4 4 0 010 8h-1"/><path d="M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg>,
|
||
},
|
||
{
|
||
label: 'Franchise Businesses',
|
||
icon: <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#f4be28" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="19" r="2"/><path d="M12 7v4M12 11l-5 6M12 11l5 6"/></svg>,
|
||
},
|
||
];
|
||
|
||
function RevealBlock({ children, delay = 0, className = '' }: { children: React.ReactNode; delay?: number; className?: string }) {
|
||
const { ref, visible } = useReveal();
|
||
return (
|
||
<div ref={ref} className={className} style={{
|
||
opacity: visible ? 1 : 0,
|
||
transform: visible ? 'translateY(0)' : 'translateY(48px)',
|
||
transition: `opacity 0.9s cubic-bezier(0.22,1,0.36,1) ${delay}s, transform 0.9s cubic-bezier(0.22,1,0.36,1) ${delay}s`,
|
||
}}>
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function ForBusinessPage() {
|
||
const [activeProduct, setActiveProduct] = useState(0);
|
||
const [countVisible, setCountVisible] = useState(false);
|
||
const statsRef = useRef<HTMLDivElement>(null);
|
||
|
||
useEffect(() => {
|
||
const el = statsRef.current;
|
||
if (!el) return;
|
||
const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setCountVisible(true); obs.disconnect(); } }, { threshold: 0.2 });
|
||
obs.observe(el);
|
||
return () => obs.disconnect();
|
||
}, []);
|
||
|
||
return (
|
||
<main style={{ background: '#ffffff', minHeight: '100vh', overflowX: 'hidden' }}>
|
||
<GSAPAnimator />
|
||
|
||
{/* ── HERO ── */}
|
||
<section style={{
|
||
minHeight: '100vh', background: '#07070d',
|
||
display: 'flex', alignItems: 'center',
|
||
padding: '120px 8% 100px', position: 'relative', overflow: 'hidden',
|
||
margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
|
||
}}>
|
||
{/* Grid bg */}
|
||
<div style={{
|
||
position: 'absolute', inset: 0, pointerEvents: 'none',
|
||
backgroundImage: 'linear-gradient(rgba(244,190,40,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(244,190,40,0.03) 1px,transparent 1px)',
|
||
backgroundSize: '72px 72px',
|
||
}} />
|
||
|
||
<div style={{ width: '100%', position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: '6vw' }}>
|
||
<div style={{ maxWidth: 680 }}>
|
||
<div style={{
|
||
display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 32,
|
||
background: 'rgba(244,190,40,0.08)', border: '1px solid rgba(244,190,40,0.2)',
|
||
borderRadius: 100, padding: '8px 20px',
|
||
}}>
|
||
<span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />
|
||
<span style={{ fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.55)', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase' }}>For Business</span>
|
||
</div>
|
||
|
||
<h1 data-gsap="heading" style={{
|
||
fontSize: 'clamp(52px, 8vw, 120px)', fontWeight: 900,
|
||
letterSpacing: '-0.05em', lineHeight: 0.9,
|
||
color: '#ffffff', margin: '0 0 32px', fontFamily: 'Sora, sans-serif',
|
||
}}>
|
||
Turn Footfall<br />
|
||
<span style={{
|
||
background: 'linear-gradient(105deg,#f4be28 0%,#fff8e0 45%,#f4be28 60%,#ff9500 100%)',
|
||
backgroundSize: '200% auto', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
|
||
animation: 'shimmer 3s linear infinite',
|
||
}}>Into Revenue.</span>
|
||
</h1>
|
||
|
||
<p data-gsap="text" style={{
|
||
fontSize: 'clamp(16px, 1.6vw, 21px)', lineHeight: 1.7, color: 'rgba(255,255,255,0.45)',
|
||
fontFamily: 'Manrope, sans-serif', maxWidth: 560, margin: '0 0 52px',
|
||
}}>
|
||
Loyaly.ai gives you complete visibility and control over your retail operations — understanding customers from entry to purchase.
|
||
</p>
|
||
|
||
<div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
|
||
<Link href="/contacts" style={{
|
||
display: 'inline-flex', alignItems: 'center', gap: 10,
|
||
padding: '18px 40px', background: '#f4be28', color: '#111',
|
||
fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none',
|
||
fontFamily: 'Manrope, sans-serif', boxShadow: '0 16px 60px rgba(244,190,40,0.3)',
|
||
}}>Book a Demo →</Link>
|
||
<Link href="/contacts" style={{
|
||
display: 'inline-flex', alignItems: 'center', gap: 10,
|
||
padding: '18px 40px', background: 'rgba(255,255,255,0.06)', color: '#fff',
|
||
fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none',
|
||
fontFamily: 'Manrope, sans-serif', border: '1px solid rgba(255,255,255,0.12)',
|
||
backdropFilter: 'blur(12px)',
|
||
}}>Talk to Sales</Link>
|
||
</div>
|
||
</div>
|
||
{/* Real-time analytics widget */}
|
||
<div className="pw-widget-col" style={{ flexShrink: 0, width: 340 }}>
|
||
<div style={{
|
||
borderRadius: 24, padding: '22px',
|
||
background: 'linear-gradient(145deg,#0e0e13 0%,#16161d 100%)',
|
||
border: '1px solid rgba(244,190,40,0.15)',
|
||
boxShadow: '0 40px 100px rgba(0,0,0,0.6)',
|
||
}}>
|
||
{/* Header */}
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
|
||
<div style={{ fontSize: 13, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif' }}>Live Analytics</div>
|
||
<span style={{ fontSize: 10, color: '#4ade80', fontWeight: 700, background: 'rgba(74,222,128,0.1)', border: '1px solid rgba(74,222,128,0.25)', padding: '4px 10px', borderRadius: 100, fontFamily: 'Manrope, sans-serif' }}>● LIVE</span>
|
||
</div>
|
||
<div style={{ fontSize: 11, color: 'rgba(255,255,255,0.28)', fontFamily: 'Manrope, sans-serif', marginBottom: 16 }}>Coimbatore Flagship Store</div>
|
||
{/* Main visitors stat */}
|
||
<div style={{ marginBottom: 16, padding: '16px', borderRadius: 16, background: 'rgba(244,190,40,0.07)', border: '1px solid rgba(244,190,40,0.2)' }}>
|
||
<div style={{ fontSize: 11, color: 'rgba(255,255,255,0.38)', fontFamily: 'Manrope, sans-serif', marginBottom: 4 }}>Visitors Today</div>
|
||
<div style={{ fontSize: 38, fontWeight: 900, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.04em', lineHeight: 1 }}>2,847</div>
|
||
<div style={{ fontSize: 11, color: '#4ade80', fontWeight: 700, fontFamily: 'Manrope, sans-serif', marginTop: 8 }}>↑ +12% vs yesterday</div>
|
||
</div>
|
||
{/* Mini bar chart */}
|
||
<div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 48, marginBottom: 16, padding: '0 4px' }}>
|
||
{[30, 45, 38, 55, 62, 50, 70, 80, 65, 90, 75, 60].map((h, i) => (
|
||
<div key={i} style={{ flex: 1, height: `${h}%`, borderRadius: '3px 3px 0 0', background: i === 9 ? '#f4be28' : `rgba(244,190,40,${0.15 + i * 0.04})` }} />
|
||
))}
|
||
</div>
|
||
{/* Metric rows */}
|
||
{[
|
||
{ label: 'Conversion Rate', val: '34.8%', delta: '+3.2×', color: '#f4be28' },
|
||
{ label: 'Avg Basket Value', val: '₹1,240', delta: '+18%', color: '#a78bfa' },
|
||
{ label: 'Customer Retention', val: '68%', delta: '+12%', color: '#4ade80' },
|
||
{ label: 'Discount Savings', val: '41%', delta: 'saved', color: '#34d399' },
|
||
].map((m, i) => (
|
||
<div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '9px 0', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
|
||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif' }}>{m.label}</span>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
|
||
<span style={{ fontSize: 13, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif' }}>{m.val}</span>
|
||
<span style={{ fontSize: 10, fontWeight: 700, color: m.color, background: `${m.color}15`, padding: '2px 7px', borderRadius: 6, fontFamily: 'Manrope, sans-serif' }}>{m.delta}</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── CHALLENGE ── */}
|
||
<section style={{ padding: '140px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
|
||
<RevealBlock>
|
||
<div style={{ maxWidth: 200, height: 2, background: '#f4be28', marginBottom: 48 }} />
|
||
</RevealBlock>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8vw', alignItems: 'center' }}>
|
||
<RevealBlock>
|
||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 24 }}>The Challenge</div>
|
||
<h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 28px', fontFamily: 'Sora, sans-serif' }}>
|
||
You're Getting<br />Visitors. But<br />
|
||
<em style={{ fontStyle: 'normal', color: '#c9960f' }}>Missing Revenue.</em>
|
||
</h2>
|
||
</RevealBlock>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
|
||
{[
|
||
"You don't know who walks into your store.",
|
||
"You don't know what they're looking for.",
|
||
"You don't know why they leave.",
|
||
"And your discounts? Just guesswork.",
|
||
].map((line, i) => (
|
||
<RevealBlock key={i} delay={i * 0.1}>
|
||
<div style={{
|
||
padding: '24px 0',
|
||
borderBottom: '1px solid rgba(0,0,0,0.07)',
|
||
display: 'flex', gap: 20, alignItems: 'flex-start',
|
||
}}>
|
||
<span style={{ fontSize: 12, fontWeight: 700, color: '#f4be28', fontFamily: 'Sora, sans-serif', marginTop: 3, flexShrink: 0 }}>0{i + 1}</span>
|
||
<span style={{ fontSize: 'clamp(16px, 1.6vw, 22px)', fontWeight: 600, color: '#1a1a1a', fontFamily: 'Manrope, sans-serif', lineHeight: 1.4 }}>{line}</span>
|
||
</div>
|
||
</RevealBlock>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── PRODUCTS ── */}
|
||
<section style={{ padding: '140px 8%', background: '#07070d', margin: '0 20px 20px', borderRadius: 24 }}>
|
||
<RevealBlock>
|
||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 20 }}>Our Products</div>
|
||
<h2 style={{ fontSize: 'clamp(40px, 5.5vw, 80px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.92, color: '#fff', margin: '0 0 80px', fontFamily: 'Sora, sans-serif', maxWidth: 700 }}>
|
||
AI-Powered Retail Intelligence.
|
||
</h2>
|
||
</RevealBlock>
|
||
|
||
{/* Tab selector */}
|
||
<div style={{ display: 'flex', gap: 4, marginBottom: 48, background: 'rgba(255,255,255,0.04)', borderRadius: 100, padding: 4, width: 'fit-content', border: '1px solid rgba(255,255,255,0.08)' }}>
|
||
{PRODUCTS.map((p, i) => (
|
||
<button key={i} onClick={() => setActiveProduct(i)} style={{
|
||
padding: '10px 24px', borderRadius: 100, border: 'none', cursor: 'pointer',
|
||
background: activeProduct === i ? p.color : 'transparent',
|
||
color: activeProduct === i ? '#111' : 'rgba(255,255,255,0.45)',
|
||
fontSize: 14, fontWeight: 700, fontFamily: 'Manrope, sans-serif',
|
||
transition: 'all 0.3s cubic-bezier(0.22,1,0.36,1)',
|
||
}}>{p.name}</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Product detail */}
|
||
{PRODUCTS.map((p, i) => (
|
||
<div key={i} style={{
|
||
display: activeProduct === i ? 'grid' : 'none',
|
||
gridTemplateColumns: '1fr 1fr', gap: '6vw', alignItems: 'center',
|
||
}}>
|
||
<div>
|
||
<div style={{
|
||
display: 'inline-block', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
|
||
textTransform: 'uppercase', color: p.color, fontFamily: 'Manrope, sans-serif',
|
||
marginBottom: 20, background: `${p.color}15`, padding: '6px 14px', borderRadius: 100,
|
||
border: `1px solid ${p.color}30`,
|
||
}}>{p.tag}</div>
|
||
<h3 style={{ fontSize: 'clamp(32px, 4vw, 60px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: '0 0 24px', fontFamily: 'Sora, sans-serif' }}>{p.name}</h3>
|
||
<p style={{ fontSize: 18, lineHeight: 1.75, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif', margin: '0 0 40px' }}>{p.desc}</p>
|
||
<Link href="/contacts" style={{
|
||
display: 'inline-flex', alignItems: 'center', gap: 8,
|
||
padding: '14px 28px', background: p.color, color: '#111',
|
||
fontSize: 14, fontWeight: 800, borderRadius: 100, textDecoration: 'none',
|
||
fontFamily: 'Manrope, sans-serif',
|
||
}}>Learn More →</Link>
|
||
</div>
|
||
<div style={{
|
||
background: 'rgba(255,255,255,0.03)', border: `1px solid ${p.color}20`,
|
||
borderRadius: 24, padding: '48px', textAlign: 'center',
|
||
boxShadow: `0 0 80px ${p.color}08`,
|
||
}}>
|
||
<div style={{ fontSize: 'clamp(60px, 9vw, 110px)', fontWeight: 900, color: p.color, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.05em', lineHeight: 1 }}>{p.metric}</div>
|
||
<div style={{ fontSize: 14, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', marginTop: 12, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{p.metricLabel}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</section>
|
||
|
||
{/* ── OUTCOMES ── */}
|
||
<section ref={statsRef} style={{ padding: '140px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
|
||
<RevealBlock>
|
||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 20 }}>Outcomes</div>
|
||
<h2 style={{ fontSize: 'clamp(36px, 5vw, 68px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 80px', fontFamily: 'Sora, sans-serif' }}>
|
||
Real Results.<br />Not Assumptions.
|
||
</h2>
|
||
</RevealBlock>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 2 }}>
|
||
{OUTCOMES.map((o, i) => (
|
||
<RevealBlock key={i} delay={i * 0.1}>
|
||
<div style={{
|
||
padding: '48px 32px',
|
||
background: i % 2 === 0 ? '#07070d' : '#f4be28',
|
||
borderRadius: i === 0 ? '24px 0 0 24px' : i === 3 ? '0 24px 24px 0' : 0,
|
||
}}>
|
||
<div style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 900, color: i % 2 === 0 ? '#f4be28' : '#111', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.04em', lineHeight: 1 }}>{o.stat}</div>
|
||
<div style={{ fontSize: 14, color: i % 2 === 0 ? 'rgba(255,255,255,0.45)' : 'rgba(0,0,0,0.55)', fontFamily: 'Manrope, sans-serif', marginTop: 14, lineHeight: 1.5 }}>{o.label}</div>
|
||
</div>
|
||
</RevealBlock>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── WHO IT'S FOR ── */}
|
||
<section style={{ padding: '140px 8%', background: '#07070d', margin: '0 20px 20px', borderRadius: 24 }}>
|
||
<RevealBlock>
|
||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 20 }}>Who It's For</div>
|
||
<h2 style={{ fontSize: 'clamp(36px, 5vw, 68px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: '0 0 80px', fontFamily: 'Sora, sans-serif', maxWidth: 600 }}>
|
||
Built for every format of physical retail.
|
||
</h2>
|
||
</RevealBlock>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }}>
|
||
{WHO.map((w, i) => (
|
||
<RevealBlock key={i} delay={i * 0.1}>
|
||
<div style={{
|
||
padding: '48px 32px',
|
||
background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)',
|
||
borderRadius: 20, backdropFilter: 'blur(12px)',
|
||
transition: 'all 0.3s ease',
|
||
}}>
|
||
<div style={{ marginBottom: 20 }}>{w.icon}</div>
|
||
<div style={{ fontSize: 20, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif' }}>{w.label}</div>
|
||
</div>
|
||
</RevealBlock>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── FINAL CTA ── */}
|
||
<section style={{ padding: '160px 8%', background: '#f4be28', margin: '0 20px 20px', borderRadius: 24, textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
|
||
<div style={{ position: 'absolute', top: '-20%', left: '50%', transform: 'translateX(-50%)', width: '120%', height: '140%', background: 'radial-gradient(ellipse,rgba(255,255,255,0.15) 0%,transparent 60%)', pointerEvents: 'none' }} />
|
||
<RevealBlock>
|
||
<h2 style={{ fontSize: 'clamp(44px, 7vw, 100px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.92, color: '#111', margin: '0 0 24px', fontFamily: 'Sora, sans-serif', position: 'relative', zIndex: 2 }}>
|
||
Ready to Transform<br />Your Retail Business?
|
||
</h2>
|
||
<p style={{ fontSize: 18, color: 'rgba(0,0,0,0.55)', fontFamily: 'Manrope, sans-serif', margin: '0 auto 52px', maxWidth: 480, position: 'relative', zIndex: 2 }}>Schedule a demo and see your store's potential in 30 minutes.</p>
|
||
<div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', position: 'relative', zIndex: 2 }}>
|
||
<Link href="/contacts" style={{ padding: '18px 44px', background: '#111', color: '#f4be28', fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif' }}>Schedule a Demo</Link>
|
||
<Link href="/contacts" style={{ padding: '18px 44px', background: 'rgba(0,0,0,0.1)', color: '#111', fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif', border: '1px solid rgba(0,0,0,0.15)' }}>Talk to Sales</Link>
|
||
</div>
|
||
</RevealBlock>
|
||
</section>
|
||
|
||
<style>{`
|
||
@keyframes shimmer { 0%{background-position:200% center} 100%{background-position:-200% center} }
|
||
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
|
||
`}</style>
|
||
</main>
|
||
);
|
||
}
|