322 lines
20 KiB
TypeScript
322 lines
20 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||
import { CheckCircle, DollarSign, FileText, LineChart, Recycle, Sparkles, TrendingUp, Trophy } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
const updatedNavItems = [
|
||
{ name: "Home", id: "/" },
|
||
{ name: "Features", id: "#features" },
|
||
{ name: "How It Works", id: "#how-it-works" },
|
||
{ name: "Impact", id: "#metrics" },
|
||
{ name: "Testimonials", id: "#testimonials" },
|
||
{ name: "FAQ", id: "#faq" },
|
||
{ name: "Contact", id: "/contact" },
|
||
];
|
||
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="shift-hover"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="soft"
|
||
contentWidth="smallMedium"
|
||
sizing="mediumLargeSizeLargeTitles"
|
||
background="floatingGradient"
|
||
cardStyle="gradient-mesh"
|
||
primaryButtonStyle="gradient"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="semibold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleCentered
|
||
navItems={updatedNavItems}
|
||
button={{
|
||
text: "Start Segregating Now", href: "/contact"}}
|
||
logoSrc="http://img.b2bpic.net/free-photo/incense-sticks-with-herbs-near-monster-leaf-coaster_23-2147844956.jpg"
|
||
logoAlt="EcoSegregate Logo"
|
||
brandName="EcoSegregate"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardRotatedCarousel
|
||
background={{
|
||
variant: "rotated-rays-animated"}}
|
||
title="Segregate Smarter Recycle Better Earn Rewards"
|
||
description="Snap a photo of your waste, get instant disposal guidance, and earn ecopoints while helping your city manage resources sustainably. Realtime AI identifies waste type and suggests the right bin—every time."
|
||
buttons={[
|
||
{
|
||
text: "Start Segregating Now", href: "/contact"},
|
||
]}
|
||
carouselItems={[
|
||
{
|
||
id: "hc-1", imageSrc: "http://img.b2bpic.net/free-photo/shallow-focus-shot-hand-holding-smartphone_181624-46930.jpg", imageAlt: "User taking a photo of waste with the EcoSegregate app"},
|
||
{
|
||
id: "hc-2", imageSrc: "http://img.b2bpic.net/free-photo/green-plane-sustainable-energy-concept_23-2151582499.jpg", imageAlt: "Infographic of data flow in smart city waste management"},
|
||
{
|
||
id: "hc-3", imageSrc: "http://img.b2bpic.net/free-photo/closeup-woman-with-smartphone-taking-pic-red-gift-box-counter_181624-30160.jpg", imageAlt: "Person earning ecopoints on their smartphone"},
|
||
{
|
||
id: "hc-4", imageSrc: "http://img.b2bpic.net/free-photo/man-with-tablet-world-drawn-background_1134-547.jpg", imageAlt: "Municipal waste management dashboard"},
|
||
{
|
||
id: "hc-5", imageSrc: "http://img.b2bpic.net/free-photo/group-eco-volunteers-leaving-park-after-cleaning-lawns_74855-2233.jpg", imageAlt: "Community members using the app for waste disposal"},
|
||
{
|
||
id: "hc-6", imageSrc: "http://img.b2bpic.net/free-photo/green-recycle-symbol-surrounded-with-waste-items_23-2147817217.jpg", imageAlt: "AI-powered waste sorting in a recycling facility"},
|
||
]}
|
||
autoPlay={true}
|
||
autoPlayInterval={4000}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<TestimonialAboutCard
|
||
useInvertedBackground={true}
|
||
tag="Our Mission"
|
||
title="Empowering a Sustainable Future Through Smart Waste Management"
|
||
description="EcoSegregate is built on the vision of transforming waste management into an intelligent, rewarding, and collaborative effort. We leverage cutting-edge AI to make proper waste segregation accessible for everyone, while providing critical data to optimize urban and campus recycling."
|
||
subdescription="Our platform connects citizens, students, municipalities, and recycling operators, fostering a community dedicated to reducing environmental impact and improving resource recovery."
|
||
icon={Recycle}
|
||
imageSrc="http://img.b2bpic.net/free-photo/people-having-protest-world-environment-day_23-2149358274.jpg"
|
||
imageAlt="Diverse group collaborating on a holographic clean planet"
|
||
mediaAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="features" data-section="features">
|
||
<FeatureCardTwentyFive
|
||
animationType="depth-3d"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
title: "AI-Powered Waste Identification", description: "Simply snap a photo of any waste item and our advanced AI instantly identifies its type and provides precise disposal instructions, eliminating confusion.", icon: FileText,
|
||
mediaItems: [
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/save-world-ecology-environmental-conservation-perforated-paper-recycle_53876-31055.jpg", imageAlt: "Smartphone showing AI waste recognition results"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-activist-taking-action_23-2149493823.jpg", imageAlt: "User sorting waste with app guidance"},
|
||
]
|
||
},
|
||
{
|
||
title: "Recycling Activity Tracking & Rewards", description: "Track your personal recycling contributions, earn valuable ecopoints for every correct segregation, and unlock achievements, making sustainability a rewarding journey.", icon: Trophy,
|
||
mediaItems: [
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/team-government-spies-meeting-cia-headquarters-monitor-surveillance_482257-113960.jpg", imageAlt: "Infographic showing recycling activity tracking"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/recycle-icon-eco-friendly-green_53876-13900.jpg", imageAlt: "Smartphone screen with user's ecopoints dashboard"},
|
||
]
|
||
},
|
||
{
|
||
title: "Operational Intelligence for Municipalities", description: "Access real-time data on waste composition, collection efficiency, and recycling rates to optimize routes, reduce costs, and inform policy decisions for cleaner cities.", icon: LineChart,
|
||
mediaItems: [
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-couple-vacation_23-2147978877.jpg", imageAlt: "Holographic city map with optimized waste collection routes"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-tablet_1134-215.jpg", imageAlt: "Recycling facility operator reviewing waste stream data on tablet"},
|
||
]
|
||
}
|
||
]}
|
||
title="Unlock the Power of Smart Waste Management"
|
||
description="EcoSegregate’s innovative features are designed to simplify recycling for individuals and revolutionize operations for cities and campuses."
|
||
/>
|
||
</div>
|
||
|
||
<div id="how-it-works" data-section="how-it-works">
|
||
<ProductCardTwo
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="four-items-2x2-equal-grid"
|
||
useInvertedBackground={true}
|
||
products={[
|
||
{
|
||
id: "step-1", brand: "Step 1", name: "Snap & Identify", price: "Instant AI", rating: 5,
|
||
reviewCount: "Effortless", imageSrc: "http://img.b2bpic.net/free-photo/destruction-smartphones-ilustrated_23-2151500020.jpg", imageAlt: "User taking a photo of waste for AI identification"},
|
||
{
|
||
id: "step-2", brand: "Step 2", name: "Get Guidance", price: "Precise Disposal", rating: 5,
|
||
reviewCount: "No More Guessing", imageSrc: "http://img.b2bpic.net/free-photo/zero-waste-concept-composition_23-2148999435.jpg", imageAlt: "App displaying identified waste type and correct bin"},
|
||
{
|
||
id: "step-3", brand: "Step 3", name: "Earn Rewards", price: "Ecopoints", rating: 5,
|
||
reviewCount: "Gamified Sustainability", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-using-tablet_53876-14785.jpg", imageAlt: "User's ecopoints dashboard with rewards"},
|
||
{
|
||
id: "step-4", brand: "Step 4", name: "Drive Impact", price: "Cleaner Communities", rating: 5,
|
||
reviewCount: "Data-Powered", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sorting-garbage-concept-recycling-zero-waste_1153-5284.jpg", imageAlt: "Municipal workers optimizing waste collection routes"},
|
||
]}
|
||
title="Your Journey to Smarter Recycling"
|
||
description="Experience effortless waste management in four simple steps, designed for convenience and maximum impact."
|
||
/>
|
||
</div>
|
||
|
||
<div id="metrics" data-section="metrics">
|
||
<MetricCardOne
|
||
animationType="blur-reveal"
|
||
textboxLayout="default"
|
||
gridVariant="uniform-all-items-equal"
|
||
useInvertedBackground={false}
|
||
metrics={[
|
||
{
|
||
id: "m1", value: "30%+", title: "Increase in Recycling Rates", description: "Communities using EcoSegregate consistently see significant boosts in their overall recycling efficiency.", icon: TrendingUp,
|
||
},
|
||
{
|
||
id: "m2", value: "15%", title: "Reduction in Operational Costs", description: "Optimized collection routes and reduced contamination lead to substantial savings for waste management departments.", icon: DollarSign,
|
||
},
|
||
{
|
||
id: "m3", value: "95%", title: "Waste Identification Accuracy", description: "Our AI delivers industry-leading precision, ensuring waste is always sorted into the correct category.", icon: CheckCircle,
|
||
},
|
||
{
|
||
id: "m4", value: "500K+", title: "Ecopoints Earned by Users", description: "Thousands of users are actively participating and being rewarded for their valuable contributions to sustainability.", icon: Sparkles,
|
||
},
|
||
]}
|
||
title="Measuring Our Collective Impact"
|
||
description="EcoSegregate is driving tangible results, from increasing recycling rates to empowering smarter municipal operations."
|
||
/>
|
||
</div>
|
||
|
||
<div id="social-proof" data-section="social-proof">
|
||
<SocialProofOne
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
names={[
|
||
"GreenCity Initiative", "CampusRecycle Solutions", "WasteWise Municipality", "FutureCycle Recycling", "EcoStudents Network", "UrbanRenew Waste Services", "DataCycle Analytics"]}
|
||
title="Trusted by Leading Communities and Institutions"
|
||
description="Our platform is helping municipalities, campuses, and organizations achieve their sustainability goals."
|
||
showCard={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardThirteen
|
||
animationType="scale-rotate"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{
|
||
id: "t1", name: "Sarah Chen", handle: "@greencityplanner", testimonial: "EcoSegregate has been a game-changer for our city's waste department. The real-time data allows us to optimize routes, reduce costs, and track our recycling rates with unprecedented accuracy. It's a vital tool for urban sustainability.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/people-taking-community-action_23-2149232506.jpg", imageAlt: "Portrait of Sarah Chen, municipal waste management officer"},
|
||
{
|
||
id: "t2", name: "Alex Johnson", handle: "@eco_student", testimonial: "I used to be confused about what goes where, but EcoSegregate makes recycling so easy! I love earning ecopoints and seeing my positive impact. It's actually fun to be more sustainable now.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/girl-with-laptop_23-2148016316.jpg", imageAlt: "Portrait of Alex Johnson, environmentally conscious student"},
|
||
{
|
||
id: "t3", name: "Maria Rodriguez", handle: "@cycle_ops", testimonial: "The detailed waste composition data from EcoSegregate has drastically improved our facility's efficiency. We can better prepare our sorting lines and ensure higher quality output. It's a huge boost for our profitability.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/manufacturer-teaching-new-employee-how-shape-wooden-bowl-disc-sander_482257-99053.jpg", imageAlt: "Portrait of Maria Rodriguez, recycling facility operator"},
|
||
{
|
||
id: "t4", name: "David & Emily Kim", handle: "@sustainablehome", testimonial: "As a busy couple, finding time to properly sort waste was a challenge. EcoSegregate removed all the guesswork. We're recycling more than ever and it feels great!", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/woman-shopping-with-fabric-tote-bag_23-2149431757.jpg", imageAlt: "Portrait of David and Emily Kim, a young couple"},
|
||
{
|
||
id: "t5", name: "Dr. Anya Sharma", handle: "@community_eco", testimonial: "The engagement and education EcoSegregate brings to communities is unparalleled. It empowers residents to take active roles in sustainability and provides invaluable data for policymakers.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-people-working-together_23-2149181995.jpg", imageAlt: "Portrait of Dr. Anya Sharma, community leader and environmental advocate"},
|
||
]}
|
||
showRating={true}
|
||
title="What Our Community Says"
|
||
description="Hear directly from citizens, city planners, and operators who are transforming waste management with EcoSegregate."
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqDouble
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
faqs={[
|
||
{
|
||
id: "q1", title: "How does the AI identify waste materials?", content: "Our platform uses advanced computer vision and machine learning algorithms trained on a vast dataset of waste types. When you snap a photo, the AI analyzes the image to classify the material and provide accurate disposal guidance."},
|
||
{
|
||
id: "q2", title: "What are ecopoints and how can I use them?", content: "Ecopoints are rewards earned for correctly segregating and tracking your recycling activities. These points can be redeemed for various incentives, discounts with eco-friendly brands, or contribute to community green initiatives."},
|
||
{
|
||
id: "q3", title: "Is EcoSegregate available for all cities?", content: "EcoSegregate is constantly expanding. While we currently partner with specific municipalities and campuses, we are actively working to bring our platform to more locations. Check our 'Cities' section for availability or contact us for implementation inquiries."},
|
||
{
|
||
id: "q4", title: "How does the platform help municipalities?", content: "We provide municipalities with a dashboard offering real-time data on waste composition, collection efficiency, and recycling rates. This intelligence enables optimized collection routes, reduced operational costs, and data-driven policy decisions for improved urban sustainability."},
|
||
{
|
||
id: "q5", title: "What kind of waste can the AI identify?", content: "Our AI is continuously learning and can identify a wide range of common household and commercial waste materials, including various plastics, paper, glass, metals, organics, and e-waste. We aim for comprehensive coverage."},
|
||
{
|
||
id: "q6", title: "Is my personal data safe with EcoSegregate?", content: "Absolutely. We are committed to protecting your privacy. All personal data is anonymized and encrypted, and we adhere strictly to global data protection regulations. We only use aggregated, anonymized data for operational intelligence purposes."},
|
||
]}
|
||
title="Frequently Asked Questions"
|
||
description="Find answers to common questions about EcoSegregate, its features, and how it benefits various stakeholders."
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplitForm
|
||
useInvertedBackground={false}
|
||
title="Get in Touch with EcoSegregate"
|
||
description="Have questions, partnership inquiries, or want to bring EcoSegregate to your city or campus? We'd love to hear from you."
|
||
inputs={[
|
||
{
|
||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||
},
|
||
{
|
||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||
},
|
||
{
|
||
name: "subject", type: "text", placeholder: "Subject"},
|
||
]}
|
||
textarea={{
|
||
name: "message", placeholder: "Your Message", rows: 5,
|
||
required: true,
|
||
}}
|
||
imageSrc="http://img.b2bpic.net/free-photo/3d-abstract-landscape-cubes-with-depth-field_1048-12642.jpg"
|
||
imageAlt="Abstract network illustration for contact section"
|
||
mediaAnimation="slide-up"
|
||
mediaPosition="right"
|
||
buttonText="Send Message"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterMedia
|
||
imageSrc="http://img.b2bpic.net/free-photo/person-using-zero-emissions-mean-transportation-go-around-city_23-2151261371.jpg"
|
||
imageAlt="Clean city park with smart bins"
|
||
logoSrc="http://img.b2bpic.net/free-photo/incense-sticks-with-herbs-near-monster-leaf-coaster_23-2147844956.jpg"
|
||
logoText="EcoSegregate"
|
||
columns={[
|
||
{
|
||
title: "Platform", items: [
|
||
{
|
||
label: "Features", href: "#features"},
|
||
{
|
||
label: "How It Works", href: "#how-it-works"},
|
||
{
|
||
label: "Impact", href: "#metrics"},
|
||
],
|
||
},
|
||
{
|
||
title: "Company", items: [
|
||
{
|
||
label: "About Us", href: "#about"},
|
||
{
|
||
label: "Testimonials", href: "#testimonials"},
|
||
{
|
||
label: "Partnerships", href: "#social-proof"},
|
||
],
|
||
},
|
||
{
|
||
title: "Support", items: [
|
||
{
|
||
label: "FAQ", href: "#faq"},
|
||
{
|
||
label: "Contact", href: "/contact"},
|
||
{
|
||
label: "Privacy Policy", href: "#"},
|
||
],
|
||
},
|
||
]}
|
||
copyrightText="© 2024 EcoSegregate. All rights reserved."
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|