diff --git a/public/images/stroy.jpg b/public/images/stroy.jpg
new file mode 100644
index 0000000..91864e6
Binary files /dev/null and b/public/images/stroy.jpg differ
diff --git a/src/components/AboutSection.tsx b/src/components/AboutSection.tsx
index 736f8ba..b3286a0 100644
--- a/src/components/AboutSection.tsx
+++ b/src/components/AboutSection.tsx
@@ -34,9 +34,9 @@ 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">
+    <section id="about" 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>
@@ -45,7 +45,7 @@ const AboutSection = () => {
       <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>
@@ -58,7 +58,7 @@ const AboutSection = () => {
             <div className="relative h-[500px] w-full rounded-2xl overflow-hidden">
               <div className="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent z-10"></div>
               <Image
-                src="/images/o_nac.jpg"
+                src="/images/stroy.jpg"
                 alt="О нашей компании"
                 fill
                 className="object-cover transition-transform duration-700 group-hover:scale-110"
@@ -73,10 +73,10 @@ const AboutSection = () => {
           <FadeInSection as="div" delay={0.2}>
             <div className="space-y-8">
               <div className="space-y-6">
-                <h3 className="text-2xl font-bold text-white">
+                <h3 className="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-2xl">
                   Мы - команда профессионалов с более чем 10-летним опытом в строительстве 
                   современных домов. Наша миссия - создавать качественное и комфортное 
                   жилье для наших клиентов, используя передовые технологии и материалы.
@@ -87,13 +87,13 @@ const AboutSection = () => {
               <div className="space-y-4">
                 {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="flex items-start space-x-4 p-4 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">
                         {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-semibold text-gray-800 mb-1">{feature.title}</h4>
+                        <p className="text-gray-600 text-lg">{feature.description}</p>
                       </div>
                     </div>
                   </FadeInSection>
@@ -109,19 +109,19 @@ const AboutSection = () => {
             {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-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">
                     {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 font-bold text-gray-800 mb-2 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 font-medium">
                     {stat.label}
                   </div>
                 </div>
@@ -137,9 +137,9 @@ 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="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-white font-medium">Готовы начать строительство?</span>
+            <span className="text-gray-800 font-medium">Готовы начать строительство?</span>
             <div className="w-2 h-2 bg-green-400 rounded-full"></div>
           </button>
         </FadeInSection>
diff --git a/src/components/CallbackModal.tsx b/src/components/CallbackModal.tsx
index de8e48d..a0cc1b0 100644
--- a/src/components/CallbackModal.tsx
+++ b/src/components/CallbackModal.tsx
@@ -68,118 +68,95 @@ const CallbackModal = ({ isOpen, onClose }: CallbackModalProps) => {
   };
 
   return (
-    <div className="fixed inset-0 bg-gray-900/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+    <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>
         
         {/* Основной контейнер модального окна */}
-        <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 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={closeModal}
-            className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors duration-300 hover:bg-white/10 rounded-full p-2 group"
+            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>
 
           {/* Заголовок */}
           <div className="text-center mb-8">
-            <h2 className="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-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 className="space-y-6" onSubmit={handleSubmit}>
-              {/* Поле имени */}
-              <div className="relative group">
+            <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/10 backdrop-blur-sm border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-blue-500/50 focus:bg-white/20 transition-all duration-300 group-hover:border-white/30"
+                  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 className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
               </div>
-
-              {/* Поле телефона */}
-              <div className="relative group">
+              
+              <div>
                 <input
                   type="tel"
                   placeholder="Ваш телефон"
                   value={phone}
-                  onChange={e => {
+                  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 backdrop-blur-sm border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-blue-500/50 focus:bg-white/20 transition-all duration-300 group-hover:border-white/30"
+                  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 className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
               </div>
-
-              {/* Поле сообщения */}
-              <div className="relative group">
+              
+              <div>
                 <textarea
-                  placeholder="Ваше сообщение (необязательно)"
+                  placeholder="Сообщение (необязательно)"
                   rows={3}
                   value={message}
-                  onChange={e => setMessage(e.target.value)}
-                  className="w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-blue-500/50 focus:bg-white/20 transition-all duration-300 group-hover:border-white/30 resize-none"
+                  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 className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
               </div>
 
-              {/* Сообщение об ошибке */}
               {error && (
-                <div className="relative p-4 rounded-xl bg-gradient-to-r from-red-500/20 to-red-600/20 border border-red-500/30 backdrop-blur-sm">
-                  <div className="flex items-center">
-                    <AlertCircle className="w-5 h-5 text-red-400 mr-3 shrink-0" />
-                    <span className="text-red-200 text-sm leading-relaxed">{error}</span>
-                  </div>
+                <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="relative w-full group overflow-hidden rounded-xl bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-white/20 backdrop-blur-sm hover:scale-105 transition-all duration-300 disabled:opacity-60 disabled:hover:scale-100"
+                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"
               >
-                <div className="absolute inset-0 bg-gradient-to-r from-blue-500/30 to-purple-500/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-                <span className="relative block py-3 px-6 text-white font-semibold">
-                  {loading ? 'Отправка...' : 'Отправить'}
-                </span>
+                {loading ? 'Отправка...' : 'Заказать звонок'}
               </button>
             </form>
           ) : (
-            <div className="text-center py-8 space-y-6">
-              {/* Иконка успеха */}
-              <div className="relative mx-auto w-20 h-20 rounded-full bg-gradient-to-br from-green-500/20 to-emerald-500/20 border border-green-500/30 backdrop-blur-sm flex items-center justify-center group">
-                <div className="absolute inset-0 rounded-full bg-gradient-to-br from-green-500/30 to-emerald-500/30 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
-                <CheckCircle className="w-10 h-10 text-green-400 relative z-10" />
+            <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>
-
-              {/* Сообщение об успехе */}
-              <div className="space-y-3">
-                <h3 className="text-xl font-bold text-white">
-                  Спасибо за заявку!
-                </h3>
-                <p className="text-gray-300 leading-relaxed">
-                  Ваши данные успешно отправлены. Мы свяжемся с вами в ближайшее время.
-                </p>
-              </div>
-
-              {/* Кнопка закрытия */}
               <button
                 onClick={closeModal}
-                className="relative group overflow-hidden rounded-xl bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-white/20 backdrop-blur-sm hover:scale-105 transition-all duration-300 px-8 py-3"
+                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"
               >
-                <div className="absolute inset-0 bg-gradient-to-r from-blue-500/30 to-purple-500/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-                <span className="relative text-white font-medium">Закрыть</span>
+                Закрыть
               </button>
             </div>
           )}
diff --git a/src/components/CatalogRequestModal.tsx b/src/components/CatalogRequestModal.tsx
index 1685039..fb18d4c 100644
--- a/src/components/CatalogRequestModal.tsx
+++ b/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 
@@ -99,10 +99,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 +114,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 +130,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 +140,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>
diff --git a/src/components/ContactModal.tsx b/src/components/ContactModal.tsx
index 1292239..03ea9f6 100644
--- a/src/components/ContactModal.tsx
+++ b/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}$/;
@@ -91,15 +94,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 +114,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={handleInputChange}
+                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
               />
-              {errors.name && (
-                <p className="text-red-400 text-sm mt-2 ml-1">{errors.name}</p>
-              )}
             </div>
-
-            {/* Кнопка отправки */}
+            
+            <div>
+              <input
+                type="tel"
+                name="phone"
+                placeholder="Ваш телефон"
+                value={formData.phone}
+                onChange={handleInputChange}
+                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={handleInputChange}
+                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
+              />
+            </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">
+            Нажимая кнопку "Отправить сообщение", вы соглашаетесь с{' '}
+            <a href="#" className="underline hover:text-blue-600 transition-colors duration-300">
+              Политикой конфиденциальности
+            </a>
+          </p>
         </div>
       </div>
     </div>
diff --git a/src/components/ContactSection.tsx b/src/components/ContactSection.tsx
index 4240eb5..9e5bf26 100644
--- a/src/components/ContactSection.tsx
+++ b/src/components/ContactSection.tsx
@@ -52,9 +52,9 @@ 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">
+    <section id="contacts" className="relative py-20 bg-gradient-to-br from-gray-50 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>
@@ -63,70 +63,70 @@ const ContactSection = () => {
       <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>
         </FadeInSection>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+        <div className="grid lg:grid-cols-2 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-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 className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-200 mr-4 group-hover/item:scale-110 transition-transform duration-300">
+                  <Phone className="w-6 h-6 text-blue-600" />
                 </div>
                 <div>
-                  <h3 className="text-xl font-bold text-white mb-2 group-hover/item:text-blue-300 transition-colors duration-300">
+                  <h3 className="text-xl font-bold text-gray-800 mb-2 group-hover/item:text-blue-600 transition-colors duration-300">
                     Телефон
                   </h3>
-                  <span className="text-gray-300 text-lg">
+                  <span className="text-gray-600 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">
-                  <Mail className="w-6 h-6 text-blue-400" />
+                <div className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-200 mr-4 group-hover/item:scale-110 transition-transform duration-300">
+                  <Mail className="w-6 h-6 text-blue-600" />
                 </div>
                 <div>
-                  <h3 className="text-xl font-bold text-white mb-2 group-hover/item:text-blue-300 transition-colors duration-300">
+                  <h3 className="text-xl font-bold text-gray-800 mb-2 group-hover/item:text-blue-600 transition-colors duration-300">
                     Email
                   </h3>
-                  <span className="text-gray-300 text-lg">
+                  <span className="text-gray-600 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="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-200 mr-4 group-hover/item:scale-110 transition-transform duration-300">
+                  <MapPin className="w-6 h-6 text-blue-600" />
                 </div>
                 <div>
-                  <h3 className="text-xl font-bold text-white mb-2 group-hover/item:text-blue-300 transition-colors duration-300">
+                  <h3 className="text-xl font-bold text-gray-800 mb-2 group-hover/item:text-blue-600 transition-colors duration-300">
                     Адрес
                   </h3>
-                  <p className="text-gray-300 text-lg leading-relaxed">
+                  <p className="text-gray-600 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">
+              <div className="pt-6 border-t border-gray-200">
+                <h3 className="text-xl font-bold text-gray-800 mb-4">
                   Реквизиты
                 </h3>
-                <p className="text-gray-300 leading-relaxed">
+                <p className="text-gray-600 leading-relaxed">
                   ИП Фомин Александр Вениаминович<br />
                   ИНН 213012845835
                 </p>
@@ -140,72 +140,84 @@ 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-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-2xl font-bold text-gray-800 mb-6 group-hover:text-blue-600 transition-colors duration-300">
                 Отправить сообщение
               </h3>
-              {!success ? (
-                <form className="space-y-6" onSubmit={handleSubmit}>
-                  <div>
-                    <input
-                      type="text"
-                      placeholder="Ваше имя"
-                      value={name}
-                      onChange={e => setName(e.target.value)}
-                      className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300"
-                    />
-                  </div>
-                  <div>
-                    <input
-                      type="tel"
-                      placeholder="Ваш телефон"
-                      value={phone}
-                      onChange={e => {
-                        const val = e.target.value.replace(/\D/g, '').slice(0, 11);
-                        setPhone(val);
-                      }}
-                      className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300"
-                    />
-                  </div>
-                  <div>
-                    <textarea
-                      placeholder="Ваше сообщение"
-                      rows={4}
-                      value={message}
-                      onChange={e => setMessage(e.target.value)}
-                      className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300 resize-none"
-                    />
-                  </div>
-                  {error && (
-                    <div className="bg-red-500/20 border border-red-500/30 text-red-300 text-center py-3 px-4 rounded-xl flex items-center justify-center backdrop-blur-sm">
-                      <AlertCircle className="w-5 h-5 mr-2 shrink-0" />
-                      <span className="block w-full break-words">{error}</span>
-                    </div>
-                  )}
-                  <button
-                    type="submit"
-                    disabled={loading}
-                    className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-3 rounded-xl hover:from-blue-600 hover:to-purple-600 transition-all duration-300 font-semibold disabled:opacity-60 hover:scale-105 hover:shadow-lg"
-                  >
-                    {loading ? 'Отправка...' : 'Отправить'}
-                  </button>
-                </form>
-              ) : (
-                <div className="flex flex-col items-center justify-center py-8 animate-fadeIn">
-                  <div className="bg-green-500/20 border border-green-500/30 rounded-2xl p-6 mb-6 flex items-center backdrop-blur-sm w-full">
-                    <CheckCircle className="w-8 h-8 text-green-400 mr-3" />
-                    <span className="text-green-300 text-lg font-semibold leading-snug text-left">
-                      Спасибо! Ваше сообщение успешно отправлено.
-                    </span>
-                  </div>
+              
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div>
+                  <input
+                    type="text"
+                    name="name"
+                    placeholder="Ваше имя"
+                    value={name}
+                    onChange={e => setName(e.target.value)}
+                    className="w-full px-4 py-3 rounded-lg bg-white/50 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={phone}
+                    onChange={e => {
+                      const val = e.target.value.replace(/\D/g, '').slice(0, 11);
+                      setPhone(val);
+                    }}
+                    className="w-full px-4 py-3 rounded-lg bg-white/50 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={message}
+                    onChange={e => setMessage(e.target.value)}
+                    className="w-full px-4 py-3 rounded-lg bg-white/50 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
+                  />
+                </div>
+                
+                <button
+                  type="submit"
+                  disabled={loading}
+                  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"
+                >
+                  {loading ? 'Отправка...' : 'Отправить сообщение'}
+                </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>
+              
+              <p className="text-xs text-gray-500 mt-4 text-center">
+                Нажимая кнопку "Отправить сообщение", вы соглашаетесь с{' '}
+                <a href="#" className="underline hover:text-blue-600 transition-colors duration-300">
+                  Политикой конфиденциальности
+                </a>
+              </p>
             </div>
 
             {/* Декоративный элемент */}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index c05e2a5..6fe0bb6 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,7 +1,7 @@
 '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 MobileMenu from './MobileMenu';
@@ -60,9 +60,10 @@ const Header = () => {
               </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="bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-white/20 backdrop-blur-sm text-white px-8 py-3.5 rounded-lg hover:from-blue-500/30 hover:to-purple-500/30 hover:border-white/40 transition-all duration-300 hover:scale-105 text-base font-semibold flex-shrink-0 flex items-center space-x-2 group"
               >
-                Оставить заявку
+                <Phone className="w-5 h-5 group-hover:animate-bounce" />
+                <span>Оставить заявку</span>
               </button>
             </div>
 
diff --git a/src/components/ProjectsSection.tsx b/src/components/ProjectsSection.tsx
index 80105b7..41be607 100644
--- a/src/components/ProjectsSection.tsx
+++ b/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;
@@ -121,16 +122,28 @@ 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'
+        }`}
       />
 
       {/* Навигация по изображениям */}
@@ -175,7 +188,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,9 +246,9 @@ 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">
+    <section id="projects" className="relative py-20 bg-gradient-to-br from-gray-50 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>
@@ -244,7 +257,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
       <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 +265,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 +294,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 +306,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 +336,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 +344,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 +355,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>
diff --git a/src/components/ReviewsSection.tsx b/src/components/ReviewsSection.tsx
index f324223..4bddca3 100644
--- a/src/components/ReviewsSection.tsx
+++ b/src/components/ReviewsSection.tsx
@@ -30,9 +30,9 @@ const reviews = [
 
 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 +41,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 +53,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">
@@ -69,27 +69,33 @@ const ReviewsSection = () => {
                       className="object-cover"
                     />
                     {/* Декоративная рамка */}
-                    <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">
+                  "{review.text}"
+                </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>
 
               {/* Декоративный элемент */}
diff --git a/src/components/TeamSection.tsx b/src/components/TeamSection.tsx
index 07f3287..37d8dac 100644
--- a/src/components/TeamSection.tsx
+++ b/src/components/TeamSection.tsx
@@ -4,6 +4,7 @@ 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 workExamples = [
   {
@@ -56,13 +57,44 @@ const workExamples = [
   },
 ];
 
+const additionalServices = [
+  {
+    id: 1,
+    icon: Droplets,
+    title: 'Монтаж водоснабжения',
+    description: 'Проектирование и установка систем водоснабжения с использованием качественных материалов',
+    features: ['Холодное и горячее водоснабжение', 'Установка счетчиков', 'Гарантия на работы']
+  },
+  {
+    id: 2,
+    icon: Wrench,
+    title: 'Монтаж канализации',
+    description: 'Полный комплекс работ по устройству канализационных систем',
+    features: ['Внутренняя канализация', 'Наружные сети', 'Септики и очистные сооружения']
+  },
+  {
+    id: 3,
+    icon: Zap,
+    title: 'Монтаж электрики',
+    description: 'Электромонтажные работы любой сложности с соблюдением всех норм безопасности',
+    features: ['Внутренняя проводка', 'Электрощиты', 'Освещение и розетки']
+  },
+  {
+    id: 4,
+    icon: Thermometer,
+    title: 'Монтаж отопления',
+    description: 'Установка современных систем отопления для комфортного проживания',
+    features: ['Радиаторное отопление', 'Теплые полы', 'Котельное оборудование']
+  },
+];
+
 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">
+    <section 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>
@@ -71,27 +103,27 @@ const WorkExamplesSection = () => {
       <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>
         </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-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto" delay={0.2}>
           Реальные проекты, которые мы успешно реализовали для наших клиентов
         </FadeInSection>
 
         {/* Карточки примеров работ */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
           {workExamples.map((example, index) => (
             <FadeInSection 
               key={example.id} 
               as="div" 
-              className="group relative 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 overflow-hidden"
+              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">
                 {/* Изображение */}
@@ -114,10 +146,10 @@ const WorkExamplesSection = () => {
                 
                 {/* Контент */}
                 <div className="p-6">
-                  <h3 className="text-xl font-bold text-white mb-2 group-hover:text-blue-300 transition-all duration-300">
+                  <h3 className="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-300 text-sm mb-4 leading-relaxed">
+                  <p className="text-gray-600 text-sm mb-4 leading-relaxed">
                     {example.description}
                   </p>
                   
@@ -125,10 +157,10 @@ const WorkExamplesSection = () => {
                   <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-400 text-sm">Площадь:</span>
-                      <span className="text-white text-sm font-medium">{example.area}</span>
+                      <span className="text-gray-500 text-sm">Площадь:</span>
+                      <span className="text-gray-800 text-sm font-medium">{example.area}</span>
                     </div>
-                    <div className="px-3 py-1 bg-white/10 rounded-full text-green-400 text-xs font-medium">
+                    <div className="px-3 py-1 bg-green-100 rounded-full text-green-600 text-xs font-medium">
                       Завершен
                     </div>
                   </div>
@@ -141,13 +173,63 @@ const WorkExamplesSection = () => {
           ))}
         </div>
 
+        {/* Дополнительные услуги */}
+        <FadeInSection as="div" className="mb-16" delay={0.8}>
+          <div className="text-center mb-12">
+            <h3 className="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 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {additionalServices.map((service, index) => (
+              <FadeInSection 
+                key={service.id} 
+                as="div" 
+                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.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 text-center">
+                  <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-200 mb-4 group-hover:scale-110 transition-transform duration-300">
+                    <service.icon className="w-8 h-8 text-blue-600 group-hover:text-blue-700" />
+                  </div>
+                  
+                  <h4 className="text-lg font-bold text-gray-800 mb-3 group-hover:text-blue-600 transition-colors duration-300">
+                    {service.title}
+                  </h4>
+                  
+                  <p className="text-gray-600 text-sm mb-4 leading-relaxed">
+                    {service.description}
+                  </p>
+                  
+                  <ul className="space-y-2">
+                    {service.features.map((feature, featureIndex) => (
+                      <li key={featureIndex} className="flex items-center text-xs text-gray-500">
+                        <div className="w-1.5 h-1.5 bg-green-400 rounded-full mr-2"></div>
+                        {feature}
+                      </li>
+                    ))}
+                  </ul>
+                </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>
+
         {/* Призыв к действию */}
-        <FadeInSection as="div" delay={0.8} className="text-center mt-16">
+        <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-white/20 backdrop-blur-sm hover:scale-105 transition-transform duration-300 cursor-pointer hover:from-blue-500/30 hover:to-purple-500/30"
+            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-white font-medium">Хотите увидеть свой дом в этой галерее?</span>
+            <span className="text-gray-800 font-medium">Хотите увидеть свой дом в этой галерее?</span>
             <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
           </button>
         </FadeInSection>
diff --git a/src/components/WhyChooseUsSection.tsx b/src/components/WhyChooseUsSection.tsx
index fa84b35..a7dceba 100644
--- a/src/components/WhyChooseUsSection.tsx
+++ b/src/components/WhyChooseUsSection.tsx
@@ -28,9 +28,9 @@ 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">
+    <section 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>
@@ -39,30 +39,30 @@ const WhyChooseUsSection = () => {
       <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>
         </FadeInSection>
 
         {/* Карточки преимуществ */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 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-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-12 h-12 text-blue-600 mb-4 group-hover:text-blue-700 group-hover:scale-110 transition-all duration-300" />
+                <h3 className="text-xl font-bold text-gray-800 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">
                   {feature.description}
                 </p>
               </div>