From 7690d594473ba389ac06ebd4079986faac84a3d5 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Tue, 3 Jun 2025 19:12:15 +0200
Subject: [PATCH] updates

---
 src/components/Home.tsx | 78 +++++++++--------------------------------
 1 file changed, 16 insertions(+), 62 deletions(-)

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index bca758a..4b9e890 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -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 }}