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

Update about us, for business pages, and for-people components

Browse Source
This commit is contained in:
R-Bharathraj
2026-07-16 17:32:43 +05:30
parent b627126713
commit 88ca87e3cc
20 changed files with 572 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/for-people/SpendAnywhereSection.tsx
View File

@@ -3,6 +3,7 @@
import React, { useEffect, useLayoutEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import FpIcon, { type FpIconName } from './FpIcons';
if (typeof window !== 'undefined') gsap.registerPlugin(ScrollTrigger);
@@ -51,13 +52,13 @@ export default function SpendAnywhereSection() {
</p>
<div className="fp-rise" style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 28, maxWidth: 460 }}>
{[
{ label: 'No waiting', icon: '⚡' },
{ label: 'No cashback', icon: '🚫' },
{ label: 'No complicated redemption', icon: '✅' },
].map((tag) => (
{([
{ label: 'No waiting', icon: 'bolt' },
{ label: 'No cashback', icon: 'ban' },
{ label: 'No complicated redemption', icon: 'check' },
] as { label: string; icon: FpIconName }[]).map((tag) => (
<div key={tag.label} className="fp-card fp-card--dark">
<span className="fp-card-icon" style={{ background: 'rgba(244,190,40,0.14)' }}>{tag.icon}</span>
<span className="fp-card-icon" style={{ background: 'rgba(244,190,40,0.14)', color: '#f4be28' }}><FpIcon name={tag.icon} /></span>
<span style={{ fontSize: 13, fontWeight: 700, fontFamily: 'Sora, sans-serif', color: '#fff', letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>
{tag.label}
</span>
@@ -83,7 +84,7 @@ export default function SpendAnywhereSection() {
style={{
width: 300, borderRadius: 42, padding: 10,
background: 'linear-gradient(160deg, #2a2a2e 0%, #0a0a0c 100%)',
boxShadow: '0 60px 120px -24px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06)',
boxShadow: '0 28px 60px -22px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06)',
position: 'relative',
}}
>
@@ -142,7 +143,9 @@ export default function SpendAnywhereSection() {
}
@media (prefers-reduced-motion: reduce) { .spa-phone-shell { animation: none !important; } }
@media (max-width: 900px) {
.spa-phone-shell { width: 280px !important; --pm-scale: calc(260 / 390); }
/* min(...,100%): see EarnRewardsSection — a hard 280px overflows
the ~256px available at 320px instead of centring. */
.spa-phone-shell { width: min(280px, 100%) !important; --pm-scale: calc(260 / 390); }
}
`}</style>
</div>