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

updated sections design and content

Browse Source
This commit is contained in:
R-Bharathraj
2026-07-11 12:38:33 +05:30
parent cba47aea2b
commit 03ed08d7dd
24 changed files with 907 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/home/WhatWeDo.tsx
View File

@@ -33,7 +33,7 @@ const STAGES: Stage[] = [
},
{
title: 'Engage',
tagline: 'Playable daily rewards turn one visit into a habit.',
tagline: 'Playable daily Lyts turn one visit into a habit.',
detail: 'Daily streaks, challenges & mini games',
icon: (
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.2">
@@ -145,49 +145,71 @@ export default function WhatWeDo({ isLoaded = false }: WhatWeDoProps) {
if (typeof window === 'undefined') return;
const ctx = gsap.context(() => {
// Header: blur fade-up with stagger
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// Header: clean fade-up with a refined blur transition
gsap.fromTo(
'.wwd-header-el',
{ opacity: 0, y: 36, filter: 'blur(6px)' },
{
opacity: 0,
y: prefersReducedMotion ? 0 : 30,
filter: prefersReducedMotion ? 'none' : 'blur(8px)'
},
{
opacity: 1, y: 0, filter: 'blur(0px)',
duration: 1, stagger: 0.18, ease: 'expo.out',
scrollTrigger: { trigger: '.wwd-header', start: 'top 85%', toggleActions: 'play none none reset' },
opacity: 1,
y: 0,
filter: 'blur(0px)',
duration: DEFAULT_DURATION,
stagger: 0.15,
ease: DEFAULT_EASE,
scrollTrigger: {
trigger: '.wwd-header',
start: 'top 85%',
toggleActions: 'play none none reset'
},
}
);
// Cards: 3D flip-up reveal — each card rises and unfolds from its bottom
// edge, then its inner content cascades in. One scroll-triggered
// timeline keeps card + content in sync.
// Cards: modern 3D lift + unblur reveal, smoothly staggered across the row
const cards = gsap.utils.toArray<HTMLElement>('.wwd-card');
const grid = document.querySelector('.wwd-grid-container');
const revealTl = gsap.timeline({
scrollTrigger: { trigger: grid, start: 'top 82%', toggleActions: 'play none none reset' },
});
revealTl.fromTo(cards,
{ opacity: 0, y: 90, rotationX: -32, transformOrigin: '50% 100%', transformPerspective: 1100 },
{ opacity: 1, y: 0, rotationX: 0, duration: 0.9, ease: 'power4.out', stagger: 0.14 },
0
);
cards.forEach((card, i) => {
const at = i * 0.14 + 0.35;
revealTl
.fromTo(card.querySelector('.wwd-icon'),
{ opacity: 0, scale: 0.4, rotate: -20 },
{ opacity: 1, scale: 1, rotate: 0, duration: 0.5, ease: 'back.out(2.2)' }, at)
.fromTo(card.querySelector('.wwd-title'),
{ opacity: 0, y: 16 },
{ opacity: 1, y: 0, duration: 0.45, ease: 'power3.out' }, at + 0.12)
.fromTo(card.querySelector('.wwd-tagline'),
{ opacity: 0, y: 12 },
{ opacity: 1, y: 0, duration: 0.4, ease: 'power3.out' }, at + 0.22)
.fromTo(card.querySelector('.wwd-detail'),
{ opacity: 0, y: 10 },
{ opacity: 1, y: 0, duration: 0.4, ease: 'power3.out' }, at + 0.3);
});
if (prefersReducedMotion) {
gsap.fromTo(
cards,
{ opacity: 0 },
{
opacity: 1,
duration: 0.5,
stagger: 0.08,
scrollTrigger: { trigger: grid, start: 'top 85%', toggleActions: 'play none none reset' },
}
);
} else {
gsap.fromTo(
cards,
{
opacity: 0,
y: 72,
scale: 0.92,
rotationX: 14,
transformOrigin: '50% 100%',
transformPerspective: 900,
filter: 'blur(10px)',
},
{
opacity: 1,
y: 0,
scale: 1,
rotationX: 0,
filter: 'blur(0px)',
duration: 1,
ease: 'power3.out',
stagger: 0.13,
scrollTrigger: { trigger: grid, start: 'top 82%', toggleActions: 'play none none reset' },
}
);
}
}, containerRef);
return () => ctx.revert();