From 69e2449b3e72e35b22b521cf5992c9b59d7aa387 Mon Sep 17 00:00:00 2001 From: kleap-admin Date: Sun, 18 Jan 2026 18:27:46 +0000 Subject: [PATCH] Update app/booking/page.tsx --- app/booking/page.tsx | 152 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 app/booking/page.tsx diff --git a/app/booking/page.tsx b/app/booking/page.tsx new file mode 100644 index 0000000..2b1eabf --- /dev/null +++ b/app/booking/page.tsx @@ -0,0 +1,152 @@ +"use client"; +import { Container } from "@/components/container"; +import { Heading } from "@/components/heading"; +import { Subheading } from "@/components/subheading"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; +import { Label } from "@/components/ui/label"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import { Calendar as CalendarIcon, Clock, CreditCard, QrCode, Wallet } from "lucide-react"; +import Link from "next/link"; +import { useState } from "react"; + +export default function BookingPage() { + const [step, setStep] = useState(1); + + return ( +
+ +
+
+ Booking Sesi Mentoring + + {/* Step 1: Schedule */} + + +
+
1
+

Pilih Jadwal & Durasi

+
+ +
+
+ + + {["30", "45", "60"].map((min) => ( +
+ + +
+ ))} + +
+ +
+ +
+ {[15, 16, 17, 18].map((day) => ( +
+
Okt
+
{day}
+
+ ))} +
+
+ +
+ +
+ {["19:00", "20:00", "21:00"].map((time) => ( +
+ {time} +
+ ))} +
+
+
+ + + + {/* Step 2: Payment */} + + +
+
2
+

Metode Pembayaran

+
+ + +
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+ + + +
+ +
+ + +

Ringkasan Pesanan

+ +
+ +
+
Budi Santoso
+
Senior Product Manager
+
+
+ +
+
+ Jadwal + 16 Okt, 19:00 +
+
+ Durasi + 60 Menit +
+
+ Total Bayar + Rp 250.000 +
+
+ + + +

+ Dengan membayar, kamu menyetujui Syarat & Ketentuan Mentora. +

+ + +
+
+ +
+ ); +}