Pushing project code
This commit is contained in:
Timo Knuth
@@ -1,5 +1,5 @@
|
||||
import React, { useRef, useLayoutEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { motion, useMotionTemplate, useMotionValue } from 'framer-motion';
|
||||
import gsap from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
|
||||
@@ -7,12 +7,21 @@ gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
const Hero: React.FC = () => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const imageRef = useRef<HTMLImageElement>(null);
|
||||
|
||||
const parallaxWrapperRef = useRef<HTMLDivElement>(null);
|
||||
const mouseX = useMotionValue(0);
|
||||
const mouseY = useMotionValue(0);
|
||||
|
||||
const handleMouseMove = ({ currentTarget, clientX, clientY }: React.MouseEvent) => {
|
||||
const { left, top } = currentTarget.getBoundingClientRect();
|
||||
mouseX.set(clientX - left);
|
||||
mouseY.set(clientY - top + 75);
|
||||
};
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
// Parallax Background
|
||||
gsap.to(imageRef.current, {
|
||||
gsap.to(parallaxWrapperRef.current, {
|
||||
yPercent: 30,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
@@ -24,7 +33,7 @@ const Hero: React.FC = () => {
|
||||
});
|
||||
|
||||
// Text Stagger Animation
|
||||
gsap.fromTo(".hero-stagger",
|
||||
gsap.fromTo(".hero-stagger",
|
||||
{ y: 50, opacity: 0 },
|
||||
{ y: 0, opacity: 1, duration: 1, stagger: 0.2, ease: "power3.out", delay: 0.2 }
|
||||
);
|
||||
@@ -34,14 +43,32 @@ const Hero: React.FC = () => {
|
||||
}, []);
|
||||
|
||||
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"
|
||||
/>
|
||||
<section
|
||||
ref={containerRef}
|
||||
onMouseMove={handleMouseMove}
|
||||
className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20 group"
|
||||
>
|
||||
|
||||
<div className="absolute inset-0 z-0 pointer-events-none">
|
||||
<div ref={parallaxWrapperRef} className="absolute w-full h-[120%] -top-[10%] left-0">
|
||||
{/* Base Layer - Slightly Brighter */}
|
||||
<img
|
||||
alt="Abstract dark technology background"
|
||||
className="w-full h-full object-cover opacity-90 dark:opacity-70 brightness-75 contrast-150"
|
||||
src="/src/assets/hero-bg.png"
|
||||
/>
|
||||
|
||||
{/* Highlight Layer - Only visible via mask */}
|
||||
<motion.img
|
||||
style={{
|
||||
maskImage: useMotionTemplate`radial-gradient(100px circle at ${mouseX}px ${mouseY}px, black, transparent)`,
|
||||
WebkitMaskImage: useMotionTemplate`radial-gradient(100px circle at ${mouseX}px ${mouseY}px, black, transparent)`,
|
||||
}}
|
||||
alt=""
|
||||
className="absolute inset-0 w-full h-full object-cover mix-blend-screen opacity-100 brightness-150 contrast-150 filter saturate-150"
|
||||
src="/src/assets/hero-bg.png"
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
@@ -52,32 +79,32 @@ const Hero: React.FC = () => {
|
||||
<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>
|
||||
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.
|
||||
Providing top-notch Computer & Networking solutions to the Coastal Bend community.
|
||||
</p>
|
||||
|
||||
|
||||
<div className="hero-stagger flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<motion.a
|
||||
href="#services"
|
||||
<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
|
||||
IT Services
|
||||
</motion.a>
|
||||
<motion.a
|
||||
href="#contact"
|
||||
<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
|
||||
Get in Touch
|
||||
</motion.a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user