78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import { getProducts } from "@/lib/woocommerce";
|
|
import Header from "@/components/layout/Header";
|
|
import Footer from "@/components/layout/Footer";
|
|
import AnnouncementBar from "@/components/home/AnnouncementBar";
|
|
import NewHero from "@/components/home/NewHero";
|
|
import StatsSection from "@/components/home/StatsSection";
|
|
import FeaturesSection from "@/components/home/FeaturesSection";
|
|
import TestimonialsSection from "@/components/home/TestimonialsSection";
|
|
import NewsletterSection from "@/components/home/NewsletterSection";
|
|
|
|
export const metadata = {
|
|
title: "ManoonOils - Premium Natural Oils for Hair & Skin",
|
|
description:
|
|
"Discover our premium collection of natural oils for hair and skin care. Handmade with love using only the finest ingredients.",
|
|
};
|
|
|
|
export default async function Homepage() {
|
|
let products: any[] = [];
|
|
try {
|
|
products = await getProducts();
|
|
} catch (e) {
|
|
// Fallback for build time when API is unavailable
|
|
console.log('Failed to fetch products during build');
|
|
}
|
|
const featuredProduct = products.find((p) => p.status === "publish");
|
|
const publishedProducts = products
|
|
.filter((p) => p.status === "publish")
|
|
.slice(0, 4);
|
|
|
|
return (
|
|
<main className="min-h-screen bg-white">
|
|
<AnnouncementBar />
|
|
<div className="pt-10">
|
|
<Header />
|
|
</div>
|
|
|
|
{/* New Hero Section */}
|
|
<NewHero featuredProduct={featuredProduct} />
|
|
|
|
{/* Stats & Philosophy Section */}
|
|
<StatsSection />
|
|
|
|
{/* Features Section */}
|
|
<FeaturesSection />
|
|
|
|
{/* Testimonials Section */}
|
|
<TestimonialsSection />
|
|
|
|
{/* Newsletter Section */}
|
|
<NewsletterSection />
|
|
|
|
{/* Products Grid Section */}
|
|
{publishedProducts.length > 0 && (
|
|
<section className="py-20 px-6 bg-white">
|
|
<div className="max-w-[1400px] mx-auto">
|
|
<h2 className="font-serif italic text-4xl text-center mb-4">
|
|
Our Collection
|
|
</h2>
|
|
<p className="text-center text-[#4A4A4A] mb-12 max-w-2xl mx-auto">
|
|
Cold-pressed, pure, and natural oils for your daily beauty routine
|
|
</p>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{publishedProducts.map((product, index) => (
|
|
<ProductCard key={product.id} product={product} index={index} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|
|
|
|
// Import ProductCard here to avoid circular dependency
|
|
import ProductCard from "@/components/product/ProductCard";
|