284 lines
11 KiB
TypeScript
284 lines
11 KiB
TypeScript
import { useRef, useEffect } from "react";
|
|
import { motion } from "motion/react";
|
|
import { ArrowRight } from "lucide-react";
|
|
import gsap from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
|
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
|
|
import TextAnimation from "@/components/ui/TextAnimation";
|
|
import { useButtonClick } from "@/hooks/useButtonClick";
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
interface HeroWorkScrollStackProps {
|
|
tag: string;
|
|
title: string;
|
|
titleHighlight: string;
|
|
description: string;
|
|
descriptionMuted: string;
|
|
primaryButton: { text: string; href: string; avatarSrc: string; avatarLabel: string };
|
|
sectionTag: string;
|
|
sectionTitle: string;
|
|
sectionDescription: string;
|
|
items: [
|
|
{ title: string; description: string; imageSrc: string; tag: string },
|
|
{ title: string; description: string; imageSrc: string; tag: string },
|
|
{ title: string; description: string; imageSrc: string; tag: string }
|
|
];
|
|
secondaryButton?: { text: string; href: string };
|
|
heroAnimationDelay?: number;
|
|
}
|
|
|
|
const HeroWorkScrollStack = ({
|
|
tag,
|
|
title,
|
|
titleHighlight,
|
|
description,
|
|
descriptionMuted,
|
|
primaryButton,
|
|
sectionTag,
|
|
sectionTitle,
|
|
sectionDescription,
|
|
items,
|
|
secondaryButton,
|
|
heroAnimationDelay,
|
|
}: HeroWorkScrollStackProps) => {
|
|
const animationRef = useRef<HTMLDivElement>(null);
|
|
const placeholderRef = useRef<HTMLDivElement>(null);
|
|
const card1Ref = useRef<HTMLDivElement>(null);
|
|
const card2Ref = useRef<HTMLDivElement>(null);
|
|
const card3Ref = useRef<HTMLDivElement>(null);
|
|
const handlePrimaryClick = useButtonClick(primaryButton.href);
|
|
const handleSecondaryClick = useButtonClick(secondaryButton?.href || "#");
|
|
|
|
useEffect(() => {
|
|
const isDesktop = window.matchMedia("(min-width: 768px)").matches;
|
|
|
|
const ctx = gsap.context(() => {
|
|
const cardRefs = [card1Ref.current, card2Ref.current, card3Ref.current];
|
|
const placeholder = placeholderRef.current;
|
|
if (!placeholder) return;
|
|
|
|
const placeholderRect = placeholder.getBoundingClientRect();
|
|
const placeholderCenterY = placeholderRect.top + placeholderRect.height / 2;
|
|
|
|
if (isDesktop) {
|
|
// DESKTOP: Scrub animation tied to scroll position
|
|
const xOffsets = ["32rem", "14.5rem", "-1.8rem"];
|
|
const yAdjustments = [0, -48, 0];
|
|
const rotations = [-5, 0, 5];
|
|
const scales = [1.35, 1.3, 1.25];
|
|
const zIndexes = [30, 20, 10];
|
|
|
|
const tl = gsap.timeline({
|
|
scrollTrigger: {
|
|
trigger: animationRef.current,
|
|
start: "top top",
|
|
end: "bottom bottom",
|
|
scrub: 1,
|
|
},
|
|
});
|
|
|
|
cardRefs.forEach((card, i) => {
|
|
if (!card) return;
|
|
const cardRect = card.getBoundingClientRect();
|
|
const cardCenterY = cardRect.top + cardRect.height / 2;
|
|
const yOffset = placeholderCenterY - cardCenterY;
|
|
|
|
gsap.set(card, {
|
|
x: xOffsets[i],
|
|
y: yOffset + yAdjustments[i],
|
|
rotation: rotations[i],
|
|
scale: scales[i],
|
|
zIndex: zIndexes[i],
|
|
willChange: "transform",
|
|
force3D: true,
|
|
});
|
|
|
|
tl.to(card, { x: 0, y: 0, rotation: 0, scale: 1, duration: 0.4, ease: "none" }, 0);
|
|
tl.to(card, { zIndex: 1, duration: 0.1, ease: "none" }, 0.3);
|
|
});
|
|
} else {
|
|
// MOBILE: Toggle animation - play/reverse on scroll
|
|
const xOffsets = ["2.5rem", "0.5rem", "-1rem"];
|
|
const yAdjustments = [-10, -30, 10];
|
|
const rotations = [-5, 0, 5];
|
|
const scales = [0.65, 0.7, 0.75];
|
|
const zIndexes = [30, 20, 10];
|
|
|
|
cardRefs.forEach((card, i) => {
|
|
if (!card) return;
|
|
const cardRect = card.getBoundingClientRect();
|
|
const cardCenterY = cardRect.top + cardRect.height / 2;
|
|
const yOffset = placeholderCenterY - cardCenterY;
|
|
|
|
gsap.set(card, {
|
|
x: xOffsets[i],
|
|
y: yOffset + yAdjustments[i],
|
|
rotation: rotations[i],
|
|
scale: scales[i],
|
|
zIndex: zIndexes[i],
|
|
willChange: "transform",
|
|
force3D: true,
|
|
});
|
|
|
|
gsap.to(card, {
|
|
x: 0,
|
|
y: 0,
|
|
rotation: 0,
|
|
scale: 1,
|
|
duration: 1.2,
|
|
ease: "power2.inOut",
|
|
scrollTrigger: {
|
|
trigger: placeholder,
|
|
start: "top 35%",
|
|
toggleActions: "play none none reverse",
|
|
},
|
|
});
|
|
});
|
|
}
|
|
}, animationRef);
|
|
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
return (
|
|
<div ref={animationRef}>
|
|
<div id="hero" data-section="hero">
|
|
<section aria-label="Hero section" className="relative h-fit md:h-svh pt-30 pb-20 md:py-0 flex items-center overflow-hidden md:overflow-visible">
|
|
<HeroBackgroundSlot />
|
|
|
|
<div className="w-content-width mx-auto">
|
|
<div className="flex flex-col md:flex-row items-center gap-10 md:gap-20 w-full">
|
|
<motion.div
|
|
initial={{ y: 10, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ duration: 1.8, ease: [0.16, 1, 0.3, 1], delay: heroAnimationDelay ?? 0 }}
|
|
className="w-full md:w-[46%] flex flex-col items-center md:items-start gap-3"
|
|
>
|
|
<div className="card backdrop-blur flex items-center gap-2 px-3 py-1 rounded">
|
|
<span className="size-2 rounded-full bg-green-500 animate-pulsate [--accent:#22c55e]" />
|
|
<p className="text-sm leading-snug font-medium text-foreground">{tag}</p>
|
|
</div>
|
|
|
|
<h1 className="text-6xl md:text-7xl 2xl:text-8xl font-medium leading-[1.05] tracking-tight text-center md:text-left">
|
|
<span className="inline pb-[0.1em] -mb-[0.1em] bg-linear-to-r from-foreground to-primary-cta bg-clip-text text-transparent">
|
|
{title}{" "}
|
|
<span className="font-bold">{titleHighlight}</span>
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-base md:text-lg font-medium leading-snug text-center md:text-left max-w-[95%]">
|
|
{description}{" "}
|
|
<span className="text-foreground/50">{descriptionMuted}</span>
|
|
</p>
|
|
|
|
<a
|
|
href={primaryButton.href}
|
|
onClick={handlePrimaryClick}
|
|
className="group flex items-center gap-3 mt-2 text-primary-cta-text rounded-full pl-3 pr-6 py-3 w-fit primary-button transition-all duration-300"
|
|
>
|
|
<div className="flex items-center">
|
|
<div className="card p-px rounded-full transition-transform duration-500 ease-out group-hover:-rotate-6">
|
|
<img
|
|
src={primaryButton.avatarSrc}
|
|
className="w-9 h-9 rounded-full object-cover"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-[0fr] group-hover:grid-cols-[1fr] transition-all duration-500 ease-out">
|
|
<div className="overflow-hidden flex items-center">
|
|
<span className="text-primary-cta-text text-sm font-medium mx-2 transition-transform duration-500 ease-out -translate-x-3 group-hover:translate-x-0">
|
|
+
|
|
</span>
|
|
<div className="card p-px rounded-full shrink-0 transition-transform duration-500 ease-out -translate-x-5 group-hover:translate-x-0 group-hover:rotate-6">
|
|
<span className="w-9 h-9 rounded-full flex items-center justify-center">
|
|
<span className="text-foreground text-xs font-bold">{primaryButton.avatarLabel}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span className="text-base font-medium whitespace-nowrap">{primaryButton.text}</span>
|
|
</a>
|
|
</motion.div>
|
|
|
|
<div ref={placeholderRef} className="w-full md:w-[54%] relative h-80 md:h-96">
|
|
<div className="absolute inset-0 card rounded-2xl md:hidden" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div id="work" data-section="work">
|
|
<section aria-label="Work section" className="py-20 md:pt-0">
|
|
<div className="flex flex-col gap-8 w-content-width mx-auto">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
|
<p>{sectionTag}</p>
|
|
</div>
|
|
|
|
<TextAnimation
|
|
text={sectionTitle}
|
|
variant="slide-up"
|
|
gradientText={true}
|
|
tag="h2"
|
|
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
|
|
/>
|
|
|
|
<TextAnimation
|
|
text={sectionDescription}
|
|
variant="slide-up"
|
|
gradientText={false}
|
|
tag="p"
|
|
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-5">
|
|
{items.map((item, index) => {
|
|
const cardRef = index === 0 ? card1Ref : index === 1 ? card2Ref : card3Ref;
|
|
return (
|
|
<div key={item.title} className="flex flex-col gap-3 xl:gap-4 2xl:gap-5">
|
|
<div
|
|
ref={cardRef}
|
|
className="aspect-4/3 rounded-2xl shadow-2xl relative card p-2 xl:p-3 2xl:p-4"
|
|
>
|
|
<div className="w-full h-full rounded-xl overflow-hidden relative">
|
|
<ImageOrVideo imageSrc={item.imageSrc} className="w-full h-full object-cover" />
|
|
<span className="absolute bottom-2 left-2 xl:bottom-3 xl:left-3 2xl:bottom-4 2xl:left-4 px-3 py-1.5 text-xs font-medium text-primary-cta-text rounded-full backdrop-blur-xl bg-primary-cta-text/15 border border-primary-cta-text/20">
|
|
{item.tag}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<p className="text-lg md:text-xl lg:text-2xl leading-snug">
|
|
<span className="font-semibold text-foreground">{item.title}. </span>
|
|
<span className="text-foreground/50">{item.description}</span>
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{secondaryButton && (
|
|
<div className="flex justify-center">
|
|
<a
|
|
href={secondaryButton.href}
|
|
onClick={handleSecondaryClick}
|
|
className="group flex items-center gap-2 px-6 py-3 text-base font-medium rounded-full secondary-button text-secondary-cta-text transition-all duration-300"
|
|
>
|
|
<span>{secondaryButton.text}</span>
|
|
<ArrowRight className="size-4 transition-transform duration-300 group-hover:translate-x-1" />
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HeroWorkScrollStack;
|