Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -6,7 +6,7 @@ import AboutMetric from '@/components/sections/about/AboutMetric';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 import { Users, Zap } from "lucide-react";
@@ -30,113 +30,50 @@ export default function LandingPage() {
       <NavbarLayoutFloatingInline
       navItems={[
         {
-          name: "Home",
-          id: "hero",
-        },
+          name: "Home",          id: "/"},
         {
-          name: "Services",
-          id: "services",
-        },
+          name: "Services",          id: "services"},
         {
-          name: "About",
-          id: "about",
-        },
+          name: "About",          id: "about"},
         {
-          name: "Reviews",
-          id: "testimonials",
-        },
+          name: "Reviews",          id: "testimonials"},
         {
-          name: "Contact",
-          id: "contact",
-        },
+          name: "Pricing",          id: "/pricing"},
+        {
+          name: "Contact",          id: "contact"},
       ]}
       brandName="OnePump Septic"
       button={{
-        text: "Call Now",
-        href: "tel:3615550123",
-      }}
+        text: "Call Now",        href: "tel:3615550123"}}
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplitKpi
+      <HeroBillboard
       background={{
-        variant: "plain",
-      }}
+        variant: "plain"}}
       title="Fast, Honest Septic Service in Victoria, TX"
       description="Reliable septic pumping, cleaning, and emergency repair for Victoria homeowners. Family-owned, honest pricing, and professional service."
-      kpis={[
-        {
-          value: "5.0",
-          label: "Google Rating",
-        },
-        {
-          value: "75+",
-          label: "Happy Clients",
-        },
-        {
-          value: "Fast",
-          label: "Response Time",
-        },
-      ]}
-      enableKpiAnimation={true}
       buttons={[
         {
-          text: "Call Now",
-          href: "tel:3615550123",
-        },
+          text: "Call Now",          href: "tel:3615550123"},
         {
-          text: "Request Service",
-          href: "#contact",
-        },
+          text: "Request Service",          href: "#contact"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/happy-female-construction-worker-with-folded-arms-standing-near-truck-sunlight_181624-55805.jpg"
       imageAlt="OnePump Septic Service Truck"
       mediaAnimation="slide-up"
       avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/combine-machine-service-mechanic-repairing-motor-outdoors_146671-19071.jpg",
-          alt: "Mechanic",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/man-working-as-truck-driver_23-2151489845.jpg",
-          alt: "Driver",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/fireman-holding-jacket-protective-helmet-garage-fire-department-leaning-fire-engine-looking-outside_613910-20419.jpg",
-          alt: "Team Member",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/lifestyle-ecofriendly-person_23-2149125146.jpg",
-          alt: "Staff",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-female-construction-worker-with-folded-arms-standing-near-truck-sunlight_181624-55805.jpg",
-          alt: "Truck",
-        },
+        { src: "http://img.b2bpic.net/free-photo/combine-machine-service-mechanic-repairing-motor-outdoors_146671-19071.jpg", alt: "Mechanic" },
+        { src: "http://img.b2bpic.net/free-photo/man-working-as-truck-driver_23-2151489845.jpg", alt: "Driver" },
+        { src: "http://img.b2bpic.net/free-photo/fireman-holding-jacket-protective-helmet-garage-fire-department-leaning-fire-engine-looking-outside_613910-20419.jpg", alt: "Team Member" }
       ]}
       avatarText="Our local team is ready to serve."
       marqueeItems={[
-        {
-          type: "text",
-          text: "Emergency Repair",
-        },
-        {
-          type: "text",
-          text: "Tank Pumping",
-        },
-        {
-          type: "text",
-          text: "System Inspection",
-        },
-        {
-          type: "text",
-          text: "Drain Cleaning",
-        },
-        {
-          type: "text",
-          text: "Licensed Techs",
-        },
+        { type: "text", text: "Emergency Repair" },
+        { type: "text", text: "Tank Pumping" },
+        { type: "text", text: "System Inspection" },
+        { type: "text", text: "Drain Cleaning" },
       ]}
     />
   </div>
@@ -147,38 +84,14 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "Septic Tank Pumping",
-          description: "Professional removal of waste to prevent overflows and backups.",
-          imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721542.jpg",
-          imageAlt: "Tank Pumping",
-        },
+          title: "Septic Tank Pumping",          description: "Professional removal of waste to prevent overflows and backups.",          imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721542.jpg",          imageAlt: "Tank Pumping"},
         {
-          title: "Inspection & Cleaning",
-          description: "Routine maintenance and inspections to catch issues early.",
-          imageSrc: "http://img.b2bpic.net/free-photo/plumber-repair-experienced-attentive-middleaged-man-examining-bottom-kitchen-sink_259150-58266.jpg",
-          imageAlt: "System Inspection",
-        },
+          title: "Inspection & Cleaning",          description: "Routine maintenance and inspections to catch issues early.",          imageSrc: "http://img.b2bpic.net/free-photo/plumber-repair-experienced-attentive-middleaged-man-examining-bottom-kitchen-sink_259150-58266.jpg",          imageAlt: "System Inspection"},
         {
-          title: "Emergency Repairs",
-          description: "Quick, professional response when you need us most.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-raises-jack-4x4-off-road-truck_1153-4382.jpg",
-          imageAlt: "Emergency Service",
-        },
-        {
-          title: "Line Jetting",
-          description: "Clearing stubborn clogs for optimal pipe performance.",
-          imageSrc: "http://img.b2bpic.net/free-photo/male-worker-operating-machinery-factory_107420-96043.jpg",
-          imageAlt: "Line Cleaning",
-        },
-        {
-          title: "Filter Maintenance",
-          description: "Cleaning and replacement of outlet filters for system health.",
-          imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721535.jpg",
-          imageAlt: "Filter Service",
-        },
+          title: "Emergency Repairs",          description: "Quick, professional response when you need us most.",          imageSrc: "http://img.b2bpic.net/free-photo/man-raises-jack-4x4-off-road-truck_1153-4382.jpg",          imageAlt: "Emergency Service"},
       ]}
       title="Core Septic Services"
-      description="Comprehensive care for your septic system to keep your home running smoothly."
+      description="We provide urgent, reliable solutions that bring peace of mind, ensuring your home remains safe and operational when you need us most."
     />
   </div>
 
@@ -189,19 +102,13 @@ export default function LandingPage() {
       metrics={[
         {
           icon: Users,
-          label: "Family-Owned",
-          value: "Local Roots",
-        },
+          label: "Family-Owned",          value: "Local Roots"},
         {
           icon: Users,
-          label: "No Upselling",
-          value: "Honest Work",
-        },
+          label: "No Upselling",          value: "Honest Work"},
         {
           icon: Zap,
-          label: "Response",
-          value: "Prompt Service",
-        },
+          label: "Response",          value: "Prompt Service"},
       ]}
       metricsAnimation="slide-up"
     />
@@ -214,59 +121,16 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
-          name: "Mark S.",
-          role: "Homeowner",
-          company: "Victoria, TX",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-354.jpg",
-        },
+          id: "1",          name: "Mark S.",          role: "Homeowner",          company: "Victoria, TX",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-354.jpg"},
         {
-          id: "2",
-          name: "Linda R.",
-          role: "Property Owner",
-          company: "Victoria, TX",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg",
-        },
-        {
-          id: "3",
-          name: "David W.",
-          role: "Homeowner",
-          company: "Victoria, TX",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-home-with-book_23-2147611420.jpg",
-        },
-        {
-          id: "4",
-          name: "Sarah K.",
-          role: "Small Business",
-          company: "Victoria, TX",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/people-recording-their-house-tour_23-2151139106.jpg",
-        },
-        {
-          id: "5",
-          name: "Brian M.",
-          role: "Homeowner",
-          company: "Victoria, TX",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-her-kitchen_329181-20396.jpg",
-        },
+          id: "2",          name: "Linda R.",          role: "Property Owner",          company: "Victoria, TX",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg"},
       ]}
       kpiItems={[
-        {
-          value: "5.0",
-          label: "Rating",
-        },
-        {
-          value: "75+",
-          label: "Reviews",
-        },
-        {
-          value: "100%",
-          label: "Local",
-        },
+        { value: "5.0", label: "Rating" },
+        { value: "75+", label: "Reviews" },
+        { value: "100%", label: "Local" },
       ]}
       title="Trusted by Local Homeowners"
       description="See why Victoria residents choose us for their septic needs."
@@ -276,17 +140,12 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
       tag="Contact Us"
       title="Need Help Today?"
       description="Call for fast service or request an appointment online."
       buttons={[
-        {
-          text: "Call: 361-555-0123",
-          href: "tel:3615550123",
-        },
+        { text: "Call: 361-555-0123", href: "tel:3615550123" },
       ]}
     />
   </div>
@@ -295,37 +154,15 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         {
-          title: "Services",
-          items: [
-            {
-              label: "Pumping",
-              href: "#services",
-            },
-            {
-              label: "Inspection",
-              href: "#services",
-            },
-            {
-              label: "Emergency",
-              href: "#services",
-            },
+          title: "Services",          items: [
+            { label: "Pumping", href: "#services" },
+            { label: "Inspection", href: "#services" },
           ],
         },
         {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Reviews",
-              href: "#testimonials",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
+          title: "Company",          items: [
+            { label: "About Us", href: "#about" },
+            { label: "Contact", href: "#contact" },
           ],
         },
       ]}
@@ -335,4 +172,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/pricing/page.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function PricingPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-bubble"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="mediumLarge"
+        sizing="mediumLargeSizeLargeTitles"
+        background="noise"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingInline
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "About", id: "/about" },
+            { name: "Reviews", id: "/testimonials" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          brandName="OnePump Septic"
+          button={{ text: "Call Now", href: "tel:3615550123" }}
+        />
+        
+        <PricingCardFive
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          title="Transparent Pricing"
+          description="Simple, upfront rates for all our essential septic services."
+          plans={[
+            {
+              id: "basic",              tag: "Popular",              price: "$199",              period: "per visit",              description: "Standard tank pumping and maintenance check.",              button: { text: "Select Plan", href: "#contact" },
+              featuresTitle: "Includes",              features: ["Up to 1000 gal pump", "System health check", "Lid cleaning"],
+            },
+            {
+              id: "pro",              tag: "Recommended",              price: "$349",              period: "per visit",              description: "Complete system cleaning and detailed inspection report.",              button: { text: "Select Plan", href: "#contact" },
+              featuresTitle: "Includes",              features: ["All basic features", "Detailed system report", "Filter cleaning", "Emergency priority"],
+            }
+          ]}
+        />
+
+        <FooterBase
+          columns={[
+            {
+              title: "Services", items: [{ label: "Pumping", href: "#services" }, { label: "Inspection", href: "#services" }]
+            },
+            {
+              title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }]
+            }
+          ]}
+          logoText="OnePump Septic"
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
-  --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1f3251;
-  --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #1c1c1c;
-  --accent: #15479c;
-  --background-accent: #a8cce8;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #120006e6;
+  --primary-cta: #e63946;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #f9f9f9;
+  --secondary-cta-text: #120006e6;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);