src/app/about/page.tsx

@@ -74,4 +74,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/contact/page.tsx

@@ -2,11 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import ContactForm from '@/components/form/ContactForm';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 
 export default function ContactPage() {
   return (
@@ -24,57 +22,46 @@ export default function ContactPage() {
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-          <NavbarLayoutFloatingOverlay
-            brandName="Arch Roofing Systems"
+          <NavbarStyleCentered
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CU9LXLTd45U3bRy6xudZUdJbpk/uploaded-1777403590767-v6beg6wi.png"
             navItems={[
               { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
               { name: "About", id: "/about" },
-              { name: "Contact", id: "/contact" }
+              { name: "Reviews", id: "/reviews" },
+              { name: "Contact", id: "/contact" },
             ]}
+            brandName="Arch Roofing Systems"
           />
         </div>
 
-        <div id="hero-contact" data-section="hero-contact">
-          <ContactCTA
-            useInvertedBackground={false}
-            background={{ variant: "rotated-rays-static" }}
-            tag="Let's Connect"
-            title="Get Your Free Estimate"
-            description="Ready to upgrade your roof or home exterior? Please provide your contact details, phone number, and any additional project information below for a free consultation and professional inspection in Etowah and Calhoun counties today."
-            buttons={[{ text: "Schedule Now", href: "#form" }]}
-          />
-        </div>
-
-        <div id="form" data-section="form">
-          <ContactForm 
-            useInvertedBackground={false}
-            title="Project Details"
-            description="Tell us about your roofing needs, and we'll be in touch shortly."
-            tag="Connect"
-          />
-        </div>
-
-        <div id="faq" data-section="faq">
-          <FaqSplitText
-            useInvertedBackground={false}
-            sideTitle="Ready for your project?"
-            sideDescription="Find answers here before scheduling your consultation."
-            faqsAnimation="slide-up"
-            faqs={[
-              { id: "ca1", title: "What areas do you serve?", content: "We serve Gadsden, Southside, Rainbow City, Attalla, Oxford, Anniston, Alexandria, Wellington, Trussville, Springville, Oneonta, and all of Etowah and Calhoun counties." },
-              { id: "ca2", title: "How long does a project take?", content: "Most projects are completed efficiently depending on scope and scale." },
+        <div id="contact-form" data-section="contact-form">
+          <ContactSplitForm
+            title="Contact Us"
+            description="Reach out for a free consultation. Our team is ready to assist you with your roofing needs."
+            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: "How can we help?", rows: 5, required: true }}
+            useInvertedBackground={false}
+            mediaPosition="right"
           />
         </div>
 
         <div id="footer" data-section="footer">
-          <FooterLogoReveal
-            logoText="Arch Roofing Systems"
-            leftLink={{ text: "About Us", href: "/about" }}
-            rightLink={{ text: "Get Quote", href: "/contact" }}
+          <FooterSimple
+            columns={[
+              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Careers", href: "#" }, { label: "Privacy", href: "#" }] },
+              { title: "Services", items: [{ label: "Roof Replacement", href: "/services" }, { label: "Inspections", href: "/services" }, { label: "Storm Damage", href: "/services" }] },
+              { title: "Contact", items: [{ label: "Get Quote", href: "/contact" }, { label: "Support", href: "/contact" }] },
+            ]}
+            bottomLeftText="© 2024 Arch Roofing Systems, Gadsden, AL."
+            bottomRightText="Lic. #123456"
           />
         </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -9,7 +9,7 @@ import MediaAbout from '@/components/sections/about/MediaAbout';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
-import { Award, CheckCircle, Clock, Home, Shield, ShieldCheck, Star, Hammer, PaintBucket, Ruler, Home as House } from "lucide-react";
+import { Award, CheckCircle, Clock, Home, Shield, ShieldCheck, Star, Hammer, PaintBucket, Ruler } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -150,4 +150,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/reviews/page.tsx

@@ -82,4 +82,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -110,4 +110,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}