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

Update pages, components, and add stock images for visual layout enhancements

Browse Source
This commit is contained in:
R-Bharathraj
2026-06-30 13:36:16 +05:30
parent 9b93fa0d07
commit 7175adb0db
36 changed files with 340 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/home/TheLoop.tsx
View File

@@ -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>