Update index.html

index.html

@@ -111,18 +111,18 @@
         }
         /* === Section Backgrounds & Text === */
         /* Harmonize backgrounds previously set by Tailwind */
-        #about, #catalog, #contact > div > div { /* Target sections/containers using bg-gray-900/50 or bg-gray-900 */
+        #about, #catalog, #reviews, #contact > div > div { /* Target sections/containers */
              background-color: rgba(0, 0, 0, 0.2); /* Subtle dark overlay on primary dark */
         }
-        #advantages, footer { /* Target sections using bg-black */
+        #advantages, footer { /* Target sections */
              background-color: var(--primary-dark);
         }
-        /* Ensure text within these slightly darker sections is readable */
-        #about p, #advantages p, #portfolio p, #contact p, footer p, #contact label, #contact h4 {
+        /* Ensure text within these sections is readable */
+        #about p, #advantages p, #portfolio p, #reviews p, #contact p, footer p, #contact label, #contact h4 {
              color: var(--primary-light); /* Ensure light text */
              opacity: 0.9; /* Slightly softer text */
         }
-         #advantages .text-gray-300, #portfolio .text-gray-300, #contact .text-gray-300 {
+         #advantages .text-gray-300, #portfolio .text-gray-300, #reviews .text-gray-300, #contact .text-gray-300 {
               color: var(--primary-light) !important; /* Override specific tailwind gray */
               opacity: 0.9;
          }
@@ -172,9 +172,55 @@
          .advantage-card h3 {
              color: var(--primary-light);
          }
+
+        /* === Review Cards (Similar to Advantage Cards) === */
+        .review-card {
+            transition: all 0.3s ease;
+            /* RGB for #f5a623 is 245, 166, 35 */
+            border: 1px solid rgba(245, 166, 35, 0.1);
+            background-color: rgba(0, 0, 0, 0.2); /* Consistent background */
+            display: flex; /* Use flexbox for better alignment */
+            flex-direction: column; /* Stack content vertically */
+        }
+        .review-card:hover {
+            transform: translateY(-5px);
+            border-color: rgba(245, 166, 35, 0.4);
+            box-shadow: 0 10px 25px rgba(245, 166, 35, 0.1);
+            background-color: rgba(0, 0, 0, 0.3); /* Slightly lighten on hover */
+        }
+        .review-card p { /* Ensure review text is light */
+           color: var(--primary-light);
+        }
+        .review-card .fa-star { /* Ensure stars use accent color */
+            color: var(--accent);
+        }
+        .review-card p.italic { /* Style the quote paragraph */
+           flex-grow: 1; /* Allow quote to take up available space */
+        }
+        /* Optional: Add decorative quotes */
+        .review-card p.italic::before {
+           content: '\“'; /* Opening quote */
+           font-family: 'Playfair Display', serif;
+           font-size: 1.5em; /* Adjust size as needed */
+           color: var(--accent);
+           margin-right: 0.25em;
+           vertical-align: -0.2em; /* Adjust vertical alignment */
+           line-height: 1;
+        }
+         .review-card p.italic::after {
+           content: '\”'; /* Closing quote */
+           font-family: 'Playfair Display', serif;
+           font-size: 1.5em;
+           color: var(--accent);
+           margin-left: 0.25em;
+           vertical-align: -0.2em;
+            line-height: 1;
+        }
+
         /* === Contact Form === */
-        #contact .bg-gray-900 { /* Target the form container */
-             border-color: rgba(245, 166, 35, 0.2) !important; /* Use accent border */
+        #contact .max-w-4xl { /* Target the form container direct child of section > div */
+             background-color: rgba(0, 0, 0, 0.2) !important; /* Match other sections */
+             border: 1px solid rgba(245, 166, 35, 0.15) !important; /* Subtle accent border */
         }
         #contact input[type="text"],
         #contact input[type="tel"],
@@ -189,7 +235,7 @@
              color: var(--primary-light);
              opacity: 0.6;
          }
-         /* Focus state uses accent color (Tailwind class 'focus:ring-gold' should work if .text-gold is defined) */
+         /* Focus state uses accent color */
          #contact input:focus, #contact textarea:focus {
              border-color: var(--accent) !important;
              box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.5); /* Custom focus ring */
@@ -198,7 +244,7 @@
          #contact .fa-telegram, #contact .fa-instagram, #contact .fa-phone-alt {
              color: var(--accent); /* Ensure icons are accent */
          }
-          #contact a.text-gray-300 {
+          #contact a.text-gray-300 { /* Style links in contact info */
              color: var(--primary-light) !important;
              opacity: 0.9;
              transition: color 0.3s ease;
@@ -246,6 +292,7 @@
                     <a href="#advantages" class="nav-link">Преимущества</a>
                     <a href="#catalog" class="nav-link">Каталог</a>
                     <a href="#portfolio" class="nav-link">Пор��фолио</a>
+                    <a href="#reviews" class="nav-link">Отзывы</a> <!-- ADDED Reviews Link -->
                     <a href="#contact" class="nav-link">Контакты</a>
                 </div>
                 <div class="md:hidden">
@@ -263,6 +310,7 @@
                 <a href="#advantages" class="block py-2 nav-link">Преимущества</a>
                 <a href="#catalog" class="block py-2 nav-link">Каталог</a>
                 <a href="#portfolio" class="block py-2 nav-link">Портфолио</a>
+                <a href="#reviews" class="block py-2 nav-link">Отзывы</a> <!-- ADDED Reviews Link -->
                 <a href="#contact" class="block py-2 nav-link">Контакты</a>
             </div>
         </div>
@@ -323,8 +371,7 @@
                     </div>
                     <h3 class="text-xl font-bold mb-4">Премиальные материалы</h3>
                      <!-- Text color handled by CSS -->
-                    <p>Используем только высококачественные материалы и освещение,
-созданное с вниманием к деталям и традициям.</p>
+                    <p>Используем только высококачественные материалы и освещение, созданное с вниманием к деталям и традициям.</p>
                 </div>
 
                 <div class="advantage-card p-8 rounded-xl animate-fade-in animate-delay-1">
@@ -369,9 +416,7 @@
                  <!-- Gallery items use gallery-item class -->
                 <div class="gallery-item rounded-xl animate-fade-in">
                     <div class="h-80 overflow-hidden">
-                        <img src="https://i.postimg.cc/kXJMv9N8/96044125-f190-4243-8939-8200000b27a9.png' border='0' alt='96044125-f190-4243-8939-8200000b27a9"
-                             alt="Роскошная люстра"
-                             class="w-full h-full object-cover">
+                        <img src="https://i.postimg.cc/kXJMv9N8/96044125-f190-4243-8939-8200000b27a9.png" border='0' alt="Подсветка логотипа Xan Atlas" class="w-full h-full object-cover"> <!-- Removed extra ' closing tag -->
                     </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold mb-2">Подсветка логотипа Xan Atlas</h3>
@@ -381,9 +426,7 @@
 
                 <div class="gallery-item rounded-xl animate-fade-in animate-delay-1">
                     <div class="h-80 overflow-hidden">
-                        <img src="https://i.postimg.cc/pV0JPVdX/0dc8f162-3f0e-442d-9904-3dfb167ea1fa.png' border='0' alt='0dc8f162-3f0e-442d-9904-3dfb167ea1fa"
-                             alt="Подвесные светильники"
-                             class="w-full h-full object-cover">
+                        <img src="https://i.postimg.cc/pV0JPVdX/0dc8f162-3f0e-442d-9904-3dfb167ea1fa.png" border='0' alt="Современное освещение для Sariq Bola Pizza" class="w-full h-full object-cover"> <!-- Removed extra ' closing tag -->
                     </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold mb-2">Современное освещение</h3>
@@ -393,9 +436,7 @@
 
                 <div class="gallery-item rounded-xl animate-fade-in animate-delay-2">
                     <div class="h-80 overflow-hidden">
-                        <img src="https://i.postimg.cc/Y08nHQsp/photo-2025-04-11-22-53-26.jpg' border='0' alt='photo-2025-04-11-22-53-26"
-                             alt="Декоративное освещение"
-                             class="w-full h-full object-cover">
+                        <img src="https://i.postimg.cc/Y08nHQsp/photo-2025-04-11-22-53-26.jpg" border='0' alt="Подвесные светильники для ресторана" class="w-full h-full object-cover"> <!-- Removed extra ' closing tag -->
                     </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold mb-2">Подвесные светильники</h3>
@@ -406,80 +447,142 @@
         </div>
     </section>
 
+    <!-- ========== NEW REVIEWS SECTION START ========== -->
+    <!-- Section bg handled by CSS -->
+    <section id="reviews" class="py-20">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center animate-fade-in">Что говорят <span class="text-gold">наши клиенты</span></h2>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+
+                <!-- Review Card 1 -->
+                <div class="review-card p-8 rounded-xl animate-fade-in">
+                     <!-- Optional: Star Rating -->
+                     <div class="text-gold text-xl mb-4">
+                         <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>
+                     <!-- Quote -->
+                     <p class="text-lg italic mb-6 opacity-95">"Исключительное качество материалов и внимание к деталям. Светильники превзошли все ожидания! Настоящие мастера своего дела."</p>
+                     <!-- Attribution -->
+                     <div class="text-right mt-auto pt-4"> <!-- Added mt-auto to push to bottom, pt-4 for spacing -->
+                         <p class="font-semibold text-primary-light">Анна П.</p>
+                         <p class="text-sm opacity-70">Дизайнер интерьера, Ташкент</p>
+                     </div>
+                </div>
+
+                <!-- Review Card 2 -->
+                <div class="review-card p-8 rounded-xl animate-fade-in animate-delay-1">
+                     <div class="text-gold text-xl mb-4">
+                         <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>
+                     <p class="text-lg italic mb-6 opacity-95">"Команда AB Lighting воплотила мою сложную дизайнерскую идею в жизнь. Полностью индивидуальный подход и прекрасный результат для нашего ресторана."</p>
+                     <div class="text-right mt-auto pt-4">
+                         <p class="font-semibold text-primary-light">Сергей В.</p>
+                         <p class="text-sm opacity-70">Владелец ресторана</p>
+                     </div>
+                </div>
+
+                <!-- Review Card 3 -->
+                <div class="review-card p-8 rounded-xl animate-fade-in animate-delay-2">
+                     <div class="text-gold text-xl mb-4">
+                         <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>
+                     <p class="text-lg italic mb-6 opacity-95">"Весь процесс от эскиза до установки прошел гладко и профессионально. Очень доволен эксклюзивной люстрой для моего дома."</p>
+                     <div class="text-right mt-auto pt-4">
+                         <p class="font-semibold text-primary-light">Елена К.</p>
+                         <p class="text-sm opacity-70">Частный заказчик</p>
+                     </div>
+                </div>
+
+            </div>
+        </div>
+    </section>
+    <!-- ========== NEW REVIEWS SECTION END ========== -->
+
     <!-- Контакты -->
      <!-- Section bg handled by CSS -->
-    <!-- Контакты -->
-<!-- Section bg handled by CSS -->
-<section id="contact" class="py-20">
-    <div class="container mx-auto px-6">
-         <!-- Form container bg/border handled by CSS -->
-        <div class="max-w-4xl mx-auto rounded-xl p-8 md:p-12">
-            <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center">Свяжитесь <span class="text-gold">с нами</span></h2>
+    <section id="contact" class="py-20">
+        <div class="container mx-auto px-6">
+             <!-- Form container bg/border handled by CSS -->
+            <div class="max-w-4xl mx-auto rounded-xl p-8 md:p-12">
+                <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center">Свяжитесь <span class="text-gold">с нами</span></h2>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
-                <div class="animate-fade-in">
-                    <h3 class="text-xl font-bold mb-4">Контактная информация</h3>
-                    <div class="space-y-4">
-                         <!-- Icons use text-gold (via CSS rule for #contact .fa-*) -->
-                        <div class="flex items-start">
-                            <div class="mr-4 mt-1 text-lg">
-                                <i class="fas fa-phone-alt"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-semibold mb-1">Телефон</h4>
-                                <p class="opacity-90">+998 93 674 89 88<br>+998 90 186 03 83</p> <!-- Corrected closing tag </br> to <br> -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
+                    <div class="animate-fade-in">
+                        <h3 class="text-xl font-bold mb-4">Кон��актная информация</h3>
+                        <div class="space-y-4">
+                             <!-- Icons use text-gold (via CSS rule for #contact .fa-*) -->
+                            <div class="flex items-start">
+                                <div class="mr-4 mt-1 text-lg">
+                                    <i class="fas fa-phone-alt"></i>
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold mb-1">Телефон</h4>
+                                    <p class="opacity-90">+998 93 674 89 88<br>+998 90 186 03 83</p>
+                                </div>
                             </div>
-                        </div>
 
-                        <div class="flex items-start">
-                            <div class="mr-4 mt-1 text-lg">
-                                <i class="fab fa-telegram"></i>
+                            <div class="flex items-start">
+                                <div class="mr-4 mt-1 text-lg">
+                                    <i class="fab fa-telegram"></i>
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold mb-1">Telegram</h4>
+                                     <!-- Link color/hover handled by CSS -->
+                                    <a href="https://t.me/ABlighting" target="_blank" rel="noopener noreferrer" class="text-gray-300 hover:text-gold">@ABlighting</a>
+                                </div>
                             </div>
-                            <div>
-                                <h4 class="font-semibold mb-1">Telegram</h4>
-                                 <!-- Link color/hover handled by CSS -->
-                                <a href="https://t.me/ABlighting" target="_blank" rel="noopener noreferrer" class="text-gray-300 hover:text-gold">@ABlighting</a> <!-- Applied styles directly for clarity -->
+
+                            <div class="flex items-start">
+                                <div class="mr-4 mt-1 text-lg">
+                                    <i class="fab fa-instagram"></i>
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold mb-1">Instagram</h4>
+                                    <a href="#" target="_blank" rel="noopener noreferrer" class="text-gray-300 hover:text-gold">@ab_lighting_items</a>
+                                </div>
                             </div>
                         </div>
+                    </div>
 
-                        <div class="flex items-start">
-                            <div class="mr-4 mt-1 text-lg">
-                                <i class="fab fa-instagram"></i>
+                    <div class="animate-fade-in animate-delay-1">
+                        <h3 class="text-xl font-bold mb-4">Форма обратной связи</h3>
+                        <!-- ***** FORM UPDATED FOR FORMSPREE ***** -->
+                        <form action="https://formspree.io/f/xrbpjppy" method="POST" class="space-y-4">
+                             <!-- Inputs styled by CSS, focus ring uses accent -->
+                            <div>
+                                 <!-- Added name="name" and required -->
+                                <input type="text" name="name" placeholder="Ваше имя" class="w-full rounded-lg px-4 py-3 focus:outline-none" required>
                             </div>
                             <div>
-                                <h4 class="font-semibold mb-1">Instagram</h4>
-                                <a href="#" target="_blank" rel="noopener noreferrer" class="text-gray-300 hover:text-gold">@ab_lighting_items</a> <!-- Applied styles directly for clarity -->
+                                 <!-- Added name="phone" and required -->
+                                <input type="tel" name="phone" placeholder="Ваш телефон" class="w-full rounded-lg px-4 py-3 focus:outline-none" required>
                             </div>
-                        </div>
+                            <div>
+                                 <!-- Added name="message" and required -->
+                                <textarea name="message" placeholder="Ваше сообщение" rows="4" class="w-full rounded-lg px-4 py-3 focus:outline-none" required></textarea>
+                            </div>
+                             <!-- Button uses btn-gold -->
+                            <button type="submit" class="btn-gold px-6 py-3 rounded-lg w-full">Отправить</button>
+                        </form>
+                        <!-- ***** END OF FORM UPDATES ***** -->
                     </div>
                 </div>
-
-                <div class="animate-fade-in animate-delay-1">
-                    <h3 class="text-xl font-bold mb-4">Форма обратной связи</h3>
-                    <!-- ***** FORM UPDATED FOR FORMSPREE ***** -->
-                    <form action="https://formspree.io/f/xrbpjppy" method="POST" class="space-y-4">
-                         <!-- Inputs styled by CSS, focus ring uses accent -->
-                        <div>
-                             <!-- Added name="name" and required -->
-                            <input type="text" name="name" placeholder="Ваше имя" class="w-full rounded-lg px-4 py-3 focus:outline-none" required>
-                        </div>
-                        <div>
-                             <!-- Added name="phone" and required -->
-                            <input type="tel" name="phone" placeholder="Ваш телефон" class="w-full rounded-lg px-4 py-3 focus:outline-none" required>
-                        </div>
-                        <div>
-                             <!-- Added name="message" and required -->
-                            <textarea name="message" placeholder="Ваше сообщение" rows="4" class="w-full rounded-lg px-4 py-3 focus:outline-none" required></textarea>
-                        </div>
-                         <!-- Button uses btn-gold -->
-                        <button type="submit" class="btn-gold px-6 py-3 rounded-lg w-full">Отправить</button>
-                    </form>
-                    <!-- ***** END OF FORM UPDATES ***** -->
-                </div>
             </div>
         </div>
-    </div>
-</section>
+    </section>
 
     <!-- Подвал -->
      <!-- Footer bg/border handled by CSS -->
@@ -494,20 +597,20 @@
                 </div>
                  <!-- Icons colors/hover handled by CSS -->
                 <div class="flex space-x-6">
-                    <a href="#" target="_blank" rel="noopener noreferrer" class="transition">
+                    <a href="#" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-gold transition">
                         <i class="fab fa-instagram text-xl"></i>
                     </a>
-                    <a href="#" target="_blank" rel="noopener noreferrer" class="transition">
+                    <a href="#" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-gold transition">
                         <i class="fab fa-facebook text-xl"></i>
                     </a>
-                    <a href="https://t.me/ABlighting" target="_blank" rel="noopener noreferrer" class="transition">
+                    <a href="https://t.me/ABlighting" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-gold transition">
                         <i class="fab fa-telegram text-xl"></i>
                     </a>
                 </div>
             </div>
              <!-- Divider line color handled by CSS -->
-            <div class="mt-8 pt-8 text-center">
-                <p>© 2023 AB Lighting Items. Все права защищены.</p>
+            <div class="mt-8 pt-8 text-center border-t border-gold-faded"> <!-- Added border styles directly -->
+                <p class="text-gray-400 text-sm">© 2024 AB Lighting Items. Все права защищены.</p> <!-- Updated year and styles -->
             </div>
         </div>
     </footer>
@@ -525,17 +628,21 @@
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function (e) {
                 const targetId = this.getAttribute('href');
-                const targetElement = document.querySelector(targetId);
-                if (targetElement) {
-                    e.preventDefault();
-                    targetElement.scrollIntoView({
-                        behavior: 'smooth'
-                    });
-                    // Закрытие мобильного меню, если оно открыто
-                    if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
-                        mobileMenu.classList.add('hidden');
+                // Only prevent default and scroll if it's an internal link
+                if (targetId && targetId.startsWith('#')) {
+                    const targetElement = document.querySelector(targetId);
+                    if (targetElement) {
+                        e.preventDefault();
+                        targetElement.scrollIntoView({
+                            behavior: 'smooth'
+                        });
+                        // Закрытие мобильного меню, если оно открыто
+                        if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
+                            mobileMenu.classList.add('hidden');
+                        }
                     }
                 }
+                 // Allow default behavior for external links like the catalog
             });
         });
         // Анимация при скролле (Intersection Observer)
@@ -544,12 +651,16 @@
             const observer = new IntersectionObserver((entries, observerInstance) => {
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
-                        entry.target.style.opacity = 1;
-                        entry.target.style.transform = 'translateY(0)';
-                         // Optional: unobserve after animation
+                        // Use requestAnimationFrame for potentially smoother animation start
+                        window.requestAnimationFrame(() => {
+                            entry.target.style.opacity = 1;
+                            entry.target.style.transform = 'translateY(0)';
+                        });
+                         // Optional: unobserve after animation if you only want it once
                          // observerInstance.unobserve(entry.target);
                     } else {
                         // Optional: Reset animation if element scrolls out of view
+                        // Ensure this doesn't conflict with initial state if unobserving
                         // entry.target.style.opacity = 0;
                         // entry.target.style.transform = 'translateY(20px)';
                     }
@@ -571,5 +682,9 @@
             });
         }
     </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=Ibrokhim1263/ablighting" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
-</html>
+    <!-- Removed the DeepSite banner unless you specifically want it -->
+    <!--
+    <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=Ibrokhim1263/ablighting" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p>
+    -->
+</body>
+</html>