Merge version_4 into main

Merge version_4 into main

src/app/contact/page.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="rounded"
+        contentWidth="mediumSmall"
+        sizing="largeSizeMediumTitles"
+        background="circleGradient"
+        cardStyle="solid"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Services", id: "/#services" },
+              { name: "Expertise", id: "/#expertise" },
+              { name: "Process", id: "/#process" },
+              { name: "About", id: "/#about" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="United Roofing"
+            button={{ text: "Get Inspection", href: "/contact" }}
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+            <ContactCenter
+                tag="Get in Touch"
+                title="Schedule Your Inspection"
+                description="Contact us for a free, no-pressure assessment of your property's roofing needs."
+                background={{ variant: "gradient-bars" }}
+                useInvertedBackground={false}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterLogoReveal
+            logoText="United Roofing"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "© 2024 United Roofing", href: "#" }}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -32,13 +32,14 @@ export default function LandingPage() {
         <div id="nav" data-section="nav">
             <NavbarLayoutFloatingInline
             navItems={[
-              { name: "Services", id: "#services" },
-              { name: "Expertise", id: "#expertise" },
-              { name: "Process", id: "#process" },
-              { name: "About", id: "#about" },
+              { name: "Services", id: "/#services" },
+              { name: "Expertise", id: "/#expertise" },
+              { name: "Process", id: "/#process" },
+              { name: "About", id: "/#about" },
+              { name: "Contact", id: "/contact" }
             ]}
             brandName="United Roofing"
-            button={{ text: "Get Inspection", href: "#contact" }}
+            button={{ text: "Get Inspection", href: "/contact" }}
           />
         </div>
 
@@ -49,7 +50,7 @@ export default function LandingPage() {
             description="Fast, honest roof repair and replacement with expert guidance, clear communication, and workmanship that holds up."
             tag="Trusted by DC Homeowners"
             buttons={[
-              { text: "Get a Free Inspection", href: "#contact" },
+              { text: "Get a Free Inspection", href: "/contact" },
               { text: "Call Now", href: "tel:+12025686865" },
             ]}
             mediaItems={[
@@ -176,18 +177,6 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="contact" data-section="contact">
-            <ContactText
-            useInvertedBackground={false}
-            background={{ variant: "rotated-rays-animated" }}
-            text="Need Roofing Help Without the Runaround? Schedule a free inspection and get honest guidance, fast communication, and peace of mind."
-            buttons={[
-              { text: "Book Free Inspection", href: "#" },
-              { text: "Call United Roofing", href: "tel:+12025686865" },
-            ]}
-          />
-        </div>
-
         <div id="footer" data-section="footer">
             <FooterLogoReveal
             logoText="United Roofing"