Добавлены новые изображения и обновлены стили компонентов. Включены новые изображения в секции проектов, изменены стили форм и секций для улучшения визуального восприятия. Обновлены тексты и добавлены декоративные элементы для улучшения интерфейса.

src/app/page.tsx

@@ -157,56 +157,64 @@ export default function Home() {
             
             {/* Right Form */}
             <FadeInSection as="div" className="w-full lg:w-96" delay={0.4}>
-              <div className="bg-white/95 backdrop-blur-sm rounded-xl p-8 shadow-2xl">
+              <div className="group relative p-8 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 shadow-2xl">
-                <h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">
+                {/* Фон */}
-                  Получите расчет стоимости
+                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-                </h3>
                 
-                <form onSubmit={handleFormSubmit} className="space-y-4">
+                <div className="relative z-10">
-                  <input
+                  <h3 className="text-2xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-6 text-center">
-                    type="tel"
+                    Получите расчет стоимости
-                    placeholder="Ваш телефон"
+                  </h3>
-                    value={phone}
-                    onChange={(e) => {
-                      const val = e.target.value.replace(/\D/g, '').slice(0, 11);
-                      setPhone(val);
-                    }}
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 text-gray-900 bg-white"
-                  />
-                  <input
-                    type="text"
-                    placeholder="Ваше имя"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 text-gray-900 bg-white"
-                  />
                   
-                  <button
+                  <form onSubmit={handleFormSubmit} className="space-y-6">
-                    type="submit"
+                    <input
-                    disabled={loading}
+                      type="tel"
-                    className="w-full bg-blue-600 text-white py-4 rounded-lg hover:bg-blue-700 transition-colors text-lg font-semibold flex items-center justify-center group disabled:opacity-60 disabled:cursor-not-allowed"
+                      placeholder="Ваш телефон"
-                  >
+                      value={phone}
-                    {loading ? 'Отправка...' : 'Обсудить проект'}
+                      onChange={(e) => {
-                    {!loading && (
+                        const val = e.target.value.replace(/\D/g, '').slice(0, 11);
-                      <svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        setPhone(val);
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                      }}
-                      </svg>
+                      className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300"
+                    />
+                    <input
+                      type="text"
+                      placeholder="Ваше имя"
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300"
+                    />
+                    
+                    <button
+                      type="submit"
+                      disabled={loading}
+                      className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-4 rounded-xl hover:from-blue-600 hover:to-purple-600 transition-all duration-300 text-lg font-semibold flex items-center justify-center group disabled:opacity-60 disabled:cursor-not-allowed hover:scale-105 shadow-lg"
+                    >
+                      {loading ? 'Отправка...' : 'Обсудить проект'}
+                      {!loading && (
+                        <svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                        </svg>
+                      )}
+                    </button>
+                    
+                    {error && (
+                      <div className="bg-red-500/20 border border-red-500/30 text-red-300 text-center py-3 px-4 rounded-xl text-sm backdrop-blur-sm">
+                        {error}
+                      </div>
                     )}
-                  </button>
+                  </form>
                   
-                  {error && (
+                  <p className="text-xs text-gray-400 mt-4 text-center">
-                    <div className="bg-red-500 text-white text-center py-3 px-4 rounded-lg text-sm">
+                    Нажимая кнопку &quot;Обсудить проект&quot;, вы соглашаетесь с{' '}
-                      {error}
+                    <a href="#" className="underline hover:text-blue-400 transition-colors duration-300">
-                    </div>
+                      Политикой конфиденциальности
-                  )}
+                    </a>
-                </form>
+                  </p>
+                </div>
 
-                                 <p className="text-xs text-gray-500 mt-4 text-center">
+                {/* Декоративный элемент */}
-                   Нажимая кнопку &quot;Обсудить проект&quot;, вы соглашаетесь с{' '}
+                <div className="absolute top-4 right-4 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
-                   <a href="#" className="underline hover:text-blue-600">
-                     Политикой конфиденциальности
-                   </a>
-                 </p>
               </div>
             </FadeInSection>
           </div>
@@ -219,7 +227,7 @@ export default function Home() {
       <ProjectsSection onCatalogClick={() => setIsCatalogModalOpen(true)} />
       <WhyChooseUsSection />
       <TeamSection />
-      <ReviewsSection onExcursionClick={() => setIsExcursionModalOpen(true)} />
+      <ReviewsSection />
       <ContactSection />
       <Footer />
     </main>

src/components/AboutSection.tsx

@@ -58,7 +58,7 @@ const AboutSection = () => {
             <div className="relative h-[500px] w-full rounded-2xl overflow-hidden">
               <div className="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent z-10"></div>
               <Image
-                src="/images/company.jpg"
+                src="/images/company2.jpg"
                 alt="О нашей компании"
                 fill
                 className="object-cover transition-transform duration-700 group-hover:scale-110"

src/components/CatalogRequestModal.tsx

@@ -66,21 +66,43 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/80 backdrop-blur-sm">
-      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4 relative animate-fadeIn">
+      <div className="relative bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 rounded-2xl shadow-2xl w-full max-w-lg mx-4 animate-fadeIn border border-white/20 overflow-hidden">
+        {/* Декоративные фоновые элементы */}
+        <div className="absolute inset-0 opacity-10">
+          <div className="absolute top-1/4 left-1/4 w-32 h-32 bg-blue-500 rounded-full blur-2xl"></div>
+          <div className="absolute bottom-1/4 right-1/4 w-28 h-28 bg-purple-500 rounded-full blur-2xl"></div>
+          <div className="absolute top-1/2 left-1/2 w-24 h-24 bg-cyan-500 rounded-full blur-2xl opacity-20"></div>
+        </div>
+
         <button
           onClick={closeModal}
-          className="absolute top-4 right-4 text-gray-400 hover:text-gray-700"
+          className="absolute top-4 right-4 text-gray-400 hover:text-white z-20 p-2 rounded-full hover:bg-white/10 transition-all duration-300"
           aria-label="Закрыть"
         >
           <X className="w-6 h-6" />
         </button>
-        <div className="p-8 md:p-10 flex flex-col items-center">
+
+        <div className="relative z-10 p-8 md:p-10 flex flex-col items-center">
           <div className="w-full flex justify-center mb-6">
-            <Image src="/images/katalog.png" alt="Каталог проектов" width={320} height={120} className="object-contain rounded-lg shadow-md" />
+            <div className="relative group">
+              <Image 
+                src="/images/katalog.png" 
+                alt="Каталог проектов" 
+                width={320} 
+                height={120} 
+                className="object-contain rounded-lg shadow-md group-hover:scale-105 transition-transform duration-300" 
+              />
+              {/* Декоративные элементы вокруг изображения */}
+              <div className="absolute -top-2 -left-2 w-16 h-16 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full blur-xl"></div>
+              <div className="absolute -bottom-2 -right-2 w-20 h-20 bg-gradient-to-br from-purple-500/30 to-blue-500/30 rounded-full blur-xl"></div>
+            </div>
           </div>
-          <h2 className="text-2xl md:text-3xl font-bold text-center mb-2">Укажите контакты</h2>
+
-          <p className="text-gray-500 text-center mb-8">И мы отправим каталог проектов на WhatsApp</p>
+          <h2 className="text-2xl md:text-3xl font-bold text-center mb-2 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
+            Укажите контакты
+          </h2>
+          <p className="text-gray-300 text-center mb-8">И мы отправим каталог проектов на WhatsApp</p>
 
           {!success ? (
             <form onSubmit={handleSubmit} className="w-full flex flex-col gap-4">
@@ -92,24 +114,24 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
                   const val = e.target.value.replace(/\D/g, '').slice(0, 11);
                   setPhone(val);
                 }}
-                className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 text-lg"
+                className="w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 text-lg text-white placeholder-gray-400 hover:bg-white/15 transition-all duration-300"
               />
               <input
                 type="text"
                 placeholder="Имя"
                 value={name}
                 onChange={e => setName(e.target.value)}
-                className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 text-lg"
+                className="w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 text-lg text-white placeholder-gray-400 hover:bg-white/15 transition-all duration-300"
               />
               <button
                 type="submit"
                 disabled={loading}
-                className="w-full bg-blue-800 text-white py-3 rounded-lg hover:bg-blue-900 transition-colors text-lg font-semibold mt-2 disabled:opacity-60"
+                className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-3 rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all duration-300 text-lg font-semibold mt-2 disabled:opacity-60 hover:scale-105 hover:-translate-y-1 shadow-lg hover:shadow-xl"
               >
                 {loading ? 'Отправка...' : 'Хочу проект'}
               </button>
               {error && (
-                <div className="bg-red-500 text-white text-center py-3 px-4 rounded-lg flex items-center justify-center min-h-[48px] md:min-h-[40px] md:text-base text-sm whitespace-pre-line mt-2">
+                <div className="bg-gradient-to-r from-red-500/20 to-red-600/20 backdrop-blur-sm border border-red-500/30 text-red-300 text-center py-3 px-4 rounded-lg flex items-center justify-center min-h-[48px] md:min-h-[40px] md:text-base text-sm whitespace-pre-line mt-2">
                   <AlertCircle className="w-5 h-5 mr-2 shrink-0" />
                   <span className="block w-full break-words">{error}</span>
                 </div>
@@ -117,20 +139,23 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
             </form>
           ) : (
             <div className="w-full flex flex-col items-center animate-fadeIn">
-              <div className="bg-green-100 rounded-2xl p-6 mb-8 flex items-center shadow-lg w-full">
+              <div className="bg-gradient-to-r from-green-500/20 to-green-600/20 backdrop-blur-sm border border-green-500/30 rounded-2xl p-6 mb-8 flex items-center shadow-lg w-full">
-                <CheckCircle className="w-10 h-10 text-green-600 mr-4 flex-shrink-0" />
+                <CheckCircle className="w-10 h-10 text-green-400 mr-4 flex-shrink-0" />
-                <span className="text-green-700 text-lg md:text-xl font-semibold leading-snug text-left">
+                <span className="text-green-300 text-lg md:text-xl font-semibold leading-snug text-left">
                   Спасибо! Данные успешно отправлены.
                 </span>
               </div>
               <button
                 onClick={closeModal}
-                className="bg-blue-800 text-white px-8 py-3 rounded-full hover:bg-blue-900 transition-colors text-lg font-semibold shadow-md"
+                className="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-8 py-3 rounded-full hover:from-blue-600 hover:to-purple-600 transition-all duration-300 text-lg font-semibold shadow-md hover:scale-105 hover:-translate-y-1"
               >
                 Закрыть
               </button>
             </div>
           )}
+
+          {/* Декоративный элемент */}
+          <div className="absolute top-2 right-12 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50"></div>
         </div>
       </div>
     </div>

src/components/ContactSection.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState } from 'react';
 import { Phone, Mail, MapPin, CheckCircle, AlertCircle } from 'lucide-react';
 import FadeInSection from './FadeInSection';
@@ -50,130 +52,164 @@ const ContactSection = () => {
   };
 
   return (
-    <section id="contacts" className="py-20 bg-white">
+    <section id="contacts" className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
-      <div className="container mx-auto px-4">
+      {/* Статичный фон */}
-        <FadeInSection as="h2" className="text-3xl font-bold text-gray-900 mb-12 text-center">
+      <div className="absolute inset-0 opacity-10">
-          Наши контакты
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
+        <div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div>
+      </div>
+
+      <div className="container mx-auto px-4 relative z-10">
+        {/* Заголовок секции */}
+        <FadeInSection as="div" className="text-center mb-16">
+          <h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4">
+            Наши контакты
+          </h2>
+          <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
         </FadeInSection>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
-          <FadeInSection as="div" delay={0.2}>
+          {/* Контактная информация */}
-            <div className="space-y-6">
+          <FadeInSection 
-              <div className="flex items-start">
+            as="div" 
-                <Phone className="w-6 h-6 text-blue-600 mt-1 mr-4" />
+            className="group relative p-8 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500"
+            delay={0.2}
+          >
+            {/* Фон */}
+            <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+            
+            <div className="relative z-10 space-y-8">
+              <div className="flex items-start group/item">
+                <div className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-white/20 mr-4 group-hover/item:scale-110 transition-transform duration-300">
+                  <Phone className="w-6 h-6 text-blue-400" />
+                </div>
                 <div>
-                  <h3 className="text-lg font-bold text-gray-900 mb-1">
+                  <h3 className="text-xl font-bold text-white mb-2 group-hover/item:text-blue-300 transition-colors duration-300">
                     Телефон
                   </h3>
-                  <a
+                  <span className="text-gray-300 text-lg">
-                    href="tel:+79672123132"
+                    будет другой
-                    className="text-gray-600 hover:text-blue-600 transition-colors"
-                  >
-                    +7 (967) 212-31-32
-                  </a>
-                </div>
-              </div>
-
-              <div className="flex items-start">
-                <Mail className="w-6 h-6 text-blue-600 mt-1 mr-4" />
-                <div>
-                  <h3 className="text-lg font-bold text-gray-900 mb-1">
-                    Email
-                  </h3>
-                  <a
-                    href="mailto:sksdstroy@yandex.ru"
-                    className="text-gray-600 hover:text-blue-600 transition-colors"
-                  >
-                    sksdstroy@yandex.ru
-                  </a>
-                </div>
-              </div>
-
-              <div className="flex items-start">
-                <MapPin className="w-6 h-6 text-blue-600 mt-1 mr-4" />
-                <div>
-                  <h3 className="text-lg font-bold text-gray-900 mb-1">
-                    Адрес
-                  </h3>
-                  <p className="text-gray-600">
-                    Чувашская республика, г. Чебоксары,<br />
-                    ул. Пирогова, 1 корп. 3, 428034
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            <div className="mt-8">
-              <h3 className="text-lg font-bold text-gray-900 mb-4">
-                Реквизиты
-              </h3>
-              <p className="text-gray-600">
-                ИП Степанов Денис Сергеевич<br />
-                ИНН 212306083987
-              </p>
-            </div>
-          </FadeInSection>
-
-          <FadeInSection as="div" className="bg-gray-50 p-6 rounded-lg" delay={0.4}>
-            <h3 className="text-xl font-bold text-gray-900 mb-6">
-              Отправить сообщение
-            </h3>
-            {!success ? (
-              <form className="space-y-4" onSubmit={handleSubmit}>
-                <div>
-                  <input
-                    type="text"
-                    placeholder="Ваше имя"
-                    value={name}
-                    onChange={e => setName(e.target.value)}
-                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
-                  />
-                </div>
-                <div>
-                  <input
-                    type="tel"
-                    placeholder="Ваш телефон"
-                    value={phone}
-                    onChange={e => {
-                      const val = e.target.value.replace(/\D/g, '').slice(0, 11);
-                      setPhone(val);
-                    }}
-                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
-                  />
-                </div>
-                <div>
-                  <textarea
-                    placeholder="Ваше сообщение"
-                    rows={4}
-                    value={message}
-                    onChange={e => setMessage(e.target.value)}
-                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
-                  />
-                </div>
-                {error && (
-                  <div className="bg-red-500 text-white text-center py-3 px-4 rounded-lg flex items-center justify-center min-h-[48px] md:min-h-[40px] md:text-base text-sm whitespace-pre-line">
-                    <AlertCircle className="w-5 h-5 mr-2 shrink-0" />
-                    <span className="block w-full break-words">{error}</span>
-                  </div>
-                )}
-                <button
-                  type="submit"
-                  disabled={loading}
-                  className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors font-semibold disabled:opacity-60"
-                >
-                  {loading ? 'Отправка...' : 'Отправить'}
-                </button>
-              </form>
-            ) : (
-              <div className="flex flex-col items-center justify-center py-8 animate-fadeIn">
-                <div className="bg-green-100 rounded-2xl p-4 mb-6 flex items-center shadow-lg w-full">
-                  <CheckCircle className="w-8 h-8 text-green-600 mr-2" />
-                  <span className="text-green-700 text-lg font-semibold leading-snug text-left">
-                    Спасибо! Ваше сообщение успешно отправлено.
                   </span>
                 </div>
               </div>
-            )}
+
+              <div className="flex items-start group/item">
+                <div className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-white/20 mr-4 group-hover/item:scale-110 transition-transform duration-300">
+                  <Mail className="w-6 h-6 text-blue-400" />
+                </div>
+                <div>
+                  <h3 className="text-xl font-bold text-white mb-2 group-hover/item:text-blue-300 transition-colors duration-300">
+                    Email
+                  </h3>
+                  <span className="text-gray-300 text-lg">
+                    Будет
+                  </span>
+                </div>
+              </div>
+
+              <div className="flex items-start group/item">
+                <div className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-white/20 mr-4 group-hover/item:scale-110 transition-transform duration-300">
+                  <MapPin className="w-6 h-6 text-blue-400" />
+                </div>
+                <div>
+                  <h3 className="text-xl font-bold text-white mb-2 group-hover/item:text-blue-300 transition-colors duration-300">
+                    Адрес
+                  </h3>
+                  <p className="text-gray-300 text-lg leading-relaxed">
+                    г. Чебоксары, ул. Калинина, 107
+                  </p>
+                </div>
+              </div>
+
+              <div className="pt-6 border-t border-white/10">
+                <h3 className="text-xl font-bold text-white mb-4">
+                  Реквизиты
+                </h3>
+                <p className="text-gray-300 leading-relaxed">
+                  ИП Степанов Денис Сергеевич<br />
+                  ИНН 212306083987
+                </p>
+              </div>
+            </div>
+
+            {/* Декоративный элемент */}
+            <div className="absolute top-4 right-4 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
+          </FadeInSection>
+
+          {/* Форма обратной связи */}
+          <FadeInSection 
+            as="div" 
+            className="group relative p-8 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500"
+            delay={0.4}
+          >
+            {/* Фон */}
+            <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+            
+            <div className="relative z-10">
+              <h3 className="text-2xl font-bold text-white mb-6 group-hover:text-blue-300 transition-colors duration-300">
+                Отправить сообщение
+              </h3>
+              {!success ? (
+                <form className="space-y-6" onSubmit={handleSubmit}>
+                  <div>
+                    <input
+                      type="text"
+                      placeholder="Ваше имя"
+                      value={name}
+                      onChange={e => setName(e.target.value)}
+                      className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300"
+                    />
+                  </div>
+                  <div>
+                    <input
+                      type="tel"
+                      placeholder="Ваш телефон"
+                      value={phone}
+                      onChange={e => {
+                        const val = e.target.value.replace(/\D/g, '').slice(0, 11);
+                        setPhone(val);
+                      }}
+                      className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300"
+                    />
+                  </div>
+                  <div>
+                    <textarea
+                      placeholder="Ваше сообщение"
+                      rows={4}
+                      value={message}
+                      onChange={e => setMessage(e.target.value)}
+                      className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300 resize-none"
+                    />
+                  </div>
+                  {error && (
+                    <div className="bg-red-500/20 border border-red-500/30 text-red-300 text-center py-3 px-4 rounded-xl flex items-center justify-center backdrop-blur-sm">
+                      <AlertCircle className="w-5 h-5 mr-2 shrink-0" />
+                      <span className="block w-full break-words">{error}</span>
+                    </div>
+                  )}
+                  <button
+                    type="submit"
+                    disabled={loading}
+                    className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-3 rounded-xl hover:from-blue-600 hover:to-purple-600 transition-all duration-300 font-semibold disabled:opacity-60 hover:scale-105 hover:shadow-lg"
+                  >
+                    {loading ? 'Отправка...' : 'Отправить'}
+                  </button>
+                </form>
+              ) : (
+                <div className="flex flex-col items-center justify-center py-8 animate-fadeIn">
+                  <div className="bg-green-500/20 border border-green-500/30 rounded-2xl p-6 mb-6 flex items-center backdrop-blur-sm w-full">
+                    <CheckCircle className="w-8 h-8 text-green-400 mr-3" />
+                    <span className="text-green-300 text-lg font-semibold leading-snug text-left">
+                      Спасибо! Ваше сообщение успешно отправлено.
+                    </span>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Декоративный элемент */}
+            <div className="absolute top-4 right-4 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
           </FadeInSection>
         </div>
       </div>

src/components/Footer.tsx

@@ -6,7 +6,7 @@ const Footer = () => {
       <div className="container mx-auto px-4">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
           <div>
-            <h3 className="text-xl font-bold mb-4">ВашДом</h3>
+            <h3 className="text-xl font-bold mb-4">Ваш Дом</h3>
             <p className="text-gray-400">
               Современное строительство домов и коттеджей под ключ. Индивидуальные проекты, качественные материалы, профессиональная команда.
             </p>
@@ -49,8 +49,8 @@ const Footer = () => {
               <li>+7 (900) 123-45-67</li>
               <li>info@vashdom.ru</li>
               <li>
-                г. Москва,<br />
+                г. Чебоксары,<br />
-                ул. Новая, 10
+                ул. Калинина, 107
               </li>
             </ul>
           </div>
@@ -66,20 +66,12 @@ const Footer = () => {
               >
                 Telegram
               </a>
-              <a
-                href="#"
-                className="text-gray-400 hover:text-white transition-colors"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                WhatsApp
-              </a>
             </div>
           </div>
         </div>
         
         <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
-          <p>© 2025 ВашДом. Все права защищены.</p>
+          <p>© 2021 ВашДом. Все права защищены.</p>
           <p className="mt-2 text-sm">
             Разработка сайта <a href="https://biveki.ru/" target="_blank" rel="noopener noreferrer" className="underline hover:text-white">BivekiGroup</a>
           </p>

src/components/Header.tsx

@@ -34,14 +34,14 @@ const Header = () => {
               <Link href="#services" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1">
                 Услуги
               </Link>
+              <Link href="#about" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1">
+                О нас
+              </Link>
               <Link href="#projects" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1">
                 Каталог домов
               </Link>
-              <Link href="#mortgage" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1">
+              <Link href="#reviews" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1">
-                Ипотека
+                Отзывы
-              </Link>
-              <Link href="#about" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1">
-                О нас
               </Link>
               <Link href="#contacts" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1">
                 Контакты

src/components/HouseCalculatorModal.tsx

@@ -95,8 +95,6 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
     }
   };
 
-
-
   const closeModal = () => {
     setStep(1);
     setMaterial('');
@@ -109,52 +107,74 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4">
-      <div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl mx-auto relative animate-fadeIn max-h-[90vh] overflow-y-auto">
+      {/* Декоративный фон */}
+      <div className="absolute inset-0 opacity-20">
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
+        <div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl"></div>
+      </div>
+
+      <div className="relative bg-gradient-to-br from-gray-900/95 via-gray-800/95 to-gray-900/95 backdrop-blur-md border border-white/20 rounded-2xl shadow-2xl w-full max-w-2xl mx-auto animate-fadeIn max-h-[90vh] overflow-y-auto">
         <button
           onClick={closeModal}
-          className="absolute top-4 right-4 text-gray-400 hover:text-gray-700 p-2 hover:bg-gray-100 rounded-full transition-colors"
+          className="absolute top-4 right-4 text-gray-400 hover:text-white p-2 hover:bg-white/10 rounded-full transition-colors z-10"
           aria-label="Закрыть калькулятор"
         >
           <X className="w-5 h-5 sm:w-6 sm:h-6" />
         </button>
+        
         <div className="p-4 sm:p-6 md:p-8">
           <div className="flex items-center justify-between mb-4 sm:mb-6">
-            <span className="text-gray-500 text-xs sm:text-sm">
+            <span className="text-gray-300 text-xs sm:text-sm">
               {step < 5 ? 'Для расчета стоимости выберите один из вариантов' : 'Спасибо за заявку!'}
             </span>
-            <span className="text-gray-500 text-xs sm:text-sm">{step}/5</span>
+            <span className="text-gray-300 text-xs sm:text-sm">{step}/5</span>
           </div>
-          <div className="w-full h-1 bg-gray-200 rounded mb-6 sm:mb-8">
+          
-            <div className="h-1 bg-blue-600 rounded transition-all" style={{ width: `${(step-1)*25}%` }} />
+          <div className="w-full h-2 bg-white/10 rounded-full mb-6 sm:mb-8">
+            <div className="h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500" style={{ width: `${(step-1)*25}%` }} />
           </div>
 
           {step === 1 && (
             <div>
-              <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">Из какого материала хотите построить дом?</h2>
+              <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
+                Из какого материала хотите построить дом?
+              </h2>
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
                 {materials.map((m) => (
                   <button
                     key={m.value}
                     type="button"
                     onClick={() => setMaterial(m.value)}
-                    className={`group border-2 rounded-xl p-3 sm:p-4 flex flex-col items-center transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-600 relative ${
+                    className={`group relative p-4 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 hover:scale-[1.02] ${
-                      material === m.value ? 'border-blue-600 shadow-lg' : 'border-gray-200 hover:border-blue-400'
+                      material === m.value 
+                        ? 'border-blue-500 shadow-lg shadow-blue-500/25' 
+                        : 'border-white/20 hover:border-white/40'
                     }`}
                   >
-                    <div className="relative w-20 h-20 sm:w-24 sm:h-24 mb-3 sm:mb-4">
+                    {/* Фон при активном состоянии */}
-                      <Image 
+                    <div className={`absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 transition-opacity duration-300 ${
-                        src={m.img} 
+                      material === m.value ? 'opacity-100' : 'opacity-0'
-                        alt={m.label} 
+                    }`}></div>
-                        fill 
+                    
-                        className="object-contain rounded-lg"
+                    <div className="relative z-10 flex flex-col items-center">
-                        sizes="(max-width: 640px) 80px, (max-width: 1024px) 96px, 96px"
+                      <div className="relative w-20 h-20 sm:w-24 sm:h-24 mb-3 sm:mb-4 rounded-xl overflow-hidden">
-                      />
+                        <Image 
+                          src={m.img} 
+                          alt={m.label} 
+                          fill 
+                          className="object-cover"
+                          sizes="(max-width: 640px) 80px, (max-width: 1024px) 96px, 96px"
+                        />
+                      </div>
+                      <span className="text-sm sm:text-base font-medium text-white text-center group-hover:text-blue-300 transition-colors duration-300">
+                        {m.label}
+                      </span>
+                      {material === m.value && (
+                        <CheckCircle className="w-5 h-5 sm:w-6 sm:h-6 text-blue-400 absolute top-2 right-2" />
+                      )}
                     </div>
-                    <span className="text-base sm:text-lg font-medium text-gray-800 text-center">{m.label}</span>
-                    {material === m.value && (
-                      <CheckCircle className="w-5 h-5 sm:w-6 sm:h-6 text-blue-600 absolute top-2 right-2" />
-                    )}
                   </button>
                 ))}
               </div>
@@ -163,19 +183,24 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
 
           {step === 2 && (
             <div>
-              <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">Какая площадь дома?</h2>
+              <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
+                Какая площадь дома?
+              </h2>
               <div className="flex flex-col gap-3 sm:gap-4">
                 {areas.map((a) => (
-                  <label key={a} className="flex items-center cursor-pointer p-3 rounded-lg hover:bg-gray-50 transition-colors">
+                  <label key={a} className="group relative cursor-pointer p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
-                    <input
+                    <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-                      type="radio"
+                    <div className="relative z-10 flex items-center">
-                      name="area"
+                      <input
-                      value={a}
+                        type="radio"
-                      checked={area === a}
+                        name="area"
-                      onChange={() => setArea(a)}
+                        value={a}
-                      className="accent-blue-600 w-4 h-4 sm:w-5 sm:h-5 mr-3"
+                        checked={area === a}
-                    />
+                        onChange={() => setArea(a)}
-                    <span className="text-base sm:text-lg text-gray-800">{a}</span>
+                        className="w-4 h-4 sm:w-5 sm:h-5 mr-3 accent-blue-500"
+                      />
+                      <span className="text-base sm:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{a}</span>
+                    </div>
                   </label>
                 ))}
               </div>
@@ -184,19 +209,24 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
 
           {step === 3 && (
             <div>
-              <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">Вариант отделки</h2>
+              <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
+                Вариант отделки
+              </h2>
               <div className="flex flex-col gap-3 sm:gap-4">
                 {finishes.map((f) => (
-                  <label key={f} className="flex items-center cursor-pointer p-3 rounded-lg hover:bg-gray-50 transition-colors">
+                  <label key={f} className="group relative cursor-pointer p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
-                    <input
+                    <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-                      type="radio"
+                    <div className="relative z-10 flex items-center">
-                      name="finish"
+                      <input
-                      value={f}
+                        type="radio"
-                      checked={finish === f}
+                        name="finish"
-                      onChange={() => setFinish(f)}
+                        value={f}
-                      className="accent-blue-600 w-4 h-4 sm:w-5 sm:h-5 mr-3"
+                        checked={finish === f}
-                    />
+                        onChange={() => setFinish(f)}
-                    <span className="text-base sm:text-lg text-gray-800">{f}</span>
+                        className="w-4 h-4 sm:w-5 sm:h-5 mr-3 accent-blue-500"
+                      />
+                      <span className="text-base sm:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{f}</span>
+                    </div>
                   </label>
                 ))}
               </div>
@@ -205,19 +235,24 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
 
           {step === 4 && (
             <div>
-              <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">Источник финансирования</h2>
+              <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
+                Источник финансирования
+              </h2>
               <div className="flex flex-col gap-3 sm:gap-4">
                 {finances.map((f) => (
-                  <label key={f} className="flex items-center cursor-pointer p-3 rounded-lg hover:bg-gray-50 transition-colors">
+                  <label key={f} className="group relative cursor-pointer p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
-                    <input
+                    <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-                      type="radio"
+                    <div className="relative z-10 flex items-center">
-                      name="finance"
+                      <input
-                      value={f}
+                        type="radio"
-                      checked={finance === f}
+                        name="finance"
-                      onChange={() => setFinance(f)}
+                        value={f}
-                      className="accent-blue-600 w-4 h-4 sm:w-5 sm:h-5 mr-3"
+                        checked={finance === f}
-                    />
+                        onChange={() => setFinance(f)}
-                    <span className="text-base sm:text-lg text-gray-800">{f}</span>
+                        className="w-4 h-4 sm:w-5 sm:h-5 mr-3 accent-blue-500"
+                      />
+                      <span className="text-base sm:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{f}</span>
+                    </div>
                   </label>
                 ))}
               </div>
@@ -226,15 +261,15 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
 
           {step === 5 && (
             <div className="flex flex-col items-center justify-center py-8 sm:py-12 animate-fadeIn">
-              <div className="bg-green-100 rounded-2xl p-4 sm:p-6 mb-6 sm:mb-8 flex items-center shadow-lg w-full max-w-xl mx-auto">
+              <div className="bg-green-500/20 border border-green-500/30 backdrop-blur-sm rounded-2xl p-4 sm:p-6 mb-6 sm:mb-8 flex items-center shadow-lg w-full max-w-xl mx-auto">
-                <CheckCircle className="w-8 h-8 sm:w-10 sm:h-10 text-green-600 mr-3 sm:mr-4 flex-shrink-0" />
+                <CheckCircle className="w-8 h-8 sm:w-10 sm:h-10 text-green-400 mr-3 sm:mr-4 flex-shrink-0" />
-                <span className="text-green-700 text-base sm:text-lg md:text-xl font-semibold leading-snug text-left">
+                <span className="text-green-300 text-base sm:text-lg md:text-xl font-semibold leading-snug text-left">
                   Благодарим за обращение в нашу компанию!<br className='hidden md:block' /> В течение 15 минут мы свяжемся с вами!
                 </span>
               </div>
               <button
                 onClick={closeModal}
-                className="bg-blue-600 text-white px-6 sm:px-8 py-3 rounded-full hover:bg-blue-700 transition-colors text-base sm:text-lg font-semibold shadow-md"
+                className="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 sm:px-8 py-3 rounded-full hover:from-blue-600 hover:to-purple-600 transition-all duration-300 text-base sm:text-lg font-semibold shadow-lg hover:scale-105"
               >
                 Закрыть
               </button>
@@ -243,15 +278,15 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
 
           {success && (
             <div className="flex flex-col items-center justify-center py-8 sm:py-12 animate-fadeIn">
-              <div className="bg-green-100 rounded-2xl p-4 sm:p-6 mb-6 sm:mb-8 flex items-center shadow-lg w-full max-w-xl mx-auto">
+              <div className="bg-green-500/20 border border-green-500/30 backdrop-blur-sm rounded-2xl p-4 sm:p-6 mb-6 sm:mb-8 flex items-center shadow-lg w-full max-w-xl mx-auto">
-                <CheckCircle className="w-8 h-8 sm:w-10 sm:h-10 text-green-600 mr-3 sm:mr-4 flex-shrink-0" />
+                <CheckCircle className="w-8 h-8 sm:w-10 sm:h-10 text-green-400 mr-3 sm:mr-4 flex-shrink-0" />
-                <span className="text-green-700 text-base sm:text-lg md:text-xl font-semibold leading-snug text-left">
+                <span className="text-green-300 text-base sm:text-lg md:text-xl font-semibold leading-snug text-left">
                   Благодарим за обращение в нашу компанию!<br className='hidden md:block' /> В течение 15 минут мы свяжемся с вами!
                 </span>
               </div>
               <button
                 onClick={closeModal}
-                className="bg-blue-600 text-white px-6 sm:px-8 py-3 rounded-full hover:bg-blue-700 transition-colors text-base sm:text-lg font-semibold shadow-md"
+                className="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 sm:px-8 py-3 rounded-full hover:from-blue-600 hover:to-purple-600 transition-all duration-300 text-base sm:text-lg font-semibold shadow-lg hover:scale-105"
               >
                 Закрыть
               </button>
@@ -259,7 +294,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
           )}
 
           {error && (
-            <div className="mt-4 sm:mt-6 bg-red-500 text-white text-center py-2 sm:py-3 px-3 sm:px-4 rounded-lg flex items-center justify-center min-h-[40px] sm:min-h-[48px] text-sm sm:text-base whitespace-pre-line">
+            <div className="mt-4 sm:mt-6 bg-red-500/20 border border-red-500/30 text-red-300 text-center py-2 sm:py-3 px-3 sm:px-4 rounded-xl flex items-center justify-center min-h-[40px] sm:min-h-[48px] text-sm sm:text-base backdrop-blur-sm">
               <AlertCircle className="w-4 h-4 sm:w-5 sm:h-5 mr-2 shrink-0" />
               <span className="block w-full break-words">{error}</span>
             </div>
@@ -270,7 +305,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
               {step > 1 && (
                 <button
                   onClick={handlePrev}
-                  className="bg-gray-200 text-gray-700 px-4 sm:px-6 py-2 rounded-full hover:bg-gray-300 transition-colors text-sm sm:text-base font-medium"
+                  className="bg-white/10 backdrop-blur-sm border border-white/20 text-white px-4 sm:px-6 py-2 rounded-full hover:bg-white/20 hover:scale-105 transition-all duration-300 text-sm sm:text-base font-medium"
                 >
                   ← Назад
                 </button>
@@ -278,7 +313,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
               {step < 4 && (
                 <button
                   onClick={handleNext}
-                  className="ml-auto bg-blue-600 text-white px-6 sm:px-8 py-2 rounded-full hover:bg-blue-700 transition-colors text-sm sm:text-base font-medium"
+                  className="ml-auto bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 sm:px-8 py-2 rounded-full hover:from-blue-600 hover:to-purple-600 hover:scale-105 transition-all duration-300 text-sm sm:text-base font-medium shadow-lg"
                 >
                   Далее →
                 </button>
@@ -286,7 +321,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
               {step === 4 && (
                 <button
                   onClick={handleNext}
-                  className="ml-auto bg-blue-600 text-white px-6 sm:px-8 py-2 rounded-full hover:bg-blue-700 transition-colors text-sm sm:text-base font-medium"
+                  className="ml-auto bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 sm:px-8 py-2 rounded-full hover:from-blue-600 hover:to-purple-600 hover:scale-105 transition-all duration-300 text-sm sm:text-base font-medium shadow-lg"
                 >
                   Рассчитать стоимость
                 </button>

src/components/MobileMenu.tsx

@@ -55,6 +55,13 @@ const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
           >
             Услуги
           </Link>
+          <Link 
+            href="#about" 
+            className="text-xl text-white hover:text-blue-400 transition-colors py-2"
+            onClick={onClose}
+          >
+            О нас
+          </Link>
           <Link 
             href="#projects" 
             className="text-xl text-white hover:text-blue-400 transition-colors py-2"
@@ -63,18 +70,11 @@ const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
             Каталог домов
           </Link>
           <Link 
-            href="#mortgage" 
+            href="#reviews" 
             className="text-xl text-white hover:text-blue-400 transition-colors py-2"
             onClick={onClose}
           >
-            Ипотека
+            Отзывы
-          </Link>
-          <Link 
-            href="#about" 
-            className="text-xl text-white hover:text-blue-400 transition-colors py-2"
-            onClick={onClose}
-          >
-            О нас
           </Link>
           <Link 
             href="#contacts" 

src/components/ProjectsSection.tsx

@@ -15,8 +15,8 @@ const projects = [
     description: 'Дом 11х9м, общая площадь 101,4 кв.м., 3 спальни, 1 санузел',
     images: [
       { type: 'facade', src: '/images/garmony.png', alt: 'Фасад дома Гармония' },
-      { type: 'plan', src: '/projects/garmony-plan1.jpg', alt: 'Планировка 1 этажа' },
+      { type: 'plan', src: '/images/2.jpg', alt: 'Планировка 1 этажа' },
-      { type: 'plan', src: '/projects/garmony-plan2.jpg', alt: 'Планировка 2 этажа' }
+      { type: 'plan', src: '/images/3.jpg', alt: 'Планировка 2 этажа' }
     ],
     file: '/projects/garmony.pdf',
   },
@@ -26,8 +26,8 @@ const projects = [
     description: 'Дом 14х13 м, общая площадь 142,8 кв.м, 3 спальни, 2 санузла',
     images: [
       { type: 'facade', src: '/images/gorizont.png', alt: 'Фасад дома Горизонт' },
-      { type: 'plan', src: '/projects/gorizont-plan1.jpg', alt: 'Планировка 1 этажа' },
+      { type: 'plan', src: '/images/22.jpg', alt: 'Планировка 1 этажа' },
-      { type: 'plan', src: '/projects/gorizont-plan2.jpg', alt: 'Планировка 2 этажа' }
+      { type: 'plan', src: '/images/33.jpg', alt: 'Планировка 2 этажа' }
     ],
     file: '/projects/gorizont.pdf',
   },
@@ -37,8 +37,7 @@ const projects = [
     description: 'Дом 14,2х10,5 м, общая площадь 131,4 кв.м., 3 спальни, 2 санузла',
     images: [
       { type: 'facade', src: '/images/filimonov.png', alt: 'Фасад дома Филимонов' },
-      { type: 'plan', src: '/projects/filimonov-plan1.jpg', alt: 'Планировка 1 этажа' },
+      { type: 'plan', src: '/images/333.jpg', alt: 'Планировка дома' }
-      { type: 'plan', src: '/projects/filimonov-plan2.jpg', alt: 'Планировка 2 этажа' }
     ],
     file: '/projects/filimonov.pdf',
   },
@@ -48,8 +47,7 @@ const projects = [
     description: 'Дом 12х8м, общая площадь 89,6 кв.м., 2 спальни, 1 санузел',
     images: [
       { type: 'facade', src: '/images/moronchov.png', alt: 'Фасад дома Моронцов' },
-      { type: 'plan', src: '/projects/moronchov-plan1.jpg', alt: 'Планировка 1 этажа' },
+      { type: 'plan', src: '/images/3333.jpg', alt: 'Планировка дома' }
-      { type: 'plan', src: '/projects/moronchov-plan2.jpg', alt: 'Планировка 2 этажа' }
     ],
     file: '/projects/moronchov.pdf',
   },
@@ -59,8 +57,8 @@ const projects = [
     description: 'Дом 15х12м, общая площадь 156,8 кв.м., 4 спальни, 2 санузла',
     images: [
       { type: 'facade', src: '/images/rancho.png', alt: 'Фасад дома Ранчо' },
-      { type: 'plan', src: '/projects/rancho-plan1.jpg', alt: 'Планировка 1 этажа' },
+      { type: 'plan', src: '/images/111.jpg', alt: 'Планировка 1 этажа' },
-      { type: 'plan', src: '/projects/rancho-plan2.jpg', alt: 'Планировка 2 этажа' }
+      { type: 'plan', src: '/images/222.jpg', alt: 'Планировка 2 этажа' }
     ],
     file: '/projects/rancho.pdf',
   },
@@ -70,8 +68,7 @@ const projects = [
     description: 'Дом 13х9м, общая площадь 118,2 кв.м., 3 спальни, 1 санузел',
     images: [
       { type: 'facade', src: '/images/zori.png', alt: 'Фасад дома Тихие Зори' },
-      { type: 'plan', src: '/projects/zori-plan1.jpg', alt: 'Планировка 1 этажа' },
+      { type: 'plan', src: '/images/122.jpg', alt: 'Планировка дома' }
-      { type: 'plan', src: '/projects/zori-plan2.jpg', alt: 'Планировка 2 этажа' }
     ],
     file: '/projects/zori.pdf',
   },
@@ -81,8 +78,7 @@ const projects = [
     description: 'Дом 16х10м, общая площадь 168,4 кв.м., 4 спальни, 3 санузла',
     images: [
       { type: 'facade', src: '/images/gnezdo.png', alt: 'Фасад дома Уютное гнездышко' },
-      { type: 'plan', src: '/projects/gnezdo-plan1.jpg', alt: 'Планировка 1 этажа' },
+      { type: 'plan', src: '/images/3333.jpg', alt: 'Планировка дома' }
-      { type: 'plan', src: '/projects/gnezdo-plan2.jpg', alt: 'Планировка 2 этажа' }
     ],
     file: '/projects/gnezdo.pdf',
   },
@@ -92,8 +88,8 @@ const projects = [
     description: 'Дом 10х8м, общая площадь 78,6 кв.м., 2 спальни, 1 санузел',
     images: [
       { type: 'facade', src: '/images/aura.png', alt: 'Фасад дома Аура' },
-      { type: 'plan', src: '/projects/aura-plan1.jpg', alt: 'Планировка 1 этажа' },
+      { type: 'plan', src: '/images/444.jpg', alt: 'Планировка 1 этажа' },
-      { type: 'plan', src: '/projects/aura-plan2.jpg', alt: 'Планировка 2 этажа' }
+      { type: 'plan', src: '/images/555.jpg', alt: 'Планировка 2 этажа' }
     ],
     file: '/projects/aura.pdf',
   },
@@ -103,8 +99,7 @@ const projects = [
     description: 'Дом 18х12м, общая площадь 198,4 кв.м., 5 спален, 3 санузла',
     images: [
       { type: 'facade', src: '/images/nade.png', alt: 'Фасад дома Надежда' },
-      { type: 'plan', src: '/projects/nade-plan1.jpg', alt: 'Планировка 1 этажа' },
+      { type: 'plan', src: '/images/666.jpg', alt: 'Планировка дома' }
-      { type: 'plan', src: '/projects/nade-plan2.jpg', alt: 'Планировка 2 этажа' }
     ],
     file: '/projects/nade.pdf',
   },
@@ -135,7 +130,7 @@ const ProjectImageSlider = ({ project }: { project: typeof projects[0] }) => {
         src={project.images[currentImageIndex].src}
         alt={project.images[currentImageIndex].alt}
         fill
-        className="object-cover transition-transform duration-700 group-hover:scale-110"
+        className="object-cover transition-transform duration-500 group-hover:scale-105"
       />
 
       {/* Навигация по изображениям */}
@@ -246,7 +241,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
         <div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div>
       </div>
 
-      <div className="container mx-auto px-4 relative z-10">
+      <div className="container mx-auto px-6 relative z-10">
         {/* Заголовок секции */}
         <FadeInSection as="div" className="text-center mb-16">
           <h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4">
@@ -261,7 +256,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
           <button
             onClick={handlePrevious}
             disabled={currentIndex === 0}
-            className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 z-10 bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 rounded-full p-3 hover:bg-white/20 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed group"
+            className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-6 z-10 bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 rounded-full p-3 hover:bg-white/20 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed group"
             aria-label="Предыдущий проект"
           >
             <svg className="w-6 h-6 text-white group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -273,7 +268,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
           <button
             onClick={handleNext}
             disabled={currentIndex >= totalSlides - 1}
-            className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 z-10 bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 rounded-full p-3 hover:bg-white/20 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed group"
+            className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-6 z-10 bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 rounded-full p-3 hover:bg-white/20 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed group"
             aria-label="Следующий проект"
           >
             <svg className="w-6 h-6 text-white group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -282,7 +277,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
           </button>
 
           {/* Контейнер проектов */}
-          <div className="overflow-hidden">
+          <div className="px-8 py-4">
             <div 
               className="grid transition-transform duration-300 ease-in-out gap-8"
               style={{
@@ -293,7 +288,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
                 <FadeInSection 
                   key={`${project.id}-${currentIndex}`} 
                   as="div" 
-                  className="group relative p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 hover:scale-105 hover:-translate-y-2"
+                  className="group relative p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-300 hover:scale-[1.02] hover:-translate-y-1"
                   delay={0.1 * index}
                 >
                   {/* Фон */}
@@ -354,7 +349,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
         <FadeInSection as="div" delay={0.6} className="text-center mt-16">
           <button
             onClick={onCatalogClick}
-            className="inline-flex items-center space-x-2 px-8 py-4 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-white/20 backdrop-blur-sm hover:scale-105 transition-transform duration-300 cursor-pointer group"
+            className="inline-flex items-center space-x-2 px-8 py-4 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-white/20 backdrop-blur-sm hover:scale-[1.02] transition-all duration-300 cursor-pointer group"
           >
             <span className="text-white font-medium text-lg">Получить полный каталог проектов</span>
             <div className="w-2 h-2 bg-green-400 rounded-full group-hover:scale-150 transition-transform duration-300"></div>

src/components/ReviewsSection.tsx

@@ -1,11 +1,9 @@
+'use client';
+
 import Image from 'next/image';
 import { Star } from 'lucide-react';
 import FadeInSection from './FadeInSection';
 
-type ReviewsSectionProps = {
-  onExcursionClick?: () => void;
-};
-
 const reviews = [
   {
     id: 1,
@@ -30,60 +28,75 @@ const reviews = [
   },
 ];
 
-const ReviewsSection = ({ onExcursionClick }: ReviewsSectionProps) => {
+const ReviewsSection = () => {
   return (
-    <section id="reviews" className="py-20 bg-gray-50">
+    <section id="reviews" className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
-      <div className="container mx-auto px-4">
+      {/* Статичный фон */}
-        <FadeInSection as="h2" className="text-3xl font-bold text-gray-900 mb-12 text-center">
+      <div className="absolute inset-0 opacity-10">
-          Отзывы клиентов
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
+        <div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div>
+      </div>
+
+      <div className="container mx-auto px-4 relative z-10">
+        {/* Заголовок секции */}
+        <FadeInSection as="div" className="text-center mb-16">
+          <h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4">
+            Отзывы клиентов
+          </h2>
+          <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
         </FadeInSection>
 
+        {/* Карточки отзывов */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
           {reviews.map((review, index) => (
             <FadeInSection 
               key={review.id} 
               as="div" 
-              className="bg-white p-6 rounded-lg shadow-sm"
+              className="group relative p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 hover:scale-105 hover:-translate-y-2"
               delay={0.2 * index}
             >
-              <div className="flex items-center mb-4">
+              {/* Фон */}
-                <div className="relative w-12 h-12 rounded-full overflow-hidden mr-4">
+              <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-                  <Image
+              
-                    src={review.image}
+              <div className="relative z-10">
-                    alt={review.name}
+                <div className="flex items-center mb-4">
-                    fill
+                  <div className="relative w-12 h-12 rounded-full overflow-hidden mr-4 group-hover:scale-110 transition-transform duration-300">
-                    className="object-cover"
+                    <Image
-                  />
+                      src={review.image}
-                </div>
+                      alt={review.name}
-                <div>
+                      fill
-                  <h3 className="text-lg font-bold text-gray-900">
+                      className="object-cover"
-                    {review.name}
+                    />
-                  </h3>
+                    {/* Декоративная рамка */}
-                  <div className="flex">
+                    <div className="absolute inset-0 rounded-full border border-white/20 group-hover:border-white/40 transition-colors duration-300"></div>
-                    {[...Array(review.rating)].map((_, i) => (
+                  </div>
-                      <Star
+                  <div>
-                        key={i}
+                    <h3 className="text-lg font-bold text-white mb-1 group-hover:text-blue-300 transition-all duration-300">
-                        className="w-4 h-4 text-yellow-400 fill-current"
+                      {review.name}
-                      />
+                    </h3>
-                    ))}
+                    <div className="flex">
+                      {[...Array(review.rating)].map((_, i) => (
+                        <Star
+                          key={i}
+                          className="w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
+                          style={{ transitionDelay: `${i * 50}ms` }}
+                        />
+                      ))}
+                    </div>
                   </div>
                 </div>
+                
+                <p className="text-gray-300 leading-relaxed">
+                  {review.text}
+                </p>
               </div>
-              <p className="text-gray-600">
+
-                {review.text}
+              {/* Декоративный элемент */}
-              </p>
+              <div className="absolute top-2 right-2 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
             </FadeInSection>
           ))}
         </div>
-
-        <FadeInSection as="div" className="mt-12 text-center" delay={0.8}>
-          <button
-            className="bg-white border-2 border-blue-600 text-blue-600 px-8 py-3 rounded-full hover:bg-blue-50 transition-colors"
-            onClick={onExcursionClick}
-          >
-            Записаться на экскурсию
-          </button>
-        </FadeInSection>
       </div>
     </section>
   );

src/components/TeamSection.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Image from 'next/image';
 import FadeInSection from './FadeInSection';
 
@@ -30,38 +32,62 @@ const team = [
 
 const TeamSection = () => {
   return (
-    <section className="py-16 md:py-20 bg-white">
+    <section className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
-      <div className="container mx-auto px-4">
+      {/* Статичный фон */}
-        <FadeInSection as="h2" className="text-2xl sm:text-3xl font-bold text-gray-900 mb-6 md:mb-12 text-center">
+      <div className="absolute inset-0 opacity-10">
-          Наша команда
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
+        <div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div>
+      </div>
+
+      <div className="container mx-auto px-4 relative z-10">
+        {/* Заголовок секции */}
+        <FadeInSection as="div" className="text-center mb-16">
+          <h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4">
+            Наша команда
+          </h2>
+          <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
         </FadeInSection>
-        <FadeInSection as="p" className="text-base sm:text-lg text-gray-600 text-center mb-8 md:mb-12 max-w-2xl mx-auto" delay={0.2}>
+
+        <FadeInSection as="p" className="text-lg text-gray-300 text-center mb-12 max-w-2xl mx-auto" delay={0.2}>
           Каждый день работает над тем, чтобы предоставить лучший сервис и сделать наших клиентов счастливыми
         </FadeInSection>
 
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
+        {/* Карточки команды */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
           {team.map((member, index) => (
             <FadeInSection 
               key={member.id} 
               as="div" 
-              className="text-center bg-gray-50 p-4 rounded-xl hover:shadow-lg transition-shadow"
+              className="group relative p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 hover:scale-105 hover:-translate-y-2"
               delay={0.3 + (index * 0.1)}
             >
-              <div className="relative w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 mx-auto mb-4 rounded-full overflow-hidden">
+              {/* Фон */}
-                <Image
+              <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-                  src={member.image}
+              
-                  alt={member.name}
+              <div className="relative z-10 text-center">
-                  fill
+                <div className="relative w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden group-hover:scale-110 transition-transform duration-300">
-                  className="object-cover"
+                  <Image
-                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
+                    src={member.image}
-                />
+                    alt={member.name}
+                    fill
+                    className="object-cover"
+                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
+                  />
+                  {/* Декоративная рамка */}
+                  <div className="absolute inset-0 rounded-full border-2 border-white/20 group-hover:border-white/40 transition-colors duration-300"></div>
+                </div>
+                
+                <h3 className="text-xl font-bold text-white mb-2 group-hover:text-blue-300 transition-all duration-300">
+                  {member.name}
+                </h3>
+                <p className="text-gray-300 leading-relaxed">
+                  {member.position}
+                </p>
               </div>
-              <h3 className="text-lg sm:text-xl font-bold text-gray-900 mb-2">
+
-                {member.name}
+              {/* Декоративный элемент */}
-              </h3>
+              <div className="absolute top-2 right-2 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
-              <p className="text-sm sm:text-base text-gray-600">
-                {member.position}
-              </p>
             </FadeInSection>
           ))}
         </div>

src/components/WhyChooseUsSection.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Shield, FileText, Clock, Users } from 'lucide-react';
 import FadeInSection from './FadeInSection';
 
@@ -10,11 +12,11 @@ const features = [
   {
     icon: FileText,
     title: 'Открытые и честные сметы',
-    description: 'Закрытый договор с фиксацией цены, стоимость не изменится на протяжении всего строительства',
+    description: 'Договор с фиксацией цены, стоимость не изменится на протяжении всего строительства',
   },
   {
     icon: Clock,
-    title: 'Повышенная гарантия до 5 лет',
+    title: 'Гарантия 5 лет',
     description: 'Гарантия качества дома',
   },
   {
@@ -26,27 +28,47 @@ const features = [
 
 const WhyChooseUsSection = () => {
   return (
-    <section className="py-20 bg-gray-50">
+    <section className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
-      <div className="container mx-auto px-4">
+      {/* Статичный фон */}
-        <FadeInSection as="h2" className="text-3xl font-bold text-gray-900 mb-12 text-center">
+      <div className="absolute inset-0 opacity-10">
-          Почему выбирают нас?
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
+        <div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div>
+      </div>
+
+      <div className="container mx-auto px-4 relative z-10">
+        {/* Заголовок секции */}
+        <FadeInSection as="div" className="text-center mb-16">
+          <h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4">
+            Почему выбирают нас?
+          </h2>
+          <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
         </FadeInSection>
 
+        {/* Карточки преимуществ */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
           {features.map((feature, index) => (
             <FadeInSection 
               key={index} 
               as="div" 
-              className="bg-white p-6 rounded-lg shadow-sm"
+              className="group relative p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 hover:scale-105 hover:-translate-y-2"
               delay={0.2 * index}
             >
-              <feature.icon className="w-12 h-12 text-blue-600 mb-4" />
+              {/* Фон */}
-              <h3 className="text-xl font-bold text-gray-900 mb-2">
+              <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-                {feature.title}
+              
-              </h3>
+              <div className="relative z-10">
-              <p className="text-gray-600">
+                <feature.icon className="w-12 h-12 text-blue-400 mb-4 group-hover:text-blue-300 group-hover:scale-110 transition-all duration-300" />
-                {feature.description}
+                <h3 className="text-xl font-bold text-white mb-3 group-hover:text-blue-300 transition-all duration-300">
-              </p>
+                  {feature.title}
+                </h3>
+                <p className="text-gray-300 leading-relaxed">
+                  {feature.description}
+                </p>
+              </div>
+
+              {/* Декоративный элемент */}
+              <div className="absolute top-2 right-2 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
             </FadeInSection>
           ))}
         </div>