68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
import { getProducts } from "@/lib/woocommerce";
|
|
import Header from "@/components/layout/Header";
|
|
import Footer from "@/components/layout/Footer";
|
|
import ProductCard from "@/components/product/ProductCard";
|
|
|
|
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.",
|
|
};
|
|
|
|
export default async function Homepage() {
|
|
const products = await getProducts();
|
|
const publishedProducts = products.filter((p) => p.status === "publish").slice(0, 4);
|
|
|
|
return (
|
|
<main className="min-h-screen">
|
|
<Header />
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative h-[80vh] flex items-center justify-center bg-gradient-to-b from-white to-background-ice">
|
|
<div className="text-center px-4">
|
|
<h1 className="text-5xl md:text-7xl font-serif mb-6">
|
|
ManoonOils
|
|
</h1>
|
|
<p className="text-xl md:text-2xl text-foreground-muted mb-8">
|
|
Premium Natural Oils for Hair & Skin
|
|
</p>
|
|
<a
|
|
href="/products"
|
|
className="inline-block bg-foreground text-white px-8 py-4 text-lg font-medium hover:bg-opacity-90 transition-all"
|
|
>
|
|
Shop Now
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Products Section */}
|
|
{publishedProducts.length > 0 && (
|
|
<section className="py-20 px-4">
|
|
<div className="max-w-7xl mx-auto">
|
|
<h2 className="text-4xl font-serif text-center mb-12">Our Products</h2>
|
|
<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>
|
|
)}
|
|
|
|
{/* About Teaser */}
|
|
<section className="py-20 px-4 bg-background-ice">
|
|
<div className="max-w-3xl mx-auto text-center">
|
|
<h2 className="text-3xl font-serif mb-6">Natural & Pure</h2>
|
|
<p className="text-lg text-foreground-muted mb-8">
|
|
Our oils are crafted with love using only the finest natural ingredients.
|
|
</p>
|
|
<a href="/about" className="text-foreground border-b border-foreground pb-1">
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|