Обновлены стили и тексты в секциях о компании, контактах, отзывах и примерах работ. Изменены фоны, шрифты и цвета для улучшения визуального восприятия. Добавлены новые услуги в секцию команды и обновлены модальные окна для улучшения пользовательского опыта.
This commit is contained in:
albivkt
@ -34,9 +34,9 @@ const AboutSection = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="about" className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
|
||||
<section id="about" className="relative py-20 bg-gradient-to-br from-gray-5 via-white to-gray-100 overflow-hidden">
|
||||
{/* Статичный фон */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div>
|
||||
@ -45,7 +45,7 @@ const AboutSection = () => {
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
{/* Заголовок секции */}
|
||||
<FadeInSection as="div" className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4">
|
||||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
О компании Ваш Дом
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
|
||||
@ -58,7 +58,7 @@ const AboutSection = () => {
|
||||
<div className="relative h-[500px] w-full rounded-2xl overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent z-10"></div>
|
||||
<Image
|
||||
src="/images/o_nac.jpg"
|
||||
src="/images/stroy.jpg"
|
||||
alt="О нашей компании"
|
||||
fill
|
||||
className="object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
@ -73,10 +73,10 @@ const AboutSection = () => {
|
||||
<FadeInSection as="div" delay={0.2}>
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-2xl font-bold text-white">
|
||||
<h3 className="text-2xl font-bold text-gray-800">
|
||||
Строим дома вашей мечты
|
||||
</h3>
|
||||
<p className="text-gray-300 leading-relaxed text-lg">
|
||||
<p className="text-gray-600 leading-relaxed text-2xl">
|
||||
Мы - команда профессионалов с более чем 10-летним опытом в строительстве
|
||||
современных домов. Наша миссия - создавать качественное и комфортное
|
||||
жилье для наших клиентов, используя передовые технологии и материалы.
|
||||
@ -87,13 +87,13 @@ const AboutSection = () => {
|
||||
<div className="space-y-4">
|
||||
{features.map((feature, index) => (
|
||||
<FadeInSection key={index} delay={0.3 + index * 0.1}>
|
||||
<div className="flex items-start space-x-4 p-4 rounded-xl bg-white/5 backdrop-blur-sm border border-white/10 hover:bg-white/10 transition-all duration-300 group">
|
||||
<div className="flex items-start space-x-4 p-4 rounded-xl bg-white/80 backdrop-blur-sm border border-gray-200 hover:bg-white/90 hover:shadow-lg transition-all duration-300 group">
|
||||
<div className="text-2xl group-hover:scale-110 transition-transform duration-300">
|
||||
{feature.icon}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-white mb-1">{feature.title}</h4>
|
||||
<p className="text-gray-400 text-sm">{feature.description}</p>
|
||||
<h4 className="font-semibold text-gray-800 mb-1">{feature.title}</h4>
|
||||
<p className="text-gray-600 text-lg">{feature.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</FadeInSection>
|
||||
@ -109,19 +109,19 @@ const AboutSection = () => {
|
||||
{stats.map((stat, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group relative p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 hover:scale-105 hover:-translate-y-2"
|
||||
className="group relative p-6 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500 hover:scale-105 hover:-translate-y-2"
|
||||
>
|
||||
{/* Фон */}
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
|
||||
<div className="relative z-10 text-center">
|
||||
<div className="text-3xl mb-2 group-hover:scale-110 transition-transform duration-300">
|
||||
{stat.icon}
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-white mb-2 group-hover:text-blue-300 transition-all duration-300 drop-shadow-lg">
|
||||
<div className="text-3xl font-bold text-gray-800 mb-2 group-hover:text-blue-600 transition-all duration-300 drop-shadow-lg">
|
||||
{stat.number}
|
||||
</div>
|
||||
<div className="text-gray-300 text-sm font-medium">
|
||||
<div className="text-gray-600 text-sm font-medium">
|
||||
{stat.label}
|
||||
</div>
|
||||
</div>
|
||||
@ -137,9 +137,9 @@ const AboutSection = () => {
|
||||
<FadeInSection as="div" delay={0.6} className="text-center mt-16">
|
||||
<button
|
||||
onClick={() => setIsContactModalOpen(true)}
|
||||
className="inline-flex items-center space-x-2 px-6 py-3 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-white/20 backdrop-blur-sm hover:scale-105 transition-transform duration-300 cursor-pointer"
|
||||
className="inline-flex items-center space-x-2 px-6 py-3 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-blue-300 backdrop-blur-sm hover:scale-105 transition-transform duration-300 cursor-pointer hover:from-blue-500/30 hover:to-purple-500/30"
|
||||
>
|
||||
<span className="text-white font-medium">Готовы начать строительство?</span>
|
||||
<span className="text-gray-800 font-medium">Готовы начать строительство?</span>
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full"></div>
|
||||
</button>
|
||||
</FadeInSection>
|
||||
|
||||
@ -68,118 +68,95 @@ const CallbackModal = ({ isOpen, onClose }: CallbackModalProps) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-gray-900/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||
<div className="relative max-w-md w-full">
|
||||
{/* Декоративные фоновые элементы */}
|
||||
<div className="absolute -top-8 -left-8 w-32 h-32 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full blur-2xl opacity-70"></div>
|
||||
<div className="absolute -bottom-8 -right-8 w-24 h-24 bg-gradient-to-br from-purple-500/30 to-blue-500/30 rounded-full blur-2xl opacity-70"></div>
|
||||
|
||||
{/* Основной контейнер модального окна */}
|
||||
<div className="relative bg-gradient-to-br from-gray-900/95 via-gray-800/95 to-gray-900/95 backdrop-blur-md border border-white/20 rounded-2xl p-8 shadow-2xl">
|
||||
<div className="relative bg-white/95 backdrop-blur-md border border-gray-200 rounded-2xl p-8 shadow-2xl">
|
||||
{/* Кнопка закрытия */}
|
||||
<button
|
||||
onClick={closeModal}
|
||||
className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors duration-300 hover:bg-white/10 rounded-full p-2 group"
|
||||
className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors duration-300 hover:bg-gray-100 rounded-full p-2 group"
|
||||
>
|
||||
<X className="w-5 h-5 group-hover:scale-110 transition-transform duration-300" />
|
||||
</button>
|
||||
|
||||
{/* Заголовок */}
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-2">
|
||||
<h2 className="text-3xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-2">
|
||||
Заказать звонок
|
||||
</h2>
|
||||
<div className="w-16 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
|
||||
</div>
|
||||
|
||||
{!success ? (
|
||||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||
{/* Поле имени */}
|
||||
<div className="relative group">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ваше имя"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
className="w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-blue-500/50 focus:bg-white/20 transition-all duration-300 group-hover:border-white/30"
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
|
||||
required
|
||||
/>
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
||||
</div>
|
||||
|
||||
{/* Поле телефона */}
|
||||
<div className="relative group">
|
||||
|
||||
<div>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="Ваш телефон"
|
||||
value={phone}
|
||||
onChange={e => {
|
||||
onChange={(e) => {
|
||||
const val = e.target.value.replace(/\D/g, '').slice(0, 11);
|
||||
setPhone(val);
|
||||
}}
|
||||
className="w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-blue-500/50 focus:bg-white/20 transition-all duration-300 group-hover:border-white/30"
|
||||
className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
|
||||
required
|
||||
/>
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
||||
</div>
|
||||
|
||||
{/* Поле сообщения */}
|
||||
<div className="relative group">
|
||||
|
||||
<div>
|
||||
<textarea
|
||||
placeholder="Ваше сообщение (необязательно)"
|
||||
placeholder="Сообщение (необязательно)"
|
||||
rows={3}
|
||||
value={message}
|
||||
onChange={e => setMessage(e.target.value)}
|
||||
className="w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-blue-500/50 focus:bg-white/20 transition-all duration-300 group-hover:border-white/30 resize-none"
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
className="w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300 resize-none"
|
||||
/>
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
|
||||
</div>
|
||||
|
||||
{/* Сообщение об ошибке */}
|
||||
{error && (
|
||||
<div className="relative p-4 rounded-xl bg-gradient-to-r from-red-500/20 to-red-600/20 border border-red-500/30 backdrop-blur-sm">
|
||||
<div className="flex items-center">
|
||||
<AlertCircle className="w-5 h-5 text-red-400 mr-3 shrink-0" />
|
||||
<span className="text-red-200 text-sm leading-relaxed">{error}</span>
|
||||
</div>
|
||||
<div className="bg-red-100 border border-red-300 text-red-700 text-center py-3 px-4 rounded-xl flex items-center justify-center backdrop-blur-sm">
|
||||
<AlertCircle className="w-5 h-5 mr-2 shrink-0" />
|
||||
<span className="block w-full break-words">{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Кнопка отправки */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="relative w-full group overflow-hidden rounded-xl bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-white/20 backdrop-blur-sm hover:scale-105 transition-all duration-300 disabled:opacity-60 disabled:hover:scale-100"
|
||||
className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-3 rounded-xl hover:from-blue-600 hover:to-purple-600 transition-all duration-300 font-semibold disabled:opacity-60 hover:scale-105 hover:shadow-lg"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/30 to-purple-500/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
<span className="relative block py-3 px-6 text-white font-semibold">
|
||||
{loading ? 'Отправка...' : 'Отправить'}
|
||||
</span>
|
||||
{loading ? 'Отправка...' : 'Заказать звонок'}
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<div className="text-center py-8 space-y-6">
|
||||
{/* Иконка успеха */}
|
||||
<div className="relative mx-auto w-20 h-20 rounded-full bg-gradient-to-br from-green-500/20 to-emerald-500/20 border border-green-500/30 backdrop-blur-sm flex items-center justify-center group">
|
||||
<div className="absolute inset-0 rounded-full bg-gradient-to-br from-green-500/30 to-emerald-500/30 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<CheckCircle className="w-10 h-10 text-green-400 relative z-10" />
|
||||
<div className="flex flex-col items-center justify-center py-8 animate-fadeIn">
|
||||
<div className="bg-green-100 border border-green-300 rounded-2xl p-6 mb-6 flex items-center shadow-lg w-full">
|
||||
<CheckCircle className="w-8 h-8 text-green-600 mr-3" />
|
||||
<span className="text-green-700 text-lg font-semibold leading-snug text-left">
|
||||
Спасибо! Ваш запрос успешно отправлен.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Сообщение об успехе */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-xl font-bold text-white">
|
||||
Спасибо за заявку!
|
||||
</h3>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
Ваши данные успешно отправлены. Мы свяжемся с вами в ближайшее время.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Кнопка закрытия */}
|
||||
<button
|
||||
onClick={closeModal}
|
||||
className="relative group overflow-hidden rounded-xl bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-white/20 backdrop-blur-sm hover:scale-105 transition-all duration-300 px-8 py-3"
|
||||
className="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-8 py-3 rounded-full hover:from-blue-600 hover:to-purple-600 transition-all duration-300 font-semibold shadow-md hover:scale-105"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/30 to-purple-500/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
<span className="relative text-white font-medium">Закрыть</span>
|
||||
Закрыть
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -66,10 +66,10 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/80 backdrop-blur-sm">
|
||||
<div className="relative bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 rounded-2xl shadow-2xl w-full max-w-lg mx-4 animate-fadeIn border border-white/20 overflow-hidden">
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div className="relative bg-white/95 backdrop-blur-md rounded-2xl shadow-2xl w-full max-w-lg mx-4 animate-fadeIn border border-gray-200 overflow-hidden">
|
||||
{/* Декоративные фоновые элементы */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-1/4 left-1/4 w-32 h-32 bg-blue-500 rounded-full blur-2xl"></div>
|
||||
<div className="absolute bottom-1/4 right-1/4 w-28 h-28 bg-purple-500 rounded-full blur-2xl"></div>
|
||||
<div className="absolute top-1/2 left-1/2 w-24 h-24 bg-cyan-500 rounded-full blur-2xl opacity-20"></div>
|
||||
@ -77,13 +77,13 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
|
||||
|
||||
<button
|
||||
onClick={closeModal}
|
||||
className="absolute top-4 right-4 text-gray-400 hover:text-white z-20 p-2 rounded-full hover:bg-white/10 transition-all duration-300"
|
||||
className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 z-20 p-2 rounded-full hover:bg-gray-100 transition-all duration-300"
|
||||
aria-label="Закрыть"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
|
||||
<div className="relative z-10 p-8 md:p-10 flex flex-col items-center">
|
||||
<div className="relative z-10 p-8">
|
||||
<div className="w-full flex justify-center mb-6">
|
||||
<div className="relative group">
|
||||
<Image
|
||||
@ -99,10 +99,10 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-center mb-2 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-center mb-2 bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent">
|
||||
Укажите контакты
|
||||
</h2>
|
||||
<p className="text-gray-300 text-center mb-8">И мы отправим каталог проектов на WhatsApp</p>
|
||||
<p className="text-gray-600 text-center mb-8">И мы отправим каталог проектов на WhatsApp</p>
|
||||
|
||||
{!success ? (
|
||||
<form onSubmit={handleSubmit} className="w-full flex flex-col gap-4">
|
||||
@ -114,14 +114,14 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
|
||||
const val = e.target.value.replace(/\D/g, '').slice(0, 11);
|
||||
setPhone(val);
|
||||
}}
|
||||
className="w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 text-lg text-white placeholder-gray-400 hover:bg-white/15 transition-all duration-300"
|
||||
className="w-full px-4 py-3 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 text-lg text-gray-800 placeholder-gray-500 hover:border-gray-300 transition-all duration-300"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Имя"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
className="w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 text-lg text-white placeholder-gray-400 hover:bg-white/15 transition-all duration-300"
|
||||
className="w-full px-4 py-3 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 text-lg text-gray-800 placeholder-gray-500 hover:border-gray-300 transition-all duration-300"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
@ -130,8 +130,9 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
|
||||
>
|
||||
{loading ? 'Отправка...' : 'Хочу проект'}
|
||||
</button>
|
||||
|
||||
{error && (
|
||||
<div className="bg-gradient-to-r from-red-500/20 to-red-600/20 backdrop-blur-sm border border-red-500/30 text-red-300 text-center py-3 px-4 rounded-lg flex items-center justify-center min-h-[48px] md:min-h-[40px] md:text-base text-sm whitespace-pre-line mt-2">
|
||||
<div className="bg-red-100 border border-red-300 text-red-700 text-center py-3 px-4 rounded-lg flex items-center justify-center min-h-[48px] md:min-h-[40px] md:text-base text-sm whitespace-pre-line mt-2">
|
||||
<AlertCircle className="w-5 h-5 mr-2 shrink-0" />
|
||||
<span className="block w-full break-words">{error}</span>
|
||||
</div>
|
||||
@ -139,9 +140,9 @@ const CatalogRequestModal = ({ isOpen, onClose }: CatalogRequestModalProps) => {
|
||||
</form>
|
||||
) : (
|
||||
<div className="w-full flex flex-col items-center animate-fadeIn">
|
||||
<div className="bg-gradient-to-r from-green-500/20 to-green-600/20 backdrop-blur-sm border border-green-500/30 rounded-2xl p-6 mb-8 flex items-center shadow-lg w-full">
|
||||
<CheckCircle className="w-10 h-10 text-green-400 mr-4 flex-shrink-0" />
|
||||
<span className="text-green-300 text-lg md:text-xl font-semibold leading-snug text-left">
|
||||
<div className="bg-green-100 border border-green-300 rounded-2xl p-6 mb-8 flex items-center shadow-lg w-full">
|
||||
<CheckCircle className="w-10 h-10 text-green-600 mr-4 flex-shrink-0" />
|
||||
<span className="text-green-700 text-lg md:text-xl font-semibold leading-snug text-left">
|
||||
Спасибо! Данные успешно отправлены.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -10,13 +10,16 @@ interface ContactModalProps {
|
||||
const ContactModal = ({ isOpen, onClose }: ContactModalProps) => {
|
||||
const [formData, setFormData] = useState({
|
||||
phone: '',
|
||||
name: ''
|
||||
name: '',
|
||||
message: ''
|
||||
});
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [errors, setErrors] = useState({
|
||||
phone: '',
|
||||
name: ''
|
||||
});
|
||||
const [success, setSuccess] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const validatePhone = (phone: string) => {
|
||||
const phoneRegex = /^[78]\d{10}$/;
|
||||
@ -91,15 +94,18 @@ const ContactModal = ({ isOpen, onClose }: ContactModalProps) => {
|
||||
type: 'contact',
|
||||
name: formData.name,
|
||||
phone: formData.phone,
|
||||
message: formData.message
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setFormData({ phone: '', name: '' });
|
||||
setFormData({ phone: '', name: '', message: '' });
|
||||
setSuccess('Сообщение успешно отправлено!');
|
||||
onClose();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Ошибка отправки:', error);
|
||||
setError('Произошла ошибка при отправке сообщения. Пожалуйста, попробуйте позже.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
@ -108,83 +114,98 @@ const ContactModal = ({ isOpen, onClose }: ContactModalProps) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||
<div className="relative w-full max-w-md">
|
||||
{/* Фоновые декоративные элементы */}
|
||||
<div className="absolute -top-4 -left-4 w-24 h-24 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full blur-xl"></div>
|
||||
<div className="absolute -bottom-4 -right-4 w-32 h-32 bg-gradient-to-br from-purple-500/30 to-blue-500/30 rounded-full blur-xl"></div>
|
||||
|
||||
{/* Основной контейнер */}
|
||||
<div className="relative bg-gradient-to-br from-gray-900/95 to-gray-800/95 backdrop-blur-md border border-white/20 rounded-2xl p-8 shadow-2xl">
|
||||
<div className="relative bg-white/95 backdrop-blur-md border border-gray-200 rounded-2xl p-8 shadow-2xl">
|
||||
{/* Кнопка закрытия */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 transition-colors duration-200 text-white"
|
||||
className="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200 text-gray-600"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
{/* Заголовок */}
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-2xl md:text-3xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-2">
|
||||
<h2 className="text-2xl md:text-3xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-2">
|
||||
Укажите свои данные
|
||||
</h2>
|
||||
<p className="text-gray-300 text-sm">
|
||||
<p className="text-gray-600 text-sm">
|
||||
И наш менеджер свяжется с Вами в ближайшее время
|
||||
</p>
|
||||
<div className="w-16 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full mt-4"></div>
|
||||
</div>
|
||||
|
||||
{/* Форма */}
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Поле телефона */}
|
||||
<div>
|
||||
<input
|
||||
type="tel"
|
||||
value={formData.phone}
|
||||
onChange={handlePhoneChange}
|
||||
placeholder="+7 (999) 999-99-99"
|
||||
className="w-full px-4 py-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-blue-400 focus:bg-white/10 transition-all duration-300"
|
||||
/>
|
||||
{errors.phone && (
|
||||
<p className="text-red-400 text-sm mt-2 ml-1">{errors.phone}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Поле имени */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Ваше имя"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||
placeholder="Имя"
|
||||
className="w-full px-4 py-4 bg-white/5 backdrop-blur-sm border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-blue-400 focus:bg-white/10 transition-all duration-300"
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-3 rounded-lg bg-white border border-gray-200 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/20 transition-all duration-300 text-gray-800 placeholder-gray-500"
|
||||
required
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="text-red-400 text-sm mt-2 ml-1">{errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Кнопка отправки */}
|
||||
|
||||
<div>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
placeholder="Ваш телефон"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-3 rounded-lg bg-white border border-gray-200 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/20 transition-all duration-300 text-gray-800 placeholder-gray-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<textarea
|
||||
name="message"
|
||||
placeholder="Ваше сообщение"
|
||||
rows={4}
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-3 rounded-lg bg-white border border-gray-200 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/20 transition-all duration-300 text-gray-800 placeholder-gray-500 resize-none"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 disabled:from-gray-600 disabled:to-gray-700 text-white font-semibold rounded-xl transition-all duration-300 transform hover:scale-105 disabled:scale-100 disabled:cursor-not-allowed shadow-lg"
|
||||
className="w-full py-3 px-6 rounded-lg bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold hover:from-blue-600 hover:to-purple-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 hover:scale-[1.02] hover:shadow-lg"
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
|
||||
<span>Отправка...</span>
|
||||
</div>
|
||||
) : (
|
||||
'Заказать звонок'
|
||||
)}
|
||||
{isLoading ? 'Отправка...' : 'Отправить сообщение'}
|
||||
</button>
|
||||
|
||||
{success && (
|
||||
<div className="bg-green-100 border border-green-300 text-green-700 text-center py-3 px-4 rounded-xl text-sm">
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-100 border border-red-300 text-red-700 text-center py-3 px-4 rounded-xl text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
|
||||
{/* Декоративные элементы */}
|
||||
<div className="absolute top-2 right-12 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50"></div>
|
||||
<div className="absolute bottom-2 left-8 w-1 h-1 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full opacity-60"></div>
|
||||
|
||||
<p className="text-xs text-gray-500 mt-4 text-center">
|
||||
Нажимая кнопку "Отправить сообщение", вы соглашаетесь с{' '}
|
||||
<a href="#" className="underline hover:text-blue-600 transition-colors duration-300">
|
||||
Политикой конфиденциальности
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -52,9 +52,9 @@ const ContactSection = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="contacts" className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
|
||||
<section id="contacts" className="relative py-20 bg-gradient-to-br from-gray-50 via-white to-gray-100 overflow-hidden">
|
||||
{/* Статичный фон */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div>
|
||||
@ -63,70 +63,70 @@ const ContactSection = () => {
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
{/* Заголовок секции */}
|
||||
<FadeInSection as="div" className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4">
|
||||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
Наши контакты
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
|
||||
</FadeInSection>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<div className="grid lg:grid-cols-2 gap-12">
|
||||
{/* Контактная информация */}
|
||||
<FadeInSection
|
||||
as="div"
|
||||
className="group relative p-8 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500"
|
||||
className="group relative p-8 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500"
|
||||
delay={0.2}
|
||||
>
|
||||
{/* Фон */}
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
|
||||
<div className="relative z-10 space-y-8">
|
||||
<div className="flex items-start group/item">
|
||||
<div className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-white/20 mr-4 group-hover/item:scale-110 transition-transform duration-300">
|
||||
<Phone className="w-6 h-6 text-blue-400" />
|
||||
<div className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-200 mr-4 group-hover/item:scale-110 transition-transform duration-300">
|
||||
<Phone className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-white mb-2 group-hover/item:text-blue-300 transition-colors duration-300">
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-2 group-hover/item:text-blue-600 transition-colors duration-300">
|
||||
Телефон
|
||||
</h3>
|
||||
<span className="text-gray-300 text-lg">
|
||||
<span className="text-gray-600 text-lg">
|
||||
будет другой
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start group/item">
|
||||
<div className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-white/20 mr-4 group-hover/item:scale-110 transition-transform duration-300">
|
||||
<Mail className="w-6 h-6 text-blue-400" />
|
||||
<div className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-200 mr-4 group-hover/item:scale-110 transition-transform duration-300">
|
||||
<Mail className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-white mb-2 group-hover/item:text-blue-300 transition-colors duration-300">
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-2 group-hover/item:text-blue-600 transition-colors duration-300">
|
||||
Email
|
||||
</h3>
|
||||
<span className="text-gray-300 text-lg">
|
||||
<span className="text-gray-600 text-lg">
|
||||
Будет
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start group/item">
|
||||
<div className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-white/20 mr-4 group-hover/item:scale-110 transition-transform duration-300">
|
||||
<MapPin className="w-6 h-6 text-blue-400" />
|
||||
<div className="p-3 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-200 mr-4 group-hover/item:scale-110 transition-transform duration-300">
|
||||
<MapPin className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-white mb-2 group-hover/item:text-blue-300 transition-colors duration-300">
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-2 group-hover/item:text-blue-600 transition-colors duration-300">
|
||||
Адрес
|
||||
</h3>
|
||||
<p className="text-gray-300 text-lg leading-relaxed">
|
||||
<p className="text-gray-600 text-lg leading-relaxed">
|
||||
г. Чебоксары, ул. Калинина, 107
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 border-t border-white/10">
|
||||
<h3 className="text-xl font-bold text-white mb-4">
|
||||
<div className="pt-6 border-t border-gray-200">
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-4">
|
||||
Реквизиты
|
||||
</h3>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
ИП Фомин Александр Вениаминович<br />
|
||||
ИНН 213012845835
|
||||
</p>
|
||||
@ -140,72 +140,84 @@ const ContactSection = () => {
|
||||
{/* Форма обратной связи */}
|
||||
<FadeInSection
|
||||
as="div"
|
||||
className="group relative p-8 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500"
|
||||
className="group relative p-8 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500"
|
||||
delay={0.4}
|
||||
>
|
||||
{/* Фон */}
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-2xl font-bold text-white mb-6 group-hover:text-blue-300 transition-colors duration-300">
|
||||
<h3 className="text-2xl font-bold text-gray-800 mb-6 group-hover:text-blue-600 transition-colors duration-300">
|
||||
Отправить сообщение
|
||||
</h3>
|
||||
{!success ? (
|
||||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ваше имя"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="Ваш телефон"
|
||||
value={phone}
|
||||
onChange={e => {
|
||||
const val = e.target.value.replace(/\D/g, '').slice(0, 11);
|
||||
setPhone(val);
|
||||
}}
|
||||
className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<textarea
|
||||
placeholder="Ваше сообщение"
|
||||
rows={4}
|
||||
value={message}
|
||||
onChange={e => setMessage(e.target.value)}
|
||||
className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent backdrop-blur-sm transition-all duration-300 resize-none"
|
||||
/>
|
||||
</div>
|
||||
{error && (
|
||||
<div className="bg-red-500/20 border border-red-500/30 text-red-300 text-center py-3 px-4 rounded-xl flex items-center justify-center backdrop-blur-sm">
|
||||
<AlertCircle className="w-5 h-5 mr-2 shrink-0" />
|
||||
<span className="block w-full break-words">{error}</span>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-3 rounded-xl hover:from-blue-600 hover:to-purple-600 transition-all duration-300 font-semibold disabled:opacity-60 hover:scale-105 hover:shadow-lg"
|
||||
>
|
||||
{loading ? 'Отправка...' : 'Отправить'}
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-8 animate-fadeIn">
|
||||
<div className="bg-green-500/20 border border-green-500/30 rounded-2xl p-6 mb-6 flex items-center backdrop-blur-sm w-full">
|
||||
<CheckCircle className="w-8 h-8 text-green-400 mr-3" />
|
||||
<span className="text-green-300 text-lg font-semibold leading-snug text-left">
|
||||
Спасибо! Ваше сообщение успешно отправлено.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Ваше имя"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-lg bg-white/50 border border-gray-200 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/20 transition-all duration-300 text-gray-800 placeholder-gray-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
placeholder="Ваш телефон"
|
||||
value={phone}
|
||||
onChange={e => {
|
||||
const val = e.target.value.replace(/\D/g, '').slice(0, 11);
|
||||
setPhone(val);
|
||||
}}
|
||||
className="w-full px-4 py-3 rounded-lg bg-white/50 border border-gray-200 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/20 transition-all duration-300 text-gray-800 placeholder-gray-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<textarea
|
||||
name="message"
|
||||
placeholder="Ваше сообщение"
|
||||
rows={4}
|
||||
value={message}
|
||||
onChange={e => setMessage(e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-lg bg-white/50 border border-gray-200 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/20 transition-all duration-300 text-gray-800 placeholder-gray-500 resize-none"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full py-3 px-6 rounded-lg bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold hover:from-blue-600 hover:to-purple-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 hover:scale-[1.02] hover:shadow-lg"
|
||||
>
|
||||
{loading ? 'Отправка...' : 'Отправить сообщение'}
|
||||
</button>
|
||||
|
||||
{success && (
|
||||
<div className="bg-green-100 border border-green-300 text-green-700 text-center py-3 px-4 rounded-xl text-sm">
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-100 border border-red-300 text-red-700 text-center py-3 px-4 rounded-xl text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
|
||||
<p className="text-xs text-gray-500 mt-4 text-center">
|
||||
Нажимая кнопку "Отправить сообщение", вы соглашаетесь с{' '}
|
||||
<a href="#" className="underline hover:text-blue-600 transition-colors duration-300">
|
||||
Политикой конфиденциальности
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Декоративный элемент */}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { Menu } from 'lucide-react';
|
||||
import { Menu, Phone } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import CallbackModal from './CallbackModal';
|
||||
import MobileMenu from './MobileMenu';
|
||||
@ -60,9 +60,10 @@ const Header = () => {
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
className="bg-white text-gray-900 px-6 py-2.5 rounded-lg hover:bg-gray-100 transition-colors hover:shadow-lg text-sm font-semibold flex-shrink-0"
|
||||
className="bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-white/20 backdrop-blur-sm text-white px-8 py-3.5 rounded-lg hover:from-blue-500/30 hover:to-purple-500/30 hover:border-white/40 transition-all duration-300 hover:scale-105 text-base font-semibold flex-shrink-0 flex items-center space-x-2 group"
|
||||
>
|
||||
Оставить заявку
|
||||
<Phone className="w-5 h-5 group-hover:animate-bounce" />
|
||||
<span>Оставить заявку</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
import Image from 'next/image';
|
||||
import { useState, useEffect } from 'react';
|
||||
import FadeInSection from './FadeInSection';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
type ProjectsSectionProps = {
|
||||
onCatalogClick?: () => void;
|
||||
@ -121,16 +122,28 @@ const ProjectImageSlider = ({ project }: { project: typeof projects[0] }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const currentImage = project.images[currentImageIndex];
|
||||
const isFloorPlan = currentImage.type === 'floorplan';
|
||||
|
||||
return (
|
||||
<div className="relative h-80 rounded-xl overflow-hidden group">
|
||||
{/* Фон для планировок */}
|
||||
{isFloorPlan && (
|
||||
<div className="absolute inset-0 bg-white z-0"></div>
|
||||
)}
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent z-10"></div>
|
||||
|
||||
{/* Текущее изображение */}
|
||||
<Image
|
||||
src={project.images[currentImageIndex].src}
|
||||
alt={project.images[currentImageIndex].alt}
|
||||
src={currentImage.src}
|
||||
alt={currentImage.alt}
|
||||
fill
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
className={`transition-transform duration-500 group-hover:scale-105 ${
|
||||
isFloorPlan
|
||||
? 'object-contain p-4'
|
||||
: 'object-cover'
|
||||
}`}
|
||||
/>
|
||||
|
||||
{/* Навигация по изображениям */}
|
||||
@ -175,7 +188,7 @@ const ProjectImageSlider = ({ project }: { project: typeof projects[0] }) => {
|
||||
{/* Тип изображения */}
|
||||
<div className="absolute top-3 left-3 z-20">
|
||||
<span className="px-2 py-1 bg-white/20 backdrop-blur-sm rounded-full text-white text-xs font-medium">
|
||||
{project.images[currentImageIndex].type === 'facade' ? '🏠 Фасад' : '📐 Планировка'}
|
||||
{currentImage.type === 'facade' ? '🏠 Фасад' : '📐 Планировка'}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
@ -233,9 +246,9 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
|
||||
const visibleProjects = projects.slice(startIndex, startIndex + itemsPerView);
|
||||
|
||||
return (
|
||||
<section id="projects" className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
|
||||
<section id="projects" className="relative py-20 bg-gradient-to-br from-gray-50 via-white to-gray-100 overflow-hidden">
|
||||
{/* Статичный фон */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div>
|
||||
@ -244,7 +257,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
|
||||
<div className="container mx-auto px-6 relative z-10">
|
||||
{/* Заголовок секции */}
|
||||
<FadeInSection as="div" className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4">
|
||||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
Каталог проектов
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
|
||||
@ -252,28 +265,21 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
|
||||
|
||||
{/* Карусель */}
|
||||
<div className="relative">
|
||||
{/* Стрелка влево */}
|
||||
{/* Навигационные кнопки */}
|
||||
<button
|
||||
onClick={handlePrevious}
|
||||
disabled={currentIndex === 0}
|
||||
className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-6 z-10 bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 rounded-full p-3 hover:bg-white/20 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed group"
|
||||
aria-label="Предыдущий проект"
|
||||
className="absolute left-4 top-1/2 -translate-y-1/2 z-20 w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm border border-gray-200 hover:bg-white hover:shadow-lg transition-all duration-300 flex items-center justify-center group"
|
||||
aria-label="Предыдущий слайд"
|
||||
>
|
||||
<svg className="w-6 h-6 text-white group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
<ChevronLeft className="w-6 h-6 text-gray-800 group-hover:text-blue-600" />
|
||||
</button>
|
||||
|
||||
{/* Стрелка вправо */}
|
||||
|
||||
<button
|
||||
onClick={handleNext}
|
||||
disabled={currentIndex >= totalSlides - 1}
|
||||
className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-6 z-10 bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 rounded-full p-3 hover:bg-white/20 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed group"
|
||||
aria-label="Следующий проект"
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 z-20 w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm border border-gray-200 hover:bg-white hover:shadow-lg transition-all duration-300 flex items-center justify-center group"
|
||||
aria-label="Следующий слайд"
|
||||
>
|
||||
<svg className="w-6 h-6 text-white group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
<ChevronRight className="w-6 h-6 text-gray-800 group-hover:text-blue-600" />
|
||||
</button>
|
||||
|
||||
{/* Контейнер проектов */}
|
||||
@ -288,11 +294,11 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
|
||||
<FadeInSection
|
||||
key={`${project.id}-${currentIndex}`}
|
||||
as="div"
|
||||
className="group relative p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-300 hover:scale-[1.02] hover:-translate-y-1"
|
||||
className="group relative p-6 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-300 hover:scale-[1.02] hover:-translate-y-1"
|
||||
delay={0.1 * index}
|
||||
>
|
||||
{/* Фон */}
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
|
||||
<div className="relative z-10">
|
||||
{/* Слайдер изображений */}
|
||||
@ -300,15 +306,15 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
|
||||
|
||||
{/* Информация о проекте */}
|
||||
<div className="mt-6">
|
||||
<h3 className="text-2xl font-bold text-white mb-3 group-hover:text-blue-300 transition-all duration-300">
|
||||
<h3 className="text-2xl font-bold text-gray-800 mb-3 group-hover:text-blue-600 transition-all duration-300">
|
||||
{project.title}
|
||||
</h3>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
<p className="text-gray-600 leading-relaxed mb-4">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
{/* Дополнительная информация */}
|
||||
<div className="flex items-center justify-between text-sm text-gray-400">
|
||||
<div className="flex items-center justify-between text-sm text-gray-500">
|
||||
<span className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full"></div>
|
||||
<span>Доступен для строительства</span>
|
||||
@ -330,7 +336,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
|
||||
</div>
|
||||
|
||||
{/* Индикаторы */}
|
||||
<div className="flex justify-center mt-12 space-x-3">
|
||||
<div className="flex justify-center mt-8 space-x-2">
|
||||
{Array.from({ length: totalSlides }, (_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
@ -338,7 +344,7 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
|
||||
className={`w-3 h-3 rounded-full transition-all duration-300 ${
|
||||
index === currentIndex
|
||||
? 'bg-gradient-to-r from-blue-500 to-purple-500 scale-125'
|
||||
: 'bg-white/30 hover:bg-white/50'
|
||||
: 'bg-gray-300 hover:bg-gray-400'
|
||||
}`}
|
||||
aria-label={`Перейти к слайду ${index + 1}`}
|
||||
/>
|
||||
@ -349,9 +355,9 @@ const ProjectsSection = ({ onCatalogClick }: ProjectsSectionProps) => {
|
||||
<FadeInSection as="div" delay={0.6} className="text-center mt-16">
|
||||
<button
|
||||
onClick={onCatalogClick}
|
||||
className="inline-flex items-center space-x-2 px-8 py-4 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-white/20 backdrop-blur-sm hover:scale-[1.02] transition-all duration-300 cursor-pointer group"
|
||||
className="inline-flex items-center space-x-2 px-8 py-4 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-blue-300 backdrop-blur-sm hover:scale-[1.02] transition-all duration-300 cursor-pointer group hover:from-blue-500/30 hover:to-purple-500/30"
|
||||
>
|
||||
<span className="text-white font-medium text-lg">Получить полный каталог проектов</span>
|
||||
<span className="text-gray-800 font-medium text-lg">Получить полный каталог проектов</span>
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full group-hover:scale-150 transition-transform duration-300"></div>
|
||||
</button>
|
||||
</FadeInSection>
|
||||
|
||||
@ -30,9 +30,9 @@ const reviews = [
|
||||
|
||||
const ReviewsSection = () => {
|
||||
return (
|
||||
<section id="reviews" className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
|
||||
<section id="reviews" className="relative py-20 bg-gradient-to-br from-gray-5 via-white to-gray-100 overflow-hidden">
|
||||
{/* Статичный фон */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div>
|
||||
@ -41,7 +41,7 @@ const ReviewsSection = () => {
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
{/* Заголовок секции */}
|
||||
<FadeInSection as="div" className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4">
|
||||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
Отзывы клиентов
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
|
||||
@ -53,11 +53,11 @@ const ReviewsSection = () => {
|
||||
<FadeInSection
|
||||
key={review.id}
|
||||
as="div"
|
||||
className="group relative p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 hover:scale-105 hover:-translate-y-2"
|
||||
className="group relative p-6 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500 hover:scale-105 hover:-translate-y-2"
|
||||
delay={0.2 * index}
|
||||
>
|
||||
{/* Фон */}
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center mb-4">
|
||||
@ -69,27 +69,33 @@ const ReviewsSection = () => {
|
||||
className="object-cover"
|
||||
/>
|
||||
{/* Декоративная рамка */}
|
||||
<div className="absolute inset-0 rounded-full border border-white/20 group-hover:border-white/40 transition-colors duration-300"></div>
|
||||
<div className="absolute inset-0 rounded-full border border-gray-200 group-hover:border-blue-300 transition-colors duration-300"></div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-white mb-1 group-hover:text-blue-300 transition-all duration-300">
|
||||
<h3 className="font-bold text-gray-800 group-hover:text-blue-600 transition-colors duration-300">
|
||||
{review.name}
|
||||
</h3>
|
||||
<div className="flex">
|
||||
{[...Array(review.rating)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className="w-4 h-4 text-yellow-400 fill-current group-hover:scale-110 transition-transform duration-300"
|
||||
style={{ transitionDelay: `${i * 50}ms` }}
|
||||
/>
|
||||
<p className="text-sm text-gray-500">{review.position}</p>
|
||||
<div className="flex mt-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<span key={i} className="text-yellow-400 text-sm">⭐</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
{review.text}
|
||||
</p>
|
||||
<blockquote className="text-gray-600 leading-relaxed italic">
|
||||
"{review.text}"
|
||||
</blockquote>
|
||||
|
||||
<div className="mt-4 pt-4 border-t border-gray-200">
|
||||
<p className="text-sm text-gray-500">
|
||||
<span className="font-medium">Объект:</span> {review.project}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
<span className="font-medium">Дата:</span> {review.date}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Декоративный элемент */}
|
||||
|
||||
@ -4,6 +4,7 @@ import Image from 'next/image';
|
||||
import { useState } from 'react';
|
||||
import FadeInSection from './FadeInSection';
|
||||
import CallbackModal from './CallbackModal';
|
||||
import { Droplets, Zap, Thermometer, Wrench } from 'lucide-react';
|
||||
|
||||
const workExamples = [
|
||||
{
|
||||
@ -56,13 +57,44 @@ const workExamples = [
|
||||
},
|
||||
];
|
||||
|
||||
const additionalServices = [
|
||||
{
|
||||
id: 1,
|
||||
icon: Droplets,
|
||||
title: 'Монтаж водоснабжения',
|
||||
description: 'Проектирование и установка систем водоснабжения с использованием качественных материалов',
|
||||
features: ['Холодное и горячее водоснабжение', 'Установка счетчиков', 'Гарантия на работы']
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: Wrench,
|
||||
title: 'Монтаж канализации',
|
||||
description: 'Полный комплекс работ по устройству канализационных систем',
|
||||
features: ['Внутренняя канализация', 'Наружные сети', 'Септики и очистные сооружения']
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: Zap,
|
||||
title: 'Монтаж электрики',
|
||||
description: 'Электромонтажные работы любой сложности с соблюдением всех норм безопасности',
|
||||
features: ['Внутренняя проводка', 'Электрощиты', 'Освещение и розетки']
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: Thermometer,
|
||||
title: 'Монтаж отопления',
|
||||
description: 'Установка современных систем отопления для комфортного проживания',
|
||||
features: ['Радиаторное отопление', 'Теплые полы', 'Котельное оборудование']
|
||||
},
|
||||
];
|
||||
|
||||
const WorkExamplesSection = () => {
|
||||
const [isCallbackModalOpen, setIsCallbackModalOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<section className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
|
||||
<section className="relative py-20 bg-gradient-to-br from-gray-5 via-white to-gray-100 overflow-hidden">
|
||||
{/* Статичный фон */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div>
|
||||
@ -71,27 +103,27 @@ const WorkExamplesSection = () => {
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
{/* Заголовок секции */}
|
||||
<FadeInSection as="div" className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4">
|
||||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
Примеры наших работ
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
|
||||
</FadeInSection>
|
||||
|
||||
<FadeInSection as="p" className="text-lg text-gray-300 text-center mb-12 max-w-2xl mx-auto" delay={0.2}>
|
||||
<FadeInSection as="p" className="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto" delay={0.2}>
|
||||
Реальные проекты, которые мы успешно реализовали для наших клиентов
|
||||
</FadeInSection>
|
||||
|
||||
{/* Карточки примеров работ */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
|
||||
{workExamples.map((example, index) => (
|
||||
<FadeInSection
|
||||
key={example.id}
|
||||
as="div"
|
||||
className="group relative rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 hover:scale-105 hover:-translate-y-2 overflow-hidden"
|
||||
className="group relative rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500 hover:scale-105 hover:-translate-y-2 overflow-hidden"
|
||||
delay={0.3 + (index * 0.1)}
|
||||
>
|
||||
{/* Фон */}
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
|
||||
<div className="relative z-10">
|
||||
{/* Изображение */}
|
||||
@ -114,10 +146,10 @@ const WorkExamplesSection = () => {
|
||||
|
||||
{/* Контент */}
|
||||
<div className="p-6">
|
||||
<h3 className="text-xl font-bold text-white mb-2 group-hover:text-blue-300 transition-all duration-300">
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-2 group-hover:text-blue-600 transition-all duration-300">
|
||||
{example.title}
|
||||
</h3>
|
||||
<p className="text-gray-300 text-sm mb-4 leading-relaxed">
|
||||
<p className="text-gray-600 text-sm mb-4 leading-relaxed">
|
||||
{example.description}
|
||||
</p>
|
||||
|
||||
@ -125,10 +157,10 @@ const WorkExamplesSection = () => {
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full"></div>
|
||||
<span className="text-gray-400 text-sm">Площадь:</span>
|
||||
<span className="text-white text-sm font-medium">{example.area}</span>
|
||||
<span className="text-gray-500 text-sm">Площадь:</span>
|
||||
<span className="text-gray-800 text-sm font-medium">{example.area}</span>
|
||||
</div>
|
||||
<div className="px-3 py-1 bg-white/10 rounded-full text-green-400 text-xs font-medium">
|
||||
<div className="px-3 py-1 bg-green-100 rounded-full text-green-600 text-xs font-medium">
|
||||
Завершен
|
||||
</div>
|
||||
</div>
|
||||
@ -141,13 +173,63 @@ const WorkExamplesSection = () => {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Дополнительные услуги */}
|
||||
<FadeInSection as="div" className="mb-16" delay={0.8}>
|
||||
<div className="text-center mb-12">
|
||||
<h3 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
Дополнительные услуги
|
||||
</h3>
|
||||
<div className="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{additionalServices.map((service, index) => (
|
||||
<FadeInSection
|
||||
key={service.id}
|
||||
as="div"
|
||||
className="group relative p-6 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500 hover:scale-105 hover:-translate-y-2"
|
||||
delay={0.9 + (index * 0.1)}
|
||||
>
|
||||
{/* Фон */}
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
|
||||
<div className="relative z-10 text-center">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-blue-200 mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<service.icon className="w-8 h-8 text-blue-600 group-hover:text-blue-700" />
|
||||
</div>
|
||||
|
||||
<h4 className="text-lg font-bold text-gray-800 mb-3 group-hover:text-blue-600 transition-colors duration-300">
|
||||
{service.title}
|
||||
</h4>
|
||||
|
||||
<p className="text-gray-600 text-sm mb-4 leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
|
||||
<ul className="space-y-2">
|
||||
{service.features.map((feature, featureIndex) => (
|
||||
<li key={featureIndex} className="flex items-center text-xs text-gray-500">
|
||||
<div className="w-1.5 h-1.5 bg-green-400 rounded-full mr-2"></div>
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Декоративный элемент */}
|
||||
<div className="absolute top-2 right-2 w-2 h-2 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full opacity-50 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</FadeInSection>
|
||||
))}
|
||||
</div>
|
||||
</FadeInSection>
|
||||
|
||||
{/* Призыв к действию */}
|
||||
<FadeInSection as="div" delay={0.8} className="text-center mt-16">
|
||||
<FadeInSection as="div" delay={1.2} className="text-center mt-16">
|
||||
<button
|
||||
onClick={() => setIsCallbackModalOpen(true)}
|
||||
className="inline-flex items-center space-x-2 px-6 py-3 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-white/20 backdrop-blur-sm hover:scale-105 transition-transform duration-300 cursor-pointer hover:from-blue-500/30 hover:to-purple-500/30"
|
||||
className="inline-flex items-center space-x-2 px-6 py-3 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-blue-300 backdrop-blur-sm hover:scale-105 transition-transform duration-300 cursor-pointer hover:from-blue-500/30 hover:to-purple-500/30"
|
||||
>
|
||||
<span className="text-white font-medium">Хотите увидеть свой дом в этой галерее?</span>
|
||||
<span className="text-gray-800 font-medium">Хотите увидеть свой дом в этой галерее?</span>
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
||||
</button>
|
||||
</FadeInSection>
|
||||
|
||||
@ -28,9 +28,9 @@ const features = [
|
||||
|
||||
const WhyChooseUsSection = () => {
|
||||
return (
|
||||
<section className="relative py-20 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 overflow-hidden">
|
||||
<section className="relative py-20 bg-gradient-to-br from-gray-5 via-white to-gray-100 overflow-hidden">
|
||||
{/* Статичный фон */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute inset-0 opacity-30">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-500 rounded-full blur-3xl"></div>
|
||||
<div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500 rounded-full blur-3xl opacity-20"></div>
|
||||
@ -39,30 +39,30 @@ const WhyChooseUsSection = () => {
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
{/* Заголовок секции */}
|
||||
<FadeInSection as="div" className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent mb-4">
|
||||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
Почему выбирают нас?
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-500 mx-auto rounded-full"></div>
|
||||
</FadeInSection>
|
||||
|
||||
{/* Карточки преимуществ */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{features.map((feature, index) => (
|
||||
<FadeInSection
|
||||
key={index}
|
||||
as="div"
|
||||
className="group relative p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 transition-all duration-500 hover:scale-105 hover:-translate-y-2"
|
||||
className="group relative p-6 rounded-2xl bg-white/80 backdrop-blur-md border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-500 hover:scale-105 hover:-translate-y-2"
|
||||
delay={0.2 * index}
|
||||
>
|
||||
{/* Фон */}
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<feature.icon className="w-12 h-12 text-blue-400 mb-4 group-hover:text-blue-300 group-hover:scale-110 transition-all duration-300" />
|
||||
<h3 className="text-xl font-bold text-white mb-3 group-hover:text-blue-300 transition-all duration-300">
|
||||
<feature.icon className="w-12 h-12 text-blue-600 mb-4 group-hover:text-blue-700 group-hover:scale-110 transition-all duration-300" />
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-3 group-hover:text-blue-600 transition-all duration-300">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user