diff --git a/src/app/page.tsx b/src/app/page.tsx index 49aacff..6a7325c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -11,22 +11,191 @@ import FaqBase from "@/components/sections/faq/FaqBase"; import ContactCenter from "@/components/sections/contact/ContactCenter"; import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal"; import { + AlertCircle, CheckCircle, Clock, Droplets, MessageSquare, Phone, + Shield, Sparkles, + Truck, Waves, Wind, Zap, ArrowRight, + Home, + Send, + Plus, + Minus, + Radio, + Check, MessageCircle, + ChevronLeft, + ChevronRight, + Lock, + Star, + Users, Award, - PhoneCall + PhoneCall, } from "lucide-react"; +import { useState, useEffect } from "react"; export default function LandingPage() { + const [squareMeters, setSquareMeters] = useState(10); + const [cleaningType, setCleaningType] = useState("Standard"); + const [odorRemoval, setOdorRemoval] = useState(false); + const [sliderPosition, setSliderPosition] = useState(50); + const [currentBeforeAfterIndex, setCurrentBeforeAfterIndex] = useState(0); + const [isDragging, setIsDragging] = useState(false); + const [mapLoading, setMapLoading] = useState(true); + const [ymaps, setYmaps] = useState(null); + const [mapInstance, setMapInstance] = useState(null); + + const cleaningTypePrices: Record = { + Standard: 2500, + Premium: 4500, + Urgent: 3500, + }; + + const basePricePerSqm = cleaningTypePrices[cleaningType] || 2500; + const subtotal = basePricePerSqm * squareMeters; + const odorCost = odorRemoval ? squareMeters * 500 : 0; + const totalPrice = subtotal + odorCost; + + const beforeAfterImages = [ + { + before: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B75MEFIsDC4pJvttFBrgrNRsQ6/uploaded-1774096488811-xievpagm.jpg", after: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B75MEFIsDC4pJvttFBrgrNRsQ6/uploaded-1774096488811-4glyyjmt.jpg", title: "Восстановление яркости цветов", badge: "Восстановление цвета" + }, + { + before: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B75MEFIsDC4pJvttFBrgrNRsQ6/uploaded-1773997364635-pnmy1wtw.jpg", after: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B75MEFIsDC4pJvttFBrgrNRsQ6/uploaded-1773997364636-4en53z94.png", title: "Глубокая чистка восточного ковра", badge: "Премиум чистка" + }, + { + before: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B75MEFIsDC4pJvttFBrgrNRsQ6/uploaded-1774096917946-t435vzpj.jpg", after: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B75MEFIsDC4pJvttFBrgrNRsQ6/uploaded-1774096917947-7qok4c00.png", title: "Удаление пятен от вина", badge: "Удаление пятен" + }, + ]; + + useEffect(() => { + // Load Yandex Maps API + const script = document.createElement('script'); + script.src = 'https://api-maps.yandex.ru/2.1/?apikey=4b0c70a7-60e5-47ea-99e8-da1c79edac0a&lang=ru_RU'; + script.async = true; + script.onload = () => { + if ((window as any).ymaps) { + (window as any).ymaps.ready(() => { + setYmaps((window as any).ymaps); + initializeMap((window as any).ymaps); + }); + } + }; + script.onerror = () => { + setMapLoading(false); + }; + document.head.appendChild(script); + + return () => { + const existingScript = document.querySelector('script[src*="api-maps.yandex.ru"]'); + if (existingScript) { + existingScript.remove(); + } + }; + }, []); + + const initializeMap = (ymapsLib: any) => { + try { + const map = new ymapsLib.Map('yandex-map', { + center: [42.364157, 69.625689], + zoom: 15, + }); + + // Disable scroll zoom + map.behaviors.disable('scrollZoom'); + + // Add marker with home icon + const placemark = new ymapsLib.Placemark( + [42.364157, 69.625689], + { + balloonContent: ` +
+

Центр чистки ковров «Нурсат»

+

Адрес: мкр. Нурсат, 107/2

+

Город: Шымкент, Казахстан

+

+ +7 776 341 30 30 +

+
+ `, + }, + { + preset: 'islands#blueDotIcon', + iconColor: '#0066cc', + } + ); + + map.geoObjects.add(placemark); + placemark.balloon.open(); + + setMapInstance(map); + setMapLoading(false); + } catch (error) { + console.error('Error initializing map:', error); + setMapLoading(false); + } + }; + + const handleWhatsAppOrder = () => { + const message = `Заказ услуги по чистке ковров:\n- Площадь: ${squareMeters} м²\n- Тип чистки: ${cleaningType}\n- Удаление запахов: ${odorRemoval ? 'Да' : 'Нет'}\n- Примерная стоимость: ${totalPrice.toLocaleString()} ₸`; + const encodedMessage = encodeURIComponent(message); + window.open(`https://wa.me/77763413030?text=${encodedMessage}`, "_blank"); + }; + + const goToPrevious = () => { + setCurrentBeforeAfterIndex( + currentBeforeAfterIndex === 0 ? beforeAfterImages.length - 1 : currentBeforeAfterIndex - 1 + ); + }; + + const goToNext = () => { + setCurrentBeforeAfterIndex( + (currentBeforeAfterIndex + 1) % beforeAfterImages.length + ); + }; + + const currentImage = beforeAfterImages[currentBeforeAfterIndex]; + + const handleMouseDown = () => { + setIsDragging(true); + }; + + const handleMouseUp = () => { + setIsDragging(false); + }; + + const handleMouseMove = (e: React.MouseEvent) => { + if (!isDragging) return; + const container = e.currentTarget; + const rect = container.getBoundingClientRect(); + const x = e.clientX - rect.left; + const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100)); + setSliderPosition(percentage); + }; + + const handleTouchStart = () => { + setIsDragging(true); + }; + + const handleTouchEnd = () => { + setIsDragging(false); + }; + + const handleTouchMove = (e: React.TouchEvent) => { + if (!isDragging) return; + const container = e.currentTarget; + const rect = container.getBoundingClientRect(); + const x = e.touches[0].clientX - rect.left; + const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100)); + setSliderPosition(percentage); + }; return ( +
+
+
+ {/* Calculator Form */} +
+
+

Калькулятор стоимости

+

Рассчитайте стоимость чистки ковра за несколько секунд

+
+ + {/* Cleaning Type Dropdown */} +
+ + +
+ + {/* Square Meter Stepper */} +
+ +
+ + setSquareMeters(Math.max(1, parseInt(e.target.value) || 1))} + className="flex-1 text-center text-2xl font-bold outline-none" + aria-label="Площадь ковра" + /> + +
+
+ + {/* Odor Removal Checkbox */} +
+ + +
+
+ + {/* Price Summary Sidebar */} +
+
+

Итоговая стоимость

+ + {/* Trust Badge */} +
+ +
+
100% Гарантия возврата
+
Цена зафиксирована после осмотра
+
+
+ + {/* Price Breakdown */} +
+
+ Базовая услуга: + {subtotal.toLocaleString()} ₸ +
+ {odorRemoval && ( +
+ Удаление запахов: + {odorCost.toLocaleString()} ₸ +
+ )} +
+ Площадь: + {squareMeters} м² +
+
+ Тип чистки: + {cleaningType} +
+
+ + {/* Total Price */} +
+
Примерная стоимость
+
{totalPrice.toLocaleString()} ₸
+
*Финальная цена уточняется после осмотра ковра
+
+ + {/* Phone Call Button */} + + + Позвонить + + + {/* WhatsApp Order Button */} + +
+
+
+
+
+ +
+
+
+ {/* Header */} +
+

Результат нашей работы

+

Посмотрите впечатляющие трансформации наших проектов — от грязных ковров к идеальной чистоте

+
+ + {/* Before/After Carousel */} +
+ {/* Interactive Slider Container */} +
+
+ {/* Before Image (Full Background) */} +
+ Before setMapLoading(false)} + /> + {mapLoading && ( +
+
+
+

Загрузка карты мкр. Нурсат...

+
+
+ )} +
+ ДО +
+
+ + {/* After Image (Clipped by slider) */} +
+ After +
+ ПОСЛЕ +
+
+ + {/* Slider Handle */} +
+ {/* Handle Button */} +
+
+ + +
+
+
+
+ + {/* Badge */} +
+ {currentImage.badge} +
+
+ + {/* Info and Navigation */} +
+ {/* Title */} +
+

{currentImage.title}

+

+ Проект {currentBeforeAfterIndex + 1} из {beforeAfterImages.length} +

+
+ + {/* Navigation Buttons */} +
+ + +
+
+ + {/* Dots Navigation */} +
+ {beforeAfterImages.map((_, index) => ( +
+
+
+
+
+ +
+
+
+ {/* Header */} +
+

Наше местоположение

+

Найдите нас по адресу мкр. Нурсат, 107/2 в Шымкенте. Проведем консультацию по всем вопросам чистки ковров.

+
+ + {/* Yandex Map Container */} +
+ {mapLoading && ( +
+
+
+

Загрузка карты мкр. Нурсат...

+
+
+ )} +
+
+ + {/* Contact Information */} +
+
+

Адрес

+

мкр. Нурсат, 107/2

+

Шымкент, Казахстан

+
+
+

Телефон

+ + + +7 776 341 30 30 + +

Доступны с 9:00 до 20:00

+
+
+

WhatsApp

+ + Написать сообщение + +

Быстрый ответ на ваши вопросы

+
+
+
+
+
+
@@ -186,7 +683,7 @@ export default function LandingPage() { { id: "3", name: "Жанар К.", handle: "Клиент", testimonial: "Профессиональный подход и внимательное отношение. Цена честная, работа быстрая. Буду заказывать еще. Спасибо!", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B75MEFIsDC4pJvttFBrgrNRsQ6/uploaded-1773838829021-h67xp226.jpg?_wi=1", imageAlt: "Клиент Марат" - } + }, ]} showRating={true} animationType="slide-up" @@ -208,22 +705,22 @@ export default function LandingPage() { price: "от 2,500₸", subtitle: "за м² чистки", buttons: [{ text: "Рассчитать стоимость", href: "#calculator" }], features: [ "Стандартная чистка ковра", "Использование эко-средств", "Быстрая сушка", "Консультация специалиста" - ] + ], }, { id: "premium", badge: "Премиум", badgeIcon: Sparkles, price: "от 4,500₸", subtitle: "за м² химчистки", buttons: [{ text: "Рассчитать стоимость", href: "#calculator" }], features: [ "Глубокая химическая чистка", "Удаление пятен и запахов", "Антибактериальная обработка", "Водоотталкивающая защита" - ] + ], }, { id: "express", badge: "Срочно", badgeIcon: Zap, price: "от 3,500₸", subtitle: "за м² срочной доставки", buttons: [{ text: "Рассчитать стоимость", href: "#calculator" }], features: [ "Выездная чистка на дом", "Экспресс-обработка", "Быстрая доставка (24 часа)", "Гарантия качества" - ] - } + ], + }, ]} />
@@ -320,25 +817,25 @@ export default function LandingPage() { { label: "О нас", href: "#process" }, { label: "Услуги", href: "/services" }, { label: "Цены", href: "#pricing" }, - { label: "Контакты", href: "#contact" } - ] + { label: "Контакты", href: "#contact" }, + ], }, { title: "Услуги", items: [ { label: "Чистка ковров", href: "/services" }, { label: "Химчистка", href: "/services" }, { label: "Удаление пятен", href: "/services" }, - { label: "Выездная чистка", href: "/services" } - ] + { label: "Выездная чистка", href: "/services" }, + ], }, { title: "Контакты", items: [ { label: "Телефон: +7 776 341 30 30", href: "tel:+77763413030" }, { label: "Адрес: Шымкент", href: "https://yandex.kz/maps/-/CPRbzOPdL" }, { label: "WhatsApp", href: "https://wa.me/77763413030?text=Здравствуйте!%20Я%20хочу%20узнать%20больше%20о%20ваших%20услугах%20по%20чистке%20ковров." }, - { label: "Email: info@nursat.kz", href: "mailto:info@nursat.kz" } - ] - } + { label: "Email: info@nursat.kz", href: "mailto:info@nursat.kz" }, + ], + }, ]} copyrightText="© 2024 Центр чистка ковров «Нурсат». Все права защищены." />