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

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

Browse Source
This commit is contained in:
Bivekich
2025-06-26 10:26:28 +03:00
parent 827e8d5ab2
commit 6597497f11
26 changed files with 528 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/111.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 406 KiB

BIN
public/images/122.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

BIN
public/images/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 690 KiB

BIN
public/images/22.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 295 KiB

BIN
public/images/222.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB

BIN
public/images/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 509 KiB

BIN
public/images/33.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 667 KiB

BIN
public/images/333.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 369 KiB

BIN
public/images/3333.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 330 KiB

BIN
public/images/33333.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

BIN
public/images/444.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 KiB

BIN
public/images/555.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
public/images/666.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 406 KiB

BIN
public/images/company2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1004 KiB

28
src/app/page.tsx
View File

@ -157,12 +157,16 @@ export default function Home() {
{/* Right Form */} {/* Right Form */}
<FadeInSection as="div" className="w-full lg:w-96" delay={0.4}> <FadeInSection as="div" className="w-full lg:w-96" delay={0.4}>
<div className="bg-white/95 backdrop-blur-sm rounded-xl p-8 shadow-2xl"> <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">
<h3 className="text-2xl font-bold text-gray-900 mb-6 text-center"> {/* Фон */}
<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> </h3>
<form onSubmit={handleFormSubmit} className="space-y-4"> <form onSubmit={handleFormSubmit} className="space-y-6">
<input <input
type="tel" type="tel"
placeholder="Ваш телефон" placeholder="Ваш телефон"
@ -171,20 +175,20 @@ 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 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 text-gray-900 bg-white" 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"
/> />
<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 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 text-gray-900 bg-white" 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"
/> />
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="w-full bg-blue-600 text-white py-4 rounded-lg hover:bg-blue-700 transition-colors text-lg font-semibold flex items-center justify-center group disabled:opacity-60 disabled:cursor-not-allowed" className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-4 rounded-xl hover:from-blue-600 hover:to-purple-600 transition-all duration-300 text-lg font-semibold flex items-center justify-center group disabled:opacity-60 disabled:cursor-not-allowed hover:scale-105 shadow-lg"
> >
{loading ? 'Отправка...' : 'Обсудить проект'} {loading ? 'Отправка...' : 'Обсудить проект'}
{!loading && ( {!loading && (
@ -195,19 +199,23 @@ export default function Home() {
</button> </button>
{error && ( {error && (
<div className="bg-red-500 text-white text-center py-3 px-4 rounded-lg text-sm"> <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">
{error} {error}
</div> </div>
)} )}
</form> </form>
<p className="text-xs text-gray-500 mt-4 text-center"> <p className="text-xs text-gray-400 mt-4 text-center">
Нажимая кнопку &quot;Обсудить проект&quot;, вы соглашаетесь с{' '} Нажимая кнопку &quot;Обсудить проект&quot;, вы соглашаетесь с{' '}
<a href="#" className="underline hover:text-blue-600"> <a href="#" className="underline hover:text-blue-400 transition-colors duration-300">
Политикой конфиденциальности Политикой конфиденциальности
</a> </a>
</p> </p>
</div> </div>
{/* Декоративный элемент */}
<div className="absolute top-4 right-4 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
</FadeInSection> </FadeInSection>
</div> </div>
</div> </div>
@ -219,7 +227,7 @@ export default function Home() {
<ProjectsSection onCatalogClick={() => setIsCatalogModalOpen(true)} /> <ProjectsSection onCatalogClick={() => setIsCatalogModalOpen(true)} />
<WhyChooseUsSection /> <WhyChooseUsSection />
<TeamSection /> <TeamSection />
<ReviewsSection onExcursionClick={() => setIsExcursionModalOpen(true)} /> <ReviewsSection />
<ContactSection /> <ContactSection />
<Footer /> <Footer />
</main> </main>

2
src/components/AboutSection.tsx
View File

@ -58,7 +58,7 @@ const AboutSection = () => {
<div className="relative h-[500px] w-full rounded-2xl overflow-hidden"> <div className="relative h-[500px] w-full rounded-2xl overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent z-10"></div> <div className="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent z-10"></div>
<Image <Image
src="/images/company.jpg" src="/images/company2.jpg"
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"

55
src/components/CatalogRequestModal.tsx
View File

@ -66,21 +66,43 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
}; };
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50"> <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/80 backdrop-blur-sm">
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4 relative animate-fadeIn"> <div className="relative bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 rounded-2xl shadow-2xl w-full max-w-lg mx-4 animate-fadeIn border border-white/20 overflow-hidden">
{/* Декоративные фоновые элементы */}
<div className="absolute inset-0 opacity-10">
<div className="absolute top-1/4 left-1/4 w-32 h-32 bg-blue-500 rounded-full blur-2xl"></div>
<div className="absolute bottom-1/4 right-1/4 w-28 h-28 bg-purple-500 rounded-full blur-2xl"></div>
<div className="absolute top-1/2 left-1/2 w-24 h-24 bg-cyan-500 rounded-full blur-2xl opacity-20"></div>
</div>
<button <button
onClick={closeModal} onClick={closeModal}
className="absolute top-4 right-4 text-gray-400 hover:text-gray-700" className="absolute top-4 right-4 text-gray-400 hover:text-white z-20 p-2 rounded-full hover:bg-white/10 transition-all duration-300"
aria-label="Закрыть" aria-label="Закрыть"
> >
<X className="w-6 h-6" /> <X className="w-6 h-6" />
</button> </button>
<div className="p-8 md:p-10 flex flex-col items-center">
<div className="relative z-10 p-8 md:p-10 flex flex-col items-center">
<div className="w-full flex justify-center mb-6"> <div className="w-full flex justify-center mb-6">
<Image src="/images/katalog.png" alt="Каталог проектов" width={320} height={120} className="object-contain rounded-lg shadow-md" /> <div className="relative group">
<Image
src="/images/katalog.png"
alt="Каталог проектов"
width={320}
height={120}
className="object-contain rounded-lg shadow-md group-hover:scale-105 transition-transform duration-300"
/>
{/* Декоративные элементы вокруг изображения */}
<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 -bottom-2 -right-2 w-20 h-20 bg-gradient-to-br from-purple-500/30 to-blue-500/30 rounded-full blur-xl"></div>
</div> </div>
<h2 className="text-2xl md:text-3xl font-bold text-center mb-2">Укажите контакты</h2> </div>
<p className="text-gray-500 text-center mb-8">И мы отправим каталог проектов на WhatsApp</p>
<h2 className="text-2xl md:text-3xl font-bold text-center mb-2 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
Укажите контакты
</h2>
<p className="text-gray-300 text-center mb-8">И мы отправим каталог проектов на WhatsApp</p>
{!success ? ( {!success ? (
<form onSubmit={handleSubmit} className="w-full flex flex-col gap-4"> <form onSubmit={handleSubmit} className="w-full flex flex-col gap-4">
@ -92,24 +114,24 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
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 border-2 border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 text-lg" className="w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 text-lg text-white placeholder-gray-400 hover:bg-white/15 transition-all duration-300"
/> />
<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 border-2 border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 text-lg" className="w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 text-lg text-white placeholder-gray-400 hover:bg-white/15 transition-all duration-300"
/> />
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="w-full bg-blue-800 text-white py-3 rounded-lg hover:bg-blue-900 transition-colors text-lg font-semibold mt-2 disabled:opacity-60" className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-3 rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all duration-300 text-lg font-semibold mt-2 disabled:opacity-60 hover:scale-105 hover:-translate-y-1 shadow-lg hover:shadow-xl"
> >
{loading ? 'Отправка...' : 'Хочу проект'} {loading ? 'Отправка...' : 'Хочу проект'}
</button> </button>
{error && ( {error && (
<div className="bg-red-500 text-white text-center py-3 px-4 rounded-lg flex items-center justify-center min-h-[48px] md:min-h-[40px] md:text-base text-sm whitespace-pre-line mt-2"> <div className="bg-gradient-to-r from-red-500/20 to-red-600/20 backdrop-blur-sm border border-red-500/30 text-red-300 text-center py-3 px-4 rounded-lg flex items-center justify-center min-h-[48px] md:min-h-[40px] md:text-base text-sm whitespace-pre-line mt-2">
<AlertCircle className="w-5 h-5 mr-2 shrink-0" /> <AlertCircle className="w-5 h-5 mr-2 shrink-0" />
<span className="block w-full break-words">{error}</span> <span className="block w-full break-words">{error}</span>
</div> </div>
@ -117,20 +139,23 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
</form> </form>
) : ( ) : (
<div className="w-full flex flex-col items-center animate-fadeIn"> <div className="w-full flex flex-col items-center animate-fadeIn">
<div className="bg-green-100 rounded-2xl p-6 mb-8 flex items-center shadow-lg w-full"> <div className="bg-gradient-to-r from-green-500/20 to-green-600/20 backdrop-blur-sm border border-green-500/30 rounded-2xl p-6 mb-8 flex items-center shadow-lg w-full">
<CheckCircle className="w-10 h-10 text-green-600 mr-4 flex-shrink-0" /> <CheckCircle className="w-10 h-10 text-green-400 mr-4 flex-shrink-0" />
<span className="text-green-700 text-lg md:text-xl font-semibold leading-snug text-left"> <span className="text-green-300 text-lg md:text-xl font-semibold leading-snug text-left">
Спасибо! Данные успешно отправлены. Спасибо! Данные успешно отправлены.
</span> </span>
</div> </div>
<button <button
onClick={closeModal} onClick={closeModal}
className="bg-blue-800 text-white px-8 py-3 rounded-full hover:bg-blue-900 transition-colors text-lg font-semibold shadow-md" className="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-8 py-3 rounded-full hover:from-blue-600 hover:to-purple-600 transition-all duration-300 text-lg font-semibold shadow-md hover:scale-105 hover:-translate-y-1"
> >
Закрыть Закрыть
</button> </button>
</div> </div>
)} )}
{/* Декоративный элемент */}
<div className="absolute top-2 right-12 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50"></div>
</div> </div>
</div> </div>
</div> </div>

126
src/components/ContactSection.tsx
View File

@ -1,3 +1,5 @@
'use client';
import { useState } from 'react'; import { useState } from 'react';
import { Phone, Mail, MapPin, CheckCircle, AlertCircle } from 'lucide-react'; import { Phone, Mail, MapPin, CheckCircle, AlertCircle } from 'lucide-react';
import FadeInSection from './FadeInSection'; import FadeInSection from './FadeInSection';
@ -50,83 +52,113 @@ const ContactSection = () => {
}; };
return ( return (
<section id="contacts" className="py-20 bg-white"> <section id="contacts" className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
<div className="container mx-auto px-4"> {/* Статичный фон */}
<FadeInSection as="h2" className="text-3xl font-bold text-gray-900 mb-12 text-center"> <div className="absolute inset-0 opacity-10">
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
<div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
<div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div>
</div>
<div className="container mx-auto px-4 relative z-10">
{/* Заголовок секции */}
<FadeInSection as="div" className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4">
Наши контакты Наши контакты
</h2>
<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 gap-12"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
<FadeInSection as="div" delay={0.2}> {/* Контактная информация */}
<div className="space-y-6"> <FadeInSection
<div className="flex items-start"> as="div"
<Phone className="w-6 h-6 text-blue-600 mt-1 mr-4" /> 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"
delay={0.2}
>
{/* Фон */}
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div className="relative z-10 space-y-8">
<div className="flex items-start group/item">
<div className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-white/20 mr-4 group-hover/item:scale-110 transition-transform duration-300">
<Phone className="w-6 h-6 text-blue-400" />
</div>
<div> <div>
<h3 className="text-lg font-bold text-gray-900 mb-1"> <h3 className="text-xl font-bold text-white mb-2 group-hover/item:text-blue-300 transition-colors duration-300">
Телефон Телефон
</h3> </h3>
<a <span className="text-gray-300 text-lg">
href="tel:+79672123132" будет другой
className="text-gray-600 hover:text-blue-600 transition-colors" </span>
>
+7 (967) 212-31-32
</a>
</div> </div>
</div> </div>
<div className="flex items-start"> <div className="flex items-start group/item">
<Mail className="w-6 h-6 text-blue-600 mt-1 mr-4" /> <div className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-white/20 mr-4 group-hover/item:scale-110 transition-transform duration-300">
<Mail className="w-6 h-6 text-blue-400" />
</div>
<div> <div>
<h3 className="text-lg font-bold text-gray-900 mb-1"> <h3 className="text-xl font-bold text-white mb-2 group-hover/item:text-blue-300 transition-colors duration-300">
Email Email
</h3> </h3>
<a <span className="text-gray-300 text-lg">
href="mailto:sksdstroy@yandex.ru" Будет
className="text-gray-600 hover:text-blue-600 transition-colors" </span>
>
sksdstroy@yandex.ru
</a>
</div> </div>
</div> </div>
<div className="flex items-start"> <div className="flex items-start group/item">
<MapPin className="w-6 h-6 text-blue-600 mt-1 mr-4" /> <div className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-white/20 mr-4 group-hover/item:scale-110 transition-transform duration-300">
<MapPin className="w-6 h-6 text-blue-400" />
</div>
<div> <div>
<h3 className="text-lg font-bold text-gray-900 mb-1"> <h3 className="text-xl font-bold text-white mb-2 group-hover/item:text-blue-300 transition-colors duration-300">
Адрес Адрес
</h3> </h3>
<p className="text-gray-600"> <p className="text-gray-300 text-lg leading-relaxed">
Чувашская республика, г. Чебоксары,<br /> г. Чебоксары, ул. Калинина, 107
ул. Пирогова, 1 корп. 3, 428034
</p> </p>
</div> </div>
</div> </div>
</div>
<div className="mt-8"> <div className="pt-6 border-t border-white/10">
<h3 className="text-lg font-bold text-gray-900 mb-4"> <h3 className="text-xl font-bold text-white mb-4">
Реквизиты Реквизиты
</h3> </h3>
<p className="text-gray-600"> <p className="text-gray-300 leading-relaxed">
ИП Степанов Денис Сергеевич<br /> ИП Степанов Денис Сергеевич<br />
ИНН 212306083987 ИНН 212306083987
</p> </p>
</div> </div>
</div>
{/* Декоративный элемент */}
<div className="absolute top-4 right-4 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
</FadeInSection> </FadeInSection>
<FadeInSection as="div" className="bg-gray-50 p-6 rounded-lg" delay={0.4}> {/* Форма обратной связи */}
<h3 className="text-xl font-bold text-gray-900 mb-6"> <FadeInSection
as="div"
className="group relative p-8 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500"
delay={0.4}
>
{/* Фон */}
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div className="relative z-10">
<h3 className="text-2xl font-bold text-white mb-6 group-hover:text-blue-300 transition-colors duration-300">
Отправить сообщение Отправить сообщение
</h3> </h3>
{!success ? ( {!success ? (
<form className="space-y-4" onSubmit={handleSubmit}> <form className="space-y-6" onSubmit={handleSubmit}>
<div> <div>
<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-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300"
/> />
</div> </div>
<div> <div>
@ -138,7 +170,7 @@ const ContactSection = () => {
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-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300"
/> />
</div> </div>
<div> <div>
@ -147,11 +179,11 @@ const ContactSection = () => {
rows={4} rows={4}
value={message} value={message}
onChange={e => setMessage(e.target.value)} onChange={e => setMessage(e.target.value)}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600" className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300 resize-none"
/> />
</div> </div>
{error && ( {error && (
<div className="bg-red-500 text-white text-center py-3 px-4 rounded-lg flex items-center justify-center min-h-[48px] md:min-h-[40px] md:text-base text-sm whitespace-pre-line"> <div className="bg-red-500/20 border border-red-500/30 text-red-300 text-center py-3 px-4 rounded-xl flex items-center justify-center backdrop-blur-sm">
<AlertCircle className="w-5 h-5 mr-2 shrink-0" /> <AlertCircle className="w-5 h-5 mr-2 shrink-0" />
<span className="block w-full break-words">{error}</span> <span className="block w-full break-words">{error}</span>
</div> </div>
@ -159,21 +191,25 @@ const ContactSection = () => {
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors font-semibold disabled:opacity-60" className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-3 rounded-xl hover:from-blue-600 hover:to-purple-600 transition-all duration-300 font-semibold disabled:opacity-60 hover:scale-105 hover:shadow-lg"
> >
{loading ? 'Отправка...' : 'Отправить'} {loading ? 'Отправка...' : 'Отправить'}
</button> </button>
</form> </form>
) : ( ) : (
<div className="flex flex-col items-center justify-center py-8 animate-fadeIn"> <div className="flex flex-col items-center justify-center py-8 animate-fadeIn">
<div className="bg-green-100 rounded-2xl p-4 mb-6 flex items-center shadow-lg w-full"> <div className="bg-green-500/20 border border-green-500/30 rounded-2xl p-6 mb-6 flex items-center backdrop-blur-sm w-full">
<CheckCircle className="w-8 h-8 text-green-600 mr-2" /> <CheckCircle className="w-8 h-8 text-green-400 mr-3" />
<span className="text-green-700 text-lg font-semibold leading-snug text-left"> <span className="text-green-300 text-lg font-semibold leading-snug text-left">
Спасибо! Ваше сообщение успешно отправлено. Спасибо! Ваше сообщение успешно отправлено.
</span> </span>
</div> </div>
</div> </div>
)} )}
</div>
{/* Декоративный элемент */}
<div className="absolute top-4 right-4 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
</FadeInSection> </FadeInSection>
</div> </div>
</div> </div>

14
src/components/Footer.tsx
View File

@ -49,8 +49,8 @@ const Footer = () => {
<li>+7 (900) 123-45-67</li> <li>+7 (900) 123-45-67</li>
<li>info@vashdom.ru</li> <li>info@vashdom.ru</li>
<li> <li>
г. Москва,<br /> г. Чебоксары,<br />
ул. Новая, 10 ул. Калинина, 107
</li> </li>
</ul> </ul>
</div> </div>
@ -66,20 +66,12 @@ const Footer = () => {
> >
Telegram Telegram
</a> </a>
<a
href="#"
className="text-gray-400 hover:text-white transition-colors"
target="_blank"
rel="noopener noreferrer"
>
WhatsApp
</a>
</div> </div>
</div> </div>
</div> </div>
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2025 ВашДом. Все права защищены.</p> <p>© 2021 ВашДом. Все права защищены.</p>
<p className="mt-2 text-sm"> <p className="mt-2 text-sm">
Разработка сайта <a href="https://biveki.ru/" target="_blank" rel="noopener noreferrer" className="underline hover:text-white">BivekiGroup</a> Разработка сайта <a href="https://biveki.ru/" target="_blank" rel="noopener noreferrer" className="underline hover:text-white">BivekiGroup</a>
</p> </p>

10
src/components/Header.tsx
View File

@ -34,14 +34,14 @@ const Header = () => {
<Link href="#services" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1"> <Link href="#services" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1">
Услуги Услуги
</Link> </Link>
<Link href="#about" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1">
О нас
</Link>
<Link href="#projects" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1"> <Link href="#projects" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1">
Каталог домов Каталог домов
</Link> </Link>
<Link href="#mortgage" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1"> <Link href="#reviews" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1">
Ипотека Отзывы
</Link>
<Link href="#about" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1">
О нас
</Link> </Link>
<Link href="#contacts" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1"> <Link href="#contacts" className="text-white hover:text-blue-400 transition-colors text-sm font-medium py-1">
Контакты Контакты

115
src/components/HouseCalculatorModal.tsx
View File

@ -95,8 +95,6 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
} }
}; };
const closeModal = () => { const closeModal = () => {
setStep(1); setStep(1);
setMaterial(''); setMaterial('');
@ -109,52 +107,74 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
}; };
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"> <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4">
<div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl mx-auto relative animate-fadeIn max-h-[90vh] overflow-y-auto"> {/* Декоративный фон */}
<div className="absolute inset-0 opacity-20">
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
<div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
<div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl"></div>
</div>
<div className="relative bg-gradient-to-br from-gray-900/95 via-gray-800/95 to-gray-900/95 backdrop-blur-md border border-white/20 rounded-2xl shadow-2xl w-full max-w-2xl mx-auto animate-fadeIn max-h-[90vh] overflow-y-auto">
<button <button
onClick={closeModal} onClick={closeModal}
className="absolute top-4 right-4 text-gray-400 hover:text-gray-700 p-2 hover:bg-gray-100 rounded-full transition-colors" className="absolute top-4 right-4 text-gray-400 hover:text-white p-2 hover:bg-white/10 rounded-full transition-colors z-10"
aria-label="Закрыть калькулятор" aria-label="Закрыть калькулятор"
> >
<X className="w-5 h-5 sm:w-6 sm:h-6" /> <X className="w-5 h-5 sm:w-6 sm:h-6" />
</button> </button>
<div className="p-4 sm:p-6 md:p-8"> <div className="p-4 sm:p-6 md:p-8">
<div className="flex items-center justify-between mb-4 sm:mb-6"> <div className="flex items-center justify-between mb-4 sm:mb-6">
<span className="text-gray-500 text-xs sm:text-sm"> <span className="text-gray-300 text-xs sm:text-sm">
{step < 5 ? 'Для расчета стоимости выберите один из вариантов' : 'Спасибо за заявку!'} {step < 5 ? 'Для расчета стоимости выберите один из вариантов' : 'Спасибо за заявку!'}
</span> </span>
<span className="text-gray-500 text-xs sm:text-sm">{step}/5</span> <span className="text-gray-300 text-xs sm:text-sm">{step}/5</span>
</div> </div>
<div className="w-full h-1 bg-gray-200 rounded mb-6 sm:mb-8">
<div className="h-1 bg-blue-600 rounded transition-all" style={{ width: `${(step-1)*25}%` }} /> <div className="w-full h-2 bg-white/10 rounded-full mb-6 sm:mb-8">
<div className="h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500" style={{ width: `${(step-1)*25}%` }} />
</div> </div>
{step === 1 && ( {step === 1 && (
<div> <div>
<h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">Из какого материала хотите построить дом?</h2> <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
Из какого материала хотите построить дом?
</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm: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 border-2 rounded-xl p-3 sm:p-4 flex flex-col items-center transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-600 relative ${ className={`group relative p-4 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 hover:scale-[1.02] ${
material === m.value ? 'border-blue-600 shadow-lg' : 'border-gray-200 hover:border-blue-400' material === m.value
? 'border-blue-500 shadow-lg shadow-blue-500/25'
: 'border-white/20 hover:border-white/40'
}`} }`}
> >
<div className="relative w-20 h-20 sm:w-24 sm:h-24 mb-3 sm:mb-4"> {/* Фон при активном состоянии */}
<div className={`absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 transition-opacity duration-300 ${
material === m.value ? 'opacity-100' : 'opacity-0'
}`}></div>
<div className="relative z-10 flex flex-col items-center">
<div className="relative w-20 h-20 sm:w-24 sm:h-24 mb-3 sm:mb-4 rounded-xl overflow-hidden">
<Image <Image
src={m.img} src={m.img}
alt={m.label} alt={m.label}
fill fill
className="object-contain rounded-lg" className="object-cover"
sizes="(max-width: 640px) 80px, (max-width: 1024px) 96px, 96px" sizes="(max-width: 640px) 80px, (max-width: 1024px) 96px, 96px"
/> />
</div> </div>
<span className="text-base sm:text-lg font-medium text-gray-800 text-center">{m.label}</span> <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 && ( {material === m.value && (
<CheckCircle className="w-5 h-5 sm:w-6 sm:h-6 text-blue-600 absolute top-2 right-2" /> <CheckCircle className="w-5 h-5 sm:w-6 sm:h-6 text-blue-400 absolute top-2 right-2" />
)} )}
</div>
</button> </button>
))} ))}
</div> </div>
@ -163,19 +183,24 @@ 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">Какая площадь дома?</h2> <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
Какая площадь дома?
</h2>
<div className="flex flex-col gap-3 sm:gap-4"> <div className="flex flex-col gap-3 sm:gap-4">
{areas.map((a) => ( {areas.map((a) => (
<label key={a} className="flex items-center cursor-pointer p-3 rounded-lg hover:bg-gray-50 transition-colors"> <label key={a} className="group relative cursor-pointer p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
<div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative z-10 flex items-center">
<input <input
type="radio" type="radio"
name="area" name="area"
value={a} value={a}
checked={area === a} checked={area === a}
onChange={() => setArea(a)} onChange={() => setArea(a)}
className="accent-blue-600 w-4 h-4 sm:w-5 sm:h-5 mr-3" className="w-4 h-4 sm:w-5 sm:h-5 mr-3 accent-blue-500"
/> />
<span className="text-base sm:text-lg text-gray-800">{a}</span> <span className="text-base sm:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{a}</span>
</div>
</label> </label>
))} ))}
</div> </div>
@ -184,19 +209,24 @@ 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">Вариант отделки</h2> <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
Вариант отделки
</h2>
<div className="flex flex-col gap-3 sm:gap-4"> <div className="flex flex-col gap-3 sm:gap-4">
{finishes.map((f) => ( {finishes.map((f) => (
<label key={f} className="flex items-center cursor-pointer p-3 rounded-lg hover:bg-gray-50 transition-colors"> <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 <input
type="radio" type="radio"
name="finish" name="finish"
value={f} value={f}
checked={finish === f} checked={finish === f}
onChange={() => setFinish(f)} onChange={() => setFinish(f)}
className="accent-blue-600 w-4 h-4 sm:w-5 sm:h-5 mr-3" className="w-4 h-4 sm:w-5 sm:h-5 mr-3 accent-blue-500"
/> />
<span className="text-base sm:text-lg text-gray-800">{f}</span> <span className="text-base sm:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{f}</span>
</div>
</label> </label>
))} ))}
</div> </div>
@ -205,19 +235,24 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
{step === 4 && ( {step === 4 && (
<div> <div>
<h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6">Источник финансирования</h2> <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
Источник финансирования
</h2>
<div className="flex flex-col gap-3 sm:gap-4"> <div className="flex flex-col gap-3 sm:gap-4">
{finances.map((f) => ( {finances.map((f) => (
<label key={f} className="flex items-center cursor-pointer p-3 rounded-lg hover:bg-gray-50 transition-colors"> <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 <input
type="radio" type="radio"
name="finance" name="finance"
value={f} value={f}
checked={finance === f} checked={finance === f}
onChange={() => setFinance(f)} onChange={() => setFinance(f)}
className="accent-blue-600 w-4 h-4 sm:w-5 sm:h-5 mr-3" className="w-4 h-4 sm:w-5 sm:h-5 mr-3 accent-blue-500"
/> />
<span className="text-base sm:text-lg text-gray-800">{f}</span> <span className="text-base sm:text-lg text-white group-hover:text-blue-300 transition-colors duration-300">{f}</span>
</div>
</label> </label>
))} ))}
</div> </div>
@ -226,15 +261,15 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
{step === 5 && ( {step === 5 && (
<div className="flex flex-col items-center justify-center py-8 sm:py-12 animate-fadeIn"> <div className="flex flex-col items-center justify-center py-8 sm:py-12 animate-fadeIn">
<div className="bg-green-100 rounded-2xl p-4 sm:p-6 mb-6 sm:mb-8 flex items-center shadow-lg w-full max-w-xl mx-auto"> <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-600 mr-3 sm:mr-4 flex-shrink-0" /> <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-700 text-base sm:text-lg md:text-xl font-semibold leading-snug text-left"> <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 минут мы свяжемся с вами! Благодарим за обращение в нашу компанию!<br className='hidden md:block' /> В течение 15 минут мы свяжемся с вами!
</span> </span>
</div> </div>
<button <button
onClick={closeModal} onClick={closeModal}
className="bg-blue-600 text-white px-6 sm:px-8 py-3 rounded-full hover:bg-blue-700 transition-colors text-base sm:text-lg font-semibold shadow-md" className="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 sm:px-8 py-3 rounded-full hover:from-blue-600 hover:to-purple-600 transition-all duration-300 text-base sm:text-lg font-semibold shadow-lg hover:scale-105"
> >
Закрыть Закрыть
</button> </button>
@ -243,15 +278,15 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
{success && ( {success && (
<div className="flex flex-col items-center justify-center py-8 sm:py-12 animate-fadeIn"> <div className="flex flex-col items-center justify-center py-8 sm:py-12 animate-fadeIn">
<div className="bg-green-100 rounded-2xl p-4 sm:p-6 mb-6 sm:mb-8 flex items-center shadow-lg w-full max-w-xl mx-auto"> <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-600 mr-3 sm:mr-4 flex-shrink-0" /> <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-700 text-base sm:text-lg md:text-xl font-semibold leading-snug text-left"> <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 минут мы свяжемся с вами! Благодарим за обращение в нашу компанию!<br className='hidden md:block' /> В течение 15 минут мы свяжемся с вами!
</span> </span>
</div> </div>
<button <button
onClick={closeModal} onClick={closeModal}
className="bg-blue-600 text-white px-6 sm:px-8 py-3 rounded-full hover:bg-blue-700 transition-colors text-base sm:text-lg font-semibold shadow-md" className="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 sm:px-8 py-3 rounded-full hover:from-blue-600 hover:to-purple-600 transition-all duration-300 text-base sm:text-lg font-semibold shadow-lg hover:scale-105"
> >
Закрыть Закрыть
</button> </button>
@ -259,7 +294,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
)} )}
{error && ( {error && (
<div className="mt-4 sm:mt-6 bg-red-500 text-white text-center py-2 sm:py-3 px-3 sm:px-4 rounded-lg flex items-center justify-center min-h-[40px] sm:min-h-[48px] text-sm sm:text-base whitespace-pre-line"> <div className="mt-4 sm:mt-6 bg-red-500/20 border border-red-500/30 text-red-300 text-center py-2 sm:py-3 px-3 sm:px-4 rounded-xl flex items-center justify-center min-h-[40px] sm:min-h-[48px] text-sm sm:text-base backdrop-blur-sm">
<AlertCircle className="w-4 h-4 sm:w-5 sm:h-5 mr-2 shrink-0" /> <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> <span className="block w-full break-words">{error}</span>
</div> </div>
@ -270,7 +305,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
{step > 1 && ( {step > 1 && (
<button <button
onClick={handlePrev} onClick={handlePrev}
className="bg-gray-200 text-gray-700 px-4 sm:px-6 py-2 rounded-full hover:bg-gray-300 transition-colors text-sm sm:text-base font-medium" className="bg-white/10 backdrop-blur-sm border border-white/20 text-white px-4 sm:px-6 py-2 rounded-full hover:bg-white/20 hover:scale-105 transition-all duration-300 text-sm sm:text-base font-medium"
> >
← Назад ← Назад
</button> </button>
@ -278,7 +313,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
{step < 4 && ( {step < 4 && (
<button <button
onClick={handleNext} onClick={handleNext}
className="ml-auto bg-blue-600 text-white px-6 sm:px-8 py-2 rounded-full hover:bg-blue-700 transition-colors text-sm sm:text-base font-medium" className="ml-auto bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 sm:px-8 py-2 rounded-full hover:from-blue-600 hover:to-purple-600 hover:scale-105 transition-all duration-300 text-sm sm:text-base font-medium shadow-lg"
> >
Далее → Далее →
</button> </button>
@ -286,7 +321,7 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
{step === 4 && ( {step === 4 && (
<button <button
onClick={handleNext} onClick={handleNext}
className="ml-auto bg-blue-600 text-white px-6 sm:px-8 py-2 rounded-full hover:bg-blue-700 transition-colors text-sm sm:text-base font-medium" className="ml-auto bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 sm:px-8 py-2 rounded-full hover:from-blue-600 hover:to-purple-600 hover:scale-105 transition-all duration-300 text-sm sm:text-base font-medium shadow-lg"
> >
Рассчитать стоимость Рассчитать стоимость
</button> </button>

18
src/components/MobileMenu.tsx
View File

@ -55,6 +55,13 @@ const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
> >
Услуги Услуги
</Link> </Link>
<Link
href="#about"
className="text-xl text-white hover:text-blue-400 transition-colors py-2"
onClick={onClose}
>
О нас
</Link>
<Link <Link
href="#projects" href="#projects"
className="text-xl text-white hover:text-blue-400 transition-colors py-2" className="text-xl text-white hover:text-blue-400 transition-colors py-2"
@ -63,18 +70,11 @@ const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
Каталог домов Каталог домов
</Link> </Link>
<Link <Link
href="#mortgage" href="#reviews"
className="text-xl text-white hover:text-blue-400 transition-colors py-2" className="text-xl text-white hover:text-blue-400 transition-colors py-2"
onClick={onClose} onClick={onClose}
> >
Ипотека Отзывы
</Link>
<Link
href="#about"
className="text-xl text-white hover:text-blue-400 transition-colors py-2"
onClick={onClose}
>
О нас
</Link> </Link>
<Link <Link
href="#contacts" href="#contacts"

45
src/components/ProjectsSection.tsx
View File

@ -15,8 +15,8 @@ const projects = [
description: 'Дом 11х9м, общая площадь 101,4 кв.м., 3 спальни, 1 санузел', description: 'Дом 11х9м, общая площадь 101,4 кв.м., 3 спальни, 1 санузел',
images: [ images: [
{ type: 'facade', src: '/images/garmony.png', alt: 'Фасад дома Гармония' }, { type: 'facade', src: '/images/garmony.png', alt: 'Фасад дома Гармония' },
{ type: 'plan', src: '/projects/garmony-plan1.jpg', alt: 'Планировка 1 этажа' }, { type: 'plan', src: '/images/2.jpg', alt: 'Планировка 1 этажа' },
{ type: 'plan', src: '/projects/garmony-plan2.jpg', alt: 'Планировка 2 этажа' } { type: 'plan', src: '/images/3.jpg', alt: 'Планировка 2 этажа' }
], ],
file: '/projects/garmony.pdf', file: '/projects/garmony.pdf',
}, },
@ -26,8 +26,8 @@ const projects = [
description: 'Дом 14х13 м, общая площадь 142,8 кв.м, 3 спальни, 2 санузла', description: 'Дом 14х13 м, общая площадь 142,8 кв.м, 3 спальни, 2 санузла',
images: [ images: [
{ type: 'facade', src: '/images/gorizont.png', alt: 'Фасад дома Горизонт' }, { type: 'facade', src: '/images/gorizont.png', alt: 'Фасад дома Горизонт' },
{ type: 'plan', src: '/projects/gorizont-plan1.jpg', alt: 'Планировка 1 этажа' }, { type: 'plan', src: '/images/22.jpg', alt: 'Планировка 1 этажа' },
{ type: 'plan', src: '/projects/gorizont-plan2.jpg', alt: 'Планировка 2 этажа' } { type: 'plan', src: '/images/33.jpg', alt: 'Планировка 2 этажа' }
], ],
file: '/projects/gorizont.pdf', file: '/projects/gorizont.pdf',
}, },
@ -37,8 +37,7 @@ const projects = [
description: 'Дом 14,2х10,5 м, общая площадь 131,4 кв.м., 3 спальни, 2 санузла', description: 'Дом 14,2х10,5 м, общая площадь 131,4 кв.м., 3 спальни, 2 санузла',
images: [ images: [
{ type: 'facade', src: '/images/filimonov.png', alt: 'Фасад дома Филимонов' }, { type: 'facade', src: '/images/filimonov.png', alt: 'Фасад дома Филимонов' },
{ type: 'plan', src: '/projects/filimonov-plan1.jpg', alt: 'Планировка 1 этажа' }, { type: 'plan', src: '/images/333.jpg', alt: 'Планировка дома' }
{ type: 'plan', src: '/projects/filimonov-plan2.jpg', alt: 'Планировка 2 этажа' }
], ],
file: '/projects/filimonov.pdf', file: '/projects/filimonov.pdf',
}, },
@ -48,8 +47,7 @@ const projects = [
description: 'Дом 12х8м, общая площадь 89,6 кв.м., 2 спальни, 1 санузел', description: 'Дом 12х8м, общая площадь 89,6 кв.м., 2 спальни, 1 санузел',
images: [ images: [
{ type: 'facade', src: '/images/moronchov.png', alt: 'Фасад дома Моронцов' }, { type: 'facade', src: '/images/moronchov.png', alt: 'Фасад дома Моронцов' },
{ type: 'plan', src: '/projects/moronchov-plan1.jpg', alt: 'Планировка 1 этажа' }, { type: 'plan', src: '/images/3333.jpg', alt: 'Планировка дома' }
{ type: 'plan', src: '/projects/moronchov-plan2.jpg', alt: 'Планировка 2 этажа' }
], ],
file: '/projects/moronchov.pdf', file: '/projects/moronchov.pdf',
}, },
@ -59,8 +57,8 @@ const projects = [
description: 'Дом 15х12м, общая площадь 156,8 кв.м., 4 спальни, 2 санузла', description: 'Дом 15х12м, общая площадь 156,8 кв.м., 4 спальни, 2 санузла',
images: [ images: [
{ type: 'facade', src: '/images/rancho.png', alt: 'Фасад дома Ранчо' }, { type: 'facade', src: '/images/rancho.png', alt: 'Фасад дома Ранчо' },
{ type: 'plan', src: '/projects/rancho-plan1.jpg', alt: 'Планировка 1 этажа' }, { type: 'plan', src: '/images/111.jpg', alt: 'Планировка 1 этажа' },
{ type: 'plan', src: '/projects/rancho-plan2.jpg', alt: 'Планировка 2 этажа' } { type: 'plan', src: '/images/222.jpg', alt: 'Планировка 2 этажа' }
], ],
file: '/projects/rancho.pdf', file: '/projects/rancho.pdf',
}, },
@ -70,8 +68,7 @@ const projects = [
description: 'Дом 13х9м, общая площадь 118,2 кв.м., 3 спальни, 1 санузел', description: 'Дом 13х9м, общая площадь 118,2 кв.м., 3 спальни, 1 санузел',
images: [ images: [
{ type: 'facade', src: '/images/zori.png', alt: 'Фасад дома Тихие Зори' }, { type: 'facade', src: '/images/zori.png', alt: 'Фасад дома Тихие Зори' },
{ type: 'plan', src: '/projects/zori-plan1.jpg', alt: 'Планировка 1 этажа' }, { type: 'plan', src: '/images/122.jpg', alt: 'Планировка дома' }
{ type: 'plan', src: '/projects/zori-plan2.jpg', alt: 'Планировка 2 этажа' }
], ],
file: '/projects/zori.pdf', file: '/projects/zori.pdf',
}, },
@ -81,8 +78,7 @@ const projects = [
description: 'Дом 16х10м, общая площадь 168,4 кв.м., 4 спальни, 3 санузла', description: 'Дом 16х10м, общая площадь 168,4 кв.м., 4 спальни, 3 санузла',
images: [ images: [
{ type: 'facade', src: '/images/gnezdo.png', alt: 'Фасад дома Уютное гнездышко' }, { type: 'facade', src: '/images/gnezdo.png', alt: 'Фасад дома Уютное гнездышко' },
{ type: 'plan', src: '/projects/gnezdo-plan1.jpg', alt: 'Планировка 1 этажа' }, { type: 'plan', src: '/images/3333.jpg', alt: 'Планировка дома' }
{ type: 'plan', src: '/projects/gnezdo-plan2.jpg', alt: 'Планировка 2 этажа' }
], ],
file: '/projects/gnezdo.pdf', file: '/projects/gnezdo.pdf',
}, },
@ -92,8 +88,8 @@ const projects = [
description: 'Дом 10х8м, общая площадь 78,6 кв.м., 2 спальни, 1 санузел', description: 'Дом 10х8м, общая площадь 78,6 кв.м., 2 спальни, 1 санузел',
images: [ images: [
{ type: 'facade', src: '/images/aura.png', alt: 'Фасад дома Аура' }, { type: 'facade', src: '/images/aura.png', alt: 'Фасад дома Аура' },
{ type: 'plan', src: '/projects/aura-plan1.jpg', alt: 'Планировка 1 этажа' }, { type: 'plan', src: '/images/444.jpg', alt: 'Планировка 1 этажа' },
{ type: 'plan', src: '/projects/aura-plan2.jpg', alt: 'Планировка 2 этажа' } { type: 'plan', src: '/images/555.jpg', alt: 'Планировка 2 этажа' }
], ],
file: '/projects/aura.pdf', file: '/projects/aura.pdf',
}, },
@ -103,8 +99,7 @@ const projects = [
description: 'Дом 18х12м, общая площадь 198,4 кв.м., 5 спален, 3 санузла', description: 'Дом 18х12м, общая площадь 198,4 кв.м., 5 спален, 3 санузла',
images: [ images: [
{ type: 'facade', src: '/images/nade.png', alt: 'Фасад дома Надежда' }, { type: 'facade', src: '/images/nade.png', alt: 'Фасад дома Надежда' },
{ type: 'plan', src: '/projects/nade-plan1.jpg', alt: 'Планировка 1 этажа' }, { type: 'plan', src: '/images/666.jpg', alt: 'Планировка дома' }
{ type: 'plan', src: '/projects/nade-plan2.jpg', alt: 'Планировка 2 этажа' }
], ],
file: '/projects/nade.pdf', file: '/projects/nade.pdf',
}, },
@ -135,7 +130,7 @@ const ProjectImageSlider = ({ project }: { project: typeof projects[0] }) => {
src={project.images[currentImageIndex].src} src={project.images[currentImageIndex].src}
alt={project.images[currentImageIndex].alt} alt={project.images[currentImageIndex].alt}
fill fill
className="object-cover transition-transform duration-700 group-hover:scale-110" className="object-cover transition-transform duration-500 group-hover:scale-105"
/> />
{/* Навигация по изображениям */} {/* Навигация по изображениям */}
@ -246,7 +241,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
<div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div> <div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div>
</div> </div>
<div className="container mx-auto px-4 relative z-10"> <div className="container mx-auto px-6 relative z-10">
{/* Заголовок секции */} {/* Заголовок секции */}
<FadeInSection as="div" className="text-center mb-16"> <FadeInSection as="div" className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4"> <h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4">
@ -261,7 +256,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
<button <button
onClick={handlePrevious} onClick={handlePrevious}
disabled={currentIndex === 0} disabled={currentIndex === 0}
className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 z-10 bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 rounded-full p-3 hover:bg-white/20 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed group" className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-6 z-10 bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 rounded-full p-3 hover:bg-white/20 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed group"
aria-label="Предыдущий проект" aria-label="Предыдущий проект"
> >
<svg className="w-6 h-6 text-white group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6 text-white group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -273,7 +268,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
<button <button
onClick={handleNext} onClick={handleNext}
disabled={currentIndex >= totalSlides - 1} disabled={currentIndex >= totalSlides - 1}
className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 z-10 bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 rounded-full p-3 hover:bg-white/20 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed group" className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-6 z-10 bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 rounded-full p-3 hover:bg-white/20 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed group"
aria-label="Следующий проект" aria-label="Следующий проект"
> >
<svg className="w-6 h-6 text-white group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-6 h-6 text-white group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -282,7 +277,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
</button> </button>
{/* Контейнер проектов */} {/* Контейнер проектов */}
<div className="overflow-hidden"> <div className="px-8 py-4">
<div <div
className="grid transition-transform duration-300 ease-in-out gap-8" className="grid transition-transform duration-300 ease-in-out gap-8"
style={{ style={{
@ -293,7 +288,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
<FadeInSection <FadeInSection
key={`${project.id}-${currentIndex}`} key={`${project.id}-${currentIndex}`}
as="div" as="div"
className="group relative p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 hover:scale-105 hover:-translate-y-2" className="group relative p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-300 hover:scale-[1.02] hover:-translate-y-1"
delay={0.1 * index} delay={0.1 * index}
> >
{/* Фон */} {/* Фон */}
@ -354,7 +349,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
<FadeInSection as="div" delay={0.6} className="text-center mt-16"> <FadeInSection as="div" delay={0.6} className="text-center mt-16">
<button <button
onClick={onCatalogClick} onClick={onCatalogClick}
className="inline-flex items-center space-x-2 px-8 py-4 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-white/20 backdrop-blur-sm hover:scale-105 transition-transform duration-300 cursor-pointer group" className="inline-flex items-center space-x-2 px-8 py-4 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-white/20 backdrop-blur-sm hover:scale-[1.02] transition-all duration-300 cursor-pointer group"
> >
<span className="text-white font-medium text-lg">Получить полный каталог проектов</span> <span className="text-white font-medium text-lg">Получить полный каталог проектов</span>
<div className="w-2 h-2 bg-green-400 rounded-full group-hover:scale-150 transition-transform duration-300"></div> <div className="w-2 h-2 bg-green-400 rounded-full group-hover:scale-150 transition-transform duration-300"></div>

57
src/components/ReviewsSection.tsx
View File

@ -1,11 +1,9 @@
'use client';
import Image from 'next/image'; import Image from 'next/image';
import { Star } from 'lucide-react'; import { Star } from 'lucide-react';
import FadeInSection from './FadeInSection'; import FadeInSection from './FadeInSection';
type ReviewsSectionProps = {
onExcursionClick?: () => void;
};
const reviews = [ const reviews = [
{ {
id: 1, id: 1,
@ -30,60 +28,75 @@ const reviews = [
}, },
]; ];
const ReviewsSection = ({ onExcursionClick }: ReviewsSectionProps) => { const ReviewsSection = () => {
return ( return (
<section id="reviews" className="py-20 bg-gray-50"> <section id="reviews" className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
<div className="container mx-auto px-4"> {/* Статичный фон */}
<FadeInSection as="h2" className="text-3xl font-bold text-gray-900 mb-12 text-center"> <div className="absolute inset-0 opacity-10">
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
<div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
<div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div>
</div>
<div className="container mx-auto px-4 relative z-10">
{/* Заголовок секции */}
<FadeInSection as="div" className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4">
Отзывы клиентов Отзывы клиентов
</h2>
<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-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{reviews.map((review, index) => ( {reviews.map((review, index) => (
<FadeInSection <FadeInSection
key={review.id} key={review.id}
as="div" as="div"
className="bg-white p-6 rounded-lg shadow-sm" className="group relative p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 hover:scale-105 hover:-translate-y-2"
delay={0.2 * index} delay={0.2 * index}
> >
{/* Фон */}
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div className="relative z-10">
<div className="flex items-center mb-4"> <div className="flex items-center mb-4">
<div className="relative w-12 h-12 rounded-full overflow-hidden mr-4"> <div className="relative w-12 h-12 rounded-full overflow-hidden mr-4 group-hover:scale-110 transition-transform duration-300">
<Image <Image
src={review.image} src={review.image}
alt={review.name} alt={review.name}
fill fill
className="object-cover" className="object-cover"
/> />
{/* Декоративная рамка */}
<div className="absolute inset-0 rounded-full border border-white/20 group-hover:border-white/40 transition-colors duration-300"></div>
</div> </div>
<div> <div>
<h3 className="text-lg font-bold text-gray-900"> <h3 className="text-lg font-bold text-white mb-1 group-hover:text-blue-300 transition-all duration-300">
{review.name} {review.name}
</h3> </h3>
<div className="flex"> <div className="flex">
{[...Array(review.rating)].map((_, i) => ( {[...Array(review.rating)].map((_, i) => (
<Star <Star
key={i} key={i}
className="w-4 h-4 text-yellow-400 fill-current" className="w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
style={{ transitionDelay: `${i * 50}ms` }}
/> />
))} ))}
</div> </div>
</div> </div>
</div> </div>
<p className="text-gray-600">
<p className="text-gray-300 leading-relaxed">
{review.text} {review.text}
</p> </p>
</div>
{/* Декоративный элемент */}
<div className="absolute top-2 right-2 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
</FadeInSection> </FadeInSection>
))} ))}
</div> </div>
<FadeInSection as="div" className="mt-12 text-center" delay={0.8}>
<button
className="bg-white border-2 border-blue-600 text-blue-600 px-8 py-3 rounded-full hover:bg-blue-50 transition-colors"
onClick={onExcursionClick}
>
Записаться на экскурсию
</button>
</FadeInSection>
</div> </div>
</section> </section>
); );

44
src/components/TeamSection.tsx
View File

@ -1,3 +1,5 @@
'use client';
import Image from 'next/image'; import Image from 'next/image';
import FadeInSection from './FadeInSection'; import FadeInSection from './FadeInSection';
@ -30,24 +32,41 @@ const team = [
const TeamSection = () => { const TeamSection = () => {
return ( return (
<section className="py-16 md:py-20 bg-white"> <section className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
<div className="container mx-auto px-4"> {/* Статичный фон */}
<FadeInSection as="h2" className="text-2xl sm:text-3xl font-bold text-gray-900 mb-6 md:mb-12 text-center"> <div className="absolute inset-0 opacity-10">
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
<div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
<div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div>
</div>
<div className="container mx-auto px-4 relative z-10">
{/* Заголовок секции */}
<FadeInSection as="div" className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4">
Наша команда Наша команда
</h2>
<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-base sm:text-lg text-gray-600 text-center mb-8 md:mb-12 max-w-2xl mx-auto" delay={0.2}>
<FadeInSection as="p" className="text-lg text-gray-300 text-center mb-12 max-w-2xl mx-auto" delay={0.2}>
Каждый день работает над тем, чтобы предоставить лучший сервис и сделать наших клиентов счастливыми Каждый день работает над тем, чтобы предоставить лучший сервис и сделать наших клиентов счастливыми
</FadeInSection> </FadeInSection>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8"> {/* Карточки команды */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
{team.map((member, index) => ( {team.map((member, index) => (
<FadeInSection <FadeInSection
key={member.id} key={member.id}
as="div" as="div"
className="text-center bg-gray-50 p-4 rounded-xl hover:shadow-lg transition-shadow" className="group relative p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 hover:scale-105 hover:-translate-y-2"
delay={0.3 + (index * 0.1)} delay={0.3 + (index * 0.1)}
> >
<div className="relative w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 mx-auto mb-4 rounded-full overflow-hidden"> {/* Фон */}
<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 text-center">
<div className="relative w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden group-hover:scale-110 transition-transform duration-300">
<Image <Image
src={member.image} src={member.image}
alt={member.name} alt={member.name}
@ -55,13 +74,20 @@ const TeamSection = () => {
className="object-cover" className="object-cover"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
/> />
{/* Декоративная рамка */}
<div className="absolute inset-0 rounded-full border-2 border-white/20 group-hover:border-white/40 transition-colors duration-300"></div>
</div> </div>
<h3 className="text-lg sm:text-xl font-bold text-gray-900 mb-2">
<h3 className="text-xl font-bold text-white mb-2 group-hover:text-blue-300 transition-all duration-300">
{member.name} {member.name}
</h3> </h3>
<p className="text-sm sm:text-base text-gray-600"> <p className="text-gray-300 leading-relaxed">
{member.position} {member.position}
</p> </p>
</div>
{/* Декоративный элемент */}
<div className="absolute top-2 right-2 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
</FadeInSection> </FadeInSection>
))} ))}
</div> </div>

40
src/components/WhyChooseUsSection.tsx
View File

@ -1,3 +1,5 @@
'use client';
import { Shield, FileText, Clock, Users } from 'lucide-react'; import { Shield, FileText, Clock, Users } from 'lucide-react';
import FadeInSection from './FadeInSection'; import FadeInSection from './FadeInSection';
@ -10,11 +12,11 @@ const features = [
{ {
icon: FileText, icon: FileText,
title: 'Открытые и честные сметы', title: 'Открытые и честные сметы',
description: 'Закрытый договор с фиксацией цены, стоимость не изменится на протяжении всего строительства', description: 'Договор с фиксацией цены, стоимость не изменится на протяжении всего строительства',
}, },
{ {
icon: Clock, icon: Clock,
title: 'Повышенная гарантия до 5 лет', title: 'Гарантия 5 лет',
description: 'Гарантия качества дома', description: 'Гарантия качества дома',
}, },
{ {
@ -26,27 +28,47 @@ const features = [
const WhyChooseUsSection = () => { const WhyChooseUsSection = () => {
return ( return (
<section className="py-20 bg-gray-50"> <section className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
<div className="container mx-auto px-4"> {/* Статичный фон */}
<FadeInSection as="h2" className="text-3xl font-bold text-gray-900 mb-12 text-center"> <div className="absolute inset-0 opacity-10">
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
<div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
<div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div>
</div>
<div className="container mx-auto px-4 relative z-10">
{/* Заголовок секции */}
<FadeInSection as="div" className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4">
Почему выбирают нас? Почему выбирают нас?
</h2>
<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-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{features.map((feature, index) => ( {features.map((feature, index) => (
<FadeInSection <FadeInSection
key={index} key={index}
as="div" as="div"
className="bg-white p-6 rounded-lg shadow-sm" className="group relative p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 hover:scale-105 hover:-translate-y-2"
delay={0.2 * index} delay={0.2 * index}
> >
<feature.icon className="w-12 h-12 text-blue-600 mb-4" /> {/* Фон */}
<h3 className="text-xl font-bold text-gray-900 mb-2"> <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div className="relative z-10">
<feature.icon className="w-12 h-12 text-blue-400 mb-4 group-hover:text-blue-300 group-hover:scale-110 transition-all duration-300" />
<h3 className="text-xl font-bold text-white mb-3 group-hover:text-blue-300 transition-all duration-300">
{feature.title} {feature.title}
</h3> </h3>
<p className="text-gray-600"> <p className="text-gray-300 leading-relaxed">
{feature.description} {feature.description}
</p> </p>
</div>
{/* Декоративный элемент */}
<div className="absolute top-2 right-2 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
</FadeInSection> </FadeInSection>
))} ))}
</div> </div>