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

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="bg-white rounded-xl shadow-2xl w-full max-w-2xl mx-auto relative animate-fadeIn max-h-[90vh] overflow-y-auto">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4">
+      {/* Декоративный фон */}
+      <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 ${
-                      material === m.value ? 'border-blue-600 shadow-lg' : 'border-gray-200 hover:border-blue-400'
+                    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-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 
-                        src={m.img} 
-                        alt={m.label} 
-                        fill 
-                        className="object-contain rounded-lg"
-                        sizes="(max-width: 640px) 80px, (max-width: 1024px) 96px, 96px"
-                      />
+                    {/* Фон при активном состоянии */}
+                    <div className={`absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 transition-opacity duration-300 ${
+                      material === m.value ? 'opacity-100' : 'opacity-0'
+                    }`}></div>
+                    
+                    <div className="relative z-10 flex flex-col items-center">
+                      <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">
-                    <input
-                      type="radio"
-                      name="area"
-                      value={a}
-                      checked={area === a}
-                      onChange={() => setArea(a)}
-                      className="accent-blue-600 w-4 h-4 sm:w-5 sm:h-5 mr-3"
-                    />
-                    <span className="text-base sm:text-lg text-gray-800">{a}</span>
+                  <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">
+                    <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>
+                    <div className="relative z-10 flex items-center">
+                      <input
+                        type="radio"
+                        name="area"
+                        value={a}
+                        checked={area === a}
+                        onChange={() => setArea(a)}
+                        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">
-                    <input
-                      type="radio"
-                      name="finish"
-                      value={f}
-                      checked={finish === f}
-                      onChange={() => setFinish(f)}
-                      className="accent-blue-600 w-4 h-4 sm:w-5 sm:h-5 mr-3"
-                    />
-                    <span className="text-base sm:text-lg text-gray-800">{f}</span>
+                  <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">
+                    <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>
+                    <div className="relative z-10 flex items-center">
+                      <input
+                        type="radio"
+                        name="finish"
+                        value={f}
+                        checked={finish === f}
+                        onChange={() => setFinish(f)}
+                        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">
-                    <input
-                      type="radio"
-                      name="finance"
-                      value={f}
-                      checked={finance === f}
-                      onChange={() => setFinance(f)}
-                      className="accent-blue-600 w-4 h-4 sm:w-5 sm:h-5 mr-3"
-                    />
-                    <span className="text-base sm:text-lg text-gray-800">{f}</span>
+                  <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">
+                    <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>
+                    <div className="relative z-10 flex items-center">
+                      <input
+                        type="radio"
+                        name="finance"
+                        value={f}
+                        checked={finance === f}
+                        onChange={() => setFinance(f)}
+                        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">
-                <CheckCircle className="w-8 h-8 sm:w-10 sm:h-10 text-green-600 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">
+              <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-400 mr-3 sm:mr-4 flex-shrink-0" />
+                <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">
-                <CheckCircle className="w-8 h-8 sm:w-10 sm:h-10 text-green-600 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">
+              <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-400 mr-3 sm:mr-4 flex-shrink-0" />
+                <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>