88 lines
4.0 KiB
TypeScript
88 lines
4.0 KiB
TypeScript
import React, { useRef, useLayoutEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import gsap from 'gsap';
|
|
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
const Hero: React.FC = () => {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const imageRef = useRef<HTMLImageElement>(null);
|
|
|
|
useLayoutEffect(() => {
|
|
const ctx = gsap.context(() => {
|
|
// Parallax Background
|
|
gsap.to(imageRef.current, {
|
|
yPercent: 30,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: containerRef.current,
|
|
start: "top top",
|
|
end: "bottom top",
|
|
scrub: true
|
|
}
|
|
});
|
|
|
|
// Text Stagger Animation
|
|
gsap.fromTo(".hero-stagger",
|
|
{ y: 50, opacity: 0 },
|
|
{ y: 0, opacity: 1, duration: 1, stagger: 0.2, ease: "power3.out", delay: 0.2 }
|
|
);
|
|
}, containerRef);
|
|
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
return (
|
|
<section ref={containerRef} className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
|
|
<div className="absolute inset-0 z-0">
|
|
<img
|
|
ref={imageRef}
|
|
alt="Abstract dark technology background"
|
|
className="w-full h-[120%] -top-[10%] absolute object-cover opacity-90 dark:opacity-60 brightness-50 contrast-125"
|
|
src="https://lh3.googleusercontent.com/aida-public/AB6AXuDTVpQgmoDeaMvQ7ZXqAWwA3243QWiW39J5KBEt-0pHjhbb4q9ICJb9f42oiDD5becHfElI6zFDQXMpaaMm1Ce5aj4IBVAiIz_XfRzdW-ktaVtom2rkjI9e6AGk71D4YpnXcRtifs5DrbmZfkbp7oBt67fLTwtXLZ_qAic5HprmFz1Xnf2E6emY_trL9Hr4SBtAQL5BE8LHCbF0PrBTK960_Tqz2VhSt_CZfI8UmzBUunqFf54LiDvUsxguYJitq5-r0vWHMVt7xTh1"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-background-light via-transparent to-transparent dark:from-background-dark dark:via-transparent dark:to-transparent"></div>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-background-light/50 dark:from-background-dark/50 to-transparent"></div>
|
|
</div>
|
|
|
|
<div className="relative z-10 text-center max-w-4xl px-6">
|
|
<div className="hero-stagger flex items-center justify-center gap-2 mb-6">
|
|
<span className="h-px w-8 bg-gray-400 dark:bg-gray-500"></span>
|
|
<span className="text-xs uppercase tracking-[0.2em] text-gray-600 dark:text-gray-400 font-medium">Established 1998</span>
|
|
<span className="h-px w-8 bg-gray-400 dark:bg-gray-500"></span>
|
|
</div>
|
|
|
|
<h1 className="hero-stagger font-display text-5xl md:text-7xl lg:text-8xl font-medium tracking-tighter leading-[1.1] mb-8 text-gray-900 dark:text-white">
|
|
Reliable IT Services<br/>
|
|
<span className="text-gray-500 dark:text-gray-500">for Over 25 Years.</span>
|
|
</h1>
|
|
|
|
<p className="hero-stagger text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-10 font-light leading-relaxed">
|
|
Bay Area Affiliates is your silent partner in technology. We provide the infrastructure that whispers clarity, ensures uptime, and guides your business growth.
|
|
</p>
|
|
|
|
<div className="hero-stagger flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<motion.a
|
|
href="#services"
|
|
className="px-8 py-3 bg-black dark:bg-white text-white dark:text-black rounded-full font-medium"
|
|
whileHover={{ scale: 1.05, backgroundColor: "#3b82f6", color: "#ffffff" }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
Explore Services
|
|
</motion.a>
|
|
<motion.a
|
|
href="#contact"
|
|
className="px-8 py-3 bg-transparent border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-full font-medium"
|
|
whileHover={{ scale: 1.05, backgroundColor: "rgba(255,255,255,0.1)", borderColor: "#ffffff" }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
Get a Consultation
|
|
</motion.a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Hero; |