Обновлены заголовки и описания на главной странице, изменены фоны и стили в секциях о компании, контактах и примерах работ для улучшения визуального восприятия. Добавлены новые элементы дизайна и изменены тексты для повышения информативности.
This commit is contained in:
albivkt
@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "YourHouse",
|
||||
description: "Строительство каменных и каркасных домов с фиксацией цены",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
@ -7,7 +7,7 @@ import WhyChooseUsSection from '@/components/WhyChooseUsSection';
|
||||
import WorkExamplesSection from '@/components/TeamSection';
|
||||
import ContactSection from '@/components/ContactSection';
|
||||
import Footer from '@/components/Footer';
|
||||
import Image from 'next/image';
|
||||
|
||||
import HouseCalculatorModal from '@/components/HouseCalculatorModal';
|
||||
import CatalogRequestModal from '@/components/CatalogRequestModal';
|
||||
import ExcursionModal from '@/components/ExcursionModal';
|
||||
@ -82,18 +82,14 @@ export default function Home() {
|
||||
<ExcursionModal isOpen={isExcursionModalOpen} onClose={() => setIsExcursionModalOpen(false)} />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-screen pt-20 pb-16 flex items-center">
|
||||
{/* Background Image */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/images/stanica.png"
|
||||
alt="Строительство домов"
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/60"></div>
|
||||
</div>
|
||||
<section
|
||||
className="relative min-h-screen pt-20 pb-16 flex items-center bg-cover bg-center bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: "url('/images/stanica.png')"
|
||||
}}
|
||||
>
|
||||
{/* Background Overlay */}
|
||||
<div className="absolute inset-0 bg-black/30 z-0"></div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
|
||||
@ -34,12 +34,22 @@ const AboutSection = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<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-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>
|
||||
<section id="about" className="relative py-20 bg-gradient-to-br from-blue-50 via-white to-indigo-50 overflow-hidden">
|
||||
{/* Современный геометрический фон */}
|
||||
<div className="absolute inset-0 opacity-40">
|
||||
{/* Треугольники */}
|
||||
<div className="absolute top-10 left-10 w-32 h-32 bg-blue-500 transform rotate-45 opacity-20"></div>
|
||||
<div className="absolute top-1/3 right-20 w-24 h-24 bg-indigo-600 transform rotate-12 opacity-30"></div>
|
||||
<div className="absolute bottom-20 left-1/4 w-20 h-20 bg-cyan-500 transform -rotate-45 opacity-25"></div>
|
||||
|
||||
{/* Круги с четкими краями */}
|
||||
<div className="absolute top-1/4 right-1/3 w-16 h-16 bg-blue-400 rounded-full opacity-30"></div>
|
||||
<div className="absolute bottom-1/3 right-10 w-12 h-12 bg-indigo-500 rounded-full opacity-40"></div>
|
||||
<div className="absolute top-2/3 left-1/6 w-8 h-8 bg-cyan-400 rounded-full opacity-35"></div>
|
||||
|
||||
{/* Линии */}
|
||||
<div className="absolute top-0 left-1/3 w-1 h-full bg-gradient-to-b from-transparent via-blue-300 to-transparent opacity-20"></div>
|
||||
<div className="absolute top-0 right-1/4 w-1 h-full bg-gradient-to-b from-transparent via-indigo-300 to-transparent opacity-15"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
@ -58,7 +68,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/stroy.jpg"
|
||||
src="/images/o_nac.jpg"
|
||||
alt="О нашей компании"
|
||||
fill
|
||||
className="object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
@ -71,12 +81,12 @@ const AboutSection = () => {
|
||||
|
||||
{/* Текстовый контент */}
|
||||
<FadeInSection as="div" delay={0.2}>
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-6">
|
||||
<div className="h-[500px] flex flex-col justify-center space-y-6">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-2xl font-bold text-gray-800">
|
||||
Строим дома вашей мечты
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed text-2xl">
|
||||
<p className="text-gray-600 leading-relaxed text-xl">
|
||||
Мы - команда профессионалов с более чем 10-летним опытом в строительстве
|
||||
современных домов. Наша миссия - создавать качественное и комфортное
|
||||
жилье для наших клиентов, используя передовые технологии и материалы.
|
||||
@ -84,16 +94,16 @@ const AboutSection = () => {
|
||||
</div>
|
||||
|
||||
{/* Особенности */}
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
{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/80 backdrop-blur-sm border border-gray-200 hover:bg-white/90 hover:shadow-lg transition-all duration-300 group">
|
||||
<div className="text-3xl group-hover:scale-110 transition-transform duration-300">
|
||||
<div className="flex items-start space-x-3 p-3 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 flex-shrink-0">
|
||||
{feature.icon}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-gray-800 mb-2 text-xl">{feature.title}</h4>
|
||||
<p className="text-gray-600 text-xl leading-relaxed">{feature.description}</p>
|
||||
<h4 className="font-bold text-gray-800 mb-1 text-lg">{feature.title}</h4>
|
||||
<p className="text-gray-600 text-base leading-snug">{feature.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</FadeInSection>
|
||||
@ -137,23 +147,19 @@ const AboutSection = () => {
|
||||
<FadeInSection as="div" delay={0.6} className="text-center mt-16">
|
||||
<button
|
||||
onClick={() => setIsContactModalOpen(true)}
|
||||
className="group relative overflow-hidden rounded-2xl hover:scale-105 transition-all duration-500 shadow-2xl hover:shadow-3xl"
|
||||
className="group relative overflow-hidden rounded-2xl hover:scale-105 transition-all duration-500 shadow-2xl hover:shadow-3xl bg-cover bg-center bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: "url('/images/4.1.png')"
|
||||
}}
|
||||
>
|
||||
{/* Фоновое изображение */}
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
src="/images/4.1.png"
|
||||
alt="Строительство дома"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
{/* Легкий оверлей для лучшей читаемости текста */}
|
||||
<div className="absolute inset-0 bg-black/20 rounded-2xl"></div>
|
||||
|
||||
{/* Анимированный блик */}
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
|
||||
|
||||
{/* Контент кнопки */}
|
||||
<div className="relative z-10 px-8 py-6 rounded-2xl backdrop-blur-sm">
|
||||
<div className="relative z-10 px-8 py-6 rounded-2xl">
|
||||
<div className="flex items-center justify-center space-x-4">
|
||||
{/* Иконка дома */}
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-white/20 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
||||
|
||||
@ -52,12 +52,25 @@ const ContactSection = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="contacts" className="relative py-20 bg-gradient-to-br from-gray-50 via-white to-gray-100 overflow-hidden">
|
||||
{/* Статичный фон */}
|
||||
<section id="contacts" className="relative py-20 bg-gradient-to-r from-slate-50 via-white to-blue-50 overflow-hidden">
|
||||
{/* Коммуникационный фон */}
|
||||
<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>
|
||||
{/* Связи и соединения */}
|
||||
<div className="absolute top-16 left-1/4 w-12 h-12 border-2 border-dashed border-blue-400 rounded-full opacity-25"></div>
|
||||
<div className="absolute bottom-24 right-1/4 w-8 h-8 border-2 border-dashed border-indigo-400 rounded-full opacity-30"></div>
|
||||
|
||||
{/* Сигналы */}
|
||||
<div className="absolute top-1/3 left-16 w-6 h-1 bg-blue-400 opacity-35"></div>
|
||||
<div className="absolute top-1/3 left-24 w-4 h-1 bg-blue-300 opacity-30"></div>
|
||||
<div className="absolute top-1/3 left-30 w-2 h-1 bg-blue-200 opacity-25"></div>
|
||||
|
||||
<div className="absolute bottom-1/3 right-16 w-6 h-1 bg-indigo-400 opacity-35"></div>
|
||||
<div className="absolute bottom-1/3 right-24 w-4 h-1 bg-indigo-300 opacity-30"></div>
|
||||
<div className="absolute bottom-1/3 right-30 w-2 h-1 bg-indigo-200 opacity-25"></div>
|
||||
|
||||
{/* Углы карты */}
|
||||
<div className="absolute top-8 right-8 w-16 h-16 border-2 border-blue-300 opacity-20 transform rotate-12"></div>
|
||||
<div className="absolute bottom-8 left-8 w-12 h-12 border-2 border-cyan-300 opacity-25 transform -rotate-12"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
|
||||
@ -46,7 +46,11 @@ const Footer = () => {
|
||||
<div>
|
||||
<h4 className="text-lg font-bold mb-4">Контакты</h4>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li>+7 (900) 123-45-67</li>
|
||||
<li>
|
||||
<a href="tel:+79530132423" className="hover:text-white transition-colors">
|
||||
+7 953 013 24 23
|
||||
</a>
|
||||
</li>
|
||||
<li>info@vashdom.ru</li>
|
||||
<li>
|
||||
г. Чебоксары,<br />
|
||||
|
||||
@ -39,8 +39,8 @@ const Header = () => {
|
||||
<Link href="#projects" className="text-white hover:text-blue-400 transition-colors text-lg font-medium py-2 px-3 rounded-lg hover:bg-white/10">
|
||||
Каталог домов
|
||||
</Link>
|
||||
<Link href="#reviews" className="text-white hover:text-blue-400 transition-colors text-lg font-medium py-2 px-3 rounded-lg hover:bg-white/10">
|
||||
Отзывы
|
||||
<Link href="#additional-services" className="text-white hover:text-blue-400 transition-colors text-lg font-medium py-2 px-3 rounded-lg hover:bg-white/10">
|
||||
Доп услуги
|
||||
</Link>
|
||||
<Link href="#contacts" className="text-white hover:text-blue-400 transition-colors text-lg font-medium py-2 px-3 rounded-lg hover:bg-white/10">
|
||||
Контакты
|
||||
|
||||
@ -70,11 +70,11 @@ const MobileMenu = ({ isOpen, onClose }: MobileMenuProps) => {
|
||||
Каталог домов
|
||||
</Link>
|
||||
<Link
|
||||
href="#reviews"
|
||||
href="#additional-services"
|
||||
className="text-xl text-white hover:text-blue-400 transition-colors py-2"
|
||||
onClick={onClose}
|
||||
>
|
||||
Отзывы
|
||||
Доп услуги
|
||||
</Link>
|
||||
<Link
|
||||
href="#contacts"
|
||||
|
||||
@ -246,12 +246,21 @@ 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-50 via-white to-gray-100 overflow-hidden">
|
||||
{/* Статичный фон */}
|
||||
<section id="projects" className="relative py-20 bg-gradient-to-tr from-slate-50 via-white to-blue-50 overflow-hidden">
|
||||
{/* Архитектурный фон */}
|
||||
<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>
|
||||
{/* Квадраты как окна */}
|
||||
<div className="absolute top-16 left-16 w-20 h-20 border-2 border-blue-400 opacity-25"></div>
|
||||
<div className="absolute top-32 right-24 w-16 h-16 border-2 border-indigo-400 opacity-30"></div>
|
||||
<div className="absolute bottom-24 left-1/3 w-12 h-12 border-2 border-cyan-400 opacity-35"></div>
|
||||
|
||||
{/* Ромбы */}
|
||||
<div className="absolute top-1/3 left-1/4 w-14 h-14 bg-blue-300 transform rotate-45 opacity-20"></div>
|
||||
<div className="absolute bottom-1/4 right-1/3 w-10 h-10 bg-indigo-400 transform rotate-45 opacity-25"></div>
|
||||
|
||||
{/* Сетка */}
|
||||
<div className="absolute top-0 left-1/2 w-px h-full bg-gradient-to-b from-transparent via-blue-200 to-transparent opacity-30"></div>
|
||||
<div className="absolute top-1/2 left-0 w-full h-px bg-gradient-to-r from-transparent via-indigo-200 to-transparent opacity-25"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-6 relative z-10">
|
||||
|
||||
@ -96,12 +96,22 @@ const WorkExamplesSection = () => {
|
||||
const [isCallbackModalOpen, setIsCallbackModalOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<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-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>
|
||||
<section className="relative py-20 bg-gradient-to-tl from-indigo-50 via-white to-blue-50 overflow-hidden">
|
||||
{/* Технический фон */}
|
||||
<div className="absolute inset-0 opacity-25">
|
||||
{/* Инструменты стилизованные */}
|
||||
<div className="absolute top-12 left-12 w-6 h-6 border-2 border-blue-400 transform rotate-45 opacity-30"></div>
|
||||
<div className="absolute top-1/4 right-16 w-8 h-2 bg-indigo-400 rounded opacity-35"></div>
|
||||
<div className="absolute bottom-20 left-1/5 w-2 h-8 bg-cyan-400 rounded opacity-40"></div>
|
||||
|
||||
{/* Гайки и болты */}
|
||||
<div className="absolute top-1/3 left-1/3 w-4 h-4 border border-blue-500 rounded-full opacity-25"></div>
|
||||
<div className="absolute bottom-1/3 right-1/4 w-3 h-3 bg-indigo-500 rounded-sm opacity-30"></div>
|
||||
|
||||
{/* Технические линии */}
|
||||
<div className="absolute top-0 left-1/4 w-px h-1/2 bg-gradient-to-b from-blue-300 to-transparent opacity-30"></div>
|
||||
<div className="absolute bottom-0 right-1/3 w-px h-1/3 bg-gradient-to-t from-indigo-300 to-transparent opacity-25"></div>
|
||||
<div className="absolute top-1/3 left-0 w-1/3 h-px bg-gradient-to-r from-cyan-300 to-transparent opacity-20"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
@ -178,8 +188,9 @@ const WorkExamplesSection = () => {
|
||||
</div>
|
||||
|
||||
{/* Дополнительные услуги */}
|
||||
<FadeInSection as="div" className="mb-16" delay={0.8}>
|
||||
<div className="text-center mb-12">
|
||||
<div id="additional-services">
|
||||
<FadeInSection as="div" className="mb-16" delay={0.8}>
|
||||
<div className="text-center mb-12">
|
||||
<h3 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-800 via-blue-600 to-gray-800 bg-clip-text text-transparent mb-4">
|
||||
Дополнительные услуги
|
||||
</h3>
|
||||
@ -242,7 +253,8 @@ const WorkExamplesSection = () => {
|
||||
</FadeInSection>
|
||||
))}
|
||||
</div>
|
||||
</FadeInSection>
|
||||
</FadeInSection>
|
||||
</div>
|
||||
|
||||
{/* Призыв к действию */}
|
||||
<FadeInSection as="div" delay={1.2} className="text-center mt-16">
|
||||
|
||||
@ -28,12 +28,22 @@ const features = [
|
||||
|
||||
const WhyChooseUsSection = () => {
|
||||
return (
|
||||
<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-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>
|
||||
<section className="relative py-20 bg-gradient-to-bl from-blue-50 via-white to-slate-50 overflow-hidden">
|
||||
{/* Минималистичный фон */}
|
||||
<div className="absolute inset-0 opacity-35">
|
||||
{/* Точки */}
|
||||
<div className="absolute top-20 left-20 w-3 h-3 bg-blue-500 rounded-full opacity-40"></div>
|
||||
<div className="absolute top-40 right-32 w-2 h-2 bg-indigo-500 rounded-full opacity-50"></div>
|
||||
<div className="absolute bottom-32 left-1/4 w-4 h-4 bg-cyan-500 rounded-full opacity-30"></div>
|
||||
<div className="absolute top-1/3 right-1/4 w-2 h-2 bg-blue-400 rounded-full opacity-45"></div>
|
||||
|
||||
{/* Тонкие линии */}
|
||||
<div className="absolute top-1/4 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-300 to-transparent opacity-25"></div>
|
||||
<div className="absolute bottom-1/3 left-0 w-full h-px bg-gradient-to-r from-transparent via-indigo-300 to-transparent opacity-20"></div>
|
||||
|
||||
{/* Угловые элементы */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 border-t-2 border-r-2 border-blue-300 opacity-20"></div>
|
||||
<div className="absolute bottom-0 left-0 w-24 h-24 border-b-2 border-l-2 border-indigo-300 opacity-25"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
|
||||
Reference in New Issue
Block a user