Hugging Face's logo

Spaces:
seqinho
/
luxestroy
Running

App Files Community
luxestroy / index.html
seqinho's picture
seqinho
undefined - Initial Deployment
75edcdb verified
raw
history blame contribute delete
45.4 kB
<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ЛЮКС СТРОЙ - Строительство домов по золотому сечению</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 <script src="https://unpkg.com/framer-motion@10.12.0/dist/framer-motion.js"></script>
 <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;500&display=swap');
:root {
 --golden-ratio: 1.618;
 --primary: #C19A6B;
 --secondary: #3A4E48;
 --accent: #8B5A2B;
 }
body {
 font-family: 'Roboto', sans-serif;
 overflow-x: hidden;
 background-color: #f8f5f0;
 }
.heading-font {
 font-family: 'Playfair Display', serif;
 }
.golden-rectangle {
 aspect-ratio: var(--golden-ratio);
 }
.fibonacci-spiral {
 position: absolute;
 width: 100%;
 height: 100%;
 background: radial-gradient(circle, transparent 0%, var(--secondary) 70%);
 opacity: 0.1;
 z-index: -1;
 }
.mandala-bg {
 position: absolute;
 width: 100%;
 height: 100%;
 opacity: 0.05;
 z-index: -1;
 }
.pulse-animation {
 animation: pulse 8s infinite alternate;
 }
@keyframes pulse {
 0% { transform: scale(1); opacity: 0.8; }
 100% { transform: scale(1.02); opacity: 1; }
 }
.btn-golden {
 background: linear-gradient(135deg, var(--primary), var(--accent));
 transition: all 0.3s ease;
 position: relative;
 overflow: hidden;
 }
.btn-golden:hover {
 transform: translateY(-2px);
 box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 }
.btn-golden::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
 transform: translateX(-100%);
 transition: transform 0.3s ease;
 }
.btn-golden:hover::after {
 transform: translateX(0);
 }
#threejs-container {
 position: relative;
 width: 100%;
 height: 100%;
 }
.house-card {
 transition: all 0.3s ease;
 border: 1px solid rgba(0,0,0,0.1);
 }
.house-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 15px 30px rgba(0,0,0,0.1);
 }
.golden-section {
 display: grid;
 grid-template-columns: 1fr calc(1fr * var(--golden-ratio));
 }
@media (max-width: 768px) {
 .golden-section {
 grid-template-columns: 1fr;
 }
 }
.service-icon {
 width: 80px;
 height: 80px;
 background-color: var(--primary);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto;
 }
.nav-link {
 position: relative;
 }
.nav-link::after {
 content: '';
 position: absolute;
 bottom: -2px;
 left: 0;
 width: 0;
 height: 2px;
 background-color: var(--primary);
 transition: width 0.3s ease;
 }
.nav-link:hover::after {
 width: 100%;
 }
.calculator-input {
 border: 1px solid rgba(0,0,0,0.1);
 transition: all 0.3s ease;
 }
.calculator-input:focus {
 border-color: var(--primary);
 box-shadow: 0 0 0 2px rgba(193, 154, 107, 0.2);
 }
.range-slider::-webkit-slider-thumb {
 -webkit-appearance: none;
 appearance: none;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: var(--primary);
 cursor: pointer;
 }
.range-slider::-moz-range-thumb {
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: var(--primary);
 cursor: pointer;
 }
 </style>
</head>
<body class="text-gray-800">
 <!-- Header -->
 <header class="bg-white shadow-sm sticky top-0 z-50">
 <div class="container mx-auto px-4 py-4 flex justify-between items-center">
 <div class="flex items-center">
 <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center mr-3">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
 </svg>
 </div>
 <h1 class="heading-font text-2xl font-bold text-secondary">ЛЮКС СТРОЙ</h1>
 </div>
<nav class="hidden md:flex space-x-8">
 <a href="#home" class="nav-link font-medium">Главная</a>
 <a href="#projects" class="nav-link font-medium">Проекты</a>
 <a href="#services" class="nav-link font-medium">Услуги</a>
 <a href="#materials" class="nav-link font-medium">Материалы</a>
 <a href="#calculator" class="nav-link font-medium">Калькулятор</a>
 <a href="#contact" class="nav-link font-medium">Контакты</a>
 </nav>
<button class="md:hidden focus:outline-none">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
 </svg>
 </button>
 </div>
 </header>
<!-- Hero Section with 3D Model -->
 <section id="home" class="relative overflow-hidden golden-section min-h-screen">
 <div class="fibonacci-spiral"></div>
 <div class="mandala-bg">
 <lottie-player src="https://assets5.lottiefiles.com/packages/lf20_8wREQO.json" background="transparent" speed="0.5" loop autoplay></lottie-player>
 </div>
<div class="flex flex-col justify-center px-8 py-16 md:px-16">
 <h2 class="heading-font text-4xl md:text-6xl font-bold mb-6">Создайте пространство силы</h2>
 <p class="text-xl mb-8 max-w-2xl">Дома, построенные по принципам золотого сечения, где каждая деталь гармонично вписывается в природные пропорции.</p>
 <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
 <button class="btn-golden text-white font-medium py-3 px-8 rounded-full">Рассчитать дом мечты</button>
 <button class="border border-primary text-primary font-medium py-3 px-8 rounded-full">Каталог проектов</button>
 </div>
 </div>
<div class="relative" id="threejs-container">
 <!-- 3D Model will be rendered here -->
 <canvas id="house3d" class="w-full h-full"></canvas>
 </div>
 </section>
<!-- Projects Section -->
 <section id="projects" class="py-20 bg-white">
 <div class="container mx-auto px-4">
 <div class="text-center mb-16">
 <h2 class="heading-font text-3xl md:text-4xl font-bold mb-4">Наши проекты</h2>
 <p class="max-w-2xl mx-auto">Каждый дом создан с учетом сакральной геометрии для вашего комфорта и гармонии</p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Project 1 -->
 <div class="house-card bg-white rounded-xl overflow-hidden pulse-animation">
 <div class="golden-rectangle bg-gray-100 relative overflow-hidden">
 <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Modern House" class="w-full h-full object-cover">
 <div class="absolute bottom-4 left-4 bg-primary text-white px-3 py-1 rounded-full text-sm">Золотое сечение</div>
 </div>
 <div class="p-6">
 <h3 class="heading-font text-xl font-bold mb-2">Вилла "Гармония"</h3>
 <p class="text-gray-600 mb-4">Современный дом с панорамными окнами и продуманной геометрией пространства</p>
 <div class="flex justify-between items-center">
 <span class="font-bold text-lg">от 12 500 000 ₽</span>
 <button class="text-primary font-medium">Подробнее →</button>
 </div>
 </div>
 </div>
<!-- Project 2 -->
 <div class="house-card bg-white rounded-xl overflow-hidden pulse-animation">
 <div class="golden-rectangle bg-gray-100 relative overflow-hidden">
 <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Classic House" class="w-full h-full object-cover">
 <div class="absolute bottom-4 left-4 bg-primary text-white px-3 py-1 rounded-full text-sm">Золотое сечение</div>
 </div>
 <div class="p-6">
 <h3 class="heading-font text-xl font-bold mb-2">Усадьба "Пропорция"</h3>
 <p class="text-gray-600 mb-4">Классический загородный дом с элементами сакральной геометрии в интерьере</p>
 <div class="flex justify-between items-center">
 <span class="font-bold text-lg">от 8 900 000 ₽</span>
 <button class="text-primary font-medium">Подробнее →</button>
 </div>
 </div>
 </div>
<!-- Project 3 -->
 <div class="house-card bg-white rounded-xl overflow-hidden pulse-animation">
 <div class="golden-rectangle bg-gray-100 relative overflow-hidden">
 <img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Minimalist House" class="w-full h-full object-cover">
 <div class="absolute bottom-4 left-4 bg-primary text-white px-3 py-1 rounded-full text-sm">Золотое сечение</div>
 </div>
 <div class="p-6">
 <h3 class="heading-font text-xl font-bold mb-2">Резиденция "Баланс"</h3>
 <p class="text-gray-600 mb-4">Минималистичный дизайн с идеальными пропорциями каждого помещения</p>
 <div class="flex justify-between items-center">
 <span class="font-bold text-lg">от 15 200 000 ₽</span>
 <button class="text-primary font-medium">Подробнее →</button>
 </div>
 </div>
 </div>
 </div>
<div class="text-center mt-12">
 <button class="btn-golden text-white font-medium py-3 px-8 rounded-full">Смотреть все проекты</button>
 </div>
 </div>
 </section>
<!-- Services Section -->
 <section id="services" class="py-20 bg-gray-50">
 <div class="container mx-auto px-4">
 <div class="text-center mb-16">
 <h2 class="heading-font text-3xl md:text-4xl font-bold mb-4">Наши услуги</h2>
 <p class="max-w-2xl mx-auto">Полный цикл строительства с учетом принципов гармоничного пространства</p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <!-- Service 1 -->
 <div class="bg-white p-8 rounded-xl shadow-sm text-center">
 <div class="service-icon mb-6">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
 </svg>
 </div>
 <h3 class="heading-font text-xl font-bold mb-3">Архитектурное проектирование</h3>
 <p class="text-gray-600">Создание проектов с учетом золотого сечения и сакральной геометрии для гармоничного пространства</p>
 </div>
<!-- Service 2 -->
 <div class="bg-white p-8 rounded-xl shadow-sm text-center">
 <div class="service-icon mb-6">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
 </svg>
 </div>
 <h3 class="heading-font text-xl font-bold mb-3">Строительство под ключ</h3>
 <p class="text-gray-600">Реализация проекта с соблюдением всех пропорций и использованием качественных материалов</p>
 </div>
<!-- Service 3 -->
 <div class="bg-white p-8 rounded-xl shadow-sm text-center">
 <div class="service-icon mb-6">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
 </svg>
 </div>
 <h3 class="heading-font text-xl font-bold mb-3">Дизайн интерьера</h3>
 <p class="text-gray-600">Создание гармоничных интерьеров, где каждая деталь соответствует принципам золотого сечения</p>
 </div>
 </div>
 </div>
 </section>
<!-- Materials Section -->
 <section id="materials" class="py-20 bg-white">
 <div class="container mx-auto px-4">
 <div class="text-center mb-16">
 <h2 class="heading-font text-3xl md:text-4xl font-bold mb-4">Качественные материалы</h2>
 <p class="max-w-2xl mx-auto">Используем только проверенные материалы, соответствующие нашим высоким стандартам</p>
 </div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
 <!-- Material 1 -->
 <div class="bg-gray-50 p-6 rounded-xl text-center">
 <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
 </svg>
 </div>
 <h3 class="font-bold">Экологичные панели</h3>
 </div>
<!-- Material 2 -->
 <div class="bg-gray-50 p-6 rounded-xl text-center">
 <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
 </svg>
 </div>
 <h3 class="font-bold">Натуральное дерево</h3>
 </div>
<!-- Material 3 -->
 <div class="bg-gray-50 p-6 rounded-xl text-center">
 <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
 </svg>
 </div>
 <h3 class="font-bold">Качественный бетон</h3>
 </div>
<!-- Material 4 -->
 <div class="bg-gray-50 p-6 rounded-xl text-center">
 <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
 </svg>
 </div>
 <h3 class="font-bold">Стекло премиум-класса</h3>
 </div>
 </div>
<div class="mt-12 bg-primary bg-opacity-10 p-8 rounded-xl golden-section items-center">
 <div class="p-6">
 <h3 class="heading-font text-2xl font-bold mb-4">Магазин материалов</h3>
 <p class="mb-6">Приобретайте качественные строительные материалы напрямую у производителей с нашей гарантией</p>
 <button class="btn-golden text-white font-medium py-3 px-8 rounded-full">Перейти в магазин</button>
 </div>
 <div class="hidden md:block">
 <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Building Materials" class="rounded-lg shadow-lg">
 </div>
 </div>
 </div>
 </section>
<!-- Calculator Section -->
 <section id="calculator" class="py-20 bg-gray-50">
 <div class="container mx-auto px-4">
 <div class="text-center mb-16">
 <h2 class="heading-font text-3xl md:text-4xl font-bold mb-4">Калькулятор стоимости</h2>
 <p class="max-w-2xl mx-auto">Рассчитайте примерную стоимость вашего будущего дома</p>
 </div>
<div class="max-w-3xl mx-auto bg-white rounded-xl shadow-sm overflow-hidden">
 <div class="md:flex">
 <div class="p-8 md:w-1/2">
 <div class="mb-6">
 <label class="block text-gray-700 mb-2">Площадь дома (м²)</label>
 <input type="range" min="50" max="500" value="150" class="w-full range-slider mb-2">
 <div class="flex justify-between">
 <span>50</span>
 <span>150</span>
 <span>500</span>
 </div>
 </div>
<div class="mb-6">
 <label class="block text-gray-700 mb-2">Количество этажей</label>
 <select class="w-full calculator-input px-4 py-2 rounded-lg">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 </select>
 </div>
<div class="mb-6">
 <label class="block text-gray-700 mb-2">Тип дома</label>
 <select class="w-full calculator-input px-4 py-2 rounded-lg">
 <option>Каркасный</option>
 <option>Кирпичный</option>
 <option>Газобетон</option>
 <option>Деревянный</option>
 </select>
 </div>
<div class="mb-6">
 <label class="block text-gray-700 mb-2">Дополнительные услуги</label>
 <div class="space-y-2">
 <label class="flex items-center">
 <input type="checkbox" class="form-checkbox text-primary">
 <span class="ml-2">Проектирование</span>
 </label>
 <label class="flex items-center">
 <input type="checkbox" class="form-checkbox text-primary">
 <span class="ml-2">Дизайн интерьера</span>
 </label>
 <label class="flex items-center">
 <input type="checkbox" class="form-checkbox text-primary">
 <span class="ml-2">Ландшафтный дизайн</span>
 </label>
 </div>
 </div>
 </div>
<div class="bg-primary bg-opacity-10 p-8 md:w-1/2 flex flex-col justify-center">
 <div class="text-center mb-6">
 <h3 class="heading-font text-xl font-bold mb-2">Примерная стоимость</h3>
 <div class="text-4xl font-bold text-primary">8 500 000 ₽</div>
 <p class="text-gray-600 mt-2">*Точную стоимость уточняйте у менеджера</p>
 </div>
<div class="bg-white p-4 rounded-lg mb-6">
 <div class="flex justify-between mb-2">
 <span>Строительство</span>
 <span>7 200 000 ₽</span>
 </div>
 <div class="flex justify-between mb-2">
 <span>Проектирование</span>
 <span>800 000 ₽</span>
 </div>
 <div class="flex justify-between">
 <span>Доп. услуги</span>
 <span>500 000 ₽</span>
 </div>
 </div>
<button class="btn-golden text-white font-medium py-3 px-8 rounded-full w-full">Оставить заявку</button>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Contact Section -->
 <section id="contact" class="py-20 bg-white">
 <div class="container mx-auto px-4">
 <div class="text-center mb-16">
 <h2 class="heading-font text-3xl md:text-4xl font-bold mb-4">Свяжитесь с нами</h2>
 <p class="max-w-2xl mx-auto">Готовы создать дом вашей мечты? Напишите нам или посетите наш офис</p>
 </div>
<div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12">
 <div>
 <h3 class="heading-font text-xl font-bold mb-6">Контактная информация</h3>
<div class="space-y-6">
 <div class="flex items-start">
 <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
 </svg>
 </div>
 <div>
 <h4 class="font-bold">Адрес</h4>
 <p>г. Москва, ул. Архитекторов, 15</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
 </svg>
 </div>
 <div>
 <h4 class="font-bold">Телефон</h4>
 <p>+7 (495) 123-45-67</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
 </svg>
 </div>
 <div>
 <h4 class="font-bold">Email</h4>
 <p>info@luxstroy.ru</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="bg-primary bg-opacity-10 p-3 rounded-full mr-4">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
 </svg>
 </div>
 <div>
 <h4 class="font-bold">Часы работы</h4>
 <p>Пн-Пт: 9:00 - 18:00</p>
 <p>Сб-Вс: выходной</p>
 </div>
 </div>
 </div>
 </div>
<div>
 <h3 class="heading-font text-xl font-bold mb-6">Напишите нам</h3>
<form class="space-y-4">
 <div>
 <label class="block text-gray-700 mb-1">Ваше имя</label>
 <input type="text" class="w-full calculator-input px-4 py-2 rounded-lg">
 </div>
<div>
 <label class="block text-gray-700 mb-1">Email</label>
 <input type="email" class="w-full calculator-input px-4 py-2 rounded-lg">
 </div>
<div>
 <label class="block text-gray-700 mb-1">Телефон</label>
 <input type="tel" class="w-full calculator-input px-4 py-2 rounded-lg">
 </div>
<div>
 <label class="block text-gray-700 mb-1">Сообщение</label>
 <textarea rows="4" class="w-full calculator-input px-4 py-2 rounded-lg"></textarea>
 </div>
<button class="btn-golden text-white font-medium py-3 px-8 rounded-full w-full">Отправить сообщение</button>
 </form>
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-secondary text-white py-12">
 <div class="container mx-auto px-4">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <h3 class="heading-font text-xl font-bold mb-4">ЛЮКС СТРОЙ</h3>
 <p>Строительство домов по принципам золотого сечения и сакральной геометрии</p>
 </div>
<div>
 <h4 class="font-bold mb-4">Навигация</h4>
 <ul class="space-y-2">
 <li><a href="#home" class="hover:text-primary transition">Главная</a></li>
 <li><a href="#projects" class="hover:text-primary transition">Проекты</a></li>
 <li><a href="#services" class="hover:text-primary transition">Услуги</a></li>
 <li><a href="#materials" class="hover:text-primary transition">Материалы</a></li>
 <li><a href="#contact" class="hover:text-primary transition">Контакты</a></li>
 </ul>
 </div>
<div>
 <h4 class="font-bold mb-4">Услуги</h4>
 <ul class="space-y-2">
 <li><a href="#" class="hover:text-primary transition">Проектирование</a></li>
 <li><a href="#" class="hover:text-primary transition">Строительство</a></li>
 <li><a href="#" class="hover:text-primary transition">Дизайн интерьера</a></li>
 <li><a href="#" class="hover:text-primary transition">Ландшафтный дизайн</a></li>
 <li><a href="#" class="hover:text-primary transition">Консультации</a></li>
 </ul>
 </div>
<div>
 <h4 class="font-bold mb-4">Подписаться</h4>
 <p class="mb-4">Будьте в курсе наших новых проектов и акций</p>
 <div class="flex">
 <input type="email" placeholder="Ваш email" class="px-4 py-2 rounded-l-lg text-gray-800 w-full">
 <button class="bg-primary px-4 py-2 rounded-r-lg">→</button>
 </div>
<div class="flex space-x-4 mt-4">
 <a href="#" class="bg-white bg-opacity-10 p-2 rounded-full hover:bg-opacity-20 transition">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
 <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/>
 </svg>
 </a>
 <a href="#" class="bg-white bg-opacity-10 p-2 rounded-full hover:bg-opacity-20 transition">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
 <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
 </svg>
 </a>
 <a href="#" class="bg-white bg-opacity-10 p-2 rounded-full hover:bg-opacity-20 transition">
 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
 <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
 </svg>
 </a>
 </div>
 </div>
 </div>
<div class="border-t border-white border-opacity-20 mt-8 pt-8 text-center text-sm">
 <p>© 2023 ЛЮКС СТРОЙ. Все права защищены.</p>
 </div>
 </div>
 </footer>
<!-- 3D House Model with Three.js -->
 <script>
 // Initialize Three.js scene
 document.addEventListener('DOMContentLoaded', function() {
 const container = document.getElementById('house3d');
 if (!container) return;
const width = container.clientWidth;
 const height = container.clientHeight;
// Scene setup
 const scene = new THREE.Scene();
 scene.background = new THREE.Color(0xf8f5f0);
// Camera
 const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
 camera.position.z = 5;
// Renderer
 const renderer = new THREE.WebGLRenderer({ canvas: container, antialias: true });
 renderer.setSize(width, height);
 renderer.setPixelRatio(window.devicePixelRatio);
// Lighting
 const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
 scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
 directionalLight.position.set(1, 1, 1);
 scene.add(directionalLight);
// House model
 const houseGeometry = new THREE.BoxGeometry(2, 1.5, 2);
 const roofGeometry = new THREE.ConeGeometry(1.5, 1, 4);
 roofGeometry.rotateY(Math.PI / 4);
 roofGeometry.translate(0, 1.25, 0);
const houseMaterial = new THREE.MeshPhongMaterial({
color: 0xC19A6B,
 shininess: 30
 });
const roofMaterial = new THREE.MeshPhongMaterial({
color: 0x8B5A2B,
 shininess: 30
 });
const house = new THREE.Mesh(houseGeometry, houseMaterial);
 const roof = new THREE.Mesh(roofGeometry, roofMaterial);
const houseGroup = new THREE.Group();
 houseGroup.add(house);
 houseGroup.add(roof);
 scene.add(houseGroup);
// Fibonacci spiral
 const spiralPoints = [];
 const spiralGeometry = new THREE.BufferGeometry();
 const spiralMaterial = new THREE.LineBasicMaterial({ color: 0x3A4E48 });
let a = 0;
 let b = 1;
 let theta = 0;
for (let i = 0; i < 300; i++) {
 const r = a * 0.1;
 spiralPoints.push(new THREE.Vector3(
 r * Math.cos(theta),
 r * Math.sin(theta),
 0
 ));
const c = a + b;
 a = b;
 b = c;
 theta += 0.1;
 }
spiralGeometry.setFromPoints(spiralPoints);
 const spiral = new THREE.Line(spiralGeometry, spiralMaterial);
 spiral.position.y = -1;
 scene.add(spiral);
// Animation
 function animate() {
 requestAnimationFrame(animate);
houseGroup.rotation.y += 0.005;
 spiral.rotation.z += 0.005;
renderer.render(scene, camera);
 }
animate();
// Handle window resize
 window.addEventListener('resize', function() {
 const newWidth = container.clientWidth;
 const newHeight = container.clientHeight;
camera.aspect = newWidth / newHeight;
 camera.updateProjectionMatrix();
renderer.setSize(newWidth, newHeight);
 });
 });
// Simple animations with Framer Motion-like effects
 function animateElements() {
 const animatedElements = document.querySelectorAll('.pulse-animation');
animatedElements.forEach(el => {
 el.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
setInterval(() => {
 const scale = el.style.transform.includes('scale(1.02)') ? 'scale(1)' : 'scale(1.02)';
 const opacity = el.style.opacity === '1' ? '0.8' : '1';
el.style.transform = scale;
 el.style.opacity = opacity;
 }, 4000);
 });
 }
// Initialize animations when page loads
 window.addEventListener('load', function() {
 animateElements();
// Mobile menu toggle
 const mobileMenuButton = document.querySelector('header button.md\\:hidden');
 if (mobileMenuButton) {
 mobileMenuButton.addEventListener('click', function() {
 const nav = document.querySelector('header nav');
 if (nav) {
 nav.classList.toggle('hidden');
 nav.classList.toggle('flex');
 nav.classList.toggle('flex-col');
 nav.classList.toggle('absolute');
 nav.classList.toggle('top-16');
 nav.classList.toggle('left-0');
 nav.classList.toggle('right-0');
 nav.classList.toggle('bg-white');
 nav.classList.toggle('p-4');
 nav.classList.toggle('space-y-4');
 nav.classList.toggle('space-x-8');
 }
 });
 }
// Smooth scrolling for anchor links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function(e) {
 e.preventDefault();
const targetId = this.getAttribute('href');
 if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
 if (targetElement) {
 targetElement.scrollIntoView({
 behavior: 'smooth'
 });
 }
 });
 });
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=seqinho/luxestroy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>