src/app/contact/page.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { Phone } from "lucide-react";
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="largeSmallSizeLargeTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="Hair Club"
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "About", id: "about" },
+            { name: "Reviews", id: "testimonials" },
+            { name: "Team", id: "team" },
+            { name: "Contact", id: "/contact" },
+            { name: "Get in Touch", id: "/contact" }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Get in Touch"
+          title="Contact Hair Club"
+          description="Reach out to us to book an appointment, ask questions, or learn more about our premium barbershop services. We're here to help!"
+          tagIcon={Phone}
+          tagAnimation="slide-up"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your email"
+          buttonText="Send Message"
+          termsText="Phone: (210) 555-1234 | Hours: Tue-Sat 9AM-7PM, Sun 10AM-5PM | Walk-ins Welcome | Location: San Antonio, TX"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="http://img.b2bpic.net/free-photo/barber-shop-retro-vintage-style_1150-17931.jpg?_wi=2"
+          imageAlt="Hair Club Barbershop"
+          columns={[
+            {
+              title: "Services",              items: [
+                { label: "Haircuts", href: "#services" },
+                { label: "Beard Grooming", href: "#services" },
+                { label: "Hot Shaves", href: "#services" },
+                { label: "Waxing", href: "#services" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#about" },
+                { label: "Our Team", href: "#team" },
+                { label: "Reviews", href: "#testimonials" },
+                { label: "Contact", href: "/contact" }
+              ]
+            },
+            {
+              title: "Connect",              items: [
+                { label: "Google Maps", href: "https://maps.google.com" },
+                { label: "Call: (210) 555-1234", href: "tel:+12105551234" },
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" }
+              ]
+            }
+          ]}
+          logoText="Hair Club"
+          copyrightText="© 2025 Hair Club Barbershop | San Antonio, TX"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,54 +1,19 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
-import { Inter } from "next/font/google";
-import { Public_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 publicSans = Public_Sans({
-  variable: "--font-public-sans",  subsets: ["latin"],
-});
 
 export const metadata: Metadata = {
-  title: "Hair Club Barbershop | Premium Haircuts & Grooming in San Antonio",  description: "Expert barbershop in San Antonio with 4.9★ rating. Precision haircuts, fades, beard trims, hot shaves. Book now or call (210) 555-1234. Walk-ins welcome!",  keywords: "barbershop San Antonio, haircut, barber, fades, beard trim, grooming, men's haircut, hot shave",  openGraph: {
-    title: "Hair Club Barbershop | San Antonio",    description: "Premium barbershop with 4.9★ rating and 1,200+ customers. Expert haircuts, fades, beard grooming.",    siteName: "Hair Club",    type: "website",    images: [
-      {
-        url: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7279.jpg",        alt: "Hair Club Barbershop Interior"},
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Hair Club Barbershop | San Antonio",    description: "Premium barbershop with 4.9★ rating. Expert haircuts & grooming.",    images: ["http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7279.jpg"],
-  },
-  robots: {
-    index: true,
-    follow: true,
-  },
-};
+  title: "Hair Club | Premium Barbershop in San Antonio",  description: "Expert barbershop services in San Antonio. Precision haircuts, fades, beard grooming, and hot shaves. 4.9★ rating from 1,200+ satisfied customers."};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} ${publicSans.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <body>
+        {children}
+      
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1416,7 +1381,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
 }

src/app/page.tsx

@@ -33,7 +33,8 @@ export default function BarbershopLanding() {
             { name: "About", id: "about" },
             { name: "Reviews", id: "testimonials" },
             { name: "Team", id: "team" },
-            { name: "Contact", id: "contact" }
+            { name: "Contact", id: "contact" },
+            { name: "Get in Touch", id: "/contact" }
           ]}
         />
       </div>
@@ -185,7 +186,7 @@ export default function BarbershopLanding() {
                 { label: "About Us", href: "#about" },
                 { label: "Our Team", href: "#team" },
                 { label: "Reviews", href: "#testimonials" },
-                { label: "Contact", href: "#contact" }
+                { label: "Contact", href: "/contact" }
               ]
             },
             {