BivekiGroup/yourhouse
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
albivkt
2025-07-12 23:31:40 +03:00
parent bf255a92a7
commit 52c34bc14a
12 changed files with 404 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
next.config.ts
View File

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

BIN
public/images/stryokab.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 KiB

52
src/app/page.tsx
View File

@ -83,7 +83,7 @@ export default function Home() {
{/* Hero Section */} {/* Hero Section */}
<section <section
className="relative min-h-screen pt-20 pb-16 flex items-center bg-cover bg-center bg-no-repeat" 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={{ style={{
backgroundImage: "url('/images/stanica.png')" backgroundImage: "url('/images/stanica.png')"
}} }}
@ -92,50 +92,50 @@ export default function Home() {
<div className="absolute inset-0 bg-black/30 z-0"></div> <div className="absolute inset-0 bg-black/30 z-0"></div>
{/* Content */} {/* Content */}
<div className="container mx-auto px-4 relative z-10"> <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-12"> <div className="flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12">
{/* Left Content */} {/* 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"> <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 />
И КАРКАСНЫХ ДОМОВ<br /> И КАРКАСНЫХ ДОМОВ<br />
С ФИКСАЦИЕЙ ЦЕНЫ С ФИКСАЦИЕЙ ЦЕНЫ
</h1> </h1>
<p className="text-xl lg:text-2xl text-white/90 mb-12"> <p className="text-lg sm:text-xl lg:text-2xl text-white/90 mb-8 sm:mb-12">
Построим технологичный дом за 90 дней Построим технологичный дом за 90 дней
</p> </p>
{/* Stats Section */} {/* Stats Section */}
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 mb-8"> <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-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg"> <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-3xl lg:text-4xl font-bold text-white mb-2">+100</div> <div className="text-2xl sm: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="text-white/80 text-xs sm:text-sm font-medium">Реализованных объектов</div>
</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="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-3xl lg:text-4xl font-bold text-white mb-2">5</div> <div className="text-2xl sm: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="text-white/80 text-xs sm:text-sm font-medium">Лет гарантии</div>
</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="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-3xl lg:text-4xl font-bold text-white mb-2">90%</div> <div className="text-2xl sm: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="text-white/80 text-xs sm:text-sm font-medium">Клиентов рекомендуют нас</div>
</div> </div>
</div> </div>
</FadeInSection> </FadeInSection>
{/* Right Form */} {/* Right Form */}
<FadeInSection as="div" className="w-full lg:w-96" delay={0.4}> <FadeInSection as="div" className="w-full max-w-md 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"> <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="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"> <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> </h3>
<form onSubmit={handleFormSubmit} className="space-y-6"> <form onSubmit={handleFormSubmit} className="space-y-4 sm:space-y-6">
<input <input
type="tel" type="tel"
placeholder="Ваш телефон" placeholder="Ваш телефон"
@ -144,34 +144,34 @@ export default function Home() {
const val = e.target.value.replace(/\D/g, '').slice(0, 11); const val = e.target.value.replace(/\D/g, '').slice(0, 11);
setPhone(val); 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 <input
type="text" type="text"
placeholder="Ваше имя" placeholder="Ваше имя"
value={name} value={name}
onChange={(e) => setName(e.target.value)} 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 <button
type="submit" type="submit"
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 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"
> >
Обсудить проект Обсудить проект
<svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg> </svg>
</button> </button>
{error && ( {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} {error}
</div> </div>
)} )}
</form> </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;, вы соглашаетесь с{' '} Нажимая кнопку &quot;Обсудить проект&quot;, вы соглашаетесь с{' '}
<a href="#" className="underline hover:text-blue-400 transition-colors duration-300"> <a href="#" className="underline hover:text-blue-400 transition-colors duration-300">
Политикой конфиденциальности Политикой конфиденциальности

52
src/components/AboutSection.tsx
View File

@ -34,59 +34,61 @@ const AboutSection = () => {
]; ];
return ( return (
<section id="about" className="relative py-20 bg-gradient-to-br from-blue-50 via-white to-indigo-50 overflow-hidden"> <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 inset-0 opacity-40">
{/* Треугольники */} {/* Треугольники */}
<div className="absolute top-10 left-10 w-32 h-32 bg-blue-500 transform rotate-45 opacity-20"></div> <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-24 h-24 bg-indigo-600 transform rotate-12 opacity-30"></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-20 h-20 bg-cyan-500 transform -rotate-45 opacity-25"></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-16 h-16 bg-blue-400 rounded-full opacity-30"></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-12 h-12 bg-indigo-500 rounded-full opacity-40"></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-8 h-8 bg-cyan-400 rounded-full opacity-35"></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 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 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>
<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"> <FadeInSection as="div" className="text-center mb-12 sm:mb-16">
<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 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> </h2>
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div> <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
</FadeInSection> </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"> <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> <div className="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent z-10"></div>
<Image <Image
src="/images/o_nac.jpg" src="/images/stryokab.webp?v=3&t=1234567890"
alt="О нашей компании" alt="Строительная бригада за работой"
fill fill
className="object-cover transition-transform duration-700 group-hover:scale-110" className="object-cover transition-transform duration-700 group-hover:scale-110"
priority
unoptimized={true}
/> />
{/* Декоративные элементы */} {/* Декоративные элементы */}
<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 -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-32 h-32 bg-gradient-to-br from-purple-500/30 to-blue-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> </div>
</FadeInSection> </FadeInSection>
{/* Текстовый контент */} {/* Текстовый контент */}
<FadeInSection as="div" delay={0.2}> <FadeInSection as="div" delay={0.2}>
<div className="h-[500px] flex flex-col justify-center space-y-6"> <div className="lg:h-[500px] flex flex-col justify-center space-y-4 sm:space-y-6">
<div className="space-y-4"> <div className="space-y-3 sm:space-y-4">
<h3 className="text-2xl font-bold text-gray-800"> <h3 className="text-xl sm:text-2xl font-bold text-gray-800">
Строим дома вашей мечты Строим дома вашей мечты
</h3> </h3>
<p className="text-gray-600 leading-relaxed text-xl"> <p className="text-gray-600 leading-relaxed text-base sm:text-lg lg:text-xl">
Мы - команда профессионалов с более чем 10-летним опытом в строительстве Мы - команда профессионалов с более чем 10-летним опытом в строительстве
современных домов. Наша миссия - создавать качественное и комфортное современных домов. Наша миссия - создавать качественное и комфортное
жилье для наших клиентов, используя передовые технологии и материалы. жилье для наших клиентов, используя передовые технологии и материалы.
@ -115,23 +117,23 @@ const AboutSection = () => {
{/* Статистика */} {/* Статистика */}
<FadeInSection as="div" delay={0.4}> <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) => ( {stats.map((stat, index) => (
<div <div
key={index} key={index}
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" 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/10 to-purple-500/10 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 z-10 text-center">
<div className="text-5xl mb-4 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} {stat.icon}
</div> </div>
<div className="text-5xl font-bold text-gray-800 mb-4 group-hover:text-blue-600 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} {stat.number}
</div> </div>
<div className="text-gray-600 text-lg font-medium leading-relaxed"> <div className="text-gray-600 text-sm sm:text-base lg:text-lg font-medium leading-relaxed">
{stat.label} {stat.label}
</div> </div>
</div> </div>

1
src/components/CatalogRequestModal.tsx
View File

@ -92,6 +92,7 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
width={320} width={320}
height={120} height={120}
className="object-contain rounded-lg shadow-md group-hover:scale-105 transition-transform duration-300" 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> <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>

286
src/components/ContactSection.tsx
View File

@ -52,101 +52,105 @@ const ContactSection = () => {
}; };
return ( return (
<section id="contacts" className="relative py-20 bg-gradient-to-r from-slate-50 via-white to-blue-50 overflow-hidden"> <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 inset-0 opacity-30">
{/* Связи и соединения */} {/* Геометрические фигуры */}
<div className="absolute top-16 left-1/4 w-12 h-12 border-2 border-dashed border-blue-400 rounded-full opacity-25"></div> <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 bottom-24 right-1/4 w-8 h-8 border-2 border-dashed border-indigo-400 rounded-full opacity-30"></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-16 w-6 h-1 bg-blue-400 opacity-35"></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 top-1/3 left-24 w-4 h-1 bg-blue-300 opacity-30"></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-1/3 left-30 w-2 h-1 bg-blue-200 opacity-25"></div>
<div className="absolute bottom-1/3 right-16 w-6 h-1 bg-indigo-400 opacity-35"></div> {/* Вертикальные линии */}
<div className="absolute bottom-1/3 right-24 w-4 h-1 bg-indigo-300 opacity-30"></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 bottom-1/3 right-30 w-2 h-1 bg-indigo-200 opacity-25"></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 className="absolute top-8 right-8 w-16 h-16 border-2 border-blue-300 opacity-20 transform rotate-12"></div>
<div className="absolute bottom-8 left-8 w-12 h-12 border-2 border-cyan-300 opacity-25 transform -rotate-12"></div>
</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"> <FadeInSection as="div" className="text-center mb-12 sm:mb-16">
<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 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> </h2>
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div> <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
</FadeInSection> </FadeInSection>
<div className="grid lg:grid-cols-2 gap-12"> <div className="grid lg:grid-cols-2 gap-8 sm:gap-12">
{/* Контактная информация */} {/* Контактная информация */}
<FadeInSection <FadeInSection
as="div" as="div"
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" 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} delay={0.2}
> >
{/* Фон */} {/* Фон */}
<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="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="relative z-10">
<div className="flex items-start group/item"> <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">
<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" /> </h3>
<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>
<a href="tel:+79530132423" className="text-lg sm:text-xl font-semibold text-gray-800 hover:text-blue-600 transition-colors duration-300">
+7 953 013 24 23
</a>
</div>
</div> </div>
<div>
<h3 className="text-xl font-bold text-gray-800 mb-2 group-hover/item:text-blue-600 transition-colors duration-300"> <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">
</h3> <svg className="w-5 sm:w-6 h-5 sm:h-6 text-green-600" fill="currentColor" viewBox="0 0 24 24">
<a <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"/>
href="tel:+79530132423" </svg>
className="text-gray-600 text-lg hover:text-blue-600 hover:bg-blue-50 px-2 py-1 rounded-lg transition-all duration-300 cursor-pointer" </div>
> <div>
7 953 013 24 23 <p className="text-gray-600 text-sm sm:text-base mb-1">WhatsApp</p>
</a> <a href="https://wa.me/79530132423" className="text-lg sm:text-xl font-semibold text-gray-800 hover:text-green-600 transition-colors duration-300">
+7 953 013 24 23
</a>
</div>
</div> </div>
</div>
<div className="flex items-start space-x-3 sm:space-x-4">
<div className="flex items-start group/item"> <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">
<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"> <svg className="w-5 sm:w-6 h-5 sm:h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<Mail className="w-6 h-6 text-blue-600" /> <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>
<div>
<h3 className="text-xl font-bold text-gray-800 mb-2 group-hover/item:text-blue-600 transition-colors duration-300"> <div className="flex items-start space-x-3 sm:space-x-4">
Email <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">
</h3> <svg className="w-5 sm:w-6 h-5 sm:h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<span className="text-gray-600 text-lg"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
Будет </svg>
</span> </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>
</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-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-gray-800 mb-2 group-hover/item:text-blue-600 transition-colors duration-300">
Адрес
</h3>
<p className="text-gray-600 text-lg leading-relaxed">
г. Чебоксары, ул. Калинина, 107
</p>
</div>
</div>
<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-600 leading-relaxed">
ИП Фомин Александр Вениаминович<br />
ИНН 213012845835
</p>
</div>
</div> </div>
{/* Декоративный элемент */} {/* Декоративный элемент */}
@ -156,84 +160,88 @@ const ContactSection = () => {
{/* Форма обратной связи */} {/* Форма обратной связи */}
<FadeInSection <FadeInSection
as="div" as="div"
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" 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} delay={0.4}
> >
{/* Фон */} {/* Фон */}
<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="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 z-10">
<h3 className="text-2xl font-bold text-gray-800 mb-6 group-hover:text-blue-600 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> </h3>
<form onSubmit={handleSubmit} className="space-y-4"> {success ? (
<div> <div className="text-center py-8 sm:py-12">
<input <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">
type="text" <svg className="w-6 sm:w-8 h-6 sm:h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
name="name" <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
placeholder="Ваше имя" </svg>
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> </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>
{error && ( </div>
<div className="bg-red-100 border border-red-300 text-red-700 text-center py-3 px-4 rounded-xl text-sm"> ) : (
{error} <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"
id="name"
value={name}
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>
)}
</form> <div>
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
<p className="text-xs text-gray-500 mt-4 text-center"> Телефон
Нажимая кнопку &ldquo;Отправить сообщение&rdquo;, вы соглашаетесь с{' '} </label>
<a href="#" className="underline hover:text-blue-600 transition-colors duration-300"> <input
Политикой конфиденциальности type="tel"
</a> id="phone"
</p> value={phone}
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
id="message"
value={message}
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="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-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 ? 'Отправка...' : 'Отправить сообщение'}
</button>
</form>
)}
</div> </div>
{/* Декоративный элемент */} {/* Декоративный элемент */}

45
src/components/Header.tsx
View File

@ -13,46 +13,43 @@ const Header = () => {
return ( return (
<> <>
<FadeInOnMount as="header" className={`fixed w-full z-50 bg-gray-900/95 backdrop-blur-sm py-4 shadow-lg`}> <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"> <div className="container mx-auto px-4 sm:px-6">
<div className="flex items-center justify-between gap-4"> <div className="flex items-center justify-between gap-2 sm:gap-4">
{/* Logo */} {/* Logo */}
<Link href="/" className="flex items-center space-x-3 flex-shrink-0 py-1"> <Link href="/" className="flex items-center space-x-2 sm:space-x-3 flex-shrink-0 py-1">
<div className="bg-blue-600 p-2 rounded"> <div className="bg-blue-600 p-1.5 sm:p-2 rounded">
<svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24"> <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"/> <path d="M2 12L12 2L22 12V22H16V16H8V22H2V12Z"/>
</svg> </svg>
</div> </div>
<div className="text-white"> <div className="text-white">
<div className="text-xl font-bold">Ваш Дом</div> <div className="text-lg sm:text-xl font-bold">Ваш Дом</div>
</div> </div>
</Link> </Link>
{/* Navigation */} {/* Navigation */}
<nav className="hidden lg:flex items-center space-x-8"> <nav className="hidden lg:flex items-center space-x-8 flex-1 justify-center">
<Link href="#services" className="text-white hover:text-blue-400 transition-colors text-lg font-medium py-2 px-3 rounded-lg hover:bg-white/10"> <Link href="#about" className="text-white hover:text-blue-400 transition-colors font-medium">
Услуги
</Link>
<Link href="#about" className="text-white hover:text-blue-400 transition-colors text-lg font-medium py-2 px-3 rounded-lg hover:bg-white/10">
О нас О нас
</Link> </Link>
<Link href="#projects" className="text-white hover:text-blue-400 transition-colors text-lg font-medium py-2 px-3 rounded-lg hover:bg-white/10"> <Link href="#projects" className="text-white hover:text-blue-400 transition-colors font-medium">
Каталог домов Проекты
</Link> </Link>
<Link href="#additional-services" className="text-white hover:text-blue-400 transition-colors text-lg font-medium py-2 px-3 rounded-lg hover:bg-white/10"> <Link href="#additional-services" className="text-white hover:text-blue-400 transition-colors font-medium">
Доп услуги Услуги
</Link> </Link>
<Link href="#contacts" className="text-white hover:text-blue-400 transition-colors text-lg font-medium py-2 px-3 rounded-lg hover:bg-white/10"> <Link href="#contact" className="text-white hover:text-blue-400 transition-colors font-medium">
Контакты Контакты
</Link> </Link>
</nav> </nav>
{/* Right side */} {/* Contact Info & CTA */}
<div className="hidden md:flex items-center space-x-6 flex-shrink-0"> <div className="hidden md:flex items-center space-x-4 lg:space-x-6 flex-shrink-0">
<div className="text-right"> <div className="text-right">
<a <a
href="tel:+79530132423" href="tel:+79530132423"
className="flex items-center text-white hover:text-blue-400 transition-colors group text-lg font-semibold whitespace-nowrap" className="flex items-center text-white hover:text-blue-400 transition-colors group text-base lg:text-lg font-semibold whitespace-nowrap"
> >
+7 953 013 24 23 +7 953 013 24 23
</a> </a>
@ -60,7 +57,7 @@ const Header = () => {
</div> </div>
<button <button
onClick={() => setIsModalOpen(true)} onClick={() => setIsModalOpen(true)}
className="relative bg-gradient-to-r from-orange-500 to-red-500 text-white px-8 py-3.5 rounded-lg font-bold 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" 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 bg-gradient-to-r from-orange-400 to-red-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
@ -71,7 +68,7 @@ const Header = () => {
{/* Контент кнопки */} {/* Контент кнопки */}
<div className="relative z-10 flex items-center space-x-2"> <div className="relative z-10 flex items-center space-x-2">
<Phone className="w-5 h-5 group-hover:animate-bounce" /> <Phone className="w-4 lg:w-5 h-4 lg:h-5 group-hover:animate-bounce" />
<span className="relative"> <span className="relative">
Оставить заявку Оставить заявку
{/* Подчеркивание */} {/* Подчеркивание */}
@ -89,7 +86,7 @@ const Header = () => {
className="md:hidden text-white hover:text-gray-300 transition-colors p-2 hover:bg-white/10 rounded-lg" className="md:hidden text-white hover:text-gray-300 transition-colors p-2 hover:bg-white/10 rounded-lg"
aria-label="Открыть меню" aria-label="Открыть меню"
> >
<Menu className="w-6 h-6" /> <Menu className="w-5 h-5 sm:w-6 sm:h-6" />
</button> </button>
</div> </div>
</div> </div>

240
src/components/HouseCalculatorModal.tsx
View File

@ -115,47 +115,43 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
}; };
return ( 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 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 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-80 h-80 bg-purple-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-64 h-64 bg-cyan-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>
<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 <button
onClick={closeModal} 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="Закрыть калькулятор" 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> </button>
<div className="p-4 sm:p-6 md:p-8"> <div className="p-4 sm:p-6 lg:p-8">
<div className="flex items-center justify-between mb-4 sm:mb-6"> <div className="text-center mb-6 sm:mb-8">
<span className="text-gray-300 text-xs sm:text-sm"> <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">
{step < 5 ? 'Для расчета стоимости выберите один из вариантов' : 'Спасибо за заявку!'} Калькулятор стоимости дома
</span> </h1>
<span className="text-gray-300 text-xs sm:text-sm">{step}/5</span> <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>
<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> </div>
{step === 1 && ( {step === 1 && (
<div> <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> </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) => ( {materials.map((m) => (
<button <button
key={m.value} key={m.value}
type="button" type="button"
onClick={() => setMaterial(m.value)} 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 material === m.value
? 'border-blue-500 shadow-lg shadow-blue-500/25' ? 'border-blue-500 shadow-lg shadow-blue-500/25'
: 'border-white/20 hover:border-white/40' : 'border-white/20 hover:border-white/40'
@ -166,22 +162,16 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
material === m.value ? 'opacity-100' : 'opacity-0' material === m.value ? 'opacity-100' : 'opacity-0'
}`}></div> }`}></div>
<div className="relative z-10 flex flex-col items-center"> <div className="relative z-10 text-center">
<div className="relative w-20 h-20 sm:w-24 sm:h-24 mb-3 sm:mb-4 rounded-xl overflow-hidden"> <div className="text-2xl sm:text-3xl lg:text-4xl mb-2 sm:mb-3 group-hover:scale-110 transition-transform duration-300">
<Image {m.icon}
src={m.img}
alt={m.label}
fill
className="object-cover"
sizes="(max-width: 640px) 80px, (max-width: 1024px) 96px, 96px"
/>
</div> </div>
<span className="text-sm sm:text-base font-medium text-white text-center group-hover:text-blue-300 transition-colors duration-300"> <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.label} {m.name}
</span> </h3>
{material === m.value && ( <p className="text-xs sm:text-sm text-gray-300 group-hover:text-white transition-colors duration-300">
<CheckCircle className="w-5 h-5 sm:w-6 sm:h-6 text-blue-400 absolute top-2 right-2" /> {m.description}
)} </p>
</div> </div>
</button> </button>
))} ))}
@ -191,12 +181,12 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
{step === 2 && ( {step === 2 && (
<div> <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> </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) => ( {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"> <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 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="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative z-10 flex items-center"> <div className="relative z-10 flex items-center">
<input <input
@ -205,9 +195,9 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
value={a} value={a}
checked={area === a} checked={area === a}
onChange={() => setArea(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> </div>
</label> </label>
))} ))}
@ -217,23 +207,31 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
{step === 3 && ( {step === 3 && (
<div> <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> </h2>
<div className="flex flex-col gap-3 sm:gap-4"> <div className="space-y-2 sm:space-y-3 lg:space-y-4">
{finishes.map((f) => ( {options.map((option) => (
<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"> <label key={option.value} 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 border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300 flex items-center justify-between">
<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="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative z-10 flex items-center"> <div className="relative z-10 flex items-center flex-1">
<input <input
type="radio" type="checkbox"
name="finish" checked={selectedOptions.includes(option.value)}
value={f} onChange={() => handleOptionChange(option.value)}
checked={finish === f} 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"
onChange={() => setFinish(f)}
className="w-4 h-4 sm:w-5 sm:h-5 mr-3 accent-blue-500"
/> />
<span className="text-base sm:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{f}</span> <div className="flex-1">
<span className="text-sm sm:text-base lg:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">
{option.name}
</span>
<div className="text-xs sm:text-sm text-gray-300 mt-1">
{option.description}
</div>
</div>
</div>
<div className="relative z-10 text-xs sm:text-sm lg:text-base text-blue-300 font-semibold">
+{option.price.toLocaleString()} ₽
</div> </div>
</label> </label>
))} ))}
@ -242,86 +240,76 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
)} )}
{step === 4 && ( {step === 4 && (
<div> <div className="text-center">
<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"> <div className="mb-6 sm:mb-8">
Источник финансирования <div className="text-3xl sm:text-4xl lg:text-5xl mb-2 sm:mb-4">🏠</div>
</h2> <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">
<div className="flex flex-col gap-3 sm:gap-4"> Расчет готов!
{finances.map((f) => ( </h2>
<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="text-2xl sm:text-3xl lg:text-4xl font-bold text-blue-400 mb-2 sm:mb-4">
<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> {totalPrice.toLocaleString()} ₽
<div className="relative z-10 flex items-center"> </div>
<input <p className="text-sm sm:text-base text-gray-300">
type="radio" Итоговая стоимость строительства
name="finance" </p>
value={f} </div>
checked={finance === f}
onChange={() => setFinance(f)} <div className="bg-white/10 backdrop-blur-md rounded-xl p-4 sm:p-6 mb-6 sm:mb-8 border border-white/20">
className="w-4 h-4 sm:w-5 sm:h-5 mr-3 accent-blue-500" <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">
<span className="text-base sm:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{f}</span> <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">{basePrice.toLocaleString()} ₽</span>
</div>
{selectedOptions.length > 0 && (
<div className="flex justify-between">
<span>Дополнительно:</span>
<span className="text-white">+{optionsPrice.toLocaleString()} ₽</span>
</div> </div>
</label> )}
))} </div>
</div> </div>
</div> </div>
)} )}
{step === 5 && ( <div className="flex justify-between items-center mt-6 sm:mt-8">
<div className="flex flex-col items-center justify-center py-8 sm:py-12 animate-fadeIn"> {step > 1 && (
<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"> <button
<CheckCircle className="w-8 h-8 sm:w-10 sm:h-10 text-green-400 mr-3 sm:mr-4 flex-shrink-0" /> onClick={handlePrevious}
<span className="text-green-300 text-base sm:text-lg md:text-xl font-semibold leading-snug text-left"> 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"
Благодарим за обращение в нашу компанию!<br className='hidden md:block' /> В течение 15 минут мы свяжемся с вами! >
</span> <ChevronLeft className="w-4 h-4 sm:w-5 sm:h-5" />
</div> <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>
) : (
<button <button
onClick={closeModal} 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 ml-auto text-sm sm:text-base"
> >
Закрыть <span>Готово</span>
<Check className="w-4 h-4 sm:w-5 sm:h-5" />
</button> </button>
</div> )}
)} </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>
)}
{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}
disabled={isSubmitting}
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 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:scale-100"
>
{isSubmitting ? 'Отправка...' : 'Рассчитать стоимость'}
</button>
)}
</div>
)}
</div> </div>
</div> </div>
</div> </div>

1
src/components/ProjectsSection.tsx
View File

@ -144,6 +144,7 @@ const ProjectImageSlider = ({ project }: { project: typeof projects[0] }) => {
? 'object-contain p-4' ? 'object-contain p-4'
: 'object-cover' : 'object-cover'
}`} }`}
unoptimized={true}
/> />
{/* Навигация по изображениям */} {/* Навигация по изображениям */}

1
src/components/ReviewsSection.tsx
View File

@ -75,6 +75,7 @@ const ReviewsSection = () => {
alt={review.name} alt={review.name}
fill fill
className="object-cover" className="object-cover"
unoptimized={true}
/> />
{/* Декоративная рамка */} {/* Декоративная рамка */}
<div className="absolute inset-0 rounded-full border border-gray-200 group-hover:border-blue-300 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>

92
src/components/TeamSection.tsx
View File

@ -9,51 +9,51 @@ import { Droplets, Zap, Thermometer, Wrench } from 'lucide-react';
const workExamples = [ const workExamples = [
{ {
id: 1, id: 1,
title: 'Деревянный каркасный дом', title: 'Дом из пеноблоков',
description: 'Г.Чебоксары п. Альгешево, 100 м2', description: 'Г.Чебоксары п. Альгешево, 100 м2',
image: '/images/koroche.jpg', image: '/images/koroche.jpg',
area: '100 кв.м', area: '100 кв.м',
material: 'Каркасная технология', material: 'Пеноблоки',
}, },
{ {
id: 2, id: 2,
title: 'Деревянный каркасный дом', title: 'Дом из пеноблоков',
description: 'г. Мариинский Посад, 80 м2', description: 'г. Мариинский Посад, 80 м2',
image: '/images/koroche2.jpg', image: '/images/koroche2.jpg',
area: '80 кв.м', area: '80 кв.м',
material: 'Каркасная технология', material: 'Пеноблоки',
}, },
{ {
id: 3, id: 3,
title: 'Деревянный каркасный дом', title: 'Дом из пеноблоков',
description: 'г. Цивильск, 80 м2', description: 'г. Цивильск, 80 м2',
image: '/images/koroche3.jpg', image: '/images/koroche3.jpg',
area: '80 кв.м', area: '80 кв.м',
material: 'Каркасная технология', material: 'Пеноблоки',
}, },
{ {
id: 4, id: 4,
title: 'Деревянный каркасный дом', title: 'Дом из пеноблоков',
description: 'с. Комсомольское, 78 м2', description: 'с. Комсомольское, 78 м2',
image: '/images/koroche4.jpg', image: '/images/koroche4.jpg',
area: '78 кв.м', area: '78 кв.м',
material: 'Каркасная технология', material: 'Пеноблоки',
}, },
{ {
id: 5, id: 5,
title: 'Деревянный каркасный дом', title: 'Дом из пеноблоков',
description: 'Сосновка, 92 м2', description: 'Сосновка, 92 м2',
image: '/images/koroche5.jpg', image: '/images/koroche5.jpg',
area: '92 кв.м', area: '92 кв.м',
material: 'Каркасная технология', material: 'Пеноблоки',
}, },
{ {
id: 6, id: 6,
title: 'Деревянный каркасный дом', title: 'Дом из пеноблоков',
description: 'пос. Кугеси 110 м2', description: 'пос. Кугеси 110 м2',
image: '/images/koroche6.webp', image: '/images/koroche6.webp',
area: '110 кв.м', area: '110 кв.м',
material: 'Каркасная технология', material: 'Пеноблоки',
}, },
]; ];
@ -96,17 +96,17 @@ const WorkExamplesSection = () => {
const [isCallbackModalOpen, setIsCallbackModalOpen] = useState(false); const [isCallbackModalOpen, setIsCallbackModalOpen] = useState(false);
return ( return (
<section className="relative py-20 bg-gradient-to-tl from-indigo-50 via-white to-blue-50 overflow-hidden"> <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 inset-0 opacity-25">
{/* Инструменты стилизованные */} {/* Инструменты стилизованные */}
<div className="absolute top-12 left-12 w-6 h-6 border-2 border-blue-400 transform rotate-45 opacity-30"></div> <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-8 h-2 bg-indigo-400 rounded opacity-35"></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-2 h-8 bg-cyan-400 rounded opacity-40"></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-4 h-4 border border-blue-500 rounded-full opacity-25"></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-3 h-3 bg-indigo-500 rounded-sm opacity-30"></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 top-0 left-1/4 w-px h-1/2 bg-gradient-to-b from-blue-300 to-transparent opacity-30"></div>
@ -114,21 +114,21 @@ const WorkExamplesSection = () => {
<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 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>
<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"> <FadeInSection as="div" className="text-center mb-12 sm:mb-16">
<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 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> </h2>
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div> <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
</FadeInSection> </FadeInSection>
<FadeInSection as="p" className="text-lg text-gray-600 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> </FadeInSection>
{/* Карточки примеров работ */} {/* Карточки примеров работ */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20"> <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) => ( {workExamples.map((example, index) => (
<FadeInSection <FadeInSection
key={example.id} key={example.id}
@ -141,29 +141,30 @@ const WorkExamplesSection = () => {
<div className="relative z-10"> <div className="relative z-10">
{/* Изображение */} {/* Изображение */}
<div className="relative h-48 w-full overflow-hidden rounded-t-2xl"> <div className="relative h-40 sm:h-48 w-full overflow-hidden rounded-t-2xl">
<Image <Image
src={example.image} src={example.image}
alt={example.title} alt={example.title}
fill fill
className="object-cover group-hover:scale-110 transition-transform duration-500" className="object-cover group-hover:scale-110 transition-transform duration-500"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
unoptimized={true}
/> />
{/* Градиент поверх изображения */} {/* Градиент поверх изображения */}
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/60 via-transparent to-transparent"></div> <div className="absolute inset-0 bg-gradient-to-t from-gray-900/60 via-transparent to-transparent"></div>
{/* Бейдж с материалом */} {/* Бейдж с материалом */}
<div className="absolute top-4 left-4 px-3 py-1 bg-blue-500/80 backdrop-blur-sm rounded-full text-white text-sm font-medium"> <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} {example.material}
</div> </div>
</div> </div>
{/* Контент */} {/* Контент */}
<div className="p-6"> <div className="p-4 sm:p-6">
<h3 className="text-xl font-bold text-gray-800 mb-2 group-hover:text-blue-600 transition-all duration-300"> <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} {example.title}
</h3> </h3>
<p className="text-gray-600 text-sm mb-4 leading-relaxed"> <p className="text-gray-600 text-sm mb-3 sm:mb-4 leading-relaxed">
{example.description} {example.description}
</p> </p>
@ -171,10 +172,10 @@ const WorkExamplesSection = () => {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<div className="w-2 h-2 bg-green-400 rounded-full"></div> <div className="w-2 h-2 bg-green-400 rounded-full"></div>
<span className="text-gray-500 text-sm">Площадь:</span> <span className="text-gray-500 text-xs sm:text-sm">Площадь:</span>
<span className="text-gray-800 text-sm font-medium">{example.area}</span> <span className="text-gray-800 text-xs sm:text-sm font-medium">{example.area}</span>
</div> </div>
<div className="px-3 py-1 bg-green-100 rounded-full text-green-600 text-xs font-medium"> <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>
@ -189,15 +190,15 @@ const WorkExamplesSection = () => {
{/* Дополнительные услуги */} {/* Дополнительные услуги */}
<div id="additional-services"> <div id="additional-services">
<FadeInSection as="div" className="mb-16" delay={0.8}> <FadeInSection as="div" className="mb-16" delay={0.8}>
<div className="text-center mb-12"> <div className="text-center mb-8 sm: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 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> </h3>
<div className="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div> <div className="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
{additionalServices.map((service, index) => ( {additionalServices.map((service, index) => (
<FadeInSection <FadeInSection
key={service.id} key={service.id}
@ -210,37 +211,38 @@ const WorkExamplesSection = () => {
<div className="relative z-10"> <div className="relative z-10">
{/* Изображение */} {/* Изображение */}
<div className="relative h-40 w-full overflow-hidden rounded-t-2xl"> <div className="relative h-32 sm:h-40 w-full overflow-hidden rounded-t-2xl">
<Image <Image
src={service.image} src={service.image}
alt={service.title} alt={service.title}
fill fill
className="object-cover group-hover:scale-110 transition-transform duration-500" className="object-cover group-hover:scale-110 transition-transform duration-500"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw" 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 inset-0 bg-gradient-to-t from-gray-900/60 via-transparent to-transparent"></div>
{/* Иконка поверх изображения */} {/* Иконка поверх изображения */}
<div className="absolute top-4 left-4 w-12 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"> <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-6 h-6 text-white" /> <service.icon className="w-5 sm:w-6 h-5 sm:h-6 text-white" />
</div> </div>
</div> </div>
{/* Контент */} {/* Контент */}
<div className="p-6 text-center"> <div className="p-4 sm:p-6 text-center">
<h4 className="text-xl font-bold text-gray-800 mb-4 group-hover:text-blue-600 transition-colors duration-300"> <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} {service.title}
</h4> </h4>
<p className="text-gray-600 text-base mb-6 leading-relaxed"> <p className="text-gray-600 text-sm sm:text-base mb-4 sm:mb-6 leading-relaxed">
{service.description} {service.description}
</p> </p>
<ul className="space-y-3"> <ul className="space-y-2 sm:space-y-3">
{service.features.map((feature, featureIndex) => ( {service.features.map((feature, featureIndex) => (
<li key={featureIndex} className="flex items-center text-sm text-gray-500"> <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-3"></div> <div className="w-2 h-2 bg-green-400 rounded-full mr-2 sm:mr-3"></div>
{feature} {feature}
</li> </li>
))} ))}
@ -253,7 +255,7 @@ const WorkExamplesSection = () => {
</FadeInSection> </FadeInSection>
))} ))}
</div> </div>
</FadeInSection> </FadeInSection>
</div> </div>
{/* Призыв к действию */} {/* Призыв к действию */}

30
src/components/WhyChooseUsSection.tsx
View File

@ -28,51 +28,51 @@ const features = [
const WhyChooseUsSection = () => { const WhyChooseUsSection = () => {
return ( return (
<section className="relative py-20 bg-gradient-to-bl from-blue-50 via-white to-slate-50 overflow-hidden"> <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 inset-0 opacity-35">
{/* Точки */} {/* Точки */}
<div className="absolute top-20 left-20 w-3 h-3 bg-blue-500 rounded-full opacity-40"></div> <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-2 h-2 bg-indigo-500 rounded-full opacity-50"></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-4 h-4 bg-cyan-500 rounded-full opacity-30"></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-2 h-2 bg-blue-400 rounded-full opacity-45"></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 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 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-32 h-32 border-t-2 border-r-2 border-blue-300 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-24 h-24 border-b-2 border-l-2 border-indigo-300 opacity-25"></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>
<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"> <FadeInSection as="div" className="text-center mb-12 sm:mb-16">
<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 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> </h2>
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div> <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
</FadeInSection> </FadeInSection>
{/* Карточки преимуществ */} {/* Карточки преимуществ */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
{features.map((feature, index) => ( {features.map((feature, index) => (
<FadeInSection <FadeInSection
key={index} key={index}
as="div" 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" 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} delay={0.2 * index}
> >
{/* Фон */} {/* Фон */}
<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="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 z-10">
<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" /> <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-xl font-bold text-gray-800 mb-3 group-hover:text-blue-600 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} {feature.title}
</h3> </h3>
<p className="text-gray-600 leading-relaxed"> <p className="text-gray-600 leading-relaxed text-sm sm:text-base">
{feature.description} {feature.description}
</p> </p>
</div> </div>