Design a cinematic, luxurious landing page for Viann'k Mansur, a high-fashion couture brand founded by Vianney de Aquino, specializing in quinceañera dresses. The visual style is soft, editorial, and feminine, with an elevated, modern magazine feel. Begin with a full-screen loader: a solid Oxford gray overlay (#3B3B3B) that fades progressively to transparent as a percentage counter in soft pink (#FADADD) increases from 0% to 100%. At the center, the bold white sans-serif logo “VKM” blinks rapidly in a subtle neon-style flicker. Behind the overlay, already visible through fading transparency, is the hero image. The hero background shows a young woman spinning in a dreamy quinceañera gown in an open field at sunset. The sky is golden and cinematic, petals float gently in the air, and the atmosphere is magical. Once 100% is reached, the overlay vanishes completely, the percentage disappears, and VKM stays centered as part of the main layout. Below VKM, a round black button reads "COUTURE" in clean white uppercase text. In the top-left corner appears the refined serif text: "Viann'k Mansur", representing the main couture brand. The top of the page includes a minimalist navigation bar with the following menu items: INICIO – Returns to the main hero section with the model spinning and brand introduction. TU VESTIDO – A personalized portal where clients can check the status of their gown: progress, payments, delivery estimates. SHOWROOM – Page to schedule private appointments with the Viann'k Mansur team; includes calendar, contact form, and visit options. TIENDA – A visual catalog of available gowns, arranged by collection and style. Each card includes a model photo, name, and category tag. MARKETPLACE – A curated directory of event vendors: photographers, salons, decorators, DJs, etc. Includes provider registration with manual approval. PRESS – A visual press archive showing magazine covers, interviews, and mentions in fashion media. ENTRAR / REGISTRARSE – Secure portal for clients and vendors to access accounts, view orders, and manage their listings. The visual identity is a blend of pastel pink, ivory, white, and black, with soft gold accents. Typography includes refined serif fonts and ultra-clean sans-serifs. The page is editorial, refined, cinematic, and highly feminine — evoking the essence of a couture fashion house translated into a digital experience. - Follow Up Deployment

index.html

@@ -12,6 +12,12 @@
             font-family: 'Montserrat', sans-serif;
             overflow-x: hidden;
             scroll-behavior: smooth;
+            color: #333;
+            background-color: #FFF9FA;
+        }
+        
+        .bg-pink-50 {
+            background-color: #FFF9FA;
         }
         
         .serif-font {
@@ -19,7 +25,7 @@
         }
         
         .hero-section {
-            background-image: url('https://images.unsplash.com/photo-1539109136881-3be0616acf4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80');
+            background-image: url('https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80');
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
@@ -100,11 +106,12 @@
                     </button>
                 </div>
                 <div class="hidden md:flex space-x-8">
-                    <a href="#" class="nav-link uppercase text-sm tracking-widest">LUVÉN</a>
-                    <a href="#" class="nav-link uppercase text-sm tracking-widest">COUTUMARS</a>
-                    <a href="#" class="nav-link uppercase text-sm tracking-widest">DAPOIR</a>
-                    <a href="#" class="nav-link uppercase text-sm tracking-widest">SEEK</a>
-                    <a href="#" class="nav-link uppercase text-sm tracking-widest">CITOURÉ</a>
+                    <a href="#" class="nav-link uppercase text-sm tracking-widest">INICIO</a>
+                    <a href="#" class="nav-link uppercase text-sm tracking-widest">TU VESTIDO</a>
+                    <a href="#" class="nav-link uppercase text-sm tracking-widest">SHOWROOM</a>
+                    <a href="#" class="nav-link uppercase text-sm tracking-widest">TIENDA</a>
+                    <a href="#" class="nav-link uppercase text-sm tracking-widest">MARKETPLACE</a>
+                    <a href="#" class="nav-link uppercase text-sm tracking-widest">PRESS</a>
                 </div>
             </div>
             <div>
@@ -124,6 +131,11 @@
         </div>
     </nav>
     
+    <!-- Brand Name -->
+    <div class="fixed left-8 top-8 z-40 hidden md:block">
+        <div class="serif-font text-xl">Viann'k Mansur</div>
+    </div>
+
     <!-- Side Logo -->
     <div class="side-logo-container fixed left-8 top-1/2 transform -translate-y-1/2 z-40 hidden md:block">
         <div class="side-logo uppercase text-xs tracking-widest">VIANN'K MANSUR</div>
@@ -135,6 +147,12 @@
         </div>
     </div>
     
+    <!-- Loading Overlay -->
+    <div id="loading-overlay" class="fixed inset-0 bg-[#3B3B3B] z-50 flex flex-col items-center justify-center transition-opacity duration-1000">
+        <div id="percentage" class="text-[#FADADD] text-4xl mb-4">0%</div>
+        <div id="logo" class="text-white font-bold text-6xl tracking-tighter opacity-0">VKM</div>
+    </div>
+
     <!-- Hero Section -->
     <section class="hero-section relative">
         <div class="hero-overlay absolute inset-0"></div>
@@ -144,9 +162,8 @@
         
         <div class="container mx-auto h-full flex flex-col justify-center items-center relative z-20 px-6">
             <div class="text-center">
-                <h1 class="serif-font text-6xl md:text-8xl font-light text-white mb-2">VIINSSUR</h1>
-                <p class="serif-font italic text-2xl md:text-3xl text-white mb-12">Monouré</p>
-                <button class="bg-black text-white px-8 py-3 rounded-full uppercase tracking-widest hover:bg-gray-800 transition duration-300">COUTURE</button>
+                <h1 id="main-logo" class="font-bold text-6xl md:text-8xl text-white mb-2 hidden">VKM</h1>
+                <button class="bg-black text-white px-8 py-3 rounded-full uppercase tracking-widest hover:bg-gray-800 transition duration-300 mt-12">COUTURE</button>
             </div>
         </div>
     </section>
@@ -350,8 +367,36 @@
             updatePosition();
         }
         
-        // Initialize petals when page loads
-        window.addEventListener('load', createPetals);
+        // Loading animation
+        window.addEventListener('load', function() {
+            let percentage = 0;
+            const overlay = document.getElementById('loading-overlay');
+            const percentElement = document.getElementById('percentage');
+            const logo = document.getElementById('logo');
+            const mainLogo = document.getElementById('main-logo');
+            
+            // Logo flicker effect
+            const flickerInterval = setInterval(() => {
+                logo.style.opacity = logo.style.opacity === '0' ? '1' : '0';
+            }, 100);
+
+            // Percentage counter
+            const counter = setInterval(() => {
+                percentage++;
+                percentElement.textContent = percentage + '%';
+                overlay.style.opacity = 1 - (percentage/100);
+                
+                if (percentage === 100) {
+                    clearInterval(counter);
+                    clearInterval(flickerInterval);
+                    setTimeout(() => {
+                        overlay.style.display = 'none';
+                        mainLogo.classList.remove('hidden');
+                        createPetals();
+                    }, 500);
+                }
+            }, 30);
+        });
         
         // Simple carousel navigation
         const dots = document.querySelectorAll('.carousel-dot');