src/app/contact/page.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import ContactForm from '@/components/form/ContactForm';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="largeSmallSizeLargeTitles"
+        background="fluid"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "#home" },
+              { name: "About Us", id: "#about" },
+              { name: "Menu", id: "#menu" },
+              { name: "Features", id: "#features" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "FAQ", id: "#faq" },
+              { name: "Contact", href: "/contact" }
+            ]}
+            button={{ text: "Order Now", href: "/contact" }}
+            brandName="Yummy Treat Cafe"
+          />
+        </div>
+
+        <div id="contact-form" data-section="contact-form" className="py-24 md:py-32">
+          <ContactForm
+            tag="Get in Touch"
+            title="Send Us a Message"
+            description="We'd love to hear from you! Fill out the form below and we'll get back to you as soon as possible."
+            inputPlaceholder="Your Email Address"
+            buttonText="Submit Message"
+            onSubmit={(data) => console.log('Form submitted:', data)}
+            centered={true}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              {
+                title: "Yummy Treat Cafe",                items: [
+                  { label: "Home", href: "#home" },
+                  { label: "About Us", href: "#about" },
+                  { label: "Menu", href: "#menu" }
+                ]
+              },
+              {
+                title: "Services",                items: [
+                  { label: "Catering", href: "#features" },
+                  { label: "Delivery", href: "#features" },
+                  { label: "Reservations", href: "/contact" }
+                ]
+              },
+              {
+                title: "Support",                items: [
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Contact Us", href: "/contact" },
+                  { label: "Privacy Policy", href: "#" }
+                ]
+              }
+            ]}
+            bottomLeftText="© 2024 Yummy Treat Cafe. All rights reserved."
+            bottomRightText="Crafted with <3 for delightful treats."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -43,10 +43,10 @@ export default function LandingPage() {
         {
           name: "FAQ",          id: "#faq"},
         {
-          name: "Contact",          id: "#contact"},
+          name: "Contact",          href: "/contact"},
       ]}
       button={{
-        text: "Order Now",        href: "#contact"}}
+        text: "Order Now",          href: "/contact"}}
       brandName="Yummy Treat Cafe"
     />
   </div>
@@ -59,7 +59,7 @@ export default function LandingPage() {
         {
           text: "View Our Menu",          href: "#menu"},
         {
-          text: "Make a Reservation",          href: "#contact"},
+          text: "Make a Reservation",          href: "/contact"},
       ]}
       buttonAnimation="opacity"
       imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-taking-photos-with-smartphone_23-2149356887.jpg"
@@ -218,7 +218,7 @@ export default function LandingPage() {
             {
               label: "Delivery",              href: "#features"},
             {
-              label: "Reservations",              href: "#contact"},
+              label: "Reservations",              href: "/contact"},
           ],
         },
         {
@@ -226,7 +226,7 @@ export default function LandingPage() {
             {
               label: "FAQ",              href: "#faq"},
             {
-              label: "Contact Us",              href: "#contact"},
+              label: "Contact Us",              href: "/contact"},
             {
               label: "Privacy Policy",              href: "#"},
           ],
@@ -239,4 +239,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}