Добавлены настройки для оптимизации изображений в конфигурации Next.js, обновлены стили и тексты в секциях главной страницы, включая изменения в отступах, размерах шрифтов и фонов для улучшения визуального восприятия. Обновлены изображения в секциях проектов и отзывов для повышения информативности.
This commit is contained in:
albivkt
@ -83,7 +83,7 @@ export default function Home() {
|
||||
|
||||
{/* Hero 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={{
|
||||
backgroundImage: "url('/images/stanica.png')"
|
||||
}}
|
||||
@ -92,50 +92,50 @@ export default function Home() {
|
||||
<div className="absolute inset-0 bg-black/30 z-0"></div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="flex flex-col lg:flex-row items-center justify-between gap-12">
|
||||
<div className="container mx-auto px-4 sm:px-6 relative z-10">
|
||||
<div className="flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12">
|
||||
{/* Left Content */}
|
||||
<FadeInSection as="div" className="flex-1 text-white" delay={0.2}>
|
||||
<FadeInSection as="div" className="flex-1 text-white text-center lg:text-left" delay={0.2}>
|
||||
|
||||
<h1 className="text-4xl lg:text-6xl xl:text-7xl font-bold text-white mb-6 leading-tight">
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-white mb-4 sm:mb-6 leading-tight">
|
||||
СТРОИТЕЛЬСТВО КАМЕННЫХ<br />
|
||||
И КАРКАСНЫХ ДОМОВ<br />
|
||||
С ФИКСАЦИЕЙ ЦЕНЫ
|
||||
</h1>
|
||||
|
||||
<p className="text-xl lg:text-2xl text-white/90 mb-12">
|
||||
<p className="text-lg sm:text-xl lg:text-2xl text-white/90 mb-8 sm:mb-12">
|
||||
Построим технологичный дом за 90 дней
|
||||
</p>
|
||||
|
||||
{/* Stats Section */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 mb-8">
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
|
||||
<div className="text-3xl lg:text-4xl font-bold text-white mb-2">+100</div>
|
||||
<div className="text-white/80 text-sm font-medium">Реализованных объектов</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 mb-6 sm:mb-8">
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 sm:p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
|
||||
<div className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-2">+100</div>
|
||||
<div className="text-white/80 text-xs sm:text-sm font-medium">Реализованных объектов</div>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
|
||||
<div className="text-3xl lg:text-4xl font-bold text-white mb-2">5</div>
|
||||
<div className="text-white/80 text-sm font-medium">Лет гарантии</div>
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 sm:p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
|
||||
<div className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-2">5</div>
|
||||
<div className="text-white/80 text-xs sm:text-sm font-medium">Лет гарантии</div>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
|
||||
<div className="text-3xl lg:text-4xl font-bold text-white mb-2">90%</div>
|
||||
<div className="text-white/80 text-sm font-medium">Клиентов рекомендуют нас</div>
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 sm:p-6 text-center border border-white/20 hover:bg-white/15 transition-all duration-300 shadow-lg">
|
||||
<div className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-2">90%</div>
|
||||
<div className="text-white/80 text-xs sm:text-sm font-medium">Клиентов рекомендуют нас</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeInSection>
|
||||
|
||||
{/* Right Form */}
|
||||
<FadeInSection as="div" className="w-full lg:w-96" delay={0.4}>
|
||||
<div className="group relative p-8 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 shadow-2xl">
|
||||
<FadeInSection as="div" className="w-full max-w-md lg:w-96" delay={0.4}>
|
||||
<div className="group relative p-4 sm:p-6 lg:p-8 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 shadow-2xl">
|
||||
{/* Фон */}
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-2xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-6 text-center">
|
||||
<h3 className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4 sm:mb-6 text-center">
|
||||
Получите расчет стоимости
|
||||
</h3>
|
||||
|
||||
<form onSubmit={handleFormSubmit} className="space-y-6">
|
||||
<form onSubmit={handleFormSubmit} className="space-y-4 sm:space-y-6">
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="Ваш телефон"
|
||||
@ -144,34 +144,34 @@ export default function Home() {
|
||||
const val = e.target.value.replace(/\D/g, '').slice(0, 11);
|
||||
setPhone(val);
|
||||
}}
|
||||
className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300"
|
||||
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300 text-sm sm:text-base"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ваше имя"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300"
|
||||
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300 text-sm sm:text-base"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
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" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-500/20 border border-red-500/30 text-red-300 text-center py-3 px-4 rounded-xl text-sm backdrop-blur-sm">
|
||||
<div className="bg-red-500/20 border border-red-500/30 text-red-300 text-center py-2 sm:py-3 px-3 sm:px-4 rounded-xl text-xs sm:text-sm backdrop-blur-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
|
||||
<p className="text-xs text-gray-400 mt-4 text-center">
|
||||
<p className="text-xs text-gray-400 mt-3 sm:mt-4 text-center">
|
||||
Нажимая кнопку "Обсудить проект", вы соглашаетесь с{' '}
|
||||
<a href="#" className="underline hover:text-blue-400 transition-colors duration-300">
|
||||
Политикой конфиденциальности
|
||||
|
||||
@ -34,59 +34,61 @@ const AboutSection = () => {
|
||||
];
|
||||
|
||||
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 top-10 left-10 w-32 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 bottom-20 left-1/4 w-20 h-20 bg-cyan-500 transform -rotate-45 opacity-25"></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-12 sm:w-18 lg:w-24 h-12 sm:h-18 lg:h-24 bg-indigo-600 transform rotate-12 opacity-30"></div>
|
||||
<div className="absolute bottom-20 left-1/4 w-10 sm:w-16 lg:w-20 h-10 sm:h-16 lg:h-20 bg-cyan-500 transform -rotate-45 opacity-25"></div>
|
||||
|
||||
{/* Круги с четкими краями */}
|
||||
<div className="absolute top-1/4 right-1/3 w-16 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 top-2/3 left-1/6 w-8 h-8 bg-cyan-400 rounded-full opacity-35"></div>
|
||||
<div className="absolute top-1/4 right-1/3 w-8 sm:w-12 lg:w-16 h-8 sm:h-12 lg:h-16 bg-blue-400 rounded-full opacity-30"></div>
|
||||
<div className="absolute bottom-1/3 right-10 w-6 sm:w-8 lg:w-12 h-6 sm:h-8 lg:h-12 bg-indigo-500 rounded-full opacity-40"></div>
|
||||
<div className="absolute top-2/3 left-1/6 w-4 sm:w-6 lg:w-8 h-4 sm:h-6 lg:h-8 bg-cyan-400 rounded-full opacity-35"></div>
|
||||
|
||||
{/* Линии */}
|
||||
<div className="absolute top-0 left-1/3 w-1 h-full bg-gradient-to-b from-transparent via-blue-300 to-transparent opacity-20"></div>
|
||||
<div className="absolute top-0 right-1/4 w-1 h-full bg-gradient-to-b from-transparent via-indigo-300 to-transparent opacity-15"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="container mx-auto px-4 sm:px-6 relative z-10">
|
||||
{/* Заголовок секции */}
|
||||
<FadeInSection as="div" className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
<FadeInSection as="div" className="text-center mb-12 sm:mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
О компании Ваш Дом
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
|
||||
</FadeInSection>
|
||||
|
||||
{/* Основной контент */}
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center mb-20">
|
||||
<div className="grid lg:grid-cols-2 gap-8 sm:gap-12 lg:gap-16 items-center mb-12 sm:mb-16 lg:mb-20">
|
||||
{/* Изображение */}
|
||||
<FadeInSection as="div" className="relative group">
|
||||
<div className="relative h-[500px] w-full rounded-2xl overflow-hidden">
|
||||
<div className="relative h-[300px] sm:h-[400px] lg:h-[500px] w-full rounded-2xl overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent z-10"></div>
|
||||
<Image
|
||||
src="/images/o_nac.jpg"
|
||||
alt="О нашей компании"
|
||||
src="/images/stryokab.webp?v=3&t=1234567890"
|
||||
alt="Строительная бригада за работой"
|
||||
fill
|
||||
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 -bottom-4 -right-4 w-32 h-32 bg-gradient-to-br from-purple-500/30 to-blue-500/30 rounded-full blur-xl"></div>
|
||||
<div className="absolute -top-4 -left-4 w-16 sm:w-20 lg:w-24 h-16 sm:h-20 lg:h-24 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full blur-xl"></div>
|
||||
<div className="absolute -bottom-4 -right-4 w-20 sm:w-24 lg:w-32 h-20 sm:h-24 lg:h-32 bg-gradient-to-br from-purple-500/30 to-blue-500/30 rounded-full blur-xl"></div>
|
||||
</div>
|
||||
</FadeInSection>
|
||||
|
||||
{/* Текстовый контент */}
|
||||
<FadeInSection as="div" delay={0.2}>
|
||||
<div className="h-[500px] flex flex-col justify-center space-y-6">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-2xl font-bold text-gray-800">
|
||||
<div className="lg:h-[500px] flex flex-col justify-center space-y-4 sm:space-y-6">
|
||||
<div className="space-y-3 sm:space-y-4">
|
||||
<h3 className="text-xl sm:text-2xl font-bold text-gray-800">
|
||||
Строим дома вашей мечты
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed text-xl">
|
||||
<p className="text-gray-600 leading-relaxed text-base sm:text-lg lg:text-xl">
|
||||
Мы - команда профессионалов с более чем 10-летним опытом в строительстве
|
||||
современных домов. Наша миссия - создавать качественное и комфортное
|
||||
жилье для наших клиентов, используя передовые технологии и материалы.
|
||||
@ -115,23 +117,23 @@ const AboutSection = () => {
|
||||
|
||||
{/* Статистика */}
|
||||
<FadeInSection as="div" delay={0.4}>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
||||
{stats.map((stat, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative p-6 rounded-2xl bg-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="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}
|
||||
</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}
|
||||
</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}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -92,6 +92,7 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
|
||||
width={320}
|
||||
height={120}
|
||||
className="object-contain rounded-lg shadow-md group-hover:scale-105 transition-transform duration-300"
|
||||
unoptimized={true}
|
||||
/>
|
||||
{/* Декоративные элементы вокруг изображения */}
|
||||
<div className="absolute -top-2 -left-2 w-16 h-16 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full blur-xl"></div>
|
||||
|
||||
@ -52,101 +52,105 @@ const ContactSection = () => {
|
||||
};
|
||||
|
||||
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 top-16 left-1/4 w-12 h-12 border-2 border-dashed border-blue-400 rounded-full opacity-25"></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-16 left-16 w-16 sm:w-20 lg:w-24 h-16 sm:h-20 lg:h-24 bg-blue-500 rounded-full opacity-20"></div>
|
||||
<div className="absolute top-32 right-24 w-12 sm:w-16 lg:w-20 h-12 sm:h-16 lg:h-20 bg-indigo-600 transform rotate-45 opacity-25"></div>
|
||||
<div className="absolute bottom-24 left-1/4 w-10 sm:w-14 lg:w-18 h-10 sm:h-14 lg:h-18 bg-cyan-500 rounded-full opacity-30"></div>
|
||||
|
||||
{/* Сигналы */}
|
||||
<div className="absolute top-1/3 left-16 w-6 h-1 bg-blue-400 opacity-35"></div>
|
||||
<div className="absolute top-1/3 left-24 w-4 h-1 bg-blue-300 opacity-30"></div>
|
||||
<div className="absolute top-1/3 left-30 w-2 h-1 bg-blue-200 opacity-25"></div>
|
||||
{/* Соединительные линии */}
|
||||
<div className="absolute top-1/3 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-300 to-transparent opacity-25"></div>
|
||||
<div className="absolute bottom-1/3 left-0 w-full h-px bg-gradient-to-r from-transparent via-indigo-300 to-transparent opacity-20"></div>
|
||||
|
||||
<div className="absolute 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 bottom-1/3 right-30 w-2 h-1 bg-indigo-200 opacity-25"></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 className="absolute top-0 left-1/3 w-px h-full bg-gradient-to-b from-transparent via-blue-300 to-transparent opacity-20"></div>
|
||||
<div className="absolute top-0 right-1/4 w-px h-full bg-gradient-to-b from-transparent via-indigo-300 to-transparent opacity-15"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="container mx-auto px-4 sm:px-6 relative z-10">
|
||||
{/* Заголовок секции */}
|
||||
<FadeInSection as="div" className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
<FadeInSection as="div" className="text-center mb-12 sm:mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
Наши контакты
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
|
||||
</FadeInSection>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-12">
|
||||
<div className="grid lg:grid-cols-2 gap-8 sm:gap-12">
|
||||
{/* Контактная информация */}
|
||||
<FadeInSection
|
||||
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}
|
||||
>
|
||||
{/* Фон */}
|
||||
<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-blue-200 mr-4 group-hover/item:scale-110 transition-transform duration-300">
|
||||
<Phone className="w-6 h-6 text-blue-600" />
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-xl sm:text-2xl font-bold text-gray-800 mb-4 sm:mb-6 group-hover:text-blue-600 transition-all duration-300">
|
||||
Свяжитесь с нами
|
||||
</h3>
|
||||
|
||||
<div className="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>
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-2 group-hover/item:text-blue-600 transition-colors duration-300">
|
||||
Телефон
|
||||
</h3>
|
||||
<a
|
||||
href="tel:+79530132423"
|
||||
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"
|
||||
>
|
||||
7 953 013 24 23
|
||||
</a>
|
||||
|
||||
<div className="flex items-start space-x-3 sm:space-x-4">
|
||||
<div className="flex-shrink-0 w-10 sm:w-12 h-10 sm:h-12 bg-green-500/20 rounded-full flex items-center justify-center group-hover:bg-green-500/30 transition-colors duration-300">
|
||||
<svg className="w-5 sm:w-6 h-5 sm:h-6 text-green-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.787"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-600 text-sm sm:text-base mb-1">WhatsApp</p>
|
||||
<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 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">
|
||||
<Mail className="w-6 h-6 text-blue-600" />
|
||||
|
||||
<div className="flex items-start space-x-3 sm:space-x-4">
|
||||
<div className="flex-shrink-0 w-10 sm:w-12 h-10 sm:h-12 bg-red-500/20 rounded-full flex items-center justify-center group-hover:bg-red-500/30 transition-colors duration-300">
|
||||
<svg className="w-5 sm:w-6 h-5 sm:h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-600 text-sm sm:text-base mb-1">Адрес</p>
|
||||
<p className="text-lg sm:text-xl font-semibold text-gray-800">
|
||||
г. Чебоксары,<br />ул. Калинина, 107
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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-600 text-lg">
|
||||
Будет
|
||||
</span>
|
||||
|
||||
<div className="flex items-start space-x-3 sm:space-x-4">
|
||||
<div className="flex-shrink-0 w-10 sm:w-12 h-10 sm:h-12 bg-purple-500/20 rounded-full flex items-center justify-center group-hover:bg-purple-500/30 transition-colors duration-300">
|
||||
<svg className="w-5 sm:w-6 h-5 sm:h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-600 text-sm sm:text-base mb-1">Время работы</p>
|
||||
<p className="text-lg sm:text-xl font-semibold text-gray-800">
|
||||
Пн - Вс с 8:00 до 20:00
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
{/* Декоративный элемент */}
|
||||
@ -156,84 +160,88 @@ const ContactSection = () => {
|
||||
{/* Форма обратной связи */}
|
||||
<FadeInSection
|
||||
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}
|
||||
>
|
||||
{/* Фон */}
|
||||
<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-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>
|
||||
|
||||
<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}
|
||||
{success ? (
|
||||
<div className="text-center py-8 sm:py-12">
|
||||
<div className="w-12 sm:w-16 h-12 sm:h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-6 sm:w-8 h-6 sm:h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-100 border border-red-300 text-red-700 text-center py-3 px-4 rounded-xl text-sm">
|
||||
{error}
|
||||
<p className="text-lg sm:text-xl font-semibold text-green-600 mb-2">Спасибо за обращение!</p>
|
||||
<p className="text-gray-600 text-sm sm:text-base">Мы свяжемся с вами в ближайшее время</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Ваше имя
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
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>
|
||||
)}
|
||||
</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>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Телефон
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
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>
|
||||
|
||||
{/* Декоративный элемент */}
|
||||
|
||||
@ -13,46 +13,43 @@ const Header = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<FadeInOnMount as="header" className={`fixed w-full z-50 bg-gray-900/95 backdrop-blur-sm py-4 shadow-lg`}>
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<FadeInOnMount as="header" className={`fixed w-full z-50 bg-gray-900/95 backdrop-blur-sm py-3 sm:py-4 shadow-lg`}>
|
||||
<div className="container mx-auto px-4 sm:px-6">
|
||||
<div className="flex items-center justify-between gap-2 sm:gap-4">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center space-x-3 flex-shrink-0 py-1">
|
||||
<div className="bg-blue-600 p-2 rounded">
|
||||
<svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<Link href="/" className="flex items-center space-x-2 sm:space-x-3 flex-shrink-0 py-1">
|
||||
<div className="bg-blue-600 p-1.5 sm:p-2 rounded">
|
||||
<svg className="w-6 sm:w-8 h-6 sm:h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M2 12L12 2L22 12V22H16V16H8V22H2V12Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-white">
|
||||
<div className="text-xl font-bold">Ваш Дом</div>
|
||||
<div className="text-lg sm:text-xl font-bold">Ваш Дом</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="hidden lg:flex items-center space-x-8">
|
||||
<Link href="#services" className="text-white hover:text-blue-400 transition-colors text-lg font-medium py-2 px-3 rounded-lg hover:bg-white/10">
|
||||
Услуги
|
||||
</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">
|
||||
<nav className="hidden lg:flex items-center space-x-8 flex-1 justify-center">
|
||||
<Link href="#about" className="text-white hover:text-blue-400 transition-colors font-medium">
|
||||
О нас
|
||||
</Link>
|
||||
<Link href="#projects" className="text-white hover:text-blue-400 transition-colors text-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 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 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>
|
||||
</nav>
|
||||
|
||||
{/* Right side */}
|
||||
<div className="hidden md:flex items-center space-x-6 flex-shrink-0">
|
||||
|
||||
{/* Contact Info & CTA */}
|
||||
<div className="hidden md:flex items-center space-x-4 lg:space-x-6 flex-shrink-0">
|
||||
<div className="text-right">
|
||||
<a
|
||||
href="tel:+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
|
||||
</a>
|
||||
@ -60,7 +57,7 @@ const Header = () => {
|
||||
</div>
|
||||
<button
|
||||
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>
|
||||
@ -71,7 +68,7 @@ const Header = () => {
|
||||
|
||||
{/* Контент кнопки */}
|
||||
<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">
|
||||
Оставить заявку
|
||||
{/* Подчеркивание */}
|
||||
@ -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"
|
||||
aria-label="Открыть меню"
|
||||
>
|
||||
<Menu className="w-6 h-6" />
|
||||
<Menu className="w-5 h-5 sm:w-6 sm:h-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -115,47 +115,43 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4">
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-2 sm:p-4">
|
||||
{/* Декоративный фон */}
|
||||
<div className="absolute inset-0 opacity-20">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute top-1/4 left-1/4 w-64 sm:w-80 lg:w-96 h-64 sm:h-80 lg:h-96 bg-blue-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-1/4 right-1/4 w-56 sm:w-64 lg:w-80 h-56 sm:h-64 lg:h-80 bg-purple-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute top-1/2 left-1/2 w-48 sm:w-56 lg:w-64 h-48 sm:h-56 lg:h-64 bg-cyan-500 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative bg-gradient-to-br from-gray-900/95 via-gray-800/95 to-gray-900/95 backdrop-blur-md border border-white/20 rounded-2xl shadow-2xl w-full max-w-2xl mx-auto animate-fadeIn max-h-[90vh] overflow-y-auto">
|
||||
<div className="relative bg-gradient-to-br from-gray-900/95 via-gray-800/95 to-gray-900/95 backdrop-blur-md border border-white/20 rounded-2xl shadow-2xl w-full max-w-xs sm:max-w-md lg:max-w-2xl mx-auto animate-fadeIn max-h-[90vh] overflow-y-auto">
|
||||
<button
|
||||
onClick={closeModal}
|
||||
className="absolute top-4 right-4 text-gray-400 hover:text-white p-2 hover:bg-white/10 rounded-full transition-colors z-10"
|
||||
className="absolute top-3 sm:top-4 right-3 sm:right-4 text-gray-400 hover:text-white p-1.5 sm:p-2 hover:bg-white/10 rounded-full transition-colors z-10"
|
||||
aria-label="Закрыть калькулятор"
|
||||
>
|
||||
<X className="w-5 h-5 sm:w-6 sm:h-6" />
|
||||
<X className="w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6" />
|
||||
</button>
|
||||
|
||||
<div className="p-4 sm:p-6 md:p-8">
|
||||
<div className="flex items-center justify-between mb-4 sm:mb-6">
|
||||
<span className="text-gray-300 text-xs sm:text-sm">
|
||||
{step < 5 ? 'Для расчета стоимости выберите один из вариантов' : 'Спасибо за заявку!'}
|
||||
</span>
|
||||
<span className="text-gray-300 text-xs sm:text-sm">{step}/5</span>
|
||||
</div>
|
||||
|
||||
<div className="w-full h-2 bg-white/10 rounded-full mb-6 sm:mb-8">
|
||||
<div className="h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500" style={{ width: `${(step-1)*25}%` }} />
|
||||
|
||||
<div className="p-4 sm:p-6 lg:p-8">
|
||||
<div className="text-center mb-6 sm:mb-8">
|
||||
<h1 className="text-xl sm:text-2xl lg:text-3xl font-bold mb-2 sm:mb-4 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
|
||||
Калькулятор стоимости дома
|
||||
</h1>
|
||||
<div className="w-16 sm:w-20 lg:w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
|
||||
</div>
|
||||
|
||||
{step === 1 && (
|
||||
<div>
|
||||
<h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
|
||||
Из какого материала хотите построить дом?
|
||||
<h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
|
||||
Выберите материал
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
|
||||
{materials.map((m) => (
|
||||
<button
|
||||
key={m.value}
|
||||
type="button"
|
||||
onClick={() => setMaterial(m.value)}
|
||||
className={`group relative p-4 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 hover:scale-[1.02] ${
|
||||
className={`group relative p-3 sm:p-4 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 hover:scale-[1.02] ${
|
||||
material === m.value
|
||||
? 'border-blue-500 shadow-lg shadow-blue-500/25'
|
||||
: 'border-white/20 hover:border-white/40'
|
||||
@ -166,22 +162,16 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
|
||||
material === m.value ? 'opacity-100' : 'opacity-0'
|
||||
}`}></div>
|
||||
|
||||
<div className="relative z-10 flex flex-col items-center">
|
||||
<div className="relative w-20 h-20 sm:w-24 sm:h-24 mb-3 sm:mb-4 rounded-xl overflow-hidden">
|
||||
<Image
|
||||
src={m.img}
|
||||
alt={m.label}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 640px) 80px, (max-width: 1024px) 96px, 96px"
|
||||
/>
|
||||
<div className="relative z-10 text-center">
|
||||
<div className="text-2xl sm:text-3xl lg:text-4xl mb-2 sm:mb-3 group-hover:scale-110 transition-transform duration-300">
|
||||
{m.icon}
|
||||
</div>
|
||||
<span className="text-sm sm:text-base font-medium text-white text-center group-hover:text-blue-300 transition-colors duration-300">
|
||||
{m.label}
|
||||
</span>
|
||||
{material === m.value && (
|
||||
<CheckCircle className="w-5 h-5 sm:w-6 sm:h-6 text-blue-400 absolute top-2 right-2" />
|
||||
)}
|
||||
<h3 className="text-sm sm:text-base lg:text-lg font-bold text-white mb-1 sm:mb-2 group-hover:text-blue-300 transition-colors duration-300">
|
||||
{m.name}
|
||||
</h3>
|
||||
<p className="text-xs sm:text-sm text-gray-300 group-hover:text-white transition-colors duration-300">
|
||||
{m.description}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
@ -191,12 +181,12 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
|
||||
|
||||
{step === 2 && (
|
||||
<div>
|
||||
<h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
|
||||
<h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
|
||||
Какая площадь дома?
|
||||
</h2>
|
||||
<div className="flex flex-col gap-3 sm:gap-4">
|
||||
<div className="flex flex-col gap-2 sm:gap-3 lg:gap-4">
|
||||
{areas.map((a) => (
|
||||
<label key={a} className="group relative cursor-pointer p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
|
||||
<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="relative z-10 flex items-center">
|
||||
<input
|
||||
@ -205,9 +195,9 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
|
||||
value={a}
|
||||
checked={area === a}
|
||||
onChange={() => setArea(a)}
|
||||
className="w-4 h-4 sm:w-5 sm:h-5 mr-3 accent-blue-500"
|
||||
className="w-3 h-3 sm:w-4 sm:h-4 lg:w-5 lg:h-5 mr-2 sm:mr-3 accent-blue-500"
|
||||
/>
|
||||
<span className="text-base sm:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{a}</span>
|
||||
<span className="text-sm sm:text-base lg:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{a}</span>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
@ -217,23 +207,31 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
|
||||
|
||||
{step === 3 && (
|
||||
<div>
|
||||
<h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
|
||||
Вариант отделки
|
||||
<h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
|
||||
Дополнительные опции
|
||||
</h2>
|
||||
<div className="flex flex-col gap-3 sm:gap-4">
|
||||
{finishes.map((f) => (
|
||||
<label key={f} className="group relative cursor-pointer p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
|
||||
<div className="space-y-2 sm:space-y-3 lg:space-y-4">
|
||||
{options.map((option) => (
|
||||
<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="relative z-10 flex items-center">
|
||||
<div className="relative z-10 flex items-center flex-1">
|
||||
<input
|
||||
type="radio"
|
||||
name="finish"
|
||||
value={f}
|
||||
checked={finish === f}
|
||||
onChange={() => setFinish(f)}
|
||||
className="w-4 h-4 sm:w-5 sm:h-5 mr-3 accent-blue-500"
|
||||
type="checkbox"
|
||||
checked={selectedOptions.includes(option.value)}
|
||||
onChange={() => handleOptionChange(option.value)}
|
||||
className="w-3 h-3 sm:w-4 sm:h-4 lg:w-5 lg:h-5 mr-2 sm:mr-3 accent-blue-500"
|
||||
/>
|
||||
<span className="text-base sm:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{f}</span>
|
||||
<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>
|
||||
</label>
|
||||
))}
|
||||
@ -242,86 +240,76 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
|
||||
)}
|
||||
|
||||
{step === 4 && (
|
||||
<div>
|
||||
<h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
|
||||
Источник финансирования
|
||||
</h2>
|
||||
<div className="flex flex-col gap-3 sm:gap-4">
|
||||
{finances.map((f) => (
|
||||
<label key={f} className="group relative cursor-pointer p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
<div className="relative z-10 flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
name="finance"
|
||||
value={f}
|
||||
checked={finance === f}
|
||||
onChange={() => setFinance(f)}
|
||||
className="w-4 h-4 sm:w-5 sm:h-5 mr-3 accent-blue-500"
|
||||
/>
|
||||
<span className="text-base sm:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{f}</span>
|
||||
<div className="text-center">
|
||||
<div className="mb-6 sm:mb-8">
|
||||
<div className="text-3xl sm:text-4xl lg:text-5xl mb-2 sm:mb-4">🏠</div>
|
||||
<h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-2 sm:mb-4 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
|
||||
Расчет готов!
|
||||
</h2>
|
||||
<div className="text-2xl sm:text-3xl lg:text-4xl font-bold text-blue-400 mb-2 sm:mb-4">
|
||||
{totalPrice.toLocaleString()} ₽
|
||||
</div>
|
||||
<p className="text-sm sm:text-base text-gray-300">
|
||||
Итоговая стоимость строительства
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/10 backdrop-blur-md rounded-xl p-4 sm:p-6 mb-6 sm:mb-8 border border-white/20">
|
||||
<h3 className="text-base sm:text-lg font-bold text-white mb-3 sm:mb-4">Детали расчета:</h3>
|
||||
<div className="space-y-2 text-sm sm:text-base text-gray-300">
|
||||
<div className="flex justify-between">
|
||||
<span>Материал:</span>
|
||||
<span className="text-white">{materials.find(m => m.value === material)?.name}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Площадь:</span>
|
||||
<span className="text-white">{area}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Базовая стоимость:</span>
|
||||
<span className="text-white">{basePrice.toLocaleString()} ₽</span>
|
||||
</div>
|
||||
{selectedOptions.length > 0 && (
|
||||
<div className="flex justify-between">
|
||||
<span>Дополнительно:</span>
|
||||
<span className="text-white">+{optionsPrice.toLocaleString()} ₽</span>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 5 && (
|
||||
<div className="flex flex-col items-center justify-center py-8 sm:py-12 animate-fadeIn">
|
||||
<div className="bg-green-500/20 border border-green-500/30 backdrop-blur-sm rounded-2xl p-4 sm:p-6 mb-6 sm:mb-8 flex items-center shadow-lg w-full max-w-xl mx-auto">
|
||||
<CheckCircle className="w-8 h-8 sm:w-10 sm:h-10 text-green-400 mr-3 sm:mr-4 flex-shrink-0" />
|
||||
<span className="text-green-300 text-base sm:text-lg md:text-xl font-semibold leading-snug text-left">
|
||||
Благодарим за обращение в нашу компанию!<br className='hidden md:block' /> В течение 15 минут мы свяжемся с вами!
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mt-6 sm:mt-8">
|
||||
{step > 1 && (
|
||||
<button
|
||||
onClick={handlePrevious}
|
||||
className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-gray-600 to-gray-700 text-white hover:from-gray-700 hover:to-gray-800 transition-all duration-300 hover:scale-105 text-sm sm:text-base"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||
<span>Назад</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{step < 4 ? (
|
||||
<button
|
||||
onClick={handleNext}
|
||||
disabled={!canProceed()}
|
||||
className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:from-blue-600 hover:to-purple-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 hover:scale-105 ml-auto text-sm sm:text-base"
|
||||
>
|
||||
<span>Далее</span>
|
||||
<ChevronRight className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={closeModal}
|
||||
className="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 sm:px-8 py-3 rounded-full hover:from-blue-600 hover:to-purple-600 transition-all duration-300 text-base sm:text-lg font-semibold shadow-lg hover:scale-105"
|
||||
className="flex items-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 rounded-xl bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transition-all duration-300 hover:scale-105 ml-auto text-sm sm:text-base"
|
||||
>
|
||||
Закрыть
|
||||
<span>Готово</span>
|
||||
<Check className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
{error && (
|
||||
<div className="mt-4 sm:mt-6 bg-red-500/20 border border-red-500/30 text-red-300 text-center py-2 sm:py-3 px-3 sm:px-4 rounded-xl flex items-center justify-center min-h-[40px] sm:min-h-[48px] text-sm sm:text-base backdrop-blur-sm">
|
||||
<AlertCircle className="w-4 h-4 sm:w-5 sm:h-5 mr-2 shrink-0" />
|
||||
<span className="block w-full break-words">{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{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>
|
||||
|
||||
@ -144,6 +144,7 @@ const ProjectImageSlider = ({ project }: { project: typeof projects[0] }) => {
|
||||
? 'object-contain p-4'
|
||||
: 'object-cover'
|
||||
}`}
|
||||
unoptimized={true}
|
||||
/>
|
||||
|
||||
{/* Навигация по изображениям */}
|
||||
|
||||
@ -75,6 +75,7 @@ const ReviewsSection = () => {
|
||||
alt={review.name}
|
||||
fill
|
||||
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>
|
||||
|
||||
@ -9,51 +9,51 @@ import { Droplets, Zap, Thermometer, Wrench } from 'lucide-react';
|
||||
const workExamples = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Деревянный каркасный дом',
|
||||
title: 'Дом из пеноблоков',
|
||||
description: 'Г.Чебоксары п. Альгешево, 100 м2',
|
||||
image: '/images/koroche.jpg',
|
||||
area: '100 кв.м',
|
||||
material: 'Каркасная технология',
|
||||
material: 'Пеноблоки',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Деревянный каркасный дом',
|
||||
title: 'Дом из пеноблоков',
|
||||
description: 'г. Мариинский Посад, 80 м2',
|
||||
image: '/images/koroche2.jpg',
|
||||
area: '80 кв.м',
|
||||
material: 'Каркасная технология',
|
||||
material: 'Пеноблоки',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Деревянный каркасный дом',
|
||||
title: 'Дом из пеноблоков',
|
||||
description: 'г. Цивильск, 80 м2',
|
||||
image: '/images/koroche3.jpg',
|
||||
area: '80 кв.м',
|
||||
material: 'Каркасная технология',
|
||||
material: 'Пеноблоки',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Деревянный каркасный дом',
|
||||
title: 'Дом из пеноблоков',
|
||||
description: 'с. Комсомольское, 78 м2',
|
||||
image: '/images/koroche4.jpg',
|
||||
area: '78 кв.м',
|
||||
material: 'Каркасная технология',
|
||||
material: 'Пеноблоки',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Деревянный каркасный дом',
|
||||
title: 'Дом из пеноблоков',
|
||||
description: 'Сосновка, 92 м2',
|
||||
image: '/images/koroche5.jpg',
|
||||
area: '92 кв.м',
|
||||
material: 'Каркасная технология',
|
||||
material: 'Пеноблоки',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Деревянный каркасный дом',
|
||||
title: 'Дом из пеноблоков',
|
||||
description: 'пос. Кугеси 110 м2',
|
||||
image: '/images/koroche6.webp',
|
||||
area: '110 кв.м',
|
||||
material: 'Каркасная технология',
|
||||
material: 'Пеноблоки',
|
||||
},
|
||||
];
|
||||
|
||||
@ -96,17 +96,17 @@ const WorkExamplesSection = () => {
|
||||
const [isCallbackModalOpen, setIsCallbackModalOpen] = useState(false);
|
||||
|
||||
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 top-12 left-12 w-6 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 bottom-20 left-1/5 w-2 h-8 bg-cyan-400 rounded opacity-40"></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-6 sm:w-8 h-1 sm:h-2 bg-indigo-400 rounded opacity-35"></div>
|
||||
<div className="absolute bottom-20 left-1/5 w-1 sm:w-2 h-6 sm:h-8 bg-cyan-400 rounded opacity-40"></div>
|
||||
|
||||
{/* Гайки и болты */}
|
||||
<div className="absolute top-1/3 left-1/3 w-4 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 top-1/3 left-1/3 w-3 sm:w-4 h-3 sm:h-4 border border-blue-500 rounded-full opacity-25"></div>
|
||||
<div className="absolute bottom-1/3 right-1/4 w-2 sm:w-3 h-2 sm:h-3 bg-indigo-500 rounded-sm opacity-30"></div>
|
||||
|
||||
{/* Технические линии */}
|
||||
<div className="absolute top-0 left-1/4 w-px h-1/2 bg-gradient-to-b from-blue-300 to-transparent opacity-30"></div>
|
||||
@ -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>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="container mx-auto px-4 sm:px-6 relative z-10">
|
||||
{/* Заголовок секции */}
|
||||
<FadeInSection as="div" className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
<FadeInSection as="div" className="text-center mb-12 sm:mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
Примеры наших работ
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
|
||||
</FadeInSection>
|
||||
|
||||
<FadeInSection as="p" className="text-lg text-gray-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>
|
||||
|
||||
{/* Карточки примеров работ */}
|
||||
<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) => (
|
||||
<FadeInSection
|
||||
key={example.id}
|
||||
@ -141,29 +141,30 @@ const WorkExamplesSection = () => {
|
||||
|
||||
<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
|
||||
src={example.image}
|
||||
alt={example.title}
|
||||
fill
|
||||
className="object-cover group-hover:scale-110 transition-transform duration-500"
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||
unoptimized={true}
|
||||
/>
|
||||
{/* Градиент поверх изображения */}
|
||||
<div className="absolute inset-0 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}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Контент */}
|
||||
<div className="p-6">
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-2 group-hover:text-blue-600 transition-all duration-300">
|
||||
<div className="p-4 sm:p-6">
|
||||
<h3 className="text-lg sm:text-xl font-bold text-gray-800 mb-2 group-hover:text-blue-600 transition-all duration-300">
|
||||
{example.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm mb-4 leading-relaxed">
|
||||
<p className="text-gray-600 text-sm mb-3 sm:mb-4 leading-relaxed">
|
||||
{example.description}
|
||||
</p>
|
||||
|
||||
@ -171,10 +172,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-500 text-sm">Площадь:</span>
|
||||
<span className="text-gray-800 text-sm font-medium">{example.area}</span>
|
||||
<span className="text-gray-500 text-xs sm:text-sm">Площадь:</span>
|
||||
<span className="text-gray-800 text-xs sm:text-sm font-medium">{example.area}</span>
|
||||
</div>
|
||||
<div className="px-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>
|
||||
@ -189,15 +190,15 @@ const WorkExamplesSection = () => {
|
||||
|
||||
{/* Дополнительные услуги */}
|
||||
<div id="additional-services">
|
||||
<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">
|
||||
<FadeInSection as="div" className="mb-16" delay={0.8}>
|
||||
<div className="text-center mb-8 sm:mb-12">
|
||||
<h3 className="text-2xl sm:text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
Дополнительные услуги
|
||||
</h3>
|
||||
<div className="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 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) => (
|
||||
<FadeInSection
|
||||
key={service.id}
|
||||
@ -210,37 +211,38 @@ const WorkExamplesSection = () => {
|
||||
|
||||
<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
|
||||
src={service.image}
|
||||
alt={service.title}
|
||||
fill
|
||||
className="object-cover group-hover:scale-110 transition-transform duration-500"
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
|
||||
unoptimized={true}
|
||||
/>
|
||||
{/* Градиент поверх изображения */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/60 via-transparent to-transparent"></div>
|
||||
|
||||
{/* Иконка поверх изображения */}
|
||||
<div className="absolute top-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">
|
||||
<service.icon className="w-6 h-6 text-white" />
|
||||
<div className="absolute top-3 sm:top-4 left-3 sm:left-4 w-10 sm:w-12 h-10 sm:h-12 rounded-full bg-white/20 backdrop-blur-sm border border-white/30 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
<service.icon className="w-5 sm:w-6 h-5 sm:h-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Контент */}
|
||||
<div className="p-6 text-center">
|
||||
<h4 className="text-xl font-bold text-gray-800 mb-4 group-hover:text-blue-600 transition-colors duration-300">
|
||||
<div className="p-4 sm:p-6 text-center">
|
||||
<h4 className="text-lg sm:text-xl font-bold text-gray-800 mb-3 sm:mb-4 group-hover:text-blue-600 transition-colors duration-300">
|
||||
{service.title}
|
||||
</h4>
|
||||
|
||||
<p className="text-gray-600 text-base mb-6 leading-relaxed">
|
||||
<p className="text-gray-600 text-sm sm:text-base mb-4 sm:mb-6 leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
|
||||
<ul className="space-y-3">
|
||||
<ul className="space-y-2 sm:space-y-3">
|
||||
{service.features.map((feature, featureIndex) => (
|
||||
<li key={featureIndex} className="flex items-center text-sm text-gray-500">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full mr-3"></div>
|
||||
<li key={featureIndex} className="flex items-center text-xs sm:text-sm text-gray-500">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full mr-2 sm:mr-3"></div>
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
@ -253,7 +255,7 @@ const WorkExamplesSection = () => {
|
||||
</FadeInSection>
|
||||
))}
|
||||
</div>
|
||||
</FadeInSection>
|
||||
</FadeInSection>
|
||||
</div>
|
||||
|
||||
{/* Призыв к действию */}
|
||||
|
||||
@ -28,51 +28,51 @@ const features = [
|
||||
|
||||
const WhyChooseUsSection = () => {
|
||||
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 top-20 left-20 w-3 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 bottom-32 left-1/4 w-4 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-20 left-20 w-2 sm:w-3 h-2 sm:h-3 bg-blue-500 rounded-full opacity-40"></div>
|
||||
<div className="absolute top-40 right-32 w-1.5 sm:w-2 h-1.5 sm:h-2 bg-indigo-500 rounded-full opacity-50"></div>
|
||||
<div className="absolute bottom-32 left-1/4 w-3 sm:w-4 h-3 sm:h-4 bg-cyan-500 rounded-full opacity-30"></div>
|
||||
<div className="absolute top-1/3 right-1/4 w-1.5 sm:w-2 h-1.5 sm:h-2 bg-blue-400 rounded-full opacity-45"></div>
|
||||
|
||||
{/* Тонкие линии */}
|
||||
<div className="absolute top-1/4 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-300 to-transparent opacity-25"></div>
|
||||
<div className="absolute bottom-1/3 left-0 w-full h-px bg-gradient-to-r from-transparent via-indigo-300 to-transparent opacity-20"></div>
|
||||
|
||||
{/* Угловые элементы */}
|
||||
<div className="absolute top-0 right-0 w-32 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 top-0 right-0 w-24 sm:w-32 h-24 sm:h-32 border-t-2 border-r-2 border-blue-300 opacity-20"></div>
|
||||
<div className="absolute bottom-0 left-0 w-18 sm:w-24 h-18 sm:h-24 border-b-2 border-l-2 border-indigo-300 opacity-25"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="container mx-auto px-4 sm:px-6 relative z-10">
|
||||
{/* Заголовок секции */}
|
||||
<FadeInSection as="div" className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
<FadeInSection as="div" className="text-center mb-12 sm:mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
Почему выбирают нас?
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
|
||||
</FadeInSection>
|
||||
|
||||
{/* Карточки преимуществ */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
||||
{features.map((feature, index) => (
|
||||
<FadeInSection
|
||||
key={index}
|
||||
as="div"
|
||||
className="group relative p-6 rounded-2xl bg-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}
|
||||
>
|
||||
{/* Фон */}
|
||||
<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-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.icon className="w-10 sm:w-12 h-10 sm:h-12 text-blue-600 mb-3 sm:mb-4 group-hover:text-blue-700 group-hover:scale-110 transition-all duration-300" />
|
||||
<h3 className="text-lg sm:text-xl font-bold text-gray-800 mb-2 sm:mb-3 group-hover:text-blue-600 transition-all duration-300">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
<p className="text-gray-600 leading-relaxed text-sm sm:text-base">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user