Spaces:
Running
Running
| class CustomHero extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| width: 100%; | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .hero { | |
| background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| right: -20%; | |
| width: 600px; | |
| height: 600px; | |
| background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, rgba(236, 72, 153, 0.05) 70%); | |
| border-radius: 50%; | |
| z-index: 0; | |
| } | |
| .floating-element { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-20px) rotate(5deg); } | |
| } | |
| .typewriter { | |
| overflow: hidden; | |
| border-right: 3px solid #a855f7; | |
| white-space: nowrap; | |
| animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #a855f7; } | |
| } | |
| </style> | |
| <section class="hero py-16 md:py-24"> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-gray-800 mb-6"> | |
| Discover Your | |
| <span class="block typewriter gradient-text">Signature Style</span> | |
| </h1> | |
| <p class="text-gray-600 text-lg mb-8 max-w-2xl"> | |
| Browse thousands of hairstyles, find your perfect match, and connect with expert stylists. | |
| Your next hair transformation starts here at CurlCraft Studio. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="/styles" class="btn-hover-effect px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-500 text-white font-semibold rounded-full hover:shadow-xl transition-all duration-300 text-center"> | |
| <div class="flex items-center justify-center"> | |
| <i data-feather="search" class="mr-2"></i> | |
| Explore Hairstyles | |
| </div> | |
| </a> | |
| <a href="/try-on" class="px-8 py-4 border-2 border-purple-500 text-purple-600 font-semibold rounded-full hover:bg-purple-50 transition-colors text-center"> | |
| <div class="flex items-center justify-center"> | |
| <i data-feather="camera" class="mr-2"></i> | |
| Virtual Try-On | |
| </div> | |
| </a> | |
| </div> | |
| <div class="mt-12 flex items-center space-x-8"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-purple-600">5K+</div> | |
| <div class="text-gray-600">Hairstyles</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-pink-500">1.2K+</div> | |
| <div class="text-gray-600">Expert Stylists</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-yellow-500">98%</div> | |
| <div class="text-gray-600">Satisfaction</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 relative"> | |
| <div class="relative"> | |
| <img src="http://static.photos/beauty/640x360/5" alt="Hero Hairstyle" class="rounded-3xl shadow-2xl w-full h-auto floating-element"> | |
| <div class="absolute -bottom-6 -left-6 bg-white p-6 rounded-2xl shadow-xl max-w-xs"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center mr-3"> | |
| <i data-feather="award" class="text-white w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Style of the Week</h4> | |
| <p class="text-sm text-gray-600">"Rose Gold Balayage"</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 text-sm">Featured by stylist <span class="font-semibold">Alex Morgan</span></p> | |
| </div> | |
| <div class="absolute -top-6 -right-6 bg-gradient-to-br from-yellow-400 to-orange-500 text-white p-4 rounded-2xl shadow-xl"> | |
| <div class="text-center"> | |
| <div class="text-2xl font-bold">4.9</div> | |
| <div class="flex justify-center"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| <div class="text-xs mt-1">Rating</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| `; | |
| // Initialize feather icons in shadow DOM | |
| setTimeout(() => { | |
| if (typeof feather !== 'undefined') { | |
| feather.replace(); | |
| } | |
| }, 100); | |
| } | |
| } | |
| customElements.define('custom-hero', CustomHero); |