diff --git a/src/app/appointment/page.tsx b/src/app/appointment/page.tsx new file mode 100644 index 0000000..33491d2 --- /dev/null +++ b/src/app/appointment/page.tsx @@ -0,0 +1,292 @@ +"use client"; + +import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple"; +import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit"; +import ContactForm from "@/components/form/ContactForm"; +import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis"; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import { Calendar, User, Sparkles } from "lucide-react"; +import { useState } from "react"; + +export default function AppointmentPage() { + const [selectedService, setSelectedService] = useState(""); + const [selectedDate, setSelectedDate] = useState(""); + const [formData, setFormData] = useState({ + fullName: "", email: "", phone: "", service: "", date: "", time: ""}); + + const services = [ + { id: "makeup", name: "Professional Makeup Consultation", duration: "60 min", price: "$75" }, + { id: "skincare", name: "Skincare Analysis & Treatment", duration: "90 min", price: "$120" }, + { id: "makeover", name: "Complete Beauty Makeover", duration: "120 min", price: "$180" }, + { id: "bridal", name: "Bridal Beauty Package", duration: "180 min", price: "$250" }, + ]; + + const timeSlots = [ + "9:00 AM", "10:00 AM", "11:00 AM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM", "5:00 PM"]; + + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData((prev) => ({ + ...prev, + [name]: value, + })); + if (name === "service") setSelectedService(value); + if (name === "date") setSelectedDate(value); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + console.log("Appointment booked:", formData); + alert(`Appointment booked for ${formData.fullName} on ${formData.date} at ${formData.time}`); + setFormData({ fullName: "", email: "", phone: "", service: "", date: "", time: "" }); + setSelectedService(""); + setSelectedDate(""); + }; + + return ( + + + +
+ +
+ +
+
+
+ {/* Services Section */} +
+
+

+ + Our Services +

+

Select a service to get started

+
+
+ {services.map((service) => ( +
+ setFormData((prev) => ({ + ...prev, + service: service.id, + })) + } + className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${ + selectedService === service.id + ? "border-primary-cta bg-primary-cta/10" + : "border-background-accent hover:border-primary-cta/50" + }`} + > +

{service.name}

+

+ {service.duration} • {service.price} +

+
+ ))} +
+
+ + {/* Booking Form Section */} +
+
+

+ + Your Information +

+

Complete your booking details

+
+
+ {/* Client Name */} +
+ + +
+ + {/* Email */} +
+ + +
+ + {/* Phone */} +
+ + +
+ + {/* Date Selection */} +
+ + +
+ + {/* Time Selection */} +
+ + +
+ + {/* Service Confirmation */} + {selectedService && ( +
+

+ Selected Service:{" "} + + {services.find((s) => s.id === selectedService)?.name} + +

+
+ )} + + {/* Submit Button */} + +
+
+
+
+
+ + + + ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 4f7d192..c3268bf 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,1420 +1,33 @@ import type { Metadata } from "next"; -import { Halant } from "next/font/google"; -import { Inter } from "next/font/google"; -import { Nunito } from "next/font/google"; +import { Sora } from "next/font/google"; import "./globals.css"; -import { ServiceWrapper } from "@/components/ServiceWrapper"; -import Tag from "@/tag/Tag"; +import { ServiceWrapper } from "@/providers/serviceWrapper/ServiceWrapper"; +import { Tag } from "@/components/tag/Tag"; -const halant = Halant({ - variable: "--font-halant", subsets: ["latin"], - weight: ["300", "400", "500", "600", "700"], -}); - -const inter = Inter({ - variable: "--font-inter", subsets: ["latin"], -}); - -const nunito = Nunito({ - variable: "--font-nunito", subsets: ["latin"], +const sora = Sora({ + variable: "--font-sora", subsets: ["latin"], + weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], }); export const metadata: Metadata = { - title: "Radiance Beauty | Premium Cosmetics & Skincare", description: "Discover luxury cosmetics and skincare products made with natural ingredients. Cruelty-free, dermatologist-tested beauty essentials.", keywords: "cosmetics, skincare, makeup, beauty products, natural ingredients, cruelty-free beauty, luxury cosmetics", robots: { - index: true, - follow: true, - }, - openGraph: { - title: "Radiance Beauty | Premium Cosmetics & Skincare", description: "Discover luxury cosmetics and skincare products made with natural ingredients.", siteName: "Radiance Beauty", type: "website", images: [ - { - url: "http://img.b2bpic.net/free-photo/assortment-cosmetic-bottles-jars_23-2152029108.jpg", alt: "Radiance Beauty cosmetics collection"}, - ], - }, - twitter: { - card: "summary_large_image", title: "Radiance Beauty | Premium Cosmetics & Skincare", description: "Discover luxury cosmetics and skincare products made with natural ingredients.", images: ["http://img.b2bpic.net/free-photo/assortment-cosmetic-bottles-jars_23-2152029108.jpg"], - }, -}; + title: "Radiance Beauty - Premium Cosmetics & Skincare", description: "Discover premium cosmetics and skincare crafted with natural ingredients. Cruelty-free, dermatologist-tested beauty products for all skin types."}; export default function RootLayout({ children, -}: Readonly<{ +}: { children: React.ReactNode; -}>) { +}) { return ( - - + + {children} - +