diff --git a/src/app/appointment/page.tsx b/src/app/appointment/page.tsx new file mode 100644 index 0000000..42d1c53 --- /dev/null +++ b/src/app/appointment/page.tsx @@ -0,0 +1,253 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import { useState } from "react"; +import Link from "next/link"; +import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline"; +import HeroSplit from "@/components/sections/hero/HeroSplit"; +import ContactSplit from "@/components/sections/contact/ContactSplit"; +import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow"; +import ContactCTA from "@/components/sections/contact/ContactCTA"; +import FooterCard from "@/components/sections/footer/FooterCard"; +import Input from "@/components/form/Input"; +import { Calendar, Clock, Eye, Instagram, Facebook, Linkedin, MapPin } from "lucide-react"; + +export default function AppointmentPage() { + const navItems = [ + { name: "Collections", id: "collections" }, + { name: "Services", id: "services" }, + { name: "About", id: "about" }, + { name: "Contact", id: "contact" }, + ]; + + const navButton = { + text: "Book Appointment", href: "/appointment"}; + + const [formData, setFormData] = useState({ + name: "", email: "", phone: "", date: "", time: "", service: "", message: ""}); + + const handleInputChange = (field: string, value: string) => { + setFormData((prev) => ({ + ...prev, + [field]: value, + })); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + console.log("Appointment booked:", formData); + // Handle form submission here + }; + + return ( + + {/* Navbar */} + + + + + {/* Hero Section */} + + + + + {/* Booking Form Section */} + + + + + Schedule Your Appointment + Fill out the form below and we'll confirm your appointment shortly + + + + + + Full Name * + handleInputChange("name", value)} + placeholder="Your full name" + required + /> + + + Email * + handleInputChange("email", value)} + placeholder="your@email.com" + type="email" + required + /> + + + + + + Phone * + handleInputChange("phone", value)} + placeholder="(123) 456-7890" + type="tel" + required + /> + + + Preferred Date * + handleInputChange("date", value)} + placeholder="mm/dd/yyyy" + type="date" + required + /> + + + + + + Preferred Time * + handleInputChange("time", value)} + placeholder="Select time" + type="time" + required + /> + + + Service Type * + handleInputChange("service", e.target.value)} + className="w-full px-4 py-2 border border-gray-300 rounded bg-white" + required + > + Select a service + Comprehensive Eye Exam + Frame Fitting Consultation + Frame Adjustment & Repair + Lens Replacement + General Consultation + + + + + + Additional Notes + handleInputChange("message", e.target.value)} + placeholder="Tell us about your needs or preferences..." + className="w-full px-4 py-2 border border-gray-300 rounded bg-white" + rows={4} + /> + + + + Book Appointment + + + + + + + {/* Service Types */} + + + + + {/* Locations Section */} + + + + + {/* Footer */} + + + ); +} diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx index 3f5d83a..b7d24a6 100644 --- a/src/app/contact/page.tsx +++ b/src/app/contact/page.tsx @@ -17,9 +17,7 @@ export default function ContactPage() { ]; const navButton = { - text: "Book Appointment", - href: "/appointment", - }; + text: "Book Appointment", href: "/appointment"}; return ( ); -} \ No newline at end of file +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 33e3a04..8384883 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,38 +4,23 @@ import { Inter } from "next/font/google"; import "./globals.css"; const publicSans = Public_Sans({ - variable: "--font-public-sans", - subsets: ["latin"], + variable: "--font-public-sans", subsets: ["latin"], }); const inter = Inter({ - variable: "--font-inter", - subsets: ["latin"], + variable: "--font-inter", subsets: ["latin"], }); export const metadata: Metadata = { - title: "Pearle - Premium Eyewear & Expert Optical Services", - description: "Discover premium eyewear and expert optical services at Pearle. Certified opticians, personalized frame fitting, and eye care solutions. Book your appointment today.", - keywords: "eyewear, optical services, glasses, frames, optician, eye exam, premium eyewear, frame fitting, vision care", - openGraph: { - title: "Pearle - Premium Eyewear & Optical Services", - description: "Expert eyewear boutique offering premium frames, professional eye exams, and personalized consultations.", - type: "website", - siteName: "Pearle", - images: [ + title: "Pearle - Premium Eyewear & Expert Optical Services", description: "Discover premium eyewear and expert optical services at Pearle. Certified opticians, personalized frame fitting, and eye care solutions. Book your appointment today.", keywords: "eyewear, optical services, glasses, frames, optician, eye exam, premium eyewear, frame fitting, vision care", openGraph: { + title: "Pearle - Premium Eyewear & Optical Services", description: "Expert eyewear boutique offering premium frames, professional eye exams, and personalized consultations.", type: "website", siteName: "Pearle", images: [ { - url: "http://img.b2bpic.net/free-photo/pretty-young-girl-with-brunette-hair-stylish-makeup-accessories-wearing-beret-white-red-clothes-holding-door-handle-looking-away_197531-28147.jpg", - alt: "Pearle premium eyewear", - }, + url: "http://img.b2bpic.net/free-photo/pretty-young-girl-with-brunette-hair-stylish-makeup-accessories-wearing-beret-white-red-clothes-holding-door-handle-looking-away_197531-28147.jpg", alt: "Pearle premium eyewear"}, ], }, twitter: { - card: "summary_large_image", - title: "Pearle - Premium Eyewear", - description: "Discover your perfect frames at Pearle. Expert fitting, premium quality, certified opticians.", - images: [ - "http://img.b2bpic.net/free-photo/pretty-young-girl-with-brunette-hair-stylish-makeup-accessories-wearing-beret-white-red-clothes-holding-door-handle-looking-away_197531-28147.jpg", - ], + card: "summary_large_image", title: "Pearle - Premium Eyewear", description: "Discover your perfect frames at Pearle. Expert fitting, premium quality, certified opticians.", images: [ + "http://img.b2bpic.net/free-photo/pretty-young-girl-with-brunette-hair-stylish-makeup-accessories-wearing-beret-white-red-clothes-holding-door-handle-looking-away_197531-28147.jpg"], }, robots: { index: true, @@ -1422,4 +1407,4 @@ export default function RootLayout({
Fill out the form below and we'll confirm your appointment shortly