init: init repo with existing code
This commit is contained in:
@@ -0,0 +1,187 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowRight, ChevronDown } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export default function HeroSection() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Parallax effect for floating shapes
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (!containerRef.current) return;
|
||||
const { clientX, clientY } = e;
|
||||
const { innerWidth, innerHeight } = window;
|
||||
const x = (clientX / innerWidth - 0.5) * 20;
|
||||
const y = (clientY / innerHeight - 0.5) * 20;
|
||||
|
||||
containerRef.current.style.setProperty('--mouse-x', `${x}px`);
|
||||
containerRef.current.style.setProperty('--mouse-y', `${y}px`);
|
||||
};
|
||||
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
return () => window.removeEventListener('mousemove', handleMouseMove);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section
|
||||
id="home"
|
||||
ref={containerRef}
|
||||
className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20"
|
||||
>
|
||||
{/* Animated gradient background */}
|
||||
<div className="absolute inset-0 gradient-primary-animated opacity-20" />
|
||||
|
||||
{/* Particle dots */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
{[...Array(50)].map((_, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="absolute w-1 h-1 rounded-full bg-primary/50"
|
||||
style={{
|
||||
left: `${Math.random() * 100}%`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
}}
|
||||
animate={{
|
||||
opacity: [0.2, 0.8, 0.2],
|
||||
scale: [1, 1.5, 1],
|
||||
}}
|
||||
transition={{
|
||||
duration: 3 + Math.random() * 2,
|
||||
repeat: Infinity,
|
||||
delay: Math.random() * 2,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Floating geometric shapes */}
|
||||
<motion.div
|
||||
className="absolute top-1/4 left-[10%] w-32 h-32 border-2 border-primary/30 rounded-full"
|
||||
style={{
|
||||
transform: 'translate(calc(var(--mouse-x, 0) * -1), calc(var(--mouse-y, 0) * -1))',
|
||||
}}
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 20, repeat: Infinity, ease: 'linear' }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-1/4 right-[15%] w-24 h-24 border-2 border-neon-purple/30 rotate-45"
|
||||
style={{
|
||||
transform: 'translate(calc(var(--mouse-x, 0) * 0.5), calc(var(--mouse-y, 0) * 0.5)) rotate(45deg)',
|
||||
}}
|
||||
animate={{ rotate: [45, 405] }}
|
||||
transition={{ duration: 25, repeat: Infinity, ease: 'linear' }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute top-1/3 right-[25%] w-16 h-16 bg-neon-green/10 rounded-lg"
|
||||
style={{
|
||||
transform: 'translate(calc(var(--mouse-x, 0) * 1.5), calc(var(--mouse-y, 0) * 1.5))',
|
||||
}}
|
||||
animate={{
|
||||
y: [-10, 10, -10],
|
||||
rotate: [0, 180, 360],
|
||||
}}
|
||||
transition={{ duration: 8, repeat: Infinity, ease: 'easeInOut' }}
|
||||
/>
|
||||
|
||||
{/* Glowing orbs */}
|
||||
<div className="absolute top-1/2 left-1/4 w-64 h-64 bg-primary/20 rounded-full blur-[100px] animate-float" />
|
||||
<div className="absolute bottom-1/3 right-1/4 w-48 h-48 bg-neon-purple/20 rounded-full blur-[80px] animate-float-delayed" />
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 container mx-auto px-4 text-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
{/* Badge */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-8"
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
|
||||
<span className="text-sm font-medium text-muted-foreground">
|
||||
Innovating the Future
|
||||
</span>
|
||||
</motion.div>
|
||||
|
||||
{/* Main headline */}
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="block"
|
||||
>
|
||||
We Build the Future
|
||||
</motion.span>
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="block text-primary neon-text-glow"
|
||||
>
|
||||
with Technology
|
||||
</motion.span>
|
||||
</h1>
|
||||
|
||||
{/* Subtext */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.7 }}
|
||||
className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10"
|
||||
>
|
||||
Transforming ideas into powerful digital solutions. We craft innovative
|
||||
web applications, mobile experiences, and AI-powered systems that drive
|
||||
growth and redefine possibilities.
|
||||
</motion.p>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.9 }}
|
||||
className="flex flex-col sm:flex-row items-center justify-center gap-4"
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-primary text-primary-foreground font-semibold px-8 py-6 text-lg rounded-full neon-glow hover:neon-glow-strong transition-all group"
|
||||
>
|
||||
Get Started
|
||||
<ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="font-semibold px-8 py-6 text-lg rounded-full glass border-primary/50 hover:border-primary hover:bg-primary/10 transition-all"
|
||||
>
|
||||
View Our Work
|
||||
</Button>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Scroll indicator */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 1.5 }}
|
||||
className="absolute -bottom-28 left-1/2 -translate-x-1/2"
|
||||
>
|
||||
<motion.a
|
||||
href="#services"
|
||||
className="flex flex-col items-center gap-2 text-muted-foreground hover:text-primary transition-colors"
|
||||
animate={{ y: [0, 8, 0] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
>
|
||||
<span className="text-sm">Scroll to explore</span>
|
||||
<ChevronDown className="w-5 h-5" />
|
||||
</motion.a>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user