Update pages, components, and add stock images for visual layout enhancements
This commit is contained in:
R-Bharathraj
BIN
public/images/stock/about-team.jpg
Normal file
BIN
public/images/stock/about-team.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
public/images/stock/app-hero.jpg
Normal file
BIN
public/images/stock/app-hero.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
public/images/stock/blog-article.jpg
Normal file
BIN
public/images/stock/blog-article.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
public/images/stock/blog-main.jpg
Normal file
BIN
public/images/stock/blog-main.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
public/images/stock/contacts.jpg
Normal file
BIN
public/images/stock/contacts.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
public/images/stock/deals-retail.jpg
Normal file
BIN
public/images/stock/deals-retail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
BIN
public/images/stock/faq.jpg
Normal file
BIN
public/images/stock/faq.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
BIN
public/images/stock/solutions.jpg
Normal file
BIN
public/images/stock/solutions.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
public/images/stock/use-cases.jpg
Normal file
BIN
public/images/stock/use-cases.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
@@ -2,6 +2,7 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useReveal } from '@/hooks/useReveal';
|
||||
import GSAPAnimator from '@/components/GSAPAnimator';
|
||||
|
||||
@@ -32,28 +33,41 @@ export default function AboutUsPage() {
|
||||
|
||||
{/* ── HERO ── */}
|
||||
<section style={{
|
||||
minHeight: '100vh', background: '#07070d',
|
||||
minHeight: '100vh', background: 'radial-gradient(ellipse 120% 90% at 22% 0%, #3a2b5e 0%, #251c40 38%, #1a1530 100%)',
|
||||
display: 'flex', alignItems: 'center',
|
||||
padding: '120px 8% 80px',
|
||||
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/about-team.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9 }} />
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,21,48,0.1) 0%, rgba(26,21,48,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%', right: '-8%', width: 520, height: 520, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.22) 0%, transparent 70%)', filter: 'blur(10px)', pointerEvents: 'none' }} />
|
||||
<div style={{ position: 'absolute', bottom: '-15%', left: '-10%', width: 460, height: 460, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
|
||||
{/* Big ghost text */}
|
||||
<div style={{
|
||||
position: 'absolute', top: '50%', left: '50%',
|
||||
transform: 'translate(-50%,-50%)',
|
||||
fontSize: 'clamp(120px, 22vw, 320px)', fontWeight: 900,
|
||||
fontFamily: 'Sora, sans-serif', color: 'transparent',
|
||||
WebkitTextStroke: '1px rgba(244,190,40,0.06)',
|
||||
WebkitTextStroke: '1px rgba(244,190,40,0.08)',
|
||||
letterSpacing: '-0.06em', lineHeight: 1,
|
||||
whiteSpace: 'nowrap', userSelect: 'none',
|
||||
pointerEvents: 'none', zIndex: 0,
|
||||
}}>LOYALY</div>
|
||||
|
||||
<div style={{ position: 'relative', zIndex: 2, width: '100%', 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' }} />Meet the Crew
|
||||
<div style={{ position: 'relative', zIndex: 2, width: '100%', 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: 32,
|
||||
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' }} />Meet the Crew
|
||||
</div>
|
||||
<h1 data-gsap="heading" style={{
|
||||
fontSize: 'clamp(52px, 9vw, 140px)', fontWeight: 900,
|
||||
@@ -63,51 +77,10 @@ export default function AboutUsPage() {
|
||||
The People<br />
|
||||
<span style={{ color: '#f4be28' }}>Behind</span> Loyaly.
|
||||
</h1>
|
||||
<p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', maxWidth: 560, margin: 0 }}>
|
||||
<p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', maxWidth: 560, margin: '0 auto' }}>
|
||||
We're not just building a product. We're redefining retail — one store at a time.
|
||||
</p>
|
||||
</div>
|
||||
{/* Company DNA widget */}
|
||||
<div className="pw-widget-col" style={{ flexShrink: 0, width: 320 }}>
|
||||
<div style={{
|
||||
borderRadius: 24, padding: '28px 24px',
|
||||
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)',
|
||||
}}>
|
||||
{/* Brand header */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
|
||||
<div style={{ width: 42, height: 42, borderRadius: 13, background: 'rgba(244,190,40,0.12)', border: '1px solid rgba(244,190,40,0.28)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, color: '#f4be28' }}>✦</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 15, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif' }}>Loyaly.ai</div>
|
||||
<div style={{ fontSize: 10, color: '#f4be28', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase' }}>AI Retail Platform</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Stats */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 20 }}>
|
||||
{[['2024', 'Founded'], ['12+', 'Cities'], ['20+', 'Team']].map(([v, l]) => (
|
||||
<div key={l} style={{ background: 'rgba(255,255,255,0.04)', borderRadius: 14, padding: '14px 8px', textAlign: 'center', border: '1px solid rgba(255,255,255,0.07)' }}>
|
||||
<div style={{ fontSize: 20, fontWeight: 900, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>{v}</div>
|
||||
<div style={{ fontSize: 10, color: 'rgba(255,255,255,0.38)', fontFamily: 'Manrope, sans-serif', marginTop: 4 }}>{l}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Values */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 18 }}>
|
||||
{['Intelligence first', 'Merchant obsessed', 'Build to last'].map((v, i) => (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', borderRadius: 12, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)' }}>
|
||||
<span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', flexShrink: 0 }} />
|
||||
<span style={{ fontSize: 13, color: 'rgba(255,255,255,0.68)', fontFamily: 'Manrope, sans-serif', fontWeight: 600 }}>{v}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Mission */}
|
||||
<div style={{ padding: '14px 16px', borderRadius: 14, background: 'rgba(244,190,40,0.06)', border: '1px solid rgba(244,190,40,0.2)' }}>
|
||||
<div style={{ fontSize: 10, fontWeight: 700, color: '#f4be28', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>Mission</div>
|
||||
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.65 }}>Transform physical retail with AI-driven intelligence and meaningful customer engagement.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -115,16 +88,16 @@ export default function AboutUsPage() {
|
||||
<section style={{ padding: '140px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8vw', alignItems: 'start' }}>
|
||||
<Reveal>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 24 }}>Our Story</div>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 24 }}>Our Story</div>
|
||||
<h2 style={{ fontSize: 'clamp(36px, 4.5vw, 68px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 32px', fontFamily: 'Sora, sans-serif' }}>
|
||||
We started with<br />a simple idea.
|
||||
</h2>
|
||||
</Reveal>
|
||||
<Reveal delay={0.15}>
|
||||
<p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Manrope, sans-serif', margin: '0 0 32px' }}>
|
||||
<p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', margin: '0 0 32px' }}>
|
||||
Offline retail deserves the same intelligence as online. A store owner in Coimbatore shouldn't be flying blind while an e-commerce algorithm knows exactly what every user wants.
|
||||
</p>
|
||||
<p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Manrope, sans-serif', margin: 0 }}>
|
||||
<p style={{ fontSize: 'clamp(17px, 1.6vw, 22px)', lineHeight: 1.8, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
|
||||
Today, we're building a connected ecosystem where businesses grow smarter and customers shop better — together.
|
||||
</p>
|
||||
</Reveal>
|
||||
@@ -151,7 +124,7 @@ export default function AboutUsPage() {
|
||||
display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
|
||||
margin: '0 20px 20px', boxSizing: 'border-box',
|
||||
}}>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: mv.accent, fontFamily: 'Manrope, sans-serif' }}>{mv.label}</div>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: mv.accent, fontFamily: 'Sora, sans-serif' }}>{mv.label}</div>
|
||||
<p style={{ fontSize: 'clamp(22px, 2.5vw, 36px)', fontWeight: 800, lineHeight: 1.25, color: mv.textColor, fontFamily: 'Sora, sans-serif', margin: 0, letterSpacing: '-0.02em' }}>
|
||||
{mv.body}
|
||||
</p>
|
||||
@@ -164,7 +137,7 @@ export default function AboutUsPage() {
|
||||
{/* ── VALUES ── */}
|
||||
<section style={{ padding: '140px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
|
||||
<Reveal>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 20 }}>How We Work</div>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 20 }}>How We Work</div>
|
||||
<h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#0a0a0f', margin: '0 0 80px', fontFamily: 'Sora, sans-serif' }}>
|
||||
What we believe.
|
||||
</h2>
|
||||
@@ -179,7 +152,7 @@ export default function AboutUsPage() {
|
||||
}}>
|
||||
<span style={{ fontSize: 13, fontWeight: 700, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '0.06em' }}>{v.n}</span>
|
||||
<h3 style={{ fontSize: 'clamp(20px, 2.5vw, 36px)', fontWeight: 800, color: '#0a0a0f', fontFamily: 'Sora, sans-serif', margin: 0, letterSpacing: '-0.03em' }}>{v.title}</h3>
|
||||
<p style={{ fontSize: 16, color: 'rgba(0,0,0,0.45)', fontFamily: 'Manrope, sans-serif', margin: 0, lineHeight: 1.65 }}>{v.desc}</p>
|
||||
<p style={{ fontSize: 16, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, sans-serif', margin: 0, lineHeight: 1.65 }}>{v.desc}</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
@@ -205,7 +178,7 @@ export default function AboutUsPage() {
|
||||
display: 'inline-flex', alignItems: 'center', gap: 10,
|
||||
padding: '18px 44px', background: '#111', color: '#f4be28',
|
||||
fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none',
|
||||
fontFamily: 'Manrope, sans-serif', position: 'relative', zIndex: 2,
|
||||
fontFamily: 'Sora, sans-serif', position: 'relative', zIndex: 2,
|
||||
}}>Join Us →</Link>
|
||||
</Reveal>
|
||||
</section>
|
||||
@@ -237,11 +210,11 @@ function TeamCarousel() {
|
||||
|
||||
{/* Header */}
|
||||
<div style={{ textAlign: 'center', marginBottom: 72, position: 'relative', zIndex: 2, padding: '0 8%' }}>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 16 }}>The Team</div>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 16 }}>The Team</div>
|
||||
<h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: '0 0 16px', fontFamily: 'Sora, sans-serif' }}>
|
||||
Builders. Thinkers.<br />Retail obsessives.
|
||||
</h2>
|
||||
<p style={{ fontSize: 15, color: 'rgba(255,255,255,0.35)', fontFamily: 'Manrope, sans-serif', margin: 0 }}>
|
||||
<p style={{ fontSize: 15, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
|
||||
Profiles coming soon — we're still busy building the future of retail.
|
||||
</p>
|
||||
</div>
|
||||
@@ -325,7 +298,7 @@ function TeamCarousel() {
|
||||
transition: 'opacity 0.4s ease',
|
||||
}}>
|
||||
<div style={{ fontSize: 17, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em', marginBottom: 4 }}>{member.name}</div>
|
||||
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Manrope, sans-serif' }}>{member.role}</div>
|
||||
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif' }}>{member.role}</div>
|
||||
</div>
|
||||
|
||||
{/* Gold dot */}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useReveal } from '@/hooks/useReveal';
|
||||
import GSAPAnimator from '@/components/GSAPAnimator';
|
||||
|
||||
@@ -65,63 +66,38 @@ export default function BlogMainPage() {
|
||||
|
||||
{/* ── HERO ── */}
|
||||
<section style={{
|
||||
padding: '120px 8% 100px', background: '#07070d',
|
||||
margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
|
||||
padding: '120px 8% 100px', background: 'radial-gradient(ellipse 120% 90% at 50% 0%, #2c2350 0%, #211c3e 38%, #181429 100%)',
|
||||
margin: '0 20px 20px', borderRadius: '0 0 32px 32px',
|
||||
position: 'relative', overflow: 'hidden',
|
||||
display: 'flex', alignItems: 'center',
|
||||
}}>
|
||||
{/* Background photo */}
|
||||
<Image src="/images/stock/blog-main.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: '-14%', left: '6%', 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: '-16%', right: '4%', width: 420, height: 420, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
|
||||
<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: '60px 60px', pointerEvents: 'none' }} />
|
||||
|
||||
<div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: '6vw' }}>
|
||||
<div style={{ maxWidth: 680 }}>
|
||||
<div 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 style={{ width: 32, height: 1, background: '#f4be28', display: 'block' }} />Market Insights
|
||||
<div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
|
||||
<div style={{ maxWidth: 720 }}>
|
||||
<div 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' }} />Market Insights
|
||||
</div>
|
||||
<h1 data-gsap="heading" style={{ fontSize: 'clamp(48px, 8vw, 120px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.9, color: '#fff', margin: '0 0 28px', fontFamily: 'Sora, sans-serif' }}>
|
||||
Insights for the<br />
|
||||
<span style={{ color: '#f4be28' }}>Future of Retail.</span>
|
||||
</h1>
|
||||
<p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', maxWidth: 520, margin: 0 }}>
|
||||
<p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', maxWidth: 520, margin: '0 auto' }}>
|
||||
Explore ideas, trends, and strategies shaping modern retail — from our team to yours.
|
||||
</p>
|
||||
</div>
|
||||
{/* Featured article preview widget */}
|
||||
<div className="pw-widget-col" style={{ flexShrink: 0, width: 320 }}>
|
||||
<div style={{
|
||||
borderRadius: 24, overflow: 'hidden',
|
||||
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)',
|
||||
}}>
|
||||
{/* Visual banner */}
|
||||
<div style={{ height: 148, background: 'linear-gradient(135deg,#1a1430 0%,#0e0e1a 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
|
||||
<div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(244,190,40,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(244,190,40,0.04) 1px,transparent 1px)', backgroundSize: '28px 28px' }} />
|
||||
<div style={{ position: 'relative', textAlign: 'center', lineHeight: 1, userSelect: 'none' }}>
|
||||
<div style={{ fontSize: 40, fontWeight: 900, color: 'transparent', WebkitTextStroke: '1px rgba(244,190,40,0.22)', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.04em' }}>RETAIL</div>
|
||||
<div style={{ fontSize: 40, fontWeight: 900, color: 'rgba(244,190,40,0.12)', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.04em' }}>AI</div>
|
||||
</div>
|
||||
<span style={{ position: 'absolute', top: 14, left: 14, fontSize: 10, fontWeight: 700, color: '#f4be28', background: 'rgba(244,190,40,0.12)', border: '1px solid rgba(244,190,40,0.28)', padding: '4px 10px', borderRadius: 100, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Featured</span>
|
||||
</div>
|
||||
{/* Article info */}
|
||||
<div style={{ padding: '18px 20px 22px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
|
||||
<span style={{ fontSize: 10, fontWeight: 700, color: '#f4be28', background: 'rgba(244,190,40,0.1)', border: '1px solid rgba(244,190,40,0.2)', padding: '3px 9px', borderRadius: 100, fontFamily: 'Manrope, sans-serif', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Analytics</span>
|
||||
<span style={{ fontSize: 11, color: 'rgba(255,255,255,0.28)', fontFamily: 'Manrope, sans-serif' }}>6 min read</span>
|
||||
</div>
|
||||
<h3 style={{ fontSize: 16, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em', lineHeight: 1.3, margin: '0 0 10px' }}>Why Footfall Data is the New Gold</h3>
|
||||
<p style={{ fontSize: 12, color: 'rgba(255,255,255,0.38)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.65, margin: '0 0 16px' }}>Offline retailers are sitting on untapped behavioural gold — and most don't even know it exists yet.</p>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.07)' }}>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
{['02', '03', '04'].map(n => (
|
||||
<div key={n} style={{ width: 28, height: 28, borderRadius: 8, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.07)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: 'rgba(255,255,255,0.28)', fontFamily: 'Sora, sans-serif', fontWeight: 700 }}>{n}</div>
|
||||
))}
|
||||
<div style={{ width: 28, height: 28, borderRadius: 8, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.07)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: 'rgba(255,255,255,0.28)', fontFamily: 'Manrope, sans-serif' }}>+2</div>
|
||||
</div>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: '#f4be28', fontFamily: 'Manrope, sans-serif' }}>Read article →</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -133,7 +109,7 @@ export default function BlogMainPage() {
|
||||
padding: '10px 22px', borderRadius: 100,
|
||||
background: activeFilter === f ? '#0a0a0f' : 'transparent',
|
||||
color: activeFilter === f ? '#f4be28' : 'rgba(0,0,0,0.4)',
|
||||
fontSize: 13, fontWeight: 700, fontFamily: 'Manrope, sans-serif',
|
||||
fontSize: 13, fontWeight: 700, fontFamily: 'Sora, sans-serif',
|
||||
border: `1px solid ${activeFilter === f ? '#0a0a0f' : 'rgba(0,0,0,0.1)'}`,
|
||||
cursor: 'pointer', transition: 'all 0.2s ease',
|
||||
}}>{f}</button>
|
||||
@@ -154,13 +130,13 @@ export default function BlogMainPage() {
|
||||
{/* Left — article info */}
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', background: 'rgba(244,190,40,0.1)', padding: '5px 12px', borderRadius: 100, border: '1px solid rgba(244,190,40,0.2)' }}>{featured.tag}</span>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.3)', fontFamily: 'Manrope, sans-serif' }}>{featured.readTime} read</span>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, color: '#f4be28', fontFamily: 'Manrope, sans-serif', background: 'rgba(244,190,40,0.08)', padding: '4px 10px', borderRadius: 100 }}>Featured</span>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', background: 'rgba(244,190,40,0.1)', padding: '5px 12px', borderRadius: 100, border: '1px solid rgba(244,190,40,0.2)' }}>{featured.tag}</span>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.3)', fontFamily: 'Sora, sans-serif' }}>{featured.readTime} read</span>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, color: '#f4be28', fontFamily: 'Sora, sans-serif', background: 'rgba(244,190,40,0.08)', padding: '4px 10px', borderRadius: 100 }}>Featured</span>
|
||||
</div>
|
||||
<h2 style={{ fontSize: 'clamp(28px, 3.5vw, 52px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 1.05, color: '#fff', margin: '0 0 20px', fontFamily: 'Sora, sans-serif' }}>{featured.title}</h2>
|
||||
<p style={{ fontSize: 16, lineHeight: 1.75, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', margin: '0 0 36px' }}>{featured.excerpt}</p>
|
||||
<Link href="/blog_single_page" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 15, fontWeight: 700, color: '#f4be28', fontFamily: 'Manrope, sans-serif', textDecoration: 'none', borderBottom: '1px solid rgba(244,190,40,0.3)', paddingBottom: 4 }}>
|
||||
<p style={{ fontSize: 16, lineHeight: 1.75, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', margin: '0 0 36px' }}>{featured.excerpt}</p>
|
||||
<Link href="/blog_single_page" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 15, fontWeight: 700, color: '#f4be28', fontFamily: 'Sora, sans-serif', textDecoration: 'none', borderBottom: '1px solid rgba(244,190,40,0.3)', paddingBottom: 4 }}>
|
||||
Read Article →
|
||||
</Link>
|
||||
</div>
|
||||
@@ -206,13 +182,13 @@ export default function BlogMainPage() {
|
||||
>
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', background: 'rgba(244,190,40,0.08)', padding: '4px 10px', borderRadius: 100, border: '1px solid rgba(244,190,40,0.15)' }}>{article.tag}</span>
|
||||
<span style={{ fontSize: 12, color: 'rgba(0,0,0,0.3)', fontFamily: 'Manrope, sans-serif' }}>{article.readTime}</span>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', background: 'rgba(244,190,40,0.08)', padding: '4px 10px', borderRadius: 100, border: '1px solid rgba(244,190,40,0.15)' }}>{article.tag}</span>
|
||||
<span style={{ fontSize: 12, color: 'rgba(0,0,0,0.3)', fontFamily: 'Sora, sans-serif' }}>{article.readTime}</span>
|
||||
</div>
|
||||
<h3 style={{ fontSize: 'clamp(20px, 2vw, 28px)', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.2, color: '#0a0a0f', margin: '0 0 16px', fontFamily: 'Sora, sans-serif' }}>{article.title}</h3>
|
||||
<p style={{ fontSize: 14, lineHeight: 1.7, color: 'rgba(0,0,0,0.45)', fontFamily: 'Manrope, sans-serif', margin: 0 }}>{article.excerpt}</p>
|
||||
<p style={{ fontSize: 14, lineHeight: 1.7, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, sans-serif', margin: 0 }}>{article.excerpt}</p>
|
||||
</div>
|
||||
<Link href="/blog_single_page" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 700, color: hovered === i ? '#c9960f' : 'rgba(0,0,0,0.35)', fontFamily: 'Manrope, sans-serif', textDecoration: 'none', marginTop: 28, transition: 'color 0.2s' }}>
|
||||
<Link href="/blog_single_page" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 700, color: hovered === i ? '#c9960f' : 'rgba(0,0,0,0.35)', fontFamily: 'Sora, sans-serif', textDecoration: 'none', marginTop: 28, transition: 'color 0.2s' }}>
|
||||
Read Article →
|
||||
</Link>
|
||||
</div>
|
||||
@@ -228,20 +204,20 @@ export default function BlogMainPage() {
|
||||
<h2 style={{ fontSize: 'clamp(32px, 5vw, 72px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: '0 0 20px', fontFamily: 'Sora, sans-serif', position: 'relative', zIndex: 2 }}>
|
||||
Stay ahead of retail.
|
||||
</h2>
|
||||
<p style={{ fontSize: 16, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', margin: '0 auto 44px', maxWidth: 400, position: 'relative', zIndex: 2 }}>
|
||||
<p style={{ fontSize: 16, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', margin: '0 auto 44px', maxWidth: 400, position: 'relative', zIndex: 2 }}>
|
||||
Get our latest insights on AI, footfall, and the future of physical retail — delivered monthly.
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', position: 'relative', zIndex: 2 }}>
|
||||
<input placeholder="your@email.com" style={{
|
||||
padding: '16px 24px', borderRadius: 100, border: '1px solid rgba(255,255,255,0.12)',
|
||||
background: 'rgba(255,255,255,0.06)', color: '#fff',
|
||||
fontSize: 15, fontFamily: 'Manrope, sans-serif', outline: 'none',
|
||||
fontSize: 15, fontFamily: 'Sora, sans-serif', outline: 'none',
|
||||
backdropFilter: 'blur(12px)', width: 280,
|
||||
}} />
|
||||
<button style={{
|
||||
padding: '16px 32px', borderRadius: 100, border: 'none',
|
||||
background: '#f4be28', color: '#111',
|
||||
fontSize: 15, fontWeight: 800, fontFamily: 'Manrope, sans-serif', cursor: 'pointer',
|
||||
fontSize: 15, fontWeight: 800, fontFamily: 'Sora, sans-serif', cursor: 'pointer',
|
||||
}}>Subscribe →</button>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
|
||||
const ARTICLE = {
|
||||
tag: 'Analytics',
|
||||
@@ -41,30 +42,36 @@ export default function BlogSinglePage() {
|
||||
|
||||
{/* Hero */}
|
||||
<section style={{
|
||||
padding: '140px 8% 100px', background: '#07070d',
|
||||
margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
|
||||
padding: '140px 8% 100px', background: 'radial-gradient(ellipse 120% 90% at 50% 0%, #2c2350 0%, #211c3e 38%, #181429 100%)',
|
||||
margin: '0 20px 20px', borderRadius: '0 0 32px 32px',
|
||||
position: 'relative', overflow: 'hidden',
|
||||
}}>
|
||||
{/* Background photo */}
|
||||
<Image src="/images/stock/blog-article.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 65% 70% at 50% 48%, rgba(18,14,30,0.78) 0%, rgba(18,14,30,0.35) 60%, transparent 100%)' }} />
|
||||
<div style={{ position: 'absolute', top: '-14%', right: '8%', width: 460, height: 460, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.2) 0%, transparent 70%)', pointerEvents: 'none' }} />
|
||||
<div style={{ position: 'absolute', bottom: '-18%', left: '4%', width: 400, height: 400, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
|
||||
<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: '60px 60px', pointerEvents: 'none' }} />
|
||||
<div style={{ position: 'relative', zIndex: 2, maxWidth: 820 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
|
||||
<Link href="/blog_main" style={{ fontSize: 12, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<div style={{ position: 'relative', zIndex: 2, maxWidth: 820, margin: '0 auto', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, marginBottom: 32 }}>
|
||||
<Link href="/blog_main" style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
← Market Insights
|
||||
</Link>
|
||||
<span style={{ color: 'rgba(255,255,255,0.15)' }}>/</span>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, color: '#f4be28', background: 'rgba(244,190,40,0.1)', border: '1px solid rgba(244,190,40,0.2)', padding: '3px 10px', borderRadius: 100, fontFamily: 'Manrope, sans-serif', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{ARTICLE.tag}</span>
|
||||
<span style={{ color: 'rgba(255,255,255,0.2)' }}>/</span>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, color: '#f4be28', background: 'rgba(244,190,40,0.1)', border: '1px solid rgba(244,190,40,0.2)', padding: '3px 10px', borderRadius: 100, fontFamily: 'Sora, sans-serif', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{ARTICLE.tag}</span>
|
||||
</div>
|
||||
<h1 style={{ fontSize: 'clamp(36px, 6vw, 88px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.92, color: '#fff', margin: '0 0 28px', fontFamily: 'Sora, sans-serif' }}>
|
||||
{ARTICLE.title}
|
||||
</h1>
|
||||
<p style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif', maxWidth: 600, margin: '0 0 40px' }}>
|
||||
<p style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', maxWidth: 600, margin: '0 0 40px' }}>
|
||||
{ARTICLE.excerpt}
|
||||
</p>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 20 }}>
|
||||
<div style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(244,190,40,0.15)', border: '1.5px solid rgba(244,190,40,0.35)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, color: '#f4be28' }}>✦</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 14, fontWeight: 700, color: '#fff', fontFamily: 'Manrope, sans-serif' }}>{ARTICLE.author}</div>
|
||||
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.35)', fontFamily: 'Manrope, sans-serif' }}>{ARTICLE.date} · {ARTICLE.readTime} read</div>
|
||||
<div style={{ textAlign: 'left' }}>
|
||||
<div style={{ fontSize: 14, fontWeight: 700, color: '#fff', fontFamily: 'Sora, sans-serif' }}>{ARTICLE.author}</div>
|
||||
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif' }}>{ARTICLE.date} · {ARTICLE.readTime} read</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,7 +85,7 @@ export default function BlogSinglePage() {
|
||||
<h2 style={{ fontSize: 'clamp(22px, 2.5vw, 32px)', fontWeight: 800, letterSpacing: '-0.03em', color: '#0a0a0f', margin: '0 0 18px', fontFamily: 'Sora, sans-serif' }}>
|
||||
{s.heading}
|
||||
</h2>
|
||||
<p style={{ fontSize: 17, lineHeight: 1.9, color: 'rgba(0,0,0,0.6)', fontFamily: 'Manrope, sans-serif', margin: 0 }}>
|
||||
<p style={{ fontSize: 17, lineHeight: 1.9, color: 'rgba(0,0,0,0.6)', fontFamily: 'Sora, sans-serif', margin: 0 }}>
|
||||
{s.body}
|
||||
</p>
|
||||
{i < ARTICLE.sections.length - 1 && (
|
||||
@@ -96,7 +103,7 @@ export default function BlogSinglePage() {
|
||||
<p style={{ fontSize: 'clamp(18px, 2.2vw, 26px)', fontWeight: 800, color: '#0a0a0f', fontFamily: 'Sora, sans-serif', lineHeight: 1.4, margin: 0, letterSpacing: '-0.02em' }}>
|
||||
"Every day without footfall data is a day of lost insight."
|
||||
</p>
|
||||
<footer style={{ fontSize: 13, color: 'rgba(0,0,0,0.4)', fontFamily: 'Manrope, sans-serif', marginTop: 12 }}>— Loyaly.ai, 2026</footer>
|
||||
<footer style={{ fontSize: 13, color: 'rgba(0,0,0,0.4)', fontFamily: 'Sora, sans-serif', marginTop: 12 }}>— Loyaly.ai, 2026</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
@@ -107,16 +114,16 @@ export default function BlogSinglePage() {
|
||||
<h2 style={{ fontSize: 'clamp(28px, 3.5vw, 52px)', fontWeight: 900, letterSpacing: '-0.04em', color: '#fff', margin: '0 0 12px', fontFamily: 'Sora, sans-serif' }}>
|
||||
Ready to see your store's data?
|
||||
</h2>
|
||||
<p style={{ fontSize: 16, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', margin: 0 }}>Book a 30-minute demo and see Behavision AI in action.</p>
|
||||
<p style={{ fontSize: 16, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', margin: 0 }}>Book a 30-minute demo and see Behavision AI in action.</p>
|
||||
</div>
|
||||
<Link href="/contacts" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '16px 36px', background: '#f4be28', color: '#111', fontSize: 15, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif', whiteSpace: 'nowrap', boxShadow: '0 8px 28px rgba(244,190,40,0.35)' }}>
|
||||
<Link href="/contacts" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '16px 36px', background: '#f4be28', color: '#111', fontSize: 15, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, sans-serif', whiteSpace: 'nowrap', boxShadow: '0 8px 28px rgba(244,190,40,0.35)' }}>
|
||||
Book a Demo →
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
{/* Related articles */}
|
||||
<section style={{ padding: '80px 8%', background: '#fff', margin: '0 20px 20px', borderRadius: 24 }}>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 32 }}>More from Market Insights</div>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 32 }}>More from Market Insights</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(240px,1fr))', gap: 16 }}>
|
||||
{ARTICLE.relatedArticles.map((a) => (
|
||||
<Link key={a.n} href="/blog_main" style={{ textDecoration: 'none', display: 'block', padding: '28px 24px', borderRadius: 20, background: '#fafafa', border: '1px solid rgba(0,0,0,0.07)', transition: 'all 0.25s ease' }}
|
||||
@@ -124,8 +131,8 @@ export default function BlogSinglePage() {
|
||||
onMouseLeave={e => { (e.currentTarget as HTMLAnchorElement).style.background = '#fafafa'; (e.currentTarget as HTMLAnchorElement).style.borderColor = 'rgba(0,0,0,0.07)'; }}
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
|
||||
<span style={{ fontSize: 10, fontWeight: 700, color: '#f4be28', background: 'rgba(244,190,40,0.1)', border: '1px solid rgba(244,190,40,0.2)', padding: '3px 9px', borderRadius: 100, fontFamily: 'Manrope, sans-serif', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{a.tag}</span>
|
||||
<span style={{ fontSize: 11, color: 'rgba(0,0,0,0.3)', fontFamily: 'Manrope, sans-serif' }}>{a.readTime} read</span>
|
||||
<span style={{ fontSize: 10, fontWeight: 700, color: '#f4be28', background: 'rgba(244,190,40,0.1)', border: '1px solid rgba(244,190,40,0.2)', padding: '3px 9px', borderRadius: 100, fontFamily: 'Sora, sans-serif', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{a.tag}</span>
|
||||
<span style={{ fontSize: 11, color: 'rgba(0,0,0,0.3)', fontFamily: 'Sora, sans-serif' }}>{a.readTime} read</span>
|
||||
</div>
|
||||
<h3 style={{ fontSize: 17, fontWeight: 800, color: '#0a0a0f', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em', lineHeight: 1.3, margin: 0 }}>{a.title}</h3>
|
||||
</Link>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import GSAPAnimator from '@/components/GSAPAnimator';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
@@ -13,11 +14,18 @@ export default function ContactsPage() {
|
||||
|
||||
{/* ── HERO ── */}
|
||||
<section style={{
|
||||
padding: '120px 8% 100px', background: '#07070d',
|
||||
margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
|
||||
padding: '120px 8% 100px', background: 'radial-gradient(ellipse 120% 90% at 78% 0%, #2e2350 0%, #221b3e 38%, #191529 100%)',
|
||||
margin: '0 20px 20px', borderRadius: '0 0 32px 32px',
|
||||
position: 'relative', overflow: 'hidden',
|
||||
display: 'flex', alignItems: 'center',
|
||||
}}>
|
||||
{/* Background photo */}
|
||||
<Image src="/images/stock/contacts.jpg" alt="" fill priority style={{ objectFit: 'cover', objectPosition: 'top center', opacity: 0.9 }} />
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(25,21,41,0.1) 0%, rgba(25,21,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: '-10%', left: '-8%', 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: '-18%', right: '-6%', width: 440, height: 440, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
|
||||
{/* Grid texture */}
|
||||
<div style={{
|
||||
position: 'absolute', inset: 0, pointerEvents: 'none',
|
||||
@@ -25,14 +33,16 @@ export default function ContactsPage() {
|
||||
backgroundSize: '60px 60px',
|
||||
}} />
|
||||
|
||||
<div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: '6vw' }}>
|
||||
<div style={{ maxWidth: 680 }}>
|
||||
<div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
|
||||
<div style={{ maxWidth: 760 }}>
|
||||
<div style={{
|
||||
fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
|
||||
color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 28,
|
||||
display: 'flex', alignItems: 'center', gap: 12,
|
||||
color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 32,
|
||||
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: 32, height: 1, background: '#f4be28', display: 'block' }} />Contact
|
||||
<span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />Contact
|
||||
</div>
|
||||
<h1 data-gsap="heading" style={{
|
||||
fontSize: 'clamp(48px, 8vw, 120px)', fontWeight: 900,
|
||||
@@ -44,14 +54,14 @@ export default function ContactsPage() {
|
||||
</h1>
|
||||
<p data-gsap="text" style={{
|
||||
fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75,
|
||||
color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif',
|
||||
maxWidth: 540, margin: 0,
|
||||
color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif',
|
||||
maxWidth: 540, margin: '0 auto',
|
||||
}}>
|
||||
Tell us about your store and your goals. Our team will get back to you within one business day.
|
||||
</p>
|
||||
|
||||
{/* Quick contact chips */}
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 44 }}>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 12, marginTop: 44 }}>
|
||||
{[
|
||||
{ label: 'loyalydigital@gmail.com', href: 'mailto:loyalydigital@gmail.com' },
|
||||
{ label: 'Coimbatore, TN', href: undefined },
|
||||
@@ -60,9 +70,9 @@ export default function ContactsPage() {
|
||||
<span style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 8,
|
||||
padding: '10px 18px', borderRadius: 100,
|
||||
background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)',
|
||||
fontSize: 14, fontWeight: 600, color: 'rgba(255,255,255,0.7)',
|
||||
fontFamily: 'Manrope, sans-serif',
|
||||
background: 'rgba(255,255,255,0.07)', border: '1px solid rgba(255,255,255,0.14)',
|
||||
fontSize: 14, fontWeight: 600, color: 'rgba(255,255,255,0.8)',
|
||||
fontFamily: 'Sora, sans-serif',
|
||||
}}>
|
||||
<span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />
|
||||
{c.label}
|
||||
@@ -74,45 +84,6 @@ export default function ContactsPage() {
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{/* Message preview widget */}
|
||||
<div className="pw-widget-col" style={{ flexShrink: 0, width: 320 }}>
|
||||
<div style={{
|
||||
borderRadius: 24, padding: '24px',
|
||||
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, paddingBottom: 16, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, fontWeight: 700, color: '#fff', fontFamily: 'Manrope, sans-serif' }}>New Message</div>
|
||||
<div style={{ fontSize: 11, color: 'rgba(255,255,255,0.28)', fontFamily: 'Manrope, sans-serif', marginTop: 2 }}>loyalydigital@gmail.com</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.28)', padding: '4px 10px', borderRadius: 100, fontFamily: 'Manrope, sans-serif' }}>● LIVE</span>
|
||||
</div>
|
||||
{/* Incoming message */}
|
||||
<div style={{ background: 'rgba(255,255,255,0.04)', borderRadius: 16, padding: '14px 16px', marginBottom: 12, border: '1px solid rgba(255,255,255,0.07)' }}>
|
||||
<div style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)', fontFamily: 'Manrope, sans-serif', marginBottom: 8 }}>From: A Retail Partner</div>
|
||||
<div style={{ fontSize: 13, color: 'rgba(255,255,255,0.68)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.65 }}>"We'd love to explore how Loyaly.ai can drive footfall and loyalty for our chain of stores..."</div>
|
||||
</div>
|
||||
{/* Reply */}
|
||||
<div style={{ background: 'rgba(244,190,40,0.07)', borderRadius: 16, padding: '14px 16px', marginBottom: 20, border: '1px solid rgba(244,190,40,0.2)' }}>
|
||||
<div style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)', fontFamily: 'Manrope, sans-serif', marginBottom: 8 }}>Loyaly.ai</div>
|
||||
<div style={{ fontSize: 13, color: 'rgba(255,255,255,0.68)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.65 }}>We'll be in touch within one business day. Let's build something great together! ✦</div>
|
||||
</div>
|
||||
{/* Contact details */}
|
||||
{[
|
||||
{ icon: '📍', text: 'Coimbatore, Tamil Nadu' },
|
||||
{ icon: '✉️', text: 'loyalydigital@gmail.com' },
|
||||
{ icon: '⏱', text: 'Response within 24 hours' },
|
||||
].map((c, i) => (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 0', borderTop: i > 0 ? '1px solid rgba(255,255,255,0.05)' : 'none' }}>
|
||||
<span style={{ fontSize: 14, width: 20, textAlign: 'center' }}>{c.icon}</span>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif' }}>{c.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import GSAPAnimator from '@/components/GSAPAnimator';
|
||||
|
||||
const FAQS = [
|
||||
@@ -49,45 +50,41 @@ export default function FAQPage() {
|
||||
|
||||
{/* Hero */}
|
||||
<section style={{
|
||||
padding: '140px 8% 100px', background: '#07070d',
|
||||
margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
|
||||
padding: '140px 8% 100px', background: 'radial-gradient(ellipse 120% 90% at 50% 0%, #2c2350 0%, #211c3e 38%, #181429 100%)',
|
||||
margin: '0 20px 20px', borderRadius: '0 0 32px 32px',
|
||||
position: 'relative', overflow: 'hidden',
|
||||
display: 'flex', alignItems: 'center',
|
||||
}}>
|
||||
{/* Background photo */}
|
||||
<Image src="/images/stock/faq.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: '-14%', right: '8%', 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: '-16%', left: '4%', width: 420, height: 420, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
|
||||
<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: '60px 60px', pointerEvents: 'none' }} />
|
||||
<div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: '6vw' }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 24, display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<span style={{ width: 32, height: 1, background: '#f4be28', display: 'block' }} />FAQ
|
||||
<div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
|
||||
<div style={{ maxWidth: 720 }}>
|
||||
<div 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' }} />FAQ
|
||||
</div>
|
||||
<h1 data-gsap="heading" style={{ fontSize: 'clamp(48px, 8vw, 110px)', fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.9, color: '#fff', margin: '0 0 24px', fontFamily: 'Sora, sans-serif' }}>
|
||||
Got<br />
|
||||
<span style={{ color: '#f4be28' }}>Questions?</span>
|
||||
</h1>
|
||||
<p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif', maxWidth: 520, margin: '0 0 40px' }}>
|
||||
<p data-gsap="text" style={{ fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', maxWidth: 520, margin: '0 auto 40px' }}>
|
||||
Everything you need to know about Loyaly — for customers, merchants, and curious minds.
|
||||
</p>
|
||||
<Link href="/contacts" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '14px 32px', background: '#f4be28', color: '#111', fontSize: 15, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif' }}>
|
||||
<Link href="/contacts" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '14px 32px', background: '#f4be28', color: '#111', fontSize: 15, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, sans-serif' }}>
|
||||
Still need help? Contact us →
|
||||
</Link>
|
||||
</div>
|
||||
{/* Stats card */}
|
||||
<div className="pw-widget-col" style={{ flexShrink: 0, width: 280 }}>
|
||||
<div style={{ borderRadius: 24, padding: '28px 24px', 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)' }}>
|
||||
{[
|
||||
{ v: '15+', l: 'FAQ answers' },
|
||||
{ v: '3', l: 'Categories' },
|
||||
{ v: '<24h', l: 'Support response' },
|
||||
].map((s, i) => (
|
||||
<div key={i} style={{ padding: '16px 0', borderBottom: i < 2 ? '1px solid rgba(255,255,255,0.06)' : 'none' }}>
|
||||
<div style={{ fontSize: 28, fontWeight: 900, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em' }}>{s.v}</div>
|
||||
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', marginTop: 4 }}>{s.l}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>{`.pw-widget-col { } @media(max-width:900px){.pw-widget-col{display:none}}`}</style>
|
||||
</section>
|
||||
|
||||
{/* FAQ sections */}
|
||||
@@ -121,7 +118,7 @@ export default function FAQPage() {
|
||||
padding: '20px 24px', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', gap: 16,
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: 16, fontWeight: 700, color: '#0a0a0f', fontFamily: 'Manrope, sans-serif', lineHeight: 1.4 }}>{item.q}</span>
|
||||
<span style={{ fontSize: 16, fontWeight: 700, color: '#0a0a0f', fontFamily: 'Sora, sans-serif', lineHeight: 1.4 }}>{item.q}</span>
|
||||
<span style={{
|
||||
flexShrink: 0, width: 28, height: 28, borderRadius: '50%',
|
||||
background: isOpen ? section.color : 'rgba(0,0,0,0.06)',
|
||||
@@ -133,7 +130,7 @@ export default function FAQPage() {
|
||||
</button>
|
||||
{isOpen && (
|
||||
<div style={{ padding: '0 24px 22px' }}>
|
||||
<p style={{ margin: 0, fontSize: 15, color: 'rgba(0,0,0,0.55)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.8 }}>{item.a}</p>
|
||||
<p style={{ margin: 0, fontSize: 15, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', lineHeight: 1.8 }}>{item.a}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -146,8 +143,8 @@ export default function FAQPage() {
|
||||
{/* CTA */}
|
||||
<section style={{ padding: '80px 8%', background: '#f4be28', margin: '0 20px 20px', borderRadius: 24, textAlign: 'center' }}>
|
||||
<h2 style={{ fontSize: 'clamp(28px, 4vw, 56px)', fontWeight: 900, letterSpacing: '-0.04em', color: '#111', margin: '0 0 16px', fontFamily: 'Sora, sans-serif' }}>Still have questions?</h2>
|
||||
<p style={{ fontSize: 16, color: 'rgba(0,0,0,0.55)', fontFamily: 'Manrope, sans-serif', margin: '0 0 36px' }}>Our team is happy to help — get in touch and we'll respond within one business day.</p>
|
||||
<Link href="/contacts" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '16px 40px', background: '#111', color: '#f4be28', fontSize: 15, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Manrope, sans-serif' }}>
|
||||
<p style={{ fontSize: 16, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', margin: '0 0 36px' }}>Our team is happy to help — get in touch and we'll respond within one business day.</p>
|
||||
<Link href="/contacts" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '16px 40px', background: '#111', color: '#f4be28', fontSize: 15, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, sans-serif' }}>
|
||||
Contact Us →
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
@@ -41,7 +41,7 @@ export default function RootLayout({
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&family=Sora:wght@400;500;600;700;800;900&display=swap"
|
||||
href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800;900&display=swap"
|
||||
/>
|
||||
</head>
|
||||
<body suppressHydrationWarning>
|
||||
|
||||
@@ -351,7 +351,7 @@ export default function IndexPage() {
|
||||
position: 'relative', zIndex: 2,
|
||||
fontSize: 11, fontWeight: 800, letterSpacing: '0.3em',
|
||||
textTransform: 'uppercase', color: 'rgba(244,190,40,0.75)',
|
||||
fontFamily: 'Manrope, sans-serif', marginBottom: 36,
|
||||
fontFamily: 'Sora, sans-serif', marginBottom: 36,
|
||||
userSelect: 'none',
|
||||
}}>
|
||||
Loyaly
|
||||
@@ -383,7 +383,7 @@ export default function IndexPage() {
|
||||
position: 'relative', zIndex: 2,
|
||||
fontSize: 11, fontWeight: 600, letterSpacing: '0.2em',
|
||||
textTransform: 'uppercase', color: 'rgba(255,255,255,0.28)',
|
||||
fontFamily: 'Manrope, sans-serif', marginTop: 28,
|
||||
fontFamily: 'Sora, sans-serif', marginTop: 28,
|
||||
userSelect: 'none',
|
||||
}}>
|
||||
Loading experience
|
||||
@@ -469,7 +469,7 @@ export default function IndexPage() {
|
||||
letterSpacing: '0.12em',
|
||||
textTransform: 'uppercase',
|
||||
color: 'rgba(255,255,255,0.42)',
|
||||
fontFamily: 'Manrope, sans-serif',
|
||||
fontFamily: 'Sora, sans-serif',
|
||||
position: 'relative',
|
||||
}}>
|
||||
Scroll to explore
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import GSAPAnimator from '@/components/GSAPAnimator';
|
||||
import { useReveal } from '@/hooks/useReveal';
|
||||
|
||||
@@ -87,11 +88,18 @@ export default function ForBusinessPage() {
|
||||
|
||||
{/* ── HERO ── */}
|
||||
<section style={{
|
||||
minHeight: '100vh', background: '#07070d',
|
||||
minHeight: '100vh', background: 'radial-gradient(ellipse 120% 90% at 30% 0%, #2c2350 0%, #211c3e 38%, #181429 100%)',
|
||||
display: 'flex', alignItems: 'center',
|
||||
padding: '120px 8% 100px', position: 'relative', overflow: 'hidden',
|
||||
margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
|
||||
margin: '0 20px 20px', borderRadius: '0 0 32px 32px',
|
||||
}}>
|
||||
{/* Background photo */}
|
||||
<Image src="/images/stock/use-cases.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: '-14%', right: '6%', 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: '-16%', left: '2%', width: 420, height: 420, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
|
||||
{/* Grid bg */}
|
||||
<div style={{
|
||||
position: 'absolute', inset: 0, pointerEvents: 'none',
|
||||
@@ -99,15 +107,15 @@ export default function ForBusinessPage() {
|
||||
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={{ width: '100%', position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
|
||||
<div style={{ maxWidth: 760 }}>
|
||||
<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>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase' }}>For Business</span>
|
||||
</div>
|
||||
|
||||
<h1 data-gsap="heading" style={{
|
||||
@@ -125,70 +133,27 @@ export default function ForBusinessPage() {
|
||||
|
||||
<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',
|
||||
fontFamily: 'Sora, sans-serif', maxWidth: 560, margin: '0 auto 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' }}>
|
||||
<div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}>
|
||||
<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)',
|
||||
fontFamily: 'Sora, 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)',
|
||||
fontFamily: 'Sora, 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>
|
||||
|
||||
@@ -199,7 +164,7 @@ export default function ForBusinessPage() {
|
||||
</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>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, 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>
|
||||
@@ -219,7 +184,7 @@ export default function ForBusinessPage() {
|
||||
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>
|
||||
<span style={{ fontSize: 'clamp(16px, 1.6vw, 22px)', fontWeight: 600, color: '#1a1a1a', fontFamily: 'Sora, sans-serif', lineHeight: 1.4 }}>{line}</span>
|
||||
</div>
|
||||
</RevealBlock>
|
||||
))}
|
||||
@@ -230,7 +195,7 @@ export default function ForBusinessPage() {
|
||||
{/* ── 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>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, 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>
|
||||
@@ -243,7 +208,7 @@ export default function ForBusinessPage() {
|
||||
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',
|
||||
fontSize: 14, fontWeight: 700, fontFamily: 'Sora, sans-serif',
|
||||
transition: 'all 0.3s cubic-bezier(0.22,1,0.36,1)',
|
||||
}}>{p.name}</button>
|
||||
))}
|
||||
@@ -258,17 +223,17 @@ export default function ForBusinessPage() {
|
||||
<div>
|
||||
<div style={{
|
||||
display: 'inline-block', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
|
||||
textTransform: 'uppercase', color: p.color, fontFamily: 'Manrope, sans-serif',
|
||||
textTransform: 'uppercase', color: p.color, fontFamily: 'Sora, 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>
|
||||
<p style={{ fontSize: 18, lineHeight: 1.75, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, 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',
|
||||
fontFamily: 'Sora, sans-serif',
|
||||
}}>Learn More →</Link>
|
||||
</div>
|
||||
<div style={{
|
||||
@@ -277,7 +242,7 @@ export default function ForBusinessPage() {
|
||||
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 style={{ fontSize: 14, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', marginTop: 12, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{p.metricLabel}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -286,7 +251,7 @@ export default function ForBusinessPage() {
|
||||
{/* ── 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>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, 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>
|
||||
@@ -300,7 +265,7 @@ export default function ForBusinessPage() {
|
||||
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 style={{ fontSize: 14, color: i % 2 === 0 ? 'rgba(255,255,255,0.45)' : 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', marginTop: 14, lineHeight: 1.5 }}>{o.label}</div>
|
||||
</div>
|
||||
</RevealBlock>
|
||||
))}
|
||||
@@ -310,7 +275,7 @@ export default function ForBusinessPage() {
|
||||
{/* ── 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>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, 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>
|
||||
@@ -339,10 +304,10 @@ export default function ForBusinessPage() {
|
||||
<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>
|
||||
<p style={{ fontSize: 18, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, 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>
|
||||
<Link href="/contacts" style={{ padding: '18px 44px', background: '#111', color: '#f4be28', fontSize: 16, fontWeight: 800, borderRadius: 100, textDecoration: 'none', fontFamily: 'Sora, 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: 'Sora, sans-serif', border: '1px solid rgba(0,0,0,0.15)' }}>Talk to Sales</Link>
|
||||
</div>
|
||||
</RevealBlock>
|
||||
</section>
|
||||
|
||||
@@ -80,7 +80,7 @@ export default function Footer() {
|
||||
}}>
|
||||
|
||||
<div style={{ maxWidth: 600 }}>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 20, display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 20, display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<span style={{ width: 24, height: 1, background: '#f4be28', display: 'block' }} />Let's build together
|
||||
</div>
|
||||
<h2 style={{ fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 900, letterSpacing: '-0.04em', lineHeight: 0.95, color: '#fff', margin: 0, fontFamily: 'Sora, sans-serif' }}>
|
||||
@@ -94,7 +94,7 @@ export default function Footer() {
|
||||
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 48px rgba(244,190,40,0.25)',
|
||||
fontFamily: 'Sora, sans-serif', boxShadow: '0 16px 48px rgba(244,190,40,0.25)',
|
||||
whiteSpace: 'nowrap',
|
||||
}}>
|
||||
Book a Demo
|
||||
@@ -103,7 +103,7 @@ export default function Footer() {
|
||||
<Link href="/contacts" style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 8,
|
||||
fontSize: 14, fontWeight: 600, color: 'rgba(255,255,255,0.45)',
|
||||
textDecoration: 'none', fontFamily: 'Manrope, sans-serif',
|
||||
textDecoration: 'none', fontFamily: 'Sora, sans-serif',
|
||||
borderBottom: '1px solid rgba(255,255,255,0.15)', paddingBottom: 2,
|
||||
}}>
|
||||
or talk to sales →
|
||||
@@ -123,7 +123,7 @@ export default function Footer() {
|
||||
<Link href="/" aria-label="Loyaly.AI home">
|
||||
<Image src="/images/logo-dark.png" alt="Loyaly.AI" width={560} height={160} style={{ height: 140, width: 'auto', marginBottom: 24, display: 'block' }} />
|
||||
</Link>
|
||||
<p style={{ fontSize: 14, lineHeight: 1.75, color: 'rgba(255,255,255,0.35)', fontFamily: 'Manrope, sans-serif', margin: '0 0 28px', maxWidth: 280 }}>
|
||||
<p style={{ fontSize: 14, lineHeight: 1.75, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif', margin: '0 0 28px', maxWidth: 280 }}>
|
||||
AI-powered retail intelligence that turns every walk-in into a loyal customer.
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: 10 }}>
|
||||
@@ -146,13 +146,13 @@ export default function Footer() {
|
||||
{/* Nav columns */}
|
||||
{NAV.map(col => (
|
||||
<nav key={col.title} aria-label={col.title}>
|
||||
<h5 style={{ margin: '0 0 20px', fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.3)', letterSpacing: '0.16em', textTransform: 'uppercase', fontFamily: 'Manrope, sans-serif' }}>
|
||||
<h5 style={{ margin: '0 0 20px', fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.3)', letterSpacing: '0.16em', textTransform: 'uppercase', fontFamily: 'Sora, sans-serif' }}>
|
||||
{col.title}
|
||||
</h5>
|
||||
<ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
{col.links.map(({ label, href }) => (
|
||||
<li key={label}>
|
||||
<Link href={href} style={{ textDecoration: 'none', fontSize: 15, color: 'rgba(255,255,255,0.5)', fontFamily: 'Manrope, sans-serif', transition: 'color 0.2s', fontWeight: 500 }}
|
||||
<Link href={href} style={{ textDecoration: 'none', fontSize: 15, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif', transition: 'color 0.2s', fontWeight: 500 }}
|
||||
onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = '#ffffff')}
|
||||
onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = 'rgba(255,255,255,0.5)')}
|
||||
>{label}</Link>
|
||||
@@ -169,7 +169,7 @@ export default function Footer() {
|
||||
flexWrap: 'wrap', gap: 12,
|
||||
padding: '20px 64px 36px',
|
||||
borderTop: '1px solid rgba(255,255,255,0.05)',
|
||||
fontSize: 13, color: 'rgba(255,255,255,0.25)', fontFamily: 'Manrope, sans-serif',
|
||||
fontSize: 13, color: 'rgba(255,255,255,0.25)', fontFamily: 'Sora, sans-serif',
|
||||
}}>
|
||||
<span>© {new Date().getFullYear()} Loyaly.AI — All rights reserved.</span>
|
||||
<div style={{ display: 'flex', gap: 24 }}>
|
||||
|
||||
@@ -92,7 +92,7 @@ export default function GetInTouch() {
|
||||
<div>
|
||||
<div style={{
|
||||
fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
|
||||
color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 24,
|
||||
color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 24,
|
||||
display: 'flex', alignItems: 'center', gap: 12,
|
||||
}}>
|
||||
<span style={{ width: 28, height: 1, background: '#f4be28', display: 'block' }} />Get in Touch
|
||||
@@ -109,7 +109,7 @@ export default function GetInTouch() {
|
||||
|
||||
<p style={{
|
||||
margin: '0 0 44px', fontSize: 16, lineHeight: 1.8,
|
||||
color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif', maxWidth: 380,
|
||||
color: 'rgba(255,255,255,0.42)', fontFamily: 'Sora, sans-serif', maxWidth: 380,
|
||||
}}>
|
||||
Whether you're exploring AI possibilities or ready to deploy, our team will help you find the right solution for your business.
|
||||
</p>
|
||||
@@ -129,8 +129,8 @@ export default function GetInTouch() {
|
||||
color: '#f4be28',
|
||||
}}>{d.icon}</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', marginBottom: 6 }}>{d.label}</div>
|
||||
<div style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.7)', fontFamily: 'Manrope, sans-serif' }}>{d.value}</div>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', marginBottom: 6 }}>{d.label}</div>
|
||||
<div style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.7)', fontFamily: 'Sora, sans-serif' }}>{d.value}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -138,7 +138,7 @@ export default function GetInTouch() {
|
||||
|
||||
{/* Socials */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.35)', fontFamily: 'Manrope, sans-serif' }}>Follow</span>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif' }}>Follow</span>
|
||||
{SOCIALS.map((s) => (
|
||||
<a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label} className="git-social">
|
||||
{s.icon}
|
||||
@@ -167,12 +167,12 @@ export default function GetInTouch() {
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4ade80" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
|
||||
</div>
|
||||
<h3 style={{ margin: '0 0 10px', fontSize: 22, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>Message sent!</h3>
|
||||
<p style={{ margin: 0, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif' }}>We'll get back to you within one business day.</p>
|
||||
<p style={{ margin: 0, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, sans-serif' }}>We'll get back to you within one business day.</p>
|
||||
<button onClick={() => setFormState('idle')} style={{
|
||||
marginTop: 28, padding: '12px 28px', borderRadius: 100,
|
||||
background: 'transparent', border: '1px solid rgba(255,255,255,0.2)',
|
||||
color: '#fff', fontWeight: 600, fontSize: 14, cursor: 'pointer',
|
||||
fontFamily: 'Manrope, sans-serif',
|
||||
fontFamily: 'Sora, sans-serif',
|
||||
}}>Send another message</button>
|
||||
</div>
|
||||
) : (
|
||||
@@ -185,7 +185,7 @@ export default function GetInTouch() {
|
||||
<div role="alert" style={{
|
||||
marginBottom: 20, padding: '12px 16px',
|
||||
background: 'rgba(248,113,113,0.1)', border: '1px solid rgba(248,113,113,0.3)',
|
||||
color: '#fca5a5', borderRadius: 12, fontSize: 14, fontFamily: 'Manrope, sans-serif',
|
||||
color: '#fca5a5', borderRadius: 12, fontSize: 14, fontFamily: 'Sora, sans-serif',
|
||||
}}>{errorMessage}</div>
|
||||
)}
|
||||
|
||||
@@ -210,7 +210,7 @@ export default function GetInTouch() {
|
||||
<button type="submit" disabled={formState === 'sending'} style={{
|
||||
marginTop: 4, padding: '16px 28px', borderRadius: 100, border: 'none',
|
||||
background: formState === 'sending' ? 'rgba(244,190,40,0.6)' : '#f4be28',
|
||||
color: '#111', fontWeight: 800, fontSize: 15, fontFamily: 'Manrope, sans-serif',
|
||||
color: '#111', fontWeight: 800, fontSize: 15, fontFamily: 'Sora, sans-serif',
|
||||
cursor: formState === 'sending' ? 'wait' : 'pointer',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
|
||||
boxShadow: '0 12px 36px rgba(244,190,40,0.25)',
|
||||
@@ -250,7 +250,7 @@ export default function GetInTouch() {
|
||||
const labelStyle: React.CSSProperties = {
|
||||
display: 'flex', flexDirection: 'column', gap: 8,
|
||||
fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.55)',
|
||||
fontFamily: 'Manrope, sans-serif',
|
||||
fontFamily: 'Sora, sans-serif',
|
||||
};
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
@@ -263,6 +263,6 @@ const inputStyle: React.CSSProperties = {
|
||||
outline: 'none',
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
fontFamily: 'Manrope, sans-serif',
|
||||
fontFamily: 'Sora, sans-serif',
|
||||
transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
|
||||
};
|
||||
|
||||
@@ -29,7 +29,7 @@ export default function MapSection() {
|
||||
<div style={{
|
||||
fontSize: 11, fontWeight: 700, letterSpacing: '0.2em',
|
||||
textTransform: 'uppercase', color: '#f4be28',
|
||||
fontFamily: 'Manrope, sans-serif', marginBottom: 14,
|
||||
fontFamily: 'Sora, sans-serif', marginBottom: 14,
|
||||
display: 'flex', alignItems: 'center', gap: 10,
|
||||
}}>
|
||||
<span style={{ width: 28, height: 2, background: '#f4be28', borderRadius: 2, display: 'block' }} />
|
||||
@@ -49,7 +49,7 @@ export default function MapSection() {
|
||||
</h2>
|
||||
|
||||
<p style={{
|
||||
fontSize: 15, color: 'rgba(0,0,0,0.45)', fontFamily: 'Manrope, sans-serif',
|
||||
fontSize: 15, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, sans-serif',
|
||||
lineHeight: 1.7, margin: '0 0 36px', maxWidth: 380,
|
||||
}}>
|
||||
Come visit us or drop a message — we'll get back to you within one business day.
|
||||
@@ -81,8 +81,8 @@ export default function MapSection() {
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 10, fontWeight: 700, color: '#f4be28', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 3 }}>{item.label}</div>
|
||||
<div style={{ fontSize: 13, color: '#374151', fontFamily: 'Manrope, sans-serif', lineHeight: 1.6, fontWeight: 500 }}>{item.value}</div>
|
||||
<div style={{ fontSize: 10, fontWeight: 700, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 3 }}>{item.label}</div>
|
||||
<div style={{ fontSize: 13, color: '#374151', fontFamily: 'Sora, sans-serif', lineHeight: 1.6, fontWeight: 500 }}>{item.value}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -96,7 +96,7 @@ export default function MapSection() {
|
||||
display: 'inline-flex', alignItems: 'center', gap: 10,
|
||||
padding: '14px 32px', background: '#f4be28', color: '#171512',
|
||||
fontSize: 14, fontWeight: 800, borderRadius: 100,
|
||||
textDecoration: 'none', fontFamily: 'Manrope, sans-serif',
|
||||
textDecoration: 'none', fontFamily: 'Sora, sans-serif',
|
||||
boxShadow: '0 8px 28px rgba(244,190,40,0.35)',
|
||||
width: 'fit-content',
|
||||
}}
|
||||
|
||||
@@ -97,8 +97,8 @@ export default function PhoneWidget() {
|
||||
|
||||
{/* Header */}
|
||||
<div style={{ padding: '8px 22px 12px' }}>
|
||||
<div style={{ fontSize: 10, color: '#f4be28', fontWeight: 700, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Good Morning</div>
|
||||
<div style={{ fontSize: 16, color: '#fff', fontWeight: 800, fontFamily: 'Manrope, sans-serif', marginTop: 2 }}>Loyaly ✦</div>
|
||||
<div style={{ fontSize: 10, color: '#f4be28', fontWeight: 700, fontFamily: 'Sora, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Good Morning</div>
|
||||
<div style={{ fontSize: 16, color: '#fff', fontWeight: 800, fontFamily: 'Sora, sans-serif', marginTop: 2 }}>Loyaly ✦</div>
|
||||
</div>
|
||||
|
||||
{/* Points card */}
|
||||
@@ -109,9 +109,9 @@ export default function PhoneWidget() {
|
||||
position: 'relative', overflow: 'hidden',
|
||||
}}>
|
||||
<div style={{ position: 'absolute', top: '-30%', right: '-10%', width: 110, height: 110, borderRadius: '50%', background: 'rgba(255,255,255,0.12)' }} />
|
||||
<div style={{ fontSize: 10, color: 'rgba(23,21,18,0.65)', fontWeight: 700, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Total Points</div>
|
||||
<div style={{ fontSize: 34, color: '#171512', fontWeight: 900, fontFamily: 'Manrope, sans-serif', letterSpacing: '-0.03em', marginTop: 2 }}>284</div>
|
||||
<div style={{ fontSize: 10, color: 'rgba(23,21,18,0.6)', fontFamily: 'Manrope, sans-serif', marginTop: 4 }}>≈ ₹284 redeemable</div>
|
||||
<div style={{ fontSize: 10, color: 'rgba(23,21,18,0.65)', fontWeight: 700, fontFamily: 'Sora, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Total Points</div>
|
||||
<div style={{ fontSize: 34, color: '#171512', fontWeight: 900, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em', marginTop: 2 }}>284</div>
|
||||
<div style={{ fontSize: 10, color: 'rgba(23,21,18,0.6)', fontFamily: 'Sora, sans-serif', marginTop: 4 }}>≈ ₹284 redeemable</div>
|
||||
</div>
|
||||
|
||||
{/* Activity feed */}
|
||||
@@ -126,8 +126,8 @@ export default function PhoneWidget() {
|
||||
background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: '10px 13px',
|
||||
border: '1px solid rgba(255,255,255,0.06)',
|
||||
}}>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.78)', fontFamily: 'Manrope, sans-serif' }}>{item.label}</span>
|
||||
<span style={{ fontSize: 12, color: item.color, fontWeight: 700, fontFamily: 'Manrope, sans-serif' }}>{item.pts}</span>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.78)', fontFamily: 'Sora, sans-serif' }}>{item.label}</span>
|
||||
<span style={{ fontSize: 12, color: item.color, fontWeight: 700, fontFamily: 'Sora, sans-serif' }}>{item.pts}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -151,8 +151,8 @@ export default function PhoneWidget() {
|
||||
}}>
|
||||
<div style={{ width: 30, height: 30, borderRadius: 9, background: 'rgba(74,222,128,0.16)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4ade80', fontSize: 14, fontWeight: 800 }}>↑</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, color: '#fff', fontFamily: 'Manrope, sans-serif' }}>+120 pts</div>
|
||||
<div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif' }}>just now</div>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, color: '#fff', fontFamily: 'Sora, sans-serif' }}>+120 pts</div>
|
||||
<div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif' }}>just now</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -165,7 +165,7 @@ export default function PhoneWidget() {
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
|
||||
animation: 'pwOrbFloat 8s ease-in-out infinite',
|
||||
}}>
|
||||
<div style={{ fontSize: 9, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 3 }}>Redeemable</div>
|
||||
<div style={{ fontSize: 9, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 3 }}>Redeemable</div>
|
||||
<div style={{ fontSize: 17, fontWeight: 900, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>₹284.00</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -109,7 +109,7 @@ export default function Testimonial() {
|
||||
lineHeight: 1,
|
||||
color: '#f4be28',
|
||||
opacity: 0.25,
|
||||
fontFamily: 'Georgia, serif',
|
||||
fontFamily: 'Sora, serif',
|
||||
}}
|
||||
>
|
||||
"
|
||||
|
||||
@@ -44,7 +44,7 @@ export default function AIRecommendationsSection() {
|
||||
</h2>
|
||||
|
||||
<p className="fp-rise" style={{
|
||||
fontSize: 15, lineHeight: 1.8, color: '#4f463a', fontFamily: 'Manrope, sans-serif', margin: '0 0 36px', maxWidth: 340,
|
||||
fontSize: 15, lineHeight: 1.8, color: '#4f463a', fontFamily: 'Sora, sans-serif', margin: '0 0 36px', maxWidth: 340,
|
||||
}}>
|
||||
Our recommendation engine learns your taste from every transaction and surfaces offers uniquely matched to you — getting sharper with every visit.
|
||||
</p>
|
||||
@@ -57,7 +57,7 @@ export default function AIRecommendationsSection() {
|
||||
].map((s, i) => (
|
||||
<div key={i} style={{ padding: '16px 20px', borderRadius: 16, background: '#fff7e0', border: '2px solid #f4be28', minWidth: 110 }}>
|
||||
<div style={{ fontSize: 28, fontWeight: 900, color: '#bc7122', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em' }}>{s.val}</div>
|
||||
<div style={{ fontSize: 11, color: 'rgba(23,21,18,0.55)', fontFamily: 'Manrope, sans-serif', marginTop: 4 }}>{s.lbl}</div>
|
||||
<div style={{ fontSize: 11, color: 'rgba(23,21,18,0.55)', fontFamily: 'Sora, sans-serif', marginTop: 4 }}>{s.lbl}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -66,8 +66,8 @@ export default function AIRecommendationsSection() {
|
||||
{/* Right — recommendation cards */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4, padding: '0 2px' }}>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#171512', fontFamily: 'Manrope, sans-serif' }}>Recommended for you</span>
|
||||
<span style={{ fontSize: 11, color: '#bc7122', fontFamily: 'Manrope, sans-serif', fontWeight: 700,
|
||||
<span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#171512', fontFamily: 'Sora, sans-serif' }}>Recommended for you</span>
|
||||
<span style={{ fontSize: 11, color: '#bc7122', fontFamily: 'Sora, sans-serif', fontWeight: 700,
|
||||
display: 'inline-flex', alignItems: 'center', gap: 5,
|
||||
background: '#fff7e0', border: '1px solid #f4be28', borderRadius: 100, padding: '4px 10px',
|
||||
}}>
|
||||
@@ -98,8 +98,8 @@ export default function AIRecommendationsSection() {
|
||||
|
||||
{/* Info */}
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontSize: 14, fontWeight: 700, color: '#171512', fontFamily: 'Manrope, sans-serif', marginBottom: 3 }}>{rec.label}</div>
|
||||
<div style={{ fontSize: 11, color: 'rgba(23,21,18,0.45)', fontFamily: 'Manrope, sans-serif' }}>{rec.tag}</div>
|
||||
<div style={{ fontSize: 14, fontWeight: 700, color: '#171512', fontFamily: 'Sora, sans-serif', marginBottom: 3 }}>{rec.label}</div>
|
||||
<div style={{ fontSize: 11, color: 'rgba(23,21,18,0.45)', fontFamily: 'Sora, sans-serif' }}>{rec.tag}</div>
|
||||
</div>
|
||||
|
||||
{/* Match badge — brand gold */}
|
||||
@@ -109,7 +109,7 @@ export default function AIRecommendationsSection() {
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
<div style={{ fontSize: 14, fontWeight: 900, color: '#bc7122', fontFamily: 'Sora, sans-serif' }}>{rec.match}</div>
|
||||
<div style={{ fontSize: 9, color: 'rgba(23,21,18,0.4)', fontFamily: 'Manrope, sans-serif' }}>match</div>
|
||||
<div style={{ fontSize: 9, color: 'rgba(23,21,18,0.4)', fontFamily: 'Sora, sans-serif' }}>match</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -117,9 +117,9 @@ export default function AIRecommendationsSection() {
|
||||
{/* Confidence bar */}
|
||||
<div style={{ padding: '16px 2px 0' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
|
||||
<span style={{ fontSize: 12, fontWeight: 600, color: '#171512', fontFamily: 'Manrope, sans-serif' }}>Model confidence</span>
|
||||
<span style={{ fontSize: 12, fontWeight: 600, color: '#171512', fontFamily: 'Sora, sans-serif' }}>Model confidence</span>
|
||||
<span style={{
|
||||
fontSize: 11, fontWeight: 700, color: '#bc7122', fontFamily: 'Manrope, sans-serif',
|
||||
fontSize: 11, fontWeight: 700, color: '#bc7122', fontFamily: 'Sora, sans-serif',
|
||||
background: '#fff7e0', border: '1px solid #f4be28', borderRadius: 100, padding: '3px 10px',
|
||||
}}>High</span>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
const deals = [
|
||||
{ store: 'Starbucks', category: 'Coffee & Drinks', offer: '2× Points', savings: '₹120 saved', color: '#00704A', distance: '0.3 km', rating: 4.8 },
|
||||
@@ -16,6 +17,10 @@ export default function DiscoverDealsSection() {
|
||||
return (
|
||||
<section className="fp-panel" style={{ background: '#08080f' }}>
|
||||
|
||||
{/* Background photo */}
|
||||
<Image src="/images/stock/deals-retail.jpg" alt="" fill style={{ objectFit: 'cover', opacity: 0.25, zIndex: 0 }} />
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(8,8,15,0.3) 0%, rgba(8,8,15,0.75) 80%)', zIndex: 0 }} />
|
||||
|
||||
{/* Soft radial */}
|
||||
<div className="fp-deco" style={{
|
||||
position: 'absolute', top: '20%', left: '20%', width: 500, height: 500, borderRadius: '50%',
|
||||
@@ -39,7 +44,7 @@ export default function DiscoverDealsSection() {
|
||||
</h2>
|
||||
|
||||
<p className="fp-rise" style={{
|
||||
fontSize: 16, lineHeight: 1.8, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif', margin: '0 0 36px', maxWidth: 380,
|
||||
fontSize: 16, lineHeight: 1.8, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, sans-serif', margin: '0 0 36px', maxWidth: 380,
|
||||
}}>
|
||||
Find participating stores nearby and see their active game-based discount campaigns, live coupons, and coin-earning opportunities — all surfaced in real time so you never miss a deal.
|
||||
</p>
|
||||
@@ -52,7 +57,7 @@ export default function DiscoverDealsSection() {
|
||||
<circle cx="12" cy="10" r="3" stroke="#f4be28" strokeWidth="2" />
|
||||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" stroke="#f4be28" strokeWidth="2" fill="none" />
|
||||
</svg>
|
||||
<span style={{ fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.65)', fontFamily: 'Manrope, sans-serif' }}>Coimbatore, TN</span>
|
||||
<span style={{ fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.65)', fontFamily: 'Sora, sans-serif' }}>Coimbatore, TN</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -83,21 +88,21 @@ export default function DiscoverDealsSection() {
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
|
||||
<span style={{ fontSize: 16, fontWeight: 700, color: '#fff', fontFamily: 'Manrope, sans-serif' }}>{deal.store}</span>
|
||||
<span style={{ fontSize: 11, color: 'rgba(255,255,255,0.32)', fontFamily: 'Manrope, sans-serif' }}>{deal.distance}</span>
|
||||
<span style={{ fontSize: 11, color: '#f4be28', fontFamily: 'Manrope, sans-serif' }}>★ {deal.rating}</span>
|
||||
<span style={{ fontSize: 16, fontWeight: 700, color: '#fff', fontFamily: 'Sora, sans-serif' }}>{deal.store}</span>
|
||||
<span style={{ fontSize: 11, color: 'rgba(255,255,255,0.32)', fontFamily: 'Sora, sans-serif' }}>{deal.distance}</span>
|
||||
<span style={{ fontSize: 11, color: '#f4be28', fontFamily: 'Sora, sans-serif' }}>★ {deal.rating}</span>
|
||||
</div>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.38)', fontFamily: 'Manrope, sans-serif' }}>{deal.category}</span>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.38)', fontFamily: 'Sora, sans-serif' }}>{deal.category}</span>
|
||||
</div>
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<div style={{ fontSize: 15, fontWeight: 800, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>{deal.offer}</div>
|
||||
<div style={{ fontSize: 11, color: 'rgba(255,255,255,0.32)', fontFamily: 'Manrope, sans-serif', marginTop: 2 }}>{deal.savings}</div>
|
||||
<div style={{ fontSize: 11, color: 'rgba(255,255,255,0.32)', fontFamily: 'Sora, sans-serif', marginTop: 2 }}>{deal.savings}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="fp-rise" style={{
|
||||
textAlign: 'right', paddingRight: 4, marginTop: 4, transitionDelay: '0.5s',
|
||||
fontSize: 12, color: 'rgba(255,255,255,0.25)', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.06em',
|
||||
fontSize: 12, color: 'rgba(255,255,255,0.25)', fontFamily: 'Sora, sans-serif', letterSpacing: '0.06em',
|
||||
}}>
|
||||
+ 2,400 more deals near you
|
||||
</div>
|
||||
|
||||
@@ -48,7 +48,7 @@ export default function EarnRewardsSection() {
|
||||
background: '#f0fdf4', border: '1.5px solid #16a34a', borderRadius: 100, padding: '7px 16px',
|
||||
}}>
|
||||
<span style={{ width: 7, height: 7, borderRadius: '50%', background: '#16a34a', flexShrink: 0, animation: 'fpPulse 1.5s infinite' }} />
|
||||
<span style={{ fontSize: 11, fontWeight: 700, color: '#16a34a', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Live points balance</span>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, color: '#16a34a', fontFamily: 'Sora, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Live points balance</span>
|
||||
</div>
|
||||
|
||||
{/* Giant gold number */}
|
||||
@@ -67,7 +67,7 @@ export default function EarnRewardsSection() {
|
||||
background: '#fff7e0', border: '1px solid #f4be28',
|
||||
}}>
|
||||
<span style={{ fontSize: 18, fontWeight: 900, color: '#bc7122', fontFamily: 'Sora, sans-serif' }}>₹{pts.toLocaleString()}</span>
|
||||
<span style={{ fontSize: 13, color: '#4f463a', fontFamily: 'Manrope, sans-serif' }}>redeemable value</span>
|
||||
<span style={{ fontSize: 13, color: '#4f463a', fontFamily: 'Sora, sans-serif' }}>redeemable value</span>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 16 }}><span className="fp-kicker fp-rise">Earn · 03</span></div>
|
||||
@@ -82,7 +82,7 @@ export default function EarnRewardsSection() {
|
||||
</h2>
|
||||
|
||||
<p className="fp-rise" style={{
|
||||
fontSize: 15, lineHeight: 1.8, color: '#4f463a', fontFamily: 'Manrope, sans-serif', maxWidth: 380, margin: 0,
|
||||
fontSize: 15, lineHeight: 1.8, color: '#4f463a', fontFamily: 'Sora, sans-serif', maxWidth: 380, margin: 0,
|
||||
}}>
|
||||
Earn Loyaly Coins through daily app login, completing 5,000-step walking challenges, playing Maze, Spin Wheel, Scratch Card, and Match Master games, or visiting Selfie Booths at partner malls. Every activity puts more coins in your wallet.
|
||||
</p>
|
||||
@@ -95,8 +95,8 @@ export default function EarnRewardsSection() {
|
||||
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||
marginBottom: 14, paddingBottom: 14, borderBottom: '2px solid #f4be28',
|
||||
}}>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#171512', fontFamily: 'Manrope, sans-serif' }}>Activity feed</span>
|
||||
<span style={{ fontSize: 11, color: '#16a34a', fontWeight: 700, fontFamily: 'Manrope, sans-serif', display: 'flex', alignItems: 'center', gap: 5,
|
||||
<span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#171512', fontFamily: 'Sora, sans-serif' }}>Activity feed</span>
|
||||
<span style={{ fontSize: 11, color: '#16a34a', fontWeight: 700, fontFamily: 'Sora, sans-serif', display: 'flex', alignItems: 'center', gap: 5,
|
||||
background: '#f0fdf4', border: '1px solid #16a34a', borderRadius: 100, padding: '4px 10px',
|
||||
}}>
|
||||
<span style={{ width: 5, height: 5, borderRadius: '50%', background: '#16a34a', display: 'block', animation: 'fpPulse 1.5s infinite' }} />
|
||||
@@ -123,8 +123,8 @@ export default function EarnRewardsSection() {
|
||||
color: tx.type === 'earn' ? '#16a34a' : '#ef4444',
|
||||
}}>{tx.type === 'earn' ? '↑' : '↓'}</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, fontWeight: 700, color: '#171512', fontFamily: 'Manrope, sans-serif' }}>{tx.store}</div>
|
||||
<div style={{ fontSize: 11, color: 'rgba(23,21,18,0.45)', fontFamily: 'Manrope, sans-serif', marginTop: 1 }}>{tx.time}</div>
|
||||
<div style={{ fontSize: 13, fontWeight: 700, color: '#171512', fontFamily: 'Sora, sans-serif' }}>{tx.store}</div>
|
||||
<div style={{ fontSize: 11, color: 'rgba(23,21,18,0.45)', fontFamily: 'Sora, sans-serif', marginTop: 1 }}>{tx.time}</div>
|
||||
</div>
|
||||
</div>
|
||||
<span style={{
|
||||
@@ -148,7 +148,7 @@ export default function EarnRewardsSection() {
|
||||
{ label: 'Redeemable value', val: '₹660', color: '#f4be28', bg: '#fff7e0', border: '#f4be28' },
|
||||
].map((s, i) => (
|
||||
<div key={i} style={{ padding: '14px 16px', borderRadius: 14, background: s.bg, border: `1.5px solid ${s.border}` }}>
|
||||
<div style={{ fontSize: 11, color: 'rgba(23,21,18,0.5)', fontFamily: 'Manrope, sans-serif', marginBottom: 4 }}>{s.label}</div>
|
||||
<div style={{ fontSize: 11, color: 'rgba(23,21,18,0.5)', fontFamily: 'Sora, sans-serif', marginBottom: 4 }}>{s.label}</div>
|
||||
<div style={{ fontSize: 18, fontWeight: 900, color: s.color, fontFamily: 'Sora, sans-serif' }}>{s.val}</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -40,7 +40,7 @@ export default function ExperienceSection() {
|
||||
{/* Steps */}
|
||||
<div>
|
||||
<p className="fp-rise" style={{
|
||||
fontSize: 16, lineHeight: 1.85, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif', margin: '0 0 44px', maxWidth: 360,
|
||||
fontSize: 16, lineHeight: 1.85, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, sans-serif', margin: '0 0 44px', maxWidth: 360,
|
||||
}}>
|
||||
No plastic cards. No coupon hunting. No app open required at checkout. Loyaly works quietly in the background while you shop the way you always have.
|
||||
</p>
|
||||
@@ -53,7 +53,7 @@ export default function ExperienceSection() {
|
||||
transitionDelay: `${0.2 + i * 0.1}s`,
|
||||
}}>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '0.06em', flexShrink: 0, width: 24 }}>{s.n}</span>
|
||||
<span style={{ fontSize: 16, fontWeight: 600, color: 'rgba(255,255,255,0.75)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.4 }}>{s.label}</span>
|
||||
<span style={{ fontSize: 16, fontWeight: 600, color: 'rgba(255,255,255,0.75)', fontFamily: 'Sora, sans-serif', lineHeight: 1.4 }}>{s.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -64,7 +64,7 @@ export default function ExperienceSection() {
|
||||
<div key={i} style={{ width: 30, height: 30, borderRadius: '50%', background: c, border: '2px solid #07070d', marginLeft: i > 0 ? -9 : 0 }} />
|
||||
))}
|
||||
</div>
|
||||
<span style={{ fontSize: 13, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif' }}>
|
||||
<span style={{ fontSize: 13, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif' }}>
|
||||
Joined by <span style={{ color: '#fff', fontWeight: 700 }}>50,000+</span> shoppers
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -58,7 +58,7 @@ export default function FinalCTASection() {
|
||||
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' }}>
|
||||
<span style={{ fontSize: 13, fontWeight: 700, color: '#16a34a', fontFamily: 'Sora, sans-serif', letterSpacing: '0.06em' }}>
|
||||
Now live in Coimbatore
|
||||
</span>
|
||||
</div>
|
||||
@@ -73,7 +73,7 @@ export default function FinalCTASection() {
|
||||
</h2>
|
||||
|
||||
<p className="fp-rise" style={{
|
||||
fontSize: 18, lineHeight: 1.7, color: '#4f463a', fontFamily: 'Manrope, sans-serif',
|
||||
fontSize: 18, lineHeight: 1.7, color: '#4f463a', fontFamily: 'Sora, sans-serif',
|
||||
maxWidth: 460, margin: '0 auto 48px', transitionDelay: '0.1s',
|
||||
}}>
|
||||
Download Loyaly and start earning on your very next purchase. Free. Instant. Yours.
|
||||
@@ -106,7 +106,7 @@ export default function FinalCTASection() {
|
||||
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 style={{ fontSize: 11, color: 'rgba(23,21,18,0.55)', fontFamily: 'Sora, sans-serif', marginTop: 5, letterSpacing: '0.04em' }}>{p.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import React, { useRef, useEffect, useCallback } from 'react';
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
|
||||
function useMagnetic<T extends HTMLElement>(strength = 12) {
|
||||
const ref = useRef<T | null>(null);
|
||||
@@ -28,29 +29,14 @@ function useMagnetic<T extends HTMLElement>(strength = 12) {
|
||||
export default function HeroSection() {
|
||||
const magPrimary = useMagnetic<HTMLAnchorElement>(10);
|
||||
const magSecondary = useMagnetic<HTMLButtonElement>(8);
|
||||
const stageRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Pointer parallax for the phone stage
|
||||
const onStageMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const el = stageRef.current; if (!el) return;
|
||||
const r = el.getBoundingClientRect();
|
||||
const px = (e.clientX - r.left) / r.width - 0.5;
|
||||
const py = (e.clientY - r.top) / r.height - 0.5;
|
||||
el.style.setProperty('--rx', `${(-py * 8).toFixed(2)}deg`);
|
||||
el.style.setProperty('--ry', `${(px * 10).toFixed(2)}deg`);
|
||||
el.style.setProperty('--tx', `${(px * 18).toFixed(1)}px`);
|
||||
el.style.setProperty('--ty', `${(py * 18).toFixed(1)}px`);
|
||||
}, []);
|
||||
const onStageLeave = useCallback(() => {
|
||||
const el = stageRef.current; if (!el) return;
|
||||
el.style.setProperty('--rx', '0deg');
|
||||
el.style.setProperty('--ry', '0deg');
|
||||
el.style.setProperty('--tx', '0px');
|
||||
el.style.setProperty('--ty', '0px');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="fp-panel" style={{ background: 'radial-gradient(ellipse 90% 80% at 78% 42%, #1a1040 0%, #0a0a12 55%, #06060b 100%)' }}>
|
||||
<section className="fp-panel" style={{ background: 'radial-gradient(ellipse 100% 85% at 78% 30%, #3a2b66 0%, #2a2150 45%, #1c1838 100%)' }}>
|
||||
|
||||
{/* Background photo */}
|
||||
<Image src="/images/stock/app-hero.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9, zIndex: 0 }} />
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 90% 80% at 78% 42%, rgba(58,43,102,0.15) 0%, rgba(42,33,80,0.35) 55%, rgba(28,24,56,0.55) 100%)', zIndex: 0 }} />
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 55% 65% at 30% 48%, rgba(18,14,30,0.7) 0%, rgba(18,14,30,0.3) 60%, transparent 100%)', zIndex: 0 }} />
|
||||
|
||||
{/* Ambient orbs + grid */}
|
||||
<div className="fp-deco" style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
|
||||
@@ -71,11 +57,11 @@ export default function HeroSection() {
|
||||
</div>
|
||||
|
||||
<div className="fp-shell">
|
||||
<div className="fp-split">
|
||||
<div className="fp-split" style={{ gridTemplateColumns: '1fr', justifyItems: 'center', textAlign: 'center' }}>
|
||||
|
||||
{/* Text column */}
|
||||
<div>
|
||||
<div className="fp-content fp-eyebrow" style={{ marginBottom: 26 }}>
|
||||
<div style={{ maxWidth: 720 }}>
|
||||
<div className="fp-content fp-eyebrow" style={{ marginBottom: 26, display: 'flex', justifyContent: 'center' }}>
|
||||
<span className="fp-kicker">For People · By Loyaly</span>
|
||||
</div>
|
||||
|
||||
@@ -89,12 +75,12 @@ export default function HeroSection() {
|
||||
|
||||
<p className="fp-content fp-subtext" style={{
|
||||
fontSize: 'clamp(16px, 1.4vw, 19px)', lineHeight: 1.7, fontWeight: 400,
|
||||
color: 'rgba(255,255,255,0.58)', maxWidth: 440, margin: '0 0 40px', fontFamily: 'Manrope, sans-serif',
|
||||
color: 'rgba(255,255,255,0.58)', maxWidth: 560, margin: '0 auto 40px', fontFamily: 'Sora, sans-serif',
|
||||
}}>
|
||||
Earn Loyaly Coins through daily activities, interactive games, and walking challenges — then redeem them at participating stores near you. Earn Online. Spend Offline.
|
||||
</p>
|
||||
|
||||
<div className="fp-content fp-cta" style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
|
||||
<div className="fp-content fp-cta" style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Link
|
||||
href="/contacts"
|
||||
ref={magPrimary}
|
||||
@@ -111,124 +97,17 @@ export default function HeroSection() {
|
||||
</div>
|
||||
|
||||
{/* Trust row */}
|
||||
<div className="fp-content fp-cta" style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 40 }}>
|
||||
<div className="fp-content fp-cta" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, marginTop: 40 }}>
|
||||
<div style={{ display: 'flex' }}>
|
||||
{['#f4be28', '#4ade80', '#a855f7', '#3b82f6'].map((c, i) => (
|
||||
<div key={i} style={{ width: 30, height: 30, borderRadius: '50%', background: c, border: '2px solid #0a0a12', marginLeft: i > 0 ? -9 : 0, opacity: 0.9 }} />
|
||||
))}
|
||||
</div>
|
||||
<span style={{ fontSize: 13, color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif' }}>
|
||||
<span style={{ fontSize: 13, color: 'rgba(255,255,255,0.42)', fontFamily: 'Sora, sans-serif' }}>
|
||||
<strong style={{ color: 'rgba(255,255,255,0.75)', fontWeight: 700 }}>50,000+</strong> active shoppers earning daily
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Visual column — phone */}
|
||||
<div
|
||||
ref={stageRef}
|
||||
onMouseMove={onStageMove}
|
||||
onMouseLeave={onStageLeave}
|
||||
className="fp-deco"
|
||||
style={{
|
||||
position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center',
|
||||
perspective: 1200,
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
transformStyle: 'preserve-3d',
|
||||
transform: 'rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(var(--tx,0px), var(--ty,0px))',
|
||||
transition: 'transform 0.5s cubic-bezier(0.22,1,0.36,1)',
|
||||
position: 'relative',
|
||||
}}>
|
||||
{/* Glow ring */}
|
||||
<div style={{
|
||||
position: 'absolute', inset: -36, borderRadius: '56px',
|
||||
background: 'radial-gradient(circle at 50% 50%, rgba(244,190,40,0.2) 0%, transparent 70%)',
|
||||
animation: 'fpGlow 3s ease-in-out infinite',
|
||||
}} />
|
||||
{/* Phone shell */}
|
||||
<div style={{
|
||||
width: 268, height: 548, borderRadius: '48px',
|
||||
background: 'linear-gradient(160deg, #22223a 0%, #10101c 100%)',
|
||||
border: '1.5px solid rgba(255,255,255,0.1)',
|
||||
boxShadow: '0 70px 130px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.1)',
|
||||
display: 'flex', flexDirection: 'column', overflow: 'hidden',
|
||||
animation: 'fpOrbFloat 6s ease-in-out infinite', position: 'relative',
|
||||
}}>
|
||||
{/* Shimmer sweep */}
|
||||
<div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 20, overflow: 'hidden', borderRadius: '48px' }}>
|
||||
<div style={{
|
||||
position: 'absolute', top: '-20%', left: 0, width: '40%', height: '140%',
|
||||
background: 'linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.07) 50%, transparent 100%)',
|
||||
animation: 'fpScreenShimmer 4.5s ease-in-out infinite', animationDelay: '1s',
|
||||
}} />
|
||||
</div>
|
||||
{/* Dynamic island */}
|
||||
<div style={{ display: 'flex', justifyContent: 'center', paddingTop: 16, paddingBottom: 4 }}>
|
||||
<div style={{ width: 96, height: 28, borderRadius: 20, background: '#080810', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
|
||||
<div style={{ width: 10, height: 10, borderRadius: '50%', background: '#1a1a28', border: '1px solid rgba(255,255,255,0.08)' }} />
|
||||
<div style={{ width: 6, height: 6, borderRadius: '50%', background: '#0d0d18' }} />
|
||||
</div>
|
||||
</div>
|
||||
{/* Header */}
|
||||
<div style={{ padding: '8px 22px 12px' }}>
|
||||
<div style={{ fontSize: 10, color: '#f4be28', fontWeight: 700, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Good Morning</div>
|
||||
<div style={{ fontSize: 16, color: '#fff', fontWeight: 800, fontFamily: 'Manrope, sans-serif', marginTop: 2 }}>Loyaly ✦</div>
|
||||
</div>
|
||||
{/* Points card */}
|
||||
<div style={{
|
||||
margin: '0 14px', borderRadius: 22, background: 'linear-gradient(135deg, #f4be28 0%, #e09820 100%)',
|
||||
padding: '18px 20px', boxShadow: '0 8px 24px rgba(244,190,40,0.35)', position: 'relative', overflow: 'hidden',
|
||||
}}>
|
||||
<div style={{ position: 'absolute', top: '-30%', right: '-10%', width: 110, height: 110, borderRadius: '50%', background: 'rgba(255,255,255,0.12)' }} />
|
||||
<div style={{ fontSize: 10, color: 'rgba(23,21,18,0.65)', fontWeight: 700, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Total Points</div>
|
||||
<div style={{ fontSize: 34, color: '#171512', fontWeight: 900, fontFamily: 'Manrope, sans-serif', letterSpacing: '-0.03em', marginTop: 2 }}>284</div>
|
||||
<div style={{ fontSize: 10, color: 'rgba(23,21,18,0.6)', fontFamily: 'Manrope, sans-serif', marginTop: 4 }}>≈ ₹284 redeemable</div>
|
||||
</div>
|
||||
{/* Activity */}
|
||||
<div style={{ padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 7, flex: 1 }}>
|
||||
{[
|
||||
{ store: 'Starbucks', pts: '+120', color: '#4ade80' },
|
||||
{ store: 'Nike Store', pts: '+85', color: '#4ade80' },
|
||||
{ store: 'H&M', pts: '−50', color: '#f87171' },
|
||||
].map((item, i) => (
|
||||
<div key={i} style={{
|
||||
display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
||||
background: 'rgba(255,255,255,0.04)', borderRadius: 12, padding: '10px 13px', border: '1px solid rgba(255,255,255,0.06)',
|
||||
}}>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.78)', fontFamily: 'Manrope, sans-serif' }}>{item.store}</span>
|
||||
<span style={{ fontSize: 12, color: item.color, fontWeight: 700, fontFamily: 'Manrope, sans-serif' }}>{item.pts}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Nav dots */}
|
||||
<div style={{ display: 'flex', justifyContent: 'center', gap: 6, padding: '10px 0 20px' }}>
|
||||
{[1, 0, 0, 0].map((a, i) => (
|
||||
<div key={i} style={{ width: a ? 22 : 6, height: 4, borderRadius: 2, background: a ? '#f4be28' : 'rgba(255,255,255,0.2)' }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating mini chips */}
|
||||
<div className="fp-glass" style={{
|
||||
position: 'absolute', top: '12%', left: '-12%', borderRadius: 16, padding: '12px 16px',
|
||||
display: 'flex', alignItems: 'center', gap: 10, animation: 'fpOrb2Float 7s ease-in-out infinite',
|
||||
}}>
|
||||
<div style={{ width: 30, height: 30, borderRadius: 9, background: 'rgba(74,222,128,0.16)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4ade80', fontSize: 14, fontWeight: 800 }}>↑</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, color: '#fff', fontFamily: 'Manrope, sans-serif' }}>+120 pts</div>
|
||||
<div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif' }}>just now</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="fp-glass" style={{
|
||||
position: 'absolute', bottom: '14%', right: '-14%', borderRadius: 16, padding: '12px 16px',
|
||||
animation: 'fpOrbFloat 8s ease-in-out infinite',
|
||||
}}>
|
||||
<div style={{ fontSize: 9, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 3 }}>Redeemable</div>
|
||||
<div style={{ fontSize: 17, fontWeight: 900, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em' }}>₹284.00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -236,7 +115,7 @@ export default function HeroSection() {
|
||||
<div style={{
|
||||
position: 'absolute', bottom: 38, left: '50%', transform: 'translateX(-50%)',
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, zIndex: 10,
|
||||
color: 'rgba(255,255,255,0.3)', fontSize: 10, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.16em', textTransform: 'uppercase',
|
||||
color: 'rgba(255,255,255,0.3)', fontSize: 10, fontFamily: 'Sora, sans-serif', letterSpacing: '0.16em', textTransform: 'uppercase',
|
||||
}}>
|
||||
<span>Scroll</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ animation: 'fpScrollHint 1.6s ease-in-out infinite' }}>
|
||||
|
||||
@@ -38,7 +38,7 @@ export default function SpendAnywhereSection() {
|
||||
</h2>
|
||||
</div>
|
||||
<p className="fp-rise" style={{
|
||||
fontSize: 15, lineHeight: 1.75, color: 'rgba(255,255,255,0.45)', fontFamily: 'Manrope, sans-serif', margin: 0, maxWidth: 320,
|
||||
fontSize: 15, lineHeight: 1.75, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, sans-serif', margin: 0, maxWidth: 320,
|
||||
}}>
|
||||
One wallet. Every store. Your Loyaly points are universal — no restrictions, no expiry, no fine print.
|
||||
</p>
|
||||
@@ -64,12 +64,12 @@ export default function SpendAnywhereSection() {
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 14 }}>
|
||||
{(() => { const BrandIcon = brand.Icon; return <span style={{ color: active === i ? brand.color : 'rgba(255,255,255,0.45)', transition: 'color 0.3s' }}><BrandIcon /></span>; })()}
|
||||
<span style={{ fontSize: 14, fontWeight: 700, color: active === i ? '#fff' : 'rgba(255,255,255,0.75)', fontFamily: 'Manrope, sans-serif', transition: 'color 0.2s' }}>{brand.name}</span>
|
||||
<span style={{ fontSize: 14, fontWeight: 700, color: active === i ? '#fff' : 'rgba(255,255,255,0.75)', fontFamily: 'Sora, sans-serif', transition: 'color 0.2s' }}>{brand.name}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
|
||||
{brand.stores.map((s, j) => (
|
||||
<span key={j} style={{
|
||||
fontSize: 11, fontWeight: 600, fontFamily: 'Manrope, sans-serif',
|
||||
fontSize: 11, fontWeight: 600, fontFamily: 'Sora, sans-serif',
|
||||
color: active === i ? brand.color : 'rgba(255,255,255,0.3)',
|
||||
background: active === i ? `${brand.color}18` : 'rgba(255,255,255,0.04)',
|
||||
border: `1px solid ${active === i ? `${brand.color}30` : 'rgba(255,255,255,0.06)'}`,
|
||||
@@ -94,7 +94,7 @@ export default function SpendAnywhereSection() {
|
||||
].map((s, i) => (
|
||||
<div key={i}>
|
||||
<div style={{ fontSize: 'clamp(26px, 3vw, 42px)', fontWeight: 900, fontFamily: 'Sora, sans-serif', color: '#f4be28', letterSpacing: '-0.04em', lineHeight: 1 }}>{s.val}</div>
|
||||
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.35)', fontFamily: 'Manrope, sans-serif', marginTop: 8, letterSpacing: '0.06em' }}>{s.lbl}</div>
|
||||
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif', marginTop: 8, letterSpacing: '0.06em' }}>{s.lbl}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -209,7 +209,7 @@ export default function VerticalScrollWrapper({ children, sections = [] }: Props
|
||||
}
|
||||
.fp-kicker {
|
||||
display: inline-flex; align-items: center; gap: 12px;
|
||||
font-family: 'Manrope', sans-serif; font-weight: 700;
|
||||
font-family: 'Sora', sans-serif; font-weight: 700;
|
||||
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
|
||||
}
|
||||
.fp-kicker::before {
|
||||
@@ -219,7 +219,7 @@ export default function VerticalScrollWrapper({ children, sections = [] }: Props
|
||||
/* ── Shared buttons ── */
|
||||
.fp-btn {
|
||||
display: inline-flex; align-items: center; gap: 10px;
|
||||
font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px;
|
||||
font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px;
|
||||
border-radius: 100px; text-decoration: none; cursor: pointer;
|
||||
letter-spacing: -0.01em; white-space: nowrap;
|
||||
transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.3s ease, box-shadow 0.3s ease;
|
||||
@@ -296,7 +296,7 @@ export default function VerticalScrollWrapper({ children, sections = [] }: Props
|
||||
.fp-rail-item.is-active .fp-rail-dot { background: var(--gold); box-shadow: 0 0 12px rgba(244,190,40,0.8); transform: scale(1.3); }
|
||||
.fp-rail-label {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600;
|
||||
font-family: 'Sora', sans-serif; font-size: 11px; font-weight: 600;
|
||||
letter-spacing: 0.04em; color: rgba(255,255,255,0.8); white-space: nowrap;
|
||||
padding: 5px 12px; border-radius: 100px;
|
||||
background: rgba(12,12,18,0.72); border: 1px solid rgba(255,255,255,0.08);
|
||||
|
||||
@@ -68,7 +68,7 @@ export default function WhyLoyalySection() {
|
||||
<div style={{
|
||||
display: 'inline-block', padding: '8px 16px', borderRadius: 10,
|
||||
background: '#ef4444', color: '#fff',
|
||||
fontSize: 12, fontWeight: 700, fontFamily: 'Manrope, sans-serif', letterSpacing: '0.08em', textTransform: 'uppercase',
|
||||
fontSize: 12, fontWeight: 700, fontFamily: 'Sora, sans-serif', letterSpacing: '0.08em', textTransform: 'uppercase',
|
||||
}}>Loyalty penetration in offline retail</div>
|
||||
</div>
|
||||
|
||||
@@ -85,7 +85,7 @@ export default function WhyLoyalySection() {
|
||||
transitionDelay: `${0.1 + i * 0.08}s`,
|
||||
}}>
|
||||
<div style={{ fontSize: 20, fontWeight: 900, fontFamily: 'Sora, sans-serif', color: m.accent, letterSpacing: '-0.03em', flexShrink: 0, minWidth: 72 }}>{m.val}</div>
|
||||
<div style={{ fontSize: 12, color: 'rgba(23,21,18,0.6)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.4 }}>{m.label}</div>
|
||||
<div style={{ fontSize: 12, color: 'rgba(23,21,18,0.6)', fontFamily: 'Sora, sans-serif', lineHeight: 1.4 }}>{m.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -99,7 +99,7 @@ export default function WhyLoyalySection() {
|
||||
background: '#fff7e0', border: '1.5px solid #f4be28', borderRadius: 100, padding: '10px 20px',
|
||||
}}>
|
||||
<span style={{ width: 8, height: 8, borderRadius: '50%', background: '#16a34a', display: 'block', flexShrink: 0, boxShadow: '0 0 0 3px rgba(22,163,74,0.2)', animation: 'fpPulse 1.5s ease-in-out infinite' }} />
|
||||
<span style={{ fontSize: 13, fontWeight: 700, color: '#171512', fontFamily: 'Manrope, sans-serif' }}>
|
||||
<span style={{ fontSize: 13, fontWeight: 700, color: '#171512', fontFamily: 'Sora, sans-serif' }}>
|
||||
<span style={{ color: '#f4be28' }}>{count.toLocaleString()}</span> txns today · unrewarded
|
||||
</span>
|
||||
</div>
|
||||
@@ -114,7 +114,7 @@ export default function WhyLoyalySection() {
|
||||
|
||||
<p className="fp-rise" style={{
|
||||
fontSize: 16, lineHeight: 1.8, color: '#4f463a', margin: '0 0 36px',
|
||||
fontFamily: 'Manrope, sans-serif', maxWidth: 440,
|
||||
fontFamily: 'Sora, sans-serif', maxWidth: 440,
|
||||
}}>
|
||||
India's offline retail market is worth ₹2.1 lakh crore. Yet loyalty penetration sits at effectively zero. Loyaly exists to close that gap — permanently.
|
||||
</p>
|
||||
@@ -123,7 +123,7 @@ export default function WhyLoyalySection() {
|
||||
{bars.map((b, i) => (
|
||||
<div key={i} style={{ marginBottom: 16 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 7 }}>
|
||||
<span style={{ fontSize: 13, fontWeight: 600, color: '#171512', fontFamily: 'Manrope, sans-serif' }}>{b.label}</span>
|
||||
<span style={{ fontSize: 13, fontWeight: 600, color: '#171512', fontFamily: 'Sora, sans-serif' }}>{b.label}</span>
|
||||
<span style={{ fontSize: 14, fontWeight: 800, color: b.color, fontFamily: 'Sora, sans-serif' }}>{b.pct}%</span>
|
||||
</div>
|
||||
<div style={{ height: 8, background: 'rgba(23,21,18,0.07)', borderRadius: 100, overflow: 'hidden' }}>
|
||||
|
||||
@@ -156,7 +156,7 @@ function CompareCard({
|
||||
<svg width="16" height="16" viewBox="0 0 20 20" fill={accent}><path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" /></svg>
|
||||
)}
|
||||
</span>
|
||||
<span style={{ color: accent, fontSize: 12, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', fontFamily: 'Manrope, sans-serif' }}>{badge}</span>
|
||||
<span style={{ color: accent, fontSize: 12, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase', fontFamily: 'Sora, sans-serif' }}>{badge}</span>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
@@ -181,7 +181,7 @@ function CompareCard({
|
||||
<span style={{ width: 38, height: 38, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 11, background: `${accent}12`, border: `1px solid ${accent}26` }}>
|
||||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="2" style={{ color: accent }}>{item.icon}</svg>
|
||||
</span>
|
||||
<span style={{ color: '#3f3a32', fontSize: '0.95rem', fontWeight: 600, lineHeight: 1.35, fontFamily: 'Manrope, sans-serif' }}>{item.text}</span>
|
||||
<span style={{ color: '#3f3a32', fontSize: '0.95rem', fontWeight: 600, lineHeight: 1.35, fontFamily: 'Sora, sans-serif' }}>{item.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -261,12 +261,12 @@ export default function ProblemsShift({ isLoaded = true }: ProblemsShiftProps) {
|
||||
<div className="ps-header relative z-10 text-center max-w-3xl mx-auto" style={{ marginBottom: 'clamp(40px, 5vw, 72px)' }}>
|
||||
<div className="ps-eyebrow" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '7px 16px', borderRadius: 999, background: 'rgba(244,190,40,0.1)', border: '1px solid rgba(244,190,40,0.28)', marginBottom: 24 }}>
|
||||
<span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />
|
||||
<span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#C49600', fontFamily: 'Manrope, sans-serif' }}>The Opportunity</span>
|
||||
<span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#C49600', fontFamily: 'Sora, sans-serif' }}>The Opportunity</span>
|
||||
</div>
|
||||
<h2 className="ps-title" style={{ color: '#171512', fontWeight: 900, fontSize: 'clamp(2.4rem, 6vw, 4.8rem)', letterSpacing: '-0.05em', lineHeight: 0.94, margin: '0 0 20px', fontFamily: 'Sora, sans-serif' }}>
|
||||
Retail is busy.<br /><span style={{ color: '#f4be28' }}>But blind.</span>
|
||||
</h2>
|
||||
<p className="ps-subtitle" style={{ color: '#4f463a', fontSize: 'clamp(1rem, 1.3vw, 1.2rem)', fontWeight: 500, maxWidth: 620, margin: '0 auto', lineHeight: 1.7, fontFamily: 'Manrope, sans-serif' }}>
|
||||
<p className="ps-subtitle" style={{ color: '#4f463a', fontSize: 'clamp(1rem, 1.3vw, 1.2rem)', fontWeight: 500, maxWidth: 620, margin: '0 auto', lineHeight: 1.7, fontFamily: 'Sora, sans-serif' }}>
|
||||
Customers have no compelling reason to choose your store over the next one. Loyaly creates that reason — with daily rewards, interactive games, and surprise coupons redeemable in person.
|
||||
</p>
|
||||
</div>
|
||||
@@ -312,7 +312,7 @@ export default function ProblemsShift({ isLoaded = true }: ProblemsShiftProps) {
|
||||
<span style={{ width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 10, background: '#faf9f5', border: '1px solid rgba(0,0,0,0.05)' }}>
|
||||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#171512" strokeWidth="2">{f.icon}</svg>
|
||||
</span>
|
||||
<span style={{ color: '#171512', fontWeight: 700, fontSize: '0.95rem', fontFamily: 'Manrope, sans-serif' }}>{f.label}</span>
|
||||
<span style={{ color: '#171512', fontWeight: 700, fontSize: '0.95rem', fontFamily: 'Sora, sans-serif' }}>{f.label}</span>
|
||||
</div>
|
||||
{i < BOTTOM_FEATURES.length - 1 && <span className="ps-sep" style={{ width: 1, height: 28, background: 'rgba(0,0,0,0.07)' }} />}
|
||||
</React.Fragment>
|
||||
|
||||
@@ -130,8 +130,8 @@ function ProductVisual({ product }: { product: Product }) {
|
||||
return (
|
||||
<div style={{ width: '86%', display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', fontWeight: 600 }}>Live footfall</span>
|
||||
<span style={{ fontSize: 11, color: accent, fontFamily: 'Manrope, sans-serif', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 5 }}>
|
||||
<span style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', fontWeight: 600 }}>Live footfall</span>
|
||||
<span style={{ fontSize: 11, color: accent, fontFamily: 'Sora, sans-serif', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 5 }}>
|
||||
<span style={{ width: 6, height: 6, borderRadius: '50%', background: '#4ade80', display: 'block' }} />2,847
|
||||
</span>
|
||||
</div>
|
||||
@@ -145,7 +145,7 @@ function ProductVisual({ product }: { product: Product }) {
|
||||
<div style={{ display: 'flex', gap: 10 }}>
|
||||
{[['Peak', '6–8 PM'], ['Dwell', '14 min'], ['Zones', '12']].map(([k, v]) => (
|
||||
<div key={k} style={{ flex: 1, padding: '10px 12px', borderRadius: 12, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)' }}>
|
||||
<div style={{ fontSize: 10, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif' }}>{k}</div>
|
||||
<div style={{ fontSize: 10, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif' }}>{k}</div>
|
||||
<div style={{ fontSize: 15, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif', marginTop: 2 }}>{v}</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -163,10 +163,10 @@ function ProductVisual({ product }: { product: Product }) {
|
||||
return (
|
||||
<div style={{ width: '86%', display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif', fontWeight: 600 }}>Avg basket value</div>
|
||||
<div style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif', fontWeight: 600 }}>Avg basket value</div>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 4 }}>
|
||||
<span style={{ fontSize: 34, fontWeight: 900, color: '#fff', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em' }}>₹1,240</span>
|
||||
<span style={{ fontSize: 13, fontWeight: 700, color: accent, fontFamily: 'Manrope, sans-serif' }}>+18%</span>
|
||||
<span style={{ fontSize: 13, fontWeight: 700, color: accent, fontFamily: 'Sora, sans-serif' }}>+18%</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 'auto', overflow: 'visible' }}>
|
||||
@@ -189,19 +189,19 @@ function ProductVisual({ product }: { product: Product }) {
|
||||
return (
|
||||
<div style={{ width: '82%', display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
<div style={{ borderRadius: 16, padding: '18px 20px', background: `linear-gradient(135deg, ${accent} 0%, #c0392b 100%)`, position: 'relative', overflow: 'hidden' }}>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.6)', fontFamily: 'Manrope, sans-serif' }}>Smart Offer</div>
|
||||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.6)', fontFamily: 'Sora, sans-serif' }}>Smart Offer</div>
|
||||
<div style={{ fontSize: 30, fontWeight: 900, color: '#fff', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.02em', marginTop: 2 }}>15% OFF</div>
|
||||
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.85)', fontFamily: 'Manrope, sans-serif', marginTop: 2 }}>Targeted · high-intent shoppers</div>
|
||||
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.85)', fontFamily: 'Sora, sans-serif', marginTop: 2 }}>Targeted · high-intent shoppers</div>
|
||||
</div>
|
||||
<div style={{ padding: '14px 16px', borderRadius: 14, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Manrope, sans-serif' }}>Conversion uplift</span>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif' }}>Conversion uplift</span>
|
||||
<span style={{ fontSize: 13, fontWeight: 800, color: accent, fontFamily: 'Sora, sans-serif' }}>+41%</span>
|
||||
</div>
|
||||
<div style={{ height: 6, borderRadius: 3, background: 'rgba(255,255,255,0.08)', overflow: 'hidden' }}>
|
||||
<div style={{ height: '100%', width: '72%', borderRadius: 3, background: accent }} />
|
||||
</div>
|
||||
<div style={{ fontSize: 11, color: 'rgba(255,255,255,0.35)', fontFamily: 'Manrope, sans-serif', marginTop: 10 }}>Margin protected · 0 waste</div>
|
||||
<div style={{ fontSize: 11, color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif', marginTop: 10 }}>Margin protected · 0 waste</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -212,16 +212,16 @@ function ProductVisual({ product }: { product: Product }) {
|
||||
<div style={{ width: '80%', borderRadius: 22, padding: 22, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span style={{ fontSize: 12, fontWeight: 800, color: '#fff', fontFamily: 'Sora, sans-serif' }}>Loyaly ✦</span>
|
||||
<span style={{ fontSize: 10, color: 'rgba(255,255,255,0.4)', fontFamily: 'Manrope, sans-serif' }}>GOLD MEMBER</span>
|
||||
<span style={{ fontSize: 10, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif' }}>GOLD MEMBER</span>
|
||||
</div>
|
||||
<div style={{ borderRadius: 16, padding: '18px 20px', background: `linear-gradient(135deg, ${accent} 0%, #e09820 100%)` }}>
|
||||
<div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.6)', fontFamily: 'Manrope, sans-serif' }}>Reward Points</div>
|
||||
<div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.6)', fontFamily: 'Sora, sans-serif' }}>Reward Points</div>
|
||||
<div style={{ fontSize: 32, fontWeight: 900, color: '#111', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em', marginTop: 2 }}>284</div>
|
||||
</div>
|
||||
{[['Starbucks', '+120'], ['Nike Store', '+85']].map(([s, p]) => (
|
||||
<div key={s} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 12px', borderRadius: 10, background: 'rgba(255,255,255,0.04)' }}>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', fontFamily: 'Manrope, sans-serif' }}>{s}</span>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: '#4ade80', fontFamily: 'Manrope, sans-serif' }}>{p}</span>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', fontFamily: 'Sora, sans-serif' }}>{s}</span>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: '#4ade80', fontFamily: 'Sora, sans-serif' }}>{p}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -269,7 +269,7 @@ function ProductCard({ product, index }: { product: Product; index: number }) {
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
|
||||
<span style={{ fontSize: 13, fontWeight: 800, color: product.accent, fontFamily: 'Sora, sans-serif', letterSpacing: '0.05em' }}>0{product.id}</span>
|
||||
<span style={{ width: 24, height: 1, background: `rgba(${product.accentRgb},0.4)`, display: 'block' }} />
|
||||
<span style={{ fontSize: '0.68rem', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: product.accent, fontFamily: 'Manrope, sans-serif' }}>{product.subtitle}</span>
|
||||
<span style={{ fontSize: '0.68rem', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: product.accent, fontFamily: 'Sora, sans-serif' }}>{product.subtitle}</span>
|
||||
</div>
|
||||
|
||||
<h3 style={{
|
||||
@@ -283,7 +283,7 @@ function ProductCard({ product, index }: { product: Product; index: number }) {
|
||||
margin: 0,
|
||||
fontSize: 'clamp(0.82rem, 0.95vw, 0.98rem)',
|
||||
lineHeight: 1.6, color: 'rgba(255,255,255,0.5)',
|
||||
maxWidth: '420px', fontFamily: 'Manrope, sans-serif',
|
||||
maxWidth: '420px', fontFamily: 'Sora, sans-serif',
|
||||
}}>{product.description}</p>
|
||||
</div>
|
||||
|
||||
@@ -293,7 +293,7 @@ function ProductCard({ product, index }: { product: Product; index: number }) {
|
||||
<span key={tag} style={{
|
||||
padding: '5px 13px', borderRadius: '99px', fontSize: '0.7rem', fontWeight: 600,
|
||||
color: 'rgba(255,255,255,0.7)', background: 'rgba(255,255,255,0.05)',
|
||||
border: '1px solid rgba(255,255,255,0.1)', fontFamily: 'Manrope, sans-serif',
|
||||
border: '1px solid rgba(255,255,255,0.1)', fontFamily: 'Sora, sans-serif',
|
||||
}}>{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
@@ -304,7 +304,7 @@ function ProductCard({ product, index }: { product: Product; index: number }) {
|
||||
display: 'inline-flex', alignItems: 'center', gap: '8px', width: 'max-content',
|
||||
padding: '11px 22px', borderRadius: '99px', fontSize: '0.85rem', fontWeight: 800,
|
||||
textDecoration: 'none', color: '#111111', background: product.accent,
|
||||
fontFamily: 'Manrope, sans-serif', boxShadow: `0 12px 36px rgba(${product.accentRgb},0.25)`,
|
||||
fontFamily: 'Sora, sans-serif', boxShadow: `0 12px 36px rgba(${product.accentRgb},0.25)`,
|
||||
transition: 'transform 0.3s cubic-bezier(0.34,1.56,0.64,1)',
|
||||
}}
|
||||
onMouseEnter={(e) => { (e.currentTarget as HTMLAnchorElement).style.transform = 'scale(1.04)'; }}
|
||||
@@ -408,7 +408,7 @@ export default function ProductsSection({ isLoaded = false }: ProductsSectionPro
|
||||
<div style={{ maxWidth: 480 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
|
||||
<span style={{ width: 32, height: 2, background: '#f4be28', display: 'block', borderRadius: 2 }} />
|
||||
<span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#C49600', fontFamily: 'Manrope, sans-serif' }}>Platform</span>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#C49600', fontFamily: 'Sora, sans-serif' }}>Platform</span>
|
||||
</div>
|
||||
<h2 style={{ margin: 0, fontSize: 'clamp(1.9rem, 3.6vw, 3.2rem)', fontWeight: 900, lineHeight: 0.94, letterSpacing: '-0.04em', color: '#111111', fontFamily: 'Sora, sans-serif' }}>
|
||||
Four products.<br />
|
||||
@@ -417,10 +417,10 @@ export default function ProductsSection({ isLoaded = false }: ProductsSectionPro
|
||||
</div>
|
||||
|
||||
<div className="products-heading-hint" style={{ maxWidth: 280, textAlign: 'right' }}>
|
||||
<p style={{ margin: '0 0 14px', fontSize: 'clamp(0.85rem, 1vw, 1rem)', lineHeight: 1.6, color: 'rgba(0,0,0,0.45)', fontFamily: 'Manrope, sans-serif' }}>
|
||||
<p style={{ margin: '0 0 14px', fontSize: 'clamp(0.85rem, 1vw, 1rem)', lineHeight: 1.6, color: 'rgba(0,0,0,0.45)', fontFamily: 'Sora, sans-serif' }}>
|
||||
Powering every stage of the retail journey with intelligent AI solutions.
|
||||
</p>
|
||||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.32)', fontFamily: 'Manrope, sans-serif' }}>
|
||||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.32)', fontFamily: 'Sora, sans-serif' }}>
|
||||
Scroll to explore
|
||||
<svg viewBox="0 0 24 16" fill="none" width="22" height="14">
|
||||
<path d="M2 8h18M14 3l5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
|
||||
@@ -149,7 +149,7 @@ export default function TheLoop() {
|
||||
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' }} />
|
||||
<span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Manrope, sans-serif' }}>The Loop</span>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#f4be28', fontFamily: 'Sora, sans-serif' }}>The Loop</span>
|
||||
</div>
|
||||
|
||||
<h2 style={{
|
||||
@@ -171,7 +171,7 @@ export default function TheLoop() {
|
||||
margin: '0 auto', maxWidth: 480,
|
||||
fontSize: 'clamp(0.95rem, 1.1vw, 1.05rem)',
|
||||
color: 'rgba(255,255,255,0.42)', lineHeight: 1.8,
|
||||
fontFamily: 'Manrope, sans-serif',
|
||||
fontFamily: 'Sora, sans-serif',
|
||||
}}>
|
||||
Earn coins online, unlock game-based deals, discover nearby stores, and redeem offline — a self-reinforcing loop that keeps customers engaged and drives repeat footfall.
|
||||
</p>
|
||||
@@ -204,7 +204,7 @@ export default function TheLoop() {
|
||||
<div className="loop-arc-label" style={{
|
||||
position: 'absolute', top: -78, left: '50%', transform: 'translateX(-50%)',
|
||||
fontSize: 10, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
|
||||
color: 'rgba(244,190,40,0.7)', fontFamily: 'Manrope, sans-serif',
|
||||
color: 'rgba(244,190,40,0.7)', fontFamily: 'Sora, sans-serif',
|
||||
background: 'rgba(244,190,40,0.06)', border: '1px solid rgba(244,190,40,0.18)',
|
||||
padding: '5px 14px', borderRadius: 999, whiteSpace: 'nowrap',
|
||||
}}>
|
||||
@@ -258,13 +258,13 @@ export default function TheLoop() {
|
||||
<StepIcon id={s.id} />
|
||||
</div>
|
||||
|
||||
<div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(244,190,40,0.7)', fontFamily: 'Manrope, sans-serif', marginBottom: 8 }}>
|
||||
<div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(244,190,40,0.7)', fontFamily: 'Sora, sans-serif', marginBottom: 8 }}>
|
||||
Step {s.step}
|
||||
</div>
|
||||
<h3 style={{ margin: '0 0 10px', fontSize: 'clamp(1.15rem, 1.5vw, 1.5rem)', fontWeight: 800, color: '#fff', letterSpacing: '-0.02em', lineHeight: 1.1, fontFamily: 'Sora, sans-serif' }}>
|
||||
{s.title}
|
||||
</h3>
|
||||
<p style={{ margin: 0, fontSize: '0.86rem', lineHeight: 1.65, color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif' }}>
|
||||
<p style={{ margin: 0, fontSize: '0.86rem', lineHeight: 1.65, color: 'rgba(255,255,255,0.42)', fontFamily: 'Sora, sans-serif' }}>
|
||||
{s.desc}
|
||||
</p>
|
||||
</div>
|
||||
@@ -297,7 +297,7 @@ export default function TheLoop() {
|
||||
{/* ── Impact metrics ── */}
|
||||
<div ref={metricsRef} style={{ position: 'relative', zIndex: 10, maxWidth: 1000, margin: 'clamp(64px, 8vh, 110px) auto 0' }}>
|
||||
<div style={{ textAlign: 'center', marginBottom: 36 }}>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.35)', fontFamily: 'Manrope, sans-serif' }}>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.35)', fontFamily: 'Sora, sans-serif' }}>
|
||||
Measured Impact
|
||||
</span>
|
||||
</div>
|
||||
@@ -318,7 +318,7 @@ export default function TheLoop() {
|
||||
{counts[i].toFixed(m.decimals)}
|
||||
<span style={{ fontSize: '50%', verticalAlign: 'middle', marginLeft: 1 }}>{m.suffix}</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.5)', fontFamily: 'Manrope, sans-serif', marginTop: 12, lineHeight: 1.4 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif', marginTop: 12, lineHeight: 1.4 }}>
|
||||
{m.label}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -94,7 +94,7 @@ function StageCard({ num, title, description, icon, cardRef, orderClass }: CardP
|
||||
fontSize: 'clamp(0.9rem, 1vw, 1rem)',
|
||||
color: 'rgba(255,255,255,0.45)',
|
||||
lineHeight: 1.75, maxWidth: '360px',
|
||||
fontFamily: 'Manrope, sans-serif',
|
||||
fontFamily: 'Sora, sans-serif',
|
||||
position: 'relative', zIndex: 2,
|
||||
}}>
|
||||
{description}
|
||||
@@ -264,7 +264,7 @@ export default function WhatWeDo({ isLoaded = false }: WhatWeDoProps) {
|
||||
</h2>
|
||||
|
||||
{/* Subtitle */}
|
||||
<p className="wwd-header-el text-gray-400 text-base sm:text-lg max-w-xl font-medium" style={{ fontFamily: 'Manrope, sans-serif', lineHeight: 1.75 }}>
|
||||
<p className="wwd-header-el text-gray-400 text-base sm:text-lg max-w-xl font-medium" style={{ fontFamily: 'Sora, sans-serif', lineHeight: 1.75 }}>
|
||||
Four stages. One platform. A smarter retail cycle that turns every walk-in into a loyal customer.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user