diff --git a/package-lock.json b/package-lock.json index aad4493..80649f3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "clsx": "^2.1.1", "dotted-map": "^3.1.0", "framer-motion": "^12.40.0", + "gsap": "^3.15.0", "jalaali-js": "^1.2.8", "lucide-react": "^1.16.0", "react": "^19.2.6", @@ -2201,6 +2202,12 @@ "dev": true, "license": "ISC" }, + "node_modules/gsap": { + "version": "3.15.0", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.15.0.tgz", + "integrity": "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==", + "license": "Standard 'no charge' license: https://gsap.com/standard-license." + }, "node_modules/hermes-estree": { "version": "0.25.1", "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz", diff --git a/package.json b/package.json index b0956b4..580b97d 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "clsx": "^2.1.1", "dotted-map": "^3.1.0", "framer-motion": "^12.40.0", + "gsap": "^3.15.0", "jalaali-js": "^1.2.8", "lucide-react": "^1.16.0", "react": "^19.2.6", diff --git a/src/pages/Home/sections/HeroSection.tsx b/src/pages/Home/sections/HeroSection.tsx index 9eb2bb5..0f11e02 100644 --- a/src/pages/Home/sections/HeroSection.tsx +++ b/src/pages/Home/sections/HeroSection.tsx @@ -1,131 +1,140 @@ -import { useState } from 'react' -import { motion } from 'framer-motion' +import { useEffect, useRef } from 'react' import { useLang } from '@/context/LangContext' +import gsap from 'gsap' +import { ScrollTrigger } from 'gsap/ScrollTrigger' + +gsap.registerPlugin(ScrollTrigger) const T = { fa: { - h1a: 'جایی که آینده', h1b: ' به تصمیم ', h1c: 'تبدیل می‌شود', - sub: 'تحلیل روندها، فناوری‌ها و سناریوهای آینده صنعت فولاد', - cta1: 'گزارش ویژه ←', cta2: 'نبض صنعت', - video: 'Short film · Future of Steel', + tag: 'اندیشکده‌ فولاد آینده', + h1a: 'جایی که آینده', + h1b: 'به تصمیم تبدیل می‌شود', + sub: 'تحلیل روندها، فناوری‌ها و سناریوهای آینده صنعت فولاد ایران و جهان', }, en: { - h1a: 'Where the Future', h1b: ' Becomes ', h1c: 'Decision', + tag: 'Steel Policy Institute', + h1a: 'Where the Future', + h1b: 'Becomes Decision', sub: 'Analyzing trends, technologies and future scenarios of the global steel industry', - cta1: 'Special Report →', cta2: 'Industry Pulse', - video: 'Short film · Future of Steel', }, } export default function HeroSection() { const { lang } = useLang() const t = T[lang] - const [repHov, setRepHov] = useState(false) - const [pulseHov, setPulseHov] = useState(false) + + const sectionRef = useRef(null) + const videoRef = useRef(null) + const overlayRef = useRef(null) + const textRef = useRef(null) + + useEffect(() => { + const el = textRef.current + const video = videoRef.current + const overlay = overlayRef.current + if (!el || !video || !overlay) return + + video.playbackRate = 1.5 + + // entrance + const tl = gsap.timeline() + tl.fromTo(el, { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: 1, ease: 'power3.out' }) + + // scroll parallax — scrub keeps it reversible + ScrollTrigger.create({ + trigger: sectionRef.current, + start: 'top top', + end: 'bottom top', + scrub: 1, + onUpdate: (self) => { + const p = self.progress + gsap.set(video, { scale: 1 + p * 0.12 }) + gsap.set(overlay, { opacity: 0.15 + p * 0.55 }) + gsap.set(el, { y: p * -60, opacity: 1 - p * 1.6 }) + }, + }) + + return () => { + tl.kill() + ScrollTrigger.getAll().forEach(t => t.kill()) + } + }, []) return (
{/* Background video */}
)