Files
36bd7350-56bf-42fc-97c2-d39…/src/app/page.tsx
2026-03-29 21:56:25 +00:00

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>
);
}