first commit

README.md

@@ -39,3 +39,4 @@ Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/bui
 "# yourhouse" 
 "# yourhouse" 
 "# yourhouse" 
+# yourhouse21

next.config.ts

@@ -2,6 +2,10 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   output: 'standalone',
+  images: {
+    unoptimized: false,
+    remotePatterns: [],
+  },
   /* config options here */
 };
 

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
+    "dev-npx": "npx next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

src/app/layout.tsx

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "YourHouse",
+  description: "Строительство каменных и каркасных домов с фиксацией цены",
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -4,11 +4,10 @@ import Header from '@/components/Header';
 import AboutSection from '@/components/AboutSection';
 import ProjectsSection from '@/components/ProjectsSection';
 import WhyChooseUsSection from '@/components/WhyChooseUsSection';
-import TeamSection from '@/components/TeamSection';
-import ReviewsSection from '@/components/ReviewsSection';
+import WorkExamplesSection from '@/components/TeamSection';
 import ContactSection from '@/components/ContactSection';
 import Footer from '@/components/Footer';
-import Image from 'next/image';
+
 import HouseCalculatorModal from '@/components/HouseCalculatorModal';
 import CatalogRequestModal from '@/components/CatalogRequestModal';
 import ExcursionModal from '@/components/ExcursionModal';
@@ -26,7 +25,6 @@ export default function Home() {
   const [phone, setPhone] = useState('');
   const [name, setName] = useState('');
   const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -51,44 +49,19 @@ export default function Home() {
   const handleFormSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
-    setLoading(true);
     
     if (!validateName(name)) {
       setError('Пожалуйста, укажите корректное имя (только буквы, не менее 2 символов)');
-      setLoading(false);
       return;
     }
     
     if (!validatePhone(phone)) {
       setError('Пожалуйста, укажите корректный российский номер телефона');
-      setLoading(false);
       return;
     }
     
-    // Отправляем данные в Telegram
-    try {
-      const res = await fetch('/api/send-telegram', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ 
-          name, 
-          phone, 
-          material: 'Расчет стоимости',
-          message: 'Запрос расчета стоимости дома' 
-        }),
-      });
-      
-      if (res.ok) {
-        // Если отправка успешна, открываем калькулятор
-        setIsCalculatorOpen(true);
-      } else {
-        setError('Ошибка отправки. Попробуйте позже.');
-      }
-    } catch {
-      setError('Ошибка отправки. Попробуйте позже.');
-    } finally {
-      setLoading(false);
-    }
+    // Просто открываем калькулятор без отправки
+    setIsCalculatorOpen(true);
   };
 
   return (
@@ -109,64 +82,70 @@ export default function Home() {
       <ExcursionModal isOpen={isExcursionModalOpen} onClose={() => setIsExcursionModalOpen(false)} />
       
       {/* Hero Section */}
-      <section className="relative min-h-screen pt-20 pb-16 flex items-center">
-        {/* Background Image */}
-        <div className="absolute inset-0 z-0">
-          <Image
-            src="/images/header.jpg"
-            alt="Строительство домов"
-            fill
-            className="object-cover"
-            priority
-          />
-          <div className="absolute inset-0 bg-black/60"></div>
-        </div>
+      <section 
+        className="relative min-h-screen pt-16 sm:pt-20 pb-12 sm:pb-16 flex items-center bg-cover bg-center bg-no-repeat"
+        style={{
+          backgroundImage: "url('/images/stanica.png')"
+        }}
+      >
+        {/* Background Overlay */}
+        <div className="absolute inset-0 bg-black/30 z-0"></div>
         
         {/* Content */}
-        <div className="container mx-auto px-4 relative z-10">
-          <div className="flex flex-col lg:flex-row items-center justify-between gap-12">
+        <div className="container mx-auto px-4 sm:px-6 relative z-10">
+          <div className="flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12">
             {/* Left Content */}
-                         <FadeInSection as="div" className="flex-1 text-white" delay={0.2}>
+                         <FadeInSection as="div" className="flex-1 text-white text-center lg:text-left" delay={0.2}>
               
-                             <h1 className="text-4xl lg:text-6xl xl:text-7xl font-bold text-white mb-6 leading-tight">
+              {/* Блок с локацией */}
+              <div className="mb-6 sm:mb-8 text-center lg:text-left">
+                <div className="inline-flex items-center justify-center bg-white/20 backdrop-blur-sm rounded-full px-4 py-2.5 border border-white/30">
+                  <svg className="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-white flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
+                  </svg>
+                  <span className="text-white text-sm font-medium leading-none">В республике Чувашия</span>
+                </div>
+              </div>
+              
+              <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-white mb-4 sm:mb-6 leading-tight">
                  СТРОИТЕЛЬСТВО КАМЕННЫХ<br />
                  И КАРКАСНЫХ ДОМОВ<br />
                  С ФИКСАЦИЕЙ ЦЕНЫ
                </h1>
                
-               <p className="text-xl lg:text-2xl text-white/90 mb-12">
-                 Построим технологичный дом от 6 млн. руб за 90 дней
+               <p className="text-lg sm:text-xl lg:text-2xl text-white/90 mb-8 sm:mb-12">
+                 Построим технологичный дом за 90 дней
                </p>
                
                {/* Stats Section */}
-               <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 mb-8">
-                 <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
-                   <div className="text-3xl lg:text-4xl font-bold text-white mb-2">+100</div>
-                   <div className="text-white/80 text-sm font-medium">Реализованных объектов</div>
+               <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 mb-6 sm:mb-8">
+                 <div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 sm:p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
+                   <div className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-2">+100</div>
+                   <div className="text-white/80 text-xs sm:text-sm font-medium">Реализованных объектов</div>
                  </div>
-                 <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
-                   <div className="text-3xl lg:text-4xl font-bold text-white mb-2">5</div>
-                   <div className="text-white/80 text-sm font-medium">Лет гарантии</div>
+                 <div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 sm:p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
+                   <div className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-2">5</div>
+                   <div className="text-white/80 text-xs sm:text-sm font-medium">Лет гарантии</div>
                  </div>
-                 <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
-                   <div className="text-3xl lg:text-4xl font-bold text-white mb-2">90%</div>
-                   <div className="text-white/80 text-sm font-medium">Клиентов рекомендуют нас</div>
+                 <div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 sm:p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
+                   <div className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-2">90%</div>
+                   <div className="text-white/80 text-xs sm:text-sm font-medium">Клиентов рекомендуют нас</div>
                  </div>
                </div>
             </FadeInSection>
             
             {/* Right Form */}
-            <FadeInSection as="div" className="w-full lg:w-96" delay={0.4}>
-              <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">
+            <FadeInSection as="div" className="w-full max-w-md lg:w-96" delay={0.4}>
+              <div className="group relative p-4 sm:p-6 lg: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">
                 {/* Фон */}
                 <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 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-6 text-center">
+                  <h3 className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4 sm:mb-6 text-center">
                     Получите расчет стоимости
                   </h3>
                   
-                  <form onSubmit={handleFormSubmit} className="space-y-6">
+                  <form onSubmit={handleFormSubmit} className="space-y-4 sm:space-y-6">
                     <input
                       type="tel"
                       placeholder="Ваш телефон"
@@ -175,37 +154,34 @@ export default function Home() {
                         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"
+                      className="w-full px-3 sm:px-4 py-2.5 sm: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 text-sm sm:text-base"
                     />
                     <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"
+                      className="w-full px-3 sm:px-4 py-2.5 sm: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 text-sm sm:text-base"
                     />
                     
                     <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"
+                      className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-3 sm:py-4 rounded-xl hover:from-blue-600 hover:to-purple-600 transition-all duration-300 text-base sm:text-lg font-semibold flex items-center justify-center group 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>
-                      )}
+                      Обсудить проект
+                      <svg className="w-4 h-4 sm:w-5 sm: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">
+                      <div className="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 text-xs sm:text-sm backdrop-blur-sm">
                         {error}
                       </div>
                     )}
                   </form>
                   
-                  <p className="text-xs text-gray-400 mt-4 text-center">
+                  <p className="text-xs text-gray-400 mt-3 sm:mt-4 text-center">
                     Нажимая кнопку &quot;Обсудить проект&quot;, вы соглашаетесь с{' '}
                     <a href="#" className="underline hover:text-blue-400 transition-colors duration-300">
                       Политикой конфиденциальности
@@ -226,8 +202,7 @@ export default function Home() {
       <AboutSection />
       <ProjectsSection onCatalogClick={() => setIsCatalogModalOpen(true)} />
       <WhyChooseUsSection />
-      <TeamSection />
-      <ReviewsSection />
+      <WorkExamplesSection />
       <ContactSection />
       <Footer />
     </main>

src/components/AboutSection.tsx

@@ -34,49 +34,60 @@ const AboutSection = () => {
   ];
 
   return (
-    <section id="about" className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
-      {/* Статичный фон */}
-      <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>
+    <section id="about" className="relative py-12 sm:py-16 lg:py-20 bg-gradient-to-br from-blue-50 via-white to-indigo-50 overflow-hidden">
+      {/* Современный геометрический фон */}
+      <div className="absolute inset-0 opacity-40">
+        {/* Треугольники */}
+        <div className="absolute top-10 left-10 w-16 sm:w-24 lg:w-32 h-16 sm:h-24 lg:h-32 bg-blue-500 transform rotate-45 opacity-20"></div>
+        <div className="absolute top-1/3 right-20 w-12 sm:w-18 lg:w-24 h-12 sm:h-18 lg:h-24 bg-indigo-600 transform rotate-12 opacity-30"></div>
+        <div className="absolute bottom-20 left-1/4 w-10 sm:w-16 lg:w-20 h-10 sm:h-16 lg:h-20 bg-cyan-500 transform -rotate-45 opacity-25"></div>
+        
+        {/* Круги с четкими краями */}
+        <div className="absolute top-1/4 right-1/3 w-8 sm:w-12 lg:w-16 h-8 sm:h-12 lg:h-16 bg-blue-400 rounded-full opacity-30"></div>
+        <div className="absolute bottom-1/3 right-10 w-6 sm:w-8 lg:w-12 h-6 sm:h-8 lg:h-12 bg-indigo-500 rounded-full opacity-40"></div>
+        <div className="absolute top-2/3 left-1/6 w-4 sm:w-6 lg:w-8 h-4 sm:h-6 lg:h-8 bg-cyan-400 rounded-full opacity-35"></div>
+        
+        {/* Линии */}
+        <div className="absolute top-0 left-1/3 w-1 h-full bg-gradient-to-b from-transparent via-blue-300 to-transparent opacity-20"></div>
+        <div className="absolute top-0 right-1/4 w-1 h-full bg-gradient-to-b from-transparent via-indigo-300 to-transparent opacity-15"></div>
       </div>
 
-      <div className="container mx-auto px-4 relative z-10">
+      <div className="container mx-auto px-4 sm: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">
+        <FadeInSection as="div" className="text-center mb-12 sm:mb-16">
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 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 lg:grid-cols-2 gap-16 items-center mb-20">
+        <div className="grid lg:grid-cols-2 gap-8 sm:gap-12 lg:gap-16 items-center mb-12 sm:mb-16 lg:mb-20">
           {/* Изображение */}
           <FadeInSection as="div" className="relative group">
-            <div className="relative h-[500px] w-full rounded-2xl overflow-hidden">
+            <div className="relative h-[300px] sm:h-[400px] lg: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/company2.jpg"
-                alt="О нашей компании"
+                src="/images/stroy.jpg"
+                alt="Строительная бригада за работой"
                 fill
                 className="object-cover transition-transform duration-700 group-hover:scale-110"
+                priority
               />
               {/* Декоративные элементы */}
-              <div className="absolute -top-4 -left-4 w-24 h-24 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full blur-xl"></div>
-              <div className="absolute -bottom-4 -right-4 w-32 h-32 bg-gradient-to-br from-purple-500/30 to-blue-500/30 rounded-full blur-xl"></div>
+              <div className="absolute -top-4 -left-4 w-16 sm:w-20 lg:w-24 h-16 sm:h-20 lg:h-24 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full blur-xl"></div>
+              <div className="absolute -bottom-4 -right-4 w-20 sm:w-24 lg:w-32 h-20 sm:h-24 lg:h-32 bg-gradient-to-br from-purple-500/30 to-blue-500/30 rounded-full blur-xl"></div>
             </div>
           </FadeInSection>
 
           {/* Текстовый контент */}
           <FadeInSection as="div" delay={0.2}>
-            <div className="space-y-8">
-              <div className="space-y-6">
-                <h3 className="text-2xl font-bold text-white">
+            <div className="lg:h-[500px] flex flex-col justify-center space-y-4 sm:space-y-6">
+              <div className="space-y-3 sm:space-y-4">
+                <h3 className="text-xl sm:text-2xl font-bold text-gray-800">
                   Строим дома вашей мечты
                 </h3>
-                <p className="text-gray-300 leading-relaxed text-lg">
+                <p className="text-gray-600 leading-relaxed text-base sm:text-lg lg:text-xl">
                   Мы - команда профессионалов с более чем 10-летним опытом в строительстве 
                   современных домов. Наша миссия - создавать качественное и комфортное 
                   жилье для наших клиентов, используя передовые технологии и материалы.
@@ -84,16 +95,16 @@ const AboutSection = () => {
               </div>
 
               {/* Особенности */}
-              <div className="space-y-4">
+              <div className="space-y-3">
                 {features.map((feature, index) => (
                   <FadeInSection key={index} delay={0.3 + index * 0.1}>
-                    <div className="flex items-start space-x-4 p-4 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 hover:bg-white/10 transition-all duration-300 group">
-                      <div className="text-2xl group-hover:scale-110 transition-transform duration-300">
+                    <div className="flex items-start space-x-3 p-3 rounded-xl bg-white/80 backdrop-blur-sm border border-gray-200 hover:bg-white/90 hover:shadow-lg transition-all duration-300 group">
+                      <div className="text-2xl group-hover:scale-110 transition-transform duration-300 flex-shrink-0">
                         {feature.icon}
                       </div>
                       <div>
-                        <h4 className="font-semibold text-white mb-1">{feature.title}</h4>
-                        <p className="text-gray-400 text-sm">{feature.description}</p>
+                        <h4 className="font-bold text-gray-800 mb-1 text-lg">{feature.title}</h4>
+                        <p className="text-gray-600 text-base leading-snug">{feature.description}</p>
                       </div>
                     </div>
                   </FadeInSection>
@@ -105,23 +116,23 @@ const AboutSection = () => {
 
         {/* Статистика */}
         <FadeInSection as="div" delay={0.4}>
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
             {stats.map((stat, index) => (
               <div
                 key={index}
-                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-4 sm:p-6 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500 hover:scale-105 hover:-translate-y-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="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                 
                 <div className="relative z-10 text-center">
-                  <div className="text-3xl mb-2 group-hover:scale-110 transition-transform duration-300">
+                  <div className="text-3xl sm:text-4xl lg:text-5xl mb-2 sm:mb-4 group-hover:scale-110 transition-transform duration-300">
                     {stat.icon}
                   </div>
-                  <div className="text-3xl font-bold text-white mb-2 group-hover:text-blue-300 transition-all duration-300 drop-shadow-lg">
+                  <div className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-800 mb-2 sm:mb-4 group-hover:text-blue-600 transition-all duration-300 drop-shadow-lg">
                     {stat.number}
                   </div>
-                  <div className="text-gray-300 text-sm font-medium">
+                  <div className="text-gray-600 text-sm sm:text-base lg:text-lg font-medium leading-relaxed">
                     {stat.label}
                   </div>
                 </div>
@@ -137,10 +148,49 @@ const AboutSection = () => {
         <FadeInSection as="div" delay={0.6} className="text-center mt-16">
           <button
             onClick={() => setIsContactModalOpen(true)}
-            className="inline-flex items-center space-x-2 px-6 py-3 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"
+            className="group relative overflow-hidden rounded-2xl hover:scale-105 transition-all duration-500 shadow-2xl hover:shadow-3xl bg-cover bg-center bg-no-repeat"
+            style={{
+              backgroundImage: "url('/images/4.1.png')"
+            }}
           >
-            <span className="text-white font-medium">Готовы начать строительство?</span>
-            <div className="w-2 h-2 bg-green-400 rounded-full"></div>
+            {/* Легкий оверлей для лучшей читаемости текста */}
+            <div className="absolute inset-0 bg-black/20 rounded-2xl"></div>
+            
+            {/* Анимированный блик */}
+            <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
+            
+            {/* Контент кнопки */}
+            <div className="relative z-10 px-8 py-6 rounded-2xl">
+              <div className="flex items-center justify-center space-x-4">
+                {/* Иконка дома */}
+                <div className="flex-shrink-0 w-12 h-12 bg-white/20 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                  <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/>
+                  </svg>
+                </div>
+                
+                {/* Текст */}
+                <div className="text-center">
+                  <h3 className="text-xl font-bold text-white mb-1 group-hover:text-yellow-200 transition-colors duration-300 drop-shadow-lg">
+                    Готовы начать строительство?
+                  </h3>
+                  <p className="text-white/90 text-sm group-hover:text-white transition-colors duration-300 drop-shadow-md">
+                    Получите бесплатную консультацию прямо сейчас
+                  </p>
+                </div>
+                
+                {/* Стрелка */}
+                <div className="flex-shrink-0 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center group-hover:translate-x-1 transition-transform duration-300">
+                  <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  </svg>
+                </div>
+              </div>
+              
+              {/* Декоративные элементы */}
+              <div className="absolute top-2 right-2 w-2 h-2 bg-yellow-400 rounded-full animate-pulse"></div>
+              <div className="absolute bottom-2 left-2 w-1 h-1 bg-white/60 rounded-full"></div>
+            </div>
           </button>
         </FadeInSection>
       </div>

src/components/CallbackModal.tsx

@@ -68,69 +68,102 @@ const CallbackModal = ({ isOpen, onClose }: CallbackModalProps) => {
   };
 
   return (
-    <div className="fixed inset-0 bg-gray-900/50 z-50 flex items-center justify-center">
-      <div className="bg-white rounded-lg p-8 max-w-md w-full mx-4 relative">
-        <button
-          onClick={closeModal}
-          className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
-        >
-          <X className="w-6 h-6" />
-        </button>
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+      <div className="relative max-w-md w-full">
+        {/* Декоративные фоновые элементы */}
+        <div className="absolute -top-8 -left-8 w-32 h-32 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full blur-2xl opacity-70"></div>
+        <div className="absolute -bottom-8 -right-8 w-24 h-24 bg-gradient-to-br from-purple-500/30 to-blue-500/30 rounded-full blur-2xl opacity-70"></div>
         
-        <h2 className="text-2xl font-bold text-gray-900 mb-6">
-          Заказать звонок
-        </h2>
+        {/* Основной контейнер модального окна */}
+        <div className="relative bg-white/95 backdrop-blur-md border border-gray-200 rounded-2xl p-8 shadow-2xl">
+          {/* Кнопка закрытия */}
+          <button
+            onClick={closeModal}
+            className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors duration-300 hover:bg-gray-100 rounded-full p-2 group"
+          >
+            <X className="w-5 h-5 group-hover:scale-110 transition-transform duration-300" />
+          </button>
 
-        {!success ? (
-          <form className="space-y-4" onSubmit={handleSubmit}>
-            <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"
-            />
-            <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"
-            />
-            <textarea
-              placeholder="Ваше сообщение (необязательно)"
-              rows={3}
-              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"
-            />
-            {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 className="text-center mb-8">
+            <h2 className="text-3xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-2">
+              Заказать звонок
+            </h2>
+            <div className="w-16 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
           </div>
-        )}
+
+          {!success ? (
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div>
+                <input
+                  type="text"
+                  placeholder="Ваше имя"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
+                  required
+                />
+              </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 border border-gray-200 rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
+                  required
+                />
+              </div>
+              
+              <div>
+                <textarea
+                  placeholder="Сообщение (необязательно)"
+                  rows={3}
+                  value={message}
+                  onChange={(e) => setMessage(e.target.value)}
+                  className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300 resize-none"
+                />
+              </div>
+
+              {error && (
+                <div className="bg-red-100 border border-red-300 text-red-700 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-100 border border-green-300 rounded-2xl p-6 mb-6 flex items-center shadow-lg w-full">
+                <CheckCircle className="w-8 h-8 text-green-600 mr-3" />
+                <span className="text-green-700 text-lg font-semibold leading-snug text-left">
+                  Спасибо! Ваш запрос успешно отправлен.
+                </span>
+              </div>
+              <button
+                onClick={closeModal}
+                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 font-semibold shadow-md hover:scale-105"
+              >
+                Закрыть
+              </button>
+            </div>
+          )}
+
+          {/* Декоративный элемент */}
+          <div className="absolute top-4 left-4 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50"></div>
+        </div>
       </div>
     </div>
   );

src/components/CatalogRequestModal.tsx

@@ -66,10 +66,10 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/80 backdrop-blur-sm">
-      <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="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+      <div className="relative bg-white/95 backdrop-blur-md rounded-2xl shadow-2xl w-full max-w-lg mx-4 animate-fadeIn border border-gray-200 overflow-hidden">
         {/* Декоративные фоновые элементы */}
-        <div className="absolute inset-0 opacity-10">
+        <div className="absolute inset-0 opacity-30">
           <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>
@@ -77,13 +77,13 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
 
         <button
           onClick={closeModal}
-          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"
+          className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 z-20 p-2 rounded-full hover:bg-gray-100 transition-all duration-300"
           aria-label="Закрыть"
         >
           <X className="w-6 h-6" />
         </button>
 
-        <div className="relative z-10 p-8 md:p-10 flex flex-col items-center">
+        <div className="relative z-10 p-8">
           <div className="w-full flex justify-center mb-6">
             <div className="relative group">
               <Image 
@@ -92,6 +92,7 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
                 width={320} 
                 height={120} 
                 className="object-contain rounded-lg shadow-md group-hover:scale-105 transition-transform duration-300" 
+                unoptimized={true}
               />
               {/* Декоративные элементы вокруг изображения */}
               <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>
@@ -99,10 +100,10 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
             </div>
           </div>
 
-          <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 className="text-2xl md:text-3xl font-bold text-center mb-2 bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent">
             Укажите контакты
           </h2>
-          <p className="text-gray-300 text-center mb-8">И мы отправим каталог проектов на WhatsApp</p>
+          <p className="text-gray-600 text-center mb-8">И мы отправим каталог проектов на WhatsApp</p>
 
           {!success ? (
             <form onSubmit={handleSubmit} className="w-full flex flex-col gap-4">
@@ -114,14 +115,14 @@ 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 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"
+                className="w-full px-4 py-3 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 text-lg text-gray-800 placeholder-gray-500 hover:border-gray-300 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 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"
+                className="w-full px-4 py-3 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 text-lg text-gray-800 placeholder-gray-500 hover:border-gray-300 transition-all duration-300"
               />
               <button
                 type="submit"
@@ -130,8 +131,9 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
               >
                 {loading ? 'Отправка...' : 'Хочу проект'}
               </button>
+              
               {error && (
-                <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">
+                <div className="bg-red-100 border border-red-300 text-red-700 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>
@@ -139,9 +141,9 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
             </form>
           ) : (
             <div className="w-full flex flex-col items-center animate-fadeIn">
-              <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-400 mr-4 flex-shrink-0" />
-                <span className="text-green-300 text-lg md:text-xl font-semibold leading-snug text-left">
+              <div className="bg-green-100 border border-green-300 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" />
+                <span className="text-green-700 text-lg md:text-xl font-semibold leading-snug text-left">
                   Спасибо! Данные успешно отправлены.
                 </span>
               </div>

src/components/ContactModal.tsx

@@ -10,13 +10,16 @@ interface ContactModalProps {
 const ContactModal = ({ isOpen, onClose }: ContactModalProps) => {
   const [formData, setFormData] = useState({
     phone: '',
-    name: ''
+    name: '',
+    message: ''
   });
   const [isLoading, setIsLoading] = useState(false);
   const [errors, setErrors] = useState({
     phone: '',
     name: ''
   });
+  const [success, setSuccess] = useState('');
+  const [error, setError] = useState('');
 
   const validatePhone = (phone: string) => {
     const phoneRegex = /^[78]\d{10}$/;
@@ -37,6 +40,10 @@ const ContactModal = ({ isOpen, onClose }: ContactModalProps) => {
     }
   };
 
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    handleInputChange('name', e.target.value);
+  };
+
   const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let value = e.target.value.replace(/\D/g, '');
     
@@ -56,6 +63,10 @@ const ContactModal = ({ isOpen, onClose }: ContactModalProps) => {
     handleInputChange('phone', formattedValue);
   };
 
+  const handleMessageChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    handleInputChange('message', e.target.value);
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     
@@ -91,15 +102,18 @@ const ContactModal = ({ isOpen, onClose }: ContactModalProps) => {
           type: 'contact',
           name: formData.name,
           phone: formData.phone,
+          message: formData.message
         }),
       });
 
       if (response.ok) {
-        setFormData({ phone: '', name: '' });
+        setFormData({ phone: '', name: '', message: '' });
+        setSuccess('Сообщение успешно отправлено!');
         onClose();
       }
     } catch (error) {
       console.error('Ошибка отправки:', error);
+      setError('Произошла ошибка при отправке сообщения. Пожалуйста, попробуйте позже.');
     } finally {
       setIsLoading(false);
     }
@@ -108,83 +122,98 @@ const ContactModal = ({ isOpen, onClose }: ContactModalProps) => {
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
       <div className="relative w-full max-w-md">
         {/* Фоновые декоративные элементы */}
         <div className="absolute -top-4 -left-4 w-24 h-24 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full blur-xl"></div>
         <div className="absolute -bottom-4 -right-4 w-32 h-32 bg-gradient-to-br from-purple-500/30 to-blue-500/30 rounded-full blur-xl"></div>
         
         {/* Основной контейнер */}
-        <div className="relative bg-gradient-to-br from-gray-900/95 to-gray-800/95 backdrop-blur-md border border-white/20 rounded-2xl p-8 shadow-2xl">
+        <div className="relative bg-white/95 backdrop-blur-md border border-gray-200 rounded-2xl p-8 shadow-2xl">
           {/* Кнопка закрытия */}
           <button
             onClick={onClose}
-            className="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 transition-colors duration-200 text-white"
+            className="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200 text-gray-600"
           >
             ✕
           </button>
 
           {/* Заголовок */}
           <div className="text-center mb-8">
-            <h2 className="text-2xl md:text-3xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-2">
+            <h2 className="text-2xl md:text-3xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-2">
               Укажите свои данные
             </h2>
-            <p className="text-gray-300 text-sm">
+            <p className="text-gray-600 text-sm">
               И наш менеджер свяжется с Вами в ближайшее время
             </p>
             <div className="w-16 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full mt-4"></div>
           </div>
 
           {/* Форма */}
-          <form onSubmit={handleSubmit} className="space-y-6">
-            {/* Поле телефона */}
-            <div>
-              <input
-                type="tel"
-                value={formData.phone}
-                onChange={handlePhoneChange}
-                placeholder="+7 (999) 999-99-99"
-                className="w-full px-4 py-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-blue-400 focus:bg-white/10 transition-all duration-300"
-              />
-              {errors.phone && (
-                <p className="text-red-400 text-sm mt-2 ml-1">{errors.phone}</p>
-              )}
-            </div>
-
-            {/* Поле имени */}
+          <form onSubmit={handleSubmit} className="space-y-4">
             <div>
               <input
                 type="text"
+                name="name"
+                placeholder="Ваше имя"
                 value={formData.name}
-                onChange={(e) => handleInputChange('name', e.target.value)}
-                placeholder="Имя"
-                className="w-full px-4 py-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-blue-400 focus:bg-white/10 transition-all duration-300"
+                onChange={handleNameChange}
+                className="w-full px-4 py-3 rounded-lg bg-white border border-gray-200 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/20 transition-all duration-300 text-gray-800 placeholder-gray-500"
+                required
+              />
+            </div>
+            
+            <div>
+              <input
+                type="tel"
+                name="phone"
+                placeholder="Ваш телефон"
+                value={formData.phone}
+                onChange={handlePhoneChange}
+                className="w-full px-4 py-3 rounded-lg bg-white border border-gray-200 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/20 transition-all duration-300 text-gray-800 placeholder-gray-500"
+                required
+              />
+            </div>
+            
+            <div>
+              <textarea
+                name="message"
+                placeholder="Ваше сообщение"
+                rows={4}
+                value={formData.message}
+                onChange={handleMessageChange}
+                className="w-full px-4 py-3 rounded-lg bg-white border border-gray-200 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/20 transition-all duration-300 text-gray-800 placeholder-gray-500 resize-none"
+                required
               />
-              {errors.name && (
-                <p className="text-red-400 text-sm mt-2 ml-1">{errors.name}</p>
-              )}
             </div>
             
-            {/* Кнопка отправки */}
             <button
               type="submit"
               disabled={isLoading}
-              className="w-full py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 disabled:from-gray-600 disabled:to-gray-700 text-white font-semibold rounded-xl transition-all duration-300 transform hover:scale-105 disabled:scale-100 disabled:cursor-not-allowed shadow-lg"
+              className="w-full py-3 px-6 rounded-lg bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold hover:from-blue-600 hover:to-purple-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 hover:scale-[1.02] hover:shadow-lg"
             >
-              {isLoading ? (
-                <div className="flex items-center justify-center space-x-2">
-                  <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
-                  <span>Отправка...</span>
-                </div>
-              ) : (
-                'Заказать звонок'
-              )}
+              {isLoading ? 'Отправка...' : 'Отправить сообщение'}
             </button>
+            
+            {success && (
+              <div className="bg-green-100 border border-green-300 text-green-700 text-center py-3 px-4 rounded-xl text-sm">
+                {success}
+              </div>
+            )}
+            
+            {error && (
+              <div className="bg-red-100 border border-red-300 text-red-700 text-center py-3 px-4 rounded-xl text-sm">
+                {error}
+              </div>
+            )}
           </form>
           
-          {/* Декоративные элементы */}
-          <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 className="absolute bottom-2 left-8 w-1 h-1 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full opacity-60"></div>
+          <p className="text-xs text-gray-500 mt-4 text-center">
+            Нажимая кнопку &ldquo;Отправить сообщение&rdquo;, вы соглашаетесь с{' '}
+            <a href="#" className="underline hover:text-blue-600 transition-colors duration-300">
+              Политикой конфиденциальности
+            </a>
+          </p>
         </div>
       </div>
     </div>

src/components/ContactSection.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useState } from 'react';
-import { Phone, Mail, MapPin, CheckCircle, AlertCircle } from 'lucide-react';
 import FadeInSection from './FadeInSection';
 
 const ContactSection = () => {
@@ -52,84 +51,128 @@ const ContactSection = () => {
   };
 
   return (
-    <section id="contacts" className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
-      {/* Статичный фон */}
-      <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>
+    <section id="contact" className="relative py-12 sm:py-16 lg:py-20 bg-gradient-to-tr from-gray-50 via-white to-blue-50 overflow-hidden">
+      {/* Современный фон */}
+      <div className="absolute inset-0 opacity-30">
+        {/* Геометрические фигуры */}
+        <div className="absolute top-16 left-16 w-16 sm:w-20 lg:w-24 h-16 sm:h-20 lg:h-24 bg-blue-500 rounded-full opacity-20"></div>
+        <div className="absolute top-32 right-24 w-12 sm:w-16 lg:w-20 h-12 sm:h-16 lg:h-20 bg-indigo-600 transform rotate-45 opacity-25"></div>
+        <div className="absolute bottom-24 left-1/4 w-10 sm:w-14 lg:w-18 h-10 sm:h-14 lg:h-18 bg-cyan-500 rounded-full opacity-30"></div>
+        
+        {/* Соединительные линии */}
+        <div className="absolute top-1/3 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-300 to-transparent opacity-25"></div>
+        <div className="absolute bottom-1/3 left-0 w-full h-px bg-gradient-to-r from-transparent via-indigo-300 to-transparent opacity-20"></div>
+        
+        {/* Вертикальные линии */}
+        <div className="absolute top-0 left-1/3 w-px h-full bg-gradient-to-b from-transparent via-blue-300 to-transparent opacity-20"></div>
+        <div className="absolute top-0 right-1/4 w-px h-full bg-gradient-to-b from-transparent via-indigo-300 to-transparent opacity-15"></div>
       </div>
 
-      <div className="container mx-auto px-4 relative z-10">
+      <div className="container mx-auto px-4 sm: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">
+        <FadeInSection as="div" className="text-center mb-12 sm:mb-16">
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 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 lg:grid-cols-2 gap-12">
+        <div className="grid lg:grid-cols-2 gap-8 sm:gap-12">
           {/* Контактная информация */}
           <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"
+            className="group relative p-6 sm:p-8 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl 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="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 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-xl font-bold text-white mb-2 group-hover/item:text-blue-300 transition-colors duration-300">
-                    Телефон
-                  </h3>
-                  <span className="text-gray-300 text-lg">
-                    будет другой
-                  </span>
-                </div>
-              </div>
+            <div className="relative z-10">
+              <h3 className="text-xl sm:text-2xl font-bold text-gray-800 mb-4 sm:mb-6 group-hover:text-blue-600 transition-all duration-300">
+                Свяжитесь с нами
+              </h3>
               
-              <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 className="space-y-4 sm:space-y-6">
+                <div className="flex items-start space-x-3 sm:space-x-4">
+                  <div className="flex-shrink-0 w-10 sm:w-12 h-10 sm:h-12 bg-blue-500/20 rounded-full flex items-center justify-center group-hover:bg-blue-500/30 transition-colors duration-300">
+                    <svg className="w-5 sm:w-6 h-5 sm:h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-gray-600 text-sm sm:text-base mb-1">Телефоны</p>
+                    <div className="space-y-1">
+                      <a href="tel:+79530132423" className="block text-lg sm:text-xl font-semibold text-gray-800 hover:text-blue-600 transition-colors duration-300">
+                      +7 953 013 24 23
+                    </a>
+                      <a href="tel:+79530148606" className="block text-lg sm:text-xl font-semibold text-gray-800 hover:text-blue-600 transition-colors duration-300">
+                        +7 953 014 86 06
+                      </a>
+                    </div>
+                  </div>
                 </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 className="flex items-start space-x-3 sm:space-x-4">
+                  <div className="flex-shrink-0 w-10 sm:w-12 h-10 sm:h-12 bg-green-500/20 rounded-full flex items-center justify-center group-hover:bg-green-500/30 transition-colors duration-300">
+                    <svg className="w-5 sm:w-6 h-5 sm:h-6 text-green-600" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.787"/>
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-gray-600 text-sm sm:text-base mb-1">WhatsApp</p>
+                    <div className="space-y-1">
+                      <a href="https://wa.me/79530132423" className="block text-lg sm:text-xl font-semibold text-gray-800 hover:text-green-600 transition-colors duration-300">
+                      +7 953 013 24 23
+                    </a>
+                      <a href="https://wa.me/79530148606" className="block text-lg sm:text-xl font-semibold text-gray-800 hover:text-green-600 transition-colors duration-300">
+                        +7 953 014 86 06
+                      </a>
+                    </div>
+                  </div>
                 </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 className="flex items-start space-x-3 sm:space-x-4">
+                  <div className="flex-shrink-0 w-10 sm:w-12 h-10 sm:h-12 bg-red-500/20 rounded-full flex items-center justify-center group-hover:bg-red-500/30 transition-colors duration-300">
+                    <svg className="w-5 sm:w-6 h-5 sm:h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-gray-600 text-sm sm:text-base mb-1">Адрес</p>
+                    <p className="text-lg sm:text-xl font-semibold text-gray-800">
+                      г. Чебоксары,<br />ул. Калинина, 107
+                    </p>
+                  </div>
+                </div>
+                
+                <div className="flex items-start space-x-3 sm:space-x-4">
+                  <div className="flex-shrink-0 w-10 sm:w-12 h-10 sm:h-12 bg-purple-500/20 rounded-full flex items-center justify-center group-hover:bg-purple-500/30 transition-colors duration-300">
+                    <svg className="w-5 sm:w-6 h-5 sm:h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-gray-600 text-sm sm:text-base mb-1">Время работы</p>
+                    <p className="text-lg sm:text-xl font-semibold text-gray-800">
+                      Пн - Вс с 8:00 до 20:00
+                    </p>
+                  </div>
+                </div>
+                
+                <div className="flex items-start space-x-3 sm:space-x-4">
+                  <div className="flex-shrink-0 w-10 sm:w-12 h-10 sm:h-12 bg-orange-500/20 rounded-full flex items-center justify-center group-hover:bg-orange-500/30 transition-colors duration-300">
+                    <svg className="w-5 sm:w-6 h-5 sm:h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-gray-600 text-sm sm:text-base mb-1">Email</p>
+                    <a href="mailto:Vashdom121@mail.ru" className="text-lg sm:text-xl font-semibold text-gray-800 hover:text-orange-600 transition-colors duration-300">
+                      Vashdom121@mail.ru
+                    </a>
+                  </div>
+                </div>
               </div>
             </div>
 
@@ -140,71 +183,87 @@ const ContactSection = () => {
           {/* Форма обратной связи */}
           <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"
+            className="group relative p-6 sm:p-8 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl 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="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 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 className="text-xl sm:text-2xl font-bold text-gray-800 mb-4 sm:mb-6 group-hover:text-blue-600 transition-all duration-300">
+                Задать вопрос
               </h3>
-              {!success ? (
-                <form className="space-y-6" onSubmit={handleSubmit}>
+              
+              {success ? (
+                <div className="text-center py-8 sm:py-12">
+                  <div className="w-12 sm:w-16 h-12 sm:h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <svg className="w-6 sm:w-8 h-6 sm:h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                  </div>
+                  <p className="text-lg sm:text-xl font-semibold text-green-600 mb-2">Спасибо за обращение!</p>
+                  <p className="text-gray-600 text-sm sm:text-base">Мы свяжемся с вами в ближайшее время</p>
+                </div>
+              ) : (
+                <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6">
                   <div>
+                    <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
+                      Ваше имя
+                    </label>
                     <input
                       type="text"
-                      placeholder="Ваше имя"
+                      id="name"
                       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"
+                      onChange={(e) => setName(e.target.value)}
+                      className="w-full px-3 sm:px-4 py-2 sm:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 text-sm sm:text-base"
+                      placeholder="Введите ваше имя"
+                      required
                     />
                   </div>
+                  
                   <div>
+                    <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
+                      Телефон
+                    </label>
                     <input
                       type="tel"
-                      placeholder="Ваш телефон"
+                      id="phone"
                       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"
+                      onChange={(e) => setPhone(e.target.value)}
+                      className="w-full px-3 sm:px-4 py-2 sm:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 text-sm sm:text-base"
+                      placeholder="+7 (999) 123-45-67"
+                      required
                     />
                   </div>
+                  
                   <div>
+                    <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
+                      Сообщение
+                    </label>
                     <textarea
-                      placeholder="Ваше сообщение"
-                      rows={4}
+                      id="message"
                       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"
+                      onChange={(e) => setMessage(e.target.value)}
+                      rows={4}
+                      className="w-full px-3 sm:px-4 py-2 sm:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 text-sm sm:text-base resize-none"
+                      placeholder="Ваш вопрос или комментарий..."
                     />
                   </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 className="p-3 sm:p-4 bg-red-50 border border-red-200 rounded-lg">
+                      <p className="text-red-600 text-sm sm:text-base">{error}</p>
                     </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"
+                    className="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 sm:py-4 px-6 sm:px-8 rounded-lg font-semibold hover:from-blue-600 hover:to-purple-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base"
                   >
-                    {loading ? 'Отправка...' : 'Отправить'}
+                    {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>
 

src/components/Footer.tsx

@@ -46,8 +46,21 @@ const Footer = () => {
           <div>
             <h4 className="text-lg font-bold mb-4">Контакты</h4>
             <ul className="space-y-2 text-gray-400">
-              <li>+7 (900) 123-45-67</li>
-              <li>info@vashdom.ru</li>
+              <li>
+                <a href="tel:+79530132423" className="hover:text-white transition-colors">
+                  +7 953 013 24 23
+                </a>
+              </li>
+              <li>
+                <a href="tel:+79530148606" className="hover:text-white transition-colors">
+                  +7 953 014 86 06
+                </a>
+              </li>
+              <li>
+                <a href="mailto:Vashdom121@mail.ru" className="hover:text-white transition-colors">
+                  Vashdom121@mail.ru
+                </a>
+              </li>
               <li>
                 г. Чебоксары,<br />
                 ул. Калинина, 107
@@ -71,7 +84,7 @@ const Footer = () => {
         </div>
         
         <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
-          <p>© 2021 ВашДом. Все права защищены.</p>
+          <p>© 2021-2025 ВашДом. Все права защищены.</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

@@ -1,79 +1,121 @@
 'use client';
 
 import Link from 'next/link';
-import { Menu } from 'lucide-react';
+import { Menu, Phone } from 'lucide-react';
 import { useState } from 'react';
 import CallbackModal from './CallbackModal';
+import HouseCalculatorModal from './HouseCalculatorModal';
 import MobileMenu from './MobileMenu';
 import FadeInOnMount from './FadeInOnMount';
 
 const Header = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isCalculatorOpen, setIsCalculatorOpen] = useState(false);
 
   return (
     <>
-      <FadeInOnMount as="header" className={`fixed w-full z-50 bg-gray-900/95 backdrop-blur-sm py-4 shadow-lg`}>
-        <div className="container mx-auto px-4">
-          <div className="flex items-center justify-between gap-4">
+      <FadeInOnMount as="header" className={`fixed w-full z-50 bg-gray-900/95 backdrop-blur-sm py-3 sm:py-4 shadow-lg`}>
+        <div className="container mx-auto px-4 sm:px-6">
+          <div className="flex items-center justify-between gap-2 sm:gap-4">
             {/* Logo */}
-            <Link href="/" className="flex items-center space-x-3 flex-shrink-0 py-1">
-              <div className="bg-blue-600 p-2 rounded">
-                <svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
+            <Link href="/" className="flex items-center space-x-2 sm:space-x-3 flex-shrink-0 py-1">
+              <div className="bg-blue-600 p-1.5 sm:p-2 rounded">
+                <svg className="w-6 sm:w-8 h-6 sm:h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
                   <path d="M2 12L12 2L22 12V22H16V16H8V22H2V12Z"/>
                 </svg>
               </div>
               <div className="text-white">
-                <div className="text-xl font-bold">SD</div>
-                <div className="text-sm font-semibold -mt-1">STROY</div>
+                <div className="text-lg sm:text-xl font-bold">Ваш Дом</div>
               </div>
             </Link>
             
             {/* Navigation */}
-            <nav className="hidden lg:flex items-center space-x-8">
-              <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">
+            <nav className="hidden lg:flex items-center space-x-8 flex-1 justify-center">
+              <Link href="#about" className="text-white hover:text-blue-400 transition-colors font-medium">
                 О нас
               </Link>
-              <Link href="#projects" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1">
-                Каталог домов
+              <Link href="#projects" className="text-white hover:text-blue-400 transition-colors font-medium">
+                Проекты
               </Link>
-              <Link href="#reviews" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1">
-                Отзывы
+              <Link href="#additional-services" className="text-white hover:text-blue-400 transition-colors font-medium">
+                Услуги
               </Link>
-              <Link href="#contacts" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1">
+              <button
+                onClick={() => setIsCalculatorOpen(true)}
+                className="text-white hover:text-blue-400 transition-colors font-medium"
+              >
+                Калькулятор
+              </button>
+              <Link href="#contact" className="text-white hover:text-blue-400 transition-colors font-medium">
                 Контакты
               </Link>
             </nav>
             
-            {/* Right side */}
-            <div className="hidden md:flex items-center space-x-6 flex-shrink-0">
+            {/* Contact Info & CTA */}
+            <div className="hidden md:flex items-center space-x-4 lg:space-x-6 flex-shrink-0">
               <div className="text-right">
-                <a 
-                  href="tel:+78352329226" 
-                  className="flex items-center text-white hover:text-blue-400 transition-colors group text-lg font-semibold whitespace-nowrap"
-                >
-                  +7 8352 32 92 26
-                </a>
+                <div className="space-y-1">
+                  <a 
+                    href="tel:+79530132423" 
+                    className="block text-white hover:text-blue-400 transition-colors group text-xs lg:text-sm font-semibold whitespace-nowrap"
+                  >
+                    +7 953 013 24 23
+                  </a>
+                  <a 
+                    href="tel:+79530148606" 
+                    className="block text-white hover:text-blue-400 transition-colors group text-xs lg:text-sm font-semibold whitespace-nowrap"
+                  >
+                    +7 953 014 86 06
+                  </a>
+                </div>
                 <div className="text-xs text-gray-300 mt-1">Пн - Вс с 8:00 до 20:00</div>
               </div>
               <button 
                 onClick={() => setIsModalOpen(true)}
-                className="bg-white text-gray-900 px-6 py-2.5 rounded-lg hover:bg-gray-100 transition-colors hover:shadow-lg text-sm font-semibold flex-shrink-0"
+                className="relative bg-gradient-to-r from-orange-500 to-red-500 text-white px-4 lg:px-8 py-2.5 lg:py-3.5 rounded-lg font-bold text-sm lg:text-base flex-shrink-0 flex items-center space-x-2 group overflow-hidden transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl animate-pulse hover:animate-none"
               >
-                Оставить заявку
+                {/* Светящийся фон */}
+                <div className="absolute inset-0 bg-gradient-to-r from-orange-400 to-red-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                
+                {/* Анимированная граница */}
+                <div className="absolute inset-0 rounded-lg bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 opacity-75 blur-sm group-hover:blur-md transition-all duration-300"></div>
+                <div className="absolute inset-0.5 bg-gradient-to-r from-orange-500 to-red-500 rounded-lg"></div>
+                
+                {/* Контент кнопки */}
+                <div className="relative z-10 flex items-center space-x-2">
+                <Phone className="w-4 lg:w-5 h-4 lg:h-5 group-hover:animate-bounce" />
+                  <span className="relative">
+                    Оставить заявку
+                    {/* Подчеркивание */}
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-yellow-300 group-hover:w-full transition-all duration-300"></span>
+                  </span>
+                </div>
+                
+                {/* Блик */}
+                <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
               </button>
             </div>
 
-            <button
-              onClick={() => setIsMobileMenuOpen(true)}
-              className="md:hidden text-white hover:text-gray-300 transition-colors p-2 hover:bg-white/10 rounded-lg"
-              aria-label="Открыть меню"
-            >
-              <Menu className="w-6 h-6" />
-            </button>
+            {/* Кнопка для мобильных устройств */}
+            <div className="md:hidden flex items-center space-x-2">
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className="bg-gradient-to-r from-orange-500 to-red-500 text-white px-3 py-2 rounded-lg text-xs font-semibold hover:from-orange-600 hover:to-red-600 transition-all duration-300 hover:scale-105 shadow-lg"
+              >
+                <div className="text-center">
+                  <div>+7 953 013 24 23</div>
+                  <div>+7 953 014 86 06</div>
+                </div>
+              </button>
+              <button
+                onClick={() => setIsMobileMenuOpen(true)}
+                className="text-white hover:text-gray-300 transition-colors p-2 hover:bg-white/10 rounded-lg"
+                aria-label="Открыть меню"
+              >
+                <Menu className="w-5 h-5 sm:w-6 sm:h-6" />
+              </button>
+            </div>
           </div>
         </div>
       </FadeInOnMount>
@@ -86,6 +128,12 @@ const Header = () => {
       <MobileMenu
         isOpen={isMobileMenuOpen}
         onClose={() => setIsMobileMenuOpen(false)}
+        onCallbackClick={() => setIsModalOpen(true)}
+      />
+
+      <HouseCalculatorModal
+        isOpen={isCalculatorOpen}
+        onClose={() => setIsCalculatorOpen(false)}
       />
     </>
   );

src/components/HouseCalculatorModal.tsx

@@ -1,13 +1,33 @@
 'use client';
 
 import { useState } from 'react';
-import { X, CheckCircle, AlertCircle } from 'lucide-react';
-import Image from 'next/image';
+import { X, ChevronLeft, ChevronRight, Check } from 'lucide-react';
 
 const materials = [
-  { label: 'Кирпич/керамический блок', value: 'brick', img: '/images/keramic.jpg' },
-  { label: 'Газобетон', value: 'aerated', img: '/images/gazobet.png' },
-  { label: 'Керамзитобетон', value: 'claydite', img: '/images/keramiz.jpg' },
+  { 
+    label: 'Кирпич/керамический блок', 
+    value: 'Кирпич/керамический блок', 
+    img: '/images/keramic.jpg',
+    icon: '🧱',
+    name: 'Кирпич',
+    description: 'Прочный и долговечный'
+  },
+  { 
+    label: 'Газобетон', 
+    value: 'Газобетон', 
+    img: '/images/gazobet.png',
+    icon: '🏗️',
+    name: 'Газобетон',
+    description: 'Легкий и теплый'
+  },
+  { 
+    label: 'Керамзитобетон', 
+    value: 'Керамзитобетон', 
+    img: '/images/keramiz.jpg',
+    icon: '🏠',
+    name: 'Керамзитобетон',
+    description: 'Экологичный материал'
+  },
 ];
 
 const areas = [
@@ -17,13 +37,13 @@ const areas = [
   'более 200 кв.м.',
 ];
 
-const finishes = [
+const finishOptions = [
   'Без отделки',
   'Черновая отделка (стяжка, штукатурка и тд)',
   'Чистовая отделка (обои, ламинат и тд)',
 ];
 
-const finances = [
+const financeOptions = [
   'Наличные',
   'Сельская ипотека',
   'Ипотека, кредит',
@@ -43,22 +63,25 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
   const [area, setArea] = useState('');
   const [finish, setFinish] = useState('');
   const [finance, setFinance] = useState('');
-  const [error, setError] = useState('');
-  const [success, setSuccess] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   if (!isOpen) return null;
 
+  const canProceed = () => {
+    if (step === 1) return material !== '';
+    if (step === 2) return area !== '';
+    if (step === 3) return finish !== '';
+    if (step === 4) return finance !== '';
+    return true;
+  };
+
   const handleNext = () => {
-    setError('');
-    if (step === 1 && !material) return setError('Выберите материал');
-    if (step === 2 && !area) return setError('Выберите площадь');
-    if (step === 3 && !finish) return setError('Выберите вариант отделки');
-    if (step === 4 && !finance) {
-      setError('Выберите источник финансирования');
-      return;
-    }
+    if (step === 1 && !material) return;
+    if (step === 2 && !area) return;
+    if (step === 3 && !finish) return;
+    if (step === 4 && !finance) return;
+    
     if (step === 4) {
-      // После 4-го шага отправляем данные в Telegram и переходим к 5-му шагу
       handleSubmitCalculator();
       return;
     }
@@ -66,11 +89,14 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
   };
 
   const handlePrev = () => {
-    setError('');
     setStep((s) => s - 1);
   };
 
   const handleSubmitCalculator = async () => {
+    if (isSubmitting) return;
+    
+    setIsSubmitting(true);
+    
     try {
       const res = await fetch('/api/send-telegram', {
         method: 'POST',
@@ -86,12 +112,12 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
       });
       
       if (res.ok) {
-        setStep(5); // Переходим к 5-му шагу
-      } else {
-        setError('Ошибка отправки. Попробуйте позже.');
+        setStep(5);
       }
     } catch {
-      setError('Ошибка отправки. Попробуйте позже.');
+      // Обработка ошибок
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -101,79 +127,81 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
     setArea('');
     setFinish('');
     setFinance('');
-    setError('');
-    setSuccess(false);
+    setIsSubmitting(false);
     onClose();
   };
 
+  const calculatePrice = () => {
+    let basePrice = 1500000 * 2.5; // Базовая цена увеличена в 2.5 раза
+    
+    // Корректировка по площади
+    if (area === '100-150 кв.м.') basePrice *= 1.3;
+    else if (area === '150-200 кв.м.') basePrice *= 1.6;
+    else if (area === 'более 200 кв.м.') basePrice *= 2;
+    
+    // Корректировка по материалу
+    if (material === 'Кирпич/керамический блок') basePrice *= 1.2;
+    else if (material === 'Керамзитобетон') basePrice *= 1.1;
+    
+    return Math.round(basePrice);
+  };
+
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4">
-      {/* Декоративный фон */}
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-2 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 className="absolute top-1/4 left-1/4 w-64 sm:w-80 lg:w-96 h-64 sm:h-80 lg:h-96 bg-blue-500 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-1/4 right-1/4 w-56 sm:w-64 lg:w-80 h-56 sm:h-64 lg:h-80 bg-purple-500 rounded-full blur-3xl"></div>
+        <div className="absolute top-1/2 left-1/2 w-48 sm:w-56 lg:w-64 h-48 sm:h-56 lg: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">
+      <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-xs sm:max-w-md lg: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-white p-2 hover:bg-white/10 rounded-full transition-colors z-10"
+          className="absolute top-3 sm:top-4 right-3 sm:right-4 text-gray-400 hover:text-white p-1.5 sm: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" />
+          <X className="w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg: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-300 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-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 className="p-4 sm:p-6 lg:p-8">
+          <div className="text-center mb-6 sm:mb-8">
+            <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold mb-2 sm:mb-4 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
+              Калькулятор стоимости дома
+            </h1>
+            <div className="w-16 sm:w-20 lg:w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
           </div>
 
           {step === 1 && (
             <div>
-              <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 className="text-lg sm:text-xl lg: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">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
                 {materials.map((m) => (
                   <button
                     key={m.value}
                     type="button"
                     onClick={() => setMaterial(m.value)}
-                    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] ${
+                    className={`group relative p-3 sm: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={`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 className="relative z-10 text-center">
+                      <div className="text-2xl sm:text-3xl lg:text-4xl mb-2 sm:mb-3 group-hover:scale-110 transition-transform duration-300">
+                        {m.icon}
                       </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" />
-                      )}
+                      <h3 className="text-sm sm:text-base lg:text-lg font-bold text-white mb-1 sm:mb-2 group-hover:text-blue-300 transition-colors duration-300">
+                        {m.name}
+                      </h3>
+                      <p className="text-xs sm:text-sm text-gray-300 group-hover:text-white transition-colors duration-300">
+                        {m.description}
+                      </p>
                     </div>
                   </button>
                 ))}
@@ -183,13 +211,19 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
 
           {step === 2 && (
             <div>
-              <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 className="text-lg sm:text-xl lg: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">
+              <div className="flex flex-col gap-2 sm:gap-3 lg:gap-4">
                 {areas.map((a) => (
-                  <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>
+                  <label key={a} className={`group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 hover:scale-[1.01] ${
+                    area === a 
+                      ? 'border-blue-500 shadow-lg shadow-blue-500/25' 
+                      : 'border-white/20 hover:border-white/40'
+                  }`}>
+                    <div className={`absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 transition-opacity duration-300 ${
+                      area === a ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                    }`}></div>
                     <div className="relative z-10 flex items-center">
                       <input
                         type="radio"
@@ -197,9 +231,9 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
                         value={a}
                         checked={area === a}
                         onChange={() => setArea(a)}
-                        className="w-4 h-4 sm:w-5 sm:h-5 mr-3 accent-blue-500"
+                        className="w-3 h-3 sm:w-4 sm:h-4 lg:w-5 lg:h-5 mr-2 sm: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>
+                      <span className="text-sm sm:text-base lg:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{a}</span>
                     </div>
                   </label>
                 ))}
@@ -209,23 +243,31 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
 
           {step === 3 && (
             <div>
-              <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 className="text-lg sm:text-xl lg: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="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="flex flex-col gap-2 sm:gap-3 lg:gap-4">
+                {finishOptions.map((option) => (
+                  <label key={option} className={`group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 hover:scale-[1.01] ${
+                    finish === option 
+                      ? 'border-blue-500 shadow-lg shadow-blue-500/25' 
+                      : 'border-white/20 hover:border-white/40'
+                  }`}>
+                    <div className={`absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 transition-opacity duration-300 ${
+                      finish === option ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                    }`}></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"
+                        value={option}
+                        checked={finish === option}
+                        onChange={() => setFinish(option)}
+                        className="w-3 h-3 sm:w-4 sm:h-4 lg:w-5 lg:h-5 mr-2 sm: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>
+                      <span className="text-sm sm:text-base lg:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">
+                        {option}
+                      </span>
                     </div>
                   </label>
                 ))}
@@ -235,23 +277,31 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
 
           {step === 4 && (
             <div>
-              <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 className="text-lg sm:text-xl lg: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="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="flex flex-col gap-2 sm:gap-3 lg:gap-4">
+                {financeOptions.map((option) => (
+                  <label key={option} className={`group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 hover:scale-[1.01] ${
+                    finance === option 
+                      ? 'border-blue-500 shadow-lg shadow-blue-500/25' 
+                      : 'border-white/20 hover:border-white/40'
+                  }`}>
+                    <div className={`absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 transition-opacity duration-300 ${
+                      finance === option ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                    }`}></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"
+                        value={option}
+                        checked={finance === option}
+                        onChange={() => setFinance(option)}
+                        className="w-3 h-3 sm:w-4 sm:h-4 lg:w-5 lg:h-5 mr-2 sm: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>
+                      <span className="text-sm sm:text-base lg:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">
+                        {option}
+                      </span>
                     </div>
                   </label>
                 ))}
@@ -260,74 +310,87 @@ 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-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 className="text-center">
+              <div className="mb-6 sm:mb-8">
+                <div className="text-3xl sm:text-4xl lg:text-5xl mb-2 sm:mb-4">✅</div>
+                <h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-2 sm:mb-4 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
+                  Спасибо за заявку!
+                </h2>
+                <div className="text-2xl sm:text-3xl lg:text-4xl font-bold text-blue-400 mb-2 sm:mb-4">
+                  от {calculatePrice().toLocaleString()} ₽
+                </div>
+                <p className="text-sm sm:text-base text-gray-300">
+                  Мы свяжемся с вами в ближайшее время
+                </p>
               </div>
+              
+              <div className="bg-white/10 backdrop-blur-md rounded-xl p-4 sm:p-6 mb-6 sm:mb-8 border border-white/20">
+                <h3 className="text-base sm:text-lg font-bold text-white mb-3 sm:mb-4">Детали расчета:</h3>
+                <div className="space-y-2 text-sm sm:text-base text-gray-300">
+                  <div className="flex justify-between">
+                    <span>Материал:</span>
+                    <span className="text-white">{materials.find(m => m.value === material)?.name}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>Площадь:</span>
+                    <span className="text-white">{area}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>Отделка:</span>
+                    <span className="text-white">{finish}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>Финансирование:</span>
+                    <span className="text-white">{finance}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <div className="flex justify-between items-center mt-6 sm:mt-8">
+            {step > 1 && step < 5 && (
+              <button
+                onClick={handlePrev}
+                className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-gray-600 to-gray-700 text-white hover:from-gray-700 hover:to-gray-800 transition-all duration-300 hover:scale-105 text-sm sm:text-base"
+              >
+                <ChevronLeft className="w-4 h-4 sm:w-5 sm:h-5" />
+                <span>Назад</span>
+              </button>
+            )}
+            
+            {step < 4 && (
+              <button
+                onClick={handleNext}
+                disabled={!canProceed()}
+                className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:from-blue-600 hover:to-purple-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 hover:scale-105 ml-auto text-sm sm:text-base"
+              >
+                <span>Далее</span>
+                <ChevronRight className="w-4 h-4 sm:w-5 sm:h-5" />
+              </button>
+            )}
+            
+            {step === 4 && (
+              <button
+                onClick={handleNext}
+                disabled={!canProceed() || isSubmitting}
+                className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 hover:scale-105 ml-auto text-sm sm:text-base"
+              >
+                <span>{isSubmitting ? 'Отправка...' : 'Рассчитать'}</span>
+                <ChevronRight className="w-4 h-4 sm:w-5 sm:h-5" />
+              </button>
+            )}
+            
+            {step === 5 && (
               <button
                 onClick={closeModal}
-                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"
+                className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transition-all duration-300 hover:scale-105 mx-auto text-sm sm:text-base"
               >
-                Закрыть
+                <span>Закрыть</span>
+                <Check className="w-4 h-4 sm:w-5 sm:h-5" />
               </button>
-            </div>
-          )}
-
-          {success && (
-            <div className="flex flex-col items-center justify-center py-8 sm:py-12 animate-fadeIn">
-              <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-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>
-            </div>
-          )}
-
-          {error && (
-            <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>
-          )}
-
-          {!success && step < 5 && (
-            <div className="flex justify-between mt-6 sm:mt-8">
-              {step > 1 && (
-                <button
-                  onClick={handlePrev}
-                  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>
-              )}
-              {step < 4 && (
-                <button
-                  onClick={handleNext}
-                  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>
-              )}
-              {step === 4 && (
-                <button
-                  onClick={handleNext}
-                  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>
-              )}
-            </div>
-          )}
+            )}
+          </div>
         </div>
       </div>
     </div>

src/components/MobileMenu.tsx

@@ -7,9 +7,10 @@ import { useEffect } from 'react';
 interface MobileMenuProps {
   isOpen: boolean;
   onClose: () => void;
+  onCallbackClick?: () => void;
 }
 
-const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
+const MobileMenu = ({ isOpen, onClose, onCallbackClick }: MobileMenuProps) => {
   useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = 'hidden';
@@ -34,8 +35,7 @@ const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
                </svg>
              </div>
             <div className="text-white">
-              <div className="text-xl font-bold">SD</div>
-              <div className="text-sm font-semibold -mt-1">STROY</div>
+              <div className="text-xl font-bold">Ваш Дом</div>
             </div>
           </Link>
           <button
@@ -49,7 +49,7 @@ const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
 
         <nav className="flex-1 flex flex-col space-y-6">
           <Link 
-            href="#services" 
+            href="#additional-services" 
             className="text-xl text-white hover:text-blue-400 transition-colors py-2"
             onClick={onClose}
           >
@@ -70,11 +70,11 @@ const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
             Каталог домов
           </Link>
           <Link 
-            href="#reviews" 
+            href="#additional-services" 
             className="text-xl text-white hover:text-blue-400 transition-colors py-2"
             onClick={onClose}
           >
-            Отзывы
+            Доп услуги
           </Link>
           <Link 
             href="#contacts" 
@@ -86,16 +86,38 @@ const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
         </nav>
 
         <div className="mt-auto pb-8">
+          <div className="space-y-2 mb-4">
           <a 
-            href="tel:+78352329226" 
-            className="flex items-center text-white hover:text-blue-400 transition-colors mb-2 group"
+              href="tel:+79530132423" 
+              className="flex items-center text-white hover:text-blue-400 transition-colors group"
           >
             <Phone className="w-5 h-5 mr-2 group-hover:scale-110 transition-transform" />
-            <span className="text-lg font-semibold">+7 8352 32 92 26</span>
+              <span className="text-lg font-semibold">+7 953 013 24 23</span>
+            </a>
+            <a 
+              href="tel:+79530148606" 
+              className="flex items-center text-white hover:text-blue-400 transition-colors group ml-7"
+            >
+              <span className="text-lg font-semibold">+7 953 014 86 06</span>
           </a>
-          <div className="text-sm text-gray-300 mb-6">Пн - Вс с 8:00 до 20:00</div>
+          </div>
+          <div className="text-sm text-gray-300 mb-4">Пн - Вс с 8:00 до 20:00</div>
+          <div className="mb-6">
+            <a 
+              href="mailto:Vashdom121@mail.ru" 
+              className="flex items-center text-white hover:text-blue-400 transition-colors group"
+            >
+              <svg className="w-5 h-5 mr-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+              <span className="text-sm">Vashdom121@mail.ru</span>
+            </a>
+          </div>
           <button 
-            onClick={onClose}
+            onClick={() => {
+              onCallbackClick?.();
+              onClose();
+            }}
             className="w-full bg-white text-gray-900 px-6 py-3 rounded-lg hover:bg-gray-100 transition-colors hover:shadow-lg font-semibold"
           >
             Оставить заявку

src/components/ProjectsSection.tsx

@@ -3,6 +3,7 @@
 import Image from 'next/image';
 import { useState, useEffect } from 'react';
 import FadeInSection from './FadeInSection';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 
 type ProjectsSectionProps = {
   onCatalogClick?: () => void;
@@ -12,7 +13,7 @@ const projects = [
   {
     id: 1,
     title: 'Гармония',
-    description: 'Дом 11х9м, общая площадь 101,4 кв.м., 3 спальни, 1 санузел',
+    description: 'Общая площадь 200 кв.м.',
     images: [
       { type: 'facade', src: '/images/garmony.png', alt: 'Фасад дома Гармония' },
       { type: 'plan', src: '/images/2.jpg', alt: 'Планировка 1 этажа' },
@@ -23,7 +24,7 @@ const projects = [
   {
     id: 2,
     title: 'Горизонт',
-    description: 'Дом 14х13 м, общая площадь 142,8 кв.м, 3 спальни, 2 санузла',
+    description: 'Общая площадь 360 кв.м.',
     images: [
       { type: 'facade', src: '/images/gorizont.png', alt: 'Фасад дома Горизонт' },
       { type: 'plan', src: '/images/22.jpg', alt: 'Планировка 1 этажа' },
@@ -33,20 +34,20 @@ const projects = [
   },
   {
     id: 3,
-    title: 'Филимонов',
-    description: 'Дом 14,2х10,5 м, общая площадь 131,4 кв.м., 3 спальни, 2 санузла',
+    title: 'Европейский квартал',
+    description: 'Общая площадь 120 кв.м.',
     images: [
-      { type: 'facade', src: '/images/filimonov.png', alt: 'Фасад дома Филимонов' },
+      { type: 'facade', src: '/images/filimonov.png', alt: 'Фасад дома Европейский квартал' },
       { type: 'plan', src: '/images/333.jpg', alt: 'Планировка дома' }
     ],
     file: '/projects/filimonov.pdf',
   },
   {
     id: 4,
-    title: 'Моронцов',
-    description: 'Дом 12х8м, общая площадь 89,6 кв.м., 2 спальни, 1 санузел',
+    title: 'Проект 12',
+    description: 'Общая площадь 100 кв.м.',
     images: [
-      { type: 'facade', src: '/images/moronchov.png', alt: 'Фасад дома Моронцов' },
+      { type: 'facade', src: '/images/moronchov.png', alt: 'Фасад дома Проект 12' },
       { type: 'plan', src: '/images/3333.jpg', alt: 'Планировка дома' }
     ],
     file: '/projects/moronchov.pdf',
@@ -54,7 +55,7 @@ const projects = [
   {
     id: 5,
     title: 'Ранчо',
-    description: 'Дом 15х12м, общая площадь 156,8 кв.м., 4 спальни, 2 санузла',
+    description: 'Общая площадь 96 кв.м.',
     images: [
       { type: 'facade', src: '/images/rancho.png', alt: 'Фасад дома Ранчо' },
       { type: 'plan', src: '/images/111.jpg', alt: 'Планировка 1 этажа' },
@@ -65,7 +66,7 @@ const projects = [
   {
     id: 6,
     title: 'Тихие Зори',
-    description: 'Дом 13х9м, общая площадь 118,2 кв.м., 3 спальни, 1 санузел',
+    description: 'Общая площадь 130 кв.м.',
     images: [
       { type: 'facade', src: '/images/zori.png', alt: 'Фасад дома Тихие Зори' },
       { type: 'plan', src: '/images/122.jpg', alt: 'Планировка дома' }
@@ -75,7 +76,7 @@ const projects = [
   {
     id: 7,
     title: 'Уютное гнездышко',
-    description: 'Дом 16х10м, общая площадь 168,4 кв.м., 4 спальни, 3 санузла',
+    description: 'Общая площадь 98 кв.м.',
     images: [
       { type: 'facade', src: '/images/gnezdo.png', alt: 'Фасад дома Уютное гнездышко' },
       { type: 'plan', src: '/images/3333.jpg', alt: 'Планировка дома' }
@@ -85,7 +86,7 @@ const projects = [
   {
     id: 8,
     title: 'Аура',
-    description: 'Дом 10х8м, общая площадь 78,6 кв.м., 2 спальни, 1 санузел',
+    description: 'Общая площадь 73 кв.м.',
     images: [
       { type: 'facade', src: '/images/aura.png', alt: 'Фасад дома Аура' },
       { type: 'plan', src: '/images/444.jpg', alt: 'Планировка 1 этажа' },
@@ -96,7 +97,7 @@ const projects = [
   {
     id: 9,
     title: 'Надежда',
-    description: 'Дом 18х12м, общая площадь 198,4 кв.м., 5 спален, 3 санузла',
+    description: 'Общая площадь 100 кв.м.',
     images: [
       { type: 'facade', src: '/images/nade.png', alt: 'Фасад дома Надежда' },
       { type: 'plan', src: '/images/666.jpg', alt: 'Планировка дома' }
@@ -121,16 +122,29 @@ const ProjectImageSlider = ({ project }: { project: typeof projects[0] }) => {
     );
   };
 
+  const currentImage = project.images[currentImageIndex];
+  const isFloorPlan = currentImage.type === 'floorplan';
+  
   return (
     <div className="relative h-80 rounded-xl overflow-hidden group">
+      {/* Фон для планировок */}
+      {isFloorPlan && (
+        <div className="absolute inset-0 bg-white z-0"></div>
+      )}
+      
       <div className="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent z-10"></div>
       
       {/* Текущее изображение */}
       <Image
-        src={project.images[currentImageIndex].src}
-        alt={project.images[currentImageIndex].alt}
+        src={currentImage.src}
+        alt={currentImage.alt}
         fill
-        className="object-cover transition-transform duration-500 group-hover:scale-105"
+        className={`transition-transform duration-500 group-hover:scale-105 ${
+          isFloorPlan 
+            ? 'object-contain p-4' 
+            : 'object-cover'
+        }`}
+        unoptimized={true}
       />
 
       {/* Навигация по изображениям */}
@@ -175,7 +189,7 @@ const ProjectImageSlider = ({ project }: { project: typeof projects[0] }) => {
           {/* Тип изображения */}
           <div className="absolute top-3 left-3 z-20">
             <span className="px-2 py-1 bg-white/20 backdrop-blur-sm rounded-full text-white text-xs font-medium">
-              {project.images[currentImageIndex].type === 'facade' ? '🏠 Фасад' : '📐 Планировка'}
+              {currentImage.type === 'facade' ? '🏠 Фасад' : '📐 Планировка'}
             </span>
           </div>
         </>
@@ -233,18 +247,27 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
   const visibleProjects = projects.slice(startIndex, startIndex + itemsPerView);
 
   return (
-    <section id="projects" className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
-      {/* Статичный фон */}
-      <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>
+    <section id="projects" className="relative py-20 bg-gradient-to-tr from-slate-50 via-white to-blue-50 overflow-hidden">
+      {/* Архитектурный фон */}
+      <div className="absolute inset-0 opacity-30">
+        {/* Квадраты как окна */}
+        <div className="absolute top-16 left-16 w-20 h-20 border-2 border-blue-400 opacity-25"></div>
+        <div className="absolute top-32 right-24 w-16 h-16 border-2 border-indigo-400 opacity-30"></div>
+        <div className="absolute bottom-24 left-1/3 w-12 h-12 border-2 border-cyan-400 opacity-35"></div>
+        
+        {/* Ромбы */}
+        <div className="absolute top-1/3 left-1/4 w-14 h-14 bg-blue-300 transform rotate-45 opacity-20"></div>
+        <div className="absolute bottom-1/4 right-1/3 w-10 h-10 bg-indigo-400 transform rotate-45 opacity-25"></div>
+        
+        {/* Сетка */}
+        <div className="absolute top-0 left-1/2 w-px h-full bg-gradient-to-b from-transparent via-blue-200 to-transparent opacity-30"></div>
+        <div className="absolute top-1/2 left-0 w-full h-px bg-gradient-to-r from-transparent via-indigo-200 to-transparent opacity-25"></div>
       </div>
 
       <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">
+          <h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 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>
@@ -252,28 +275,21 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
         
         {/* Карусель */}
         <div className="relative">
-          {/* Стрелка влево */}
+          {/* Навигационные кнопки */}
           <button
             onClick={handlePrevious}
-            disabled={currentIndex === 0}
-            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="Предыдущий проект"
+            className="absolute left-4 top-1/2 -translate-y-1/2 z-20 w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm border border-gray-200 hover:bg-white hover:shadow-lg transition-all duration-300 flex items-center justify-center 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">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-            </svg>
+            <ChevronLeft className="w-6 h-6 text-gray-800 group-hover:text-blue-600" />
           </button>
           
-          {/* Стрелка вправо */}
           <button
             onClick={handleNext}
-            disabled={currentIndex >= totalSlides - 1}
-            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="Следующий проект"
+            className="absolute right-4 top-1/2 -translate-y-1/2 z-20 w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm border border-gray-200 hover:bg-white hover:shadow-lg transition-all duration-300 flex items-center justify-center 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">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-            </svg>
+            <ChevronRight className="w-6 h-6 text-gray-800 group-hover:text-blue-600" />
           </button>
 
           {/* Контейнер проектов */}
@@ -288,11 +304,11 @@ 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-300 hover:scale-[1.02] hover:-translate-y-1"
+                  className="group relative p-6 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-300 hover:scale-[1.02] hover:-translate-y-1"
                   delay={0.1 * index}
                 >
                   {/* Фон */}
-                  <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="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                   
                   <div className="relative z-10">
                     {/* Слайдер изображений */}
@@ -300,15 +316,15 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
                     
                     {/* Информация о проекте */}
                     <div className="mt-6">
-                      <h3 className="text-2xl font-bold text-white mb-3 group-hover:text-blue-300 transition-all duration-300">
+                      <h3 className="text-2xl font-bold text-gray-800 mb-3 group-hover:text-blue-600 transition-all duration-300">
                         {project.title}
                       </h3>
-                      <p className="text-gray-300 leading-relaxed mb-4">
+                      <p className="text-gray-600 leading-relaxed mb-4">
                         {project.description}
                       </p>
                       
                       {/* Дополнительная информация */}
-                      <div className="flex items-center justify-between text-sm text-gray-400">
+                      <div className="flex items-center justify-between text-sm text-gray-500">
                         <span className="flex items-center space-x-2">
                           <div className="w-2 h-2 bg-green-400 rounded-full"></div>
                           <span>Доступен для строительства</span>
@@ -330,7 +346,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
         </div>
 
         {/* Индикаторы */}
-        <div className="flex justify-center mt-12 space-x-3">
+        <div className="flex justify-center mt-8 space-x-2">
           {Array.from({ length: totalSlides }, (_, index) => (
             <button
               key={index}
@@ -338,7 +354,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
               className={`w-3 h-3 rounded-full transition-all duration-300 ${
                 index === currentIndex 
                   ? 'bg-gradient-to-r from-blue-500 to-purple-500 scale-125' 
-                  : 'bg-white/30 hover:bg-white/50'
+                  : 'bg-gray-300 hover:bg-gray-400'
               }`}
               aria-label={`Перейти к слайду ${index + 1}`}
             />
@@ -349,9 +365,9 @@ 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-[1.02] transition-all 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-blue-300 backdrop-blur-sm hover:scale-[1.02] transition-all duration-300 cursor-pointer group hover:from-blue-500/30 hover:to-purple-500/30"
           >
-            <span className="text-white font-medium text-lg">Получить полный каталог проектов</span>
+            <span className="text-gray-800 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>
           </button>
         </FadeInSection>

src/components/ReviewsSection.tsx

@@ -1,38 +1,46 @@
 'use client';
 
 import Image from 'next/image';
-import { Star } from 'lucide-react';
 import FadeInSection from './FadeInSection';
 
 const reviews = [
   {
     id: 1,
     name: 'Александр Петров',
+    position: 'Владелец дома',
     text: 'Очень доволен качеством строительства. Команда профессионалов, все работы выполнены в срок и с соблюдением всех норм.',
     rating: 5,
     image: '/images/Sasha.jpg',
+    project: 'Коттедж 150 м²',
+    date: 'Сентябрь 2024',
   },
   {
     id: 2,
     name: 'Елена Смирнова',
+    position: 'Владелица дома',
     text: 'Спасибо за отличную работу! Дом построен качественно, все пожелания были учтены. Рекомендую всем!',
     rating: 5,
     image: '/images/Elena.jpg',
+    project: 'Дом 120 м²',
+    date: 'Август 2024',
   },
   {
     id: 3,
     name: 'Дмитрий Иванов',
+    position: 'Владелец дома',
     text: 'Профессиональный подход к делу. Все этапы строительства контролировались, результат превзошел ожидания.',
     rating: 5,
     image: '/images/Dmitry.jpg',
+    project: 'Коттедж 180 м²',
+    date: 'Июль 2024',
   },
 ];
 
 const ReviewsSection = () => {
   return (
-    <section id="reviews" className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
+    <section id="reviews" className="relative py-20 bg-gradient-to-br from-gray-5 via-white to-gray-100 overflow-hidden">
       {/* Статичный фон */}
-      <div className="absolute inset-0 opacity-10">
+      <div className="absolute inset-0 opacity-30">
         <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>
@@ -41,7 +49,7 @@ const ReviewsSection = () => {
       <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 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 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>
@@ -53,11 +61,11 @@ const ReviewsSection = () => {
             <FadeInSection 
               key={review.id} 
               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-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500 hover:scale-105 hover:-translate-y-2"
               delay={0.2 * index}
             >
               {/* Фон */}
-              <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="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
               
               <div className="relative z-10">
                 <div className="flex items-center mb-4">
@@ -67,29 +75,36 @@ const ReviewsSection = () => {
                       alt={review.name}
                       fill
                       className="object-cover"
+                      unoptimized={true}
                     />
                     {/* Декоративная рамка */}
-                    <div className="absolute inset-0 rounded-full border border-white/20 group-hover:border-white/40 transition-colors duration-300"></div>
+                    <div className="absolute inset-0 rounded-full border border-gray-200 group-hover:border-blue-300 transition-colors duration-300"></div>
                   </div>
                   <div>
-                    <h3 className="text-lg font-bold text-white mb-1 group-hover:text-blue-300 transition-all duration-300">
+                    <h3 className="font-bold text-gray-800 group-hover:text-blue-600 transition-colors duration-300">
                       {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` }}
-                        />
+                    <p className="text-sm text-gray-500">{review.position}</p>
+                    <div className="flex mt-1">
+                      {[...Array(5)].map((_, i) => (
+                        <span key={i} className="text-yellow-400 text-sm">⭐</span>
                       ))}
                     </div>
                   </div>
                 </div>
                 
-                <p className="text-gray-300 leading-relaxed">
-                  {review.text}
-                </p>
+                <blockquote className="text-gray-600 leading-relaxed italic">
+                  &ldquo;{review.text}&rdquo;
+                </blockquote>
+                
+                <div className="mt-4 pt-4 border-t border-gray-200">
+                  <p className="text-sm text-gray-500">
+                    <span className="font-medium">Объект:</span> {review.project}
+                  </p>
+                  <p className="text-sm text-gray-500 mt-1">
+                    <span className="font-medium">Дата:</span> {review.date}
+                  </p>
+                </div>
               </div>
 
               {/* Декоративный элемент */}

src/components/TeamSection.tsx

@@ -1,89 +1,257 @@
 'use client';
 
 import Image from 'next/image';
+import { useState } from 'react';
 import FadeInSection from './FadeInSection';
+import CallbackModal from './CallbackModal';
+import { Droplets, Zap, Thermometer, Wrench } from 'lucide-react';
 
-const team = [
+const workExamples = [
   {
     id: 1,
-    name: 'Степанов Денис',
-    position: 'Основатель и владелец компании',
-    image: '/images/Stepan.jpg',
+    title: 'Дом из керамзитобетона',
+    description: 'Московская область, г. Люберцы, дом из керамзит бетона',
+    image: '/images/dom1.jpeg',
+    area: '100 кв.м',
+    material: 'Керамзитобетон',
   },
   {
     id: 2,
-    name: 'Романов Даниил',
-    position: 'Генеральный директор',
-    image: '/images/Roman.jpg',
+    title: 'Дом из пенобетонных блоков',
+    description: 'г. Чебоксары, Альгешево, дом 75 м2 из пенобетонных блоков',
+    image: '/images/dom2.jpg',
+    area: '75 кв.м',
+    material: 'Пенобетонные блоки',
   },
   {
     id: 3,
-    name: 'Степанова Оксана',
-    position: 'Финансовый директор',
-    image: '/images/Oksana.jpg',
+    title: 'Кирпичный дом',
+    description: 'г. Чебоксары, ул. Гражданская, дом 120 м2 из кирпича',
+    image: '/images/dom3.jpg',
+    area: '120 кв.м',
+    material: 'Кирпич',
   },
   {
     id: 4,
-    name: 'Семенов Максим',
-    position: 'Производитель работ',
-    image: '/images/Maksim.jpg',
+    title: 'Дом из керамзитбетонных блоков',
+    description: 'пос. Кугеси, дом 175 м2 из керамзитбетонных блоков',
+    image: '/images/dom4.jpg',
+    area: '175 кв.м',
+    material: 'Керамзитбетонные блоки',
+  },
+  {
+    id: 5,
+    title: 'Дом из керамзитбетонных блоков',
+    description: 'г. Чебоксары, ул. Лунная, дом 110 м2 из керамзитбетонных блоков',
+    image: '/images/dom5.jpg',
+    area: '110 кв.м',
+    material: 'Керамзитбетонные блоки',
+  },
+  {
+    id: 6,
+    title: '2х этажный каркасный дом',
+    description: 'г. Чебоксары, Южный поселок, 2х этажный каркасный дом',
+    image: '/images/dom6.jpeg',
+    area: '110 кв.м',
+    material: 'Каркасная технология',
+  },
+  {
+    id: 7,
+    title: 'Монтаж фундамента',
+    description: 'г. Чебоксары, мкр Садовый, монтаж фундамента многоквартирного дома',
+    image: '/images/dom11.jpeg',
+    area: '-',
+    material: 'Фундаментные работы',
+  },
+  {
+    id: 8,
+    title: 'Монтаж систем отопления',
+    description: 'Город Чебоксары, пр. Г.Айги, д. 15-1, монтаж систем отопления',
+    image: '/images/dom22.jpeg',
+    area: '-',
+    material: 'Отопительные системы',
+  },
+  {
+    id: 9,
+    title: 'Деревянный каркасный дом',
+    description: 'Г.Чебоксары п. Альгешево, 100 м2',
+    image: '/images/dom33.jpg',
+    area: '100 кв.м',
+    material: 'Каркасная технология',
+  },
+  {
+    id: 10,
+    title: 'Деревянный каркасный дом',
+    description: 'г. Мариинский Посад, 80 м2',
+    image: '/images/dom44.jpg',
+    area: '80 кв.м',
+    material: 'Каркасная технология',
+  },
+  {
+    id: 11,
+    title: 'Деревянный каркасный дом',
+    description: 'г. Цивильск, 80 м2',
+    image: '/images/dom55.jpg',
+    area: '80 кв.м',
+    material: 'Каркасная технология',
+  },
+  {
+    id: 12,
+    title: 'Деревянный каркасный дом',
+    description: 'с. Комсомольское, 78 м2',
+    image: '/images/dom66.jpg',
+    area: '78 кв.м',
+    material: 'Каркасная технология',
+  },
+  {
+    id: 13,
+    title: 'Деревянный каркасный дом',
+    description: 'Сосновка, 92 м2',
+    image: '/images/dom77.jpg',
+    area: '92 кв.м',
+    material: 'Каркасная технология',
+  },
+  {
+    id: 14,
+    title: 'Деревянный каркасный дом',
+    description: 'пос. Кугеси 110 м2',
+    image: '/images/dom88.webp',
+    area: '110 кв.м',
+    material: 'Каркасная технология',
+  },
+  {
+    id: 15,
+    title: 'Дом из керамзитбетонных блоков',
+    description: 'пос. Кугеси, дом 78 м2 из керамзитбетонных блоков',
+    image: '/images/dom99.jpg',
+    area: '78 кв.м',
+    material: 'Керамзитбетонные блоки',
   },
 ];
 
-const TeamSection = () => {
+const additionalServices = [
+  {
+    id: 1,
+    icon: Droplets,
+    title: 'Монтаж водоснабжения',
+    description: 'Проектирование и установка систем водоснабжения с использованием качественных материалов',
+    features: ['Холодное и горячее водоснабжение', 'Установка счетчиков', 'Гарантия на работы'],
+    image: '/images/voda.jpeg'
+  },
+  {
+    id: 2,
+    icon: Wrench,
+    title: 'Монтаж канализации',
+    description: 'Полный комплекс работ по устройству канализационных систем',
+    features: ['Внутренняя канализация', 'Наружные сети', 'Септики и очистные сооружения'],
+    image: '/images/kanal.jpg'
+  },
+  {
+    id: 3,
+    icon: Zap,
+    title: 'Монтаж электрики',
+    description: 'Электромонтажные работы любой сложности с соблюдением всех норм безопасности',
+    features: ['Внутренняя проводка', 'Электрощиты', 'Освещение и розетки'],
+    image: '/images/electro.jpg'
+  },
+  {
+    id: 4,
+    icon: Thermometer,
+    title: 'Монтаж отопления',
+    description: 'Установка современных систем отопления для комфортного проживания',
+    features: ['Радиаторное отопление', 'Теплые полы', 'Котельное оборудование'],
+    image: '/images/otop.jpg'
+  },
+];
+
+const WorkExamplesSection = () => {
+  const [isCallbackModalOpen, setIsCallbackModalOpen] = useState(false);
+
   return (
-    <section className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
-      {/* Статичный фон */}
-      <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>
+    <section className="relative py-12 sm:py-16 lg:py-20 bg-gradient-to-tl from-indigo-50 via-white to-blue-50 overflow-hidden">
+      {/* Технический фон */}
+      <div className="absolute inset-0 opacity-25">
+        {/* Инструменты стилизованные */}
+        <div className="absolute top-12 left-12 w-4 sm:w-6 h-4 sm:h-6 border-2 border-blue-400 transform rotate-45 opacity-30"></div>
+        <div className="absolute top-1/4 right-16 w-6 sm:w-8 h-1 sm:h-2 bg-indigo-400 rounded opacity-35"></div>
+        <div className="absolute bottom-20 left-1/5 w-1 sm:w-2 h-6 sm:h-8 bg-cyan-400 rounded opacity-40"></div>
+        
+        {/* Гайки и болты */}
+        <div className="absolute top-1/3 left-1/3 w-3 sm:w-4 h-3 sm:h-4 border border-blue-500 rounded-full opacity-25"></div>
+        <div className="absolute bottom-1/3 right-1/4 w-2 sm:w-3 h-2 sm:h-3 bg-indigo-500 rounded-sm opacity-30"></div>
+        
+        {/* Технические линии */}
+        <div className="absolute top-0 left-1/4 w-px h-1/2 bg-gradient-to-b from-blue-300 to-transparent opacity-30"></div>
+        <div className="absolute bottom-0 right-1/3 w-px h-1/3 bg-gradient-to-t from-indigo-300 to-transparent opacity-25"></div>
+        <div className="absolute top-1/3 left-0 w-1/3 h-px bg-gradient-to-r from-cyan-300 to-transparent opacity-20"></div>
       </div>
 
-      <div className="container mx-auto px-4 relative z-10">
+      <div className="container mx-auto px-4 sm: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">
-            Наша команда
+        <FadeInSection as="div" className="text-center mb-12 sm:mb-16">
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 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-lg text-gray-300 text-center mb-12 max-w-2xl mx-auto" delay={0.2}>
-          Каждый день работает над тем, чтобы предоставить лучший сервис и сделать наших клиентов счастливыми
+        <FadeInSection as="p" className="text-base sm:text-lg text-gray-600 text-center mb-8 sm: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-8">
-          {team.map((member, index) => (
+        {/* Карточки примеров работ */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 mb-12 sm:mb-16 lg:mb-20">
+          {workExamples.map((example, index) => (
             <FadeInSection 
-              key={member.id} 
+              key={example.id} 
               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 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500 hover:scale-105 hover:-translate-y-2 overflow-hidden"
               delay={0.3 + (index * 0.1)}
             >
               {/* Фон */}
-              <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="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
               
-              <div className="relative z-10 text-center">
-                <div className="relative w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden group-hover:scale-110 transition-transform duration-300">
+              <div className="relative z-10">
+                {/* Изображение */}
+                <div className="relative h-40 sm:h-48 w-full overflow-hidden rounded-t-2xl">
                   <Image
-                    src={member.image}
-                    alt={member.name}
+                    src={example.image}
+                    alt={example.title}
                     fill
-                    className="object-cover"
-                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
+                    className="object-cover group-hover:scale-110 transition-transform duration-500"
+                    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                    unoptimized={true}
                   />
-                  {/* Декоративная рамка */}
-                  <div className="absolute inset-0 rounded-full border-2 border-white/20 group-hover:border-white/40 transition-colors duration-300"></div>
+                  {/* Градиент поверх изображения */}
+                  <div className="absolute inset-0 bg-gradient-to-t from-gray-900/60 via-transparent to-transparent"></div>
+                  
+                  {/* Бейдж с материалом */}
+                  <div className="absolute top-3 sm:top-4 left-3 sm:left-4 px-2 sm:px-3 py-1 bg-blue-500/80 backdrop-blur-sm rounded-full text-white text-xs sm:text-sm font-medium">
+                    {example.material}
+                  </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 className="p-4 sm:p-6">
+                  <h3 className="text-lg sm:text-xl font-bold text-gray-800 mb-2 group-hover:text-blue-600 transition-all duration-300">
+                    {example.title}
+                  </h3>
+                  <p className="text-gray-600 text-sm mb-3 sm:mb-4 leading-relaxed">
+                    {example.description}
+                  </p>
+                  
+                  {/* Характеристики */}
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-2">
+                      <div className="w-2 h-2 bg-green-400 rounded-full"></div>
+                      <span className="text-gray-500 text-xs sm:text-sm">Площадь:</span>
+                      <span className="text-gray-800 text-xs sm:text-sm font-medium">{example.area}</span>
+                    </div>
+                    <div className="px-2 sm:px-3 py-1 bg-green-100 rounded-full text-green-600 text-xs font-medium">
+                      Завершен
+                    </div>
+                  </div>
+                </div>
               </div>
 
               {/* Декоративный элемент */}
@@ -91,9 +259,96 @@ const TeamSection = () => {
             </FadeInSection>
           ))}
         </div>
+
+        {/* Дополнительные услуги */}
+        <div id="additional-services">
+        <FadeInSection as="div" className="mb-16" delay={0.8}>
+          <div className="text-center mb-8 sm:mb-12">
+            <h3 className="text-2xl sm:text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
+              Дополнительные услуги
+            </h3>
+            <div className="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
+          </div>
+          
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
+            {additionalServices.map((service, index) => (
+              <FadeInSection 
+                key={service.id} 
+                as="div" 
+                className="group relative rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500 hover:scale-105 hover:-translate-y-2 overflow-hidden"
+                delay={0.9 + (index * 0.1)}
+              >
+                {/* Фон */}
+                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                
+                <div className="relative z-10">
+                  {/* Изображение */}
+                  <div className="relative h-32 sm:h-40 w-full overflow-hidden rounded-t-2xl">
+                    <Image
+                      src={service.image}
+                      alt={service.title}
+                      fill
+                      className="object-cover group-hover:scale-110 transition-transform duration-500"
+                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
+                      unoptimized={true}
+                    />
+                    {/* Градиент поверх изображения */}
+                    <div className="absolute inset-0 bg-gradient-to-t from-gray-900/60 via-transparent to-transparent"></div>
+                    
+                    {/* Иконка поверх изображения */}
+                    <div className="absolute top-3 sm:top-4 left-3 sm:left-4 w-10 sm:w-12 h-10 sm:h-12 rounded-full bg-white/20 backdrop-blur-sm border border-white/30 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                      <service.icon className="w-5 sm:w-6 h-5 sm:h-6 text-white" />
+                    </div>
+                  </div>
+                  
+                  {/* Контент */}
+                  <div className="p-4 sm:p-6 text-center">
+                    <h4 className="text-lg sm:text-xl font-bold text-gray-800 mb-3 sm:mb-4 group-hover:text-blue-600 transition-colors duration-300">
+                      {service.title}
+                    </h4>
+                    
+                    <p className="text-gray-600 text-sm sm:text-base mb-4 sm:mb-6 leading-relaxed">
+                      {service.description}
+                    </p>
+                    
+                    <ul className="space-y-2 sm:space-y-3">
+                      {service.features.map((feature, featureIndex) => (
+                        <li key={featureIndex} className="flex items-center text-xs sm:text-sm text-gray-500">
+                          <div className="w-2 h-2 bg-green-400 rounded-full mr-2 sm:mr-3"></div>
+                          {feature}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </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>
+        </FadeInSection>
+        </div>
+
+        {/* Призыв к действию */}
+        <FadeInSection as="div" delay={1.2} className="text-center mt-16">
+          <button
+            onClick={() => setIsCallbackModalOpen(true)}
+            className="inline-flex items-center space-x-2 px-6 py-3 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-blue-300 backdrop-blur-sm hover:scale-105 transition-transform duration-300 cursor-pointer hover:from-blue-500/30 hover:to-purple-500/30"
+          >
+            <span className="text-gray-800 font-medium">Помощь в подборе земельного участка, юридическое сопровождение</span>
+            <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
+          </button>
+        </FadeInSection>
       </div>
+
+      {/* Модальное окно */}
+      <CallbackModal 
+        isOpen={isCallbackModalOpen} 
+        onClose={() => setIsCallbackModalOpen(false)} 
+      />
     </section>
   );
 };
 
-export default TeamSection; 
+export default WorkExamplesSection; 

src/components/WhyChooseUsSection.tsx

@@ -28,41 +28,51 @@ const features = [
 
 const WhyChooseUsSection = () => {
   return (
-    <section className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
-      {/* Статичный фон */}
-      <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>
+    <section className="relative py-12 sm:py-16 lg:py-20 bg-gradient-to-bl from-blue-50 via-white to-slate-50 overflow-hidden">
+      {/* Минималистичный фон */}
+      <div className="absolute inset-0 opacity-35">
+        {/* Точки */}
+        <div className="absolute top-20 left-20 w-2 sm:w-3 h-2 sm:h-3 bg-blue-500 rounded-full opacity-40"></div>
+        <div className="absolute top-40 right-32 w-1.5 sm:w-2 h-1.5 sm:h-2 bg-indigo-500 rounded-full opacity-50"></div>
+        <div className="absolute bottom-32 left-1/4 w-3 sm:w-4 h-3 sm:h-4 bg-cyan-500 rounded-full opacity-30"></div>
+        <div className="absolute top-1/3 right-1/4 w-1.5 sm:w-2 h-1.5 sm:h-2 bg-blue-400 rounded-full opacity-45"></div>
+        
+        {/* Тонкие линии */}
+        <div className="absolute top-1/4 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-300 to-transparent opacity-25"></div>
+        <div className="absolute bottom-1/3 left-0 w-full h-px bg-gradient-to-r from-transparent via-indigo-300 to-transparent opacity-20"></div>
+        
+        {/* Угловые элементы */}
+        <div className="absolute top-0 right-0 w-24 sm:w-32 h-24 sm:h-32 border-t-2 border-r-2 border-blue-300 opacity-20"></div>
+        <div className="absolute bottom-0 left-0 w-18 sm:w-24 h-18 sm:h-24 border-b-2 border-l-2 border-indigo-300 opacity-25"></div>
       </div>
 
-      <div className="container mx-auto px-4 relative z-10">
+      <div className="container mx-auto px-4 sm: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">
+        <FadeInSection as="div" className="text-center mb-12 sm:mb-16">
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 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">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
           {features.map((feature, index) => (
             <FadeInSection 
               key={index} 
               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-4 sm:p-6 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500 hover:scale-105 hover:-translate-y-2"
               delay={0.2 * index}
             >
               {/* Фон */}
-              <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="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
               
               <div className="relative z-10">
-                <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" />
-                <h3 className="text-xl font-bold text-white mb-3 group-hover:text-blue-300 transition-all duration-300">
+                <feature.icon className="w-10 sm:w-12 h-10 sm:h-12 text-blue-600 mb-3 sm:mb-4 group-hover:text-blue-700 group-hover:scale-110 transition-all duration-300" />
+                <h3 className="text-lg sm:text-xl font-bold text-gray-800 mb-2 sm:mb-3 group-hover:text-blue-600 transition-all duration-300">
                   {feature.title}
                 </h3>
-                <p className="text-gray-300 leading-relaxed">
+                <p className="text-gray-600 leading-relaxed text-sm sm:text-base">
                   {feature.description}
                 </p>
               </div>