Initial commit

src/pages/HomePage.tsx

@@ -0,0 +1,234 @@
+import ContactCta from '@/components/sections/contact/ContactCta';
+import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
+import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
+import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
+import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
+import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
+import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
+import { Award, Globe, Users } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HomePage() {
+  return (
+    <>
+  <div id="hero" data-section="hero">
+    <SectionErrorBoundary name="hero">
+          <HeroBillboardBrand
+      brand="Healthy Living in Every Bite"
+      description="Discover the world's most nutritious recipes, curated for your wellbeing. Join our community of food lovers and transform your health today."
+      primaryButton={{
+        text: "Explore Recipes",
+        href: "#recipes",
+      }}
+      secondaryButton={{
+        text: "Learn More",
+        href: "#benefits",
+      }}
+      imageSrc="http://img.b2bpic.net/free-photo/high-angle-colorful-vegetables-assortment-wooden-background_23-2148655358.jpg"
+    />
+    </SectionErrorBoundary>
+  </div>
+
+  <div id="benefits" data-section="benefits">
+    <SectionErrorBoundary name="benefits">
+          <FeaturesRevealCards
+      tag="Why Us"
+      title="Nutrition Made Simple"
+      description="We believe healthy food shouldn't be complicated. Our recipes are easy to follow and focus on high-impact nutrition."
+      items={[
+        {
+          title: "Scientific Accuracy",
+          description: "Every recipe is reviewed by certified nutritionists to ensure balanced macros.",
+          imageSrc: "http://img.b2bpic.net/free-photo/greek-caesar-salad-with-white-meat-lettuce-cherry-tomatoes-inside-white-plate-wooden-table_114579-3288.jpg",
+        },
+        {
+          title: "Global Flavors",
+          description: "Experience diverse culinary traditions from around the world tailored to health.",
+          imageSrc: "http://img.b2bpic.net/free-photo/cornflakes-morning-healthy-meal_23-2147693599.jpg",
+        },
+        {
+          title: "Easy Prep",
+          description: "Quick, delicious meals designed for busy lifestyles and high energy.",
+          imageSrc: "http://img.b2bpic.net/free-photo/wrap-salad-roll_1339-4153.jpg",
+        },
+      ]}
+    />
+    </SectionErrorBoundary>
+  </div>
+
+  <div id="recipes" data-section="recipes">
+    <SectionErrorBoundary name="recipes">
+          <FeaturesRevealCardsBento
+      tag="Recipe Showcase"
+      title="Healthy Global Favorites"
+      description="From Mediterranean greens to vibrant Asian superfoods, explore recipes that nourish your body."
+      items={[
+        {
+          title: "Quinoa Veggie Bowl",
+          description: "A light and fiber-rich meal from Latin America.",
+          href: "#",
+          imageSrc: "http://img.b2bpic.net/free-photo/fresh-sliced-salad-different-vegetables_169016-2314.jpg",
+        },
+        {
+          title: "Kiwi Green Smoothie",
+          description: "The perfect fresh start to your morning.",
+          href: "#",
+          imageSrc: "http://img.b2bpic.net/free-photo/fruit-salad-blue-bowl-wooden-table_123827-33992.jpg",
+        },
+        {
+          title: "Grilled Salmon Plate",
+          description: "Packed with Omega-3s and fresh garden veggies.",
+          href: "#",
+          imageSrc: "http://img.b2bpic.net/free-photo/grilled-salmon-steak_1339-5877.jpg",
+        },
+        {
+          title: "Berry Superfood Oats",
+          description: "Antioxidant-rich oats for a sustained energy release.",
+          href: "#",
+          imageSrc: "http://img.b2bpic.net/free-photo/breakfast-with-cereals-fruits_23-2148103388.jpg",
+        },
+        {
+          title: "Lentil Stuffed Peppers",
+          description: "A high-protein, plant-based dinner staple.",
+          href: "#",
+          imageSrc: "http://img.b2bpic.net/free-photo/healthy-food-composition-with-colorful-salad_23-2147992899.jpg",
+        },
+        {
+          title: "Zucchini Pesto Pasta",
+          description: "Low-carb goodness with authentic Italian flavor.",
+          href: "#",
+          imageSrc: "http://img.b2bpic.net/free-photo/vegan-lunch-kids-pumpkin-risotto-with-lentils_53876-129284.jpg",
+        },
+        {
+          title: "Healthy Global Fusion",
+          description: "Diverse tastes for every palate.",
+          href: "#",
+          imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-delicious-vegan-salad-bowl_181624-41074.jpg",
+        },
+      ]}
+    />
+    </SectionErrorBoundary>
+  </div>
+
+  <div id="metrics" data-section="metrics">
+    <SectionErrorBoundary name="metrics">
+          <MetricsIconCards
+      tag="The Impact"
+      title="Making Global Wellness Easy"
+      description="Our platform empowers people globally to make better food choices every day."
+      metrics={[
+        {
+          icon: Users,
+          title: "Active Users",
+          value: "1.2M+",
+        },
+        {
+          icon: Award,
+          title: "Curated Recipes",
+          value: "5,000+",
+        },
+        {
+          icon: Globe,
+          title: "Countries Served",
+          value: "150+",
+        },
+      ]}
+    />
+    </SectionErrorBoundary>
+  </div>
+
+  <div id="testimonials" data-section="testimonials">
+    <SectionErrorBoundary name="testimonials">
+          <TestimonialOverlayCards
+      tag="Community Voices"
+      title="What Our Foodies Say"
+      description="Hear from the community about how we've helped change their dietary habits."
+      testimonials={[
+        {
+          name: "Sarah Jenkins",
+          role: "Graphic Designer",
+          company: "Creative Hub",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/sporty-woman-fitting-sport-wear-sunset-sports-ground-stretching-her-neck-before-after-workout_343596-7073.jpg",
+        },
+        {
+          name: "David Thorne",
+          role: "Software Engineer",
+          company: "TechStream",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-sandwiches-with-sliced-tomatoes-healthy-life-writing-grey-background-snack-bun-burger-sandwich-bread_140725-85904.jpg",
+        },
+        {
+          name: "Chloe Wong",
+          role: "College Student",
+          company: "University Life",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-man-sitting-beach_613910-806.jpg",
+        },
+        {
+          name: "Robert Miller",
+          role: "Senior Consultant",
+          company: "Global Firm",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/top-view-healthy-life-written-notebook-red-cabbage-cauliflower-yellow-bell-pepper-green-tomato-bowls-white-wooden-surface_140725-63497.jpg",
+        },
+        {
+          name: "Elise Moore",
+          role: "Fitness Coach",
+          company: "Vitality Gym",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-outdoors-portrait_23-2150828878.jpg",
+        },
+      ]}
+    />
+    </SectionErrorBoundary>
+  </div>
+
+  <div id="faq" data-section="faq">
+    <SectionErrorBoundary name="faq">
+          <FaqTabbedAccordion
+      tag="Help Center"
+      title="Common Recipe Queries"
+      description="Have questions about our nutrition standards or app usage?"
+      categories={[
+        {
+          name: "General",
+          items: [
+            {
+              question: "Are all recipes gluten-free?",
+              answer: "Many are, and we provide clear dietary filters for all recipes.",
+            },
+            {
+              question: "How do you calculate macros?",
+              answer: "We use verified databases to track nutrition based on standard ingredient weight.",
+            },
+            {
+              question: "Can I save my favorites?",
+              answer: "Yes, simply log in to your account and save recipes to your digital cookbook.",
+            },
+          ],
+        },
+      ]}
+    />
+    </SectionErrorBoundary>
+  </div>
+
+  <div id="contact" data-section="contact">
+    <SectionErrorBoundary name="contact">
+          <ContactCta
+      tag="Start Today"
+      text="Ready to revolutionize your kitchen and your health?"
+      primaryButton={{
+        text: "Download NutriChef",
+        href: "#",
+      }}
+      secondaryButton={{
+        text: "Contact Support",
+        href: "#",
+      }}
+    />
+    </SectionErrorBoundary>
+  </div>
+    </>
+  );
+}

src/pages/blog/BlogPage.tsx

@@ -0,0 +1,13 @@
+import BlogSimpleCards from "@/components/sections/blog/BlogSimpleCards";
+
+const BlogPage = () => {
+  return (
+    <BlogSimpleCards
+      tag="Blog"
+      title="Latest Articles"
+      description="Stay updated with our latest insights and news"
+    />
+  );
+};
+
+export default BlogPage;

src/pages/blog/BlogPostPage.tsx

@@ -0,0 +1,50 @@
+import { useParams, useNavigate } from "react-router-dom";
+import { Loader2 } from "lucide-react";
+import BlogArticle from "@/components/sections/blog/BlogArticle";
+import useBlogPost from "@/hooks/useBlogPost";
+
+const BlogPostPage = () => {
+  const { slug } = useParams<{ slug: string }>();
+  const navigate = useNavigate();
+  const { post, isLoading } = useBlogPost(slug || "");
+
+  if (isLoading) {
+    return (
+      <section className="w-content-width mx-auto py-20">
+        <div className="flex justify-center">
+          <Loader2 className="size-8 animate-spin text-foreground" strokeWidth={1.5} />
+        </div>
+      </section>
+    );
+  }
+
+  if (!post || !post.content) {
+    return (
+      <section className="w-content-width mx-auto py-20 text-center">
+        <p className="text-foreground mb-4">Post not found</p>
+        <button onClick={() => navigate("/blog")} className="primary-button px-6 py-2 rounded-theme text-primary-cta-text">
+          Back to Blog
+        </button>
+      </section>
+    );
+  }
+
+  const wordCount = post.content.replace(/<[^>]*>/g, " ").trim().split(/\s+/).length;
+  const readingTime = `${Math.max(1, Math.round(wordCount / 200))} min read`;
+
+  return (
+    <BlogArticle
+      category={post.category}
+      title={post.title}
+      excerpt={post.excerpt}
+      content={post.content}
+      imageSrc={post.imageSrc}
+      authorName={post.authorName}
+      authorImageSrc={post.authorAvatar}
+      date={post.date}
+      readingTime={readingTime}
+    />
+  );
+};
+
+export default BlogPostPage;

src/pages/shop/ProductPage.tsx

@@ -0,0 +1,79 @@
+import { ReactLenis } from "lenis/react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Loader2 } from "lucide-react";
+import ProductDetailCard from "@/components/ecommerce/ProductDetailCard";
+import ProductCart from "@/components/ecommerce/ProductCart";
+import useProductDetail from "@/hooks/useProductDetail";
+import useCart from "@/hooks/useCart";
+import useCheckout from "@/hooks/useCheckout";
+
+const ProductPage = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  const { product, isLoading, images, createCartItem, selectedQuantity } = useProductDetail(id || "");
+  const { items: cartItems, isOpen: cartOpen, setIsOpen: setCartOpen, addItem, updateQuantity, removeItem, total: cartTotal, getCheckoutItems } = useCart();
+  const { buyNow, checkout } = useCheckout();
+
+  if (isLoading) {
+    return (
+      <section className="w-content-width mx-auto py-20">
+        <div className="flex justify-center">
+          <Loader2 className="size-8 animate-spin text-foreground" strokeWidth={1.5} />
+        </div>
+      </section>
+    );
+  }
+
+  if (!product) {
+    return (
+      <section className="w-content-width mx-auto py-20 text-center">
+        <p className="text-foreground mb-4">Product not found</p>
+        <button onClick={() => navigate("/shop")} className="primary-button px-6 py-2 rounded-theme text-primary-cta-text">
+          Back to Shop
+        </button>
+      </section>
+    );
+  }
+
+  const handleAddToCart = () => {
+    const item = createCartItem();
+    if (item) addItem(item);
+  };
+
+  const handleBuyNow = () => {
+    buyNow(product, selectedQuantity);
+  };
+
+  const handleCheckout = async () => {
+    if (cartItems.length === 0) return;
+    const url = new URL(window.location.href);
+    url.searchParams.set("success", "true");
+    await checkout(getCheckoutItems(), { successUrl: url.toString() });
+  };
+
+  return (
+    <ReactLenis root>
+      <ProductDetailCard
+        name={product.name}
+        price={product.price}
+        description={product.description}
+        images={images.map((img) => img.src)}
+        rating={product.rating}
+        onAddToCart={handleAddToCart}
+        onBuyNow={handleBuyNow}
+      />
+      <ProductCart
+        isOpen={cartOpen}
+        onClose={() => setCartOpen(false)}
+        items={cartItems}
+        total={`$${cartTotal}`}
+        onQuantityChange={updateQuantity}
+        onRemove={removeItem}
+        onCheckout={handleCheckout}
+      />
+    </ReactLenis>
+  );
+};
+
+export default ProductPage;

src/pages/shop/ShopPage.tsx

@@ -0,0 +1,31 @@
+import { useNavigate } from "react-router-dom";
+import { Loader2 } from "lucide-react";
+import ProductCatalog from "@/components/ecommerce/ProductCatalog";
+import useProductCatalog from "@/hooks/useProductCatalog";
+
+const ShopPage = () => {
+  const navigate = useNavigate();
+  const { products, isLoading, search, setSearch } = useProductCatalog({
+    onProductClick: (productId) => navigate(`/shop/${productId}`),
+  });
+
+  if (isLoading) {
+    return (
+      <section className="w-content-width mx-auto py-20">
+        <div className="flex justify-center">
+          <Loader2 className="size-8 animate-spin text-foreground" strokeWidth={1.5} />
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <ProductCatalog
+      products={products}
+      searchValue={search}
+      onSearchChange={setSearch}
+    />
+  );
+};
+
+export default ShopPage;