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

feat: update website layout, components, and assets

Browse Source
This commit is contained in:
R-Bharathraj
2026-07-09 18:12:02 +05:30
parent a5c5ec033a
commit cba47aea2b
52 changed files with 1979 additions and 1221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -156,39 +156,37 @@ export default function WhatWeDo({ isLoaded = false }: WhatWeDoProps) {
}
);
// Cards: single staggered timeline triggered once the row enters view
// 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.
const cards = gsap.utils.toArray<HTMLElement>('.wwd-card');
const grid = document.querySelector('.wwd-grid-container');
gsap.fromTo(cards,
{ opacity: 0, y: 56, scale: 0.93, filter: 'blur(4px)' },
{
opacity: 1, y: 0, scale: 1, filter: 'blur(0px)',
duration: 0.8, stagger: 0.12, ease: 'expo.out',
scrollTrigger: { trigger: grid, start: 'top 82%', toggleActions: 'play none none reset' },
}
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
);
// Cascade inner elements after cards land
cards.forEach((card, i) => {
const tl = gsap.timeline({ delay: i * 0.12 + 0.25 });
tl.fromTo(card.querySelector('.wwd-icon'),
{ opacity: 0, scale: 0.5, rotate: -15, filter: 'blur(3px)' },
{ opacity: 1, scale: 1, rotate: 0, filter: 'blur(0px)', duration: 0.55, ease: 'back.out(2)' }
)
.fromTo(card.querySelector('.wwd-title'),
{ opacity: 0, y: 14 },
{ opacity: 1, y: 0, duration: 0.4, ease: 'power3.out' }, '-=0.2'
)
.fromTo(card.querySelector('.wwd-tagline'),
{ opacity: 0, y: 10 },
{ opacity: 1, y: 0, duration: 0.38, ease: 'power3.out' }, '-=0.2'
)
.fromTo(card.querySelector('.wwd-detail'),
{ opacity: 0, y: 8 },
{ opacity: 1, y: 0, duration: 0.35, ease: 'power3.out' }, '-=0.18'
);
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);
});
}, containerRef);
@@ -207,7 +205,7 @@ export default function WhatWeDo({ isLoaded = false }: WhatWeDoProps) {
zIndex: 2,
}}
>
<AnimatedDarkBg variant="amber" />
<AnimatedDarkBg variant="amber" bgImage="/images/stock/one_platform_bg.png" bgImageAlt="" />
{/* Header */}
<div className="wwd-header relative z-10 text-center max-w-4xl mx-auto mb-16 sm:mb-20 flex flex-col items-center">
@@ -224,6 +222,7 @@ export default function WhatWeDo({ isLoaded = false }: WhatWeDoProps) {
fontWeight: 800, color: '#fff',
lineHeight: 0.98, letterSpacing: '-0.04em',
fontFamily: 'Sora, sans-serif',
textShadow: '0 4px 24px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.6)',
}}>
Every visit,<br />
a <span className="wwd-shimmer">loyal customer.</span>
@@ -242,8 +241,6 @@ export default function WhatWeDo({ isLoaded = false }: WhatWeDoProps) {
<style>{`
.wwd-card {
position: relative;
transform: perspective(1100px) rotateX(0deg) rotateY(0deg);
transition: transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.wwd-card-inner {
position: relative;
@@ -253,11 +250,11 @@ export default function WhatWeDo({ isLoaded = false }: WhatWeDoProps) {
height: 100%;
transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease;
}
.wwd-card-white .wwd-card-inner { background: #ffffff; }
.wwd-card-yellow .wwd-card-inner { background: #F4C21A; }
.wwd-card-white .wwd-card-inner { background: #ffffff; box-shadow: 0 18px 40px -14px rgba(0,0,0,0.5); }
.wwd-card-yellow .wwd-card-inner { background: #F4C21A; box-shadow: 0 18px 40px -14px rgba(0,0,0,0.45); }
.wwd-card-active .wwd-card-inner {
transform: translateY(-6px);
box-shadow: 0 24px 50px -18px rgba(0,0,0,0.35);
box-shadow: 0 24px 50px -18px rgba(0,0,0,0.55);
}
.wwd-card-glow {
position: absolute; inset: 0; pointer-events: none;
@@ -292,11 +289,13 @@ export default function WhatWeDo({ isLoaded = false }: WhatWeDoProps) {
flex-shrink: 0;
}
.wwd-shimmer {
background: linear-gradient(105deg,#f4be28 0%,#fff8e0 48%,#f4be28 62%,#ff9500 100%);
background: linear-gradient(105deg,#ffd95a 0%,#fff8e0 35%,#f4c21a 55%,#ffb020 75%,#ffd95a 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
filter: drop-shadow(0 3px 14px rgba(0,0,0,0.55)) drop-shadow(0 0 22px rgba(244,194,26,0.35));
animation: wwdShimmer 3s linear infinite;
}
@keyframes wwdShimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }