Fix: Add root-level routes without locale prefix
This commit is contained in:
64
src/app/page.tsx
Normal file
64
src/app/page.tsx
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
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.",
|
||||||
|
};
|
||||||
|
|
||||||
|
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 />
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{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>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
77
src/app/products/[slug]/page.tsx
Normal file
77
src/app/products/[slug]/page.tsx
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
import { getProducts } from "@/lib/woocommerce";
|
||||||
|
import Header from "@/components/layout/Header";
|
||||||
|
import Footer from "@/components/layout/Footer";
|
||||||
|
|
||||||
|
export async function generateStaticParams() {
|
||||||
|
try {
|
||||||
|
const products = await getProducts();
|
||||||
|
return products.map((product) => ({
|
||||||
|
slug: product.slug || product.id.toString(),
|
||||||
|
}));
|
||||||
|
} catch {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function ProductPage({ params }: { params: Promise<{ slug: string }> }) {
|
||||||
|
const { slug } = await params;
|
||||||
|
let product = null;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const products = await getProducts();
|
||||||
|
product = products.find((p) => (p.slug || p.id.toString()) === slug);
|
||||||
|
} catch (e) {
|
||||||
|
// Fallback
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!product) {
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen">
|
||||||
|
<Header />
|
||||||
|
<div className="pt-24 text-center">
|
||||||
|
<h1 className="text-2xl">Product not found</h1>
|
||||||
|
</div>
|
||||||
|
<Footer />
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const image = product.images?.[0]?.src || '/placeholder.jpg';
|
||||||
|
const price = product.sale_price || product.price;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<section className="pt-24 pb-20 px-4">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||||
|
<div className="relative aspect-[4/5] bg-background-ice overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
alt={product.name}
|
||||||
|
className="object-cover w-full h-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<h1 className="text-4xl font-serif mb-4">{product.name}</h1>
|
||||||
|
|
||||||
|
<div className="text-2xl mb-6">{price} RSD</div>
|
||||||
|
|
||||||
|
<div className="prose max-w-none mb-8" dangerouslySetInnerHTML={{ __html: product.description || '' }} />
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="inline-block bg-foreground text-white px-8 py-4 text-lg font-medium text-center hover:bg-opacity-90 transition-all"
|
||||||
|
>
|
||||||
|
Add to Cart
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
38
src/app/products/page.tsx
Normal file
38
src/app/products/page.tsx
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
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: "Products - ManoonOils",
|
||||||
|
description: "Browse our premium natural oils for hair and skin.",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function ProductsPage() {
|
||||||
|
const products = await getProducts();
|
||||||
|
const publishedProducts = products.filter((p) => p.status === "publish");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<section className="pt-24 pb-20 px-4">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
<h1 className="text-4xl font-serif text-center mb-12">All Products</h1>
|
||||||
|
|
||||||
|
{publishedProducts.length > 0 ? (
|
||||||
|
<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>
|
||||||
|
) : (
|
||||||
|
<p className="text-center text-gray-500">No products available.</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user