Loyaly/loyalyweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated section design

Browse Source
This commit is contained in:
R-Bharathraj
2026-07-14 16:09:50 +05:30
parent 4dbc330b1d
commit 211d2489e1
14 changed files with 793 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
next.config.ts
View File

@@ -2,6 +2,9 @@ import type { NextConfig } from "next";
const nextConfig: NextConfig = {
output: "standalone",
images: {
qualities: [75, 90, 95],
},
async redirects() {
return [
{

BIN
public/images/about_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
public/images/meet_the_agents_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
public/team/4.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 40 KiB

BIN
public/team/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

969
src/app/about_us/page.tsx
View File

File diff suppressed because it is too large Load Diff

8
src/app/layout.tsx
View File

@@ -7,14 +7,14 @@ import BodyClassManager from '@/components/BodyClassManager';
import Preloader from '@/components/Preloader';
export const metadata: Metadata = {
title: 'Loyaly.AI | AI Powered Retail Intelligence',
title: 'Loyaly.AI | Offline Shopping. Online Intelligence.',
description:
'Loyaly.AI is an AI powered retail intelligence platform that turns every store visit into a loyalty opportunity. Understand customers, drive engagement, and grow revenue.',
'Loyaly.AI is an offline shopping, online intelligence platform that turns every store visit into a loyalty opportunity. Understand customers, drive engagement, and grow revenue.',
icons: {
icon: '/favicon.ico',
},
openGraph: {
title: 'Loyaly.AI | AI Powered Retail Intelligence',
title: 'Loyaly.AI | Offline Shopping. Online Intelligence.',
description:
'Turn footfall into insight. Loyaly.AI uses AI to understand customer behaviour, personalise experiences, and maximise retail revenue.',
url: 'https://loyaly.ai',
@@ -23,7 +23,7 @@ export const metadata: Metadata = {
},
twitter: {
card: 'summary_large_image',
title: 'Loyaly.AI | AI Powered Retail Intelligence',
title: 'Loyaly.AI | Offline Shopping. Online Intelligence.',
description:
'Turn footfall into insight. Loyaly.AI uses AI to understand customer behaviour, personalise experiences, and maximise retail revenue.',
},

15
src/app/solutions_page/page.tsx
View File

@@ -102,23 +102,12 @@ export default function MeetTheCrewPage() {
position: 'relative', overflow: 'hidden',
}}>
{/* Background photo */}
<Image src="/images/stock/about-team.jpg" alt="" fill priority style={{ objectFit: 'cover', opacity: 0.9 }} />
<Image src="/images/meet_the_agents_bg.png" alt="" fill priority style={{ objectFit: 'fill', 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.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: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
<div style={{ maxWidth: 760 }}>
@@ -131,7 +120,7 @@ export default function MeetTheCrewPage() {
<span style={{ color: '#f4be28' }}>Agents.</span>
</h1>
<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' }}>
The builders, thinkers, and retail obsessives behind Loyaly, working every day to make offline shopping as smart as online.
Four specialized AI agents working together to understand customers, optimize every interaction, and turn every visit into lasting loyalty.
</p>
</div>
</div>

32
src/app/use_cases/page.tsx
View File

@@ -17,43 +17,43 @@ const OUTCOMES = [
const CAPS = [
{
title: 'Merchant Campaign Platform', accent: '#7dd957',
title: 'Merchant Lyts Platform', accent: '#7dd957',
bg: 'linear-gradient(140deg, #1d3f2b 0%, #0f2a1c 100%)', image: '/ai_agents/agent-1-c.png',
icon: (<><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" /><path d="M3 6h18" /><path d="M16 10a4 4 0 0 1-8 0" /></>),
desc: 'Register your store, upload products and inventory, then launch interactive promotional campaigns in minutes. Define maximum discounts per product and track performance in real time.',
desc: 'Launch Lyts campaigns in minutes. Add products, assign Lyts, create offers, and track customer engagement with a real-time merchant dashboard.',
metrics: [
{ val: '5+', lbl: 'Game formats', icon: (<><line x1="6" x2="10" y1="12" y2="12" /><line x1="8" x2="8" y1="10" y2="14" /><line x1="15" x2="15.01" y1="13" y2="13" /><line x1="18" x2="18.01" y1="11" y2="11" /><rect width="20" height="12" x="2" y="6" rx="2" /></>) },
{ val: '1-click', lbl: 'Campaign setup', icon: (<><path d="m3 3 7.07 16.97 2.51-7.39 7.39-2.51L3 3z" /><path d="m13 13 6 6" /></>) },
{ val: '500+', lbl: 'Partner Stores', icon: (<><line x1="6" x2="10" y1="12" y2="12" /><line x1="8" x2="8" y1="10" y2="14" /><line x1="15" x2="15.01" y1="13" y2="13" /><line x1="18" x2="18.01" y1="11" y2="11" /><rect width="20" height="12" x="2" y="6" rx="2" /></>) },
{ val: '2 mins', lbl: 'Campaign Setup', icon: (<><path d="m3 3 7.07 16.97 2.51-7.39 7.39-2.51L3 3z" /><path d="m13 13 6 6" /></>) },
],
},
{
title: 'Game Based Discount Engine', accent: '#a78bfa',
title: 'Game Powered Lyts', accent: '#a78bfa',
bg: 'linear-gradient(140deg, #2a2352 0%, #1a1838 100%)', image: '/ai_agents/agent-2-c.png',
icon: (<><line x1="6" x2="10" y1="12" y2="12" /><line x1="8" x2="8" y1="10" y2="14" /><line x1="15" x2="15.01" y1="13" y2="13" /><line x1="18" x2="18.01" y1="11" y2="11" /><rect width="20" height="12" x="2" y="6" rx="2" /></>),
desc: 'Select a product, choose a game (Maze, Spin Wheel, Scratch Card, or Match Master) and set a maximum discount. Customers play once and discover their reward only after completing the game.',
desc: 'Powers Battery Challenges, Step Tracking, QR Check-ins, Spin Wheel, Scratch Cards, and personalized Lyts missions to increase engagement and customer retention.',
metrics: [
{ val: '4×', lbl: 'Engagement lift', icon: (<><polyline points="22 7 13.5 15.5 8.5 10.5 2 17" /><polyline points="16 7 22 7 22 13" /></>) },
{ val: '100%', lbl: 'Margin controlled', icon: (<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />) },
{ val: '6+', lbl: 'Game Formats', icon: (<><polyline points="22 7 13.5 15.5 8.5 10.5 2 17" /><polyline points="16 7 22 7 22 13" /></>) },
{ val: '100%', lbl: 'Lyts Distribution', icon: (<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />) },
],
},
{
title: 'Smart Coupon System', accent: '#34d399',
title: 'Smart Lyts Engine', accent: '#34d399',
bg: 'linear-gradient(140deg, #16704a 0%, #0d4d33 100%)', image: '/ai_agents/agent-4-c.png',
icon: (<path d="M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" />),
desc: 'Generate daily surprise coupons through the Battery Challenge and other activities. Offer flat discounts, BOGO, percentage-off deals, festival specials, and brand promotions, fresh every day.',
desc: 'Automatically generate Lyts-based offers. Create percentage discounts, cashback, BOGO deals, festival campaigns, and personalized promotions that keep customers coming back.',
metrics: [
{ val: '6', lbl: 'Coupon types', icon: (<><path d="M20.59 13.41 13.42 20.6a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" /><line x1="7" x2="7.01" y1="7" y2="7" /></>) },
{ val: 'Daily', lbl: 'Fresh surprises', icon: (<><rect width="18" height="18" x="3" y="4" rx="2" /><line x1="16" x2="16" y1="2" y2="6" /><line x1="8" x2="8" y1="2" y2="6" /><line x1="3" x2="21" y1="10" y2="10" /></>) },
{ val: '10+', lbl: 'Offer Types', icon: (<><path d="M20.59 13.41 13.42 20.6a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" /><line x1="7" x2="7.01" y1="7" y2="7" /></>) },
{ val: 'Daily', lbl: 'Lyts Campaigns', icon: (<><rect width="18" height="18" x="3" y="4" rx="2" /><line x1="16" x2="16" y1="2" y2="6" /><line x1="8" x2="8" y1="2" y2="6" /><line x1="3" x2="21" y1="10" y2="10" /></>) },
],
},
{
title: 'Footfall & Campaign Analytics', accent: '#ffd8a8',
title: 'AI Retail Intelligence', accent: '#ffd8a8',
bg: 'linear-gradient(140deg, #ee7420 0%, #d1560a 100%)', image: '/ai_agents/agent-3-c.png',
icon: (<><line x1="18" x2="18" y1="20" y2="10" /><line x1="12" x2="12" y1="20" y2="4" /><line x1="6" x2="6" y1="20" y2="14" /></>),
desc: 'Track which campaigns drove store visits, measure conversion rates, monitor repeat footfall, and optimize your promotional budget with a real-time analytics dashboard.',
desc: 'Monitor customer visits, product performance, Lyts activity, and campaign success with real-time AI insights. Turn every interaction into measurable business growth.',
metrics: [
{ val: '98%', lbl: 'Count accuracy', icon: (<><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></>) },
{ val: '<9ms', lbl: 'Real-time latency', icon: (<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />) },
{ val: '98%', lbl: 'Tracking Accuracy', icon: (<><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></>) },
{ val: 'Real-time', lbl: 'AI Insights', icon: (<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />) },
],
},
];

5
src/components/Footer.tsx
View File

@@ -128,7 +128,7 @@ export default function Footer() {
</span>
</Link>
<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.
Offline shopping. Online intelligence.
</p>
<div style={{ display: 'flex', gap: 10 }}>
{SOCIALS.map(({ label, href, icon }) => (
@@ -150,9 +150,6 @@ export default function Footer() {
{/* Nav columns */}
{NAV.map(col => (
<nav key={col.title} className="ly-footer-nav" 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: '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}>

62
src/components/home/ProblemSection.tsx
View File

@@ -153,58 +153,6 @@ export default function ProblemSection({ isLoaded = true }: ProblemSectionProps)
</div>
</div>
{/* India retail market stats strip */}
<div className="relative z-10 mx-auto problem-india-stats" style={{
maxWidth: 1200,
marginBottom: 'clamp(32px, 4vw, 48px)',
display: 'grid',
gridTemplateColumns: 'repeat(5, 1fr)',
gap: 'clamp(8px, 1.2vw, 14px)',
}}>
{[
{
val: '$2 Tn', label: 'Indian retail market by 2032, 26% CAGR',
icon: (<><line x1="12" y1="1" x2="12" y2="23" /><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></>),
},
{
val: '5th', label: 'Largest retail destination globally',
icon: (<><circle cx="12" cy="12" r="10" /><line x1="2" y1="12" x2="22" y2="12" /><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /></>),
},
{
val: '10%', label: "Of India's GDP from retail",
icon: (<><path d="M21.21 15.89A10 10 0 1 1 8 2.83" /><path d="M22 12A10 10 0 0 0 12 2v10z" /></>),
},
{
val: '12%', label: 'Of retail is organized, the rest is offline',
icon: (<><path d="M3 9l1.5-5h15L21 9" /><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9" /><path d="M9 21v-6h6v6" /></>),
},
{
val: '500M', label: "India's online shoppers by 2030, up from 250M",
icon: (<><polyline points="23 6 13.5 16.5 8.5 11.5 1 19" /><polyline points="17 6 23 6 23 12" /></>),
},
].map((s, i) => (
<div key={i} className="problem-india-stat" style={{
padding: 'clamp(14px, 1.8vw, 20px)', borderRadius: 16,
background: '#f9f7f2', border: '1px solid rgba(23,21,18,0.08)',
}}>
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
<span style={{
width: 38, height: 38, borderRadius: '50%', flexShrink: 0,
display: 'flex', alignItems: 'center', justifyContent: 'center',
background: 'linear-gradient(150deg, #ee3a34 0%, #c81e1e 100%)',
boxShadow: '0 6px 14px -6px rgba(200,30,30,0.6)',
}}>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffffff" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
{s.icon}
</svg>
</span>
<div style={{ fontSize: 'clamp(1.3rem, 2vw, 1.7rem)', fontWeight: 900, color: '#171512', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em', lineHeight: 1 }}>{s.val}</div>
</div>
<div style={{ fontSize: '0.72rem', color: '#4f463a', fontFamily: 'Sora, sans-serif', lineHeight: 1.4 }}>{s.label}</div>
</div>
))}
</div>
{/* Grid wrapper */}
<div className="relative z-10 mx-auto" style={{ maxWidth: 1200 }}>
{/* Row 1: Red Stat Cards */}
@@ -527,15 +475,6 @@ export default function ProblemSection({ isLoaded = true }: ProblemSectionProps)
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.problem-india-stat {
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.problem-india-stat:hover {
border-color: rgba(239, 68, 68, 0.35);
box-shadow: 0 14px 30px -18px rgba(23,21,18,0.28);
transform: translateY(-3px);
}
.dark-bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
@@ -592,7 +531,6 @@ export default function ProblemSection({ isLoaded = true }: ProblemSectionProps)
#problem .problem-stats-row { grid-template-columns: 1fr !important; }
#problem .dark-bento-grid { grid-template-columns: 1fr !important; }
#problem .dark-bento-card-4 { grid-column: span 1; }
#problem .problem-india-stats { grid-template-columns: repeat(2, 1fr) !important; }
}
`}</style>
</section>

4
src/components/home/ProductsSection.tsx
View File

@@ -653,7 +653,7 @@ export default function ProductsSection({ isLoaded = false }: ProductsSectionPro
}
.products-card {
flex: 0 0 auto;
width: clamp(320px, 74vw, 880px);
width: clamp(320px, 90vw, 1280px);
/* Fill the band between heading and progress bar, capped on huge screens */
height: min(740px, calc(100vh - var(--pt) - var(--pb)));
}
@@ -704,7 +704,7 @@ export default function ProductsSection({ isLoaded = false }: ProductsSectionPro
}
.products-track::-webkit-scrollbar { display: none; }
.products-track { scrollbar-width: none; }
.products-card { height: auto; width: min(86vw, 460px); }
.products-card { height: auto; width: min(90vw, 520px); }
.products-card { flex-direction: column !important; }
.products-card-content { flex: 0 0 auto !important; }
.products-card-visual {

2
src/components/home/heroCarouselData.ts
View File

@@ -16,7 +16,7 @@ export interface HeroSlideData {
export const HERO_SLIDES: HeroSlideData[] = [
{
id: 'intro',
badge: 'AI-Powered Retail Intelligence',
badge: 'Offline Shopping. Online Intelligence.',
headline: 'Turn Every Visit Into Loyalty',
highlightWords: ['Loyalty'],
description:

2
src/components/use-cases/ProductsScrollSection.tsx
View File

@@ -147,7 +147,7 @@ export default function ProductsScrollSection() {
<div style={{ position: 'relative', zIndex: 2, marginBottom: 'clamp(56px,8vh,96px)' }}>
<SectionEyebrow variant="pill" style={{ marginBottom: 16 }}>Our Products</SectionEyebrow>
<h2 style={{ fontSize: 'clamp(32px, 4.5vw, 64px)', fontWeight: 800, letterSpacing: '-0.05em', lineHeight: 0.92, color: '#fff', margin: 0, fontFamily: 'Sora, sans-serif', maxWidth: 640 }}>
AI Powered Retail Intelligence.
Offline Shopping. Online Intelligence.
</h2>
</div>