Working state: Serbian at root (/), English at /en, proper i18n structure

src/app/about/page.tsx

@@ -0,0 +1,66 @@
+import Header from "@/components/layout/Header";
+import Footer from "@/components/layout/Footer";
+
+export const metadata = {
+  title: "About - ManoonOils",
+  description: "Learn about ManoonOils - our story, mission, and commitment to natural beauty.",
+};
+
+export default function AboutPage() {
+  return (
+    <main className="min-h-screen pt-16 md:pt-20">
+      <Header />
+      
+      <section className="py-20 px-4">
+        <div className="max-w-4xl mx-auto">
+          <h1 className="text-4xl md:text-5xl font-serif text-center mb-8">
+            Our Story
+          </h1>
+          
+          <div className="prose prose-lg max-w-none text-foreground-muted space-y-6">
+            <p>
+              ManoonOils was born from a passion for natural beauty and the belief 
+              that the best skincare comes from nature itself. Our journey began with 
+              a simple question: how can we create products that truly nurture both 
+              hair and skin?
+            </p>
+            
+            <p>
+              We believe in the power of natural ingredients. Every oil in our 
+              collection is carefully selected for its unique properties and 
+              benefits. From nourishing oils that restore hair vitality to serums 
+              that rejuvenate skin, we craft each product with love and attention 
+              to detail.
+            </p>
+            
+            <h2 className="font-serif text-2xl text-foreground mt-8 mb-4">
+              Our Mission
+            </h2>
+            <p>
+              Our mission is to provide premium quality, natural products that 
+              enhance your daily beauty routine. We are committed to:
+            </p>
+            <ul className="list-disc pl-6 space-y-2">
+              <li>Using only the finest natural ingredients</li>
+              <li>Cruelty-free and ethical production</li>
+              <li>Sustainable packaging practices</li>
+              <li>Transparency in our formulations</li>
+            </ul>
+            
+            <h2 className="font-serif text-2xl text-foreground mt-8 mb-4">
+              Handmade with Love
+            </h2>
+            <p>
+              Every bottle of ManoonOils is handcrafted with care. We small-batch 
+              produce our products to ensure the highest quality and freshness. 
+              When you use ManoonOils, you can feel confident that you're using 
+              something made with genuine care and expertise.
+            </p>
+          </div>
+        </div>
+      </section>
+      
+      <Footer />
+    </main>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useState } from "react";
+import Header from "@/components/layout/Header";
+import Footer from "@/components/layout/Footer";
+
+export default function ContactPage() {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    message: "",
+  });
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitted(true);
+  };
+
+  return (
+    <main className="min-h-screen pt-16 md:pt-20">
+      <Header />
+      
+      <section className="py-20 px-4">
+        <div className="max-w-2xl mx-auto">
+          <h1 className="text-4xl md:text-5xl font-serif text-center mb-8">
+            Contact Us
+          </h1>
+          
+          <p className="text-foreground-muted text-center mb-12">
+            Have questions? We'd love to hear from you.
+          </p>
+          
+          {submitted ? (
+            <div className="bg-green-50 text-green-700 p-6 text-center">
+              <p className="text-lg">Thank you for your message!</p>
+              <p className="mt-2">We'll get back to you soon.</p>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium mb-2">
+                  Name
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  required
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  className="w-full px-4 py-3 border border-border focus:outline-none focus:border-foreground"
+                />
+              </div>
+              
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-2">
+                  Email
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  required
+                  value={formData.email}
+                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                  className="w-full px-4 py-3 border border-border focus:outline-none focus:border-foreground"
+                />
+              </div>
+              
+              <div>
+                <label htmlFor="message" className="block text-sm font-medium mb-2">
+                  Message
+                </label>
+                <textarea
+                  id="message"
+                  required
+                  rows={5}
+                  value={formData.message}
+                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+                  className="w-full px-4 py-3 border border-border focus:outline-none focus:border-foreground resize-none"
+                />
+              </div>
+              
+              <button
+                type="submit"
+                className="w-full py-3 bg-foreground text-white hover:bg-accent-dark transition-colors"
+              >
+                Send Message
+              </button>
+            </form>
+          )}
+          
+          <div className="mt-16 pt-8 border-t border-border/30">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
+              <div>
+                <h3 className="font-serif mb-2">Email</h3>
+                <p className="text-foreground-muted">hello@manoonoils.com</p>
+              </div>
+              <div>
+                <h3 className="font-serif mb-2">Shipping</h3>
+                <p className="text-foreground-muted">Free over 3000 RSD</p>
+              </div>
+              <div>
+                <h3 className="font-serif mb-2">Location</h3>
+                <p className="text-foreground-muted">Serbia</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      
+      <Footer />
+    </main>
+  );
+}

src/app/en/about/page.tsx

@@ -0,0 +1,66 @@
+import Header from "@/components/layout/Header";
+import Footer from "@/components/layout/Footer";
+
+export const metadata = {
+  title: "About - ManoonOils",
+  description: "Learn about ManoonOils - our story, mission, and commitment to natural beauty.",
+};
+
+export default function AboutPage() {
+  return (
+    <main className="min-h-screen pt-16 md:pt-20">
+      <Header />
+      
+      <section className="py-20 px-4">
+        <div className="max-w-4xl mx-auto">
+          <h1 className="text-4xl md:text-5xl font-serif text-center mb-8">
+            Our Story
+          </h1>
+          
+          <div className="prose prose-lg max-w-none text-foreground-muted space-y-6">
+            <p>
+              ManoonOils was born from a passion for natural beauty and the belief 
+              that the best skincare comes from nature itself. Our journey began with 
+              a simple question: how can we create products that truly nurture both 
+              hair and skin?
+            </p>
+            
+            <p>
+              We believe in the power of natural ingredients. Every oil in our 
+              collection is carefully selected for its unique properties and 
+              benefits. From nourishing oils that restore hair vitality to serums 
+              that rejuvenate skin, we craft each product with love and attention 
+              to detail.
+            </p>
+            
+            <h2 className="font-serif text-2xl text-foreground mt-8 mb-4">
+              Our Mission
+            </h2>
+            <p>
+              Our mission is to provide premium quality, natural products that 
+              enhance your daily beauty routine. We are committed to:
+            </p>
+            <ul className="list-disc pl-6 space-y-2">
+              <li>Using only the finest natural ingredients</li>
+              <li>Cruelty-free and ethical production</li>
+              <li>Sustainable packaging practices</li>
+              <li>Transparency in our formulations</li>
+            </ul>
+            
+            <h2 className="font-serif text-2xl text-foreground mt-8 mb-4">
+              Handmade with Love
+            </h2>
+            <p>
+              Every bottle of ManoonOils is handcrafted with care. We small-batch 
+              produce our products to ensure the highest quality and freshness. 
+              When you use ManoonOils, you can feel confident that you're using 
+              something made with genuine care and expertise.
+            </p>
+          </div>
+        </div>
+      </section>
+      
+      <Footer />
+    </main>
+  );
+}

src/app/en/contact/page.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useState } from "react";
+import Header from "@/components/layout/Header";
+import Footer from "@/components/layout/Footer";
+
+export default function ContactPage() {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    message: "",
+  });
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitted(true);
+  };
+
+  return (
+    <main className="min-h-screen pt-16 md:pt-20">
+      <Header />
+      
+      <section className="py-20 px-4">
+        <div className="max-w-2xl mx-auto">
+          <h1 className="text-4xl md:text-5xl font-serif text-center mb-8">
+            Contact Us
+          </h1>
+          
+          <p className="text-foreground-muted text-center mb-12">
+            Have questions? We'd love to hear from you.
+          </p>
+          
+          {submitted ? (
+            <div className="bg-green-50 text-green-700 p-6 text-center">
+              <p className="text-lg">Thank you for your message!</p>
+              <p className="mt-2">We'll get back to you soon.</p>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium mb-2">
+                  Name
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  required
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  className="w-full px-4 py-3 border border-border focus:outline-none focus:border-foreground"
+                />
+              </div>
+              
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-2">
+                  Email
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  required
+                  value={formData.email}
+                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                  className="w-full px-4 py-3 border border-border focus:outline-none focus:border-foreground"
+                />
+              </div>
+              
+              <div>
+                <label htmlFor="message" className="block text-sm font-medium mb-2">
+                  Message
+                </label>
+                <textarea
+                  id="message"
+                  required
+                  rows={5}
+                  value={formData.message}
+                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+                  className="w-full px-4 py-3 border border-border focus:outline-none focus:border-foreground resize-none"
+                />
+              </div>
+              
+              <button
+                type="submit"
+                className="w-full py-3 bg-foreground text-white hover:bg-accent-dark transition-colors"
+              >
+                Send Message
+              </button>
+            </form>
+          )}
+          
+          <div className="mt-16 pt-8 border-t border-border/30">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
+              <div>
+                <h3 className="font-serif mb-2">Email</h3>
+                <p className="text-foreground-muted">hello@manoonoils.com</p>
+              </div>
+              <div>
+                <h3 className="font-serif mb-2">Shipping</h3>
+                <p className="text-foreground-muted">Free over 3000 RSD</p>
+              </div>
+              <div>
+                <h3 className="font-serif mb-2">Location</h3>
+                <p className="text-foreground-muted">Serbia</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      
+      <Footer />
+    </main>
+  );
+}

src/app/en/page.tsx

@@ -0,0 +1,67 @@
+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>
+  );
+}

src/app/en/products/[slug]/page.tsx

@@ -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>
+  );
+}

src/app/en/products/page.tsx

@@ -0,0 +1,41 @@
+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 collection of premium natural oils for hair and skin care.",
+};
+
+export default async function ProductsPage() {
+  const products = await getProducts();
+  
+  const publishedProducts = products.filter((p) => p.status === "publish");
+
+  return (
+    <main className="min-h-screen pt-16 md:pt-20">
+      <Header />
+      
+      <section className="py-20 px-4">
+        <div className="max-w-7xl mx-auto">
+          <h1 className="text-4xl md:text-5xl font-serif text-center mb-16">
+            All Products
+          </h1>
+          
+          {publishedProducts.length === 0 ? (
+            <p className="text-center text-foreground-muted">No products available</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>
+  );
+}

src/app/globals.css

@@ -0,0 +1,55 @@
+@import "tailwindcss";
+
+:root {
+  --background: #f0f4f8;
+  --background-ice: #e8f0f5;
+  --foreground: #1a1a1a;
+  --foreground-muted: #666666;
+  --accent: #a8c5d8;
+  --accent-dark: #7ba3bc;
+  --white: #ffffff;
+  --border: #d1d9e0;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-background-ice: var(--background-ice);
+  --color-foreground: var(--foreground);
+  --color-foreground-muted: var(--foreground-muted);
+  --color-accent: var(--accent);
+  --color-accent-dark: var(--accent-dark);
+  --color-white: var(--white);
+  --color-border: var(--border);
+  --font-display: var(--font-cedrat);
+  --font-body: var(--font-dm-sans);
+}
+
+@font-face {
+  font-family: 'Cedrat Display';
+  src: url('https://fonts.gstatic.com/s/cedratdisplay/v16/0nkoC9_pK3CvS5lZuZ7MAUmK5w.woff2') format('woff2');
+  font-weight: 400 900;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('https://fonts.gstatic.com/s/dmsans/v15/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAopxhS2f3ZGMZpg.woff2') format('woff2');
+  font-weight: 400 700;
+  font-display: swap;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: 'DM Sans', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Cedrat Display', serif;
+}

src/app/layout.tsx

@@ -0,0 +1,31 @@
+import "./globals.css";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: {
+    default: "ManoonOils - Premium Natural Oils for Hair & Skin",
+    template: "%s | ManoonOils",
+  },
+  description: "Discover our premium collection of natural oils for hair and skin care. Handmade with love.",
+  robots: "index, follow",
+  openGraph: {
+    title: "ManoonOils - Premium Natural Oils for Hair & Skin",
+    description: "Discover our premium collection of natural oils for hair and skin care.",
+    type: "website",
+    locale: "en_US",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className="antialiased">
+        {children}
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,67 @@
+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>
+  );
+}

src/app/products/[slug]/page.tsx

@@ -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>
+  );
+}

src/app/products/page.tsx

@@ -0,0 +1,41 @@
+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 collection of premium natural oils for hair and skin care.",
+};
+
+export default async function ProductsPage() {
+  const products = await getProducts();
+  
+  const publishedProducts = products.filter((p) => p.status === "publish");
+
+  return (
+    <main className="min-h-screen pt-16 md:pt-20">
+      <Header />
+      
+      <section className="py-20 px-4">
+        <div className="max-w-7xl mx-auto">
+          <h1 className="text-4xl md:text-5xl font-serif text-center mb-16">
+            All Products
+          </h1>
+          
+          {publishedProducts.length === 0 ? (
+            <p className="text-center text-foreground-muted">No products available</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>
+  );
+}

src/app/robots.ts

@@ -0,0 +1,16 @@
+import { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://dev.manoonoils.com";
+  
+  return {
+    rules: [
+      {
+        userAgent: "*",
+        allow: "/",
+      },
+    ],
+    sitemap: `${baseUrl}/sitemap.xml`,
+    host: baseUrl,
+  };
+}

src/app/sitemap.ts

@@ -0,0 +1,45 @@
+import { MetadataRoute } from "next";
+import { getProducts } from "@/lib/woocommerce";
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://dev.manoonoils.com";
+  
+  const products = await getProducts();
+  
+  const productUrls = products
+    .filter((p) => p.status === "publish")
+    .map((product) => ({
+      url: `${baseUrl}/products/${product.slug}`,
+      lastModified: new Date(),
+      changeFrequency: "weekly" as const,
+      priority: 0.8,
+    }));
+
+  return [
+    {
+      url: baseUrl,
+      lastModified: new Date(),
+      changeFrequency: "daily",
+      priority: 1,
+    },
+    {
+      url: `${baseUrl}/products`,
+      lastModified: new Date(),
+      changeFrequency: "daily",
+      priority: 0.9,
+    },
+    {
+      url: `${baseUrl}/about`,
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.6,
+    },
+    {
+      url: `${baseUrl}/contact`,
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.6,
+    },
+    ...productUrls,
+  ];
+}