[ { "category": "Shortening / Bottom Alterations", "services": [ "Pants (with seam)", "Pants (with bias tape)", "Pants (manual hem)", "Classic pants with cuff", "Silk pants with lining", "Sports pants (flat bottom)", "Sports pants (with lining)", "Sports pants (with zipper)", "Sports pants (with drawstring)", "Knitted pants (long or short)", "Pants with original hem", "Shorts / insulated pants", "Blouse / shirt (even hem)", "Blouse / shirt (with slit)", "T-shirt with slit", "Skirt or dress (basic, no lining)", "Skirt/dress (with lining or godet)", "Evening dress hem ('pico' finish)" ] }, { "category": "Zipper Replacement", "services": [ "Skirt / trousers (up to 20cm)", "Skirt / trousers with lining", "Jeans zipper (up to 20cm)", "Dress zipper (up to 20cm)", "Dress zipper (over 20cm)", "Dress with lining", "Knitwear zipper", "Jacket/coat zipper (up to 60cm)", "Jacket/coat zipper (over 60cm)", "Down jacket zipper (up to 60cm)", "Down jacket zipper (over 60cm)" ] }, { "category": "Sleeve Alterations", "services": [ "Shorten sleeve without cuff", "Shorten sleeve with cuff", "Men’s shirt with cuff and placket" ] }, { "category": "Leather Items", "services": [ "Skirt or pants (leather)", "Jacket / coat (leather)" ] }, { "category": "Fur Items", "services": [ "Basic fur item (e.g. vest)", "Flared fur item", "Fur sleeve (simple)", "Fur sleeve (with complex parts)" ] }, { "category": "Lining Replacement (fabric not included)", "services": [ "Skirt", "Women’s pants", "Dress", "Women’s jacket", "Men’s jacket (no pockets)", "Coat", "Inner pocket with lining", "Patch pocket", "Jeans-style pocket", "Sleeve lining (jacket/coat)" ] }, { "category": "Resizing & Tailoring to Fit", "services": [ "Pants/skirt side seam (no waist resize)", "Pants/skirt side seam (with waist resize)", "Blouse/shirt side seam (overlock or regular)", "Dress side seam (with or without hem)", "Evening dress resize (no lining)", "Lower shoulder line", "Shorten straps", "Narrow sleeve (without cuff)", "Narrow sleeve (with cuff)", "Trousers waist tightening", "Trousers waist + seam reshaping", "Jeans waist tightening", "Jeans waist (with inner seam)", "Narrow pants (1 seam)", "Narrow pants (2 seams)", "Narrow jeans (1 seam)", "Narrow jeans (2 seams)" ] }, { "category": "Hole & Patch Repair", "services": [ "Patch seam (up to 5cm)", "Patch seam (5–10cm)", "Overlock seam (per meter)", "Pocket repair (pants or jacket)", "Hem repair (pants, skirt)", "Elastic installation or replacement", "Fix tear in jacket (side seam)", "Repair coat (upper side)", "Reinforce lining or underarm" ] }, { "category": "Buttons, Hooks & Accessories", "services": [ "Sew button (metal)", "Sew button (plastic)", "Double button", "Replace button", "Install snap/hook", "Coat/fur hook (1 part)", "Label sewing (small/medium/large)", "Emblem / patch sewing", "Install waistband hook (pants, jeans)" ] }, { "category": "Curtain & Home Textile Sewing", "services": [ "Curtain stitching (per meter)", "Curtain cutting (per meter)", "Sew pillowcase", "Sew bedsheet", "Sew duvet cover" ] }, { "category": "Demontage / Component Replacement", "services": [ "Remove label or patch", "Install/reinstall buckles or hooks", "Replace old fastener", "Unpick and restitch darts" ] }, { "category": "Custom Garment Creation", "services": [ "Custom dress (based on your photo)", "Custom blouse or shirt", "Custom skirt", "Custom pants", "Custom jacket or coat", "Evening or wedding gown", "Children’s garment" ] }, { "category": "Supplies (Optional Add-Ons)", "services": [ "Small label", "Medium label", "Large label", "Zipper (20cm metal)", "Zipper (20cm invisible)", "Zipper (50cm invisible)", "Zipper (65cm two-way)", "Zipper (95cm two-way)" ] } ] - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Lacouturefixe
-emoji: 🐨
-colorFrom: indigo
-colorTo: pink
+title: lacouturefixe
+emoji: 🐳
+colorFrom: gray
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,1256 @@
-<!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>Mama Atelier - Premium Tailoring & Alterations</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#faf5ff',
+                            100: '#f3e8ff',
+                            200: '#e9d5ff',
+                            300: '#d8b4fe',
+                            400: '#c084fc',
+                            500: '#a855f7',
+                            600: '#9333ea',
+                            700: '#7e22ce',
+                            800: '#6b21a8',
+                            900: '#581c87',
+                        },
+                        secondary: {
+                            100: '#f0fdf4',
+                            200: '#dcfce7',
+                            300: '#bbf7d0',
+                            400: '#86efac',
+                            500: '#4ade80',
+                            600: '#22c55e',
+                            700: '#16a34a',
+                            800: '#15803d',
+                            900: '#166534',
+                        }
+                    },
+                    animation: {
+                        'fade-in': 'fadeIn 0.5s ease-in-out',
+                        'slide-up': 'slideUp 0.5s ease-out',
+                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                    },
+                    keyframes: {
+                        fadeIn: {
+                            '0%': { opacity: '0' },
+                            '100%': { opacity: '1' },
+                        },
+                        slideUp: {
+                            '0%': { transform: 'translateY(20px)', opacity: '0' },
+                            '100%': { transform: 'translateY(0)', opacity: '1' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .service-card:hover .service-icon {
+            transform: rotate(-5deg) scale(1.1);
+            box-shadow: 0 10px 25px -5px rgba(168, 85, 247, 0.4);
+        }
+        
+        .dropdown-menu {
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(10px);
+            transition: all 0.3s ease;
+        }
+        
+        .dropdown:hover .dropdown-menu {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
+        
+        .upload-area {
+            transition: all 0.3s;
+            background-size: 200% 200%;
+            background-image: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #e9d5ff 100%);
+            animation: gradient 6s ease infinite;
+        }
+        
+        @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        
+        .upload-area:hover {
+            background-image: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 50%, #d8b4fe 100%);
+        }
+        
+        .upload-area.dragover {
+            background-image: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 50%, #c084fc 100%);
+        }
+        
+        .image-preview {
+            transition: all 0.3s;
+        }
+        
+        .image-preview:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+        
+        .remove-image {
+            transition: all 0.2s;
+        }
+        
+        .remove-image:hover {
+            transform: scale(1.2);
+        }
+        
+        .nav-link {
+            position: relative;
+        }
+        
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            bottom: -2px;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background-color: #c084fc;
+            transition: width 0.3s ease;
+        }
+        
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        
+        .form-input:focus {
+            box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3);
+        }
+        
+        .btn-primary {
+            transition: all 0.3s;
+            background-image: linear-gradient(to right, #a855f7, #c084fc);
+        }
+        
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px -5px rgba(168, 85, 247, 0.5);
+        }
+        
+        .btn-secondary {
+            transition: all 0.3s;
+            background-image: linear-gradient(to right, #4ade80, #86efac);
+        }
+        
+        .btn-secondary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px -5px rgba(74, 222, 128, 0.5);
+        }
+        
+        .floating {
+            animation: floating 6s ease-in-out infinite;
+        }
+        
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-15px); }
+            100% { transform: translateY(0px); }
+        }
+    </style>
+</head>
+<body class="font-sans bg-gray-50 antialiased">
+    <!-- Header -->
+    <header class="bg-gradient-to-r from-primary-800 to-primary-700 text-white shadow-lg sticky top-0 z-50">
+        <div class="container mx-auto px-4 py-4">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-3">
+                    <div class="bg-white/20 p-2 rounded-full">
+                        <i class="fas fa-cut text-xl text-primary-200"></i>
+                    </div>
+                    <h1 class="text-2xl font-bold tracking-tight">Mama Atelier</h1>
+                </div>
+                
+                <nav class="hidden lg:flex items-center space-x-8">
+                    <a href="#services" class="nav-link text-white hover:text-primary-200 transition duration-300" data-i18n="services">Services</a>
+                    <a href="#how-it-works" class="nav-link text-white hover:text-primary-200 transition duration-300" data-i18n="how_it_works">How It Works</a>
+                    <a href="#testimonials" class="nav-link text-white hover:text-primary-200 transition duration-300">Testimonials</a>
+                    <a href="#contact" class="nav-link text-white hover:text-primary-200 transition duration-300" data-i18n="contact">Contact</a>
+                    
+                    <div class="flex items-center space-x-2 ml-6">
+                        <button class="language-switcher px-3 py-1 rounded-full hover:bg-primary-700 transition" data-lang="en">EN</button>
+                        <button class="language-switcher px-3 py-1 rounded-full hover:bg-primary-700 transition" data-lang="uk">UA</button>
+                    </div>
+                    
+                    <a href="#order-form" class="btn-primary px-6 py-2 rounded-full font-medium text-white ml-4">
+                        <span data-i18n="order_button">Order Now</span>
+                    </a>
+                </nav>
+                
+                <button class="lg:hidden text-xl p-2" id="mobileMenuButton">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+        </div>
+        
+        <!-- Mobile Menu -->
+        <div class="lg:hidden bg-primary-900 hidden" id="mobileMenu">
+            <div class="container mx-auto px-4 py-4 space-y-4">
+                <a href="#services" class="block py-2 hover:text-primary-200" data-i18n="services">Services</a>
+                <a href="#how-it-works" class="block py-2 hover:text-primary-200" data-i18n="how_it_works">How It Works</a>
+                <a href="#testimonials" class="block py-2 hover:text-primary-200">Testimonials</a>
+                <a href="#contact" class="block py-2 hover:text-primary-200" data-i18n="contact">Contact</a>
+                
+                <div class="flex space-x-4 pt-2">
+                    <button class="language-switcher px-3 py-1 rounded-full hover:bg-primary-700 transition" data-lang="en">EN</button>
+                    <button class="language-switcher px-3 py-1 rounded-full hover:bg-primary-700 transition" data-lang="uk">UA</button>
+                </div>
+                
+                <a href="#order-form" class="btn-primary block text-center px-6 py-2 rounded-full font-medium text-white mt-4">
+                    <span data-i18n="order_button">Order Now</span>
+                </a>
+            </div>
+        </div>
+    </header>
+
+    <!-- Hero Section -->
+    <section class="relative bg-gradient-to-br from-primary-900 to-primary-700 text-white overflow-hidden">
+        <div class="absolute inset-0 opacity-10">
+            <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1604671801908-6f0c6a092c05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')] bg-cover bg-center"></div>
+        </div>
+        
+        <div class="container mx-auto px-4 py-20 md:py-28 relative z-10">
+            <div class="max-w-4xl mx-auto text-center">
+                <div class="inline-flex items-center bg-white/10 backdrop-blur-sm px-4 py-1 rounded-full mb-6">
+                    <span class="text-primary-200 mr-2">✨</span>
+                    <span class="text-sm font-medium">Premium Tailoring Services</span>
+                </div>
+                
+                <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight" data-i18n="hero_title">
+                    <span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-200 to-white">Custom Clothing</span> & Expert Alterations
+                </h1>
+                
+                <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto opacity-90" data-i18n="hero_subtitle">
+                    Transform your wardrobe with our precision tailoring - from simple repairs to bespoke creations.
+                </p>
+                
+                <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6 mb-12">
+                    <div class="flex items-center bg-white/20 backdrop-blur-sm px-6 py-3 rounded-full">
+                        <div class="w-8 h-8 bg-white text-primary-700 rounded-full flex items-center justify-center font-bold mr-3">1</div>
+                        <span>Upload & Describe</span>
+                    </div>
+                    
+                    <div class="hidden md:block text-primary-300">
+                        <i class="fas fa-chevron-right"></i>
+                    </div>
+                    
+                    <div class="flex items-center bg-white/20 backdrop-blur-sm px-6 py-3 rounded-full">
+                        <div class="w-8 h-8 bg-white text-primary-700 rounded-full flex items-center justify-center font-bold mr-3">2</div>
+                        <span>Select Service</span>
+                    </div>
+                    
+                    <div class="hidden md:block text-primary-300">
+                        <i class="fas fa-chevron-right"></i>
+                    </div>
+                    
+                    <div class="flex items-center bg-white/20 backdrop-blur-sm px-6 py-3 rounded-full">
+                        <div class="w-8 h-8 bg-white text-primary-700 rounded-full flex items-center justify-center font-bold mr-3">3</div>
+                        <span>Get Quote</span>
+                    </div>
+                </div>
+                
+                <div class="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6">
+                    <a href="#order-form" class="btn-primary px-8 py-4 rounded-full font-bold text-white text-lg shadow-lg">
+                        <span data-i18n="order_button">Start Your Order</span>
+                    </a>
+                    
+                    <a href="#services" class="flex items-center px-6 py-4 rounded-full font-medium text-white hover:text-primary-200 group">
+                        <span>Explore Services</span>
+                        <i class="fas fa-chevron-right ml-2 group-hover:translate-x-1 transition-transform"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+        
+        <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-50 to-transparent"></div>
+    </section>
+
+    <!-- Stats Section -->
+    <section class="py-12 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+                <div class="bg-primary-50 p-6 rounded-xl text-center">
+                    <div class="text-4xl font-bold text-primary-700 mb-2">10+</div>
+                    <div class="text-gray-700">Years Experience</div>
+                </div>
+                
+                <div class="bg-primary-50 p-6 rounded-xl text-center">
+                    <div class="text-4xl font-bold text-primary-700 mb-2">5,000+</div>
+                    <div class="text-gray-700">Items Tailored</div>
+                </div>
+                
+                <div class="bg-primary-50 p-6 rounded-xl text-center">
+                    <div class="text-4xl font-bold text-primary-700 mb-2">98%</div>
+                    <div class="text-gray-700">Customer Satisfaction</div>
+                </div>
+                
+                <div class="bg-primary-50 p-6 rounded-xl text-center">
+                    <div class="text-4xl font-bold text-primary-700 mb-2">24h</div>
+                    <div class="text-gray-700">Fast Response</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- How It Works -->
+    <section id="how-it-works" class="py-20 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-primary-900" data-i18n="how_it_works_title">How It Works</h2>
+                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Our simple 3-step process makes getting your clothing tailored effortless and stress-free.</p>
+            </div>
+            
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 group">
+                    <div class="w-20 h-20 bg-primary-100 rounded-2xl flex items-center justify-center mb-6 mx-auto group-hover:bg-primary-200 transition-colors">
+                        <i class="fas fa-cloud-upload-alt text-3xl text-primary-700"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-center mb-3">1. Upload & Describe</h3>
+                    <p class="text-gray-600 text-center">Share photos of your item and tell us what you need - whether it's a repair, alteration, or custom creation.</p>
+                </div>
+                
+                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 group">
+                    <div class="w-20 h-20 bg-primary-100 rounded-2xl flex items-center justify-center mb-6 mx-auto group-hover:bg-primary-200 transition-colors">
+                        <i class="fas fa-list-ul text-3xl text-primary-700"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-center mb-3">2. Select Service</h3>
+                    <p class="text-gray-600 text-center">Choose from our wide range of tailoring services. We'll guide you to the best option for your needs.</p>
+                </div>
+                
+                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 group">
+                    <div class="w-20 h-20 bg-primary-100 rounded-2xl flex items-center justify-center mb-6 mx-auto group-hover:bg-primary-200 transition-colors">
+                        <i class="fas fa-comments text-3xl text-primary-700"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-center mb-3">3. Get Quote & Confirm</h3>
+                    <p class="text-gray-600 text-center">Receive a price estimate and timeline. Once approved, we'll begin crafting your perfect garment.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Services -->
+    <section id="services" class="py-20 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-primary-900">Our Tailoring Services</h2>
+                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Precision craftsmanship for every clothing need - from simple fixes to complete transformations.</p>
+            </div>
+            
+            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <!-- Service Card 1 -->
+                <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300">
+                    <div class="p-6">
+                        <div class="service-icon w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mb-4 transition-all duration-300">
+                            <i class="fas fa-ruler-combined text-2xl text-primary-700"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">Hemming & Length Adjustments</h3>
+                        <p class="text-gray-600 mb-4">Perfect the length of pants, skirts, dresses and more.</p>
+                        
+                        <div class="dropdown relative">
+                            <button class="text-primary-600 font-medium flex items-center">
+                                View options
+                                <i class="fas fa-chevron-down ml-2 text-sm"></i>
+                            </button>
+                            
+                            <div class="dropdown-menu absolute left-0 mt-2 w-full bg-white rounded-lg shadow-xl z-10 py-2 hidden">
+                                <ul class="space-y-2 px-4 py-2">
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Pants (with original hem)</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Jeans (with cuff)</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Dresses & skirts</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Formal wear</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Jackets & coats</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Service Card 2 -->
+                <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300">
+                    <div class="p-6">
+                        <div class="service-icon w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mb-4 transition-all duration-300">
+                            <i class="fas fa-zipper text-2xl text-primary-700"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">Zipper Replacement</h3>
+                        <p class="text-gray-600 mb-4">Fix or replace broken zippers on all types of garments.</p>
+                        
+                        <div class="dropdown relative">
+                            <button class="text-primary-600 font-medium flex items-center">
+                                View options
+                                <i class="fas fa-chevron-down ml-2 text-sm"></i>
+                            </button>
+                            
+                            <div class="dropdown-menu absolute left-0 mt-2 w-full bg-white rounded-lg shadow-xl z-10 py-2 hidden">
+                                <ul class="space-y-2 px-4 py-2">
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Pants & jeans</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Dresses (lined/unlined)</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Jackets & coats</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Specialty zippers</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Service Card 3 -->
+                <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300">
+                    <div class="p-6">
+                        <div class="service-icon w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mb-4 transition-all duration-300">
+                            <i class="fas fa-layer-group text-2xl text-primary-700"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">Lining Replacement</h3>
+                        <p class="text-gray-600 mb-4">Refresh the interior of your favorite garments.</p>
+                        
+                        <div class="dropdown relative">
+                            <button class="text-primary-600 font-medium flex items-center">
+                                View options
+                                <i class="fas fa-chevron-down ml-2 text-sm"></i>
+                            </button>
+                            
+                            <div class="dropdown-menu absolute left-0 mt-2 w-full bg-white rounded-lg shadow-xl z-10 py-2 hidden">
+                                <ul class="space-y-2 px-4 py-2">
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Jackets & coats</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Dresses & skirts</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Pants with lining</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Pocket repairs</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Service Card 4 -->
+                <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300">
+                    <div class="p-6">
+                        <div class="service-icon w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mb-4 transition-all duration-300">
+                            <i class="fas fa-tshirt text-2xl text-primary-700"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">Sleeve Alterations</h3>
+                        <p class="text-gray-600 mb-4">Adjust sleeve length for the perfect fit.</p>
+                        
+                        <div class="dropdown relative">
+                            <button class="text-primary-600 font-medium flex items-center">
+                                View options
+                                <i class="fas fa-chevron-down ml-2 text-sm"></i>
+                            </button>
+                            
+                            <div class="dropdown-menu absolute left-0 mt-2 w-full bg-white rounded-lg shadow-xl z-10 py-2 hidden">
+                                <ul class="space-y-2 px-4 py-2">
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Shirts without cuffs</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Shirts with cuffs</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Lined jackets</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Formal wear</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Service Card 5 -->
+                <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300">
+                    <div class="p-6">
+                        <div class="service-icon w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mb-4 transition-all duration-300">
+                            <i class="fas fa-user-edit text-2xl text-primary-700"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">Fitting & Resizing</h3>
+                        <p class="text-gray-600 mb-4">Tailor garments to your exact measurements.</p>
+                        
+                        <div class="dropdown relative">
+                            <button class="text-primary-600 font-medium flex items-center">
+                                View options
+                                <i class="fas fa-chevron-down ml-2 text-sm"></i>
+                            </button>
+                            
+                            <div class="dropdown-menu absolute left-0 mt-2 w-full bg-white rounded-lg shadow-xl z-10 py-2 hidden">
+                                <ul class="space-y-2 px-4 py-2">
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Taking in/letting out</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Waist adjustments</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Shoulder alterations</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Complete resizing</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Service Card 6 -->
+                <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300">
+                    <div class="p-6">
+                        <div class="service-icon w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mb-4 transition-all duration-300">
+                            <i class="fas fa-paw text-2xl text-primary-700"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">Leather & Fur Work</h3>
+                        <p class="text-gray-600 mb-4">Specialized care for delicate materials.</p>
+                        
+                        <div class="dropdown relative">
+                            <button class="text-primary-600 font-medium flex items-center">
+                                View options
+                                <i class="fas fa-chevron-down ml-2 text-sm"></i>
+                            </button>
+                            
+                            <div class="dropdown-menu absolute left-0 mt-2 w-full bg-white rounded-lg shadow-xl z-10 py-2 hidden">
+                                <ul class="space-y-2 px-4 py-2">
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Lining replacement</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Zipper repairs</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Tear repairs</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Custom alterations</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Service Card 7 -->
+                <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300">
+                    <div class="p-6">
+                        <div class="service-icon w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mb-4 transition-all duration-300">
+                            <i class="fas fa-magic text-2xl text-primary-700"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">Custom Clothing</h3>
+                        <p class="text-gray-600 mb-4">Bespoke creations from your vision.</p>
+                        
+                        <div class="dropdown relative">
+                            <button class="text-primary-600 font-medium flex items-center">
+                                View options
+                                <i class="fas fa-chevron-down ml-2 text-sm"></i>
+                            </button>
+                            
+                            <div class="dropdown-menu absolute left-0 mt-2 w-full bg-white rounded-lg shadow-xl z-10 py-2 hidden">
+                                <ul class="space-y-2 px-4 py-2">
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">From existing photos</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">From your fabric</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Complete redesign</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Special occasion wear</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Service Card 8 -->
+                <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300">
+                    <div class="p-6">
+                        <div class="service-icon w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center mb-4 transition-all duration-300">
+                            <i class="fas fa-seedling text-2xl text-primary-700"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-2">Small Repairs</h3>
+                        <p class="text-gray-600 mb-4">Quick fixes to extend garment life.</p>
+                        
+                        <div class="dropdown relative">
+                            <button class="text-primary-600 font-medium flex items-center">
+                                View options
+                                <i class="fas fa-chevron-down ml-2 text-sm"></i>
+                            </button>
+                            
+                            <div class="dropdown-menu absolute left-0 mt-2 w-full bg-white rounded-lg shadow-xl z-10 py-2 hidden">
+                                <ul class="space-y-2 px-4 py-2">
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Button replacement</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Hook & eye repair</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Seam repair</li>
+                                    <li class="hover:bg-primary-50 p-2 rounded-lg">Tear mending</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="text-center mt-12">
+                <a href="#order-form" class="btn-primary inline-flex items-center px-8 py-3 rounded-full font-bold text-white text-lg">
+                    <span>Get Started</span>
+                    <i class="fas fa-arrow-right ml-2"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Testimonials -->
+    <section id="testimonials" class="py-20 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-primary-900">What Our Customers Say</h2>
+                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Don't just take our word for it - hear from our satisfied clients.</p>
+            </div>
+            
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Testimonial 1 -->
+                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center text-primary-700 font-bold text-xl mr-4">A</div>
+                        <div>
+                            <h4 class="font-bold">Anna K.</h4>
+                            <div class="flex text-yellow-400">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-gray-600">"Mama Atelier transformed my grandmother's wedding dress into a modern masterpiece for my own wedding. Their attention to detail was incredible!"</p>
+                </div>
+                
+                <!-- Testimonial 2 -->
+                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center text-primary-700 font-bold text-xl mr-4">M</div>
+                        <div>
+                            <h4 class="font-bold">Marko P.</h4>
+                            <div class="flex text-yellow-400">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-gray-600">"I had a favorite leather jacket with a broken zipper that no one else would touch. Mama Atelier fixed it perfectly and it's like new again!"</p>
+                </div>
+                
+                <!-- Testimonial 3 -->
+                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all duration-300">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center text-primary-700 font-bold text-xl mr-4">O</div>
+                        <div>
+                            <h4 class="font-bold">Olena S.</h4>
+                            <div class="flex text-yellow-400">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-gray-600">"The custom dress they made for my daughter's graduation was stunning. The fit was perfect and the craftsmanship was exceptional."</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Order Form -->
+    <section id="order-form" class="py-20 bg-gradient-to-br from-primary-50 to-white">
+        <div class="container mx-auto px-4 max-w-4xl">
+            <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
+                <div class="bg-primary-700 text-white p-8 text-center">
+                    <h2 class="text-3xl font-bold mb-2">Start Your Tailoring Order</h2>
+                    <p class="opacity-90">Complete the form below and we'll get back to you with a quote within 24 hours</p>
+                </div>
+                
+                <form id="tailoringForm" class="p-8 space-y-8">
+                    <!-- Upload Section -->
+                    <div class="space-y-4">
+                        <h3 class="text-xl font-semibold text-primary-800">1. Upload photo(s) of your clothing or idea</h3>
+                        <div id="uploadArea" class="upload-area border-2 border-dashed border-primary-300 rounded-xl p-8 text-center cursor-pointer">
+                            <input type="file" id="fileInput" class="hidden" accept="image/*" multiple>
+                            <div class="flex flex-col items-center justify-center">
+                                <i class="fas fa-cloud-upload-alt text-4xl text-primary-500 mb-4"></i>
+                                <p class="text-gray-700 mb-2 font-medium">Drag & drop your photos here or click to browse</p>
+                                <p class="text-sm text-gray-500">Upload multiple images (max 5)</p>
+                            </div>
+                        </div>
+                        <div id="imagePreviews" class="grid grid-cols-2 md:grid-cols-5 gap-4 mt-4"></div>
+                    </div>
+                    
+                    <!-- Description -->
+                    <div class="space-y-4">
+                        <h3 class="text-xl font-semibold text-primary-800">2. Describe what you need</h3>
+                        <textarea id="description" rows="4" class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="Example: I need to shorten my jeans by 2 inches, keeping the original hem. They're dark blue denim with a straight cut."></textarea>
+                    </div>
+                    
+                    <!-- Service Selection -->
+                    <div class="space-y-4">
+                        <h3 class="text-xl font-semibold text-primary-800">3. Select Service</h3>
+                        <select id="service" class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
+                            <option value="" disabled selected>Choose a service category</option>
+                            <optgroup label="Shortening/Bottom Adjustments">
+                                <option value="pants_with_stitch">Pants (with original hem)</option>
+                                <option value="pants_with_tape">Pants (with waistband tape)</option>
+                                <option value="pants_with_lining">Pants (with lining)</option>
+                                <option value="pants_with_cuff">Classic with cuff</option>
+                                <option value="sport_pants">Sport pants</option>
+                                <option value="jeans">Jeans / lined pants</option>
+                                <option value="dress_top">Dress / blouse / t-shirt</option>
+                                <option value="jacket_coat">Jacket / coat / evening dress</option>
+                            </optgroup>
+                            <optgroup label="Zipper Replacement">
+                                <option value="skirt_pants_zipper">Skirt, pants, jeans</option>
+                                <option value="dress_zipper">Dress (with/without lining)</option>
+                                <option value="jacket_zipper">Jacket, down jacket (with/without complex elements)</option>
+                            </optgroup>
+                            <optgroup label="Lining Replacement">
+                                <option value="lining_skirt_pants">Skirt / pants / coat / jacket</option>
+                                <option value="pockets">Pockets (sewn-in, patch, jeans)</option>
+                            </optgroup>
+                            <optgroup label="Sleeve Alterations">
+                                <option value="sleeve_no_cuff">Without cuff</option>
+                                <option value="sleeve_with_cuff">With cuff</option>
+                                <option value="sleeve_with_lining">With lining</option>
+                            </optgroup>
+                            <optgroup label="Fitting & Resizing">
+                                <option value="narrow_pants">Narrow pants, shirts, dresses, skirts</option>
+                                <option value="straps_waist">Shorten straps, adjust waist, take in</option>
+                            </optgroup>
+                            <optgroup label="Leather/Fur Work">
+                                <option value="fur_lining">Lining replacement</option>
+                                <option value="fur_repairs">Adjustments, tears, zippers</option>
+                            </optgroup>
+                            <optgroup label="Custom Clothing">
+                                <option value="new_from_photo">Create new item from photo</option>
+                                <option value="restore_from_fabric">Restore favorite item from fabric</option>
+                            </optgroup>
+                            <optgroup label="Small Repairs">
+                                <option value="buttons_hooks">Sew on button / hook / label</option>
+                                <option value="seam_repair">Seam / tear / ripped edge repair</option>
+                            </optgroup>
+                        </select>
+                    </div>
+                    
+                    <!-- Price Estimate -->
+                    <div class="space-y-4">
+                        <h3 class="text-xl font-semibold text-primary-800">4. Would you like to get a quote before confirming the order?</h3>
+                        <div class="flex space-x-6">
+                            <label class="inline-flex items-center">
+                                <input type="radio" name="quote" value="yes" class="h-5 w-5 text-primary-600" checked>
+                                <span class="ml-2">Yes, please send me a quote first</span>
+                            </label>
+                            <label class="inline-flex items-center">
+                                <input type="radio" name="quote" value="no" class="h-5 w-5 text-primary-600">
+                                <span class="ml-2">No, I'm ready to proceed</span>
+                            </label>
+                        </div>
+                        <div id="quoteInfo" class="bg-primary-50 p-4 rounded-lg border border-primary-100">
+                            <p class="text-primary-800">Prices vary based on service complexity. Most basic alterations start from $15. We'll provide exact pricing after reviewing your photos.</p>
+                        </div>
+                    </div>
+                    
+                    <!-- Contact Info -->
+                    <div class="space-y-4">
+                        <h3 class="text-xl font-semibold text-primary-800">5. Your Contact Information</h3>
+                        <div class="grid md:grid-cols-2 gap-6">
+                            <div>
+                                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
+                                <input type="text" id="name" class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg" required>
+                            </div>
+                            <div>
+                                <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
+                                <input type="tel" id="phone" class="form-input w-full px-4 py-3 border border-gray-300 rounded-lg" required>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">Preferred way of communication:</label>
+                            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+                                <label class="inline-flex items-center px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 cursor-pointer transition">
+                                    <input type="radio" name="communication" value="telegram" class="h-5 w-5 text-primary-600">
+                                    <i class="fab fa-telegram ml-2 mr-1 text-blue-500"></i>
+                                    <span class="ml-1">Telegram</span>
+                                </label>
+                                <label class="inline-flex items-center px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 cursor-pointer transition">
+                                    <input type="radio" name="communication" value="viber" class="h-5 w-5 text-primary-600">
+                                    <i class="fab fa-viber ml-2 mr-1 text-purple-600"></i>
+                                    <span class="ml-1">Viber</span>
+                                </label>
+                                <label class="inline-flex items-center px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 cursor-pointer transition">
+                                    <input type="radio" name="communication" value="whatsapp" class="h-5 w-5 text-primary-600">
+                                    <i class="fab fa-whatsapp ml-2 mr-1 text-green-500"></i>
+                                    <span class="ml-1">WhatsApp</span>
+                                </label>
+                                <label class="inline-flex items-center px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 cursor-pointer transition">
+                                    <input type="radio" name="communication" value="email" class="h-5 w-5 text-primary-600">
+                                    <i class="fas fa-envelope ml-2 mr-1 text-gray-600"></i>
+                                    <span class="ml-1">Email</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="pt-4">
+                        <button type="submit" class="btn-primary w-full py-4 px-6 rounded-lg font-bold text-white text-lg shadow-lg">
+                            Submit Your Request
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </section>
+
+    <!-- FAQ -->
+    <section class="py-20 bg-white">
+        <div class="container mx-auto px-4 max-w-4xl">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-primary-900">Frequently Asked Questions</h2>
+                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Answers to common questions about our tailoring services.</p>
+            </div>
+            
+            <div class="space-y-4">
+                <!-- FAQ Item 1 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden">
+                    <button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
+                        <span class="text-lg font-medium">How long does a typical alteration take?</span>
+                        <i class="fas fa-chevron-down text-primary-600 transition-transform"></i>
+                    </button>
+                    <div class="faq-content px-6 pb-6 hidden">
+                        <p class="text-gray-600">Most standard alterations (hemming, simple repairs) are completed within 3-5 business days. More complex work (resizing, custom creations) typically takes 1-2 weeks. We'll provide an exact timeline when we review your request.</p>
+                    </div>
+                </div>
+                
+                <!-- FAQ Item 2 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden">
+                    <button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
+                        <span class="text-lg font-medium">Do you offer rush services?</span>
+                        <i class="fas fa-chevron-down text-primary-600 transition-transform"></i>
+                    </button>
+                    <div class="faq-content px-6 pb-6 hidden">
+                        <p class="text-gray-600">Yes, we offer expedited services for an additional fee. Rush service (24-48 hour turnaround) adds 50% to the base price. Same-day service (when available) doubles the base price. Contact us to discuss rush options for your specific needs.</p>
+                    </div>
+                </div>
+                
+                <!-- FAQ Item 3 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden">
+                    <button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
+                        <span class="text-lg font-medium">Can you work with delicate fabrics?</span>
+                        <i class="fas fa-chevron-down text-primary-600 transition-transform"></i>
+                    </button>
+                    <div class="faq-content px-6 pb-6 hidden">
+                        <p class="text-gray-600">Absolutely! Our tailors have extensive experience with delicate fabrics including silk, chiffon, lace, leather, and fur. We use specialized techniques and equipment to handle these materials with care. Please note that delicate fabrics may require additional time and cost.</p>
+                    </div>
+                </div>
+                
+                <!-- FAQ Item 4 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden">
+                    <button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
+                        <span class="text-lg font-medium">What's your return policy?</span>
+                        <i class="fas fa-chevron-down text-primary-600 transition-transform"></i>
+                    </button>
+                    <div class="faq-content px-6 pb-6 hidden">
+                        <p class="text-gray-600">We stand behind our work with a 100% satisfaction guarantee. If you're not completely happy with the results, we'll make it right at no additional cost. For custom creations, we require a 50% deposit which is refundable if we can't meet your expectations after revisions.</p>
+                    </div>
+                </div>
+                
+                <!-- FAQ Item 5 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden">
+                    <button class="faq-toggle w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition">
+                        <span class="text-lg font-medium">Do you offer pickup and delivery?</span>
+                        <i class="fas fa-chevron-down text-primary-600 transition-transform"></i>
+                    </button>
+                    <div class="faq-content px-6 pb-6 hidden">
+                        <p class="text-gray-600">Yes, we offer local pickup and delivery within Kyiv for a small fee. We also provide shipping services for clients outside the city. Shipping costs depend on the size and destination of your package. Contact us for specific delivery options and pricing.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="py-20 bg-gradient-to-r from-primary-700 to-primary-600 text-white">
+        <div class="container mx-auto px-4 text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Wardrobe?</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">Get started with your tailoring project today. It's quick, easy, and we're here to help every step of the way.</p>
+            <div class="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6">
+                <a href="#order-form" class="btn-secondary px-8 py-4 rounded-full font-bold text-white text-lg shadow-lg">
+                    Start Your Order
+                </a>
+                <a href="#contact" class="flex items-center px-6 py-4 rounded-full font-medium text-white hover:text-primary-200 group">
+                    <span>Contact Us</span>
+                    <i class="fas fa-chevron-right ml-2 group-hover:translate-x-1 transition-transform"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Success Modal -->
+    <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-2xl p-8 max-w-md mx-4 text-center animate-fade-in">
+            <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                <i class="fas fa-check text-green-500 text-3xl"></i>
+            </div>
+            <h3 class="text-2xl font-bold text-gray-800 mb-4">Thank You!</h3>
+            <p class="text-gray-600 mb-6">We've received your request and will get back to you within 24 hours with a quote and next steps.</p>
+            <button id="closeModal" class="btn-primary px-8 py-3 rounded-full font-medium text-white">
+                Close
+            </button>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer id="contact" class="bg-gray-900 text-white pt-16 pb-8">
+        <div class="container mx-auto px-4">
+            <div class="grid md:grid-cols-4 gap-8">
+                <div class="md:col-span-2">
+                    <h3 class="text-xl font-bold mb-4 flex items-center">
+                        <div class="bg-primary-600 p-2 rounded-full mr-3">
+                            <i class="fas fa-cut text-white"></i>
+                        </div>
+                        Mama Atelier
+                    </h3>
+                    <p class="text-gray-400 mb-6">Premium tailoring services with a personal touch. Transforming your wardrobe one stitch at a time.</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary-600 transition">
+                            <i class="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary-600 transition">
+                            <i class="fab fa-instagram"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary-600 transition">
+                            <i class="fab fa-telegram-plane"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-primary-600 transition">
+                            <i class="fab fa-viber"></i>
+                        </a>
+                    </div>
+                </div>
+                
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Services</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-primary-400 transition">Hemming & Adjustments</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-primary-400 transition">Zipper Replacement</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-primary-400 transition">Lining Replacement</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-primary-400 transition">Fitting & Resizing</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-primary-400 transition">Custom Clothing</a></li>
+                    </ul>
+                </div>
+                
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Contact</h3>
+                    <ul class="space-y-3">
+                        <li class="flex items-start">
+                            <i class="fas fa-map-marker-alt text-primary-400 mt-1 mr-3"></i>
+                            <span class="text-gray-400">123 Tailor Street<br>Kyiv, Ukraine 01001</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-phone-alt text-primary-400 mr-3"></i>
+                            <span class="text-gray-400">+380 12 345 6789</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-envelope text-primary-400 mr-3"></i>
+                            <span class="text-gray-400">hello@mamaatelier.com</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-clock text-primary-400 mr-3"></i>
+                            <span class="text-gray-400">Mon-Fri: 9am-7pm<br>Sat: 10am-4pm</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            
+            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-500 mb-4 md:mb-0">&copy; 2023 Mama Atelier. All rights reserved.</p>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-500 hover:text-primary-400 transition">Privacy Policy</a>
+                    <a href="#" class="text-gray-500 hover:text-primary-400 transition">Terms of Service</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Mobile menu toggle
+        const mobileMenuButton = document.getElementById('mobileMenuButton');
+        const mobileMenu = document.getElementById('mobileMenu');
+        
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.toggle('hidden');
+        });
+        
+        // FAQ accordion
+        document.querySelectorAll('.faq-toggle').forEach(button => {
+            button.addEventListener('click', () => {
+                const content = button.nextElementSibling;
+                const icon = button.querySelector('i');
+                
+                content.classList.toggle('hidden');
+                icon.classList.toggle('rotate-180');
+            });
+        });
+        
+        // File upload functionality
+        const fileInput = document.getElementById('fileInput');
+        const uploadArea = document.getElementById('uploadArea');
+        const imagePreviews = document.getElementById('imagePreviews');
+        let files = [];
+        
+        // Click on upload area
+        uploadArea.addEventListener('click', () => {
+            fileInput.click();
+        });
+        
+        // Drag and drop functionality
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('dragover');
+        });
+        
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('dragover');
+        });
+        
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('dragover');
+            
+            if (e.dataTransfer.files.length) {
+                handleFiles(e.dataTransfer.files);
+            }
+        });
+        
+        // File input change
+        fileInput.addEventListener('change', () => {
+            if (fileInput.files.length) {
+                handleFiles(fileInput.files);
+            }
+        });
+        
+        function handleFiles(newFiles) {
+            // Check if adding these files would exceed the limit
+            if (files.length + newFiles.length > 5) {
+                alert('You can upload a maximum of 5 images');
+                return;
+            }
+            
+            // Add new files to our files array
+            for (let i = 0; i < newFiles.length; i++) {
+                if (files.length < 5) { // Ensure we don't exceed 5
+                    files.push(newFiles[i]);
+                }
+            }
+            
+            // Update previews
+            updatePreviews();
+        }
+        
+        function updatePreviews() {
+            // Clear existing previews
+            imagePreviews.innerHTML = '';
+            
+            if (files.length === 0) {
+                return;
+            }
+            
+            // Create preview for each file
+            files.forEach((file, index) => {
+                const reader = new FileReader();
+                
+                reader.onload = (e) => {
+                    const previewDiv = document.createElement('div');
+                    previewDiv.className = 'image-preview relative';
+                    
+                    const img = document.createElement('img');
+                    img.src = e.target.result;
+                    img.className = 'w-full h-32 object-cover rounded-lg';
+                    
+                    const removeBtn = document.createElement('div');
+                    removeBtn.className = 'remove-image bg-white hover:bg-red-50';
+                    removeBtn.innerHTML = '<i class="fas fa-times text-red-500"></i>';
+                    removeBtn.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        files.splice(index, 1);
+                        updatePreviews();
+                    });
+                    
+                    previewDiv.appendChild(img);
+                    previewDiv.appendChild(removeBtn);
+                    imagePreviews.appendChild(previewDiv);
+                };
+                
+                reader.readAsDataURL(file);
+            });
+        }
+        
+        // Form submission
+        const form = document.getElementById('tailoringForm');
+        const successModal = document.getElementById('successModal');
+        const closeModal = document.getElementById('closeModal');
+        
+        form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            
+            // Here you would typically send the form data to a server
+            // For this demo, we'll just show the success modal
+            
+            // Reset form (except for the service selection)
+            const selectedService = document.getElementById('service').value;
+            form.reset();
+            document.getElementById('service').value = selectedService;
+            files = [];
+            updatePreviews();
+            
+            // Show success modal
+            successModal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        });
+        
+        closeModal.addEventListener('click', () => {
+            successModal.classList.add('hidden');
+            document.body.style.overflow = 'auto';
+        });
+        
+        // Close modal when clicking outside
+        successModal.addEventListener('click', (e) => {
+            if (e.target === successModal) {
+                successModal.classList.add('hidden');
+                document.body.style.overflow = 'auto';
+            }
+        });
+        
+        // Show/hide quote info based on selection
+        const quoteRadios = document.querySelectorAll('input[name="quote"]');
+        const quoteInfo = document.getElementById('quoteInfo');
+        
+        quoteRadios.forEach(radio => {
+            radio.addEventListener('change', () => {
+                if (radio.value === 'yes') {
+                    quoteInfo.style.display = 'block';
+                } else {
+                    quoteInfo.style.display = 'none';
+                }
+            });
+        });
+        
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                
+                const targetId = this.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+                
+                if (targetElement) {
+                    window.scrollTo({
+                        top: targetElement.offsetTop - 100,
+                        behavior: 'smooth'
+                    });
+                    
+                    // Close mobile menu if open
+                    if (!mobileMenu.classList.contains('hidden')) {
+                        mobileMenu.classList.add('hidden');
+                    }
+                }
+            });
+        });
+        
+        // Language switching functionality
+        const translations = {
+            en: {
+                services: "Services",
+                how_it_works: "How It Works",
+                contact: "Contact",
+                hero_title: "Custom Clothing & Expert Alterations",
+                hero_subtitle: "Transform your wardrobe with our precision tailoring - from simple repairs to bespoke creations.",
+                order_button: "Order Now",
+                how_it_works_title: "How It Works",
+                upload_step: "1. Upload & Describe",
+                select_step: "2. Select Service",
+                quote_step: "3. Get Quote & Confirm",
+                services_title: "Our Tailoring Services",
+                order_title: "Start Your Tailoring Order",
+                upload_title: "1. Upload photo(s) of your clothing or idea",
+                describe_title: "2. Describe what you need",
+                service_title: "3. Select Service",
+                quote_title: "4. Would you like to get a quote before confirming the order?",
+                contact_title: "5. Your Contact Information",
+                name_label: "Full Name",
+                phone_label: "Phone Number",
+                communication_label: "Preferred way of communication:",
+                submit_button: "Submit Your Request",
+                thank_you: "Thank You!",
+                success_message: "We've received your request and will get back to you within 24 hours with a quote and next steps.",
+                close_button: "Close"
+            },
+            uk: {
+                services: "Послуги",
+                how_it_works: "Як це працює",
+                contact: "Контакти",
+                hero_title: "Індивідуальний одяг та професійні переробки",
+                hero_subtitle: "Перетворіть свій гардероб за допомогою нашої точної крою - від простих ремонтів до індивідуальних творінь.",
+                order_button: "Замовити",
+                how_it_works_title: "Як це працює",
+                upload_step: "1. Завантажте та опишіть",
+                select_step: "2. Виберіть послугу",
+                quote_step: "3. Отримайте ціну та підтвердіть",
+                services_title: "Наші кравецькі послуги",
+                order_title: "Почати кравецьке замовлення",
+                upload_title: "1. Завантажте фото вашого одягу або ідеї",
+                describe_title: "2. Опишіть, що вам потрібно",
+                service_title: "3. Виберіть послугу",
+                quote_title: "4. Хочете отримати ціну перед підтвердженням замовлення?",
+                contact_title: "5. Ваші контактні дані",
+                name_label: "Повне ім'я",
+                phone_label: "Номер телефону",
+                communication_label: "Бажаний спосіб зв'язку:",
+                submit_button: "Надіслати запит",
+                thank_you: "Дякуємо!",
+                success_message: "Ми отримали ваш запит і зв'яжемося з вами протягом 24 годин з ціною та подальшими кроками.",
+                close_button: "Закрити"
+            }
+        };
+
+        // Language switching
+        document.querySelectorAll('.language-switcher').forEach(button => {
+            button.addEventListener('click', function() {
+                const lang = this.dataset.lang;
+                document.documentElement.lang = lang;
+                
+                // Update all translatable elements
+                Object.keys(translations[lang]).forEach(key => {
+                    document.querySelectorAll(`[data-i18n="${key}"]`).forEach(el => {
+                        el.textContent = translations[lang][key];
+                    });
+                });
+                
+                // Update form labels and placeholders
+                if (document.querySelector('label[for="name"]')) {
+                    document.querySelector('label[for="name"]').textContent = translations[lang].name_label;
+                    document.querySelector('label[for="phone"]').textContent = translations[lang].phone_label;
+                    document.querySelector('textarea#description').placeholder = translations[lang].describe_title;
+                }
+                
+                // Update modal content
+                if (document.querySelector('#successModal h3')) {
+                    document.querySelector('#successModal h3').textContent = translations[lang].thank_you;
+                    document.querySelector('#successModal p').textContent = translations[lang].success_message;
+                    document.querySelector('#closeModal').textContent = translations[lang].close_button;
+                }
+            });
+        });
+
+        // Set default language to English
+        document.documentElement.lang = 'en';
+        
+        // Animate elements on scroll
+        const animateOnScroll = () => {
+            const elements = document.querySelectorAll('.service-card, .faq-toggle, .dropdown');
+            
+            elements.forEach(element => {
+                const elementPosition = element.getBoundingClientRect().top;
+                const screenPosition = window.innerHeight / 1.2;
+                
+                if (elementPosition < screenPosition) {
+                    element.classList.add('animate-slide-up');
+                }
+            });
+        };
+        
+        window.addEventListener('scroll', animateOnScroll);
+        window.addEventListener('load', animateOnScroll);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=web3district/lacouturefixe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>