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

feat: enhance landing page, for-people sections, blog main, and components including TheLoop and PhoneMockup

Browse Source
This commit is contained in:
R-Bharathraj
2026-07-06 13:21:09 +05:30
parent 727a6bcb62
commit 57e64f86b6
18 changed files with 1037 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/for-people/HeroSection.tsx
View File

@@ -1,7 +1,6 @@
'use client';
import React, { useRef, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
function useMagnetic<T extends HTMLElement>(strength = 12) {
@@ -27,7 +26,6 @@ function useMagnetic<T extends HTMLElement>(strength = 12) {
}
export default function HeroSection() {
const magPrimary = useMagnetic<HTMLAnchorElement>(10);
const magSecondary = useMagnetic<HTMLButtonElement>(8);
return (
@@ -71,19 +69,12 @@ export default function HeroSection() {
<p className="fp-content fp-subtext" style={{
fontSize: 'clamp(16px, 1.4vw, 19px)', lineHeight: 1.7, fontWeight: 400,
color: 'rgba(255,255,255,0.58)', maxWidth: 560, margin: '0 auto 40px', fontFamily: 'Sora, sans-serif',
color: 'rgba(255,255,255,0.58)', maxWidth: 640, margin: '0 auto 40px', fontFamily: 'Sora, sans-serif',
}}>
Earn LYT through daily activities, interactive games, and walking challenges, then redeem them at participating stores near you. Earn Online. Spend Offline.
Meet <strong>LYT (Loyaly Token)</strong>: the single currency behind every reward in the app. Earn them through daily tasks, walking challenges, and games, then spend them instantly at partner stores near you with zero expiry.
</p>
<div className="fp-content fp-cta" style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' }}>
<Link
href="/contacts"
ref={magPrimary}
className="fp-btn fp-btn-primary fp-magnetic"
>
Download Free ↗
</Link>
<button
ref={magSecondary}
className="fp-btn fp-btn-ghost fp-magnetic"
@@ -92,8 +83,41 @@ export default function HeroSection() {
</button>
</div>
{/* LYT Quick Facts */}
<div className="fp-content fp-cta" style={{
display: 'flex',
gap: 16,
justifyContent: 'center',
flexWrap: 'wrap',
margin: '36px auto 0',
maxWidth: 600,
}}>
{[
{ val: '1 LYT = ₹1', label: 'Fixed value' },
{ val: 'Zero Expiry', label: 'Ever' },
{ val: '10,000+', label: 'Partner stores' }
].map((item, idx) => (
<div key={idx} style={{
display: 'flex',
alignItems: 'center',
gap: 8,
fontSize: 13,
fontFamily: 'Sora, sans-serif',
background: 'rgba(255, 255, 255, 0.03)',
border: '1px solid rgba(244, 190, 40, 0.22)',
padding: '8px 16px',
borderRadius: '100px',
backdropFilter: 'blur(8px)',
}}>
<span style={{ color: '#f4be28', fontWeight: 800 }}>{item.val}</span>
<span style={{ width: 4, height: 4, borderRadius: '50%', background: 'rgba(255,255,255,0.25)' }} />
<span style={{ color: 'rgba(255,255,255,0.5)', fontSize: 11.5 }}>{item.label}</span>
</div>
))}
</div>
{/* Trust row */}
<div className="fp-content fp-cta" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, marginTop: 40 }}>
<div className="fp-content fp-cta" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, marginTop: 32 }}>
<div style={{ display: 'flex' }}>
{['#f4be28', '#4ade80', '#a855f7', '#3b82f6'].map((c, i) => (
<div key={i} style={{ width: 30, height: 30, borderRadius: '50%', background: c, border: '2px solid #0a0a12', marginLeft: i > 0 ? -9 : 0, opacity: 0.9 }} />