342 lines
11 KiB
TypeScript
342 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { Droplets, Globe, Leaf, Mail, Recycle, Smile, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="large"
|
|
background="none"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Products",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "Support",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="Dr mohamed abdelfatah"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCentered
|
|
background={{
|
|
variant: "sparkles-gradient",
|
|
}}
|
|
title="Refresh Your Potential"
|
|
description="Discover Dr Spper, the health-conscious beverage crafted for energy, innovation, and total body hydration."
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdZzonxXgP71mIBNa6QEaWRKuN/headshot-of-a-happy-fitness-enthusiast-d-1774821207314-bc2e7f8a.png",
|
|
alt: "User 1",
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdZzonxXgP71mIBNa6QEaWRKuN/headshot-of-a-vibrant-young-health-consc-1774821207354-f7ddf475.png",
|
|
alt: "User 2",
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdZzonxXgP71mIBNa6QEaWRKuN/headshot-of-a-smiling-active-individual--1774821207425-490c0019.png",
|
|
alt: "User 3",
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdZzonxXgP71mIBNa6QEaWRKuN/headshot-of-an-outdoor-enthusiast-holdin-1774821208498-020e961b.png",
|
|
alt: "User 4",
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdZzonxXgP71mIBNa6QEaWRKuN/headshot-of-a-happy-fitness-enthusiast-d-1774821207314-bc2e7f8a.png",
|
|
alt: "User 5",
|
|
},
|
|
]}
|
|
avatarText="Join 10,000+ healthy drinkers"
|
|
buttons={[
|
|
{
|
|
text: "Shop Now",
|
|
href: "#products",
|
|
},
|
|
{
|
|
text: "Our Story",
|
|
href: "#about",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
marqueeItems={[
|
|
{
|
|
type: "text-icon",
|
|
text: "Natural Electrolytes",
|
|
icon: Droplets,
|
|
},
|
|
{
|
|
type: "text-icon",
|
|
text: "Zero Artificial Additives",
|
|
icon: Leaf,
|
|
},
|
|
{
|
|
type: "text-icon",
|
|
text: "100% Recyclable Packaging",
|
|
icon: Recycle,
|
|
},
|
|
{
|
|
type: "text-icon",
|
|
text: "Plant-Based Energy",
|
|
icon: Zap,
|
|
},
|
|
{
|
|
type: "text-icon",
|
|
text: "Eco-Friendly Sourcing",
|
|
icon: Globe,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={false}
|
|
title="Our Hydration Mission"
|
|
description={[
|
|
"At Dr Spper, we believe hydration should be as natural as it is delicious. Founded in 2024, our mission is to eliminate artificial additives and provide pure, health-conscious beverages.",
|
|
"We source ingredients sustainably and ensure every bottle is packed with essential electrolytes and refreshing natural zest to keep you performing at your peak.",
|
|
"Our commitment extends beyond your glass — we aim to minimize our carbon footprint and ensure 100% recyclable packaging for every product.",
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "Citrus Lime Zest",
|
|
price: "$3.50",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdZzonxXgP71mIBNa6QEaWRKuN/close-up-of-dr-spper-citrus-lime-bottle--1774821208029-88654171.png",
|
|
imageAlt: "Citrus Lime Zest",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Orange Sunshine",
|
|
price: "$3.50",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdZzonxXgP71mIBNa6QEaWRKuN/close-up-of-dr-spper-orange-zest-bottle--1774821207809-942c5d39.png",
|
|
imageAlt: "Orange Sunshine",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Aqua Blue Hydration",
|
|
price: "$3.99",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdZzonxXgP71mIBNa6QEaWRKuN/close-up-of-dr-spper-aqua-blue-electroly-1774821207456-098fb70f.png",
|
|
imageAlt: "Aqua Blue Hydration",
|
|
},
|
|
]}
|
|
title="Explore Our Flavors"
|
|
description="Discover the refreshingly bold taste of Dr Spper, crafted from nature's best ingredients."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
icon: Droplets,
|
|
title: "Bottles Hydrated",
|
|
value: "1.2M+",
|
|
},
|
|
{
|
|
id: "m2",
|
|
icon: Droplets,
|
|
title: "Recyclable Packages",
|
|
value: "100%",
|
|
},
|
|
{
|
|
id: "m3",
|
|
icon: Smile,
|
|
title: "Satisfied Drinkers",
|
|
value: "98%",
|
|
},
|
|
]}
|
|
title="Hydration by the Numbers"
|
|
description="Committed to quality, sustainability, and our growing community of fitness enthusiasts."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Sarah Miller",
|
|
role: "CrossFit Athlete",
|
|
testimonial: "The Citrus Lime flavor is my post-workout savior. Refreshing, natural, and keeps me perfectly hydrated.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdZzonxXgP71mIBNa6QEaWRKuN/headshot-of-a-happy-fitness-enthusiast-d-1774821207314-bc2e7f8a.png",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "David Chen",
|
|
role: "Triathlete",
|
|
testimonial: "I switched to Dr Spper for all my training sessions. Clean ingredients and great taste make all the difference.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdZzonxXgP71mIBNa6QEaWRKuN/headshot-of-a-vibrant-young-health-consc-1774821207354-f7ddf475.png?_wi=1",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Emily Rodriguez",
|
|
role: "Yoga Instructor",
|
|
testimonial: "Perfectly balanced and healthy. Love the sustainability aspect, makes me feel great about what I drink.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdZzonxXgP71mIBNa6QEaWRKuN/headshot-of-a-smiling-active-individual--1774821207425-490c0019.png",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "James Wilson",
|
|
role: "Marathon Runner",
|
|
testimonial: "The best electrolyte drink I've tried. No crash, just clean energy for my long runs.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdZzonxXgP71mIBNa6QEaWRKuN/headshot-of-an-outdoor-enthusiast-holdin-1774821208498-020e961b.png",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Marcus Thorne",
|
|
role: "Personal Trainer",
|
|
testimonial: "The hydration is incredible. I recommend it to all my clients looking for a clean performance boost.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdZzonxXgP71mIBNa6QEaWRKuN/headshot-of-a-vibrant-young-health-consc-1774821207354-f7ddf475.png?_wi=2",
|
|
},
|
|
]}
|
|
title="Loved by Fitness Enthusiasts"
|
|
description="Hear what our hydration community is saying about the Dr Spper refresh experience."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "f1",
|
|
title: "Are your ingredients natural?",
|
|
content: "Yes, we use only 100% natural fruit extracts and plant-based electrolytes.",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "Is the packaging recyclable?",
|
|
content: "Absolutely. Every Dr Spper bottle is 100% recyclable and made from BPA-free materials.",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "Do you offer shipping?",
|
|
content: "We ship globally to over 50 countries with fast, climate-neutral delivery options.",
|
|
},
|
|
]}
|
|
ctaTitle="Stay Hydrated with Us"
|
|
ctaDescription="Have questions or want to partner with us? Reach out today."
|
|
ctaButton={{
|
|
text: "Get In Touch",
|
|
href: "#",
|
|
}}
|
|
ctaIcon={Mail}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Careers",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Shop",
|
|
items: [
|
|
{
|
|
label: "Lime Series",
|
|
href: "#products",
|
|
},
|
|
{
|
|
label: "Orange Series",
|
|
href: "#products",
|
|
},
|
|
{
|
|
label: "Electrolytes",
|
|
href: "#products",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Resources",
|
|
items: [
|
|
{
|
|
label: "Hydration Guide",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Fitness Tips",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Blog",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2024 Dr Spper Drinks. All rights reserved."
|
|
bottomRightText="Hydration for the Future."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|