89 lines
3.4 KiB
TypeScript
89 lines
3.4 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
|
import { gsap } from 'gsap';
|
|
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
const FeatureSection: React.FC = () => {
|
|
const sectionRef = useRef<HTMLDivElement>(null);
|
|
const imageRef = useRef<HTMLDivElement>(null);
|
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const section = sectionRef.current;
|
|
const image = imageRef.current;
|
|
const content = contentRef.current;
|
|
|
|
if (!section || !image || !content) return;
|
|
|
|
// Image reveal animation
|
|
gsap.fromTo(
|
|
image,
|
|
{ clipPath: 'inset(100% 0 0 0)', opacity: 0 },
|
|
{
|
|
clipPath: 'inset(0% 0 0 0)',
|
|
opacity: 1,
|
|
duration: 1.2,
|
|
ease: 'power3.out',
|
|
scrollTrigger: {
|
|
trigger: section,
|
|
start: 'top 60%',
|
|
toggleActions: 'play none none reverse',
|
|
},
|
|
}
|
|
);
|
|
|
|
// Content fade in animation
|
|
gsap.fromTo(
|
|
content,
|
|
{ x: -60, opacity: 0 },
|
|
{
|
|
x: 0,
|
|
opacity: 1,
|
|
duration: 1,
|
|
ease: 'power3.out',
|
|
scrollTrigger: {
|
|
trigger: section,
|
|
start: 'top 50%',
|
|
toggleActions: 'play none none reverse',
|
|
},
|
|
}
|
|
);
|
|
|
|
return () => {
|
|
ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<section ref={sectionRef} className="py-32 md:py-48 bg-sage dark:bg-stone-900 overflow-hidden relative transition-colors duration-500">
|
|
<div className="max-w-[1800px] mx-auto px-6">
|
|
<div className="relative flex flex-col md:block">
|
|
<div className="hidden md:block absolute -top-24 left-10 z-0 select-none opacity-[0.03] dark:opacity-[0.05] pointer-events-none">
|
|
<span className="font-display text-[20rem] leading-none text-black dark:text-white">CRAFT</span>
|
|
</div>
|
|
<div
|
|
ref={imageRef}
|
|
className="w-full md:w-3/5 h-[600px] md:h-[800px] ml-auto relative z-10 shadow-2xl bg-center bg-cover bg-no-repeat"
|
|
style={{ backgroundImage: "url('/ceramic-cups.png')" }}
|
|
>
|
|
</div>
|
|
<div ref={contentRef} className="relative z-20 mt-[-100px] md:mt-0 md:absolute md:top-1/2 md:left-20 md:-translate-y-1/2 bg-white dark:bg-stone-900 p-12 md:p-20 shadow-xl max-w-xl mx-auto md:mx-0">
|
|
<span className="block w-12 h-[1px] bg-text-main mb-8"></span>
|
|
<h2 className="font-display text-4xl md:text-5xl font-light mb-8 text-text-main dark:text-white leading-tight">
|
|
The Art of <br /><i className="font-thin">Slow Living</i>
|
|
</h2>
|
|
<p className="font-body font-light text-text-muted dark:text-gray-400 mb-10 leading-loose text-sm">
|
|
We believe in the beauty of handmade objects. Our collection features a curated selection of ceramics designed to elevate the everyday. From sturdy mugs for your morning coffee to elegant vases that breathe life into a room, each piece is crafted with patience and intention.
|
|
</p>
|
|
<a className="group inline-flex items-center text-xs uppercase tracking-[0.2em] text-text-main dark:text-white font-medium" href="#">
|
|
Read Our Story <span className="ml-2 group-hover:translate-x-1 transition-transform">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default FeatureSection; |