From 9ceff0674328d7d9da7d2ab375e8f0fcd229054d Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 5 May 2026 18:25:52 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 416 +++++++++++++++++------------------------------
 1 file changed, 147 insertions(+), 269 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 24f72c6..05f082b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,9 +11,12 @@ import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import { Award, CheckCircle, Shield, Smile, Star, Zap } from "lucide-react";
+import { Award, CheckCircle, MessageSquare, Shield, Smile, Star, Zap } from "lucide-react";
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [isChatOpen, setIsChatOpen] = useState(false);
+
   return (
     <ThemeProvider
         defaultButtonVariant="expand-hover"
@@ -28,283 +31,158 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Features",          id: "#features"},
-        {
-          name: "Pricing",          id: "#pricing"},
-        {
-          name: "FAQ",          id: "#faq"},
-        {
-          name: "Contact",          id: "#contact"},
-      ]}
-      brandName="BinBot"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarStyleApple
+              navItems={[
+                { name: "Features", id: "#features" },
+                { name: "Pricing", id: "#pricing" },
+                { name: "FAQ", id: "#faq" },
+                { name: "Contact", id: "#contact" },
+              ]}
+              brandName="BinBot"
+              button={{ 
+                text: "Chat Support", 
+                onClick: () => setIsChatOpen(true) 
+              }}
+            />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplitTestimonial
-      background={{
-        variant: "gradient-bars"}}
-      title="Clean, Sanitized Bins at Your Doorstep"
-      description="Experience the ease of our professional bin cleaning service. Schedule your next cleaning in seconds with our AI-powered chatbot assistant."
-      testimonials={[
-        {
-          name: "John Doe",          handle: "@johndoe",          testimonial: "The easiest service I've used. The chatbot booked my cleaning in 30 seconds!",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-posing-while-nature-adventure_23-2148647990.jpg"},
-        {
-          name: "Jane Smith",          handle: "@janesmith",          testimonial: "Bins are sparkling clean every time. Highly recommended service.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-man-looking-camera_23-2147891187.jpg"},
-        {
-          name: "Mark Wilson",          handle: "@markw",          testimonial: "Simple, fast, and professional results every single time.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/expressive-woman-posing-outdoor_344912-2911.jpg"},
-        {
-          name: "Sarah Lee",          handle: "@slee",          testimonial: "Finally a service that makes sense! Professional and reliable.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-smiling-confident-looking-side-park_839833-20591.jpg"},
-        {
-          name: "Tom Baker",          handle: "@tombaker",          testimonial: "Great experience. No mess, no hassle, just a clean bin.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-female-blazer-beauty-blonde_1139-773.jpg"},
-      ]}
-      buttons={[
-        {
-          text: "Get Started Now",          href: "#contact"},
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/close-up-young-woman-filling-her-thermos_23-2149284906.jpg"
-      imageAlt="Professional Bin Cleaning Service"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/young-hispanic-man-smiling-confident-standing-street_839833-16677.jpg",          alt: "User 1"},
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-joyful-guy-enjoying-leisure-time_1262-20555.jpg",          alt: "User 2"},
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-businesswoman-standing-escalator_107420-63612.jpg",          alt: "User 3"},
-        {
-          src: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-362.jpg",          alt: "User 4"},
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-happy-young-businessman-looking-camera_23-2147839978.jpg",          alt: "User 5"},
-      ]}
-      marqueeItems={[
-        {
-          type: "text",          text: "Eco-Friendly Cleaning"},
-        {
-          type: "text",          text: "Sanitized & Fresh"},
-        {
-          type: "text",          text: "AI Automated Scheduling"},
-        {
-          type: "text",          text: "Locally Owned & Operated"},
-        {
-          type: "text",          text: "100% Satisfaction Guaranteed"},
-      ]}
-    />
-  </div>
+        {/* Minimal Chatbot Overlay */}
+        {isChatOpen && (
+          <div className="fixed bottom-6 right-6 z-50 w-80 h-96 bg-white rounded-2xl shadow-2xl border border-gray-100 flex flex-col">
+            <div className="p-4 border-b flex justify-between items-center bg-gray-50 rounded-t-2xl">
+              <h3 className="font-semibold">Support Chat</h3>
+              <button onClick={() => setIsChatOpen(false)} className="text-gray-500">✕</button>
+            </div>
+            <div className="flex-1 p-4 overflow-y-auto text-sm">
+              <p className="bg-gray-100 p-3 rounded-lg mb-2">Hello! Need to schedule a cleaning?</p>
+            </div>
+            <div className="p-4 border-t">
+              <input type="text" placeholder="Type a message..." className="w-full p-2 border rounded-lg" />
+            </div>
+          </div>
+        )}
 
-  <div id="features" data-section="features">
-      <FeatureCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      negativeCard={{
-        items: [
-          "Stains and grime",          "Bacterial growth",          "Unpleasant odors",          "Pest attraction",          "Surface corrosion"],
-      }}
-      positiveCard={{
-        items: [
-          "Deep sanitized cleaning",          "100% Eco-friendly process",          "AI-driven automated scheduling",          "Rapid response times",          "Transparent affordable pricing"],
-      }}
-      title="Why Choose Our Service"
-      description="We use eco-friendly products and state-of-the-art equipment to ensure your bins are germ-free and smelling great."
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroSplitTestimonial
+            background={{ variant: "gradient-bars" }}
+            title="Clean, Sanitized Bins at Your Doorstep"
+            description="Experience the ease of our professional bin cleaning service. Schedule your next cleaning in seconds with our AI-powered chatbot assistant."
+            testimonials={[]}
+            buttons={[{ text: "Get Started Now", href: "#contact" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/close-up-young-woman-filling-her-thermos_23-2149284906.jpg"
+            imageAlt="Professional Bin Cleaning Service"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="benefits" data-section="benefits">
-      <MetricCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",          icon: CheckCircle,
-          title: "Bins Cleaned",          value: "10,000+"},
-        {
-          id: "m2",          icon: Shield,
-          title: "Homes Sanitized",          value: "2,500+"},
-        {
-          id: "m3",          icon: Zap,
-          title: "Chatbot Bookings",          value: "15,000+"},
-      ]}
-      title="Service Impact"
-      description="Our numbers prove the effectiveness of our cleaning solutions."
-    />
-  </div>
+        <div id="features" data-section="features">
+            <FeatureCardSixteen
+              animationType="slide-up"
+              textboxLayout="default"
+              useInvertedBackground={false}
+              negativeCard={{ items: ["Stains and grime", "Bacterial growth", "Unpleasant odors", "Pest attraction", "Surface corrosion"] }}
+              positiveCard={{ items: ["Deep sanitized cleaning", "100% Eco-friendly process", "AI-driven automated scheduling", "Rapid response times", "Transparent affordable pricing"] }}
+              title="Why Choose Our Service"
+              description="We use eco-friendly products and state-of-the-art equipment to ensure your bins are germ-free and smelling great."
+            />
+        </div>
 
-  <div id="comparison" data-section="comparison">
-      <PricingCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      plans={[
-        {
-          id: "basic",          badge: "Standard",          price: "$20",          subtitle: "Single Bin Cleaning",          features: [
-            "Deep Sanitation",            "Deodorizing treatment",            "No contract"],
-          buttons: [
-            {
-              text: "Book Now",              href: "#contact"},
-          ],
-        },
-        {
-          id: "pro",          badge: "Recommended",          price: "$45",          subtitle: "Monthly Subscription",          features: [
-            "Monthly cleaning",            "Priority scheduling",            "Auto-billing with Bot"],
-          buttons: [
-            {
-              text: "Book Now",              href: "#contact"},
-          ],
-        },
-        {
-          id: "premium",          badge: "Best Value",          price: "$120",          subtitle: "Annual Package",          features: [
-            "12 cleanings per year",            "Priority status",            "Dedicated AI Support"],
-          buttons: [
-            {
-              text: "Book Now",              href: "#contact"},
-          ],
-        },
-      ]}
-      title="Flexible Cleaning Plans"
-      description="Simple, transparent pricing tailored to your needs."
-    />
-  </div>
+        <div id="benefits" data-section="benefits">
+            <MetricCardThree
+              animationType="slide-up"
+              textboxLayout="default"
+              useInvertedBackground={false}
+              metrics={[
+                { id: "m1", icon: CheckCircle, title: "Bins Cleaned", value: "10,000+" },
+                { id: "m2", icon: Shield, title: "Homes Sanitized", value: "2,500+" },
+                { id: "m3", icon: Zap, title: "Chatbot Bookings", value: "15,000+" },
+              ]}
+              title="Service Impact"
+              description="Our numbers prove the effectiveness of our cleaning solutions."
+            />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "p1",          icon: Star,
-          title: "Customer Satisfaction",          value: "99%"},
-        {
-          id: "p2",          icon: Award,
-          title: "Years Experience",          value: "10+"},
-        {
-          id: "p3",          icon: Smile,
-          title: "Repeat Customers",          value: "95%"},
-      ]}
-      title="Our Reach"
-      description="Serving thousands of happy homes across the region."
-    />
-  </div>
+        <div id="comparison" data-section="comparison">
+            <PricingCardTwo
+              animationType="slide-up"
+              textboxLayout="default"
+              useInvertedBackground={false}
+              plans={[
+                { id: "basic", badge: "Standard", price: "$20", subtitle: "Single Bin Cleaning", features: ["Deep Sanitation", "Deodorizing treatment", "No contract"], buttons: [{ text: "Book Now", href: "#contact" }] },
+                { id: "pro", badge: "Recommended", price: "$45", subtitle: "Monthly Subscription", features: ["Monthly cleaning", "Priority scheduling", "Auto-billing with Bot"], buttons: [{ text: "Book Now", href: "#contact" }] },
+                { id: "premium", badge: "Best Value", price: "$120", subtitle: "Annual Package", features: ["12 cleanings per year", "Priority status", "Dedicated AI Support"], buttons: [{ text: "Book Now", href: "#contact" }] },
+              ]}
+              title="Flexible Cleaning Plans"
+              description="Simple, transparent pricing tailored to your needs."
+            />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",          name: "Sarah Miller",          role: "Homeowner",          company: "Local Area",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-woman_23-2147823623.jpg"},
-        {
-          id: "2",          name: "David Thomas",          role: "Business Owner",          company: "Tech District",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-outdoors_23-2149915911.jpg"},
-        {
-          id: "3",          name: "Emma Roberts",          role: "Resident",          company: "Suburbs",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-african-american-woman-smiling-cheerful-friendly-face-laughing-confident_839833-29956.jpg"},
-        {
-          id: "4",          name: "Chris Anderson",          role: "Homeowner",          company: "Main St",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-florist-posing-smiling-flowers_176420-2057.jpg"},
-        {
-          id: "5",          name: "Linda White",          role: "Client",          company: "East Side",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/couple-getting-ready-move-with-their-children_23-2149094130.jpg"},
-      ]}
-      kpiItems={[
-        {
-          value: "4.9/5",          label: "Avg Rating"},
-        {
-          value: "1000+",          label: "Reviews"},
-        {
-          value: "98%",          label: "Retention"},
-      ]}
-      title="Customer Feedback"
-      description="What our local homeowners say about BinBot."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+            <MetricCardThree
+              animationType="slide-up"
+              textboxLayout="default"
+              useInvertedBackground={false}
+              metrics={[
+                { id: "p1", icon: Star, title: "Customer Satisfaction", value: "99%" },
+                { id: "p2", icon: Award, title: "Years Experience", value: "10+" },
+                { id: "p3", icon: Smile, title: "Repeat Customers", value: "95%" },
+              ]}
+              title="Our Reach"
+              description="Serving thousands of happy homes across the region."
+            />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",          title: "How does the bin cleaning process work?",          content: "We use high-pressure, hot water cleaning to sanitize and deodorize."},
-        {
-          id: "f2",          title: "Do I need to be home?",          content: "No, we work around your schedule as long as the bins are accessible."},
-        {
-          id: "f3",          title: "Can I book with the chatbot?",          content: "Yes, our AI chatbot handles all scheduling requests 24/7."},
-        {
-          id: "f4",          title: "Are your cleaning agents safe for the environment?",          content: "Yes! We exclusively use 100% biodegradable and eco-friendly cleaning agents that are safe for your family, pets, and the local ecosystem."}
-      ]}
-      title="Frequently Asked Questions"
-      description="Got questions? Our AI bot can answer most of these instantly."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+            <TestimonialCardSixteen
+              animationType="slide-up"
+              textboxLayout="default"
+              useInvertedBackground={false}
+              testimonials={[]}
+              kpiItems={[{ value: "4.9/5", label: "Avg Rating" }, { value: "1000+", label: "Reviews" }, { value: "98%", label: "Retention" }]}
+              title="Customer Feedback"
+              description="What our local homeowners say about BinBot."
+            />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactSplitForm
-      useInvertedBackground={false}
-      title="Ready for a Cleaner Bin?"
-      description="Send us a message, or use the chatbot icon to schedule right now."
-      inputs={[
-        {
-          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
-        },
-        {
-          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
-        },
-        {
-          name: "address",          type: "text",          placeholder: "Your Address",          required: true,
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/modern-living-room-interior-with-smart-home-control-panel_9975-33223.jpg"
-      imageAlt="Chatbot Scheduling"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+            <FaqBase
+              textboxLayout="default"
+              useInvertedBackground={false}
+              faqs={[
+                { id: "f1", title: "How does the bin cleaning process work?", content: "We use high-pressure, hot water cleaning to sanitize and deodorize." },
+                { id: "f2", title: "Do I need to be home?", content: "No, we work around your schedule as long as the bins are accessible." },
+                { id: "f3", title: "Can I book with the chatbot?", content: "Yes, our AI chatbot handles all scheduling requests 24/7." },
+                { id: "f4", title: "Are your cleaning agents safe for the environment?", content: "Yes! We exclusively use 100% biodegradable and eco-friendly cleaning agents that are safe for your family, pets, and the local ecosystem." }
+              ]}
+              title="Frequently Asked Questions"
+              description="Got questions? Our AI bot can answer most of these instantly."
+              faqsAnimation="slide-up"
+            />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="BinBot"
-      columns={[
-        {
-          title: "Company",          items: [
-            {
-              label: "About Us",              href: "#"},
-            {
-              label: "Careers",              href: "#"},
-          ],
-        },
-        {
-          title: "Services",          items: [
-            {
-              label: "Residential",              href: "#"},
-            {
-              label: "Commercial",              href: "#"},
-          ],
-        },
-        {
-          title: "Support",          items: [
-            {
-              label: "FAQ",              href: "#faq"},
-            {
-              label: "Contact",              href: "#contact"},
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+            <ContactSplitForm
+              useInvertedBackground={false}
+              title="Ready for a Cleaner Bin?"
+              description="Send us a message, or use the chatbot icon to schedule right now."
+              inputs={[{ name: "name", type: "text", placeholder: "Your Name", required: true }, { name: "email", type: "email", placeholder: "Your Email", required: true }, { name: "address", type: "text", placeholder: "Your Address", required: true }]}
+              imageSrc="http://img.b2bpic.net/free-photo/modern-living-room-interior-with-smart-home-control-panel_9975-33223.jpg"
+              imageAlt="Chatbot Scheduling"
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterBaseCard
+              logoText="BinBot"
+              columns={[
+                { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }] },
+                { title: "Services", items: [{ label: "Residential", href: "#" }, { label: "Commercial", href: "#" }] },
+                { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
+              ]}
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1