268 lines
16 KiB
TypeScript
268 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { Award, Droplet, Leaf, Palette, Star, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="EcoBottle"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Products", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
button={{
|
|
text: "Discover Your Perfect Bottle", href: "https://shop.ecobottle.com"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
title="Hydrate Smarter, Live Greener"
|
|
description="EcoBottle combines biodegradable design with intelligent hydration tracking. Stay hydrated with style while reducing your environmental footprint."
|
|
tag="Sustainable Innovation"
|
|
tagIcon={Leaf}
|
|
imageSrc="http://img.b2bpic.net/free-photo/woman-sitting-grass-with-reusable-bag-thermos_23-2148523466.jpg"
|
|
imageAlt="EcoBottle lifestyle product showcase"
|
|
mediaAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
testimonials={[
|
|
{
|
|
name: "Sarah Johnson", handle: "CEO, TechCorp", testimonial: "EcoBottle transformed how I track my hydration while supporting environmental causes. Love it!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-business-woman-white-background_231208-14003.jpg"
|
|
},
|
|
{
|
|
name: "Michael Chen", handle: "Fitness Coach", testimonial: "The temperature retention is incredible. My water stays cold for 24+ hours. Perfect for training.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/athlete-doing-exercises-air-bike-exercise-bike-closeup_169016-59100.jpg"
|
|
},
|
|
{
|
|
name: "Emma Davis", handle: "Environmental Advocate", testimonial: "Finally, a bottle that matches my values. Biodegradable, smart, and beautifully designed.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-working-hard-greenhouse_23-2149037325.jpg"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Discover Your Perfect Bottle", href: "https://shop.ecobottle.com" },
|
|
{ text: "Learn More", href: "#features" }
|
|
]}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="Our Story"
|
|
tagIcon={Droplet}
|
|
title="Sustainability Meets Smart Technology"
|
|
description="Founded by environmental advocates who believed wellness and responsibility shouldn't be separate goals."
|
|
subdescription="EcoBottle: Redefining Hydration for a Better Tomorrow"
|
|
icon={Leaf}
|
|
imageSrc="http://img.b2bpic.net/free-photo/zero-waste-wooden-utensils_23-2149316618.jpg"
|
|
imageAlt="Biodegradable materials and eco-friendly design"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNineteen
|
|
title="Why Choose EcoBottle"
|
|
description="Three core innovations that make EcoBottle the smarter choice for conscious consumers"
|
|
tag="Key Features"
|
|
tagIcon={Zap}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Smart Health", title: "Intelligent Hydration Tracking", subtitle: "Monitor your daily water intake effortlessly", description: "Our companion app uses advanced sensors to track your hydration in real-time, sending personalized reminders to help you maintain optimal wellness habits. Perfect for busy professionals who care about their health.", imageSrc: "http://img.b2bpic.net/free-vector/workout-tracker-app-interface_52683-46943.jpg", imageAlt: "Smart hydration tracking app interface", buttons: [{ text: "Download App", href: "https://apps.apple.com/ecobottle" }]
|
|
},
|
|
{
|
|
id: 2,
|
|
tag: "Temperature Control", title: "Maintains Beverage Temperature for Hours", subtitle: "Advanced thermal insulation technology", description: "EcoBottle's double-wall biodegradable insulation keeps cold drinks refreshing for 24+ hours or hot beverages warm for 12+ hours. Adventure-ready temperature retention for any lifestyle.", imageSrc: "http://img.b2bpic.net/free-photo/male-pouring-drink-cups-river_23-2148301379.jpg", imageAlt: "Insulated bottle maintaining temperature", buttons: [{ text: "Explore Sizes", href: "#products" }]
|
|
},
|
|
{
|
|
id: 3,
|
|
tag: "Eco Impact", title: "100% Biodegradable Materials", subtitle: "Sustainable without compromise", description: "Crafted from plant-based polymers and renewable resources, every EcoBottle naturally decomposes within 5 years. No plastic guilt, pure environmental responsibility with premium performance.", imageSrc: "http://img.b2bpic.net/free-photo/zero-waste-wooden-utensils_23-2149316618.jpg", imageAlt: "Sustainable materials and eco-friendly production", buttons: [{ text: "Learn About Our Impact", href: "#contact" }]
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
title="Our Product Range"
|
|
description="Choose from our curated collection of sustainable water bottles, available in multiple sizes and elegant color variants"
|
|
tag="Premium Collection"
|
|
tagIcon={Palette}
|
|
products={[
|
|
{
|
|
id: "1", name: "EcoBottle Compact 500ml", price: "$34.99", imageSrc: "http://img.b2bpic.net/free-photo/blue-yoga-mat-flowers-arrangement_23-2149442735.jpg", imageAlt: "Blue EcoBottle 500ml compact size"
|
|
},
|
|
{
|
|
id: "2", name: "EcoBottle Standard 750ml", price: "$44.99", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-athletic-woman-recommending-sport-drink_1262-4723.jpg", imageAlt: "Green EcoBottle 750ml standard size"
|
|
},
|
|
{
|
|
id: "3", name: "EcoBottle Large 1000ml", price: "$54.99", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-bottle-orange-juice_53876-137706.jpg", imageAlt: "Natural EcoBottle 1000ml large size"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Shop Now", href: "https://shop.ecobottle.com" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What Our Customers Say"
|
|
description="Real stories from people who've embraced the EcoBottle lifestyle"
|
|
tag="Customer Reviews"
|
|
tagIcon={Star}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", role: "CEO", company: "TechCorp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-business-woman-white-background_231208-14003.jpg", imageAlt: "Sarah Johnson testimonial"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen", role: "Fitness Coach", company: "FitLife Studios", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/athlete-doing-exercises-air-bike-exercise-bike-closeup_169016-59100.jpg", imageAlt: "Michael Chen testimonial"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Davis", role: "Environmental Advocate", company: "Green Futures", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-working-hard-greenhouse_23-2149037325.jpg", imageAlt: "Emma Davis testimonial"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim", role: "Product Manager", company: "Sustainability Inc", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-entrepreneur-working-from-cafe_1098-14469.jpg", imageAlt: "David Kim testimonial"
|
|
},
|
|
{
|
|
id: "5", name: "Lisa Thompson", role: "Marathon Runner", company: "Elite Athletics", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/girl-posing-with-skate-board_72229-117.jpg", imageAlt: "Lisa Thompson testimonial"
|
|
},
|
|
{
|
|
id: "6", name: "James Wilson", role: "Gift Buyer", company: "Corporate Gifting Pro", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/concept-holidays-celebration-happy-man-giving-gift-looking-excited-standing-against-yellow-background_1258-67329.jpg", imageAlt: "James Wilson testimonial"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Featured In Leading Publications"
|
|
description="EcoBottle has been recognized by industry leaders and environmental advocates worldwide"
|
|
tag="Media Coverage"
|
|
tagIcon={Award}
|
|
names={["Patagonia", "New York Times", "BBC", "The Guardian", "Greenpeace", "TED Talks", "Forbes", "WIRED"]}
|
|
logos={[
|
|
"http://img.b2bpic.net/free-vector/mont-blanc-vintage-badge_23-2147504350.jpg", "http://img.b2bpic.net/free-vector/flat-lettering-newsletter-label-logo-collection_1188-762.jpg", "http://img.b2bpic.net/free-vector/gradient-breaking-news-logo-design_23-2151173048.jpg", "http://img.b2bpic.net/free-photo/people-hangout-together-coffee-shop_53876-13962.jpg", "http://img.b2bpic.net/free-vector/planet-is-out-sweet-home-save-planet-concept_23-2148512910.jpg", "http://img.b2bpic.net/free-photo/two-multiethnic-businessmen-sharing-whiskey-glass-elegant-library_482257-120244.jpg", "http://img.b2bpic.net/free-vector/business-magazine-cover-template-with-photo_23-2147843187.jpg", "http://img.b2bpic.net/free-vector/blue-technology-brochure_1035-5483.jpg"
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
showCard={true}
|
|
speed={40}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Everything you need to know about EcoBottle and our smart hydration system"
|
|
textPosition="left"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How does the hydration tracking work?", content: "EcoBottle's smart sensors detect when you drink and send real-time data to our companion app. The app learns your habits and sends personalized reminders to help you stay hydrated throughout the day."
|
|
},
|
|
{
|
|
id: "2", title: "Is EcoBottle completely biodegradable?", content: "Yes! EcoBottle is made from 100% plant-based polymers and naturally decomposes within 5 years when disposed in appropriate conditions. No microplastics, no environmental guilt."
|
|
},
|
|
{
|
|
id: "3", title: "How long does the temperature retention last?", content: "Our advanced insulation keeps cold beverages refreshing for 24+ hours and hot drinks warm for 12+ hours. Perfect for all-day hydration or adventure trips."
|
|
},
|
|
{
|
|
id: "4", title: "What sizes are available?", content: "EcoBottle comes in three premium sizes: Compact (500ml), Standard (750ml), and Large (1000ml). Each size is available in multiple elegant color variants."
|
|
},
|
|
{
|
|
id: "5", title: "Can I use the app without the bottle?", content: "The companion app is free to download and provides hydration tracking tips and wellness insights. However, the smart features work best when paired with an EcoBottle."
|
|
},
|
|
{
|
|
id: "6", title: "Is EcoBottle a good corporate gift?", content: "Absolutely! EcoBottle is perfect for eco-conscious gift-giving. Many companies order custom-branded bottles for corporate gifting and employee wellness programs."
|
|
}
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to transform your hydration journey? Join thousands of eco-conscious individuals who've embraced smarter, greener wellness."
|
|
animationType="entrance-slide"
|
|
buttons={[
|
|
{ text: "Get Started Today", href: "https://shop.ecobottle.com" },
|
|
{ text: "Contact Us", href: "mailto:hello@ecobottle.com" }
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Shop", href: "https://shop.ecobottle.com" },
|
|
{ label: "Sizes & Colors", href: "#products" },
|
|
{ label: "Download App", href: "https://apps.apple.com/ecobottle" },
|
|
{ label: "Warranty", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Sustainability", href: "#features" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Blog", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Contact", href: "mailto:hello@ecobottle.com" },
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 EcoBottle | Hydrate Smarter, Live Greener"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|