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

updated sections design and content

Browse Source
This commit is contained in:
R-Bharathraj
2026-07-11 12:38:33 +05:30
parent cba47aea2b
commit 03ed08d7dd
24 changed files with 907 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,7 +35,7 @@ const PRODUCTS = [
'Entry-to-purchase funnel tracking that flags where shoppers drop off',
],
metric: { val: '3.2×', lbl: 'conversion uplift' },
tags: ['Footfall Tracking', 'Heatmaps', 'Behavior Analysis'],
tags: ['Footfall Tracking', 'Behavior Analysis'],
},
{
n: '02', title: 'SpendSense', subtitle: 'Customer Spending Intelligence', color: '#10B981',
@@ -63,12 +63,12 @@ const PRODUCTS = [
n: '04', title: 'Identiq', subtitle: 'Consumer Loyalty Platform', color: '#f4be28',
desc: 'The consumer-facing app that closes the loop. Identiq turns daily logins, walking challenges, and quick mini-games into LYTs, Loyaly’s reward tokens, redeemable instantly at any partner store, so every idle moment on a phone becomes a reason to walk into a real one.',
capabilities: [
'Daily login and step-challenge rewards that build a lasting habit loop',
'Daily login and step-challenge Lyts that build a lasting habit loop',
'Game based offers like Spin Wheel, Scratch Card, and Maze Challenge',
'Instant offline redemption at any partner store, no card required',
],
metric: { val: '50K+', lbl: 'active shoppers' },
tags: ['Daily Rewards', 'Game Based Offers', 'Offline Redemption'],
tags: ['Daily Lyts', 'Game Based Offers', 'Offline Redemption'],
},
];
@@ -112,7 +112,7 @@ export default function MeetTheCrewPage() {
color: '#ffffff', margin: '0 0 36px', fontFamily: 'Sora, sans-serif',
}}>
Meet the<br />
<span style={{ color: '#f4be28' }}>Crew.</span>
<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.
@@ -160,57 +160,65 @@ export default function MeetTheCrewPage() {
</Reveal>
<div style={{ position: 'relative' }}>
<ScrollStack useWindowScroll itemDistance={160} itemScale={0.035} itemStackDistance={40} baseScale={0.86} blurAmount={1.2}>
<ScrollStack useWindowScroll itemDistance={160} itemScale={0.035} itemStackDistance={40} baseScale={0.86} hideBehind>
{PRODUCTS.map((p, i) => (
<ScrollStackItem key={i}>
<div style={{
background: `linear-gradient(155deg, #14141c 0%, #0c0c12 100%)`,
border: `1px solid ${p.color}40`,
borderRadius: 28, padding: 'clamp(28px, 3.2vw, 48px)', height: '100%', boxSizing: 'border-box',
position: 'relative', overflow: 'hidden',
background: `radial-gradient(130% 80% at 100% 0%, ${p.color}22 0%, transparent 46%), linear-gradient(155deg, #16161f 0%, #0a0a10 100%)`,
border: `1px solid ${p.color}4d`,
boxShadow: `inset 0 1px 0 rgba(255,255,255,0.06)`,
borderRadius: 28, padding: 'clamp(36px, 4vw, 64px)',
minHeight: 'clamp(380px, 48vh, 500px)', height: '100%', boxSizing: 'border-box',
}}>
<div className="mtc-product-grid" style={{ display: 'grid', gridTemplateColumns: '1.35fr 1fr', gap: 'clamp(28px, 4vw, 56px)', alignItems: 'start' }}>
{/* Accent glow blob */}
<div aria-hidden style={{ position: 'absolute', top: '-22%', right: '-8%', width: 360, height: 360, borderRadius: '50%', background: `radial-gradient(circle, ${p.color}26 0%, transparent 70%)`, pointerEvents: 'none' }} />
<div className="mtc-product-grid" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 'clamp(32px, 4.5vw, 68px)', alignItems: 'center', height: '100%' }}>
{/* Left — identity + description */}
<div>
<div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
<span style={{ fontSize: 13, fontWeight: 800, color: p.color, fontFamily: 'Sora, sans-serif', letterSpacing: '0.05em' }}>{p.n}</span>
<span style={{ width: 24, height: 1, background: `${p.color}66`, display: 'block' }} />
<span style={{ fontSize: '0.7rem', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: p.color, fontFamily: 'Sora, sans-serif' }}>{p.subtitle}</span>
<div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
<span style={{ fontSize: 15, fontWeight: 800, color: p.color, fontFamily: 'Sora, sans-serif', letterSpacing: '0.05em' }}>{p.n}</span>
<span style={{ fontSize: '0.74rem', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: p.color, fontFamily: 'Sora, sans-serif' }}>{p.subtitle}</span>
</div>
<h3 style={{ fontSize: 'clamp(1.8rem, 2.8vw, 2.8rem)', fontWeight: 800, letterSpacing: '-0.03em', color: '#fff', margin: '0 0 16px', fontFamily: 'Sora, sans-serif' }}>{p.title}</h3>
<p style={{ fontSize: 15, lineHeight: 1.75, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif', margin: '0 0 24px', maxWidth: 480 }}>{p.desc}</p>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
<h3 style={{ fontSize: 'clamp(2.1rem, 3.4vw, 3.4rem)', fontWeight: 800, letterSpacing: '-0.035em', color: '#fff', margin: '0 0 20px', fontFamily: 'Sora, sans-serif', lineHeight: 1 }}>{p.title}</h3>
<p style={{ fontSize: 'clamp(15px, 1.1vw, 17px)', lineHeight: 1.8, color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif', margin: '0 0 30px', maxWidth: 520 }}>{p.desc}</p>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
{p.tags.map((tag) => (
<span key={tag} style={{
padding: '6px 14px', borderRadius: 100, fontSize: '0.72rem', 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: 'Sora, sans-serif',
padding: '8px 16px', borderRadius: 100, fontSize: '0.76rem', fontWeight: 700,
color: '#fff', background: `${p.color}1a`,
border: `1px solid ${p.color}3d`, fontFamily: 'Sora, sans-serif',
}}>{tag}</span>
))}
</div>
</div>
{/* Right — metric + capabilities */}
{/* Right — metric hero + capabilities */}
<div>
<div style={{
padding: 'clamp(18px, 2vw, 24px)', borderRadius: 18, marginBottom: 18,
background: `${p.color}12`, border: `1px solid ${p.color}35`,
padding: 'clamp(24px, 2.6vw, 34px)', borderRadius: 22, marginBottom: 24,
background: `linear-gradient(150deg, ${p.color}2b 0%, ${p.color}0d 100%)`,
border: `1px solid ${p.color}55`,
boxShadow: `0 22px 54px -26px ${p.color}66, inset 0 1px 0 rgba(255,255,255,0.08)`,
}}>
<div style={{ fontSize: 'clamp(1.8rem, 2.6vw, 2.4rem)', fontWeight: 900, color: p.color, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em', lineHeight: 1 }}>{p.metric.val}</div>
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, sans-serif', marginTop: 6, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{p.metric.lbl}</div>
<div style={{ fontSize: 'clamp(2.4rem, 3.4vw, 3.4rem)', fontWeight: 900, color: p.color, fontFamily: 'Sora, sans-serif', letterSpacing: '-0.04em', lineHeight: 1, textShadow: `0 0 30px ${p.color}55` }}>{p.metric.val}</div>
<div style={{ fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.5)', fontFamily: 'Sora, sans-serif', marginTop: 10, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{p.metric.lbl}</div>
</div>
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
{p.capabilities.map((cap) => (
<div key={cap} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
<div key={cap} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
<span style={{
width: 18, height: 18, borderRadius: '50%', flexShrink: 0, marginTop: 2,
width: 22, height: 22, borderRadius: '50%', flexShrink: 0, marginTop: 1,
display: 'flex', alignItems: 'center', justifyContent: 'center',
background: `${p.color}18`, border: `1px solid ${p.color}45`,
background: `${p.color}22`, border: `1px solid ${p.color}66`,
boxShadow: `0 0 14px -2px ${p.color}77`,
}}>
<svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke={p.color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={p.color} strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
</span>
<span style={{ fontSize: 13.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.65)', fontFamily: 'Sora, sans-serif' }}>{cap}</span>
<span style={{ fontSize: 14.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.72)', fontFamily: 'Sora, sans-serif' }}>{cap}</span>
</div>
))}
</div>