src/app/contact/page.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+
+export default function ContactPage() {
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Features", id: "/#features" },
+        { name: "Pricing", id: "/#pricing" },
+        { name: "Contact", id: "/contact" },
+    ];
+
+    return (
+        <ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="gradient-bordered" primaryButtonStyle="primary-glow" secondaryButtonStyle="layered" headingFontWeight="medium">
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline
+                    navItems={navItems}
+                    brandName="SaasApp"
+                    button={{ text: "Contact", href: "/contact" }}
+                />
+                <div className="pt-24 pb-12">
+                  <ContactSplitForm
+                      title="Ready to scale?"
+                      description="Reach out to our team for custom solutions and deployment advice."
+                      useInvertedBackground={false}
+                      inputs={[
+                          { name: "name", type: "text", placeholder: "Full Name", required: true },
+                          { name: "email", type: "email", placeholder: "Work Email", required: true }
+                      ]}
+                      textarea={{ name: "message", placeholder: "How can we help?" }}
+                  />
+                </div>
+                <FooterBaseReveal
+                    logoText="SaaSify"
+                    columns={[
+                        { title: "Product", items: [{ label: "Features", href: "/#features" }, { label: "Pricing", href: "/#pricing" }] },
+                        { title: "Company", items: [{ label: "Contact", href: "/contact" }] }
+                    ]}
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/page.tsx

@@ -14,7 +14,7 @@ export default function SaasTemplatePage() {
     const navItems = [
         { name: "Features", id: "features" },
         { name: "Pricing", id: "pricing" },
-        { name: "Contact", id: "contact" },
+        { name: "Contact", id: "/contact" },
     ];
 
     const avatars = [
@@ -30,7 +30,7 @@ export default function SaasTemplatePage() {
                 <NavbarLayoutFloatingInline
                     navItems={navItems}
                     brandName="SaasApp"
-                    button={{ text: "Get Started", href: "#contact" }}
+                    button={{ text: "Get Started", href: "/contact" }}
                 />
                 <HeroCentered
                     background={{ variant: "rotated-rays-animated-grid" }}
@@ -39,7 +39,7 @@ export default function SaasTemplatePage() {
                     title="Build Modern Web Experiences"
                     description="Create stunning, responsive websites with our comprehensive component library designed for high performance."
                     buttons={[
-                        { text: "Get Started", href: "#contact" },
+                        { text: "Get Started", href: "/contact" },
                         { text: "Learn More", href: "#features" },
                     ]}
                     marqueeItems={[
@@ -83,23 +83,11 @@ export default function SaasTemplatePage() {
                       ]}
                   />
                 </div>
-                <div id="contact" data-section="contact">
-                  <ContactSplitForm
-                      title="Ready to scale?"
-                      description="Reach out to our team for custom solutions and deployment advice."
-                      useInvertedBackground={false}
-                      inputs={[
-                          { name: "name", type: "text", placeholder: "Full Name", required: true },
-                          { name: "email", type: "email", placeholder: "Work Email", required: true }
-                      ]}
-                      textarea={{ name: "message", placeholder: "How can we help?" }}
-                  />
-                </div>
                 <FooterBaseReveal
                     logoText="SaaSify"
                     columns={[
-                        { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
-                        { title: "Company", items: [{ label: "Contact", href: "#contact" }] }
+                        { title: "Product", items: [{ label: "Features", href: "/#features" }, { label: "Pricing", href: "/#pricing" }] },
+                        { title: "Company", items: [{ label: "Contact", href: "/contact" }] }
                     ]}
                 />
             </ReactLenis>

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-nunito-sans), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-libre-baskerville), serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #050012;
-  --card: #040121;
-  --foreground: #f0e6ff;
-  --primary-cta: #c89bff;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffff;
+  --primary-cta: #20b2aa;
   --primary-cta-text: #050012;
-  --secondary-cta: #1d123b;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #f0e6ff;
-  --accent: #684f7b;
-  --background-accent: #65417c;
+  --accent: #008080;
+  --background-accent: #005f5f;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);