Update src/app/page.tsx

Merge version_105 into main

src/app/contact-us/page.tsx

@@ -4,7 +4,7 @@ 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 NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 
 export default function ContactUsPage() {
   return (
@@ -22,23 +22,23 @@ export default function ContactUsPage() {
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-            <NavbarLayoutFloatingOverlay
+            <NavbarLayoutFloatingInline
             navItems={[
               { name: "Home", id: "/" },
-              { name: "Fleet", id: "/fleet" },
+              { name: "Our Premium Fleet", id: "/fleet" },
-              { name: "Pricing", id: "/pricing" },
-              { name: "Request a free estimate", id: "/estimate" },
               { name: "Contact us", id: "/contact-us" },
             ]}
             brandName="CleanScene"
-            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777213847237-f7u1y0mi.png"
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777837799704-b8guhfm1.png"
-            logoImageClassName="scale-150"
+            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"
+            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={[
@@ -53,13 +53,10 @@ export default function ContactUsPage() {
         <div id="footer" data-section="footer">
             <FooterLogoEmphasis
             columns={[
-              { items: [{ label: "Home", href: "/" }, { label: "Fleet", href: "/fleet" }, { label: "Pricing", href: "/pricing" }, { label: "Request a free estimate", href: "/estimate" }] },
+              { 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: "#" }, { label: "Terms", href: "#" }] },
+              { items: [{ label: "Contact Us", href: "/contact-us" }, { label: "Privacy Policy", href: "/privacy" }, { label: "Terms", href: "/terms" }] },
             ]}
-            logoText="CleanScene"
+            logoText=""
-            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777213847237-f7u1y0mi.png"
-            logoClassName="text-white"
-            logoImageClassName="scale-75 hidden"
           />
         </div>
       </ReactLenis>

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,48 +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: "Fleet", id: "/fleet" },
+              { name: "Our Premium Fleet", id: "/fleet" },
-        { name: "Pricing", id: "/pricing" },
+              { name: "Contact us", id: "/contact-us" },
-        { name: "Request a free estimate", id: "/estimate" },
+            ]}
-        { 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"
-      brandName="CleanScene"
+            logoAlt="CleanScene Logo"
-      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777213847237-f7u1y0mi.png"
+            button={{ text: "Get My Free Estimate", href: "/estimate" }}
-      logoImageClassName="scale-150"
+            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"
-      titleClassName="text-[#0a7039]"
+            titleClassName="text-[#0a7039]"
-      description="Tell us about your event. We typically respond within 4 business hours."
+            description="Tell us about your event. We typically respond within 4 business hours."
-      inputs={[
+            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 }}
+            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"
+            imageSrc="http://img.b2bpic.net/free-photo/happy-event-manager-banquet-hall_23-2148085332.jpg"
-    />
+          />
-  </div>
+        </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+            <FooterLogoEmphasis
-      columns={[
+            columns={[
-        { items: [{ label: "Home", href: "/" }, { label: "Fleet", href: "/fleet" }, { label: "Pricing", href: "/pricing" }, { label: "Request a free estimate", href: "/estimate" }] },
+              { 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: "#" }, { label: "Terms", href: "#" }] },
+              { items: [{ label: "Contact us", href: "/contact-us" }, { label: "Privacy Policy", href: "/privacy" }, { label: "Terms", href: "/terms" }] },
-      ]}
+            ]}
-      logoText="CleanScene"
+            logoText="CleanScene"
-      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777213847237-f7u1y0mi.png"
+          />
-      logoClassName="text-white"
+        </div>
-      logoImageClassName="scale-75 hidden"
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/estimate/page.tsx

@@ -4,7 +4,7 @@ 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 EstimatePage() {
   return (
@@ -21,52 +21,49 @@ export default function EstimatePage() {
         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: "Fleet", id: "/fleet" },
+              { name: "Our Premium Fleet", id: "/fleet" },
-        { name: "Pricing", id: "/pricing" },
+              { name: "Contact us", id: "/contact-us" },
-        { name: "Request a free estimate", id: "/estimate" },
+            ]}
-        { 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"
-      brandName="CleanScene"
+            logoAlt="CleanScene Logo"
-      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777213847237-f7u1y0mi.png"
+            button={{ text: "Get My Free Estimate", href: "/estimate" }}
-      logoImageClassName="scale-150"
+            className="py-2"
-    />
+          />
-  </div>
+        </div>
 
-  <div id="estimate-form" data-section="estimate-form">
+        <div id="estimate-form" data-section="estimate-form">
-      <ContactSplitForm
+            <ContactSplitForm
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      title="Request a free estimate"
+            title="Request a free estimate"
-      titleClassName="text-[#0a7039]"
+            titleClassName="text-[#0a7039]"
-      description="Tell us about your event. We typically respond within 24 business hours."
+            description="Tell us about your event. We typically respond within 24 business hours."
-      inputs={[
+            inputs={[
-        { name: "full_name", type: "text", placeholder: "Full Name", required: true },
+              { name: "full_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 },
-        { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
+              { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
-        { name: "event_date", type: "date", placeholder: "Event Date", required: true },
+              { name: "event_date", type: "date", placeholder: "Event Date", required: true },
-        { name: "address", type: "text", placeholder: "Delivery Address", required: true },
+              { name: "address", type: "text", placeholder: "Delivery Address", required: true },
-        { name: "event_type", type: "text", placeholder: "Event Type", required: true },
+              { name: "event_type", type: "text", placeholder: "Event Type", required: true },
-      ]}
+            ]}
-      textarea={{ name: "other_info", placeholder: "Other info (Optional)", rows: 5 }}
+            textarea={{ name: "other_info", placeholder: "Other info (Optional)", rows: 5 }}
-      imageSrc="http://img.b2bpic.net/free-photo/event-planner-organizing-wedding-details_23-2148197779.jpg"
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777134554820-rdizvwfd.jpg?_wi=1"
-    />
+          />
-  </div>
+        </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+            <FooterLogoEmphasis
-      columns={[
+            columns={[
-        { items: [{ label: "Home", href: "/" }, { label: "Fleet", href: "/fleet" }, { label: "Pricing", href: "/pricing" }, { label: "Request a free estimate", href: "/estimate" }] },
+              { 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: "#" }, { label: "Terms", href: "#" }] },
+              { items: [{ label: "Contact Us", href: "/contact-us" }, { label: "Privacy Policy", href: "/privacy" }, { label: "Terms", href: "/terms" }] },
-      ]}
+            ]}
-      logoText="CleanScene"
+            logoText=""
-      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777213847237-f7u1y0mi.png"
+          />
-      logoClassName="text-white"
+        </div>
-      logoImageClassName="scale-75 hidden"
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/fleet/page.tsx

@@ -2,61 +2,102 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { useState } from 'react';
 
 export default function FleetPage() {
+  const [popupContent, setPopupContent] = useState<{title: string, body: string} | null>(null);
+
   return (
     <ThemeProvider
         defaultButtonVariant="expand-hover"
         defaultTextAnimation="background-highlight"
         borderRadius="rounded"
         contentWidth="medium"
-        sizing="medium"
+        sizing="largeSmallSizeLargeTitles"
         background="blurBottom"
         cardStyle="soft-shadow"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="radial-glow"
-        secondaryButtonStyle="glass"
+        secondaryButtonStyle="solid"
         headingFontWeight="bold"
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-          <NavbarStyleApple
+            <NavbarLayoutFloatingInline
-            brandName="CleanScene"
             navItems={[
-              { name: "Home", id: "/" },
+                { name: "Home", id: "/" },
-              { name: "Fleet", id: "/fleet" },
+                { name: "Our Premium Fleet", id: "/fleet" },
-              { name: "Pricing", id: "/pricing" },
+                { name: "Contact us", id: "/contact-us" },
-              { name: "Estimate", id: "/estimate" },
-              { name: "Contact", 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="product" data-section="product">
+        <div id="fleet-preview" data-section="fleet-preview">
-          <ProductCardThree
+            <ProductCardTwo
             animationType="slide-up"
             textboxLayout="split-description"
-            gridVariant="one-large-left-three-stacked-right"
+            gridVariant="four-items-2x2-equal-grid"
             useInvertedBackground={false}
-            title="Our premium mobile restroom fleet"
-            description="We price on a per day basis, offering multi-day rental discounts."
             products={[
-              { id: "f1", name: "3 Station, Private Floorplan Trailer", price: "$1,375 per day", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777832277795-ebq2l26f.png?_wi=1" },
+                { 
-              { id: "f2", name: "4 Station, Community Floorplan Trailer", price: "$1,825 per day", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777832470445-mr4qosuh.png" }
+                    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=1",                    onProductClick: () => setPopupContent({
+                        title: "3-Station Private Restroom Trailer Rental in Northeast Wisconsin | Modern Luxury Floorplan",                        body: "Elevate your Northeast Wisconsin wedding, private event, or boutique gathering with our 3-station private floorplan restroom trailer rental — a premium portable restroom solution for upscale events in the Green Bay area and beyond. This luxury restroom trailer features three fully private, individual restroom stations with sleek modern finishings, perfect for intimate weddings, VIP gatherings, and high-end private events.\n\nDesigned for maximum guest comfort and privacy, our 3-station restroom trailer includes climate-controlled interiors, flushable toilets, vanities with running water, and customizable music to match the atmosphere of your event. Built in the USA, our American-made restroom trailer delivers the reliability and elegance your event deserves — providing a comfortable, hotel-quality experience for every guest.\n\nBased in Green Bay, WI, CleanScene Restroom Rental provides prompt delivery, professional setup, and full-service support throughout Northeast Wisconsin — so your event runs smoothly from start to finish.\n\nBook your 3-station private restroom trailer rental in Green Bay and Northeast Wisconsin today — perfect for weddings, VIP gatherings, and intimate private events."
+                    })
+                },
+                { 
+                    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: "4-Station Community Restroom Trailer Rental in Northeast Wisconsin | Men's & Women's Floorplan",                        body: "Elevate your Northeast Wisconsin wedding, private event, or community gathering with our 4-station community floorplan restroom trailer rental — a premium portable restroom solution designed for high-traffic events in the Green Bay area and beyond. This luxury restroom trailer features a traditional Men's and Women's layout with two stations each, finished with rustic wood interiors that bring warmth and elegance to any venue.\n\nDesigned for guest comfort, our community restroom trailer includes climate-controlled interiors, flushable toilets, vanities with running water, and customizable music to set the perfect atmosphere. Built in the USA, our American-made restroom trailer delivers the reliability and high-end experience your event deserves — whether it's a rustic wedding, outdoor festival, family reunion, or community celebration.\n\nBased in Green Bay, WI, CleanScene Restroom Rental provides prompt delivery, professional setup, and full-service support throughout Northeast Wisconsin — so your event runs smoothly from start to finish.\n\nBook your 4-station community restroom trailer rental in Green Bay and Northeast Wisconsin today — ideal for weddings, festivals, and community events."
+                    })
+                },
             ]}
-          />
+            title="Our premium fleet"
+            textBoxTitleClassName="text-[#0a7039]"
+            description="Premium, climate-controlled mobile restrooms for every event size. Multi-day rental discounts available."
+            />
         </div>
 
+        {popupContent && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" onClick={() => setPopupContent(null)}>
+            <div className="bg-white p-8 rounded-lg max-w-2xl shadow-xl overflow-y-auto max-h-[90vh]" onClick={(e) => e.stopPropagation()}>
+              <h3 className="text-2xl font-bold mb-4 whitespace-pre-wrap">{popupContent.title}</h3>
+              <p className="text-gray-700 leading-relaxed whitespace-pre-wrap">{popupContent.body}</p>
+              <button 
+                className="mt-6 bg-[#0a7039] text-white px-6 py-2 rounded hover:bg-[#075e2f] transition"
+                onClick={() => setPopupContent(null)}
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        )}
+
         <div id="footer" data-section="footer">
-          <FooterBaseCard
+            <FooterLogoEmphasis
-            logoText="CleanScene"
             columns={[
-                { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Fleet", href: "/fleet" }, { label: "Pricing", href: "/pricing" }] },
+                { items: [{ label: "Home", href: "/" }, { label: "Our Premium Fleet", href: "/fleet" }, { label: "Get My Free Estimate", href: "/estimate" }] },
-                { title: "Support", items: [{ label: "Estimate", href: "/estimate" }, { label: "Contact", href: "/contact-us" }] },
+                { items: [{ label: "Contact Us", href: "/contact-us" }, { label: "Privacy Policy", href: "/privacy" }, { label: "Terms", href: "/terms" }] },
             ]}
-          />
+            logoText=""
+            />
         </div>
       </ReactLenis>
     </ThemeProvider>

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 FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
 
 export default function LandingPage() {
   return (
@@ -26,124 +24,96 @@ 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: "Fleet", id: "/fleet" },
+                { name: "Our Premium Fleet", id: "/fleet" },
-        { name: "Pricing", id: "/pricing" },
+                { name: "Contact us", id: "/contact-us" },
-        { name: "Request a free estimate", id: "/estimate" },
+            ]}
-        { 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"
-      brandName="CleanScene"
+            logoAlt="CleanScene Logo"
-      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777213847237-f7u1y0mi.png"
+            button={{ text: "Get My Free Estimate", href: "/estimate" }}
-      logoImageClassName="scale-150"
+            className="py-2"
-    />
+            />
-  </div>
+        </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroSplitKpi
+            <HeroSplitKpi
-      background={{ variant: "gradient-bars" }}
+            background={{ variant: "gradient-bars" }}
-      title="Set the Scene for a Flawless Event"
+            title="Set the Scene for a Flawless Event"
-      titleClassName="text-[#0a7039]"
+            titleClassName="text-[#0a7039]"
-      description="Our trailers offer the comfort of an interior space with the quality of modern hospitality."
+            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."
-      kpis={[
+            kpis={[
-        { value: "10+", label: "Counties Served" },
+                { value: "10+", label: "Counties Served" },
-        { value: "100%", label: "Guest Comfort" },
+                { value: "100%", label: "Guest Comfort" },
-        { value: "24/7", label: "Service" },
+                { value: "100%", label: "Rental Satisfaction" },
-      ]}
+            ]}
-      enableKpiAnimation={true}
+            enableKpiAnimation={true}
-      buttons={[
+            buttons={[
-        { text: "Request a free estimate", href: "/estimate" },
+                { text: "Get My Free Estimate", href: "/estimate" },
-        { text: "View The Fleet", href: "/fleet" },
+                { text: "View The Fleet", href: "/fleet" },
-      ]}
+            ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777135032652-q27squi7.jpg"
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777135032652-q27squi7.jpg"
-      mediaAnimation="slide-up"
+            mediaAnimation="slide-up"
-    />
+            />
-  </div>
+        </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"
-      titleClassName="text-[#0a7039]"
+            titleClassName="text-[#0a7039]"
-      description={[
+            description={[
-        "We believe restrooms shouldn't just be functional - they should be part of the event design and experience.", "Our trailers offer the comfort of a premium interior space with a touch of modern hospitality."
+                "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="pricing" data-section="pricing">
+        <div id="fleet-preview" data-section="fleet-preview">
-    <PricingCardNine 
+            <ProductCardTwo
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="split"
+            textboxLayout="split-description"
-      title="Transparent Pricing"
+            gridVariant="asymmetric-60-wide-40-narrow"
-      description="Simple, daily rental options tailored to your event length."
+            useInvertedBackground={false}
-      useInvertedBackground={false}
+            products={[
-      plans={[
+                { 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: "basic", title: "Weekend Warrior", price: "$1,200", period: "per weekend", features: ["Delivery & Setup", "Eco-friendly supplies", "Climate controlled"], button: { text: "Get Estimate" } },
+                { 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" },
-        { id: "pro", title: "Event Master", price: "$2,500", period: "per week", features: ["Daily Maintenance", "Full onsite support", "All inclusive supplies"], button: { text: "Get Estimate" } }
+            ]}
-      ]}
+            title="Our Premium Fleet"
-    />
+            textBoxTitleClassName="text-[#0a7039]"
-  </div>
+            description="Made-in-USA trailers designed for peak comfort."
+            buttons={[{ text: "View Full Specifications" }]}
+            />
+        </div>
 
-  <div id="fleet-preview" data-section="fleet-preview">
+        <div id="features" data-section="features">
-      <ProductCardTwo
+            <FeatureCardOne
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="split-description"
+            textboxLayout="default"
-      gridVariant="asymmetric-60-wide-40-narrow"
+            gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      products={[
+            title="Let us elevate your event"
-        { id: "p1", brand: "CleanScene", name: "3-Station Private Suite", price: "Quote on Request", rating: 5, reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-modern-wood-stone-white-bathroom_105762-2136.jpg" },
+            cardTitleClassName="text-[#0a7039]"
-        { id: "p2", brand: "CleanScene", name: "Executive Comfort Series", price: "Quote on Request", rating: 5, reviewCount: "", imageSrc: "http://img.b2bpic.net/modern-bathroom-with-big-mirror_1203-1497.jpg" },
+            description="Our premium rental fleet is designed to fit seamlessly into any Northeast Wisconsin event and leave a lasting impression."
-      ]}
+            features={[
-      title="Our Curated Fleet"
+                { title: "Weddings & Private Parties", description: "", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777134554820-hv8fxndc.jpg" },
-      textBoxTitleClassName="text-[#0a7039]"
+                { title: "Community Events", description: "", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777134554820-rdizvwfd.jpg?_wi=2" },
-      description="Made-in-USA trailers designed for peak comfort."
+                { title: "Corporate Events", description: "", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777134554820-klkyjyqk.jpg" },
-    />
+            ]}
-  </div>
+            />
+        </div>
 
-  <div id="features" data-section="features">
+        <div id="footer" data-section="footer">
-      <FeatureCardTwentyNine
+            <FooterLogoEmphasis
-      animationType="slide-up"
+            columns={[
-      textboxLayout="default"
+                { items: [{ label: "Home", href: "/" }, { label: "Our Premium Fleet", href: "/fleet" }, { label: "Get My Free Estimate", href: "/estimate" }] },
-      gridVariant="uniform-all-items-equal"
+                { items: [{ label: "Contact Us", href: "/contact-us" }, { label: "Privacy Policy", href: "/privacy" }, { label: "Terms", href: "/terms" }] },
-      useInvertedBackground={false}
+            ]}
-      title="Modern Hospitality Standards"
+            logoText=""
-      cardTitleClassName="text-[#0a7039]"
+            />
-      description="Every detail of our rental fleet is meticulously maintained to ensure your event leaves a lasting impression."
+        </div>
-      features={[
-        { title: "Advanced Climate Control", description: "Fully adjustable heating and cooling systems to keep guests comfortable regardless of the season.", imageSrc: "http://img.b2bpic.net/free-photo/view-beautiful-modern-hotel-interior_23-2148777121.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/view-beautiful-modern-hotel-interior_23-2148777121.jpg", buttonText: "Learn More" },
-        { title: "Luxury Finishes", description: "Designer lighting, high-end vanity surfaces, and elegant trim throughout our trailers.", imageSrc: "http://img.b2bpic.net/free-photo/interior-design-concept-with-details_23-2148777121.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/interior-design-concept-with-details_23-2148777121.jpg", buttonText: "Learn More" },
-        { title: "White-Glove Setup", description: "Our professional team handles every step from delivery to onsite staging to ensure perfection.", imageSrc: "http://img.b2bpic.net/free-photo/professional-team-working-together_23-2148777121.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/professional-team-working-together_23-2148777121.jpg", buttonText: "Learn More" },
-      ]}
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{ variant: "plain" }}
-      text="Ready to elevate your event experience? Get in touch with our team today to secure your dates and discover our premium rental options."
-      textClassName="text-[#0a7039]"
-      buttons={[
-        { text: "Request a free estimate", href: "/estimate" },
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        { items: [{ label: "Home", href: "/" }, { label: "Fleet", href: "/fleet" }, { label: "Pricing", href: "/pricing" }, { label: "Request a free estimate", href: "/estimate" }] },
-        { items: [{ label: "Contact us", href: "/contact-us" }, { label: "Privacy policy", href: "#" }, { label: "Terms", href: "#" }] },
-      ]}
-      logoText="CleanScene"
-      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777213847237-f7u1y0mi.png"
-      logoClassName="text-white"
-      logoImageClassName="scale-75 hidden"
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/pricing/page.tsx

@@ -2,9 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
 export default function PricingPage() {
   return (
@@ -22,46 +22,47 @@ export default function PricingPage() {
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-            <NavbarLayoutFloatingOverlay
+            <NavbarLayoutFloatingInline
-            navItems={[
+                navItems={[
-              { name: "Home", id: "/" },
+                    { name: "Home", id: "/" },
-              { name: "Fleet", id: "/fleet" },
+                    { name: "Our Premium Fleet", id: "/fleet" },
-              { name: "Pricing", id: "/pricing" },
+                    { name: "Pricing", id: "/pricing" },
-              { name: "Request a free estimate", id: "/estimate" },
+                    { name: "Contact us", id: "/contact-us" },
-              { name: "Contact us", id: "/contact-us" },
+                ]}
-            ]}
+                brandName="CleanScene"
-            brandName="CleanScene"
+                logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777837799704-b8guhfm1.png"
-            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777213847237-f7u1y0mi.png"
+                logoAlt="CleanScene Logo"
-            logoImageClassName="scale-150"
+                button={{ text: "Get My Free Estimate", href: "/estimate" }}
-          />
+                className="py-2"
+            />
         </div>
-
         <div id="pricing" data-section="pricing">
-            <PricingCardNine 
+            <PricingCardTwo
+                useInvertedBackground={false}
                 animationType="slide-up"
                 textboxLayout="split"
-                title="Our Rental Rates"
+                title="Our Pricing"
-                description="Transparent pricing for every occasion. Contact us for custom quotes on multi-day rentals."
+                description="Affordable plans for every event size."
-                useInvertedBackground={false}
                 plans={[
-                    { id: "basic", title: "Weekend Warrior", price: "$1,200", period: "per weekend", features: ["Delivery & Setup", "Eco-friendly supplies", "Climate controlled"], button: { text: "Get Estimate", href: "/estimate" } },
+                    {
-                    { id: "pro", title: "Event Master", price: "$2,500", period: "per week", features: ["Daily Maintenance", "Full onsite support", "All inclusive supplies"], button: { text: "Get Estimate", href: "/estimate" } },
+                        id: "basic",                        badge: "Standard",                        price: "$1,000",                        subtitle: "per event",                        features: ["Basic Setup", "24/7 Support"],
-                    { id: "corporate", title: "Corporate Solutions", price: "Custom", period: "contact for quote", features: ["Priority Booking", "Dedicated Account Manager", "Custom Staging"], button: { text: "Get Quote", href: "/contact-us" } }
+                        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={[
+                columns={[
-              { items: [{ label: "Home", href: "/" }, { label: "Fleet", href: "/fleet" }, { label: "Pricing", href: "/pricing" }, { label: "Request a free estimate", href: "/estimate" }] },
+                    { 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: "#" }, { label: "Terms", href: "#" }] },
+                    { items: [{ label: "Contact Us", href: "/contact-us" }, { label: "Privacy Policy", href: "/privacy" }, { label: "Terms", href: "/terms" }] },
-            ]}
+                ]}
-            logoText="CleanScene"
+                logoText="CleanScene"
-            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777213847237-f7u1y0mi.png"
+            />
-            logoClassName="text-white"
-            logoImageClassName="scale-75 hidden"
-          />
         </div>
       </ReactLenis>
     </ThemeProvider>