Merge version_3 into main #2
416
src/app/page.tsx
416
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user