Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -2,10 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
-import FooterCard from '@/components/sections/footer/FooterCard';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
@@ -32,26 +32,16 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Services",
-          id: "features",
-        },
+          name: "Services",          id: "features"},
         {
-          name: "About",
-          id: "about",
-        },
+          name: "About",          id: "about"},
         {
-          name: "Reviews",
-          id: "testimonials",
-        },
+          name: "Reviews",          id: "testimonials"},
         {
-          name: "Contact",
-          id: "contact",
-        },
+          name: "Contact",          id: "contact"},
       ]}
       button={{
-        text: "Get Quote",
-        href: "#contact",
-      }}
+        text: "Enroll Now",        href: "#contact"}}
       brandName="JM Roofing"
     />
   </div>
@@ -59,19 +49,14 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
       background={{
-        variant: "plain",
-      }}
+        variant: "plain"}}
       logoText="JM Roofing"
       description="Professional roof replacement with unparalleled craftsmanship and attention to detail. Get your free estimate today."
       buttons={[
         {
-          text: "Get Quote",
-          href: "#contact",
-        },
+          text: "Get Quote",          href: "#contact"},
         {
-          text: "Call Now",
-          href: "tel:5550123456",
-        },
+          text: "Call Now",          href: "tel:5550123456"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/roof-pattern_1203-3266.jpg"
       imageAlt="New roof installation by JM Roofing"
@@ -98,23 +83,11 @@ export default function LandingPage() {
       uniformGridCustomHeightClasses="min-h-95"
       features={[
         {
-          title: "Precision Fascia Work",
-          description: "Replacement of all fascia boards for a clean, finished look that protects your home exterior.",
-          imageSrc: "http://img.b2bpic.net/free-photo/cute-yellow-rural-house-with-wooden-stairs-countryside_176420-7157.jpg",
-          imageAlt: "Fascia board replacement",
-        },
+          title: "Precision Fascia Work",          description: "Replacement of all fascia boards for a clean, finished look that protects your home exterior.",          imageSrc: "http://img.b2bpic.net/free-photo/cute-yellow-rural-house-with-wooden-stairs-countryside_176420-7157.jpg",          imageAlt: "Fascia board replacement"},
         {
-          title: "Cohesive Finishing",
-          description: "We paint all vents and pipes to perfectly match your shingles for a sharp, unified appearance.",
-          imageSrc: "http://img.b2bpic.net/free-photo/vintage-temple-roof-thai-temple_1428-127.jpg",
-          imageAlt: "Roof vent finishing",
-        },
+          title: "Cohesive Finishing",          description: "We paint all vents and pipes to perfectly match your shingles for a sharp, unified appearance.",          imageSrc: "http://img.b2bpic.net/free-photo/vintage-temple-roof-thai-temple_1428-127.jpg",          imageAlt: "Roof vent finishing"},
         {
-          title: "Quality Materials",
-          description: "Installation of durable, high-grade shingles built to withstand the elements and enhance curb appeal.",
-          imageSrc: "http://img.b2bpic.net/free-photo/rows-seats_1398-4403.jpg",
-          imageAlt: "Asphalt shingle installation",
-        },
+          title: "Quality Materials",          description: "Installation of durable, high-grade shingles built to withstand the elements and enhance curb appeal.",          imageSrc: "http://img.b2bpic.net/free-photo/rows-seats_1398-4403.jpg",          imageAlt: "Asphalt shingle installation"},
       ]}
       title="Why Choose JM Roofing?"
       description="Excellence in every detail, from the structural integrity of your roof to the final color-matched aesthetic."
@@ -128,45 +101,20 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
-          name: "Sarah J.",
-          handle: "@sarahj",
-          testimonial: "JM Roofing was fantastic. Jose was so responsive and the quality of work is outstanding.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
-        },
+          id: "1",          name: "Sarah J.",          handle: "@sarahj",          testimonial: "JM Roofing was fantastic. Jose was so responsive and the quality of work is outstanding.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"},
         {
-          id: "2",
-          name: "Michael C.",
-          handle: "@mchen",
-          testimonial: "I've received so many compliments on my new roof. The attention to detail is unmatched.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-as-real-estate-agent_23-2151064874.jpg",
-        },
+          id: "2",          name: "Michael C.",          handle: "@mchen",          testimonial: "I've received so many compliments on my new roof. The attention to detail is unmatched.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-as-real-estate-agent_23-2151064874.jpg"},
         {
-          id: "3",
-          name: "Emily R.",
-          handle: "@emilyr",
-          testimonial: "Professional, clean, and quick. Highly recommend JM Roofing for anyone needing a replacement.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/nice-moment-young-couple-front-big-house-with-beautiful-labrador_496169-2480.jpg",
-        },
+          id: "3",          name: "Emily R.",          handle: "@emilyr",          testimonial: "Professional, clean, and quick. Highly recommend JM Roofing for anyone needing a replacement.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/nice-moment-young-couple-front-big-house-with-beautiful-labrador_496169-2480.jpg"},
         {
-          id: "4",
-          name: "David K.",
-          handle: "@davidk",
-          testimonial: "Their craftmanship really shows. They painted my vents to match the shingles perfectly.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/country-music-interpret-singing-outdoors_23-2149498450.jpg",
-        },
+          id: "4",          name: "David K.",          handle: "@davidk",          testimonial: "Their craftmanship really shows. They painted my vents to match the shingles perfectly.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/country-music-interpret-singing-outdoors_23-2149498450.jpg"},
         {
-          id: "5",
-          name: "Jessica L.",
-          handle: "@jl",
-          testimonial: "Best experience I've had with a contractor. JM Roofing is the real deal.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/people-practicing-social-integration-workspace_23-2149405355.jpg",
-        },
+          id: "5",          name: "Jessica L.",          handle: "@jl",          testimonial: "Best experience I've had with a contractor. JM Roofing is the real deal.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/people-practicing-social-integration-workspace_23-2149405355.jpg"},
       ]}
       showRating={true}
       title="Hear From Our Happy Clients"
@@ -179,84 +127,52 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       names={[
-        "Homeowners Association Approved",
-        "BBB Accredited",
-        "Certified GAF Installer",
-        "Lead-Safe Certified",
-        "Local Community Favorite",
-        "Fully Insured Professional",
-        "Top Rated Roofing",
-      ]}
+        "Homeowners Association Approved",        "BBB Accredited",        "Certified GAF Installer",        "Lead-Safe Certified",        "Local Community Favorite",        "Fully Insured Professional",        "Top Rated Roofing"]}
       title="Trusted Excellence"
       description="Serving homeowners with professionalism and pride."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitMedia
+      <FaqDouble
       textboxLayout="default"
       useInvertedBackground={false}
       faqs={[
         {
-          id: "1",
-          title: "Do you offer free estimates?",
-          content: "Yes, Jose provides prompt, free estimates for all residential roofing projects.",
-        },
+          id: "1",          title: "How do I enroll in the $1,000 course?",          content: "You can enroll directly through our website by filling out the contact form below with your details."},
         {
-          id: "2",
-          title: "What roofing materials do you use?",
-          content: "We use only premium quality materials that meet local safety and aesthetic standards.",
-        },
+          id: "2",          title: "What is included in the $1,000 curriculum?",          content: "The course covers advanced roofing techniques, business management for contractors, and safety protocols."},
         {
-          id: "3",
-          title: "How long does a replacement take?",
-          content: "Most projects are completed efficiently within a few days, depending on roof size and complexity.",
-        },
+          id: "3",          title: "Can I pay in installments?",          content: "We offer flexible payment plans for the $1,000 course to help you manage your investment effectively."},
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/top-view-prague_1398-2722.jpg"
-      imageAlt="Roofing FAQ image"
-      title="Roofing FAQ"
-      description="Have questions about our process? We're here to help."
+      title="Course FAQ"
+      description="Learn more about our professional roofing certification course."
       faqsAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCenter
+      <ContactSplitForm
       useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
-      tag="Get Started"
-      title="Request Your Free Quote"
-      description="Ready to transform your home? Reach out to JM Roofing today for a professional consultation."
+      title="Enroll in Our Roofing Course"
+      description="Start your journey to becoming a professional roofing expert. Sign up for our $1,000 course today."
+      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 }
+      ]}
+      buttonText="Register Now"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterCard
+      <FooterLogoReveal
       logoText="JM Roofing"
-      copyrightText="© 2025 JM Roofing. All rights reserved."
-      socialLinks={[
-        {
-          icon: Facebook,
-          href: "#",
-          ariaLabel: "Facebook",
-        },
-        {
-          icon: Twitter,
-          href: "#",
-          ariaLabel: "Twitter",
-        },
-        {
-          icon: Instagram,
-          href: "#",
-          ariaLabel: "Instagram",
-        },
-      ]}
+      leftLink={{ text: "Course Syllabus", href: "#features" }}
+      rightLink={{ text: "Contact Us", href: "#contact" }}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #15479c;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffff;
+  --primary-cta: #1f7cff;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #010101;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --accent: #1f7cff;
+  --background-accent: #f96b2f;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);