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

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

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