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

feat: implement solutions page, use cases, and update landing page sections including MagicBento, ScrollStack, and interactive components

Browse Source
This commit is contained in:
R-Bharathraj
2026-07-04 17:28:38 +05:30
parent abcefbb9c9
commit 727a6bcb62
52 changed files with 3061 additions and 835 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -63,7 +63,7 @@ const PRODUCTS: Product[] = [
title: 'Identiq',
subtitle: 'Consumer Loyalty Platform',
description:
'Earn Loyaly Coins through daily logins and games, then redeem rewards at real offline stores.',
'Earn LYT through daily logins and games, then redeem rewards at real offline stores.',
accent: '#f4be28',
accentRgb: '244, 190, 40',
tags: ['Daily Rewards', 'Game Based Offers', 'Offline Redemption'],
@@ -283,21 +283,21 @@ function ProductVisual({ product }: { product: Product }) {
</span>
</div>
{/* Points card with progress to next tier */}
{/* LYT balance card with progress to next tier */}
<div style={{ borderRadius: 18, padding: '18px 20px', background: `linear-gradient(135deg, ${accent} 0%, #e09820 100%)`, position: 'relative', overflow: 'hidden' }}>
<div className="pv-sheen" />
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
<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: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.6)', fontFamily: 'Sora, sans-serif' }}>Reward LYT</div>
<div style={{ fontSize: 32, fontWeight: 900, color: '#111', fontFamily: 'Sora, sans-serif', letterSpacing: '-0.03em', marginTop: 2 }}>284</div>
</div>
<span style={{ width: 34, height: 34, borderRadius: '50%', background: 'rgba(255,255,255,0.35)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16 }}>🪙</span>
<span style={{ width: 34, height: 34, borderRadius: 10, background: 'rgba(255,255,255,0.35)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, fontWeight: 900, color: '#111', fontFamily: 'Sora, sans-serif' }}>⬡</span>
</div>
<div style={{ marginTop: 12 }}>
<div style={{ height: 5, borderRadius: 3, background: 'rgba(0,0,0,0.15)', overflow: 'hidden' }}>
<div className="pv-progress-fill" style={{ height: '100%', width: '68%', borderRadius: 3, background: '#111' }} />
</div>
<div style={{ fontSize: 10, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', marginTop: 6, fontWeight: 600 }}>116 pts to Platinum</div>
<div style={{ fontSize: 10, color: 'rgba(0,0,0,0.55)', fontFamily: 'Sora, sans-serif', marginTop: 6, fontWeight: 600 }}>116 LYT to Platinum</div>
</div>
</div>
@@ -389,7 +389,7 @@ function ProductCard({ product, index }: { product: Product; index: number }) {
</div>
<Link
href={product.href}
href="/solutions_page"
style={{
display: 'inline-flex', alignItems: 'center', gap: '8px', width: 'max-content',
padding: '11px 22px', borderRadius: '99px', fontSize: '0.85rem', fontWeight: 800,