New hairstyle website

README.md

@@ -1,10 +1,13 @@
 ---
-title: Curlcraft Studio
-emoji: 🐠
+title: CurlCraft Studio ✂️
 colorFrom: pink
-colorTo: indigo
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,132 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    font-family: 'Poppins', sans-serif;
+                }
+                .footer-top {
+                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                }
+                .newsletter-input {
+                    border: 2px solid transparent;
+                    background: rgba(255, 255, 255, 0.1);
+                    transition: all 0.3s;
+                }
+                .newsletter-input:focus {
+                    outline: none;
+                    border-color: rgba(255, 255, 255, 0.5);
+                    background: rgba(255, 255, 255, 0.15);
+                }
+                .social-icon {
+                    transition: transform 0.3s, color 0.3s;
+                }
+                .social-icon:hover {
+                    transform: translateY(-3px);
+                    color: #fbb6ce;
+                }
+            </style>
+            <footer class="text-gray-600">
+                <div class="footer-top text-white py-12">
+                    <div class="container mx-auto px-4">
+                        <div class="flex flex-col md:flex-row items-center justify-between">
+                            <div class="mb-8 md:mb-0 md:w-1/2">
+                                <h3 class="text-3xl font-bold mb-4">Stay Stylish!</h3>
+                                <p class="text-white/90 mb-6">Get weekly hair inspiration, styling tips, and exclusive offers.</p>
+                                <form id="newsletter-form" class="flex flex-col sm:flex-row gap-3">
+                                    <input type="email" placeholder="Your email address" class="newsletter-input px-4 py-3 rounded-full text-white placeholder-white/70 flex-grow" required>
+                                    <button type="submit" class="px-6 py-3 bg-white text-purple-700 font-semibold rounded-full hover:bg-gray-100 transition-colors">
+                                        Subscribe
+                                    </button>
+                                </form>
+                            </div>
+                            <div class="md:w-1/3">
+                                <h4 class="text-xl font-bold mb-6">Follow Our Craft</h4>
+                                <div class="flex space-x-6">
+                                    <a href="#" class="social-icon text-white hover:text-pink-200">
+                                        <i data-feather="instagram" class="w-6 h-6"></i>
+                                    </a>
+                                    <a href="#" class="social-icon text-white hover:text-pink-200">
+                                        <i data-feather="facebook" class="w-6 h-6"></i>
+                                    </a>
+                                    <a href="#" class="social-icon text-white hover:text-pink-200">
+                                        <i data-feather="twitter" class="w-6 h-6"></i>
+                                    </a>
+                                    <a href="#" class="social-icon text-white hover:text-pink-200">
+                                        <i data-feather="youtube" class="w-6 h-6"></i>
+                                    </a>
+                                    <a href="#" class="social-icon text-white hover:text-pink-200">
+                                        <i data-feather="pinterest" class="w-6 h-6"></i>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="bg-gray-800 text-gray-300 py-8">
+                    <div class="container mx-auto px-4">
+                        <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 mb-4">
+                                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
+                                        <i data-feather="scissors" class="text-white w-4 h-4"></i>
+                                    </div>
+                                    <span class="text-xl font-bold text-white">CurlCraft<span class="gradient-text">Studio</span></span>
+                                </div>
+                                <p class="text-sm">Crafting confidence, one hairstyle at a time.</p>
+                            </div>
+                            
+                            <div class="flex flex-wrap justify-center gap-8 mb-6 md:mb-0">
+                                <div>
+                                    <h5 class="font-bold text-white mb-3">Explore</h5>
+                                    <ul class="space-y-2 text-sm">
+                                        <li><a href="/styles" class="hover:text-white transition-colors">Hairstyles</a></li>
+                                        <li><a href="/stylists" class="hover:text-white transition-colors">Find Stylists</a></li>
+                                        <li><a href="/try-on" class="hover:text-white transition-colors">Virtual Try-On</a></li>
+                                        <li><a href="/products" class="hover:text-white transition-colors">Products</a></li>
+                                    </ul>
+                                </div>
+                                <div>
+                                    <h5 class="font-bold text-white mb-3">Company</h5>
+                                    <ul class="space-y-2 text-sm">
+                                        <li><a href="/about" class="hover:text-white transition-colors">About Us</a></li>
+                                        <li><a href="/careers" class="hover:text-white transition-colors">Careers</a></li>
+                                        <li><a href="/press" class="hover:text-white transition-colors">Press</a></li>
+                                        <li><a href="/contact" class="hover:text-white transition-colors">Contact</a></li>
+                                    </ul>
+                                </div>
+                                <div>
+                                    <h5 class="font-bold text-white mb-3">Support</h5>
+                                    <ul class="space-y-2 text-sm">
+                                        <li><a href="/help" class="hover:text-white transition-colors">Help Center</a></li>
+                                        <li><a href="/faq" class="hover:text-white transition-colors">FAQ</a></li>
+                                        <li><a href="/privacy" class="hover:text-white transition-colors">Privacy Policy</a></li>
+                                        <li><a href="/terms" class="hover:text-white transition-colors">Terms of Service</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="border-t border-gray-700 mt-8 pt-8 text-center text-sm">
+                            <p>&copy; ${new Date().getFullYear()} CurlCraft Studio. All rights reserved. ✂️</p>
+                            <p class="mt-2">Made with <i data-feather="heart" class="w-3 h-3 inline text-red-400"></i> for hair enthusiasts everywhere.</p>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        `;
+        
+        // Initialize feather icons in shadow DOM
+        setTimeout(() => {
+            if (typeof feather !== 'undefined') {
+                feather.replace();
+            }
+        }, 100);
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/hairstyle-card.js

@@ -0,0 +1,117 @@
+class HairstyleCard extends HTMLElement {
+    static get observedAttributes() {
+        return ['title', 'image', 'category', 'difficulty', 'description'];
+    }
+    
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+    
+    connectedCallback() {
+        this.render();
+    }
+    
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this.render();
+        }
+    }
+    
+    render() {
+        const title = this.getAttribute('title') || 'Chic Bob';
+        const image = this.getAttribute('image') || 'http://static.photos/beauty/640x360/1';
+        const category = this.getAttribute('category') || 'short';
+        const difficulty = this.getAttribute('difficulty') || 'medium';
+        const description = this.getAttribute('description') || 'A modern take on the classic bob with textured ends.';
+        
+        const difficultyColor = {
+            'easy': 'bg-green-100 text-green-800',
+            'medium': 'bg-yellow-100 text-yellow-800',
+            'hard': 'bg-red-100 text-red-800'
+        }[difficulty] || 'bg-gray-100 text-gray-800';
+        
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    transition: all 0.3s ease;
+                }
+                .card {
+                    transform: translateY(0);
+                    transition: transform 0.3s, box-shadow 0.3s;
+                }
+                .card:hover {
+                    transform: translateY(-8px);
+                }
+                .category-badge {
+                    transition: background-color 0.3s;
+                }
+                .save-btn:hover i {
+                    animation: heartBeat 0.5s;
+                }
+                @keyframes heartBeat {
+                    0%, 100% { transform: scale(1); }
+                    50% { transform: scale(1.2); }
+                }
+            </style>
+            <div class="card bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl">
+                <div class="relative overflow-hidden">
+                    <img src="${image}" alt="${title}" class="w-full h-48 object-cover transition-transform duration-500 hover:scale-105">
+                    <button class="save-btn absolute top-4 right-4 bg-white/90 hover:bg-white w-10 h-10 rounded-full flex items-center justify-center shadow-md">
+                        <i data-feather="heart" class="w-5 h-5 text-gray-700"></i>
+                    </button>
+                    <div class="absolute bottom-4 left-4">
+                        <span class="category-badge px-3 py-1 rounded-full text-xs font-semibold ${this.getCategoryColor(category)}">
+                            ${this.formatCategory(category)}
+                        </span>
+                    </div>
+                </div>
+                <div class="p-6">
+                    <div class="flex justify-between items-start mb-3">
+                        <h4 class="text-xl font-bold text-gray-800">${title}</h4>
+                        <span class="px-3 py-1 rounded-full text-xs font-semibold ${difficultyColor}">
+                            ${difficulty.charAt(0).toUpperCase() + difficulty.slice(1)}
+                        </span>
+                    </div>
+                    <p class="text-gray-600 mb-4">${description}</p>
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center text-gray-500 text-sm">
+                            <i data-feather="clock" class="w-4 h-4 mr-1"></i>
+                            <span>45-60 min</span>
+                        </div>
+                        <a href="/styles/${category}/${title.toLowerCase().replace(/\s+/g, '-')}" class="text-purple-600 hover:text-purple-800 font-semibold text-sm flex items-center">
+                            View Details
+                            <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // Initialize feather icons in shadow DOM
+        setTimeout(() => {
+            if (typeof feather !== 'undefined') {
+                feather.replace();
+            }
+        }, 100);
+    }
+    
+    getCategoryColor(category) {
+        const colors = {
+            'short': 'bg-blue-100 text-blue-800',
+            'medium': 'bg-purple-100 text-purple-800',
+            'long': 'bg-pink-100 text-pink-800',
+            'curly': 'bg-orange-100 text-orange-800',
+            'color': 'bg-indigo-100 text-indigo-800',
+            'updo': 'bg-teal-100 text-teal-800'
+        };
+        return colors[category] || 'bg-gray-100 text-gray-800';
+    }
+    
+    formatCategory(category) {
+        return category.charAt(0).toUpperCase() + category.slice(1);
+    }
+}
+
+customElements.define('hairstyle-card', HairstyleCard);

components/hero.js

@@ -0,0 +1,135 @@
+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);

components/navbar.js

@@ -0,0 +1,97 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    position: sticky;
+                    top: 0;
+                    z-index: 50;
+                    font-family: 'Poppins', sans-serif;
+                }
+                .navbar {
+                    background: rgba(255, 255, 255, 0.95);
+                    backdrop-filter: blur(10px);
+                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+                }
+                .nav-link {
+                    position: relative;
+                    transition: color 0.3s;
+                }
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -5px;
+                    left: 0;
+                    width: 0;
+                    height: 2px;
+                    background: linear-gradient(to right, #a855f7, #ec4899);
+                    transition: width 0.3s;
+                }
+                .nav-link:hover::after {
+                    width: 100%;
+                }
+                .mobile-menu {
+                    animation: slideDown 0.3s ease-out;
+                }
+                @keyframes slideDown {
+                    from { opacity: 0; transform: translateY(-10px); }
+                    to { opacity: 1; transform: translateY(0); }
+                }
+            </style>
+            <nav class="navbar border-b border-gray-100">
+                <div class="container mx-auto px-4 py-4">
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center">
+                            <a href="/" class="flex items-center space-x-2">
+                                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
+                                    <i data-feather="scissors" class="text-white w-5 h-5"></i>
+                                </div>
+                                <span class="text-2xl font-bold text-gray-800">CurlCraft<span class="gradient-text">Studio</span></span>
+                            </a>
+                        </div>
+                        
+                        <div class="hidden md:flex items-center space-x-8">
+                            <a href="/" class="nav-link text-gray-700 hover:text-purple-600 font-medium">Home</a>
+                            <a href="/styles" class="nav-link text-gray-700 hover:text-purple-600 font-medium">Hairstyles</a>
+                            <a href="/stylists" class="nav-link text-gray-700 hover:text-purple-600 font-medium">Stylists</a>
+                            <a href="/try-on" class="nav-link text-gray-700 hover:text-purple-600 font-medium">Virtual Try-On</a>
+                            <a href="/blog" class="nav-link text-gray-700 hover:text-purple-600 font-medium">Blog</a>
+                            <a href="/book" class="btn-hover-effect px-6 py-2 bg-gradient-to-r from-purple-600 to-pink-500 text-white font-semibold rounded-full hover:shadow-lg transition-all duration-300">
+                                Book Appointment
+                            </a>
+                        </div>
+                        
+                        <button data-menu-toggle class="md:hidden text-gray-700 hover:text-purple-600">
+                            <i data-feather="menu" class="w-6 h-6"></i>
+                        </button>
+                    </div>
+                    
+                    <div id="mobile-menu" class="hidden md:hidden mobile-menu mt-4 pb-4">
+                        <div class="flex flex-col space-y-4">
+                            <a href="/" class="text-gray-700 hover:text-purple-600 font-medium py-2">Home</a>
+                            <a href="/styles" class="text-gray-700 hover:text-purple-600 font-medium py-2">Hairstyles</a>
+                            <a href="/stylists" class="text-gray-700 hover:text-purple-600 font-medium py-2">Stylists</a>
+                            <a href="/try-on" class="text-gray-700 hover:text-purple-600 font-medium py-2">Virtual Try-On</a>
+                            <a href="/blog" class="text-gray-700 hover:text-purple-600 font-medium py-2">Blog</a>
+                            <a href="/book" class="px-6 py-2 bg-gradient-to-r from-purple-600 to-pink-500 text-white font-semibold rounded-full text-center">
+                                Book Appointment
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        `;
+        
+        // Initialize feather icons in shadow DOM
+        setTimeout(() => {
+            if (typeof feather !== 'undefined') {
+                feather.replace();
+            }
+        }, 100);
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

components/trending-section.js

@@ -0,0 +1,135 @@
+class TrendingSection extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    font-family: 'Poppins', sans-serif;
+                }
+                .filter-btn {
+                    transition: all 0.3s;
+                }
+                .filter-btn:hover {
+                    transform: translateY(-2px);
+                }
+                .card-container {
+                    transition: opacity 0.3s, transform 0.3s;
+                }
+            </style>
+            <div>
+                <div class="flex flex-wrap justify-center gap-4 mb-10">
+                    <button data-filter="all" class="filter-btn px-6 py-2 bg-purple-600 text-white font-semibold rounded-full">
+                        All Styles
+                    </button>
+                    <button data-filter="short" class="filter-btn px-6 py-2 bg-gray-200 text-gray-700 font-semibold rounded-full hover:bg-gray-300">
+                        Short Hair
+                    </button>
+                    <button data-filter="medium" class="filter-btn px-6 py-2 bg-gray-200 text-gray-700 font-semibold rounded-full hover:bg-gray-300">
+                        Medium Length
+                    </button>
+                    <button data-filter="long" class="filter-btn px-6 py-2 bg-gray-200 text-gray-700 font-semibold rounded-full hover:bg-gray-300">
+                        Long Hair
+                    </button>
+                    <button data-filter="curly" class="filter-btn px-6 py-2 bg-gray-200 text-gray-700 font-semibold rounded-full hover:bg-gray-300">
+                        Curly & Textured
+                    </button>
+                    <button data-filter="color" class="filter-btn px-6 py-2 bg-gray-200 text-gray-700 font-semibold rounded-full hover:bg-gray-300">
+                        Bold Colors
+                    </button>
+                </div>
+                
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+                    <hairstyle-card 
+                        title="Modern Shag" 
+                        image="http://static.photos/beauty/640x360/2" 
+                        category="medium" 
+                        difficulty="medium"
+                        description="Layered shag with curtain bangs for effortless texture."
+                        data-category="medium">
+                    </hairstyle-card>
+                    
+                    <hairstyle-card 
+                        title="Platinum Pixie" 
+                        image="http://static.photos/beauty/640x360/3" 
+                        category="short" 
+                        difficulty="hard"
+                        description="Edgy platinum blonde pixie with undercut details."
+                        data-category="short">
+                    </hairstyle-card>
+                    
+                    <hairstyle-card 
+                        title="Mermaid Waves" 
+                        image="http://static.photos/beauty/640x360/4" 
+                        category="long" 
+                        difficulty="easy"
+                        description="Beachy waves with subtle rose gold highlights."
+                        data-category="long">
+                    </hairstyle-card>
+                    
+                    <hairstyle-card 
+                        title="Curly Afro" 
+                        image="http://static.photos/beauty/640x360/6" 
+                        category="curly" 
+                        difficulty="medium"
+                        description="Full, defined curls with shape and volume."
+                        data-category="curly">
+                    </hairstyle-card>
+                    
+                    <hairstyle-card 
+                        title="Pastel Bob" 
+                        image="http://static.photos/beauty/640x360/8" 
+                        category="short" 
+                        difficulty="hard"
+                        description="Short bob with lavender pastel ombre effect."
+                        data-category="color">
+                    </hairstyle-card>
+                    
+                    <hairstyle-card 
+                        title="Braided Updo" 
+                        image="http://static.photos/beauty/640x360/9" 
+                        category="updo" 
+                        difficulty="hard"
+                        description="Elegant braided updo for special occasions."
+                        data-category="updo">
+                    </hairstyle-card>
+                    
+                    <hairstyle-card 
+                        title="Bronde Balayage" 
+                        image="http://static.photos/beauty/640x360/10" 
+                        category="medium" 
+                        difficulty="medium"
+                        description="Natural-looking blend of brunette and blonde."
+                        data-category="medium">
+                    </hairstyle-card>
+                    
+                    <hairstyle-card 
+                        title="Bold Red Lob" 
+                        image="http://static.photos/beauty/640x360/11" 
+                        category="medium" 
+                        difficulty="medium"
+                        description="Vibrant red long bob with blunt cut ends."
+                        data-category="color">
+                    </hairstyle-card>
+                </div>
+                
+                <div class="text-center mt-12">
+                    <a href="/styles" class="inline-flex items-center px-8 py-3 border-2 border-purple-500 text-purple-600 font-semibold rounded-full hover:bg-purple-50 transition-colors">
+                        View All Hairstyles
+                        <i data-feather="arrow-right" class="ml-2"></i>
+                    </a>
+                </div>
+            </div>
+        `;
+        
+        // Initialize feather icons in shadow DOM
+        setTimeout(() => {
+            if (typeof feather !== 'undefined') {
+                feather.replace();
+            }
+        }, 100);
+    }
+}
+
+customElements.define('custom-trending-section', TrendingSection);

index.html

@@ -1,19 +1,122 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CurlCraft Studio ✂️ | Discover Your Next Look</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/hairstyle-card.js"></script>
+    <script src="components/hero.js"></script>
+    <script src="components/trending-section.js"></script>
+</head>
+<body class="bg-gradient-to-br from-gray-50 to-pink-50 min-h-screen font-sans">
+    <custom-navbar></custom-navbar>
+    <custom-hero></custom-hero>
+
+    <main class="container mx-auto px-4 py-12">
+        <section class="mb-16">
+            <div class="text-center mb-10">
+                <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Trending Styles This Season</h2>
+                <p class="text-gray-600 text-lg max-w-2xl mx-auto">From chic bobs to bold colors, find inspiration from our curated collection.</p>
+            </div>
+            <custom-trending-section></custom-trending-section>
+        </section>
+
+        <section class="mb-16">
+            <div class="flex flex-col md:flex-row items-center justify-between gap-10">
+                <div class="md:w-1/2">
+                    <img src="http://static.photos/beauty/1024x576/7" alt="Hair Salon Stylist" class="rounded-3xl shadow-2xl w-full h-auto object-cover">
+                </div>
+                <div class="md:w-1/2">
+                    <h3 class="text-3xl font-bold text-gray-800 mb-6">Virtual Try-On Experience</h3>
+                    <p class="text-gray-700 mb-6 text-lg">Not sure if bangs are for you? Use our AI-powered virtual try-on tool to see how different hairstyles look on you before making the chop!</p>
+                    <a href="/try-on" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-500 text-white font-semibold rounded-full hover:shadow-lg transition-all duration-300">
+                        Try It Now
+                        <i data-feather="arrow-right" class="ml-2"></i>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+        <section class="py-12">
+            <div class="text-center mb-10">
+                <h2 class="text-4xl font-bold text-gray-800 mb-4">Find Your Perfect Stylist</h2>
+                <p class="text-gray-600 text-lg max-w-2xl mx-auto">Browse profiles, read reviews, and book appointments with top-rated hair artists in your area.</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-shadow duration-300">
+                    <div class="w-20 h-20 rounded-full mx-auto mb-4 overflow-hidden border-4 border-pink-200">
+                        <img src="http://static.photos/people/200x200/101" alt="Stylist Alex" class="w-full h-full object-cover">
+                    </div>
+                    <h4 class="text-xl font-bold text-center text-gray-800 mb-2">Alex Morgan</h4>
+                    <p class="text-gray-600 text-center mb-4">Specializes in balayage & curly cuts</p>
+                    <div class="flex justify-center text-yellow-400 mb-4">
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                    </div>
+                    <a href="/stylist/alex" class="block text-center text-purple-600 font-semibold hover:text-purple-800">View Profile</a>
+                </div>
+                <div class="bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-shadow duration-300">
+                    <div class="w-20 h-20 rounded-full mx-auto mb-4 overflow-hidden border-4 border-pink-200">
+                        <img src="http://static.photos/people/200x200/102" alt="Stylist Jamie" class="w-full h-full object-cover">
+                    </div>
+                    <h4 class="text-xl font-bold text-center text-gray-800 mb-2">Jamie Chen</h4>
+                    <p class="text-gray-600 text-center mb-4">Expert in vintage & retro styles</p>
+                    <div class="flex justify-center text-yellow-400 mb-4">
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                    </div>
+                    <a href="/stylist/jamie" class="block text-center text-purple-600 font-semibold hover:text-purple-800">View Profile</a>
+                </div>
+                <div class="bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-shadow duration-300">
+                    <div class="w-20 h-20 rounded-full mx-auto mb-4 overflow-hidden border-4 border-pink-200">
+                        <img src="http://static.photos/people/200x200/103" alt="Stylist Taylor" class="w-full h-full object-cover">
+                    </div>
+                    <h4 class="text-xl font-bold text-center text-gray-800 mb-2">Taylor Rivers</h4>
+                    <p class="text-gray-600 text-center mb-4">Master of bold colors & undercuts</p>
+                    <div class="flex justify-center text-yellow-400 mb-4">
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                        <i data-feather="star" class="w-5 h-5 fill-current"></i>
+                    </div>
+                    <a href="/stylist/taylor" class="block text-center text-purple-600 font-semibold hover:text-purple-800">View Profile</a>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Simple script to handle newsletter signup
+        document.addEventListener('DOMContentLoaded', function() {
+            const newsletterForm = document.querySelector('custom-footer')?.shadowRoot?.querySelector('#newsletter-form');
+            if (newsletterForm) {
+                newsletterForm.addEventListener('submit', function(e) {
+                    e.preventDefault();
+                    const email = this.querySelector('input[type="email"]').value;
+                    alert(`Thank you! You've subscribed with: ${email}. Welcome to the CurlCraft community!`);
+                    this.reset();
+                });
+            }
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,119 @@
+// Main JavaScript for CurlCraft Studio
+
+// Initialize Feather Icons
+document.addEventListener('DOMContentLoaded', function() {
+    // Feather icons replacement
+    if (typeof feather !== 'undefined') {
+        feather.replace();
+    }
+
+    // Mobile menu toggle for navbar component
+    document.addEventListener('click', function(event) {
+        if (event.target.closest('[data-menu-toggle]')) {
+            const navbar = document.querySelector('custom-navbar');
+            if (navbar) {
+                const shadowRoot = navbar.shadowRoot;
+                const mobileMenu = shadowRoot.querySelector('#mobile-menu');
+                if (mobileMenu) {
+                    mobileMenu.classList.toggle('hidden');
+                }
+            }
+        }
+    });
+
+    // Hairstyle filter functionality
+    const filterButtons = document.querySelectorAll('[data-filter]');
+    const hairstyleCards = document.querySelectorAll('hairstyle-card');
+
+    filterButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const filter = this.getAttribute('data-filter');
+            
+            // Update active button
+            filterButtons.forEach(btn => {
+                btn.classList.remove('bg-purple-600', 'text-white');
+                btn.classList.add('bg-gray-200', 'text-gray-700');
+            });
+            this.classList.remove('bg-gray-200', 'text-gray-700');
+            this.classList.add('bg-purple-600', 'text-white');
+
+            // Filter cards
+            hairstyleCards.forEach(card => {
+                const category = card.getAttribute('data-category');
+                if (filter === 'all' || category === filter) {
+                    card.style.display = 'block';
+                    setTimeout(() => {
+                        card.style.opacity = '1';
+                        card.style.transform = 'translateY(0)';
+                    }, 10);
+                } else {
+                    card.style.opacity = '0';
+                    card.style.transform = 'translateY(20px)';
+                    setTimeout(() => {
+                        card.style.display = 'none';
+                    }, 300);
+                }
+            });
+        });
+    });
+
+    // Load hairstyles from API
+    async function loadHairstyles() {
+        try {
+            // Using a public API for demonstration
+            const response = await fetch('https://api.unsplash.com/search/photos?query=hairstyle&per_page=12&client_id=YOUR_UNSPLASH_ACCESS_KEY');
+            const data = await response.json();
+            
+            // In a real implementation, you would update the hairstyle cards with actual data
+            console.log('Hairstyles loaded:', data);
+            
+            // Update trending section if it exists
+            const trendingSection = document.querySelector('custom-trending-section');
+            if (trendingSection && data.results) {
+                // You can implement actual data binding here
+            }
+        } catch (error) {
+            console.log('Using placeholder data due to API limit');
+            // Fallback to placeholder images
+        }
+    }
+
+    // Load hairstyles on page load
+    loadHairstyles();
+
+    // Smooth scroll for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const targetId = this.getAttribute('href');
+            if (targetId === '#') return;
+            
+            const targetElement = document.querySelector(targetId);
+            if (targetElement) {
+                window.scrollTo({
+                    top: targetElement.offsetTop - 80,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+
+    // Newsletter form handling
+    const newsletterForms = document.querySelectorAll('form[data-newsletter]');
+    newsletterForms.forEach(form => {
+        form.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const email = this.querySelector('input[type="email"]').value;
+            
+            if (email && email.includes('@')) {
+                // Simulate API call
+                setTimeout(() => {
+                    alert(`Thank you for subscribing with ${email}! You'll receive style inspiration weekly.`);
+                    this.reset();
+                }, 300);
+            } else {
+                alert('Please enter a valid email address.');
+            }
+        });
+    });
+});

style.css

@@ -1,28 +1,77 @@
+/* Custom styles for CurlCraft Studio */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@700;800&display=swap');
+
+html {
+    scroll-behavior: smooth;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Poppins', sans-serif;
+}
+
+h1, h2, h3, h4, .font-display {
+    font-family: 'Playfair Display', serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(to bottom, #a855f7, #ec4899);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(to bottom, #9333ea, #db2777);
+}
+
+/* Animation for hairstyle cards */
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.floating-card {
+    animation: float 5s ease-in-out infinite;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Gradient text */
+.gradient-text {
+    background: linear-gradient(90deg, #a855f7, #ec4899, #f59e0b);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Custom button hover effect */
+.btn-hover-effect {
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.btn-hover-effect::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+    transition: left 0.7s;
+    z-index: -1;
 }
+
+.btn-hover-effect:hover::before {
+    left: 100%;
+}