Update src/app/contact/page.tsx

Update src/app/styles/variables.css
Update src/app/page.tsx
2026-03-10 16:41:32 +00:00 · 2026-03-10 16:36:21 +00:00 · 2026-03-10 16:36:19 +00:00 · 2026-03-10 16:36:17 +00:00 · 2026-03-10 16:05:15 +00:00 · 2026-03-10 16:05:13 +00:00
7 changed files with 609 additions and 1127 deletions
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -1,147 +0,0 @@
-"use client";
-
-import { ThemeProvider } from "@/components/theme/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import { ReactLenis } from "lenis/react";
-
-interface Request {
-  id: string;
-  clientName: string;
-  address: string;
-  issueType: string;
-  membershipPlan: string;
-  status: "pending" | "in-progress" | "completed" | "cancelled";
-}
-
-const mockRequests: Request[] = [
-  {
-    id: "REQ-001",    clientName: "John Smith",    address: "123 Main St, Springfield, IL 62701",    issueType: "Plumbing",    membershipPlan: "Premium",    status: "in-progress"},
-  {
-    id: "REQ-002",    clientName: "Sarah Johnson",    address: "456 Oak Ave, Chicago, IL 60601",    issueType: "HVAC",    membershipPlan: "Standard",    status: "pending"},
-  {
-    id: "REQ-003",    clientName: "Michael Chen",    address: "789 Elm Rd, Naperville, IL 60540",    issueType: "Electrical",    membershipPlan: "Premium",    status: "completed"},
-  {
-    id: "REQ-004",    clientName: "Emma Davis",    address: "321 Pine St, Evanston, IL 60201",    issueType: "Roofing",    membershipPlan: "Basic",    status: "pending"},
-  {
-    id: "REQ-005",    clientName: "Robert Wilson",    address: "654 Maple Dr, Aurora, IL 60505",    issueType: "Plumbing",    membershipPlan: "Standard",    status: "completed"},
-];
-
-const getStatusColor = (status: string) => {
-  switch (status) {
-    case "completed":
-      return "bg-green-100 text-green-800";
-    case "in-progress":
-      return "bg-blue-100 text-blue-800";
-    case "pending":
-      return "bg-yellow-100 text-yellow-800";
-    case "cancelled":
-      return "bg-red-100 text-red-800";
-    default:
-      return "bg-gray-100 text-gray-800";
-  }
-};
-
-export default function AdminDashboard() {
-  return (
-    <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
-      contentWidth="medium"
-      sizing="medium"
-      background="none"
-      cardStyle="solid"
-      primaryButtonStyle="gradient"
-      secondaryButtonStyle="solid"
-      headingFontWeight="semibold"
-    >
-      <ReactLenis root>
-        <NavbarLayoutFloatingInline
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Dashboard", id: "/admin" },
-            { name: "Settings", id: "#settings" },
-            { name: "Support", id: "#support" },
-          ]}
-          brandName="OW HomeShield"
-          button={{
-            text: "Logout",            onClick: () => {
-              console.log("Logout clicked");
-            },
-          }}
-          animateOnLoad={true}
-        />
-        <div id="admin-dashboard" data-section="admin-dashboard" className="min-h-screen bg-background pt-32 pb-16 px-4 sm:px-6 lg:px-8">
-          <div className="max-w-7xl mx-auto">
-            {/* Header */}
-            <div className="mb-8">
-              <h1 className="text-4xl font-bold text-foreground mb-2">Admin Dashboard</h1>
-              <p className="text-foreground/60">Manage customer requests and track service status</p>
-            </div>
-
-            {/* Table Container */}
-            <div className="rounded-lg border border-card bg-card overflow-hidden shadow-sm">
-              <div className="overflow-x-auto">
-                <table className="w-full">
-                  <thead>
-                    <tr className="border-b border-background bg-background/50">
-                      <th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Request ID</th>
-                      <th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Client Name</th>
-                      <th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Address</th>
-                      <th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Issue Type</th>
-                      <th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Membership Plan</th>
-                      <th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Status</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {mockRequests.map((request, index) => (
-                      <tr
-                        key={request.id}
-                        className={`border-b border-background ${index % 2 === 0 ? "bg-white" : "bg-background/30"} hover:bg-background/50 transition-colors`}
-                      >
-                        <td className="px-6 py-4 text-sm text-foreground font-medium">{request.id}</td>
-                        <td className="px-6 py-4 text-sm text-foreground">{request.clientName}</td>
-                        <td className="px-6 py-4 text-sm text-foreground/80">{request.address}</td>
-                        <td className="px-6 py-4 text-sm text-foreground">{request.issueType}</td>
-                        <td className="px-6 py-4 text-sm text-foreground">
-                          <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary-cta/10 text-primary-cta">
-                            {request.membershipPlan}
-                          </span>
-                        </td>
-                        <td className="px-6 py-4 text-sm">
-                          <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(request.status)}`}>
-                            {request.status.charAt(0).toUpperCase() + request.status.slice(1)}
-                          </span>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-
-            {/* Summary Stats */}
-            <div className="mt-8 grid grid-cols-1 md:grid-cols-4 gap-4">
-              <div className="bg-card rounded-lg border border-background p-6">
-                <p className="text-sm text-foreground/60 mb-2">Total Requests</p>
-                <p className="text-3xl font-bold text-foreground">{mockRequests.length}</p>
-              </div>
-              <div className="bg-card rounded-lg border border-background p-6">
-                <p className="text-sm text-foreground/60 mb-2">Pending</p>
-                <p className="text-3xl font-bold text-yellow-600">{mockRequests.filter(r => r.status === "pending").length}</p>
-              </div>
-              <div className="bg-card rounded-lg border border-background p-6">
-                <p className="text-sm text-foreground/60 mb-2">In Progress</p>
-                <p className="text-3xl font-bold text-blue-600">{mockRequests.filter(r => r.status === "in-progress").length}</p>
-              </div>
-              <div className="bg-card rounded-lg border border-background p-6">
-                <p className="text-sm text-foreground/60 mb-2">Completed</p>
-                <p className="text-3xl font-bold text-green-600">{mockRequests.filter(r => r.status === "completed").length}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </ReactLenis>
-    </ThemeProvider>
-  );
-}
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,260 +1,205 @@
 "use client";

-import { ThemeProvider } from "@/components/theme/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
-import MediaAbout from "@/components/sections/about/MediaAbout";
-import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
-import ProductCardFour from "@/components/sections/product/ProductCardFour";
-import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
-import { PricingCardTwo } from "@/components/sections/pricing/PricingCardTwo";
-import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
-import ContactSplit from "@/components/sections/contact/ContactSplit";
-import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Mail, Phone, MapPin } from "lucide-react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import HeroOverlay from "@/components/sections/hero/HeroOverlay";
+import SplitAbout from "@/components/sections/about/SplitAbout";
+import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
+import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
+import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
+import { Linkedin, Twitter, Mail, CheckCircle, Zap, Shield } from "lucide-react";

 export default function ContactPage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Contact", id: "/contact" },
-  ];
-
  return (
    <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
+      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
-      contentWidth="medium"
-      sizing="medium"
-      background="none"
-      cardStyle="solid"
-      primaryButtonStyle="gradient"
-      secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      contentWidth="small"
+      sizing="largeSmallSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="inset"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="medium"
    >
-      <NavbarStyleFullscreen
-        navItems={navItems}
-        brandName="OW HomeShield"
-        bottomLeftText="Available 24/7"
-        bottomRightText="support@owhomeshield.com"
-      />
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="OW HomeShield Inc."
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Membership Plans", id: "pricing" },
+            { name: "Why Choose Us", id: "benefits" },
+            { name: "How It Works", id: "how-it-works" },
+            { name: "Contact", id: "final-cta" }
+          ]}
+          button={{
+            text: "Call Now: 226-224-3573",            href: "tel:226-224-3573"
+          }}
+        />
+      </div>

      <div id="hero" data-section="hero">
-        <HeroBillboardTestimonial
+        <HeroOverlay
          title="Get in Touch with OW HomeShield"
-          description="We're here to help with all your home maintenance and repair needs. Contact us today for a consultation or to learn more about our membership plans."
+          description="Have questions about our membership plans or need immediate assistance? We're here to help."
          tag="Contact Us"
-          background={{ variant: "glowing-orb" }}
-          imageSrc="/hero-contact.jpg"
-          imageAlt="Contact OW HomeShield"
-          mediaAnimation="slide-up"
-          testimonials={[
-            {
-              name: "John Miller",              handle: "Homeowner",              testimonial:
-                "OW HomeShield's support team responded within minutes. Professional and courteous service!",              rating: 5,
-              imageSrc: "/avatar1.jpg"},
-          ]}
+          tagAnimation="slide-up"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg"
+          imageAlt="Contact our team"
+          showBlur={true}
+          showDimOverlay={false}
          buttons={[
-            { text: "Call Now", href: "tel:1-800-123-4567" },
-            { text: "Schedule Service", href: "#contact-form" },
+            { text: "Call Now", href: "tel:226-224-3573" },
+            { text: "Email Us", href: "mailto:info@owhomeshield.com" }
          ]}
+          buttonAnimation="slide-up"
        />
      </div>

-      <div id="about" data-section="about">
-        <MediaAbout
+      <div id="benefits" data-section="benefits">
+        <SplitAbout
          title="Why Choose OW HomeShield?"
-          description="Over 20 years of trusted service. Our team of licensed technicians is dedicated to keeping your home in top condition with professional maintenance and rapid emergency response."
-          tag="Our Expertise"
-          imageSrc="/about-contact.jpg"
-          imageAlt="OW HomeShield team"
-          useInvertedBackground={false}
-          buttons={[
-            { text: "Learn More", href: "#features" },
-            { text: "View Plans", href: "#pricing" },
-          ]}
-        />
-      </div>
-
-      <div id="features" data-section="features">
-        <FeatureCardTwelve
-          title="Our Services"
-          description="Comprehensive home maintenance solutions tailored to your needs"
-          tag="What We Offer"
-          features={[
-            {
-              id: "maintenance",              label: "Maintenance",              title: "Regular Home Maintenance Plans",              items: [
-                "Monthly inspections",                "HVAC system checks",                "Plumbing assessments",                "Electrical safety reviews"],
-              buttons: [{ text: "Learn More", href: "#" }],
-            },
-            {
-              id: "emergency",              label: "Emergency",              title: "24/7 Emergency Repair Service",              items: [
-                "Rapid response times",                "Emergency hotline",                "Licensed technicians",                "Same-day service available"],
-              buttons: [{ text: "Get Help", href: "#" }],
-            },
-          ]}
-          animationType="slide-up"
+          description="We pride ourselves on delivering exceptional service across all areas"
          textboxLayout="default"
          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="products" data-section="products">
-        <ProductCardFour
-          title="Service Packages"
-          description="Choose from our selection of professional home maintenance services"
-          tag="Available Services"
-          products={[
+          imagePosition="right"
+          mediaAnimation="blur-reveal"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg"
+          imageAlt="Why choose us"
+          bulletPoints={[
            {
-              id: "1",              name: "HVAC Maintenance",              price: "$150",              variant: "Quarterly Service",              imageSrc: "/service1.jpg",              imageAlt: "HVAC Service"},
+              title: "Expert Technicians",              description: "Licensed and insured professionals with years of experience",              icon: Shield
+            },
            {
-              id: "2",              name: "Plumbing Inspection",              price: "$120",              variant: "Annual Check",              imageSrc: "/service2.jpg",              imageAlt: "Plumbing Service"},
+              title: "Fast Response",              description: "Quick turnaround times for all service requests",              icon: Zap
+            },
            {
-              id: "3",              name: "Electrical Safety",              price: "$180",              variant: "Comprehensive Review",              imageSrc: "/service3.jpg",              imageAlt: "Electrical Service"},
-            {
-              id: "4",              name: "Roofing Inspection",              price: "$200",              variant: "Professional Assessment",              imageSrc: "/service4.jpg",              imageAlt: "Roofing Service"},
+              title: "Satisfaction Guaranteed",              description: "We stand behind our work with quality assurance",              icon: CheckCircle
+            }
          ]}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
        />
      </div>

      <div id="pricing" data-section="pricing">
-        <PricingCardNine
-          title="Membership Plans"
-          description="Choose the perfect plan for your home maintenance needs"
-          tag="Pricing"
-          plans={[
-            {
-              id: "basic",              title: "Basic",              price: "$49",              period: "/month",              imageSrc: "/pricing-basic.jpg",              imageAlt: "Basic Plan",              button: { text: "Get Started", href: "#contact-form" },
-              features: [
-                "Monthly inspection",                "Priority support",                "10% service discount"],
-            },
-            {
-              id: "premium",              title: "Premium",              price: "$99",              period: "/month",              imageSrc: "/pricing-premium.jpg",              imageAlt: "Premium Plan",              button: { text: "Get Started", href: "#contact-form" },
-              features: [
-                "Quarterly inspections",                "24/7 emergency support",                "20% service discount",                "Free diagnostics"],
-            },
-          ]}
+        <PricingCardEight
+          title="Our Membership Plans"
+          description="Choose the perfect plan for your home protection needs"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
+          plans={[
+            {
+              id: "basic",              badge: "Basic",              price: "$44/month",              subtitle: "Essential coverage",              buttons: [{ text: "Choose Plan", href: "tel:226-224-3573" }],
+              features: ["1 service visit per month", "10% renovation discount", "Email support"]
+            },
+            {
+              id: "standard",              badge: "Most Popular",              price: "$59/month",              subtitle: "Popular choice",              buttons: [{ text: "Choose Plan", href: "tel:226-224-3573" }],
+              features: ["2 service visits per month", "15% renovation discount", "Priority booking", "Phone support"]
+            },
+            {
+              id: "premium",              badge: "Premium",              price: "$84/month",              subtitle: "Full coverage",              buttons: [{ text: "Choose Plan", href: "tel:226-224-3573" }],
+              features: ["Unlimited service requests", "24/7 emergency support", "Priority scheduling", "Dedicated account manager"]
+            }
+          ]}
        />
      </div>

-      <div id="pricing-cards" data-section="pricing-cards">
-        <PricingCardTwo
-          title="Annual Membership"
-          description="Save more with annual commitment"
-          tag="Best Value"
-          plans={[
-            {
-              id: "annual-basic",              title: "Annual Basic",              price: "$499",              period: "/year",              description: "Save $89 annually",              button: { text: "Subscribe", href: "#contact-form" },
-              features: [
-                "Monthly inspections",                "Priority support",                "10% discount on services"],
-              highlighted: false,
-            },
-            {
-              id: "annual-premium",              title: "Annual Premium",              price: "$999",              period: "/year",              description: "Save $189 annually",              button: { text: "Subscribe", href: "#contact-form" },
-              features: [
-                "Quarterly inspections",                "24/7 emergency support",                "20% discount on services",                "Free annual diagnostics"],
-              highlighted: true,
-            },
-          ]}
+      <div id="how-it-works" data-section="how-it-works">
+        <FeatureCardTwentyThree
+          title="How Our Service Works"
+          description="Simple steps to get your home protected"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
+          features={[
+            {
+              id: "1",              title: "Choose Your Plan",              tags: ["Step 1"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg",              imageAlt: "Choose your plan"
+            },
+            {
+              id: "2",              title: "Sign Up Online",              tags: ["Step 2"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg",              imageAlt: "Sign up online"
+            },
+            {
+              id: "3",              title: "Get Immediate Service",              tags: ["Step 3"],
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg",              imageAlt: "Get immediate service"
+            }
+          ]}
        />
      </div>

-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardSix
+      <div id="trust" data-section="trust">
+        <TestimonialCardTwelve
          testimonials={[
            {
-              id: "1",              name: "Sarah Johnson",              handle: "Homeowner, Portland",              testimonial:
-                "OW HomeShield has been a lifesaver! Their technicians are professional and the service is always on time. Highly recommend!",              imageSrc: "/avatar-sarah.jpg",              imageAlt: "Sarah Johnson"},
+              id: "1",              name: "John Smith",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg",              imageAlt: "John Smith"
+            },
            {
-              id: "2",              name: "Michael Chen",              handle: "Property Manager, Seattle",              testimonial:
-                "Managing multiple properties is much easier with OW HomeShield handling maintenance. Reliable and cost-effective!",              imageSrc: "/avatar-michael.jpg",              imageAlt: "Michael Chen"},
+              id: "2",              name: "Sarah Johnson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg",              imageAlt: "Sarah Johnson"
+            },
            {
-              id: "3",              name: "Emma Davis",              handle: "Homeowner, Vancouver",              testimonial:
-                "The 24/7 emergency support is incredible. When our heating went out in winter, they were there within an hour.",              imageSrc: "/avatar-emma.jpg",              imageAlt: "Emma Davis"},
+              id: "3",              name: "Mike Davis",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg",              imageAlt: "Mike Davis"
+            },
            {
-              id: "4",              name: "James Wilson",              handle: "Real Estate Agent, Bellevue",              testimonial:
-                "I recommend OW HomeShield to all my clients. Their membership plans provide excellent value and peace of mind.",              imageSrc: "/avatar-james.jpg",              imageAlt: "James Wilson"},
-            {
-              id: "5",              name: "Lisa Anderson",              handle: "Homeowner, Tacoma",              testimonial:
-                "Prevention is better than cure, and OW HomeShield's maintenance plans keep my home running smoothly year-round.",              imageSrc: "/avatar-lisa.jpg",              imageAlt: "Lisa Anderson"},
-            {
-              id: "6",              name: "Robert Martinez",              handle: "Property Owner, Olympia",              testimonial:
-                "Outstanding customer service and quality workmanship. OW HomeShield is the only choice for home maintenance in the region.",              imageSrc: "/avatar-robert.jpg",              imageAlt: "Robert Martinez"},
+              id: "4",              name: "Emily Chen",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg",              imageAlt: "Emily Chen"
+            }
          ]}
-          title="What Our Customers Say"
-          description="Trusted by thousands of homeowners across the Pacific Northwest"
-          textboxLayout="default"
+          cardTitle="Over 500+ satisfied customers trust us to keep their homes protected"
+          cardTag="Customer Testimonials"
+          cardAnimation="slide-up"
          useInvertedBackground={false}
-          animationType="slide-up"
        />
      </div>

-      <div id="contact-form" data-section="contact-form">
-        <ContactSplit
-          tag="Get in Touch"
-          title="Ready to protect your home?"
-          description="Sign up for OW HomeShield today and get professional maintenance and repair support. Our team is ready to help you maintain your property and handle any emergency that comes up."
-          tagIcon={Mail}
-          background={{ variant: "sparkles-gradient" }}
+      <div id="final-cta" data-section="final-cta">
+        <ContactCTA
+          tag="Ready to Get Started?"
+          title="Join OW HomeShield Today"
+          description="Experience the peace of mind that comes with reliable home maintenance and emergency support available 24/7."
+          buttons={[
+            { text: "Start Free Trial", href: "tel:226-224-3573" },
+            { text: "Call Us Now", href: "tel:226-224-3573" }
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "plain" }}
          useInvertedBackground={false}
-          imageSrc="/contact-split.jpg"
-          imageAlt="OW HomeShield team"
-          mediaAnimation="slide-up"
-          mediaPosition="right"
-          inputPlaceholder="Enter your email"
-          buttonText="Get Started"
-          termsText="We respect your privacy. Unsubscribe at any time."
-          onSubmit={(email) => console.log("Email submitted:", email)}
        />
      </div>

      <div id="footer" data-section="footer">
-        <FooterBaseCard
-          logoText="OW HomeShield"
+        <FooterMedia
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg"
+          imageAlt="OW HomeShield"
+          logoText="OW HomeShield Inc."
+          copyrightText="© 2025 OW HomeShield Inc. All rights reserved."
          columns={[
-            {
-              title: "Product",              items: [
-                { label: "Membership Plans", href: "#pricing" },
-                { label: "Services", href: "#services" },
-                { label: "Pricing", href: "#pricing" },
-              ],
-            },
            {
              title: "Company",              items: [
-                { label: "About Us", href: "#about" },
-                { label: "Contact", href: "#contact-form" },
-                { label: "Blog", href: "#blog" },
-              ],
+                { label: "Home", href: "/" },
+                { label: "About", href: "#benefits" },
+                { label: "Contact", href: "#final-cta" }
+              ]
            },
            {
-              title: "Support",              items: [
-                { label: "24/7 Hotline", href: "tel:1-800-123-4567" },
-                { label: "Emergency Service", href: "tel:1-800-123-4567" },
-                { label: "FAQ", href: "#faq" },
-              ],
+              title: "Services",              items: [
+                { label: "Membership Plans", href: "#pricing" },
+                { label: "How It Works", href: "#how-it-works" },
+                { label: "Emergency Support", href: "tel:226-224-3573" }
+              ]
            },
+            {
+              title: "Contact",              items: [
+                { label: "Call: 226-224-3573", href: "tel:226-224-3573" },
+                { label: "Email: info@owhomeshield.com", href: "mailto:info@owhomeshield.com" },
+                { label: "Available 24/7", href: "#" }
+              ]
+            }
          ]}
-          copyrightText="© 2025 OW HomeShield. All rights reserved."
-          onPrivacyClick={() => console.log("Privacy clicked")}
-        />
-      </div>
-
-      <div id="footer-simple" data-section="footer-simple">
-        <FooterSimple
-          text="© 2025 OW HomeShield. Professional home maintenance and repair services."
        />
      </div>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,286 +1,84 @@
 "use client";

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import { useState, useMemo } from "react";
-import { Search, Filter, ChevronUp, ChevronDown } from "lucide-react";
-
-const navItems = [
-  { name: "Home", id: "/" },
-  { name: "Membership", id: "/membership" },
-  { name: "Services", id: "#services" },
-  { name: "Dashboard", id: "/dashboard" },
-];
-
-interface ServiceRequest {
-  requestId: string;
-  clientName: string;
-  address: string;
-  issueType: string;
-  membershipPlan: string;
-  status: "pending" | "in-progress" | "completed" | "cancelled";
-  date: string;
-}
-
-const mockRequests: ServiceRequest[] = [
-  {
-    requestId: "SR-001",    clientName: "John Smith",    address: "123 Oak Avenue, Springfield",    issueType: "Plumbing",    membershipPlan: "Premium",    status: "completed",    date: "2025-01-15"},
-  {
-    requestId: "SR-002",    clientName: "Sarah Johnson",    address: "456 Elm Street, Shelbyville",    issueType: "HVAC",    membershipPlan: "Standard",    status: "in-progress",    date: "2025-01-18"},
-  {
-    requestId: "SR-003",    clientName: "Michael Davis",    address: "789 Maple Drive, Capital City",    issueType: "Electrical",    membershipPlan: "Elite",    status: "pending",    date: "2025-01-20"},
-  {
-    requestId: "SR-004",    clientName: "Emily Wilson",    address: "321 Pine Road, Shelbyville",    issueType: "Roofing",    membershipPlan: "Basic",    status: "completed",    date: "2025-01-10"},
-  {
-    requestId: "SR-005",    clientName: "David Brown",    address: "654 Cedar Lane, Springfield",    issueType: "General Maintenance",    membershipPlan: "Premium",    status: "in-progress",    date: "2025-01-19"},
-  {
-    requestId: "SR-006",    clientName: "Jessica Martinez",    address: "987 Birch Court, Capital City",    issueType: "Emergency Repair",    membershipPlan: "Elite",    status: "pending",    date: "2025-01-20"},
-];
-
-type SortField = "requestId" | "clientName" | "address" | "issueType" | "membershipPlan" | "status" | "date";
-type SortOrder = "asc" | "desc";
-
-const getStatusColor = (
-  status: "pending" | "in-progress" | "completed" | "cancelled"
-): string => {
-  switch (status) {
-    case "pending":
-      return "bg-yellow-100 text-yellow-800";
-    case "in-progress":
-      return "bg-blue-100 text-blue-800";
-    case "completed":
-      return "bg-green-100 text-green-800";
-    case "cancelled":
-      return "bg-red-100 text-red-800";
-    default:
-      return "bg-gray-100 text-gray-800";
-  }
-};
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterBase from "@/components/sections/footer/FooterBase";

 export default function DashboardPage() {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [sortField, setSortField] = useState<SortField>("date");
-  const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
-  const [statusFilter, setStatusFilter] = useState<string>("all");
-
-  const filteredAndSortedRequests = useMemo(() => {
-    let filtered = mockRequests;
-
-    // Search filter
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      filtered = filtered.filter(
-        (req) =>
-          req.requestId.toLowerCase().includes(query) ||
-          req.clientName.toLowerCase().includes(query) ||
-          req.address.toLowerCase().includes(query)
-      );
-    }
-
-    // Status filter
-    if (statusFilter !== "all") {
-      filtered = filtered.filter((req) => req.status === statusFilter);
-    }
-
-    // Sort
-    filtered.sort((a, b) => {
-      const aVal = a[sortField] || "";
-      const bVal = b[sortField] || "";
-
-      if (aVal < bVal) return sortOrder === "asc" ? -1 : 1;
-      if (aVal > bVal) return sortOrder === "asc" ? 1 : -1;
-      return 0;
-    });
-
-    return filtered;
-  }, [searchQuery, sortField, sortOrder, statusFilter]);
-
-  const toggleSort = (field: SortField) => {
-    if (sortField === field) {
-      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
-    } else {
-      setSortField(field);
-      setSortOrder("asc");
-    }
-  };
-
-  const SortIcon = ({ field }: { field: SortField }) => {
-    if (sortField !== field) return null;
-    return sortOrder === "asc" ? (
-      <ChevronUp className="w-4 h-4 inline ml-1" />
-    ) : (
-      <ChevronDown className="w-4 h-4 inline ml-1" />
-    );
-  };
-
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
-      sizing="medium"
+      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="semibold"
    >
-      <NavbarStyleFullscreen
-        navItems={navItems}
-        brandName="OW HomeShield"
-        bottomLeftText="24/7 Support"
-        bottomRightText="support@owhomeshield.com"
-      />
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="OW HomeShield"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "services" },
+            { name: "Pricing", id: "pricing" },
+            { name: "About", id: "about" }
+          ]}
+          button={{
+            text: "Get Started",            href: "tel:226-224-3573"
+          }}
+          animateOnLoad={true}
+        />
+      </div>

-      <div className="min-h-screen pt-20 pb-20 px-4">
-        <div className="max-w-7xl mx-auto">
-          <h1 className="text-4xl font-bold mb-4">Service Requests Dashboard</h1>
-          <p className="text-foreground/70 mb-8">
-            Manage and track all service requests from clients.
-          </p>
+      <div id="contact" data-section="contact">
+        <ContactText
+          text="Access your member dashboard to manage your home maintenance requests, view service history, and update your membership preferences."
+          animationType="entrance-slide"
+          buttons={[
+            { text: "Go to Dashboard", href: "#" },
+            { text: "Need Help?", href: "tel:226-224-3573" }
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>

-          {/* Filters and Search */}
-          <div className="bg-card rounded-lg p-6 border border-foreground/10 mb-6">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              {/* Search */}
-              <div className="relative">
-                <Search className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
-                <input
-                  type="text"
-                  placeholder="Search by ID, name, or address..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full pl-10 pr-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
-                />
-              </div>
-
-              {/* Status Filter */}
-              <div className="flex items-center gap-2">
-                <Filter className="w-5 h-5 text-foreground/40" />
-                <select
-                  value={statusFilter}
-                  onChange={(e) => setStatusFilter(e.target.value)}
-                  className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
-                >
-                  <option value="all">All Statuses</option>
-                  <option value="pending">Pending</option>
-                  <option value="in-progress">In Progress</option>
-                  <option value="completed">Completed</option>
-                  <option value="cancelled">Cancelled</option>
-                </select>
-              </div>
-
-              {/* Results Count */}
-              <div className="flex items-center justify-end">
-                <span className="text-sm text-foreground/70">
-                  {filteredAndSortedRequests.length} requests
-                </span>
-              </div>
-            </div>
-          </div>
-
-          {/* Table */}
-          <div className="bg-card rounded-lg border border-foreground/10 overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="border-b border-foreground/10 bg-background/50">
-                  <th className="px-6 py-4 text-left">
-                    <button
-                      onClick={() => toggleSort("requestId")}
-                      className="font-semibold text-sm hover:text-primary-cta transition-colors flex items-center"
-                    >
-                      Request ID
-                      <SortIcon field="requestId" />
-                    </button>
-                  </th>
-                  <th className="px-6 py-4 text-left">
-                    <button
-                      onClick={() => toggleSort("clientName")}
-                      className="font-semibold text-sm hover:text-primary-cta transition-colors flex items-center"
-                    >
-                      Client Name
-                      <SortIcon field="clientName" />
-                    </button>
-                  </th>
-                  <th className="px-6 py-4 text-left">
-                    <button
-                      onClick={() => toggleSort("address")}
-                      className="font-semibold text-sm hover:text-primary-cta transition-colors flex items-center"
-                    >
-                      Address
-                      <SortIcon field="address" />
-                    </button>
-                  </th>
-                  <th className="px-6 py-4 text-left">
-                    <button
-                      onClick={() => toggleSort("issueType")}
-                      className="font-semibold text-sm hover:text-primary-cta transition-colors flex items-center"
-                    >
-                      Issue Type
-                      <SortIcon field="issueType" />
-                    </button>
-                  </th>
-                  <th className="px-6 py-4 text-left">
-                    <button
-                      onClick={() => toggleSort("membershipPlan")}
-                      className="font-semibold text-sm hover:text-primary-cta transition-colors flex items-center"
-                    >
-                      Membership Plan
-                      <SortIcon field="membershipPlan" />
-                    </button>
-                  </th>
-                  <th className="px-6 py-4 text-left">
-                    <button
-                      onClick={() => toggleSort("status")}
-                      className="font-semibold text-sm hover:text-primary-cta transition-colors flex items-center"
-                    >
-                      Status
-                      <SortIcon field="status" />
-                    </button>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {filteredAndSortedRequests.length > 0 ? (
-                  filteredAndSortedRequests.map((request) => (
-                    <tr
-                      key={request.requestId}
-                      className="border-b border-foreground/10 hover:bg-background/50 transition-colors"
-                    >
-                      <td className="px-6 py-4 text-sm font-medium">
-                        {request.requestId}
-                      </td>
-                      <td className="px-6 py-4 text-sm">{request.clientName}</td>
-                      <td className="px-6 py-4 text-sm text-foreground/80">
-                        {request.address}
-                      </td>
-                      <td className="px-6 py-4 text-sm">{request.issueType}</td>
-                      <td className="px-6 py-4 text-sm">{request.membershipPlan}</td>
-                      <td className="px-6 py-4 text-sm">
-                        <span
-                          className={`px-3 py-1 rounded-full text-xs font-medium ${
-                            getStatusColor(request.status)
-                          }`}
-                        >
-                          {request.status.charAt(0).toUpperCase() +
-                            request.status.slice(1).replace("-", " ")}
-                        </span>
-                      </td>
-                    </tr>
-                  ))
-                ) : (
-                  <tr>
-                    <td colSpan={6} className="px-6 py-12 text-center text-foreground/50">
-                      No service requests found.
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-          </div>
-        </div>
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="OW HomeShield"
+          columns={[
+            {
+              title: "Services",              items: [
+                { label: "Plumbing", href: "services" },
+                { label: "HVAC", href: "services" },
+                { label: "Electrical", href: "services" },
+                { label: "General Repairs", href: "services" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "about" },
+                { label: "Contact", href: "contact" },
+                { label: "Pricing", href: "pricing" },
+                { label: "Blog", href: "#" }
+              ]
+            },
+            {
+              title: "Support",              items: [
+                { label: "Emergency", href: "tel:226-224-3573" },
+                { label: "FAQ", href: "#" },
+                { label: "Terms", href: "#" },
+                { label: "Privacy", href: "#" }
+              ]
+            }
+          ]}
+        />
      </div>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/membership/page.tsx
+++ b/src/app/membership/page.tsx
@@ -1,254 +1,130 @@
 "use client";

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import { useState } from "react";
-import { Upload } from "lucide-react";
-
-const navItems = [
-  { name: "Home", id: "/" },
-  { name: "Membership", id: "/membership" },
-  { name: "Services", id: "#services" },
-  { name: "Dashboard", id: "/dashboard" },
-];
-
-interface MembershipFormData {
-  fullName: string;
-  phone: string;
-  email: string;
-  homeAddress: string;
-  propertyType: string;
-  serviceDescription: string;
-  photoFile: File | null;
-}
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Sparkles, Package } from "lucide-react";

 export default function MembershipPage() {
-  const [formData, setFormData] = useState<MembershipFormData>({
-    fullName: "",    phone: "",    email: "",    homeAddress: "",    propertyType: "",    serviceDescription: "",    photoFile: null,
-  });
-
-  const [submitted, setSubmitted] = useState(false);
-
-  const handleInputChange = (
-    e: React.ChangeEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >
-  ) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-  };
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files[0]) {
-      setFormData((prev) => ({
-        ...prev,
-        photoFile: e.target.files![0],
-      }));
-    }
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    console.log("Form submitted:", formData);
-    setSubmitted(true);
-    setTimeout(() => {
-      setFormData({
-        fullName: "",        phone: "",        email: "",        homeAddress: "",        propertyType: "",        serviceDescription: "",        photoFile: null,
-      });
-      setSubmitted(false);
-    }, 3000);
-  };
-
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
-      sizing="medium"
+      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="semibold"
    >
-      <NavbarStyleFullscreen
-        navItems={navItems}
-        brandName="OW HomeShield"
-        bottomLeftText="24/7 Support"
-        bottomRightText="support@owhomeshield.com"
-      />
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="OW HomeShield"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "services" },
+            { name: "Pricing", id: "pricing" },
+            { name: "About", id: "about" }
+          ]}
+          button={{
+            text: "Get Started",            href: "tel:226-224-3573"
+          }}
+          animateOnLoad={true}
+        />
+      </div>

-      <div className="min-h-screen pt-20 pb-20 px-4">
-        <div className="max-w-2xl mx-auto">
-          <h1 className="text-4xl font-bold mb-4 text-center">
-            New Member Signup
-          </h1>
-          <p className="text-center text-foreground/70 mb-12">
-            Join OW HomeShield and get professional home maintenance and repair
-            services.
-          </p>
+      <div id="pricing" data-section="pricing">
+        <PricingCardThree
+          title="Membership Plans"
+          description="Choose the perfect plan for your home protection needs"
+          tag="Pricing"
+          tagIcon={Package}
+          plans={[
+            {
+              id: "basic",              price: "$44/month",              name: "Basic Plan",              buttons: [
+                { text: "Get Started", href: "tel:226-224-3573" },
+                { text: "Learn More", href: "#" }
+              ],
+              features: [
+                "1 service visit per month",                "10% renovation discount",                "Email support",                "Basic emergency response"
+              ]
+            },
+            {
+              id: "standard",              badge: "Most Popular",              badgeIcon: Sparkles,
+              price: "$59/month",              name: "Standard Plan",              buttons: [
+                { text: "Get Started", href: "tel:226-224-3573" },
+                { text: "Learn More", href: "#" }
+              ],
+              features: [
+                "2 service visits per month",                "15% renovation discount",                "Priority booking",                "Phone & email support",                "24/7 emergency support"
+              ]
+            },
+            {
+              id: "premium",              price: "$84/month",              name: "Premium Plan",              buttons: [
+                { text: "Get Started", href: "tel:226-224-3573" },
+                { text: "Learn More", href: "#" }
+              ],
+              features: [
+                "Unlimited service requests",                "20% renovation discount",                "Premium scheduling",                "Priority phone support",                "24/7 emergency coverage",                "Annual home inspection"
+              ]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          tagAnimation="slide-up"
+          buttonAnimation="slide-up"
+        />
+      </div>

-          <div className="bg-card rounded-lg p-8 border border-foreground/10">
-            {submitted ? (
-              <div className="text-center py-12">
-                <div className="text-5xl mb-4">✓</div>
-                <h2 className="text-2xl font-bold mb-2">
-                  Thank you for signing up!
-                </h2>
-                <p className="text-foreground/70">
-                  We'll review your information and contact you shortly.
-                </p>
-              </div>
-            ) : (
-              <form onSubmit={handleSubmit} className="space-y-6">
-                {/* Full Name */}
-                <div>
-                  <label className="block text-sm font-medium mb-2">
-                    Full Name *
-                  </label>
-                  <input
-                    type="text"
-                    name="fullName"
-                    value={formData.fullName}
-                    onChange={handleInputChange}
-                    required
-                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
-                    placeholder="John Doe"
-                  />
-                </div>
+      <div id="contact" data-section="contact">
+        <ContactText
+          text="Ready to join OW HomeShield and protect your home? Select a membership plan that works best for you and start receiving expert care today."
+          animationType="entrance-slide"
+          buttons={[
+            { text: "Start Your Membership", href: "tel:226-224-3573" },
+            { text: "Contact Us", href: "tel:226-224-3573" }
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>

-                {/* Phone */}
-                <div>
-                  <label className="block text-sm font-medium mb-2">
-                    Phone Number *
-                  </label>
-                  <input
-                    type="tel"
-                    name="phone"
-                    value={formData.phone}
-                    onChange={handleInputChange}
-                    required
-                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
-                    placeholder="(555) 123-4567"
-                  />
-                </div>
-
-                {/* Email */}
-                <div>
-                  <label className="block text-sm font-medium mb-2">
-                    Email Address *
-                  </label>
-                  <input
-                    type="email"
-                    name="email"
-                    value={formData.email}
-                    onChange={handleInputChange}
-                    required
-                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
-                    placeholder="john@example.com"
-                  />
-                </div>
-
-                {/* Home Address */}
-                <div>
-                  <label className="block text-sm font-medium mb-2">
-                    Home Address *
-                  </label>
-                  <input
-                    type="text"
-                    name="homeAddress"
-                    value={formData.homeAddress}
-                    onChange={handleInputChange}
-                    required
-                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
-                    placeholder="123 Main Street, City, State 12345"
-                  />
-                </div>
-
-                {/* Property Type */}
-                <div>
-                  <label className="block text-sm font-medium mb-2">
-                    Property Type *
-                  </label>
-                  <select
-                    name="propertyType"
-                    value={formData.propertyType}
-                    onChange={handleInputChange}
-                    required
-                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
-                  >
-                    <option value="">Select a property type</option>
-                    <option value="single-family">Single Family Home</option>
-                    <option value="condo">Condo/Townhouse</option>
-                    <option value="apartment">Apartment</option>
-                    <option value="multi-family">Multi-Family</option>
-                    <option value="commercial">Commercial</option>
-                  </select>
-                </div>
-
-                {/* Service Description */}
-                <div>
-                  <label className="block text-sm font-medium mb-2">
-                    Service Description *
-                  </label>
-                  <textarea
-                    name="serviceDescription"
-                    value={formData.serviceDescription}
-                    onChange={handleInputChange}
-                    required
-                    rows={4}
-                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
-                    placeholder="Describe the services you need..."
-                  />
-                </div>
-
-                {/* Photo Upload */}
-                <div>
-                  <label className="block text-sm font-medium mb-2">
-                    Upload Photo (Optional)
-                  </label>
-                  <div className="border-2 border-dashed border-foreground/20 rounded-lg p-6 text-center hover:border-primary-cta transition-colors">
-                    <input
-                      type="file"
-                      name="photo"
-                      onChange={handleFileChange}
-                      accept="image/*"
-                      className="hidden"
-                      id="photo-upload"
-                    />
-                    <label
-                      htmlFor="photo-upload"
-                      className="cursor-pointer flex flex-col items-center gap-2"
-                    >
-                      <Upload className="w-8 h-8 text-primary-cta" />
-                      <span className="text-sm font-medium">
-                        {formData.photoFile
-                          ? formData.photoFile.name
-                          : "Click to upload or drag and drop"}
-                      </span>
-                      <span className="text-xs text-foreground/50">
-                        PNG, JPG, GIF up to 10MB
-                      </span>
-                    </label>
-                  </div>
-                </div>
-
-                {/* Submit Button */}
-                <button
-                  type="submit"
-                  className="w-full bg-primary-cta text-white font-medium py-3 rounded-lg hover:opacity-90 transition-opacity"
-                >
-                  Submit Application
-                </button>
-              </form>
-            )}
-          </div>
-        </div>
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="OW HomeShield"
+          columns={[
+            {
+              title: "Services",              items: [
+                { label: "Plumbing", href: "services" },
+                { label: "HVAC", href: "services" },
+                { label: "Electrical", href: "services" },
+                { label: "General Repairs", href: "services" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "about" },
+                { label: "Contact", href: "contact" },
+                { label: "Pricing", href: "pricing" },
+                { label: "Blog", href: "#" }
+              ]
+            },
+            {
+              title: "Support",              items: [
+                { label: "Emergency", href: "tel:226-224-3573" },
+                { label: "FAQ", href: "#" },
+                { label: "Terms", href: "#" },
+                { label: "Privacy", href: "#" }
+              ]
+            }
+          ]}
+        />
      </div>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,59 +1,243 @@
 "use client";

-import { ThemeProvider } from "@/components/theme/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-
-export default function Home() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Contact", id: "/contact" },
-  ];
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
+import AboutMetric from "@/components/sections/about/AboutMetric";
+import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
+import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
+import TeamCardOne from "@/components/sections/team/TeamCardOne";
+import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { TrendingUp, ShoppingCart, Users, Globe } from "lucide-react";

+export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
-      borderRadius="rounded"
-      contentWidth="medium"
-      sizing="medium"
-      background="none"
-      cardStyle="solid"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="largeSmallSizeLargeTitles"
+      background="aurora"
+      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="semibold"
    >
-      <NavbarStyleFullscreen
-        navItems={navItems}
-        brandName="OW HomeShield"
-        bottomLeftText="Available 24/7"
-        bottomRightText="support@owhomeshield.com"
-      />
-      <main>
-        <section className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
-          <div className="text-center">
-            <h1 className="text-5xl font-bold text-gray-900 mb-4">
-              OW HomeShield
-            </h1>
-            <p className="text-xl text-gray-600 mb-8">
-              Professional Home Maintenance & Repair Services
-            </p>
-            <div className="flex gap-4 justify-center">
-              <a
-                href="/contact"
-                className="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
-              >
-                Get Started
-              </a>
-              <a
-                href="#contact"
-                className="px-8 py-3 border-2 border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition"
-              >
-                Learn More
-              </a>
-            </div>
-          </div>
-        </section>
-      </main>
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Webuild"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "#about" },
+            { name: "Features", id: "#features" },
+            { name: "Pricing", id: "#pricing" },
+            { name: "Contact", id: "#contact" }
+          ]}
+          button={{
+            text: "Get Started",            href: "contact"
+          }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardTestimonial
+          title="Build Modern Web Experiences"
+          description="Create stunning, responsive websites with our comprehensive component library and modern design system."
+          tag="New Release"
+          tagAnimation="slide-up"
+          background={{ variant: "glowing-orb" }}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkUVlKQx6CGDwb0ad68ywE0VM3/uploaded-1773157790240-ol9uxz1g.jpg"
+          imageAlt="Webuild platform showcase"
+          mediaAnimation="slide-up"
+          testimonials={[
+            {
+              name: "Sarah Johnson",              handle: "CEO, TechCorp",              testimonial: "This platform transformed how we build web experiences. Incredibly intuitive and powerful.",              rating: 5,
+              imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
+            },
+            {
+              name: "Michael Chen",              handle: "Product Designer, InnovateLabs",              testimonial: "The component library saved us months of development time. Highly recommended!",              rating: 5,
+              imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"
+            }
+          ]}
+          testimonialRotationInterval={5000}
+          buttons={[
+            { text: "Get Started", href: "contact" },
+            { text: "Learn More", href: "#features" }
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <AboutMetric
+          title="Empowering developers to create amazing experiences with a comprehensive design system"
+          metrics={[
+            { icon: TrendingUp, label: "Performance", value: "99.9%" },
+            { icon: ShoppingCart, label: "Trusted Since", value: "2020" },
+            { icon: Users, label: "Active Users", value: "50K+" },
+            { icon: Globe, label: "Global Reach", value: "120+" }
+          ]}
+          metricsAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardTwentyFour
+          title="Powerful Features"
+          description="Everything you need to build beautiful, scalable web applications"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          features={[
+            {
+              id: "1",              title: "Component Library",              author: "By Webuild Team",              description: "Access 100+ pre-built, customizable components ready for production use.",              tags: ["Design", "Components"],
+              imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&h=400&fit=crop"
+            },
+            {
+              id: "2",              title: "Design System",              author: "By Webuild Team",              description: "Consistent design tokens and guidelines for scalable applications.",              tags: ["Design", "System"],
+              imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=600&h=400&fit=crop"
+            },
+            {
+              id: "3",              title: "Developer Tools",              author: "By Webuild Team",              description: "Powerful CLI tools and integrations to streamline your workflow.",              tags: ["Tools", "Development"],
+              imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&h=400&fit=crop"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="pricing" data-section="pricing">
+        <PricingCardOne
+          title="Simple, Transparent Pricing"
+          description="Choose the perfect plan for your needs"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          plans={[
+            {
+              id: "starter",              badge: "Starter",              price: "$29/mo",              subtitle: "Perfect for individuals",              features: [
+                "Unlimited projects",                "20 component variations",                "Community support",                "Basic analytics"
+              ]
+            },
+            {
+              id: "professional",              badge: "Most Popular",              badgeIcon: undefined,
+              price: "$79/mo",              subtitle: "For growing teams",              features: [
+                "Everything in Starter",                "100+ components",                "Priority email support",                "Advanced analytics",                "Team collaboration"
+              ]
+            },
+            {
+              id: "enterprise",              badge: "Enterprise",              price: "Custom",              subtitle: "For large organizations",              features: [
+                "Everything in Professional",                "Custom components",                "24/7 phone support",                "Dedicated account manager",                "On-premise deployment"
+              ]
+            }
+          ]}
+        />
+      </div>
+
+      <div id="team" data-section="team">
+        <TeamCardOne
+          title="Meet Our Team"
+          description="The talented people behind Webuild"
+          textboxLayout="default"
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          members={[
+            {
+              id: "1",              name: "Emily Watson",              role: "Creative Director",              imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300&h=300&fit=crop"
+            },
+            {
+              id: "2",              name: "James Rodriguez",              role: "Lead Developer",              imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop"
+            },
+            {
+              id: "3",              name: "Sophia Lee",              role: "UX Designer",              imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&h=300&fit=crop"
+            },
+            {
+              id: "4",              name: "Marcus Johnson",              role: "Product Manager",              imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=300&h=300&fit=crop"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="testimonial" data-section="testimonial">
+        <TestimonialCardFifteen
+          testimonial="Webuild has completely revolutionized how we approach web development. The components are beautifully designed, well-documented, and save us incredible amounts of time. Our team productivity has increased by 40%."
+          rating={5}
+          author="David Park, CTO at StartupHub"
+          avatars={[
+            {
+              src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=50&h=50&fit=crop",              alt: "David Park"
+            },
+            {
+              src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=50&h=50&fit=crop",              alt: "Team member"
+            },
+            {
+              src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=50&h=50&fit=crop",              alt: "Team member"
+            }
+          ]}
+          ratingAnimation="slide-up"
+          avatarsAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Newsletter"
+          title="Stay Updated with the Latest Features"
+          description="Subscribe to our newsletter to get exclusive updates, tips, and early access to new components."
+          background={{ variant: "rotated-rays-animated-grid" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your email"
+          buttonText="Subscribe"
+          termsText="We respect your privacy. Unsubscribe at any time."
+          onSubmit={(email) => console.log("Subscribed:", email)}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "Components", href: "#features" },
+                { label: "Pricing", href: "#pricing" },
+                { label: "Documentation", href: "#" },
+                { label: "Updates", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About", href: "#about" },
+                { label: "Team", href: "#team" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              title: "Resources",              items: [
+                { label: "Support", href: "#contact" },
+                { label: "Community", href: "#" },
+                { label: "Status", href: "#" },
+                { label: "Contact", href: "#contact" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy", href: "#" },
+                { label: "Terms", href: "#" },
+                { label: "License", href: "#" },
+                { label: "Cookie Policy", href: "#" }
+              ]
+            }
+          ]}
+          bottomLeftText="© 2025 Webuild. All rights reserved."
+          bottomRightText="Made with Webuild"
+        />
+      </div>
    </ThemeProvider>
  );
 }
--- a/src/app/service-request/page.tsx
+++ b/src/app/service-request/page.tsx
@@ -1,258 +1,84 @@
 "use client";

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import { useState } from "react";
-import { Upload } from "lucide-react";
-
-const navItems = [
-  { name: "Home", id: "/" },
-  { name: "Membership", id: "/membership" },
-  { name: "Services", id: "#services" },
-  { name: "Dashboard", id: "/dashboard" },
-];
-
-interface ServiceRequestFormData {
-  memberName: string;
-  phone: string;
-  address: string;
-  membershipPlan: string;
-  issueType: string;
-  description: string;
-  photoFile: File | null;
-}
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterBase from "@/components/sections/footer/FooterBase";

 export default function ServiceRequestPage() {
-  const [formData, setFormData] = useState<ServiceRequestFormData>({
-    memberName: "",    phone: "",    address: "",    membershipPlan: "",    issueType: "",    description: "",    photoFile: null,
-  });
-
-  const [submitted, setSubmitted] = useState(false);
-
-  const handleInputChange = (
-    e: React.ChangeEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >
-  ) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-  };
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files[0]) {
-      setFormData((prev) => ({
-        ...prev,
-        photoFile: e.target.files![0],
-      }));
-    }
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    console.log("Service request submitted:", formData);
-    setSubmitted(true);
-    setTimeout(() => {
-      setFormData({
-        memberName: "",        phone: "",        address: "",        membershipPlan: "",        issueType: "",        description: "",        photoFile: null,
-      });
-      setSubmitted(false);
-    }, 3000);
-  };
-
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
-      sizing="medium"
+      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
-      headingFontWeight="bold"
+      headingFontWeight="semibold"
    >
-      <NavbarStyleFullscreen
-        navItems={navItems}
-        brandName="OW HomeShield"
-        bottomLeftText="24/7 Support"
-        bottomRightText="support@owhomeshield.com"
-      />
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="OW HomeShield"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "services" },
+            { name: "Pricing", id: "pricing" },
+            { name: "About", id: "about" }
+          ]}
+          button={{
+            text: "Get Started",            href: "tel:226-224-3573"
+          }}
+          animateOnLoad={true}
+        />
+      </div>

-      <div className="min-h-screen pt-20 pb-20 px-4">
-        <div className="max-w-2xl mx-auto">
-          <h1 className="text-4xl font-bold mb-4 text-center">
-            Service Request
-          </h1>
-          <p className="text-center text-foreground/70 mb-12">
-            Submit a service request and our team will respond within 24 hours.
-          </p>
+      <div id="contact" data-section="contact">
+        <ContactText
+          text="Request a service visit from our expert technicians. Whether it's an emergency or scheduled maintenance, we're here to help keep your home in perfect condition."
+          animationType="entrance-slide"
+          buttons={[
+            { text: "Request Service", href: "tel:226-224-3573" },
+            { text: "View Pricing", href: "pricing" }
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>

-          <div className="bg-card rounded-lg p-8 border border-foreground/10">
-            {submitted ? (
-              <div className="text-center py-12">
-                <div className="text-5xl mb-4">✓</div>
-                <h2 className="text-2xl font-bold mb-2">
-                  Service Request Submitted!
-                </h2>
-                <p className="text-foreground/70">
-                  A technician will contact you within 24 hours.
-                </p>
-              </div>
-            ) : (
-              <form onSubmit={handleSubmit} className="space-y-6">
-                {/* Member Name */}
-                <div>
-                  <label className="block text-sm font-medium mb-2">
-                    Member Name *
-                  </label>
-                  <input
-                    type="text"
-                    name="memberName"
-                    value={formData.memberName}
-                    onChange={handleInputChange}
-                    required
-                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
-                    placeholder="John Doe"
-                  />
-                </div>
-
-                {/* Phone */}
-                <div>
-                  <label className="block text-sm font-medium mb-2">
-                    Phone Number *
-                  </label>
-                  <input
-                    type="tel"
-                    name="phone"
-                    value={formData.phone}
-                    onChange={handleInputChange}
-                    required
-                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
-                    placeholder="(555) 123-4567"
-                  />
-                </div>
-
-                {/* Address */}
-                <div>
-                  <label className="block text-sm font-medium mb-2">
-                    Service Address *
-                  </label>
-                  <input
-                    type="text"
-                    name="address"
-                    value={formData.address}
-                    onChange={handleInputChange}
-                    required
-                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
-                    placeholder="123 Main Street, City, State 12345"
-                  />
-                </div>
-
-                {/* Membership Plan */}
-                <div>
-                  <label className="block text-sm font-medium mb-2">
-                    Membership Plan *
-                  </label>
-                  <select
-                    name="membershipPlan"
-                    value={formData.membershipPlan}
-                    onChange={handleInputChange}
-                    required
-                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
-                  >
-                    <option value="">Select a plan</option>
-                    <option value="basic">Basic Plan</option>
-                    <option value="standard">Standard Plan</option>
-                    <option value="premium">Premium Plan</option>
-                    <option value="elite">Elite Plan</option>
-                  </select>
-                </div>
-
-                {/* Issue Type */}
-                <div>
-                  <label className="block text-sm font-medium mb-2">
-                    Issue Type *
-                  </label>
-                  <select
-                    name="issueType"
-                    value={formData.issueType}
-                    onChange={handleInputChange}
-                    required
-                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
-                  >
-                    <option value="">Select issue type</option>
-                    <option value="plumbing">Plumbing</option>
-                    <option value="electrical">Electrical</option>
-                    <option value="hvac">HVAC</option>
-                    <option value="roofing">Roofing</option>
-                    <option value="general">General Maintenance</option>
-                    <option value="emergency">Emergency Repair</option>
-                  </select>
-                </div>
-
-                {/* Description */}
-                <div>
-                  <label className="block text-sm font-medium mb-2">
-                    Issue Description *
-                  </label>
-                  <textarea
-                    name="description"
-                    value={formData.description}
-                    onChange={handleInputChange}
-                    required
-                    rows={4}
-                    className="w-full px-4 py-2 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:border-primary-cta"
-                    placeholder="Describe the issue in detail..."
-                  />
-                </div>
-
-                {/* Photo Upload */}
-                <div>
-                  <label className="block text-sm font-medium mb-2">
-                    Upload Photo (Optional)
-                  </label>
-                  <div className="border-2 border-dashed border-foreground/20 rounded-lg p-6 text-center hover:border-primary-cta transition-colors">
-                    <input
-                      type="file"
-                      name="photo"
-                      onChange={handleFileChange}
-                      accept="image/*"
-                      className="hidden"
-                      id="photo-upload"
-                    />
-                    <label
-                      htmlFor="photo-upload"
-                      className="cursor-pointer flex flex-col items-center gap-2"
-                    >
-                      <Upload className="w-8 h-8 text-primary-cta" />
-                      <span className="text-sm font-medium">
-                        {formData.photoFile
-                          ? formData.photoFile.name
-                          : "Click to upload or drag and drop"}
-                      </span>
-                      <span className="text-xs text-foreground/50">
-                        PNG, JPG, GIF up to 10MB
-                      </span>
-                    </label>
-                  </div>
-                </div>
-
-                {/* Submit Button */}
-                <button
-                  type="submit"
-                  className="w-full bg-primary-cta text-white font-medium py-3 rounded-lg hover:opacity-90 transition-opacity"
-                >
-                  Submit Service Request
-                </button>
-              </form>
-            )}
-          </div>
-        </div>
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="OW HomeShield"
+          columns={[
+            {
+              title: "Services",              items: [
+                { label: "Plumbing", href: "services" },
+                { label: "HVAC", href: "services" },
+                { label: "Electrical", href: "services" },
+                { label: "General Repairs", href: "services" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "about" },
+                { label: "Contact", href: "contact" },
+                { label: "Pricing", href: "pricing" },
+                { label: "Blog", href: "#" }
+              ]
+            },
+            {
+              title: "Support",              items: [
+                { label: "Emergency", href: "tel:226-224-3573" },
+                { label: "FAQ", href: "#" },
+                { label: "Terms", href: "#" },
+                { label: "Privacy", href: "#" }
+              ]
+            }
+          ]}
+        />
      </div>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
  --accent: #ffffff;
  --background-accent: #ffffff; */

-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #106EFB;
+  --background: #f7f6f7;
+  --card: #ffffff;
+  --foreground: #1a1a1a;
+  --primary-cta: #0798ff;
  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #ffffff;
  --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #106EFB;
+  --accent: #93c7ff;
+  --background-accent: #a8cde8;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
Author	SHA1	Message	Date
bender	a5a5729ef0	Update src/app/contact/page.tsx	2026-03-10 16:41:32 +00:00
bender	52e71dbe16	Update src/app/styles/variables.css	2026-03-10 16:36:21 +00:00
bender	764344cf9b	Update src/app/page.tsx	2026-03-10 16:36:19 +00:00
bender	33f47ee148	Update src/app/contact/page.tsx	2026-03-10 16:36:17 +00:00
bender	53cbc550eb	Update src/app/service-request/page.tsx	2026-03-10 16:05:15 +00:00
bender	283cbc8441	Update src/app/membership/page.tsx	2026-03-10 16:05:13 +00:00
bender	8e4a6f0594	Update src/app/dashboard/page.tsx	2026-03-10 16:05:12 +00:00
bender	7813c4d12c	Update src/app/contact/page.tsx	2026-03-10 16:05:10 +00:00
bender	d86585a83e	Update src/app/page.tsx	2026-03-10 15:50:37 +00:00
bender	7d9e0f70a9	Merge version_6 into main Merge version_6 into main	2026-03-10 15:48:22 +00:00