Hazar's picture
- Initial Deployment
9b356da 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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.dropdown:hover .dropdown-menu {
display: block;
}
.city-selector {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239C9C9C' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
}
.product-card:hover .product-actions {
opacity: 1;
transform: translateY(0);
}
.testimonial-card {
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.menu-toggle {
transition: all 0.3s ease;
}
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
</style>
</head>
<body class="font-sans text-gray-800 bg-white">
<!-- Top Bar -->
<div class="bg-green-700 text-white py-2 px-4">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-4 mb-2 md:mb-0">
<div class="flex items-center">
<i class="fas fa-phone-alt mr-2"></i>
<a href="tel:+77711307112" class="hover:text-green-200">8 (771) 130-71-12</a>
</div>
<div class="flex items-center">
<i class="far fa-clock mr-2"></i>
<span>Круглосуточно</span>
</div>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="hover:text-green-200"><i class="fab fa-vk"></i></a>
<a href="#" class="hover:text-green-200"><i class="fab fa-whatsapp"></i></a>
<a href="#" class="hover:text-green-200"><i class="fab fa-telegram"></i></a>
</div>
</div>
</div>
<!-- Header -->
<header class="sticky top-0 z-50 bg-white shadow-md">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<div class="flex items-center">
<a href="#" class="text-2xl font-bold text-green-700 flex items-center">
<img src="https://aktau.loveflowers24.kz/wp-content/themes/loveflowers24/images/logo.svg" alt="Цветомания" class="h-10 mr-2">
</a>
</div>
<div class="hidden md:flex items-center space-x-6">
<nav class="hidden md:block">
<ul class="flex space-x-6">
<li><a href="#" class="hover:text-green-700 font-medium">Главная</a></li>
<li><a href="#" class="hover:text-green-700 font-medium">Каталог</a></li>
<li><a href="#" class="hover:text-green-700 font-medium">Доставка</a></li>
<li><a href="#" class="hover:text-green-700 font-medium">Оплата</a></li>
<li><a href="#" class="hover:text-green-700 font-medium">Контакты</a></li>
</ul>
</nav>
<div class="flex items-center space-x-4">
<a href="#" class="relative text-gray-600 hover:text-green-700">
<i class="far fa-heart text-xl"></i>
<span class="absolute -top-2 -right-2 bg-green-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
</a>
<a href="#" class="relative text-gray-600 hover:text-green-700">
<i class="fas fa-shopping-cart text-xl"></i>
<span class="absolute -top-2 -right-2 bg-green-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
</a>
</div>
</div>
<div class="md:hidden">
<button class="menu-toggle flex flex-col justify-center items-center">
<span class="block w-6 h-0.5 bg-gray-800 mb-1.5 transition-all"></span>
<span class="block w-6 h-0.5 bg-gray-800 mb-1.5 transition-all"></span>
<span class="block w-6 h-0.5 bg-gray-800 transition-all"></span>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div class="md:hidden hidden mt-4 pb-4" id="mobile-menu">
<nav>
<ul class="space-y-3">
<li><a href="#" class="block py-2 hover:text-green-700 font-medium">Главная</a></li>
<li><a href="#" class="block py-2 hover:text-green-700 font-medium">Каталог</a></li>
<li><a href="#" class="block py-2 hover:text-green-700 font-medium">Доставка</a></li>
<li><a href="#" class="block py-2 hover:text-green-700 font-medium">Оплата</a></li>
<li><a href="#" class="block py-2 hover:text-green-700 font-medium">Контакты</a></li>
</ul>
</nav>
<div class="flex items-center space-x-4 mt-4">
<a href="#" class="relative text-gray-600 hover:text-green-700">
<i class="far fa-heart text-xl"></i>
<span class="absolute -top-2 -right-2 bg-green-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
</a>
<a href="#" class="relative text-gray-600 hover:text-green-700">
<i class="fas fa-shopping-cart text-xl"></i>
<span class="absolute -top-2 -right-2 bg-green-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
</a>
</div>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="bg-gradient-to-r from-green-50 to-white py-12 md:py-20">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 mb-4">Доставка свежих цветов в Актау</h1>
<p class="text-lg text-gray-600 mb-6">Более 1000 букетов с бесплатной доставкой по всем районам Актау. Дарите радость круглосуточно!</p>
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
<a href="#" class="bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-6 rounded-lg text-center transition duration-300">Перейти в каталог</a>
<a href="#" class="border-2 border-green-600 text-green-600 hover:bg-green-50 font-medium py-3 px-6 rounded-lg text-center transition duration-300">Купить букет по фото</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://aktau.loveflowers24.kz/wp-content/themes/loveflowers24/images/slide.png" alt="Цветы с доставкой" class="w-full max-w-lg">
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center p-6 rounded-xl bg-white shadow-md hover:shadow-lg transition duration-300">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-bolt text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Быстрая доставка</h3>
<p class="text-gray-600">В течение 3 часов от заказа до вручения или привезем ко времени</p>
</div>
<div class="text-center p-6 rounded-xl bg-white shadow-md hover:shadow-lg transition duration-300">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-certificate text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Гарантия свежести</h3>
<p class="text-gray-600">Исключительно свежие цветы, букет как на сайте</p>
</div>
<div class="text-center p-6 rounded-xl bg-white shadow-md hover:shadow-lg transition duration-300">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-camera text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Букеты по фото</h3>
<p class="text-gray-600">Соберем любую композицию по вашей фотографии</p>
</div>
</div>
</div>
</section>
<!-- Popular Products -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Хиты продаж</h2>
<div class="w-20 h-1 bg-green-600 mx-auto"></div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Product 1 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
<div class="relative overflow-hidden">
<img src="https://aktau.loveflowers24.kz/wp-content/uploads/2022/04/rozy-gollandiya-krasnye-400x400.jpg" alt="Розы Голландия красные" class="w-full h-64 object-cover">
<div class="product-actions absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition duration-300 transform translate-y-4">
<button class="bg-white text-green-600 hover:bg-green-600 hover:text-white rounded-full w-10 h-10 flex items-center justify-center mr-2 transition duration-300">
<i class="far fa-heart"></i>
</button>
<button class="bg-white text-green-600 hover:bg-green-600 hover:text-white rounded-full w-10 h-10 flex items-center justify-center transition duration-300">
<i class="fas fa-shopping-cart"></i>
</button>
</div>
<div class="absolute top-2 right-2 bg-green-600 text-white text-xs font-bold px-2 py-1 rounded">
Хит
</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Розы Голландия красные</h3>
<p class="text-green-600 font-bold mb-3">от 1,080₸</p>
<div class="flex space-x-2">
<button class="flex-1 bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded transition duration-300">
Заказать
</button>
<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-3 rounded transition duration-300">
<i class="fab fa-whatsapp text-green-600"></i>
</button>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
<div class="relative overflow-hidden">
<img src="https://aktau.loveflowers24.kz/wp-content/uploads/2022/04/buket-iz-belyh-roz-rossiya-400x400.jpg" alt="Розы Россия белые" class="w-full h-64 object-cover">
<div class="product-actions absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition duration-300 transform translate-y-4">
<button class="bg-white text-green-600 hover:bg-green-600 hover:text-white rounded-full w-10 h-10 flex items-center justify-center mr-2 transition duration-300">
<i class="far fa-heart"></i>
</button>
<button class="bg-white text-green-600 hover:bg-green-600 hover:text-white rounded-full w-10 h-10 flex items-center justify-center transition duration-300">
<i class="fas fa-shopping-cart"></i>
</button>
</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Розы Россия белые</h3>
<p class="text-green-600 font-bold mb-3">от 780₸</p>
<div class="flex space-x-2">
<button class="flex-1 bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded transition duration-300">
Заказать
</button>
<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-3 rounded transition duration-300">
<i class="fab fa-whatsapp text-green-600"></i>
</button>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
<div class="relative overflow-hidden">
<img src="https://aktau.loveflowers24.kz/wp-content/uploads/2022/04/tyulpany-rozovye-400x400.jpg" alt="Тюльпаны розовые" class="w-full h-64 object-cover">
<div class="product-actions absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition duration-300 transform translate-y-4">
<button class="bg-white text-green-600 hover:bg-green-600 hover:text-white rounded-full w-10 h-10 flex items-center justify-center mr-2 transition duration-300">
<i class="far fa-heart"></i>
</button>
<button class="bg-white text-green-600 hover:bg-green-600 hover:text-white rounded-full w-10 h-10 flex items-center justify-center transition duration-300">
<i class="fas fa-shopping-cart"></i>
</button>
</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Тюльпаны розовые</h3>
<p class="text-green-600 font-bold mb-3">960₸</p>
<div class="flex space-x-2">
<button class="flex-1 bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded transition duration-300">
Заказать
</button>
<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-3 rounded transition duration-300">
<i class="fab fa-whatsapp text-green-600"></i>
</button>
</div>
</div>
</div>
<!-- Product 4 -->
<div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
<div class="relative overflow-hidden">
<img src="https://aktau.loveflowers24.kz/wp-content/uploads/2022/04/buket-iz-krasnyh-roz-rossiya-400x400.jpg" alt="Розы Россия красные" class="w-full h-64 object-cover">
<div class="product-actions absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition duration-300 transform translate-y-4">
<button class="bg-white text-green-600 hover:bg-green-600 hover:text-white rounded-full w-10 h-10 flex items-center justify-center mr-2 transition duration-300">
<i class="far fa-heart"></i>
</button>
<button class="bg-white text-green-600 hover:bg-green-600 hover:text-white rounded-full w-10 h-10 flex items-center justify-center transition duration-300">
<i class="fas fa-shopping-cart"></i>
</button>
</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lg mb-1">Розы Россия красные</h3>
<p class="text-green-600 font-bold mb-3">от 780₸</p>
<div class="flex space-x-2">
<button class="flex-1 bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded transition duration-300">
Заказать
</button>
<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-3 rounded transition duration-300">
<i class="fab fa-whatsapp text-green-600"></i>
</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-10">
<a href="#" class="inline-block border-2 border-green-600 text-green-600 hover:bg-green-600 hover:text-white font-medium py-3 px-8 rounded-lg transition duration-300">
Все акции и скидки
</a>
</div>
</div>
</section>
<!-- About -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-10">
<h2 class="text-3xl font-bold mb-6">Цветы с доставкой в Актау</h2>
<p class="text-gray-600 mb-6">Компания «Цветомания» - это современная и быстрая доставка цветов в г Актау от 15000 тенге: шикарные букеты, чарующие композиции и всегда свежие бутоны на дом или в офис.</p>
<p class="text-gray-600 mb-6">Мы предлагаем один из лучших форматов по заказу цветов, поскольку объединяем цветочные хозяйства, флористов, сотрудников интернет-магазина и курьеров в один безукоризненно работающий механизм.</p>
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="bg-green-50 p-4 rounded-lg">
<p class="text-green-600 font-bold text-3xl mb-1">900+</p>
<p class="text-gray-600">Цветов уже на сайте</p>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<p class="text-green-600 font-bold text-3xl mb-1">41+</p>
<p class="text-gray-600">Вариантов упаковки</p>
</div>
</div>
</div>
<div class="md:w-1/2">
<img src="https://aktau.loveflowers24.kz/wp-content/themes/loveflowers24/images/about.jpg" alt="О нас" class="w-full rounded-lg shadow-md">
</div>
</div>
</div>
</section>
<!-- Categories -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Каталог цветов и букетов</h2>
<div class="w-20 h-1 bg-green-600 mx-auto"></div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<a href="#" class="category-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
<img src="https://aktau.loveflowers24.kz/wp-content/uploads/2022/04/buket-manyaschiy-400x400.jpg" alt="Букеты" class="w-full h-40 object-cover">
<div class="p-4 text-center">
<h3 class="font-bold">Букеты</h3>
</div>
</a>
<a href="#" class="category-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
<img src="https://aktau.loveflowers24.kz/wp-content/uploads/2022/04/rozy-ekvador-persikovye-400x400.jpg" alt="Цветы поштучно" class="w-full h-40 object-cover">
<div class="p-4 text-center">
<h3 class="font-bold">Цветы поштучно</h3>
</div>
</a>
<a href="#" class="category-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
<img src="https://aktau.loveflowers24.kz/wp-content/uploads/2022/04/tsvety-v-korobke-manyaschiy-400x400.jpg" alt="Цветы в коробке" class="w-full h-40 object-cover">
<div class="p-4 text-center">
<h3 class="font-bold">Цветы в коробке</h3>
</div>
</a>
<a href="#" class="category-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
<img src="https://aktau.loveflowers24.kz/wp-content/uploads/2022/04/potseluy-400x400.jpg" alt="Корзины с цветами" class="w-full h-40 object-cover">
<div class="p-4 text-center">
<h3 class="font-bold">Корзины с цветами</h3>
</div>
</a>
<a href="#" class="category-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
<img src="https://aktau.loveflowers24.kz/wp-content/uploads/2022/04/buket-strela-amura-400x400.jpg" alt="Для кого" class="w-full h-40 object-cover">
<div class="p-4 text-center">
<h3 class="font-bold">Для кого</h3>
</div>
</a>
<a href="#" class="category-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
<img src="https://aktau.loveflowers24.kz/wp-content/uploads/2022/04/buket-goluby-ogonki-400x400.jpg" alt="Праздничные букеты" class="w-full h-40 object-cover">
<div class="p-4 text-center">
<h3 class="font-bold">Праздничные букеты</h3>
</div>
</a>
<a href="#" class="category-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
<img src="https://aktau.loveflowers24.kz/wp-content/uploads/2022/04/yaytso-kinder-syurpriz-400x400.jpg" alt="Подарки и игрушки" class="w-full h-40 object-cover">
<div class="p-4 text-center">
<h3 class="font-bold">Подарки и игрушки</h3>
</div>
</a>
<a href="#" class="category-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
<img src="https://aktau.loveflowers24.kz/wp-content/uploads/2022/04/aktsiya-rozy-krasnye-51-sht-400x400.jpg" alt="Скидки" class="w-full h-40 object-cover">
<div class="p-4 text-center">
<h3 class="font-bold">Скидки</h3>
</div>
</a>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Отзывы о магазине «Цветомания»</h2>
<div class="w-20 h-1 bg-green-600 mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Testimonial 1 -->
<div class="testimonial-card bg-white p-6 rounded-lg">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Максим А." class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Максим А.</h4>
<p class="text-gray-500 text-sm">05.08.2022</p>
</div>
</div>
<p class="text-gray-600">Делал заказ онлайн, покупал цветы для жены на годовщину свадьбы. Сам находился в командировке, поэтому поздравить лично не получилось, к сожалению. Супруга осталась очень довольна сюрпризом. Спасибо, буду обращаться еще.</p>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-card bg-white p-6 rounded-lg">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Игорь" class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Игорь</h4>
<p class="text-gray-500 text-sm">14.02.2025</p>
</div>
</div>
<p class="text-gray-600">Сделал онлайн заказ для близких мне людей, так как сам нахожусь в другом регионе Казахстана. Девчата просто молодцы! Очень оперативно подобрали красивые варианты букетов, оформили и в назначенное время точно доставили по указанным адресам.</p>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-card bg-white p-6 rounded-lg">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Ольга В." class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Ольга В.</h4>
<p class="text-gray-500 text-sm">28.04.2022</p>
</div>
</div>
<p class="text-gray-600">Хотела бы поблагодарить коллектив компании «Цветомания» за качественно выполненную работу! Замечательный букет, своевременная доставка и самое главное — приятно удивленная и довольная именинница!</p>
</div>
</div>
<div class="text-center mt-10">
<a href="#" class="inline-block border-2 border-green-600 text-green-600 hover:bg-green-600 hover:text-white font-medium py-3 px-8 rounded-lg transition duration-300">
Все отзывы
</a>
</div>
</div>
</section>
<!-- FAQ -->
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">Частые вопросы</h2>
<div class="w-20 h-1 bg-green-600 mx-auto"></div>
</div>
<div class="max-w-3xl mx-auto">
<!-- FAQ Item 1 -->
<div class="mb-4">
<button class="faq-question w-full text-left bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 flex justify-between items-center">
<span class="font-medium">Как заказать цветы с доставкой?</span>
<i class="fas fa-chevron-down text-green-600 transition-transform duration-300"></i>
</button>
<div class="faq-answer hidden bg-white p-4 rounded-b-lg shadow-md">
<p class="text-gray-600">Заказ оформляется по телефону или на сайте, достаточно поместить необходимые товары в корзину и оплатить их. Стоимость будет указана сразу.</p>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="mb-4">
<button class="faq-question w-full text-left bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 flex justify-between items-center">
<span class="font-medium">Как оплатить заказ цветов с доставкой?</span>
<i class="fas fa-chevron-down text-green-600 transition-transform duration-300"></i>
</button>
<div class="faq-answer hidden bg-white p-4 rounded-b-lg shadow-md">
<p class="text-gray-600">Мы принимаем оплату всеми удобными способами: наличными, по карте, переводом на расчетный счет. Онлайн-оплата проходит через надежный платежный сервис по защищенному протоколу.</p>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="mb-4">
<button class="faq-question w-full text-left bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 flex justify-between items-center">
<span class="font-medium">Можно ли анонимно дарить цветы?</span>
<i class="fas fa-chevron-down text-green-600 transition-transform duration-300"></i>
</button>
<div class="faq-answer hidden bg-white p-4 rounded-b-lg shadow-md">
<p class="text-gray-600">Да, конечно. Если нужно, мы не будем просить оставить ваши персональные данные. Нам нужен только адрес, где будут получать букет.</p>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="mb-4">
<button class="faq-question w-full text-left bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 flex justify-between items-center">
<span class="font-medium">Можно ли купить букет, если его нет на сайте?</span>
<i class="fas fa-chevron-down text-green-600 transition-transform duration-300"></i>
</button>
<div class="faq-answer hidden bg-white p-4 rounded-b-lg shadow-md">
<p class="text-gray-600">Да, у нас есть услуга сборки авторских композиций: вы можете описать, какой букет вам нужен или приложить фото, а мы соберем его в соответствии с вашими пожеланиями или подберем растения по предоставленной фотографии.</p>
</div>
</div>
</div>
<div class="text-center mt-10">
<a href="#" class="inline-block border-2 border-green-600 text-green-600 hover:bg-green-600 hover:text-white font-medium py-3 px-8 rounded-lg transition duration-300">
Все вопросы
</a>
</div>
</div>
</section>
<!-- Custom Bouquet -->
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center bg-green-50 rounded-xl overflow-hidden">
<div class="md:w-1/2 p-8 md:p-12">
<h2 class="text-3xl font-bold mb-4">Не нашли то, что искали?</h2>
<p class="text-gray-600 mb-6">Соберем уникальный заказ! Пришлите фото готового букета, который вам понравился. Мы свяжемся с вами и создадим индивидуальный состав цветов!</p>
<form class="space-y-4">
<div>
<label class="block text-gray-700 mb-2">Прикрепить фото</label>
<div class="flex items-center">
<label class="cursor-pointer bg-white border border-gray-300 rounded-lg px-4 py-2 hover:bg-gray-50 transition duration-300">
<input type="file" class="hidden">
<span>Выбрать файл</span>
</label>
<span class="ml-4 text-gray-500">0 из 10</span>
</div>
</div>
<button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300">
Отправить запрос
</button>
</form>
</div>
<div class="md:w-1/2">
<img src="https://aktau.loveflowers24.kz/wp-content/themes/loveflowers24/images/form.jpg" alt="Соберем букет любой сложности" class="w-full h-full object-cover">
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white pt-12 pb-6">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<a href="#" class="text-2xl font-bold text-white flex items-center mb-4">
<img src="https://aktau.loveflowers24.kz/wp-content/themes/loveflowers24/images/logo.svg" alt="Цветомания" class="h-10 mr-2">
</a>
<p class="text-gray-400 mb-4">Мы доставляем цветы и подарки бесплатно и круглосуточно в Актау и Мангистауской области</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-vk"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-whatsapp"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-telegram"></i></a>
</div>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Навигация</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Главная</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">О компании</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Каталог</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Доставка</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Оплата</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Каталог товаров</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Букеты</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Цветы поштучно</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Цветы в коробке</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Корзины с цветами</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Для кого</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Контакты</h3>
<ul class="space-y-3">
<li class="flex items-center">
<i class="fas fa-phone-alt mr-2 text-gray-400"></i>
<a href="tel:+77711307112" class="text-gray-400 hover:text-white transition duration-300">8 (771) 130-71-12</a>
</li>
<li class="flex items-center">
<i class="far fa-clock mr-2 text-gray-400"></i>
<span class="text-gray-400">Круглосуточно</span>
</li>
<li class="flex items-center">
<i class="far fa-envelope mr-2 text-gray-400"></i>
<a href="mailto:info@loveflowers24.kz" class="text-gray-400 hover:text-white transition duration-300">info@loveflowers24.kz</a>
</li>
<li class="flex items-center">
<i class="fas fa-map-marker-alt mr-2 text-gray-400"></i>
<span class="text-gray-400">г. Актау</span>
</li>
</ul>
</div>
</div>
<div class="pt-6 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">© 2025, «Цветомания»</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Политика конфиденциальности</a>
<a href="#" class="text-gray-400 hover:text-white transition duration-300">Регионы доставки</a>
</div>
</div>
</div>
</footer>
<!-- Floating Action Buttons -->
<div class="fixed bottom-6 right-6 space-y-3 z-50">
<a href="#" class="block w-14 h-14 bg-green-600 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-green-700 transition duration-300">
<i class="fas fa-shopping-cart text-xl"></i>
</a>
<a href="#" class="block w-14 h-14 bg-blue-500 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-blue-600 transition duration-300">
<i class="fab fa-whatsapp text-xl"></i>
</a>
<a href="#" class="block w-14 h-14 bg-blue-400 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-blue-500 transition duration-300">
<i class="fab fa-telegram text-xl"></i>
</a>
</div>
<script>
// Mobile menu toggle
const menuToggle = document.querySelector('.menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', () => {
menuToggle.classList.toggle('active');
mobileMenu.classList.toggle('hidden');
});
// FAQ accordion
const faqQuestions = document.querySelectorAll('.faq-question');
faqQuestions.forEach(question => {
question.addEventListener('click', () => {
const answer = question.nextElementSibling;
const icon = question.querySelector('i');
// Toggle current answer
answer.classList.toggle('hidden');
icon.classList.toggle('fa-chevron-down');
icon.classList.toggle('fa-chevron-up');
// Close other answers
faqQuestions.forEach(q => {
if (q !== question) {
q.nextElementSibling.classList.add('hidden');
q.querySelector('i').classList.remove('fa-chevron-up');
q.querySelector('i').classList.add('fa-chevron-down');
}
});
});
});
// City selector dropdown
const citySelector = document.querySelector('.city-selector');
const cityDropdown = document.querySelector('.city-dropdown');
citySelector.addEventListener('click', () => {
cityDropdown.classList.toggle('hidden');
});
// Close dropdown when clicking outside
document.addEventListener('click', (e) => {
if (!citySelector.contains(e.target) && !cityDropdown.contains(e.target)) {
cityDropdown.classList.add('hidden');
}
});
</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=Hazar/https-project13729071-tilda-ws" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>