212 lines
10 KiB
TypeScript
212 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import { CheckCircle, Heart, Leaf, Sparkles, Star, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="medium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Products", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Shop Now", href: "products" }}
|
|
brandName="NutriFlow"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
title="Premium Plant-Based Nutrition"
|
|
description="Experience the future of healthy living with NutriFlow. Effortlessly create nutrient-rich smoothies, nut milks, and plant-based beverages. Smart technology meets natural wellness."
|
|
tag="Innovation in Nutrition"
|
|
tagIcon={Leaf}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APOy4KNroOwh8jYlmSAmq1iQgx/uploaded-1772491453041-7g1qiahn.png"
|
|
imageAlt="NutriFlow blender with ingredients"
|
|
imagePosition="right"
|
|
mediaAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Explore Now", href: "products" },
|
|
{ text: "Learn More", href: "features" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
title="Our Product Line"
|
|
description="Discover our premium NutriFlow blenders designed for health-conscious individuals"
|
|
tag="Best Sellers"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", name: "NutriFlow Pro Blender", price: "$299.99", imageSrc: "http://img.b2bpic.net/free-photo/blender-wooden-table-kitchen-make-yourself-fresh-concept-healthy-diet_639032-206.jpg", imageAlt: "NutriFlow Pro Blender", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "2", name: "NutriFlow Compact Blender", price: "$199.99", imageSrc: "http://img.b2bpic.net/free-photo/woman-makes-apple-juice-home-with-juicer_169016-49025.jpg", imageAlt: "NutriFlow Compact Blender", initialQuantity: 1
|
|
},
|
|
{
|
|
id: "3", name: "NutriFlow Elite Blender", price: "$399.99", imageSrc: "http://img.b2bpic.net/free-photo/woman-makes-apple-juice-home-with-juicer_169016-49003.jpg", imageAlt: "NutriFlow Elite Blender", initialQuantity: 1
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNine
|
|
title="Powerful Features"
|
|
description="Experience cutting-edge blender technology designed for optimal nutrition"
|
|
tag="Smart Technology"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Intelligent Blending", description: "AI-powered blending modes automatically adjust for perfect consistency every time", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/fresh-orange-juice-glass-close-up-kitchen-table_169016-52129.jpg" },
|
|
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/fitness-mobile-app-infographic-flat-design_52683-16269.jpg" }
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Temperature Control", description: "Precise heat management to preserve nutrients and create warm or cold beverages", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/man-adjusting-thermostat-wall_23-2152024178.jpg" },
|
|
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/woman-drinking-hot-chocolate-cafe_23-2149944040.jpg" }
|
|
}
|
|
]}
|
|
showStepNumbers={true}
|
|
textboxLayout="default"
|
|
animationType="blur-reveal"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="Why Choose Us"
|
|
tagIcon={Heart}
|
|
title="Built for wellness. Engineered for perfection."
|
|
description="NutriFlow Team"
|
|
subdescription="Health & Wellness Innovation"
|
|
icon={CheckCircle}
|
|
imageSrc="http://img.b2bpic.net/free-photo/metal-food-blender-close-up-with-fresh-exotic-tropic-fruits-it-kitchen-background-with-empty-space-blender-wooden-table-kitchen_639032-170.jpg"
|
|
imageAlt="NutriFlow blender in kitchen"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What Our Customers Say"
|
|
description="Real stories from people who have transformed their health with NutriFlow"
|
|
tag="Customer Reviews"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", role: "Wellness Coach", company: "Health First Studio", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg", imageAlt: "Sarah Johnson"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen", role: "Fitness Trainer", company: "Fit Body Studio", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Michael Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Rodriguez", role: "Nutritionist", company: "Nutrition Plus", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-nurse-looking-camera-while-standing-clinic_637285-5031.jpg", imageAlt: "Emma Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "James Williams", role: "Life Coach", company: "Transform Life", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg", imageAlt: "James Williams"
|
|
},
|
|
{
|
|
id: "5", name: "Lisa Anderson", role: "Health Author", company: "Wellness Magazine", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-female-manager-eyeglasses-with-documents-hands_171337-16709.jpg", imageAlt: "Lisa Anderson"
|
|
},
|
|
{
|
|
id: "6", name: "David Park", role: "Dietician", company: "Care Health Center", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-male-doctor-dressed-uniform_171337-1486.jpg", imageAlt: "David Park"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to transform your nutrition journey? Join thousands of health-conscious individuals who have already discovered the NutriFlow difference."
|
|
animationType="entrance-slide"
|
|
background={{ variant: "plain" }}
|
|
buttons={[
|
|
{ text: "Get Started Today", href: "products" },
|
|
{ text: "Contact Support", href: "#" }
|
|
]}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="NutriFlow"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Home", href: "#" },
|
|
{ label: "Products", href: "products" },
|
|
{ label: "Features", href: "features" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "About Us", href: "about" },
|
|
{ label: "Testimonials", href: "testimonials" },
|
|
{ label: "Contact", href: "contact" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Support", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|