Update src/app/page.tsx

Merge version_1 into main

src/app/contact/page.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { useRouter } from 'next/navigation';
+
+export default function ContactPage() {
+  const router = useRouter();
+
+  const handleSubmit = (data: Record<string, string>) => {
+    console.log('Contact form submitted:', data);
+    // Here you would typically send the data to a backend service
+    // For now, we'll just log it and redirect
+    alert('Thank you for contacting us! We will get back to you soon.');
+    router.push('/');
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="compact"
+      sizing="mediumSizeLargeTitles"
+      background="none"
+      cardStyle="inset"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "Why Us", id: "why-us" },
+            { name: "Reviews", id: "reviews" },
+            { name: "Book Now", id: "contact" },
+            { name: "Contact", id: "contact" }
+          ]}
+          brandName="OnSpot"
+          bottomLeftText="Ottawa, Ontario"
+          bottomRightText="(613) 716-5686"
+        />
+      </div>
+
+      <div id="contact-form" data-section="contact-form">
+        <ContactSplitForm
+          title="Get In Touch"
+          description="Have questions about our services? Want to book a detailing appointment? Fill out the form below and we'll get back to you as soon as possible. We're available 24/7 to serve you."
+          inputs={[
+            { name: 'name', type: 'text', placeholder: 'Full Name', required: true },
+            { name: 'email', type: 'email', placeholder: 'Email Address', required: true },
+            { name: 'phone', type: 'tel', placeholder: 'Phone Number', required: true }
+          ]}
+          textarea={{
+            name: 'message',
+            placeholder: 'Tell us about your vehicle and what service you\'re interested in...',
+            rows: 6,
+            required: true
+          }}
+          useInvertedBackground={false}
+          imageSrc="http://img.b2bpic.net/free-photo/man-car-clean-using-brush-clean-up-all-details-inside-vehicle_1303-30586.jpg?_wi=3"
+          imageAlt="OnSpot mobile detailing service"
+          mediaAnimation="none"
+          mediaPosition="right"
+          buttonText="Send Message"
+          onSubmit={handleSubmit}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="OnSpot Mobile Detailing"
+          copyrightText="© 2025 OnSpot Mobile Detailing. All rights reserved."
+          columns={[
+            {
+              title: "Service",              items: [
+                { label: "Interior Detailing", href: "/" },
+                { label: "Exterior Wash & Wax", href: "/" },
+                { label: "Deep Cleaning", href: "/" },
+                { label: "Stain Removal", href: "/" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/" },
+                { label: "Reviews", href: "/" },
+                { label: "Home", href: "/" }
+              ]
+            },
+            {
+              title: "Contact",              items: [
+                { label: "Phone: (613) 716-5686", href: "tel:+16137165686" },
+                { label: "180 Beausoleil Dr, Ottawa, ON K1N 8X8", href: "#" },
+                { label: "Available 24/7", href: "#" },
+                { label: "Service Area: Ottawa & Surrounding", href: "#" }
+              ]
+            }
+          ]}
+          onPrivacyClick={() => console.log('Privacy clicked')}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,64 +1,17 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
-import { Inter } from "next/font/google";
-import { Manrope } from "next/font/google";
-import { DM_Sans } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/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 manrope = Manrope({
-  variable: "--font-manrope",  subsets: ["latin"],
-});
-
-const dmSans = DM_Sans({
-  variable: "--font-dm-sans",  subsets: ["latin"],
-});
 
 export const metadata: Metadata = {
-  title: "Premium Mobile Car Detailing Ottawa | OnSpot - 24/7 Service",  description: "Professional mobile car detailing in Ottawa. We come to you! 5-star rated, 24/7 availability. Interior & exterior detailing, deep cleaning, stain removal. Book now.",  keywords: "mobile car detailing Ottawa, professional car detailing, car wash Ottawa, interior detailing, exterior detailing, mobile auto detailing, 24/7 car service",  metadataBase: new URL("https://onspotdetailing.ca"),
+  title: "OnSpot Mobile Detailing",  description: "Premium mobile car detailing in Ottawa. Professional interior and exterior detailing. 5-Star Rated. Available 24/7."};
-  alternates: {
-    canonical: "https://onspotdetailing.ca"
-  },
-  openGraph: {
-    title: "Premium Mobile Car Detailing in Ottawa",    description: "Professional car detailing service that comes to you. 5-star rated. Available 24/7. Book your appointment today!",    url: "https://onspotdetailing.ca",    siteName: "OnSpot Mobile Detailing",    type: "website",    images: [
-      {
-        url: "http://img.b2bpic.net/free-photo/man-car-clean-using-brush-clean-up-all-details-inside-vehicle_1303-30586.jpg",        alt: "Premium car detailing service"
-      }
-    ]
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Premium Mobile Car Detailing in Ottawa",    description: "Professional detailing service. 5-star rated. We come to you! 24/7 availability.",    images: ["http://img.b2bpic.net/free-photo/man-car-clean-using-brush-clean-up-all-details-inside-vehicle_1303-30586.jpg"]
-  },
-  robots: {
-    index: true,
-    follow: true
-  }
-};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en">
-      <ServiceWrapper>
+      <body>{children}
-        <body
-          className={`${halant.variable} ${inter.variable} ${manrope.variable} ${dmSans.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1426,7 +1379,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
 }

src/app/page.tsx

@@ -6,12 +6,22 @@ import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleC
 import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Sparkles, Quote, Star, Clock, MapPin, Users, DollarSign, Calendar } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 
 export default function LandingPage() {
+  const router = useRouter();
+
+  const handleBookNowClick = () => {
+    router.push('/contact');
+  };
+
+  const handleCallClick = () => {
+    window.location.href = 'tel:+16137165686';
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -31,7 +41,7 @@ export default function LandingPage() {
             { name: "Services", id: "services" },
             { name: "Why Us", id: "why-us" },
             { name: "Reviews", id: "reviews" },
-            { name: "Book Now", id: "booking" },
+            { name: "Book Now", id: "contact" },
             { name: "Contact", id: "contact" }
           ]}
           brandName="OnSpot"
@@ -77,8 +87,8 @@ export default function LandingPage() {
             }
           ]}
           buttons={[
-            { text: "Book Now", href: "booking" },
+            { text: "Book Now", onClick: handleBookNowClick },
-            { text: "Call (613) 716-5686", href: "tel:+16137165686" }
+            { text: "Call (613) 716-5686", onClick: handleCallClick }
           ]}
           buttonAnimation="slide-up"
           carouselPosition="right"
@@ -187,32 +197,6 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="gallery" data-section="gallery">
-        <ProductCardFour
-          title="Before & After Gallery"
-          description="See the stunning transformations we deliver for our clients"
-          tag="Results Showcase"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          gridVariant="bento-grid"
-          animationType="slide-up"
-          products={[
-            {
-              id: "1",              name: "Luxury SUV Transformation",              price: "Complete Detail",              variant: "Before & After",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-exterior_23-2148194135.jpg?_wi=2",              imageAlt: "Luxury SUV before and after detailing"
-            },
-            {
-              id: "2",              name: "Executive Sedan Shine",              price: "Premium Service",              variant: "Before & After",              imageSrc: "http://img.b2bpic.net/free-photo/person-working-car-wrapping_23-2149342625.jpg?_wi=2",              imageAlt: "Executive sedan before and after detailing"
-            },
-            {
-              id: "3",              name: "Interior Restoration",              price: "Deep Clean",              variant: "Before & After",              imageSrc: "http://img.b2bpic.net/free-photo/man-hoovering-car-cabin-garage_1157-36597.jpg",              imageAlt: "Interior restoration before and after"
-            },
-            {
-              id: "4",              name: "Sports Car Polish",              price: "Full Detail",              variant: "Before & After",              imageSrc: "http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30596.jpg",              imageAlt: "Sports car polish and shine before and after"
-            }
-          ]}
-        />
-      </div>
-
       <div id="booking" data-section="booking">
         <ContactSplit
           tag="Book Your Service"
@@ -250,7 +234,6 @@ export default function LandingPage() {
               title: "Company",              items: [
                 { label: "About Us", href: "#why-us" },
                 { label: "Reviews", href: "#reviews" },
-                { label: "Gallery", href: "#gallery" },
                 { label: "Contact", href: "tel:+16137165686" }
               ]
             },
@@ -267,4 +250,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}