Merge version_2 into main #4
107
src/app/contact/page.tsx
Normal file
107
src/app/contact/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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"),
|
||||
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
|
||||
}
|
||||
};
|
||||
title: "OnSpot Mobile Detailing", description: "Premium mobile car detailing in Ottawa. Professional interior and exterior detailing. 5-Star Rated. Available 24/7."};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${halant.variable} ${inter.variable} ${manrope.variable} ${dmSans.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<html lang="en">
|
||||
<body>{children}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1426,7 +1379,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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: "Call (613) 716-5686", href: "tel:+16137165686" }
|
||||
{ text: "Book Now", onClick: handleBookNowClick },
|
||||
{ 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user