From 2383f75fe2f2cc2c344c86490f8df9d998dcfa9a Mon Sep 17 00:00:00 2001
From: Sergey Bolshakov <spooky5ya@yandex.ru>
Date: Fri, 12 Dec 2025 22:54:46 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86?=
 =?UTF-8?q?=D0=B0=20=D0=B1=D1=80=D0=BE=D0=BD=D0=B8=D1=80=D0=BE=D0=B2=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../catalog/[id]/components/BookingWidget.tsx |   3 +
 src/app/catalog/page.tsx                      |  14 +-
 src/app/components/YachtGrid.tsx              |  12 +-
 src/app/confirm/page.tsx                      | 206 ++++++++++++++++++
 src/app/layout.tsx                            |   2 +-
 5 files changed, 228 insertions(+), 9 deletions(-)
 create mode 100644 src/app/confirm/page.tsx

diff --git a/src/app/catalog/[id]/components/BookingWidget.tsx b/src/app/catalog/[id]/components/BookingWidget.tsx
index a920e38..8c823e4 100644
--- a/src/app/catalog/[id]/components/BookingWidget.tsx
+++ b/src/app/catalog/[id]/components/BookingWidget.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { DatePicker } from "@/components/ui/date-picker";
 import { GuestPicker } from "@/components/form/guest-picker";
@@ -10,6 +11,7 @@ interface BookingWidgetProps {
 }
 
 export function BookingWidget({ price }: BookingWidgetProps) {
+    const router = useRouter();
     const [departureDate] = useState<Date | undefined>();
     const [arrivalDate] = useState<Date | undefined>();
     const [guests, setGuests] = useState({ adults: 1, children: 0 });
@@ -26,6 +28,7 @@ export function BookingWidget({ price }: BookingWidgetProps) {
             arrivalDate,
             guests,
         });
+        router.push("/confirm");
     };
 
     return (
diff --git a/src/app/catalog/page.tsx b/src/app/catalog/page.tsx
index 84667ac..9b386ff 100644
--- a/src/app/catalog/page.tsx
+++ b/src/app/catalog/page.tsx
@@ -149,7 +149,9 @@ export default function CatalogPage() {
                                 </p>
                             </div>
                             <div className="flex items-center gap-1 w-full sm:w-auto">
-                                <div className="text-base text-[#999999]">Сортировка:</div>
+                                <div className="text-base text-[#999999]">
+                                    Сортировка:
+                                </div>
                                 <Select defaultValue="default">
                                     <SelectTrigger
                                         className="w-full"
@@ -181,8 +183,12 @@ export default function CatalogPage() {
                         {/* Yacht Grid */}
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                             {yachts.map((yacht, idx) => (
-                                <div key={idx} className="relative">
-                                    <Card className="overflow-hidden bg-white text-gray-900 border border-gray-200">
+                                <Link
+                                    key={idx}
+                                    href={`/catalog/${idx + 1}`}
+                                    className="block"
+                                >
+                                    <Card className="overflow-hidden bg-white text-gray-900 border border-gray-200 cursor-pointer transition-all duration-200 hover:shadow-lg">
                                         <CardHeader className="p-0 relative">
                                             <div className="relative">
                                                 {/* Quick Booking Badge */}
@@ -252,7 +258,7 @@ export default function CatalogPage() {
                                             </div>
                                         </CardContent>
                                     </Card>
-                                </div>
+                                </Link>
                             ))}
                         </div>
                     </div>
diff --git a/src/app/components/YachtGrid.tsx b/src/app/components/YachtGrid.tsx
index 5e69cbf..a77afe0 100644
--- a/src/app/components/YachtGrid.tsx
+++ b/src/app/components/YachtGrid.tsx
@@ -84,8 +84,12 @@ export default function YachtGrid() {
                 {/* Yacht Grid */}
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
                     {yachts.map((yacht, idx) => (
-                        <div key={idx} className="relative">
-                            <Card className="overflow-hidden bg-white text-gray-900">
+                        <Link
+                            key={idx}
+                            href={`/catalog/${idx + 1}`}
+                            className="block"
+                        >
+                            <Card className="overflow-hidden bg-white text-gray-900 cursor-pointer transition-all duration-200 hover:shadow-lg">
                                 <CardHeader className="p-0 relative">
                                     <div className="relative">
                                         {/* Best Offer Badge - над карточкой */}
@@ -141,7 +145,7 @@ export default function YachtGrid() {
                                                 <span>{yacht.length}</span>
                                             </div>
                                         </div>
-                                        
+
                                         {/* Правая колонка - цена и футы */}
                                         <div className="space-y-2">
                                             <div className="w-fit">
@@ -169,7 +173,7 @@ export default function YachtGrid() {
                                     </div>
                                 </CardContent>
                             </Card>
-                        </div>
+                        </Link>
                     ))}
                 </div>
 
diff --git a/src/app/confirm/page.tsx b/src/app/confirm/page.tsx
new file mode 100644
index 0000000..c21bcc8
--- /dev/null
+++ b/src/app/confirm/page.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import Link from "next/link";
+import { User, ArrowUpRight, Map } from "lucide-react";
+import { useState } from "react";
+
+export default function ConfirmPage() {
+    const [promocode, setPromocode] = useState("");
+
+    return (
+        <main className="bg-[#f4f4f4] grow">
+            <div className="container max-w-6xl mx-auto px-4 py-6">
+                {/* Breadcrumbs */}
+                <div className="mb-6 text-sm text-[#999999] flex items-center gap-[16px]">
+                    <Link href="/">
+                        <span className="cursor-pointer hover:text-[#333333] transition-colors">
+                            Аренда яхты
+                        </span>
+                    </Link>
+                    <span>&gt;</span>
+                    <span className="text-[#333333]">Ваше бронирование</span>
+                </div>
+
+                <div className="flex flex-col lg:flex-row gap-6">
+                    {/* Левая колонка - Информация о яхте и ценах */}
+                    <div className="w-full lg:w-[336px] flex-shrink-0 flex flex-col gap-6">
+                        <div className="bg-white rounded-[16px]">
+                            <div className="p-4">
+                                {/* Изображение яхты */}
+                                <div className="relative mb-5">
+                                    <Image
+                                        src="/images/yachts/yacht1.jpg"
+                                        alt="Яхта"
+                                        width={400}
+                                        height={250}
+                                        className="w-full h-48 object-cover rounded-[8px]"
+                                    />
+                                    {/* Плашка владельца */}
+                                    <div className="absolute top-2 left-2">
+                                        <div className="bg-white backdrop-blur-sm px-4 py-2 rounded-[8px] flex items-center gap-2">
+                                            <User
+                                                size={22}
+                                                className="text-[#999999]"
+                                            />
+                                            <div className="flex flex-col gap-[4px]">
+                                                <span className="text-[#999999]">
+                                                    Владелец
+                                                </span>
+                                                <span className="text-[#333333] font-bold">
+                                                    Денис
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                {/* Название яхты */}
+                                <h3 className="text-base text-[#333333] pb-3 border-b border-[#DFDFDF] mb-4">
+                                    Яхта
+                                </h3>
+
+                                {/* Детализация цены */}
+                                <div>
+                                    <h4 className="text-base font-bold text-[#333333] mb-4">
+                                        Детализация цены
+                                    </h4>
+                                    <div>
+                                        <div className="flex justify-between items-center mb-4">
+                                            <span className="text-[#333333]">
+                                                26 400₽ x 2ч
+                                            </span>
+                                            <span className="text-[#333333]">
+                                                52 800 ₽
+                                            </span>
+                                        </div>
+                                        <div className="flex justify-between items-center border-b border-[#DFDFDF] pb-4 mb-4">
+                                            <span className="text-[#333333]">
+                                                Услуги
+                                            </span>
+                                            <span className="text-[#333333]">
+                                                0 Р
+                                            </span>
+                                        </div>
+                                        <div className="flex justify-between items-center">
+                                            <span className="text-[#333333]">
+                                                Итого:
+                                            </span>
+                                            <span className="text-[#333333] font-bold">
+                                                52 800 Р
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="bg-white rounded-[16px]">
+                            <div className="p-6">
+                                {/* Промокод */}
+                                <div className="w-full flex gap-2">
+                                    <input
+                                        type="text"
+                                        placeholder="Промокод"
+                                        value={promocode}
+                                        onChange={(e) =>
+                                            setPromocode(e.target.value)
+                                        }
+                                        className="flex-1 min-w-0 px-4 sm:px-8 py-5 h-[64px] border border-[#DFDFDF] rounded-full text-base text-[#757575] focus:outline-none focus:ring-2 focus:ring-[#008299] focus:border-transparent"
+                                    />
+                                    <Button
+                                        variant="default"
+                                        className="flex-shrink-0 h-[64px] w-[64px] bg-[#2D908D] hover:bg-[#007088] text-white rounded-full p-0 transition-colors duration-200"
+                                    >
+                                        <ArrowUpRight size={12} />
+                                    </Button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Правая колонка - Подтверждение бронирования */}
+                    <div className="flex-1">
+                        <div className="bg-white rounded-[16px]">
+                            <div className="p-8">
+                                {/* Заголовок */}
+                                <h1 className="text-2xl text-[#333333] mb-4">
+                                    Проверьте данные
+                                </h1>
+                                <h2 className="text-base text-[#333333] font-bold mb-4">
+                                    Ваше бронирование
+                                </h2>
+
+                                {/* Сведения о бронировании */}
+                                <div className="grid grid-cols-2 gap-4 mb-4">
+                                    {/* Даты */}
+                                    <div className="grow-1 border border-[#DFDFDF] rounded-[8px] p-4">
+                                        <div className="text-[#333333] mb-1">
+                                            Даты
+                                        </div>
+                                        <div className="text-base text-[#999999]">
+                                            9 августа в 00:00 — 9 августа в
+                                            02:00
+                                        </div>
+                                    </div>
+
+                                    {/* Гости */}
+                                    <div className="grow-1 border border-[#DFDFDF] rounded-[8px] p-4">
+                                        <div>
+                                            <div className="text-[#333333] mb-1">
+                                                Гости
+                                            </div>
+                                            <div className="text-base text-[#999999]">
+                                                1 гость
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {/* Дополнительные услуги */}
+                                <div className="flex items-center h-[88px] border border-[#DFDFDF] rounded-[8px] p-4 mb-6">
+                                    <div className="text-base text-[#333333]">
+                                        Нет дополнительных услуг
+                                    </div>
+                                </div>
+
+                                {/* Правила отмены */}
+                                <h3 className="text-base font-bold text-[#333333] mb-4">
+                                    Правила отмены
+                                </h3>
+
+                                <p className="text-[#333333]">
+                                    При отмене до 10 мая вы получите частичный
+                                    возврат.
+                                </p>
+                                <Link
+                                    href="#"
+                                    className="text-[#2D908D] hover:text-[#007088] font-bold transition-colors"
+                                >
+                                    Подробнее
+                                </Link>
+
+                                {/* Указание времени и кнопка отправки */}
+                                <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mt-6">
+                                    <div className="flex items-center gap-2 text-sm text-[#666666]">
+                                        <Map size={20} />
+                                        <span className="text-[#333333]">
+                                            По местному времени яхты
+                                        </span>
+                                    </div>
+                                    <Button
+                                        variant="default"
+                                        size="lg"
+                                        className="flex-shrink-0 h-[64px] w-[270px] bg-[#2D908D] hover:bg-[#007088] text-white font-bold rounded-full p-0 transition-colors duration-200 hover:shadow-lg"
+                                    >
+                                        Отправить заявку
+                                    </Button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c353fcb..972a708 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -18,7 +18,7 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="ru">
-            <body className={inter.className}>
+            <body className={`${inter.className} flex flex-col min-h-screen`}>
                 <Header />
                 {children}
                 <Footer />