Update src/app/fleet/page.tsx

Merge version_101 into main
2026-05-03 20:32:57 +00:00 · 2026-05-03 20:12:06 +00:00 · 2026-05-03 20:12:03 +00:00 · 2026-05-03 20:09:07 +00:00 · 2026-05-03 20:09:03 +00:00 · 2026-05-03 20:06:13 +00:00
9 changed files with 434 additions and 283 deletions
--- a/src/app/contact-us/page.tsx
+++ b/src/app/contact-us/page.tsx
@@ -0,0 +1,65 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 export default function ContactUsPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSmallSizeLargeTitles"
        background="blurBottom"
        cardStyle="soft-shadow"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarLayoutFloatingInline
            navItems={[
              { name: "Home", id: "/" },
              { name: "Our Premium Fleet", id: "/fleet" },
              { name: "Contact us", id: "/contact-us" },
            ]}
            brandName="CleanScene"
            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777837799704-b8guhfm1.png"
            logoAlt="CleanScene Logo"
            button={{ text: "Get My Free Estimate", href: "/estimate" }}
            className="py-2"
          />
        </div>
        <div id="contact" data-section="contact">
            <ContactCTA
            tag="Contact us"
            title="Get in Touch"
            description="Reach out to us via email at Info@cleanscenerestroom.com or call us at 920-212-1578 for any inquiries regarding our premium mobile restroom trailers."
            buttons={[
                { text: "Call 920-212-1578", href: "tel:920-212-1578" },
                { text: "Email Us", href: "mailto:Info@cleanscenerestroom.com" }
            ]}
            background={{ variant: "plain" }}
            useInvertedBackground={false}
          />
        </div>
        <div id="footer" data-section="footer">
            <FooterLogoEmphasis
            columns={[
              { items: [{ label: "Home", href: "/" }, { label: "Our Premium Fleet", href: "/fleet" }, { label: "Get My Free Estimate", href: "/estimate" }] },
              { items: [{ label: "Contact Us", href: "/contact-us" }, { label: "Privacy Policy", href: "/privacy" }, { label: "Terms", href: "/terms" }] },
            ]}
            logoText=""
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
 }
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -4,9 +4,9 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-export default function LandingPage() {
+export default function ContactPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
@@ -21,63 +21,45 @@ export default function LandingPage() {
        headingFontWeight="bold"
    >
      <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+            <NavbarLayoutFloatingInline
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "/" },
-          name: "Home",          id: "/"},
+              { name: "Our Premium Fleet", id: "/fleet" },
-        {
+              { name: "Contact us", id: "/contact-us" },
-          name: "Fleet",          id: "/fleet"},
+            ]}
-        {
+            brandName="CleanScene"
-          name: "Contact",          id: "/contact"},
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777837799704-b8guhfm1.png"
-      ]}
+            logoAlt="CleanScene Logo"
-      brandName="CleanScene Restroom Rentals"
+            button={{ text: "Get My Free Estimate", href: "/estimate" }}
-    />
+            className="py-2"
-  </div>
+          />
        </div>
-  <div id="contact" data-section="contact">
+        <div id="contact" data-section="contact">
-      <ContactSplitForm
+            <ContactSplitForm
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      title="Request a Free Estimate"
+            title="Request a Free Estimate"
-      description="Tell us about your event. We typically respond within 4 business hours."
+            titleClassName="text-[#0a7039]"
-      inputs={[
+            description="Tell us about your event. We typically respond within 4 business hours."
-        {
+            inputs={[
-          name: "name",          type: "text",          placeholder: "Full Name",          required: true,
+              { name: "name", type: "text", placeholder: "Full Name", required: true },
-        },
+              { name: "email", type: "email", placeholder: "Email Address", required: true },
-        {
+            ]}
-          name: "email",          type: "email",          placeholder: "Email Address",          required: true,
+            textarea={{ name: "message", placeholder: "Tell us about your event details...", rows: 4 }}
-        },
+            imageSrc="http://img.b2bpic.net/free-photo/happy-event-manager-banquet-hall_23-2148085332.jpg"
-      ]}
+          />
-      textarea={{
+        </div>
        name: "message",        placeholder: "Tell us about your event details...",        rows: 4,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/happy-event-manager-banquet-hall_23-2148085332.jpg"
    />
  </div>
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+            <FooterLogoEmphasis
-      columns={[
+            columns={[
-        {
+              { items: [{ label: "Home", href: "/" }, { label: "Our Premium Fleet", href: "/fleet" }, { label: "Get My Free Estimate", href: "/estimate" }] },
-          items: [
+              { items: [{ label: "Contact us", href: "/contact-us" }, { label: "Privacy Policy", href: "/privacy" }, { label: "Terms", href: "/terms" }] },
-            {
+            ]}
-              label: "Home",              href: "/"},
+            logoText="CleanScene"
-            {
+          />
-              label: "Fleet",              href: "/fleet"},
+        </div>
          ],
        },
        {
          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms",              href: "#"},
          ],
        },
      ]}
      logoText="CleanScene Restroom Rentals"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
--- a/src/app/estimate/page.tsx
+++ b/src/app/estimate/page.tsx
@@ -0,0 +1,70 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 export default function EstimatePage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSmallSizeLargeTitles"
        background="blurBottom"
        cardStyle="soft-shadow"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarLayoutFloatingInline
            navItems={[
              { name: "Home", id: "/" },
              { name: "Our Premium Fleet", id: "/fleet" },
              { name: "Contact us", id: "/contact-us" },
            ]}
            brandName="CleanScene"
            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777837799704-b8guhfm1.png"
            logoAlt="CleanScene Logo"
            button={{ text: "Get My Free Estimate", href: "/estimate" }}
            className="py-2"
          />
        </div>
        <div id="estimate-form" data-section="estimate-form">
            <ContactSplitForm
            useInvertedBackground={false}
            title="Request a free estimate"
            titleClassName="text-[#0a7039]"
            description="Tell us about your event. We typically respond within 24 business hours."
            inputs={[
              { name: "full_name", type: "text", placeholder: "Full Name", required: true },
              { name: "email", type: "email", placeholder: "Email Address", required: true },
              { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
              { name: "event_date", type: "date", placeholder: "Event Date", required: true },
              { name: "address", type: "text", placeholder: "Delivery Address", required: true },
              { name: "event_type", type: "text", placeholder: "Event Type", required: true },
            ]}
            textarea={{ name: "other_info", placeholder: "Other info (Optional)", rows: 5 }}
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777134554820-rdizvwfd.jpg?_wi=1"
          />
        </div>
        <div id="footer" data-section="footer">
            <FooterLogoEmphasis
            columns={[
              { items: [{ label: "Home", href: "/" }, { label: "Our Premium Fleet", href: "/fleet" }, { label: "Get My Free Estimate", href: "/estimate" }] },
              { items: [{ label: "Contact Us", href: "/contact-us" }, { label: "Privacy Policy", href: "/privacy" }, { label: "Terms", href: "/terms" }] },
            ]}
            logoText=""
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
 }
--- a/src/app/fleet/page.tsx
+++ b/src/app/fleet/page.tsx
@@ -2,11 +2,14 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import { useState } from 'react';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
+
 export default function FleetPage() {
  const [popupContent, setPopupContent] = useState<{title: string, body: string} | null>(null);
 export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
@@ -21,62 +24,81 @@ export default function LandingPage() {
        headingFontWeight="bold"
    >
      <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+            <NavbarLayoutFloatingInline
-      navItems={[
+            navItems={[
-        {
+                { name: "Home", id: "/" },
-          name: "Home",          id: "/"},
+                { name: "Our Premium Fleet", id: "/fleet" },
-        {
+                { name: "Contact us", id: "/contact-us" },
-          name: "Fleet",          id: "/fleet"},
+            ]}
-        {
+            brandName="CleanScene"
-          name: "Contact",          id: "/contact"},
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777837799704-b8guhfm1.png"
-      ]}
+            logoAlt="CleanScene Logo"
-      brandName="CleanScene Restroom Rentals"
+            button={{ text: "Get My Free Estimate", href: "/estimate" }}
-    />
+            className="py-2"
-  </div>
+            />
        </div>
-  <div id="product" data-section="product">
+        <div id="fleet-preview" data-section="fleet-preview">
-      <ProductCardThree
+            <ProductCardTwo
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="default"
+            textboxLayout="split-description"
-      gridVariant="uniform-all-items-equal"
+            gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      title="Our Full Fleet Inventory"
+            products={[
-      description="Explore our complete range of high-end mobile restroom solutions."
+                { 
-      products={[
+                    id: "p1", 
-        {
+                    brand: "CleanScene", 
-          id: "f1",          name: "2-Station Classic",          price: "$750/day",          imageSrc: "http://img.b2bpic.net/free-photo/backlit-mirror-minimalist-sink-spa-bathroom_169016-68891.jpg"},
+                    name: "3 Station, Private Floorplan Restroom Trailer", 
-        {
+                    price: "$1,375 per day", 
-          id: "f2",          name: "3-Station Executive",          price: "$1200/day",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-bathtub-with-faucet_1203-1500.jpg"},
+                    rating: 5, 
-        {
+                    reviewCount: "128", 
-          id: "f3",          name: "5-Station Luxury Suite",          price: "$1800/day",          imageSrc: "http://img.b2bpic.net/free-photo/small-bathroom-space-with-modern-style-furniture_23-2150864622.jpg"},
+                    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777832277795-ebq2l26f.png?_wi=1",                    onProductClick: () => setPopupContent({
-      ]}
+                        title: "Premium 3-Station Restroom Trailer Rental",                        body: "Premium 3-Station Restroom Trailer Rental in Northeast Wisconsin. Elevate your wedding, boutique event, or VIP gathering with our premium 3-station restroom trailer rental — the top choice for upscale events throughout Northeast Wisconsin and the Green Bay area. Designed for maximum privacy, our luxury portable restroom trailer features three fully individual, climate-controlled restrooms, each with a flushable toilet, vanity with running water, and high-end finishes that rival a quality home bathroom. Built with American-made equipment, our restroom trailer delivers the reliability and elegance your event deserves. From intimate weddings to corporate VIP gatherings, we provide a private, comfortable experience for every guest. Based in Green Bay, WI, CleanScene Restroom Trailer offers prompt delivery, professional setup, and full-service support across Northeast Wisconsin — so your guests enjoy a premium experience from start to finish."
-    />
+                    })
-  </div>
+                },
                { 
                    id: "p2", 
                    brand: "CleanScene", 
                    name: "4 Station, Community Floorplan Restroom Trailer", 
                    price: "$1,825 per day", 
                    rating: 5, 
                    reviewCount: "95", 
                    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777832470445-mr4qosuh.png?_wi=1",                    onProductClick: () => setPopupContent({
                        title: "Premium 4-Station Restroom Trailer Rental",                        body: "Premium 4-Station Restroom Trailer Rental in Northeast Wisconsin Elevate your Northeast Wisconsin wedding, private event, or community gathering with our 4 Station, Community Floorplan Restroom trailer. This premium portable restroom trailer is finished with luxurious, rustic wood finishings in a Men’s and Women’s restroom floor plan with 2 stations each. Designed for comfort, this trailer features climate-controlled restrooms with flushable toilets, vanities with running water, and music of your choosing. Build in the USA, our American-made restroom trailer delivers the reliability and elegance your event deserves. You can expect this trailer to provide a comfortable experience for every guest."
                    })
                },
            ]}
            title="Our premium fleet"
            textBoxTitleClassName="text-[#0a7039]"
            description="Premium, climate-controlled mobile restrooms for every event size. Multi-day rental discounts available."
            />
        </div>
-  <div id="footer" data-section="footer">
+        {popupContent && (
-      <FooterLogoEmphasis
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" onClick={() => setPopupContent(null)}>
-      columns={[
+            <div className="bg-white p-8 rounded-lg max-w-2xl shadow-xl" onClick={(e) => e.stopPropagation()}>
-        {
+              <h3 className="text-2xl font-bold mb-4">{popupContent.title}</h3>
-          items: [
+              <p className="text-gray-700 leading-relaxed">{popupContent.body}</p>
-            {
+              <button 
-              label: "Home",              href: "/"},
+                className="mt-6 bg-[#0a7039] text-white px-6 py-2 rounded hover:bg-[#075e2f] transition"
-            {
+                onClick={() => setPopupContent(null)}
-              label: "Fleet",              href: "/fleet"},
+              >
-          ],
+                Close
-        },
+              </button>
-        {
+            </div>
-          items: [
+          </div>
-            {
+        )}
-              label: "Privacy Policy",              href: "#"},
+
-            {
+        <div id="footer" data-section="footer">
-              label: "Terms",              href: "#"},
+            <FooterLogoEmphasis
-          ],
+            columns={[
-        },
+                { items: [{ label: "Home", href: "/" }, { label: "Our Premium Fleet", href: "/fleet" }, { label: "Get My Free Estimate", href: "/estimate" }] },
-      ]}
+                { items: [{ label: "Contact Us", href: "/contact-us" }, { label: "Privacy Policy", href: "/privacy" }, { label: "Terms", href: "/terms" }] },
-      logoText="CleanScene Restroom Rentals"
+            ]}
-    />
+            logoText=""
-  </div>
+            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,6 +6,11 @@ import "@/lib/gsap-setup";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Public_Sans } from "next/font/google";
 import { Nunito } from "next/font/google";
 import { Archivo } from "next/font/google";
 import { Montserrat } from "next/font/google";
 import { Libre_Baskerville } from "next/font/google";
 import { Open_Sans } from "next/font/google";
@@ -18,12 +23,13 @@ export const metadata: Metadata = {
  },
 };
-const publicSans = Public_Sans({
+
-  variable: "--font-public-sans",
+
-  subsets: ["latin"],
+
-});
+
-const inter = Inter({
+
-  variable: "--font-inter",
+const openSans = Open_Sans({
  variable: "--font-open-sans",
  subsets: ["latin"],
 });
@@ -35,7 +41,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body className={`${publicSans.variable} ${inter.variable} antialiased`}>
+        <body className={`${openSans.variable} antialiased`}>
          {children}
          <script
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,14 +2,12 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import { Crown } from "lucide-react";
 export default function LandingPage() {
  return (
@@ -26,159 +24,97 @@ export default function LandingPage() {
        headingFontWeight="bold"
    >
      <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+            <NavbarLayoutFloatingInline
-      navItems={[
+            navItems={[
-        {
+                { name: "Home", id: "/" },
-          name: "Home",          id: "/"},
+                { name: "Our Premium Fleet", id: "/fleet" },
-        {
+                { name: "Contact us", id: "/contact-us" },
-          name: "Fleet",          id: "/fleet"},
+            ]}
-        {
+            brandName="CleanScene"
-          name: "Contact",          id: "/contact"},
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777837799704-b8guhfm1.png"
-      ]}
+            logoAlt="CleanScene Logo"
-      brandName="CleanScene Restroom Rentals"
+            button={{ text: "Get My Free Estimate", href: "/estimate" }}
-    />
+            className="py-2"
-  </div>
+            />
        </div>
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroSplitKpi
+            <HeroSplitKpi
-      background={{
+            background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars"}}
+            title="Set the Scene for a Flawless Event"
-      title="Set the Scene for a Flawless Event"
+            titleClassName="text-[#0a7039]"
-      description="Premium mobile restroom trailers delivered, staged, and serviced with the comfort where it matters most. Elevate your Wisconsin event with CleanScene."
+            description="Proudly serving Northeast Wisconsin - from the Fox Valley to Door County, Shawano to the Lakeshore, and Green Bay.                     Our premium restroom trailers offer the comfort of a quality interior space to provide a modern hospitality experience."
-      tag="Luxury Event Standards"
+            kpis={[
-      tagIcon={Crown}
+                { value: "10+", label: "Counties Served" },
-      kpis={[
+                { value: "100%", label: "Guest Comfort" },
-        {
+                { value: "100%", label: "Rental Satisfaction" },
-          value: "10+",          label: "Counties Served"},
+            ]}
-        {
+            enableKpiAnimation={true}
-          value: "100%",          label: "Guest Comfort"},
+            buttons={[
-        {
+                { text: "Get My Free Estimate", href: "/estimate" },
-          value: "24/7",          label: "Service"},
+                { text: "View The Fleet", href: "/fleet" },
-      ]}
+            ]}
-      enableKpiAnimation={true}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777135032652-q27squi7.jpg"
-      buttons={[
+            mediaAnimation="slide-up"
-        {
+            />
-          text: "Get My Free Quote",          href: "/contact"},
+        </div>
        {
          text: "View The Fleet",          href: "/fleet"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/front-view-large-transparent-window-with-opened-door-outside-which-newlyweds-posing-embracing-balcony-their-wedding-day_8353-12102.jpg"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/couple-backs-sitting-bed-with-her-head-resting-his-shoulder_1157-1293.jpg",          alt: "Couple of backs sitting on a bed with her head resting on his shoulder"},
        {
          src: "http://img.b2bpic.net/long-white-dinner-table-with-sparkling-glassware-candleholders-stands-beach_1304-3243.jpg",          alt: "Long white dinner table with sparkling glassware and candleholders stands on the beach"},
        {
          src: "http://img.b2bpic.net/free-photo/table-setting-with-decorated-newlyweds-chairs-wedding-reception-hall_637285-989.jpg",          alt: "Table setting with decorated newlyweds chairs in wedding reception hall"},
        {
          src: "http://img.b2bpic.net/free-photo/table-setting-with-floral-centerpiece-wedding-reception-venue_637285-5627.jpg",          alt: "Table setting with floral centerpiece at wedding reception venue."},
        {
          src: "http://img.b2bpic.net/free-photo/floral-compositions-made-greenery-outdoors-wedding-ceremony_8353-9788.jpg",          alt: "Floral compositions made of greenery at the outdoors wedding ceremony"},
      ]}
      marqueeItems={[
        {
          type: "text",          text: "Luxury Restroom Trailers"},
        {
          type: "text",          text: "Northeast Wisconsin"},
        {
          type: "text",          text: "Event Perfection"},
        {
          type: "text",          text: "Seamless Logistics"},
        {
          type: "text",          text: "Premium Hospitality"},
      ]}
    />
  </div>
-  <div id="about" data-section="about">
+        <div id="about" data-section="about">
-      <TextSplitAbout
+            <TextSplitAbout
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      title="The CleanScene Difference"
+            title="The CleanScene Difference"
-      description={[
+            titleClassName="text-[#0a7039]"
-        "We believe restrooms shouldn't just be functional—they should be part of the event design.",        "Our trailers offer the comfort of an interior space with the luxury of modern hospitality."]}
+            description={[
-    />
+                "We believe restrooms shouldn't just be functional - they should be part of the event design and experience.", "Our premium restroom trailers offer the comfort of a quality interior space to provide a modern hospitality experience.."
-  </div>
+            ]}
            />
        </div>
-  <div id="fleet-preview" data-section="fleet-preview">
+        <div id="fleet-preview" data-section="fleet-preview">
-      <ProductCardTwo
+            <ProductCardTwo
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="split-description"
+            textboxLayout="split-description"
-      gridVariant="asymmetric-60-wide-40-narrow"
+            gridVariant="asymmetric-60-wide-40-narrow"
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      products={[
+            products={[
-        {
+                { id: "p1", brand: "CleanScene", name: "3 Station, Private Floorplan Restroom Trailer", price: "$1,375 per day", rating: 5, reviewCount: "128", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777832277795-ebq2l26f.png?_wi=2", onProductClick: () => window.location.href = "/fleet/p1" },
-          id: "p1",          brand: "CleanScene",          name: "3-Station Private Suite",          price: "Quote on Request",          rating: 5,
+                { id: "p2", brand: "CleanScene", name: "4 Station, Community Floorplan Restroom Trailer", price: "$1,825 per day", rating: 5, reviewCount: "95", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777832470445-mr4qosuh.png?_wi=1", onProductClick: () => window.location.href = "/fleet/p2" },
-          reviewCount: "24",          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-modern-wood-stone-white-bathroom_105762-2136.jpg"},
+            ]}
-        {
+            title="Our Premium Fleet"
-          id: "p2",          brand: "CleanScene",          name: "Executive Comfort Series",          price: "Quote on Request",          rating: 5,
+            textBoxTitleClassName="text-[#0a7039]"
-          reviewCount: "12",          imageSrc: "http://img.b2bpic.net/free-photo/modern-bathroom-with-big-mirror_1203-1497.jpg"},
+            description="Made-in-USA trailers designed for peak comfort."
-      ]}
+            buttons={[{ text: "View Details" }]}
-      title="Our Curated Fleet"
+            />
-      description="Made-in-USA trailers designed for peak comfort."
+        </div>
    />
  </div>
-  <div id="testimonials" data-section="testimonials">
+        <div id="features" data-section="features">
-      <TestimonialCardSix
+            <FeatureCardOne
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="split-description"
+            textboxLayout="default"
-      useInvertedBackground={false}
+            gridVariant="uniform-all-items-equal"
-      testimonials={[
+            useInvertedBackground={false}
-        {
+            title="Let us elevate your event"
-          id: "1",          name: "Sarah J.",          handle: "Bride",          testimonial: "The trailers were immaculate. My guests couldn't stop talking about them.",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-wedding-arch-seats_1303-10480.jpg"},
+            cardTitleClassName="text-[#0a7039]"
-        {
+            description="Our premium rental fleet is designed to fit seamlessly into any event and leave a lasting impression."
-          id: "2",          name: "Mark D.",          handle: "Event Planner",          testimonial: "Professional service from start to finish. Highly recommend.",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-woman-standing-near-window-talking-mobile-phone_23-2147974633.jpg"},
+            features={[
-        {
+                { title: "Weddings & Private Parties", description: "", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777134554820-hv8fxndc.jpg" },
-          id: "3",          name: "Emily R.",          handle: "Estate Owner",          testimonial: "CleanScene adds a level of sophistication we've never had before.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-gorgeous-couple-embracing-each-other-while-holding-glasses-wine-hands_482257-11118.jpg"},
+                { title: "Community Events", description: "", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777134554820-rdizvwfd.jpg?_wi=2" },
-        {
+                { title: "Corporate Events", description: "", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777134554820-klkyjyqk.jpg" },
-          id: "4",          name: "Tom K.",          handle: "Festival Producer",          testimonial: "Reliable, clean, and exactly what we needed for the crowds.",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-young-people-partying-together_23-2149739854.jpg"},
+            ]}
-        {
+            />
-          id: "5",          name: "Jessica W.",          handle: "Wedding Planner",          testimonial: "Flawless delivery and staging. Truly elevated the guest experience.",          imageSrc: "http://img.b2bpic.net/free-photo/female-wedding-planner-working-ceremony_23-2150167220.jpg"},
+        </div>
      ]}
      title="Trusted by Wisconsin Events"
      description="See why top wedding planners and corporate event organizers trust us."
    />
  </div>
-  <div id="contact" data-section="contact">
+        <div id="footer" data-section="footer">
-      <ContactText
+            <FooterLogoEmphasis
-      useInvertedBackground={false}
+            columns={[
-      background={{
+                { items: [{ label: "Home", href: "/" }, { label: "Our Premium Fleet", href: "/fleet" }, { label: "Get My Free Estimate", href: "/estimate" }] },
-        variant: "plain"}}
+                { items: [{ label: "Contact Us", href: "/contact-us" }, { label: "Privacy Policy", href: "/privacy" }, { label: "Terms", href: "/terms" }] },
-      text="Ready to elevate your event experience? Get in touch with our team today to secure your dates and discover our premium staging options."
+            ]}
-      buttons={[
+            logoText=""
-        {
+            />
-          text: "Request My Free Quote",          href: "/contact"},
+        </div>
      ]}
    />
  </div>
  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Home",              href: "/"},
            {
              label: "Fleet",              href: "/fleet"},
          ],
        },
        {
          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms",              href: "#"},
          ],
        },
      ]}
      logoText="CleanScene Restroom Rentals"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/pricing/page.tsx
+++ b/src/app/pricing/page.tsx
@@ -0,0 +1,70 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 export default function PricingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSmallSizeLargeTitles"
        background="blurBottom"
        cardStyle="soft-shadow"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarLayoutFloatingInline
                navItems={[
                    { name: "Home", id: "/" },
                    { name: "Our Premium Fleet", id: "/fleet" },
                    { name: "Pricing", id: "/pricing" },
                    { name: "Contact us", id: "/contact-us" },
                ]}
                brandName="CleanScene"
                logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777837799704-b8guhfm1.png"
                logoAlt="CleanScene Logo"
                button={{ text: "Get My Free Estimate", href: "/estimate" }}
                className="py-2"
            />
        </div>
        <div id="pricing" data-section="pricing">
            <PricingCardTwo
                useInvertedBackground={false}
                animationType="slide-up"
                textboxLayout="split"
                title="Our Pricing"
                description="Affordable plans for every event size."
                plans={[
                    {
                        id: "basic",                        badge: "Standard",                        price: "$1,000",                        subtitle: "per event",                        features: ["Basic Setup", "24/7 Support"],
                        buttons: [{ text: "Select", href: "#" }]
                    },
                    {
                        id: "premium",                        badge: "Premium",                        price: "$1,500",                        subtitle: "per event",                        features: ["Premium Setup", "Enhanced Maintenance", "24/7 Support"],
                        buttons: [{ text: "Select", href: "#" }]
                    }
                ]}
            />
        </div>
        <div id="footer" data-section="footer">
            <FooterLogoEmphasis
                columns={[
                    { items: [{ label: "Home", href: "/" }, { label: "Our Premium Fleet", href: "/fleet" }, { label: "Pricing", href: "/pricing" }, { label: "Get My Free Estimate", href: "/estimate" }] },
                    { items: [{ label: "Contact Us", href: "/contact-us" }, { label: "Privacy Policy", href: "/privacy" }, { label: "Terms", href: "/terms" }] },
                ]}
                logoText="CleanScene"
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
 }
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-open-sans), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-public-sans), sans-serif;
+  font-family: var(--font-open-sans), sans-serif;
 }
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
  --accent: #ffffff;
  --background-accent: #ffffff; */
-  --background: #F7F4EF;
+  --background: #ffffff;
-  --card: #ECE6DC;
+  --card: #f9f9f9;
-  --foreground: #1C2A2F;
+  --foreground: #000f06e6;
-  --primary-cta: #2F4F4F;
+  --primary-cta: #0a7039;
  --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #1C2A2F;
+  --secondary-cta-text: #000f06e6;
-  --accent: #D9CFC0;
+  --accent: #e2e2e2;
-  --background-accent: #D9CFC0;
+  --background-accent: #c4c4c4;
  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);