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

30
src/components/AboutSection.tsx
View File

@ -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>