Update pages, components, and add stock images for visual layout enhancements
This commit is contained in:
R-Bharathraj
@@ -2,6 +2,7 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import GSAPAnimator from '@/components/GSAPAnimator';
|
||||
import { useReveal } from '@/hooks/useReveal';
|
||||
|
||||
@@ -48,88 +49,50 @@ export default function SolutionsPage() {
|
||||
|
||||
{/* ── HERO ── */}
|
||||
<section style={{
|
||||
minHeight: '92vh', background: '#07070d',
|
||||
minHeight: '92vh', background: 'radial-gradient(ellipse 120% 90% at 70% 0%, #2c2350 0%, #211c3e 38%, #181429 100%)',
|
||||
display: 'flex', alignItems: 'center',
|
||||
padding: '120px 8% 100px',
|
||||
margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
|
||||
margin: '0 20px 20px', borderRadius: '0 0 32px 32px',
|
||||
position: 'relative', overflow: 'hidden',
|
||||
}}>
|
||||
{/* Background photo */}
|
||||
<Image src="/images/stock/solutions.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9 }} />
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(24,20,41,0.1) 0%, rgba(24,20,41,0.55) 85%)' }} />
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 65% at 50% 48%, rgba(18,14,30,0.78) 0%, rgba(18,14,30,0.35) 60%, transparent 100%)' }} />
|
||||
{/* Accent blobs */}
|
||||
<div style={{ position: 'absolute', top: '-12%', left: '4%', width: 480, height: 480, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.2) 0%, transparent 70%)', pointerEvents: 'none' }} />
|
||||
<div style={{ position: 'absolute', bottom: '-14%', right: '0%', width: 440, height: 440, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
|
||||
{/* 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)',
|
||||
border: '1px solid rgba(244,190,40,0.07)',
|
||||
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 style={{ width: '100%', position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
|
||||
<div style={{ maxWidth: 760 }}>
|
||||
<div data-gsap="badge" style={{
|
||||
fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 28,
|
||||
display: 'inline-flex', alignItems: 'center', gap: 10,
|
||||
padding: '8px 18px', borderRadius: 100,
|
||||
background: 'rgba(244,190,40,0.08)', border: '1px solid rgba(244,190,40,0.22)',
|
||||
}}>
|
||||
<span style={{ width: 6, height: 6, borderRadius: '50%', 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>
|
||||
<span style={{ color: '#f4be28' }}>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' }}>
|
||||
<p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.6vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', maxWidth: 540, margin: '0 auto 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 style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}>
|
||||
<Link href="/contacts" style={{ padding: '18px 40px', background: '#f4be28', color: '#111', fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, 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: 'Sora, sans-serif', border: '1px solid rgba(255,255,255,0.12)', backdropFilter: 'blur(12px)' }}>Book Demo</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,12 +103,12 @@ export default function SolutionsPage() {
|
||||
<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>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, 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 }}>
|
||||
<p style={{ fontSize: 16, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, 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>
|
||||
@@ -168,12 +131,12 @@ export default function SolutionsPage() {
|
||||
>
|
||||
<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>
|
||||
<p style={{ fontSize: 15, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, 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 style={{ fontSize: 11, color: 'rgba(0,0,0,0.35)', fontFamily: 'Sora, sans-serif', marginTop: 3 }}>{m.lbl}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -198,7 +161,7 @@ export default function SolutionsPage() {
|
||||
<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>
|
||||
<p style={{ fontSize: 16, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', margin: 0 }}>— Loyaly.ai, 2025</p>
|
||||
</RevealBlock>
|
||||
</section>
|
||||
|
||||
@@ -208,12 +171,12 @@ export default function SolutionsPage() {
|
||||
<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 }}>
|
||||
<p style={{ fontSize: 16, color: 'rgba(0,0,0,0.5)', fontFamily: 'Sora, 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>
|
||||
<Link href="/contacts" style={{ padding: '18px 40px', background: '#f4be28', color: '#111', fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, 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: 'Sora, sans-serif', border: '1.5px solid rgba(0,0,0,0.15)' }}>Explore Solutions</Link>
|
||||
</div>
|
||||
</RevealBlock>
|
||||
<RevealBlock delay={0.15}>
|
||||
@@ -224,7 +187,7 @@ export default function SolutionsPage() {
|
||||
].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 style={{ fontSize: 13, color: 'rgba(0,0,0,0.4)', fontFamily: 'Sora, sans-serif', marginTop: 8 }}>{s.l}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user