convert-next.js
This commit is contained in:
R-Bharathraj
235
src/app/solutions_page/page.tsx
Normal file
235
src/app/solutions_page/page.tsx
Normal file
@@ -0,0 +1,235 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import GSAPAnimator from '@/components/GSAPAnimator';
|
||||
import { useReveal } from '@/hooks/useReveal';
|
||||
|
||||
function RevealBlock({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
|
||||
const { ref, visible } = useReveal();
|
||||
return (
|
||||
<div ref={ref} style={{
|
||||
opacity: visible ? 1 : 0,
|
||||
transform: visible ? 'translateY(0)' : 'translateY(52px)',
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
const CAPS = [
|
||||
{
|
||||
n: '01', title: 'Merchant Campaign Platform', color: '#f4be28',
|
||||
desc: 'Register your store, upload products and inventory, then launch interactive promotional campaigns in minutes. Define maximum discounts per product and track performance in real time.',
|
||||
metrics: [{ val: '5+', lbl: 'Game formats' }, { val: '1-click', lbl: 'Campaign setup' }],
|
||||
},
|
||||
{
|
||||
n: '02', title: 'Game-Based Discount Engine', color: '#a78bfa',
|
||||
desc: 'Select a product, choose a game — Maze, Spin Wheel, Scratch Card, or Match Master — and set a maximum discount. Customers play once and discover their reward only after completing the game.',
|
||||
metrics: [{ val: '4×', lbl: 'Engagement lift' }, { val: '100%', lbl: 'Margin controlled' }],
|
||||
},
|
||||
{
|
||||
n: '03', title: 'Smart Coupon System', color: '#34d399',
|
||||
desc: 'Generate daily surprise coupons through the Battery Challenge and other activities. Offer flat discounts, BOGO, percentage-off deals, festival specials, and brand promotions — fresh every day.',
|
||||
metrics: [{ val: '6', lbl: 'Coupon types' }, { val: 'Daily', lbl: 'Fresh surprises' }],
|
||||
},
|
||||
{
|
||||
n: '04', title: 'Footfall & Campaign Analytics', color: '#f97316',
|
||||
desc: 'Track which campaigns drove store visits, measure conversion rates, monitor repeat footfall, and optimize your promotional budget with a real-time analytics dashboard.',
|
||||
metrics: [{ val: '98%', lbl: 'Count accuracy' }, { val: '<9ms', lbl: 'Real-time latency' }],
|
||||
},
|
||||
];
|
||||
|
||||
export default function SolutionsPage() {
|
||||
const [hovered, setHovered] = useState<number | null>(null);
|
||||
|
||||
return (
|
||||
<main style={{ background: '#ffffff', minHeight: '100vh', overflowX: 'hidden' }}>
|
||||
<GSAPAnimator />
|
||||
|
||||
{/* ── HERO ── */}
|
||||
<section style={{
|
||||
minHeight: '92vh', background: '#07070d',
|
||||
display: 'flex', alignItems: 'center',
|
||||
padding: '120px 8% 100px',
|
||||
margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
|
||||
position: 'relative', overflow: 'hidden',
|
||||
}}>
|
||||
{/* Animated rings */}
|
||||
{[600, 900, 1200].map((s, i) => (
|
||||
<div key={i} style={{
|
||||
position: 'absolute', top: '50%', right: '-10%',
|
||||
width: s, height: s, borderRadius: '50%',
|
||||
border: '1px solid rgba(244,190,40,0.05)',
|
||||
transform: 'translateY(-50%)',
|
||||
pointerEvents: 'none',
|
||||
}} />
|
||||
))}
|
||||
|
||||
<div style={{ width: '100%', position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: '6vw' }}>
|
||||
<div style={{ maxWidth: 680 }}>
|
||||
<div data-gsap="badge" style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 28, display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<span data-gsap="line" style={{ width: 32, height: 1, background: '#f4be28', display: 'block' }} />Solutions
|
||||
</div>
|
||||
<h1 data-gsap="heading" style={{ fontSize: 'clamp(52px, 8.5vw, 130px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.88, color: '#fff', margin: '0 0 36px', fontFamily: 'Sora, sans-serif' }}>
|
||||
Built for<br />Modern<br />
|
||||
<span style={{ WebkitTextStroke: '2px rgba(244,190,40,0.4)', color: 'transparent' }}>Retail Growth.</span>
|
||||
</h1>
|
||||
<p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.6vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', maxWidth: 540, margin: '0 0 52px' }}>
|
||||
Instead of waiting for customers to walk in, create exciting reasons for them to come — with game-based campaigns, smart coupons, and a loyalty ecosystem that rewards every visit.
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
|
||||
<Link href="/contacts" style={{ padding: '18px 40px', background: '#f4be28', color: '#111', fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif', boxShadow: '0 16px 48px rgba(244,190,40,0.25)' }}>Explore Solutions →</Link>
|
||||
<Link href="/contacts" style={{ 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)' }}>Book Demo</Link>
|
||||
</div>
|
||||
</div>
|
||||
{/* Merchant campaign dashboard 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: 18 }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif' }}>Merchant Dashboard</div>
|
||||
<div style={{ fontSize: 10, color: 'rgba(255,255,255,0.32)', fontFamily: 'Manrope, sans-serif', marginTop: 2 }}>Live Campaign Analytics</div>
|
||||
</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>
|
||||
{/* Campaign cards */}
|
||||
{[
|
||||
{ game: 'Maze Challenge', product: 'Nike Air Max', players: 847, conv: 38, color: '#f4be28' },
|
||||
{ game: 'Spin Wheel', product: 'H&M Summer Collection', players: 523, conv: 44, color: '#a78bfa' },
|
||||
{ game: 'Scratch Card', product: 'Starbucks Bundle', players: 1204, conv: 61, color: '#34d399' },
|
||||
].map((c, i) => (
|
||||
<div key={i} style={{ marginBottom: 10, padding: '12px 14px', borderRadius: 14, background: 'rgba(255,255,255,0.03)', border: `1px solid ${c.color}25` }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 10, fontWeight: 700, color: c.color, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{c.game}</div>
|
||||
<div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(255,255,255,0.8)', fontFamily: 'Manrope, sans-serif', marginTop: 2 }}>{c.product}</div>
|
||||
</div>
|
||||
<span style={{ fontSize: 10, background: `${c.color}18`, color: c.color, padding: '3px 8px', borderRadius: 6, fontWeight: 700, fontFamily: 'Manrope, sans-serif' }}>Active</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 14 }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 16, fontWeight: 900, color: '#fff', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>{c.players.toLocaleString()}</div>
|
||||
<div style={{ fontSize: 10, color: 'rgba(255,255,255,0.32)', fontFamily: 'Manrope, sans-serif' }}>Players</div>
|
||||
</div>
|
||||
<div style={{ width: 1, background: 'rgba(255,255,255,0.07)' }} />
|
||||
<div>
|
||||
<div style={{ fontSize: 16, fontWeight: 900, color: c.color, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>{c.conv}%</div>
|
||||
<div style={{ fontSize: 10, color: 'rgba(255,255,255,0.32)', fontFamily: 'Manrope, sans-serif' }}>Conversion</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{/* Footer stat */}
|
||||
<div style={{ marginTop: 4, padding: '12px 14px', borderRadius: 14, background: 'rgba(244,190,40,0.07)', border: '1px solid rgba(244,190,40,0.2)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif' }}>Store visits this week</span>
|
||||
<span style={{ fontSize: 17, fontWeight: 900, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>+42%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── CAPABILITIES ── */}
|
||||
<section style={{ padding: '140px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
|
||||
<RevealBlock>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 80, flexWrap: 'wrap', gap: 24 }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 16 }}>Capabilities</div>
|
||||
<h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: 0, fontFamily: 'Sora, sans-serif' }}>
|
||||
Four tools.<br />One merchant platform.
|
||||
</h2>
|
||||
</div>
|
||||
<p style={{ fontSize: 16, color: 'rgba(0,0,0,0.45)', fontFamily: 'Manrope, sans-serif', maxWidth: 360, lineHeight: 1.7 }}>
|
||||
Every tool works independently and amplifies the others — giving merchants a complete system to attract, engage, and retain customers.
|
||||
</p>
|
||||
</div>
|
||||
</RevealBlock>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{CAPS.map((cap, i) => (
|
||||
<RevealBlock key={i} delay={i * 0.08}>
|
||||
<div
|
||||
onMouseEnter={() => setHovered(i)}
|
||||
onMouseLeave={() => setHovered(null)}
|
||||
style={{
|
||||
display: 'grid', gridTemplateColumns: '80px 1fr 1fr auto',
|
||||
alignItems: 'center', gap: '4vw',
|
||||
padding: '40px 0',
|
||||
borderBottom: '1px solid rgba(0,0,0,0.07)',
|
||||
cursor: 'default',
|
||||
transition: 'all 0.3s ease',
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: 13, fontWeight: 700, color: hovered === i ? cap.color : 'rgba(0,0,0,0.2)', fontFamily: 'Sora, sans-serif', letterSpacing: '0.06em', transition: 'color 0.3s' }}>{cap.n}</span>
|
||||
<h3 style={{ fontSize: 'clamp(22px, 2.8vw, 40px)', fontWeight: 800, color: hovered === i ? '#0a0a0f' : 'rgba(0,0,0,0.8)', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em', margin: 0, transition: 'color 0.3s' }}>{cap.title}</h3>
|
||||
<p style={{ fontSize: 15, color: 'rgba(0,0,0,0.45)', fontFamily: 'Manrope, sans-serif', margin: 0, lineHeight: 1.6, maxWidth: 340 }}>{cap.desc}</p>
|
||||
<div style={{ display: 'flex', gap: 28 }}>
|
||||
{cap.metrics.map((m, j) => (
|
||||
<div key={j} style={{ textAlign: 'right' }}>
|
||||
<div style={{ fontSize: 22, fontWeight: 900, color: cap.color, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em' }}>{m.val}</div>
|
||||
<div style={{ fontSize: 11, color: 'rgba(0,0,0,0.35)', fontFamily: 'Manrope, sans-serif', marginTop: 3 }}>{m.lbl}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</RevealBlock>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── WHY IT MATTERS ── */}
|
||||
<section style={{ padding: '140px 8%', background: '#07070d', margin: '0 20px 20px', borderRadius: 24, overflow: 'hidden', position: 'relative' }}>
|
||||
<div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(244,190,40,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(244,190,40,0.025) 1px,transparent 1px)', backgroundSize: '64px 64px', pointerEvents: 'none' }} />
|
||||
<RevealBlock>
|
||||
<blockquote style={{
|
||||
margin: 0, padding: 0,
|
||||
fontSize: 'clamp(32px, 5vw, 72px)', fontWeight: 900,
|
||||
letterSpacing: '-0.04em', lineHeight: 1.05,
|
||||
color: '#fff', fontFamily: 'Sora, sans-serif',
|
||||
maxWidth: 900,
|
||||
}}>
|
||||
"Every digital interaction should lead to a{' '}
|
||||
<span style={{ color: '#f4be28' }}>meaningful in-store experience.</span>"
|
||||
</blockquote>
|
||||
<div style={{ height: 2, width: 80, background: '#f4be28', margin: '48px 0 32px' }} />
|
||||
<p style={{ fontSize: 16, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', margin: 0 }}>— Loyaly.ai, 2025</p>
|
||||
</RevealBlock>
|
||||
</section>
|
||||
|
||||
{/* ── FINAL CTA ── */}
|
||||
<section style={{ padding: '140px 8%', background: '#fff8e8', margin: '0 20px 20px', borderRadius: 24, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6vw', alignItems: 'center' }}>
|
||||
<RevealBlock>
|
||||
<h2 style={{ fontSize: 'clamp(36px, 5vw, 68px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 24px', fontFamily: 'Sora, sans-serif' }}>
|
||||
See every solution working together.
|
||||
</h2>
|
||||
<p style={{ fontSize: 16, color: 'rgba(0,0,0,0.5)', fontFamily: 'Manrope, sans-serif', margin: '0 0 40px', lineHeight: 1.7 }}>
|
||||
Get a tailored walkthrough of how Loyaly.ai's merchant platform, game campaigns, and coupon engine fit your specific retail format.
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
|
||||
<Link href="/contacts" style={{ padding: '18px 40px', background: '#f4be28', color: '#111', fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif', boxShadow: '0 12px 40px rgba(244,190,40,0.3)' }}>Book Demo →</Link>
|
||||
<Link href="/contacts" style={{ padding: '18px 40px', background: 'transparent', color: '#111', fontSize: 16, fontWeight: 700, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif', border: '1.5px solid rgba(0,0,0,0.15)' }}>Explore Solutions</Link>
|
||||
</div>
|
||||
</RevealBlock>
|
||||
<RevealBlock delay={0.15}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
||||
{[
|
||||
{ v: '10K+', l: 'Partner stores' }, { v: '50K+', l: 'Active users' },
|
||||
{ v: '98%', l: 'Uptime SLA' }, { v: '<9ms', l: 'Response time' },
|
||||
].map((s, i) => (
|
||||
<div key={i} style={{ padding: '32px 28px', background: '#fff', borderRadius: 20, boxShadow: '0 4px 32px rgba(0,0,0,0.06)', border: '1px solid rgba(0,0,0,0.05)' }}>
|
||||
<div style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', fontWeight: 900, color: '#0a0a0f', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.04em' }}>{s.v}</div>
|
||||
<div style={{ fontSize: 13, color: 'rgba(0,0,0,0.4)', fontFamily: 'Manrope, sans-serif', marginTop: 8 }}>{s.l}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</RevealBlock>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user