matt/puffin-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Matt 2025-06-03 19:12:15 +02:00
parent 1663329d7b
commit 7690d59447
1 changed files with 16 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/Home.tsx
View File

@ -78,70 +78,14 @@ export function Home({ onNavigate }: Props) {
return (
<div className="relative">
{/* Luxury Hero Section */}
{/* Hero Section */}
<motion.div
ref={heroRef}
className="relative h-screen w-full overflow-hidden parallax-container -mt-[76px]"
className="relative min-h-screen w-full flex items-center justify-center py-20"
style={{ y, opacity }}
>
{/* Elegant Gradient Background */}
<motion.div
className="absolute inset-0 w-full h-full bg-gradient-to-br from-slate-900 via-blue-900 to-blue-800"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1.5, ease: "easeOut" }}
/>
{/* Animated Wave Pattern Overlay */}
<div className="absolute inset-0 opacity-20 wave-pattern"></div>
{/* Floating Particles */}
<div className="absolute inset-0 overflow-hidden">
{[...Array(20)].map((_, i) => (
<motion.div
key={i}
className="absolute w-1 h-1 bg-white rounded-full opacity-30"
style={{
left: `${Math.random() * 100}%`,
top: `${100 + Math.random() * 100}%`,
animationDelay: `${Math.random() * 15}s`,
animationDuration: `${15 + Math.random() * 10}s`
}}
animate={{
y: [0, -window.innerHeight * 1.5],
x: [0, Math.random() * 100 - 50],
opacity: [0, 0.6, 0.6, 0]
}}
transition={{
duration: 15 + Math.random() * 10,
repeat: Infinity,
delay: Math.random() * 15,
ease: "linear"
}}
/>
))}
</div>
{/* Floating Elements */}
<motion.div
className="absolute top-20 right-20 w-3 h-3 bg-yellow-400 rounded-full opacity-70 blur-[0.5px]"
animate={{
x: mousePosition.x * 0.02,
y: mousePosition.y * 0.02,
}}
transition={{ type: "spring", stiffness: 50, damping: 20 }}
/>
<motion.div
className="absolute bottom-40 left-20 w-2 h-2 bg-blue-300 rounded-full opacity-50 blur-[0.5px]"
animate={{
x: mousePosition.x * -0.01,
y: mousePosition.y * -0.01,
}}
transition={{ type: "spring", stiffness: 30, damping: 20 }}
/>
{/* Hero Content */}
<div className="relative h-full flex items-center justify-center">
<div className="relative">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<motion.div
initial={{ opacity: 0, y: 50 }}
@ -149,16 +93,26 @@ export function Home({ onNavigate }: Props) {
transition={{ duration: 1, delay: 0.5 }}
className="mb-8"
>
{/* Puffin Logo */}
<motion.img
src="/puffinOffset.webp"
alt="Puffin Offset Logo"
className="h-24 w-auto mx-auto mb-8"
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8, delay: 0.3 }}
/>
<motion.h1
className="text-6xl sm:text-7xl lg:text-8xl font-bold mb-6"
>
<span className="text-white drop-shadow-[0_4px_8px_rgba(0,0,0,0.8)]">Luxury Meets</span>
<span className="heading-luxury">Luxury Meets</span>
<br />
<span className="text-gradient-gold drop-shadow-[0_4px_8px_rgba(0,0,0,0.8)]">Sustainability</span>
<span className="text-gradient-gold">Sustainability</span>
</motion.h1>
<motion.p
className="text-xl sm:text-2xl text-slate-200 max-w-4xl mx-auto leading-relaxed mb-12"
className="text-xl sm:text-2xl text-slate-600 max-w-4xl mx-auto leading-relaxed mb-12"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1 }}