bender/03baa2d1-097b-4187-9f8c-bab884147eaf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #2

Merged
bender merged 5 commits from version_2 into main 2026-03-17 23:09:33 +00:00
Conversation 0 Commits 5 Files Changed 5 +358 -513
5 changed files with 358 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/app/about/page.tsx
View File

@@ -2,19 +2,19 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import AboutMetric from "@/components/sections/about/AboutMetric";
import TeamCardOne from "@/components/sections/team/TeamCardOne";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import { Leaf, Users, Sparkles, Heart, Facebook, Instagram, Twitter, Linkedin } from "lucide-react";
import { Leaf, Heart, Users, Award, TrendingUp, Sparkles, Facebook, Instagram, Twitter, Linkedin } from "lucide-react";
export default function AboutPage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "About", id: "about" },
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Meal Plans", id: "meal-plans" },
{ name: "Contact", id: "contact" }
{ name: "Contact", id: "/contact" }
];
return (
@@ -35,22 +35,43 @@ export default function AboutPage() {
navItems={navItems}
brandName="NutriFlow"
button={{
text: "Order Now",
href: "/meal-plans"
text: "Order Now", href: "/meal-plans"
}}
/>
</div>
<div id="our-mission" data-section="our-mission">
<TextAbout
tag="Our Mission"
<div id="hero" data-section="hero">
<HeroSplit
title="Our Mission: Healthy Living Made Simple"
description="At NutriFlow, we believe that health shouldn't be complicated. Founded in 2020, we've been on a mission to make nutritious, delicious meals accessible to everyone. We combine science, sustainability, and culinary excellence to transform how people eat."
tag="About NutriFlow"
tagIcon={Leaf}
tagAnimation="slide-up"
title="We believe that healthy eating should be accessible, delicious, and convenient for everyone. Our mission is to empower people to transform their lives through nutritious, science-backed meal plans that fit seamlessly into their daily routines."
buttons={[
{
text: "Start Your Journey",
href: "/"
text: "Start Your Journey", href: "/contact"
}
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/diverse-group-people-brainstorming-together_53876-24727.jpg?_wi=1"
imageAlt="Team collaborating on nutrition planning"
mediaAnimation="slide-up"
imagePosition="right"
background={{
variant: "radial-gradient"
}}
/>
</div>
<div id="about" data-section="about">
<TextAbout
tag="Our Values"
tagIcon={Heart}
tagAnimation="slide-up"
title="We believe in quality, sustainability, and accessibility. Every meal is crafted with care, using fresh, locally-sourced ingredients whenever possible. Our commitment to transparency means you always know exactly what's in your food."
buttons={[
{
text: "Learn About Our Process", href: "/contact"
}
]}
buttonAnimation="slide-up"
@@ -58,79 +79,55 @@ export default function AboutPage() {
/>
</div>
<div id="team-values" data-section="team-values">
<FeatureCardThree
title="Our Core Values"
description="The principles that guide everything we do at NutriFlow."
tag="What We Stand For"
tagIcon={Sparkles}
tagAnimation="slide-up"
features={[
<div id="company-info" data-section="company-info">
<AboutMetric
title="Why Customers Trust NutriFlow"
metricsAnimation="slide-up"
useInvertedBackground={true}
metrics={[
{
id: "quality",
title: "Quality First",
description: "We source only the freshest, highest-quality ingredients from trusted suppliers. Every meal meets our rigorous nutrition and taste standards.",
imageSrc: "http://img.b2bpic.net/free-photo/salmon-with-vegetables-rice-photography_53876-108182.jpg?_wi=2",
imageAlt: "Fresh healthy meal bowls with vegetables and proteins"
icon: Award,
label: "Industry Certified", value: "ISO 9001"
},
{
id: "science",
title: "Science-Backed",
description: "Our meal plans are developed by certified nutritionists and are grounded in the latest research in nutrition science and sustainable wellness.",
imageSrc: "http://img.b2bpic.net/free-photo/adult-man-woman-working-together_23-2148461552.jpg?_wi=2",
imageAlt: "Nutritionist working on healthy meal planning"
icon: Users,
label: "Team Members", value: "50+"
},
{
id: "sustainability",
title: "Sustainable Living",
description: "We're committed to eco-friendly packaging and sustainable sourcing practices. Helping you live better also means protecting our planet.",
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-assortment-batch-food-cooked_23-2148765532.jpg?_wi=2",
imageAlt: "Sustainable meal prep with eco-friendly packaging"
icon: Sparkles,
label: "Years in Business", value: "4+"
},
{
icon: TrendingUp,
label: "Customer Retention", value: "92%"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="success-stories" data-section="success-stories">
<TestimonialCardTen
title="Customer Success Stories"
description="Real people, real results. Hear how NutriFlow has transformed lives."
tag="Transformation Stories"
tagIcon={Heart}
<div id="team" data-section="team">
<TeamCardOne
title="Meet Our Leadership Team"
description="Experienced professionals dedicated to transforming nutrition and wellness."
tag="Our Team"
tagIcon={Users}
tagAnimation="slide-up"
testimonials={[
members={[
{
id: "1",
title: "From Struggling to Thriving",
quote: "I was overwhelmed with meal planning and never knew what to eat. NutriFlow took all that stress away. I lost 20 pounds and feel more confident than ever.",
name: "Sarah Johnson",
role: "Marketing Manager",
imageSrc: "http://img.b2bpic.net/free-photo/happy-blonde-girl-is-raising-up-her-fisst-blue-background_176474-119362.jpg?_wi=2",
imageAlt: "happy woman professional portrait headshot"
id: "1", name: "Sarah Mitchell", role: "Founder & CEO", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-with-curly-hair-posing-with-copy-space_23-2148728583.jpg"
},
{
id: "2",
title: "A New Relationship with Food",
quote: "After years of yo-yo dieting, NutriFlow showed me that sustainable health is possible. The support from their nutrition team has been invaluable.",
name: "Michael Chen",
role: "Business Owner",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg?_wi=2",
imageAlt: "professional man portrait headshot confident"
id: "2", name: "Dr. James Chen", role: "Chief Nutritionist", imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg"
},
{
id: "3",
title: "Fitness Goals Achieved",
quote: "As an athlete, proper nutrition is crucial. NutriFlow's high-protein plans have helped me achieve my fitness goals faster than I thought possible.",
name: "Emily Rodriguez",
role: "Fitness Coach",
imageSrc: "http://img.b2bpic.net/free-photo/it-was-that-easy-photo-gorgeous-blonde-woman-gym-her-weekend-time_146671-16565.jpg?_wi=2",
imageAlt: "fitness trainer woman portrait professional"
id: "3", name: "Emma Rodriguez", role: "Head Chef", imageSrc: "http://img.b2bpic.net/free-photo/it-was-that-easy-photo-gorgeous-blonde-woman-gym-her-weekend-time_146671-16565.jpg"
},
{
id: "4", name: "Michael Thompson", role: "Operations Director", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-elegant-businessman-standing-office-building_1098-19247.jpg"
}
]}
gridVariant="two-columns-alternating-heights"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
@@ -143,23 +140,19 @@ export default function AboutPage() {
socialLinks={[
{
icon: Facebook,
href: "https://facebook.com/nutriflow",
ariaLabel: "Visit our Facebook"
href: "https://facebook.com/nutriflow", ariaLabel: "Visit our Facebook"
},
{
icon: Instagram,
href: "https://instagram.com/nutriflow",
ariaLabel: "Visit our Instagram"
href: "https://instagram.com/nutriflow", ariaLabel: "Visit our Instagram"
},
{
icon: Twitter,
href: "https://twitter.com/nutriflow",
ariaLabel: "Visit our Twitter"
href: "https://twitter.com/nutriflow", ariaLabel: "Visit our Twitter"
},
{
icon: Linkedin,
href: "https://linkedin.com/company/nutriflow",
ariaLabel: "Visit our LinkedIn"
href: "https://linkedin.com/company/nutriflow", ariaLabel: "Visit our LinkedIn"
}
]}
/>

192
src/app/contact/page.tsx
View File

@@ -1,21 +1,24 @@
"use client";
import { Heart, HelpCircle } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Facebook, Instagram, Twitter, Linkedin } from "lucide-react";
import { MessageSquare, Mail, Phone, MapPin, Facebook, Instagram, Twitter, Linkedin } from "lucide-react";
export default function ContactPage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "About", id: "about" },
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Meal Plans", id: "meal-plans" },
{ name: "Contact", id: "contact" },
{ name: "Contact", id: "/contact" }
];
const handleContactSubmit = (data: Record<string, string>) => {
console.log("Contact form submitted:", data);
};
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
@@ -29,84 +32,111 @@ export default function ContactPage() {
secondaryButtonStyle="layered"
headingFontWeight="semibold"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="NutriFlow"
navItems={navItems}
brandName="NutriFlow"
button={{
text: "Order Now",
href: "/meal-plans",
text: "Order Now", href: "/meal-plans"
}}
/>
</div>
{/* CTA/Contact Section */}
<div id="cta" data-section="cta">
<div className="mx-auto px-4 md:px-6">
<ContactCenter
tag="Ready to Transform?"
title="Start Your Health Journey Today"
description="Join thousands of satisfied customers who have transformed their lives with NutriFlow. Sign up now to get your first week at 20% off."
background={{
variant: "radial-gradient",
}}
useInvertedBackground={false}
inputPlaceholder="Enter your email address"
buttonText="Get Started"
/>
<div id="hero" data-section="hero">
<HeroSplit
title="Get in Touch with NutriFlow"
description="Have questions about our meal plans or services? We'd love to hear from you. Our dedicated support team is here to help you on your wellness journey."
tag="Contact Us"
tagIcon={MessageSquare}
tagAnimation="slide-up"
buttons={[
{
text: "View Meal Plans", href: "/meal-plans"
}
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/customer-support-agent-with-headphones_53876-24718.jpg?_wi=1"
imageAlt="Customer support professional"
mediaAnimation="slide-up"
imagePosition="right"
background={{
variant: "radial-gradient"
}}
/>
</div>
<div id="contact-form" data-section="contact-form">
<ContactSplitForm
title="Send Us a Message"
description="Fill out the form below and our team will get back to you as soon as possible. We typically respond within 24 hours."
inputs={[
{
name: "name", type: "text", placeholder: "Your Name", required: true
},
{
name: "email", type: "email", placeholder: "Your Email", required: true
},
{
name: "phone", type: "tel", placeholder: "Your Phone Number", required: false
},
{
name: "subject", type: "text", placeholder: "Subject", required: true
}
]}
textarea={{
name: "message", placeholder: "Tell us how we can help you...", rows: 6,
required: true
}}
buttonText="Send Message"
onSubmit={handleContactSubmit}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/diverse-team-working-together-office-environment_53876-24750.jpg?_wi=1"
imageAlt="NutriFlow team in office"
mediaAnimation="slide-up"
mediaPosition="right"
/>
</div>
<div id="contact-info" data-section="contact-info">
<div className="py-16 md:py-24 relative">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold mb-4">Other Ways to Reach Us</h2>
<p className="text-lg text-muted-foreground">We're available through multiple channels to best serve your needs</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="text-center p-6 rounded-lg border border-border hover:bg-card/50 transition-colors">
<div className="flex justify-center mb-4">
<Mail className="w-8 h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-2">Email</h3>
<p className="text-muted-foreground">support@nutriflow.com</p>
<p className="text-sm text-muted-foreground mt-1">We respond within 24 hours</p>
</div>
<div className="text-center p-6 rounded-lg border border-border hover:bg-card/50 transition-colors">
<div className="flex justify-center mb-4">
<Phone className="w-8 h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-2">Phone</h3>
<p className="text-muted-foreground">1-800-NUTRIFLOW</p>
<p className="text-sm text-muted-foreground mt-1">Mon-Fri, 9AM-6PM EST</p>
</div>
<div className="text-center p-6 rounded-lg border border-border hover:bg-card/50 transition-colors">
<div className="flex justify-center mb-4">
<MapPin className="w-8 h-8 text-primary" />
</div>
<h3 className="text-lg font-semibold mb-2">Location</h3>
<p className="text-muted-foreground">123 Wellness Ave</p>
<p className="text-sm text-muted-foreground mt-1">San Francisco, CA 94102</p>
</div>
</div>
</div>
</div>
</div>
{/* FAQ Section */}
<div id="faq" data-section="faq">
<div className="mx-auto px-4 md:px-6">
<FaqDouble
title="Frequently Asked Questions"
description="Everything you need to know about NutriFlow and getting started."
tag="Got Questions?"
tagIcon={HelpCircle}
tagAnimation="slide-up"
faqs={[
{
id: "1",
title: "How do I place my first order?",
content: "Simply choose your meal plan above, enter your email to get started, and follow our quick onboarding process. You'll select your meals and delivery preferences, and your first box ships within 48 hours.",
},
{
id: "2",
title: "What payment methods do you accept?",
content: "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and Apple Pay. Your payment is secure and encrypted.",
},
{
id: "3",
title: "What is your refund policy?",
content: "We offer a 100% satisfaction guarantee. If you're not happy with your first order, contact us within 7 days for a full refund, no questions asked.",
},
{
id: "4",
title: "How quickly will I see results?",
content: "Most customers report noticeable changes within 2-3 weeks. Results vary based on your current fitness level, diet adherence, and individual metabolism. Our nutrition team can help track your progress.",
},
{
id: "5",
title: "Do you ship internationally?",
content: "Currently, we deliver to all continental US addresses. International shipping is coming soon! Sign up for our newsletter to be notified when we expand to your region.",
},
{
id: "6",
title: "How can I contact customer support?",
content: "You can reach our support team via email at support@nutriflow.com or call 1-800-NUTRIFLOW. We're available Monday-Friday, 9am-6pm EST. Chat support is available on our website during business hours.",
},
]}
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterCard
logoText="NutriFlow"
@@ -114,24 +144,20 @@ export default function ContactPage() {
socialLinks={[
{
icon: Facebook,
href: "https://facebook.com/nutriflow",
ariaLabel: "Visit our Facebook",
href: "https://facebook.com/nutriflow", ariaLabel: "Visit our Facebook"
},
{
icon: Instagram,
href: "https://instagram.com/nutriflow",
ariaLabel: "Visit our Instagram",
href: "https://instagram.com/nutriflow", ariaLabel: "Visit our Instagram"
},
{
icon: Twitter,
href: "https://twitter.com/nutriflow",
ariaLabel: "Visit our Twitter",
href: "https://twitter.com/nutriflow", ariaLabel: "Visit our Twitter"
},
{
icon: Linkedin,
href: "https://linkedin.com/company/nutriflow",
ariaLabel: "Visit our LinkedIn",
},
href: "https://linkedin.com/company/nutriflow", ariaLabel: "Visit our LinkedIn"
}
]}
/>
</div>

318
src/app/meal-plans/page.tsx
View File

@@ -1,21 +1,20 @@
"use client";
import Link from "next/link";
import { Heart, Zap, Star, TrendingUp, HelpCircle } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplit from "@/components/sections/hero/HeroSplit";
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Facebook, Instagram, Twitter, Linkedin } from "lucide-react";
import { Heart, Zap, Star, TrendingUp, Facebook, Instagram, Twitter, Linkedin } from "lucide-react";
export default function MealPlansPage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "Home", id: "/" },
{ name: "About", id: "about" },
{ name: "Meal Plans", id: "meal-plans" },
{ name: "Contact", id: "contact" },
{ name: "Contact", id: "contact" }
];
return (
@@ -31,195 +30,136 @@ export default function MealPlansPage() {
secondaryButtonStyle="layered"
headingFontWeight="semibold"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="NutriFlow"
navItems={navItems}
brandName="NutriFlow"
button={{
text: "Order Now",
href: "/meal-plans",
text: "Order Now", href: "/meal-plans"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
title="Our Premium Meal Plans"
description="Discover our comprehensive collection of meal plans designed for every health goal. From weight loss to muscle gain, find the perfect plan to transform your lifestyle."
tag="Customized Nutrition"
tagIcon={Heart}
tagAnimation="slide-up"
buttons={[
{
text: "Choose Your Plan", href: "#meal-plans-featured"
},
{
text: "Back Home", href: "/"
}
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-assortment-batch-food-cooked_23-2148765532.jpg?_wi=1"
imageAlt="Assortment of fresh healthy prepared meals"
mediaAnimation="slide-up"
imagePosition="right"
background={{
variant: "radial-gradient"
}}
/>
</div>
{/* Meal Plans Featured Section */}
<div id="meal-plans-featured" data-section="meal-plans-featured">
<div className="mx-auto px-4 md:px-6">
<PricingCardEight
title="Choose Your Meal Plan"
description="Select the plan that fits your health goals. All plans include fresh ingredients, expert nutrition, and flexible scheduling."
tag="Flexible Plans"
tagIcon={Zap}
tagAnimation="slide-up"
plans={[
{
id: "weight-loss",
badge: "Most Popular",
badgeIcon: Star,
price: "$249",
subtitle: "Per Week | 5 Days",
buttons: [
{
text: "Get Started",
href: "/contact",
},
],
features: [
"1,500-1,800 calorie meals",
"5 days of prepared meals",
"Macro-balanced recipes",
"Free nutrition coaching",
"Flexible pause/resume",
"Free delivery",
],
},
{
id: "balanced",
badge: "Best Value",
badgeIcon: TrendingUp,
price: "$189",
subtitle: "Per Week | 3 Days",
buttons: [
{
text: "Get Started",
href: "/contact",
},
],
features: [
"2,000-2,200 calorie meals",
"3 days of prepared meals",
"Balanced nutrition",
"Email support included",
"Flexible pause/resume",
"Free delivery",
],
},
{
id: "muscle-gain",
badge: "For Fitness",
badgeIcon: Zap,
price: "$299",
subtitle: "Per Week | 5 Days",
buttons: [
{
text: "Get Started",
href: "/contact",
},
],
features: [
"2,800-3,200 calorie meals",
"5 days of prepared meals",
"High-protein recipes",
"Workout nutrition guide",
"Flexible pause/resume",
"Free delivery",
],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<PricingCardEight
title="Meal Plan Showcase"
description="Select the plan that fits your health goals. All plans include fresh ingredients, expert nutrition, and flexible scheduling. Start your transformation today."
tag="Featured Plans"
tagIcon={Zap}
tagAnimation="slide-up"
plans={[
{
id: "weight-loss", badge: "Most Popular", badgeIcon: Star,
price: "$249", subtitle: "Per Week | 5 Days", buttons: [
{
text: "Get Started", href: "/"
}
],
features: [
"1,500-1,800 calorie meals", "5 days of prepared meals", "Macro-balanced recipes", "Free nutrition coaching", "Flexible pause/resume", "Free delivery"
]
},
{
id: "balanced", badge: "Best Value", badgeIcon: TrendingUp,
price: "$189", subtitle: "Per Week | 3 Days", buttons: [
{
text: "Get Started", href: "/"
}
],
features: [
"2,000-2,200 calorie meals", "3 days of prepared meals", "Balanced nutrition", "Email support included", "Flexible pause/resume", "Free delivery"
]
},
{
id: "muscle-gain", badge: "For Fitness", badgeIcon: Zap,
price: "$299", subtitle: "Per Week | 5 Days", buttons: [
{
text: "Get Started", href: "/"
}
],
features: [
"2,800-3,200 calorie meals", "5 days of prepared meals", "High-protein recipes", "Workout nutrition guide", "Flexible pause/resume", "Free delivery"
]
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
{/* Benefits Section */}
<div id="benefits" data-section="benefits">
<div className="mx-auto px-4 md:px-6">
<FeatureCardThree
title="Why Our Meal Plans Work"
description="Experience the benefits of personalized nutrition designed to fit your lifestyle and goals."
tag="Key Benefits"
tagIcon={Heart}
tagAnimation="slide-up"
features={[
{
id: "weight-loss",
title: "Sustainable Weight Loss",
description: "Scientifically-designed plans that promote healthy, lasting weight loss without the hassle of calorie counting.",
imageSrc: "http://img.b2bpic.net/free-photo/various-healthy-food-with-measuring-tape-dumbbell-wooden-backdrop_23-2147882250.jpg?_wi=2",
imageAlt: "woman measuring weight scale fitness success",
},
{
id: "convenience",
title: "Ultimate Convenience",
description: "Pre-portioned, ready-to-heat meals save you hours on meal prep and planning each week.",
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-assortment-batch-food-cooked_23-2148765532.jpg?_wi=3",
imageAlt: "meal prep boxes convenience time saving",
},
{
id: "nutrition",
title: "Expert Nutrition",
description: "All meals crafted by certified nutritionists to ensure optimal macro and micronutrient balance.",
imageSrc: "http://img.b2bpic.net/free-photo/adult-man-woman-working-together_23-2148461552.jpg?_wi=3",
imageAlt: "nutritionist dietitian healthy meal planning",
},
{
id: "taste",
title: "Restaurant-Quality Taste",
description: "Delicious, chef-prepared meals that don't taste like diet food. Health and flavor in every bite.",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-delicious-meat-balls-fish-rolls-catered-rectangular-balls-with-sticks-snacks-variety-food-birthday-corporate-party-wedding-celebration_132075-13040.jpg?_wi=2",
imageAlt: "delicious gourmet healthy meal plated",
},
]}
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
title="Customer Success Stories"
description="Join thousands who have transformed their health with our meal plans. Real results from real customers who chose NutriFlow."
tag="Customer Testimonials"
tagIcon={Heart}
tagAnimation="slide-up"
testimonials={[
{
id: "1", title: "Lost 15 Pounds in 8 Weeks", quote: "The meals are absolutely delicious, and I didn't feel like I was dieting. The convenience saved me so much time, and the weight just came off naturally.", name: "Sarah Johnson", role: "Marketing Manager", imageSrc: "http://img.b2bpic.net/free-photo/happy-blonde-girl-is-raising-up-her-fisst-blue-background_176474-119362.jpg?_wi=1", imageAlt: "happy woman professional portrait headshot"
},
{
id: "2", title: "Finally Sustainable Eating", quote: "I've tried every diet out there. NutriFlow is different because the food actually tastes amazing. This is something I can stick with long-term.", name: "Michael Chen", role: "Business Owner", imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg?_wi=1", imageAlt: "professional man portrait headshot confident"
},
{
id: "3", title: "Perfect for My Fitness Goals", quote: "As someone who works out 5 days a week, having perfectly portioned meals that support my gains is a game-changer. My energy levels are through the roof.", name: "Emily Rodriguez", role: "Fitness Coach", imageSrc: "http://img.b2bpic.net/free-photo/it-was-that-easy-photo-gorgeous-blonde-woman-gym-her-weekend-time_146671-16565.jpg?_wi=1", imageAlt: "fitness trainer woman portrait professional"
},
{
id: "4", title: "Better Health, Better Life", quote: "The nutritionist support and meal quality have completely changed how I approach food. I feel healthier and more energized than ever before.", name: "David Kim", role: "Consultant", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-elegant-businessman-standing-office-building_1098-19247.jpg", imageAlt: "professional man consultant portrait photo"
},
{
id: "5", title: "Family Approved", quote: "My whole family loves the meals. Finally found a service that doesn't sacrifice taste for health. We're all seeing great results.", name: "Jessica Thompson", role: "Teacher", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-with-curly-hair-posing-with-copy-space_23-2148728583.jpg", imageAlt: "happy teacher woman portrait professional"
},
{
id: "6", title: "Exceeded Expectations", quote: "From ordering to delivery to the quality of the food—everything has been exceptional. This is the best investment I've made in my health.", name: "Robert Wilson", role: "Software Engineer", imageSrc: "http://img.b2bpic.net/free-photo/inspiring-new-boss_1098-93.jpg", imageAlt: "professional engineer man portrait tech"
}
]}
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
{/* FAQ Section */}
<div id="faq" data-section="faq">
<div className="mx-auto px-4 md:px-6">
<FaqDouble
title="Frequently Asked Questions"
description="Everything you need to know about NutriFlow and our meal plans."
tag="Got Questions?"
tagIcon={HelpCircle}
tagAnimation="slide-up"
faqs={[
{
id: "1",
title: "How are the meals delivered?",
content: "Meals are delivered fresh to your door every Monday in insulated packaging with ice packs. Delivery is included in all our plans, and we offer flexible scheduling to fit your needs.",
},
{
id: "2",
title: "Can I customize meals for dietary restrictions?",
content: "Yes! We offer customization for gluten-free, dairy-free, vegetarian, vegan, and keto diets. Just let us know your preferences when you order.",
},
{
id: "3",
title: "How long do the meals stay fresh?",
content: "Our meals are designed to stay fresh for 5 days in the refrigerator. They're also freezer-friendly if you need to store them longer.",
},
{
id: "4",
title: "Can I pause or cancel anytime?",
content: "Absolutely! There's no long-term commitment. You can pause, skip weeks, or cancel anytime with no penalties.",
},
{
id: "5",
title: "Do you offer customer support?",
content: "Yes! All plans include support from our nutrition team. We're available via email and phone to answer questions and adjust your meal plan as needed.",
},
{
id: "6",
title: "What if I have a food allergy?",
content: "We take allergies seriously. Please inform us of all allergies during signup, and our team will customize your meals accordingly. We maintain allergen-free preparation protocols.",
},
]}
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="cta" data-section="cta">
<ContactCenter
tag="Ready to Start?"
title="Choose Your Perfect Meal Plan"
description="Join thousands of satisfied customers who have transformed their lives with NutriFlow. Sign up now to get your first week at 20% off."
background={{
variant: "radial-gradient"
}}
useInvertedBackground={false}
inputPlaceholder="Enter your email address"
buttonText="Get Started"
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterCard
logoText="NutriFlow"
@@ -227,27 +167,23 @@ export default function MealPlansPage() {
socialLinks={[
{
icon: Facebook,
href: "https://facebook.com/nutriflow",
ariaLabel: "Visit our Facebook",
href: "https://facebook.com/nutriflow", ariaLabel: "Visit our Facebook"
},
{
icon: Instagram,
href: "https://instagram.com/nutriflow",
ariaLabel: "Visit our Instagram",
href: "https://instagram.com/nutriflow", ariaLabel: "Visit our Instagram"
},
{
icon: Twitter,
href: "https://twitter.com/nutriflow",
ariaLabel: "Visit our Twitter",
href: "https://twitter.com/nutriflow", ariaLabel: "Visit our Twitter"
},
{
icon: Linkedin,
href: "https://linkedin.com/company/nutriflow",
ariaLabel: "Visit our LinkedIn",
},
href: "https://linkedin.com/company/nutriflow", ariaLabel: "Visit our LinkedIn"
}
]}
/>
</div>
</ThemeProvider>
);
}
}

202
src/app/page.tsx
View File

@@ -16,10 +16,10 @@ import { Heart, Leaf, Sparkles, Zap, Star, TrendingUp, HelpCircle, Facebook, Ins
export default function HomePage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "About", id: "about" },
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Meal Plans", id: "meal-plans" },
{ name: "Contact", id: "contact" }
{ name: "Contact", id: "/contact" }
];
return (
@@ -40,8 +40,7 @@ export default function HomePage() {
navItems={navItems}
brandName="NutriFlow"
button={{
text: "Order Now",
href: "/meal-plans"
text: "Order Now", href: "/meal-plans"
}}
/>
</div>
@@ -55,12 +54,10 @@ export default function HomePage() {
tagAnimation="slide-up"
buttons={[
{
text: "View Meal Plans",
href: "/meal-plans"
text: "View Meal Plans", href: "/meal-plans"
},
{
text: "Learn More",
href: "/about"
text: "Learn More", href: "/about"
}
]}
buttonAnimation="slide-up"
@@ -82,8 +79,7 @@ export default function HomePage() {
title="Founded on a passion for health and wellness, NutriFlow combines nutritional science with culinary excellence. Our mission is simple: make healthy eating convenient, affordable, and delicious for everyone."
buttons={[
{
text: "Meet Our Team",
href: "/about"
text: "Meet Our Team", href: "/about"
}
]}
buttonAnimation="slide-up"
@@ -100,32 +96,16 @@ export default function HomePage() {
tagAnimation="slide-up"
features={[
{
id: "weight-loss",
title: "Sustainable Weight Loss",
description: "Scientifically-designed plans that promote healthy, lasting weight loss without the hassle of calorie counting.",
imageSrc: "http://img.b2bpic.net/free-photo/various-healthy-food-with-measuring-tape-dumbbell-wooden-backdrop_23-2147882250.jpg?_wi=1",
imageAlt: "woman measuring weight scale fitness success"
id: "weight-loss", title: "Sustainable Weight Loss", description: "Scientifically-designed plans that promote healthy, lasting weight loss without the hassle of calorie counting.", imageSrc: "http://img.b2bpic.net/free-photo/various-healthy-food-with-measuring-tape-dumbbell-wooden-backdrop_23-2147882250.jpg?_wi=1", imageAlt: "woman measuring weight scale fitness success"
},
{
id: "convenience",
title: "Ultimate Convenience",
description: "Pre-portioned, ready-to-heat meals save you hours on meal prep and planning each week.",
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-assortment-batch-food-cooked_23-2148765532.jpg?_wi=1",
imageAlt: "meal prep boxes convenience time saving"
id: "convenience", title: "Ultimate Convenience", description: "Pre-portioned, ready-to-heat meals save you hours on meal prep and planning each week.", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-assortment-batch-food-cooked_23-2148765532.jpg?_wi=1", imageAlt: "meal prep boxes convenience time saving"
},
{
id: "nutrition",
title: "Expert Nutrition",
description: "All meals crafted by certified nutritionists to ensure optimal macro and micronutrient balance.",
imageSrc: "http://img.b2bpic.net/free-photo/adult-man-woman-working-together_23-2148461552.jpg?_wi=1",
imageAlt: "nutritionist dietitian healthy meal planning"
id: "nutrition", title: "Expert Nutrition", description: "All meals crafted by certified nutritionists to ensure optimal macro and micronutrient balance.", imageSrc: "http://img.b2bpic.net/free-photo/adult-man-woman-working-together_23-2148461552.jpg?_wi=1", imageAlt: "nutritionist dietitian healthy meal planning"
},
{
id: "taste",
title: "Restaurant-Quality Taste",
description: "Delicious, chef-prepared meals that don't taste like diet food. Health and flavor in every bite.",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-delicious-meat-balls-fish-rolls-catered-rectangular-balls-with-sticks-snacks-variety-food-birthday-corporate-party-wedding-celebration_132075-13040.jpg?_wi=1",
imageAlt: "delicious gourmet healthy meal plated"
id: "taste", title: "Restaurant-Quality Taste", description: "Delicious, chef-prepared meals that don't taste like diet food. Health and flavor in every bite.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-delicious-meat-balls-fish-rolls-catered-rectangular-balls-with-sticks-snacks-variety-food-birthday-corporate-party-wedding-celebration_132075-13040.jpg?_wi=1", imageAlt: "delicious gourmet healthy meal plated"
}
]}
gridVariant="four-items-2x2-equal-grid"
@@ -144,66 +124,36 @@ export default function HomePage() {
tagAnimation="slide-up"
plans={[
{
id: "weight-loss",
badge: "Most Popular",
badgeIcon: Star,
price: "$249",
subtitle: "Per Week | 5 Days",
buttons={[
id: "weight-loss", badge: "Most Popular", badgeIcon: Star,
price: "$249", subtitle: "Per Week | 5 Days", buttons: [
{
text: "Get Started",
href: "/meal-plans"
text: "Get Started", href: "/meal-plans"
}
]},
],
features: [
"1,500-1,800 calorie meals",
"5 days of prepared meals",
"Macro-balanced recipes",
"Free nutrition coaching",
"Flexible pause/resume",
"Free delivery"
"1,500-1,800 calorie meals", "5 days of prepared meals", "Macro-balanced recipes", "Free nutrition coaching", "Flexible pause/resume", "Free delivery"
]
},
{
id: "balanced",
badge: "Best Value",
badgeIcon: TrendingUp,
price: "$189",
subtitle: "Per Week | 3 Days",
buttons={[
id: "balanced", badge: "Best Value", badgeIcon: TrendingUp,
price: "$189", subtitle: "Per Week | 3 Days", buttons: [
{
text: "Get Started",
href: "/meal-plans"
text: "Get Started", href: "/meal-plans"
}
]},
],
features: [
"2,000-2,200 calorie meals",
"3 days of prepared meals",
"Balanced nutrition",
"Email support included",
"Flexible pause/resume",
"Free delivery"
"2,000-2,200 calorie meals", "3 days of prepared meals", "Balanced nutrition", "Email support included", "Flexible pause/resume", "Free delivery"
]
},
{
id: "muscle-gain",
badge: "For Fitness",
badgeIcon: Zap,
price: "$299",
subtitle: "Per Week | 5 Days",
buttons={[
id: "muscle-gain", badge: "For Fitness", badgeIcon: Zap,
price: "$299", subtitle: "Per Week | 5 Days", buttons: [
{
text: "Get Started",
href: "/meal-plans"
text: "Get Started", href: "/meal-plans"
}
]},
],
features: [
"2,800-3,200 calorie meals",
"5 days of prepared meals",
"High-protein recipes",
"Workout nutrition guide",
"Flexible pause/resume",
"Free delivery"
"2,800-3,200 calorie meals", "5 days of prepared meals", "High-protein recipes", "Workout nutrition guide", "Flexible pause/resume", "Free delivery"
]
}
]}
@@ -222,58 +172,22 @@ export default function HomePage() {
tagAnimation="slide-up"
testimonials={[
{
id: "1",
title: "Lost 15 Pounds in 8 Weeks",
quote: "The meals are absolutely delicious, and I didn't feel like I was dieting. The convenience saved me so much time, and the weight just came off naturally.",
name: "Sarah Johnson",
role: "Marketing Manager",
imageSrc: "http://img.b2bpic.net/free-photo/happy-blonde-girl-is-raising-up-her-fisst-blue-background_176474-119362.jpg?_wi=1",
imageAlt: "happy woman professional portrait headshot"
id: "1", title: "Lost 15 Pounds in 8 Weeks", quote: "The meals are absolutely delicious, and I didn't feel like I was dieting. The convenience saved me so much time, and the weight just came off naturally.", name: "Sarah Johnson", role: "Marketing Manager", imageSrc: "http://img.b2bpic.net/free-photo/happy-blonde-girl-is-raising-up-her-fisst-blue-background_176474-119362.jpg?_wi=1", imageAlt: "happy woman professional portrait headshot"
},
{
id: "2",
title: "Finally Sustainable Eating",
quote: "I've tried every diet out there. NutriFlow is different because the food actually tastes amazing. This is something I can stick with long-term.",
name: "Michael Chen",
role: "Business Owner",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg?_wi=1",
imageAlt: "professional man portrait headshot confident"
id: "2", title: "Finally Sustainable Eating", quote: "I've tried every diet out there. NutriFlow is different because the food actually tastes amazing. This is something I can stick with long-term.", name: "Michael Chen", role: "Business Owner", imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg?_wi=1", imageAlt: "professional man portrait headshot confident"
},
{
id: "3",
title: "Perfect for My Fitness Goals",
quote: "As someone who works out 5 days a week, having perfectly portioned meals that support my gains is a game-changer. My energy levels are through the roof.",
name: "Emily Rodriguez",
role: "Fitness Coach",
imageSrc: "http://img.b2bpic.net/free-photo/it-was-that-easy-photo-gorgeous-blonde-woman-gym-her-weekend-time_146671-16565.jpg?_wi=1",
imageAlt: "fitness trainer woman portrait professional"
id: "3", title: "Perfect for My Fitness Goals", quote: "As someone who works out 5 days a week, having perfectly portioned meals that support my gains is a game-changer. My energy levels are through the roof.", name: "Emily Rodriguez", role: "Fitness Coach", imageSrc: "http://img.b2bpic.net/free-photo/it-was-that-easy-photo-gorgeous-blonde-woman-gym-her-weekend-time_146671-16565.jpg?_wi=1", imageAlt: "fitness trainer woman portrait professional"
},
{
id: "4",
title: "Better Health, Better Life",
quote: "The nutritionist support and meal quality have completely changed how I approach food. I feel healthier and more energized than ever before.",
name: "David Kim",
role: "Consultant",
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-elegant-businessman-standing-office-building_1098-19247.jpg",
imageAlt: "professional man consultant portrait photo"
id: "4", title: "Better Health, Better Life", quote: "The nutritionist support and meal quality have completely changed how I approach food. I feel healthier and more energized than ever before.", name: "David Kim", role: "Consultant", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-elegant-businessman-standing-office-building_1098-19247.jpg", imageAlt: "professional man consultant portrait photo"
},
{
id: "5",
title: "Family Approved",
quote: "My whole family loves the meals. Finally found a service that doesn't sacrifice taste for health. We're all seeing great results.",
name: "Jessica Thompson",
role: "Teacher",
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-with-curly-hair-posing-with-copy-space_23-2148728583.jpg",
imageAlt: "happy teacher woman portrait professional"
id: "5", title: "Family Approved", quote: "My whole family loves the meals. Finally found a service that doesn't sacrifice taste for health. We're all seeing great results.", name: "Jessica Thompson", role: "Teacher", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-with-curly-hair-posing-with-copy-space_23-2148728583.jpg", imageAlt: "happy teacher woman portrait professional"
},
{
id: "6",
title: "Exceeded Expectations",
quote: "From ordering to delivery to the quality of the food—everything has been exceptional. This is the best investment I've made in my health.",
name: "Robert Wilson",
role: "Software Engineer",
imageSrc: "http://img.b2bpic.net/free-photo/inspiring-new-boss_1098-93.jpg",
imageAlt: "professional engineer man portrait tech"
id: "6", title: "Exceeded Expectations", quote: "From ordering to delivery to the quality of the food—everything has been exceptional. This is the best investment I've made in my health.", name: "Robert Wilson", role: "Software Engineer", imageSrc: "http://img.b2bpic.net/free-photo/inspiring-new-boss_1098-93.jpg", imageAlt: "professional engineer man portrait tech"
}
]}
textboxLayout="default"
@@ -288,24 +202,16 @@ export default function HomePage() {
tagAnimation="slide-up"
metrics={[
{
id: "customers",
value: "10,000+",
description: "Happy Customers Transformed"
id: "customers", value: "10,000+", description: "Happy Customers Transformed"
},
{
id: "meals",
value: "500K+",
description: "Healthy Meals Delivered"
id: "meals", value: "500K+", description: "Healthy Meals Delivered"
},
{
id: "satisfaction",
value: "98%",
description: "Customer Satisfaction Rate"
id: "satisfaction", value: "98%", description: "Customer Satisfaction Rate"
},
{
id: "avg-loss",
value: "12 lbs",
description: "Average Weight Loss in 8 Weeks"
id: "avg-loss", value: "12 lbs", description: "Average Weight Loss in 8 Weeks"
}
]}
metricsAnimation="slide-up"
@@ -322,34 +228,22 @@ export default function HomePage() {
tagAnimation="slide-up"
faqs={[
{
id: "1",
title: "How are the meals delivered?",
content: "Meals are delivered fresh to your door every Monday in insulated packaging with ice packs. Delivery is included in all our plans, and we offer flexible scheduling to fit your needs."
id: "1", title: "How are the meals delivered?", content: "Meals are delivered fresh to your door every Monday in insulated packaging with ice packs. Delivery is included in all our plans, and we offer flexible scheduling to fit your needs."
},
{
id: "2",
title: "Can I customize meals for dietary restrictions?",
content: "Yes! We offer customization for gluten-free, dairy-free, vegetarian, vegan, and keto diets. Just let us know your preferences when you order."
id: "2", title: "Can I customize meals for dietary restrictions?", content: "Yes! We offer customization for gluten-free, dairy-free, vegetarian, vegan, and keto diets. Just let us know your preferences when you order."
},
{
id: "3",
title: "How long do the meals stay fresh?",
content: "Our meals are designed to stay fresh for 5 days in the refrigerator. They're also freezer-friendly if you need to store them longer."
id: "3", title: "How long do the meals stay fresh?", content: "Our meals are designed to stay fresh for 5 days in the refrigerator. They're also freezer-friendly if you need to store them longer."
},
{
id: "4",
title: "Can I pause or cancel anytime?",
content: "Absolutely! There's no long-term commitment. You can pause, skip weeks, or cancel anytime with no penalties."
id: "4", title: "Can I pause or cancel anytime?", content: "Absolutely! There's no long-term commitment. You can pause, skip weeks, or cancel anytime with no penalties."
},
{
id: "5",
title: "Do you offer customer support?",
content: "Yes! All plans include support from our nutrition team. We're available via email and phone to answer questions and adjust your meal plan as needed."
id: "5", title: "Do you offer customer support?", content: "Yes! All plans include support from our nutrition team. We're available via email and phone to answer questions and adjust your meal plan as needed."
},
{
id: "6",
title: "What if I have a food allergy?",
content: "We take allergies seriously. Please inform us of all allergies during signup, and our team will customize your meals accordingly. We maintain allergen-free preparation protocols."
id: "6", title: "What if I have a food allergy?", content: "We take allergies seriously. Please inform us of all allergies during signup, and our team will customize your meals accordingly. We maintain allergen-free preparation protocols."
}
]}
faqsAnimation="slide-up"
@@ -379,23 +273,19 @@ export default function HomePage() {
socialLinks={[
{
icon: Facebook,
href: "https://facebook.com/nutriflow",
ariaLabel: "Visit our Facebook"
href: "https://facebook.com/nutriflow", ariaLabel: "Visit our Facebook"
},
{
icon: Instagram,
href: "https://instagram.com/nutriflow",
ariaLabel: "Visit our Instagram"
href: "https://instagram.com/nutriflow", ariaLabel: "Visit our Instagram"
},
{
icon: Twitter,
href: "https://twitter.com/nutriflow",
ariaLabel: "Visit our Twitter"
href: "https://twitter.com/nutriflow", ariaLabel: "Visit our Twitter"
},
{
icon: Linkedin,
href: "https://linkedin.com/company/nutriflow",
ariaLabel: "Visit our LinkedIn"
href: "https://linkedin.com/company/nutriflow", ariaLabel: "Visit our LinkedIn"
}
]}
/>

10
src/app/styles/variables.css
View File

@@ -11,14 +11,14 @@
--background-accent: #ffffff; */
--background: #ffffff;
--card: #f9f9f9;
--foreground: #000f06e6;
--card: #f0f9f6;
--foreground: #003d2e;
--primary-cta: #0a7039;
--primary-cta-text: #ffffff;
--secondary-cta: #f9f9f9;
--secondary-cta: #e8f5f1;
--secondary-cta-text: #000f06e6;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
--accent: #52b788;
--background-accent: #b7e4c7;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);