Neon colours, and include this logo

index.html

@@ -11,13 +11,29 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
+        @keyframes neonGlow {
+            0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff00de, 0 0 20px #ff00de; }
+            50% { text-shadow: 0 0 10px #fff, 0 0 15px #ff4d00, 0 0 20px #ff4d00, 0 0 25px #ff4d00; }
+        }
         .hero-gradient {
-            background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(244, 63, 94, 0.05) 100%);
+            background: linear-gradient(135deg, rgba(255, 0, 222, 0.1) 0%, rgba(255, 77, 0, 0.1) 100%);
         }
         .section-gradient {
-            background: linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0%, rgba(244, 63, 94, 0.02) 100%);
+            background: linear-gradient(135deg, rgba(255, 0, 222, 0.05) 0%, rgba(255, 77, 0, 0.05) 100%);
+        }
+        .neon-text {
+            animation: neonGlow 3s ease-in-out infinite alternate;
+            color: #fff;
+        }
+        .neon-pink {
+            color: #ff00de;
+            text-shadow: 0 0 5px #ff00de;
         }
-        .price-card {
+        .neon-orange {
+            color: #ff4d00;
+            text-shadow: 0 0 5px #ff4d00;
+        }
+.price-card {
             transition: transform 0.3s ease;
         }
         .price-card:hover {
@@ -35,11 +51,9 @@
         <div class="container mx-auto px-6 py-4">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-2">
-                    <div class="w-10 h-10 bg-amber-500 rounded-full flex items-center justify-center">
-                        <i data-feather="heart" class="text-white"></i>
-                    </div>
-                    <span class="text-xl font-bold text-amber-600">Piglet's Healing Hands</span>
-                </div>
+                    <img src="piglet-logo.png" alt="Piglet Logo" class="h-10">
+                    <span class="text-xl font-bold neon-pink">Piglet's Healing Hands</span>
+</div>
                 
                 <div class="hidden md:flex space-x-8">
                     <a href="#home" class="text-gray-600 hover:text-amber-500 transition-colors">Home</a>
@@ -63,18 +77,18 @@
         <div class="container mx-auto px-6">
             <div class="flex flex-col md:flex-row items-center justify-between">
                 <div class="md:w-1/2 mb-10 md:mb-0">
-                    <h1 class="text-5xl md:text-6xl font-bold mb-6 text-gray-800">
-                        Unleash Your <span class="text-amber-500">Sensual Energy</span> with Piglet
-                    </h1>
+                    <h1 class="text-5xl md:text-6xl font-bold mb-6 neon-text">
+                        Unleash Your <span class="neon-orange">Sensual Energy</span> with Piglet
+</h1>
                     <p class="text-xl text-gray-600 mb-8 leading-relaxed">
                         Professional tantric and therapeutic massage experiences designed to awaken your senses, melt away tension, and reconnect you with your body's deepest pleasures.
                     </p>
 <div class="flex space-x-4">
-                        <a href="#booking" class="bg-amber-500 hover:bg-amber-600 text-white px-8 py-4 rounded-full font-semibold transition-colors">
-                            Book a Session
+                        <a href="#booking" class="bg-gradient-to-r from-pink-500 to-orange-500 hover:from-pink-600 hover:to-orange-600 text-white px-8 py-4 rounded-full font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg shadow-pink-500/30">
+Book a Session
                         </a>
-                        <a href="#services" class="border-2 border-rose-500 text-rose-500 hover:bg-rose-50 px-8 py-4 rounded-full font-semibold transition-colors">
-                            Learn More
+                        <a href="#services" class="border-2 border-cyan-400 text-white hover:text-cyan-300 px-8 py-4 rounded-full font-semibold transition-all hover:shadow-lg hover:shadow-cyan-500/20 neon-text">
+Learn More
                         </a>
                     </div>
                 </div>
@@ -83,8 +97,8 @@
                         <div class="w-80 h-80 bg-amber-100 rounded-full flex items-center justify-center overflow-hidden shadow-2xl">
                             <img src="http://static.photos/massage/640x360/1" alt="Piglet the Masseur" class="w-full h-full object-cover" style="filter: brightness(0.9);">
                         </div>
-<div class="absolute -bottom-4 -right-4 bg-rose-500 text-white px-6 py-3 rounded-full shadow-lg">
-                            <span class="font-bold">5+ Years Experience</span>
+                        <div class="absolute -bottom-4 -right-4 bg-gradient-to-r from-cyan-400 to-blue-500 text-white px-6 py-3 rounded-full shadow-lg neon-text">
+<span class="font-bold">5+ Years Experience</span>
                         </div>
                     </div>
                 </div>
@@ -501,23 +515,21 @@
             <div class="flex flex-col md:flex-row justify-between items-center">
                 <div class="mb-6 md:mb-0">
                     <div class="flex items-center space-x-2">
-                        <div class="w-10 h-10 bg-amber-500 rounded-full flex items-center justify-center">
-                            <i data-feather="heart" class="text-white"></i>
-                        </div>
-                        <span class="text-xl font-bold">Piglet's Healing Hands</span>
-                    </div>
+                <img src="piglet-logo.png" alt="Piglet Logo" class="h-10">
+                <span class="text-xl font-bold neon-pink">Piglet's Healing Hands</span>
+</div>
                     <p class="mt-4 text-gray-400">Professional Therapeutic Massage Services</p>
                 </div>
                 
                 <div class="flex space-x-6">
-                    <a href="#" class="text-gray-400 hover:text-amber-400 transition-colors">
-                        <i data-feather="facebook"></i>
+                    <a href="#" class="text-gray-400 hover:text-cyan-300 transition-colors hover:drop-shadow-[0_0_8px_rgba(34,211,238,0.6)]">
+<i data-feather="facebook"></i>
                     </a>
-                    <a href="#" class="text-gray-400 hover:text-amber-400 transition-colors">
-                        <i data-feather="instagram"></i>
+                    <a href="#" class="text-gray-400 hover:text-pink-400 transition-colors hover:drop-shadow-[0_0_8px_rgba(236,72,153,0.6)]">
+<i data-feather="instagram"></i>
                     </a>
-                    <a href="#" class="text-gray-400 hover:text-amber-400 transition-colors">
-                        <i data-feather="twitter"></i>
+                    <a href="#" class="text-gray-400 hover:text-orange-400 transition-colors hover:drop-shadow-[0_0_8px_rgba(249,115,22,0.6)]">
+<i data-feather="twitter"></i>
                     </a>
                 </div>
             </div>