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

updated pages

Browse Source
This commit is contained in:
R-Bharathraj
2026-07-07 13:21:13 +05:30
parent 57e64f86b6
commit e261cde8f5
25 changed files with 853 additions and 1612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/for-people/ExperienceSection.tsx
View File

@@ -1,6 +1,12 @@
'use client';
import React from 'react';
import React, { useLayoutEffect, useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
if (typeof window !== 'undefined') gsap.registerPlugin(ScrollTrigger);
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
const words = [
{ text: 'Effortless.', size: 'clamp(58px, 9vw, 134px)', color: '#ffffff' },
@@ -14,8 +20,37 @@ const steps = [
];
export default function ExperienceSection() {
const panelRef = useRef<HTMLDivElement>(null);
const cardRef = useRef<HTMLDivElement>(null);
useIsomorphicLayoutEffect(() => {
if (typeof window === 'undefined') return;
const section = panelRef.current;
const card = cardRef.current;
if (!section || !card) return;
const ctx = gsap.context(() => {
gsap.fromTo(card,
{ x: 200, opacity: 0 },
{
x: 0,
opacity: 1,
ease: 'power2.out',
scrollTrigger: {
trigger: section,
start: 'top 92%',
end: 'top 25%',
scrub: 1.2,
}
}
);
}, section);
return () => ctx.revert();
}, []);
return (
<section className="fp-panel" style={{ background: '#07070d' }}>
<section ref={panelRef} className="fp-panel" style={{ background: '#07070d' }}>
<div className="fp-shell">
<div style={{ marginBottom: 'clamp(36px, 5vh, 60px)' }}>
@@ -36,35 +71,41 @@ export default function ExperienceSection() {
))}
</div>
{/* Steps */}
<div>
<p className="fp-rise" style={{
fontSize: 16, lineHeight: 1.85, color: 'rgba(255,255,255,0.45)', fontFamily: 'Sora, sans-serif', margin: '0 0 44px', maxWidth: 360,
<div ref={cardRef} style={{
background: '#f4be28',
padding: 'clamp(28px, 4.5vw, 44px)',
borderRadius: '28px',
boxShadow: '0 24px 48px rgba(244, 190, 40, 0.12)',
width: '100%',
opacity: 0,
}}>
<p style={{
fontSize: 16, lineHeight: 1.85, color: 'rgba(7, 7, 13, 0.75)', fontFamily: 'Sora, sans-serif', margin: '0 0 36px', maxWidth: 360,
fontWeight: 500,
}}>
No plastic cards. No coupon hunting. No app open required at checkout. Loyaly works quietly in the background while you shop the way you always have.
</p>
<div style={{ display: 'flex', flexDirection: 'column' }}>
{steps.map((s, i) => (
<div key={i} className="fp-rise" style={{
<div key={i} style={{
display: 'flex', gap: 20, alignItems: 'center', padding: '20px 0',
borderBottom: i < steps.length - 1 ? '1px solid rgba(255,255,255,0.07)' : 'none',
transitionDelay: `${0.2 + i * 0.1}s`,
borderBottom: i < steps.length - 1 ? '1px solid rgba(7, 7, 13, 0.1)' : 'none',
}}>
<span style={{ fontSize: 12, fontWeight: 700, color: '#f4be28', fontFamily: 'Sora, sans-serif', letterSpacing: '0.06em', flexShrink: 0, width: 24 }}>{s.n}</span>
<span style={{ fontSize: 16, fontWeight: 600, color: 'rgba(255,255,255,0.75)', fontFamily: 'Sora, sans-serif', lineHeight: 1.4 }}>{s.label}</span>
<span style={{ fontSize: 13, fontWeight: 800, color: '#07070d', fontFamily: 'Sora, sans-serif', letterSpacing: '0.06em', flexShrink: 0, width: 24 }}>{s.n}</span>
<span style={{ fontSize: 16, fontWeight: 700, color: '#07070d', fontFamily: 'Sora, sans-serif', lineHeight: 1.4 }}>{s.label}</span>
</div>
))}
</div>
<div className="fp-rise" style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 12, transitionDelay: '0.5s' }}>
<div style={{ marginTop: 36, display: 'flex', alignItems: 'center', gap: 12 }}>
<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 #07070d', marginLeft: i > 0 ? -9 : 0 }} />
{['#ff7b39', '#4ade80', '#a855f7', '#3b82f6'].map((c, i) => (
<div key={i} style={{ width: 30, height: 30, borderRadius: '50%', background: c, border: '2px solid #f4be28', marginLeft: i > 0 ? -9 : 0 }} />
))}
</div>
<span style={{ fontSize: 13, color: 'rgba(255,255,255,0.4)', fontFamily: 'Sora, sans-serif' }}>
Joined by <span style={{ color: '#fff', fontWeight: 700 }}>50,000+</span> shoppers
<span style={{ fontSize: 13, color: 'rgba(7, 7, 13, 0.65)', fontFamily: 'Sora, sans-serif', fontWeight: 500 }}>
Joined by <span style={{ color: '#07070d', fontWeight: 800 }}>50,000+</span> shoppers
</span>
</div>
</div>