Add src/app/calculator/page.tsx
This commit is contained in:
145
src/app/calculator/page.tsx
Normal file
145
src/app/calculator/page.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import { Sparkles, Droplets, Zap } from 'lucide-react';
|
||||
|
||||
export default function CalculatorPage() {
|
||||
const [squareMeters, setSquareMeters] = useState<string>('');
|
||||
const [cleaningType, setCleaningType] = useState<'standard' | 'premium' | 'express'>('standard');
|
||||
const [result, setResult] = useState<number | null>(null);
|
||||
|
||||
const pricesPerSqMeter = {
|
||||
standard: 2500,
|
||||
premium: 4500,
|
||||
express: 3500,
|
||||
};
|
||||
|
||||
const calculateCost = useCallback(() => {
|
||||
const area = parseFloat(squareMeters);
|
||||
if (isNaN(area) || area <= 0) {
|
||||
setResult(null);
|
||||
alert('Пожалуйста, введите корректную площадь в квадратных метрах.');
|
||||
return;
|
||||
}
|
||||
|
||||
const cost = area * pricesPerSqMeter[cleaningType];
|
||||
setResult(cost);
|
||||
}, [squareMeters, cleaningType]);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Центр чистки ковров «Нурсат»"
|
||||
navItems={[
|
||||
{ name: "Главная", id: "/" },
|
||||
{ name: "Услуги", id: "/services" },
|
||||
{ name: "Калькулятор", id: "/calculator" },
|
||||
{ name: "О нас", id: "/#process" },
|
||||
{ name: "Контакты", id: "/#contact" },
|
||||
]}
|
||||
button={{
|
||||
text: "Заказать чистку", href: "/#contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="calculator" data-section="calculator" className="relative w-full overflow-hidden py-16 md:py-20 lg:py-24">
|
||||
<div className="mx-auto flex w-full max-w-[var(--width-content-width)] flex-col gap-8 px-[var(--vw-1_5)] text-center">
|
||||
<h1 className="text-4xl font-bold md:text-5xl">Калькулятор стоимости чистки ковров</h1>
|
||||
<p className="text-lg text-gray-600">Рассчитайте примерную стоимость вашей чистки</p>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-4 justify-center items-center mt-8">
|
||||
<div className="w-full md:w-1/3 flex flex-col gap-2 items-start">
|
||||
<label htmlFor="squareMeters" className="font-semibold text-lg">Площадь ковра (м²):</label>
|
||||
<input
|
||||
id="squareMeters"
|
||||
type="number"
|
||||
value={squareMeters}
|
||||
onChange={(e) => setSquareMeters(e.target.value)}
|
||||
placeholder="Введите площадь"
|
||||
className="w-full p-3 border border-gray-300 rounded-lg text-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full md:w-1/3 flex flex-col gap-2 items-start">
|
||||
<label htmlFor="cleaningType" className="font-semibold text-lg">Тип чистки:</label>
|
||||
<select
|
||||
id="cleaningType"
|
||||
value={cleaningType}
|
||||
onChange={(e) => setCleaningType(e.target.value as 'standard' | 'premium' | 'express')}
|
||||
className="w-full p-3 border border-gray-300 rounded-lg text-lg"
|
||||
>
|
||||
<option value="standard">Стандартная (2,500₸/м²)</option>
|
||||
<option value="premium">Премиум (4,500₸/м²)</option>
|
||||
<option value="express">Срочная (3,500₸/м²)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={calculateCost}
|
||||
className="mt-8 flex items-center justify-center gap-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-4 px-8 rounded-lg transition-colors shadow-lg hover:shadow-xl self-center"
|
||||
>
|
||||
Рассчитать
|
||||
</button>
|
||||
|
||||
{result !== null && (
|
||||
<div className="mt-8 text-center">
|
||||
<h2 className="text-3xl font-bold">Примерная стоимость:</h2>
|
||||
<p className="text-5xl font-extrabold text-blue-600 mt-2">{result.toLocaleString()}₸</p>
|
||||
<p className="text-md text-gray-500 mt-4">*Окончательная стоимость будет уточнена после осмотра ковра.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Компания", items: [
|
||||
{ label: "О нас", href: "/#process" },
|
||||
{ label: "Услуги", href: "/services" },
|
||||
{ label: "Цены", href: "/#pricing" },
|
||||
{ label: "Калькулятор", href: "/calculator" },
|
||||
{ label: "Контакты", href: "/#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Услуги", items: [
|
||||
{ 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" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 Центр чистка ковров «Нурсат». Все права защищены."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user