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

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

Browse Source
This commit is contained in:
albivkt
2025-06-27 13:40:21 +03:00
parent 6ede021ba8
commit 82f6fce8ec
11 changed files with 387 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/components/ContactSection.tsx
View File

@ -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>
{/* Декоративный элемент */}