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

2026-03-04 08:48:13 +00:00
commit cbb49ba64f
51 changed files with 10050 additions and 0 deletions
--- a/src/app/about/page.tsx
+++ b/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>
+  );
+}
--- a/src/app/contact/page.tsx
+++ b/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>
+  );
+}
--- a/src/app/en/about/page.tsx
+++ b/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>
+  );
+}
--- a/src/app/en/contact/page.tsx
+++ b/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>
+  );
+}
--- a/src/app/en/page.tsx
+++ b/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>
+  );
+}
--- a/src/app/en/products/[slug]/page.tsx
+++ b/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>
+  );
+}
--- a/src/app/en/products/page.tsx
+++ b/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>
+  );
+}
--- a/src/app/favicon.ico
+++ b/src/app/favicon.ico
--- a/src/app/globals.css
+++ b/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;
+}
--- a/src/app/layout.tsx
+++ b/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>
+  );
+}
--- a/src/app/page.tsx
+++ b/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>
+  );
+}
--- a/src/app/products/[slug]/page.tsx
+++ b/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>
+  );
+}
--- a/src/app/products/page.tsx
+++ b/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>
+  );
+}
--- a/src/app/robots.ts
+++ b/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,
+  };
+}
--- a/src/app/sitemap.ts
+++ b/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,
+  ];
+}
--- a/src/components/cart/CartDrawer.tsx
+++ b/src/components/cart/CartDrawer.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import Image from "next/image";
+import Link from "next/link";
+import { useCartStore } from "@/stores/cartStore";
+import { formatPrice } from "@/lib/woocommerce";
+
+export default function CartDrawer() {
+  const { items, isOpen, closeCart, removeItem, updateQuantity, getTotal } = useCartStore();
+
+  const total = getTotal();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <motion.div
+            className="fixed inset-0 bg-black/50 z-50"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={closeCart}
+          />
+          <motion.div
+            className="fixed top-0 right-0 bottom-0 w-full max-w-md bg-white z-50 shadow-xl flex flex-col"
+            initial={{ x: "100%" }}
+            animate={{ x: 0 }}
+            exit={{ x: "100%" }}
+            transition={{ type: "tween", duration: 0.3 }}
+          >
+            <div className="flex items-center justify-between p-6 border-b border-border/30">
+              <h2 className="text-xl font-serif">Your Cart</h2>
+              <button
+                onClick={closeCart}
+                className="p-2"
+                aria-label="Close cart"
+              >
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto p-6">
+              {items.length === 0 ? (
+                <div className="text-center py-12">
+                  <p className="text-foreground-muted mb-6">Your cart is empty</p>
+                  <Link
+                    href="/en/products"
+                    onClick={closeCart}
+                    className="inline-block px-6 py-3 bg-foreground text-white"
+                  >
+                    Continue Shopping
+                  </Link>
+                </div>
+              ) : (
+                <div className="space-y-6">
+                  {items.map((item) => (
+                    <div key={item.id} className="flex gap-4">
+                      <div className="w-20 h-20 bg-background-ice relative flex-shrink-0">
+                        {item.image && (
+                          <Image
+                            src={item.image}
+                            alt={item.name}
+                            fill
+                            className="object-cover"
+                          />
+                        )}
+                      </div>
+                      <div className="flex-1">
+                        <h3 className="font-serif text-sm">{item.name}</h3>
+                        <p className="text-foreground-muted text-sm mt-1">
+                          {formatPrice(item.price)}
+                        </p>
+                        <div className="flex items-center gap-3 mt-2">
+                          <button
+                            onClick={() => updateQuantity(item.id, item.quantity - 1)}
+                            className="w-8 h-8 border border-border flex items-center justify-center"
+                          >
+                            -
+                          </button>
+                          <span>{item.quantity}</span>
+                          <button
+                            onClick={() => updateQuantity(item.id, item.quantity + 1)}
+                            className="w-8 h-8 border border-border flex items-center justify-center"
+                          >
+                            +
+                          </button>
+                          <button
+                            onClick={() => removeItem(item.id)}
+                            className="ml-auto text-foreground-muted hover:text-red-500"
+                          >
+                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                            </svg>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {items.length > 0 && (
+              <div className="p-6 border-t border-border/30">
+                <div className="flex items-center justify-between mb-4">
+                  <span className="font-serif">Subtotal</span>
+                  <span className="font-serif text-lg">{formatPrice(total.toString())}</span>
+                </div>
+                <a
+                  href="https://manoonoils.com/checkout"
+                  className="block w-full py-3 bg-foreground text-white text-center font-medium hover:bg-accent-dark transition-colors"
+                >
+                  Checkout
+                </a>
+              </div>
+            )}
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
--- a/src/components/home/BrandStory.tsx
+++ b/src/components/home/BrandStory.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export default function BrandStory() {
+  return (
+    <section className="py-20 px-4 bg-background-ice">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          <motion.div
+            initial={{ opacity: 0, x: -30 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+          >
+            <h2 className="text-4xl md:text-5xl font-serif mb-6">
+              Our Story
+            </h2>
+            <div className="space-y-4 text-foreground-muted leading-relaxed">
+              <p>
+                ManoonOils was born from a passion for natural beauty and the belief 
+                that the best skincare comes from nature itself.
+              </p>
+              <p>
+                Our premium oils are carefully crafted using only the finest natural 
+                ingredients, handpicked for their nourishing and restorative properties.
+              </p>
+              <p>
+                Each product is made with love and attention to detail, ensuring 
+                that you receive the very best for your hair and skin.
+              </p>
+            </div>
+          </motion.div>
+
+          <motion.div
+            className="relative aspect-square bg-gradient-to-br from-accent/20 to-accent-dark/20"
+            initial={{ opacity: 0, x: 30 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
+            <div className="absolute inset-8 border border-foreground/10" />
+            <div className="absolute inset-12 bg-white/50 backdrop-blur-sm flex items-center justify-center">
+              <span className="font-serif text-3xl text-foreground/60">ManoonOils</span>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/home/Hero.tsx
+++ b/src/components/home/Hero.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+
+export default function Hero() {
+  return (
+    <section className="relative h-screen min-h-[600px] flex items-center justify-center overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-b from-background-ice/50 to-background" />
+      
+      <div className="absolute inset-0 opacity-5">
+        <div className="absolute top-20 left-10 w-64 h-64 rounded-full bg-accent blur-3xl" />
+        <div className="absolute bottom-20 right-10 w-96 h-96 rounded-full bg-accent-dark blur-3xl" />
+      </div>
+
+      <div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+        >
+          <span className="inline-block text-sm tracking-[0.3em] text-foreground-muted mb-6">
+            PREMIUM NATURAL OILS
+          </span>
+        </motion.div>
+
+        <motion.h1
+          className="text-5xl md:text-7xl lg:text-8xl font-serif mb-6 leading-tight"
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+        >
+          ManoonOils
+        </motion.h1>
+
+        <motion.p
+          className="text-xl md:text-2xl text-foreground-muted mb-10 font-light"
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.6 }}
+        >
+          For hair and skin care
+        </motion.p>
+
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.8 }}
+        >
+          <Link
+            href="/en/products"
+            className="inline-block px-10 py-4 bg-foreground text-white text-lg tracking-wide hover:bg-accent-dark transition-colors duration-300"
+          >
+            Shop Now
+          </Link>
+        </motion.div>
+      </div>
+
+      <motion.div
+        className="absolute bottom-10 left-1/2 -translate-x-1/2"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 1.2, duration: 0.8 }}
+      >
+        <div className="w-6 h-10 border-2 border-foreground/30 rounded-full flex justify-center pt-2">
+          <motion.div
+            className="w-1 h-2 bg-foreground/50 rounded-full"
+            animate={{ y: [0, 12, 0] }}
+            transition={{ repeat: Infinity, duration: 1.5 }}
+          />
+        </div>
+      </motion.div>
+    </section>
+  );
+}
--- a/src/components/home/Newsletter.tsx
+++ b/src/components/home/Newsletter.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { useState } from "react";
+import { motion } from "framer-motion";
+
+export default function Newsletter() {
+  const [email, setEmail] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitted(true);
+  };
+
+  return (
+    <section className="py-20 px-4 bg-foreground text-white">
+      <div className="max-w-3xl mx-auto text-center">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+        >
+          <h2 className="text-3xl md font-serif mb-:text-4xl4">
+            Stay Updated
+          </h2>
+          <p className="text-white/60 mb-8">
+            Subscribe to receive news about new products and special offers
+          </p>
+        </motion.div>
+
+        {submitted ? (
+          <motion.p
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="text-accent"
+          >
+            Thank you for subscribing!
+          </motion.p>
+        ) : (
+          <motion.form
+            onSubmit={handleSubmit}
+            className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+          >
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+              required
+              className="flex-1 px-6 py-3 bg-white/10 border border-white/20 text-white placeholder:text-white/40 focus:outline-none focus:border-accent"
+            />
+            <button
+              type="submit"
+              className="px-8 py-3 bg-accent hover:bg-accent-dark transition-colors"
+            >
+              Subscribe
+            </button>
+          </motion.form>
+        )}
+      </div>
+    </section>
+  );
+}
--- a/src/components/home/ProductShowcase.tsx
+++ b/src/components/home/ProductShowcase.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { WooProduct } from "@/lib/woocommerce";
+import ProductCard from "@/components/product/ProductCard";
+
+interface ProductShowcaseProps {
+  products: WooProduct[];
+}
+
+export default function ProductShowcase({ products }: ProductShowcaseProps) {
+  if (!products || products.length === 0) return null;
+
+  return (
+    <section className="py-20 px-4">
+      <div className="max-w-7xl mx-auto">
+        <motion.div
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+        >
+          <h2 className="text-4xl md:text-5xl font-serif mb-4">Our Products</h2>
+          <p className="text-foreground-muted max-w-2xl mx-auto">
+            Discover our premium collection of natural oils for hair and skin care
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+          {products.map((product, index) => (
+            <ProductCard key={product.id} product={product} index={index} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/home/Testimonials.tsx
+++ b/src/components/home/Testimonials.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+const testimonials = [
+  {
+    quote: "My hair has never looked better. The Morning Glow oil is a miracle in a bottle!",
+    author: "Ana M.",
+  },
+  {
+    quote: "Finally found products that truly work. My skin feels amazing every day.",
+    author: "Jelena K.",
+  },
+  {
+    quote: "The Anti-age Serum is my go-to. Love the natural ingredients.",
+    author: "Milica P.",
+  },
+];
+
+export default function Testimonials() {
+  return (
+    <section className="py-20 px-4">
+      <div className="max-w-7xl mx-auto">
+        <motion.div
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+        >
+          <h2 className="text-4xl md:text-5xl font-serif mb-4">
+            What Our Customers Say
+          </h2>
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {testimonials.map((testimonial, index) => (
+            <motion.div
+              key={index}
+              className="bg-white p-8 shadow-sm"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: index * 0.1 }}
+            >
+              <svg
+                className="w-8 h-8 text-accent mb-4"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
+              </svg>
+              <p className="font-serif text-lg italic mb-4 text-foreground-muted">
+                {testimonial.quote}
+              </p>
+              <p className="font-medium">— {testimonial.author}</p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/home/TickerBar.tsx
+++ b/src/components/home/TickerBar.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export default function TickerBar() {
+  const items = [
+    "Free shipping on orders over 3000 RSD",
+    "Natural ingredients",
+    "Cruelty-free",
+    "Handmade with love",
+  ];
+
+  return (
+    <div className="bg-foreground text-white py-3 overflow-hidden">
+      <motion.div
+        className="flex whitespace-nowrap"
+        animate={{ x: ["0%", "-50%"] }}
+        transition={{
+          x: {
+            repeat: Infinity,
+            repeatType: "loop",
+            duration: 20,
+            ease: "linear",
+          },
+        }}
+      >
+        {[...items, ...items, ...items, ...items].map((item, index) => (
+          <span key={index} className="mx-8 text-sm tracking-wide">
+            {item}
+          </span>
+        ))}
+      </motion.div>
+    </div>
+  );
+}
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,66 @@
+import Link from "next/link";
+
+export default function Footer() {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="bg-background-ice border-t border-border/30">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          <div className="md:col-span-2">
+            <h3 className="text-2xl font-serif mb-4">ManoonOils</h3>
+            <p className="text-foreground-muted max-w-md">
+              Premium natural oils for hair and skin care. Crafted with love for your daily beauty routine.
+            </p>
+          </div>
+
+          <div>
+            <h4 className="font-serif mb-4">Quick Links</h4>
+            <ul className="space-y-2">
+              <li>
+                <Link href="/en/products" className="text-foreground-muted hover:text-foreground transition-colors">
+                  Products
+                </Link>
+              </li>
+              <li>
+                <Link href="/en/about" className="text-foreground-muted hover:text-foreground transition-colors">
+                  About Us
+                </Link>
+              </li>
+              <li>
+                <Link href="/en/contact" className="text-foreground-muted hover:text-foreground transition-colors">
+                  Contact
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="font-serif mb-4">Customer Service</h4>
+            <ul className="space-y-2">
+              <li>
+                <Link href="/en/contact" className="text-foreground-muted hover:text-foreground transition-colors">
+                  Shipping Info
+                </Link>
+              </li>
+              <li>
+                <Link href="/en/contact" className="text-foreground-muted hover:text-foreground transition-colors">
+                  Returns
+                </Link>
+              </li>
+              <li>
+                <a href="https://manoonoils.com" className="text-foreground-muted hover:text-foreground transition-colors">
+                  WooCommerce Store
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="border-t border-border/30 mt-12 pt-8 text-center text-foreground-muted text-sm">
+          <p>&copy; {currentYear} ManoonOils. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+}
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { motion, AnimatePresence } from "framer-motion";
+import { useCartStore } from "@/stores/cartStore";
+import { formatPrice } from "@/lib/woocommerce";
+import MobileMenu from "./MobileMenu";
+import CartDrawer from "@/components/cart/CartDrawer";
+
+export default function Header() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const { items, toggleCart } = useCartStore();
+  
+  const itemCount = items.reduce((count, item) => count + item.quantity, 0);
+
+  return (
+    <>
+      <header className="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between h-16 md:h-20">
+            <button
+              className="md:hidden p-2"
+              onClick={() => setMobileMenuOpen(true)}
+              aria-label="Open menu"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </button>
+
+            <Link href="/" className="flex-shrink-0">
+              <img 
+                src="/manoon-logo.jpg" 
+                alt="ManoonOils" 
+                className="h-8 w-[124px] md:h-10 md:w-[154px]"
+              />
+            </Link>
+
+            <nav className="hidden md:flex items-center space-x-8">
+              <Link href="/en/products" className="text-foreground hover:text-accent-dark transition-colors">
+                Products
+              </Link>
+              <Link href="/en/about" className="text-foreground hover:text-accent-dark transition-colors">
+                About
+              </Link>
+              <Link href="/en/contact" className="text-foreground hover:text-accent-dark transition-colors">
+                Contact
+              </Link>
+            </nav>
+
+            <button
+              className="p-2 relative"
+              onClick={toggleCart}
+              aria-label="Open cart"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+              </svg>
+              {itemCount > 0 && (
+                <span className="absolute -top-1 -right-1 bg-accent-dark text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">
+                  {itemCount}
+                </span>
+              )}
+            </button>
+          </div>
+        </div>
+      </header>
+
+      <AnimatePresence>
+        {mobileMenuOpen && (
+          <MobileMenu onClose={() => setMobileMenuOpen(false)} />
+        )}
+      </AnimatePresence>
+
+      <CartDrawer />
+    </>
+  );
+}
--- a/src/components/layout/MobileMenu.tsx
+++ b/src/components/layout/MobileMenu.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+
+interface MobileMenuProps {
+  onClose: () => void;
+}
+
+export default function MobileMenu({ onClose }: MobileMenuProps) {
+  const menuItems = [
+    { href: "/en", label: "Home" },
+    { href: "/en/products", label: "Products" },
+    { href: "/en/about", label: "About" },
+    { href: "/en/contact", label: "Contact" },
+  ];
+
+  return (
+    <>
+      <motion.div
+        className="fixed inset-0 bg-black/50 z-50"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        onClick={onClose}
+      />
+      <motion.div
+        className="fixed top-0 left-0 bottom-0 w-80 bg-white z-50 shadow-xl"
+        initial={{ x: "-100%" }}
+        animate={{ x: 0 }}
+        exit={{ x: "-100%" }}
+        transition={{ type: "tween", duration: 0.3 }}
+      >
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-8">
+            <h2 className="text-2xl font-serif">ManoonOils</h2>
+            <button
+              onClick={onClose}
+              className="p-2"
+              aria-label="Close menu"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <nav className="space-y-4">
+            {menuItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className="block text-xl font-serif py-2 border-b border-border/30"
+                onClick={onClose}
+              >
+                {item.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      </motion.div>
+    </>
+  );
+}
--- a/src/components/product/ProductCard.tsx
+++ b/src/components/product/ProductCard.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Image from "next/image";
+import Link from "next/link";
+import { WooProduct, formatPrice, getProductImage } from "@/lib/woocommerce";
+
+interface ProductCardProps {
+  product: WooProduct;
+  index?: number;
+}
+
+export default function ProductCard({ product, index = 0 }: ProductCardProps) {
+  const image = getProductImage(product);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.5, delay: index * 0.1 }}
+    >
+      <Link href={`/products/${product.slug}`} className="group block">
+        <div className="relative aspect-[4/5] bg-background-ice overflow-hidden mb-4">
+          {image && (
+            <Image
+              src={image}
+              alt={product.name}
+              fill
+              className="object-cover transition-transform duration-500 group-hover:scale-105"
+            />
+          )}
+          {product.stock_status === "outofstock" && (
+            <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
+              <span className="text-white font-medium">Out of Stock</span>
+            </div>
+          )}
+        </div>
+        
+        <h3 className="font-serif text-lg mb-1 group-hover:text-accent-dark transition-colors">
+          {product.name}
+        </h3>
+        
+        <p className="text-foreground-muted">
+          {product.price ? formatPrice(product.price) : "Contact for price"}
+        </p>
+      </Link>
+    </motion.div>
+  );
+}
--- a/src/components/product/ProductDetail.tsx
+++ b/src/components/product/ProductDetail.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { WooProduct, formatPrice, getProductImage } from "@/lib/woocommerce";
+import { useCartStore } from "@/stores/cartStore";
+import ProductCard from "@/components/product/ProductCard";
+
+interface ProductDetailProps {
+  product: WooProduct;
+  relatedProducts: WooProduct[];
+}
+
+export default function ProductDetail({ product, relatedProducts }: ProductDetailProps) {
+  const [selectedImage, setSelectedImage] = useState(0);
+  const [quantity, setQuantity] = useState(1);
+  const [activeTab, setActiveTab] = useState<"details" | "ingredients" | "usage">("details");
+  const addItem = useCartStore((state) => state.addItem);
+
+  const images = product.images?.length > 0 
+    ? product.images 
+    : [{ id: 0, src: "/placeholder-product.jpg", alt: product.name }];
+
+  const handleAddToCart = () => {
+    addItem({
+      id: product.id,
+      name: product.name,
+      price: product.price || product.regular_price,
+      quantity,
+      image: images[0]?.src || "",
+      sku: product.sku || "",
+    });
+  };
+
+  const stripHtml = (html: string) => {
+    return html.replace(/<[^>]*>/g, "");
+  };
+
+  return (
+    <>
+      <section className="py-12 md:py-20 px-4">
+        <div className="max-w-7xl mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6 }}
+            >
+              <div className="relative aspect-square bg-background-ice mb-4">
+                {images[selectedImage] && (
+                  <Image
+                    src={images[selectedImage].src}
+                    alt={images[selectedImage].alt || product.name}
+                    fill
+                    className="object-cover"
+                    priority
+                  />
+                )}
+              </div>
+              
+              {images.length > 1 && (
+                <div className="flex gap-2 overflow-x-auto">
+                  {images.map((image, index) => (
+                    <button
+                      key={image.id}
+                      onClick={() => setSelectedImage(index)}
+                      className={`relative w-20 h-20 flex-shrink-0 ${
+                        selectedImage === index ? "ring-2 ring-foreground" : ""
+                      }`}
+                    >
+                      <Image
+                        src={image.src}
+                        alt={image.alt || product.name}
+                        fill
+                        className="object-cover"
+                      />
+                    </button>
+                  ))}
+                </div>
+              )}
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+            >
+              <h1 className="text-3xl md:text-4xl font-serif mb-4">
+                {product.name}
+              </h1>
+              
+              <p className="text-2xl text-foreground-muted mb-6">
+                {product.price ? formatPrice(product.price) : "Contact for price"}
+              </p>
+              
+              <div className="prose prose-sm max-w-none mb-8 text-foreground-muted">
+                <p>{stripHtml(product.short_description || product.description.slice(0, 200))}</p>
+              </div>
+
+              {product.stock_status === "instock" ? (
+                <div className="flex items-center gap-4 mb-8">
+                  <div className="flex items-center border border-border">
+                    <button
+                      onClick={() => setQuantity(Math.max(1, quantity - 1))}
+                      className="px-4 py-3"
+                    >
+                      -
+                    </button>
+                    <span className="px-4 py-3">{quantity}</span>
+                    <button
+                      onClick={() => setQuantity(quantity + 1)}
+                      className="px-4 py-3"
+                    >
+                      +
+                    </button>
+                  </div>
+                  
+                  <button
+                    onClick={handleAddToCart}
+                    className="flex-1 py-3 bg-foreground text-white hover:bg-accent-dark transition-colors"
+                  >
+                    Add to Cart
+                  </button>
+                </div>
+              ) : (
+                <div className="py-3 bg-red-50 text-red-600 text-center mb-8">
+                  Out of Stock
+                </div>
+              )}
+
+              <div className="border-t border-border/30">
+                <div className="flex border-b border-border/30">
+                  {(["details", "ingredients", "usage"] as const).map((tab) => (
+                    <button
+                      key={tab}
+                      onClick={() => setActiveTab(tab)}
+                      className={`flex-1 py-4 font-medium capitalize ${
+                        activeTab === tab
+                          ? "border-b-2 border-foreground"
+                          : "text-foreground-muted"
+                      }`}
+                    >
+                      {tab}
+                    </button>
+                  ))}
+                </div>
+                
+                <div className="py-6 text-foreground-muted">
+                  {activeTab === "details" && (
+                    <p>{stripHtml(product.description)}</p>
+                  )}
+                  {activeTab === "ingredients" && (
+                    <p>Natural ingredients - Contact for detailed information.</p>
+                  )}
+                  {activeTab === "usage" && (
+                    <p>Apply to clean skin or hair. Use daily for best results.</p>
+                  )}
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {relatedProducts.length > 0 && (
+        <section className="py-12 px-4 bg-background-ice">
+          <div className="max-w-7xl mx-auto">
+            <h2 className="text-2xl font-serif text-center mb-8">
+              You May Also Like
+            </h2>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+              {relatedProducts.map((product, index) => (
+                <ProductCard key={product.id} product={product} index={index} />
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+    </>
+  );
+}
--- a/src/components/providers/LocaleProvider.tsx
+++ b/src/components/providers/LocaleProvider.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { NextIntlClientProvider } from "next-intl";
+import { getMessages } from "next-intl/server";
+import { notFound } from "next/navigation";
+
+export default async function LocaleProvider({
+  children,
+  locale,
+}: {
+  children: React.ReactNode;
+  locale: string;
+}) {
+  const locales = ["en", "sr"];
+  if (!locales.includes(locale)) notFound();
+
+  const messages = await getMessages();
+
+  return (
+    <NextIntlClientProvider messages={messages}>
+      {children}
+    </NextIntlClientProvider>
+  );
+}
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -0,0 +1,15 @@
+import { getRequestConfig } from "next-intl/server";
+import { notFound } from "next/navigation";
+
+export const locales = ["en", "sr"] as const;
+export type Locale = (typeof locales)[number];
+
+export default getRequestConfig(async ({ locale }) => {
+  const currentLocale = locale || "sr";
+  if (!locales.includes(currentLocale as Locale)) notFound();
+
+  return {
+    locale: currentLocale,
+    messages: (await import(`./messages/${currentLocale}.json`)).default,
+  };
+});
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -0,0 +1,53 @@
+{
+  "Navigation": {
+    "home": "Home",
+    "products": "Products",
+    "about": "About",
+    "contact": "Contact"
+  },
+  "Home": {
+    "hero": {
+      "title": "Premium Natural Oils",
+      "subtitle": "For hair and skin care"
+    },
+    "ticker": {
+      "text": "Free shipping on orders over 3000 RSD • Natural ingredients • Cruelty-free • Handmade with love"
+    },
+    "products": {
+      "title": "Our Products"
+    },
+    "bestsellers": {
+      "title": "Best Sellers"
+    },
+    "story": {
+      "title": "Our Story",
+      "description": "ManoonOils was born from a passion for natural beauty..."
+    },
+    "newsletter": {
+      "title": "Stay Updated",
+      "placeholder": "Enter your email",
+      "button": "Subscribe"
+    }
+  },
+  "Product": {
+    "addToCart": "Add to Cart",
+    "outOfStock": "Out of Stock",
+    "details": "Details",
+    "ingredients": "Ingredients",
+    "usage": "How to Use",
+    "related": "You May Also Like"
+  },
+  "Cart": {
+    "title": "Your Cart",
+    "empty": "Your cart is empty",
+    "continueShopping": "Continue Shopping",
+    "checkout": "Checkout",
+    "subtotal": "Subtotal",
+    "remove": "Remove"
+  },
+  "Footer": {
+    "quickLinks": "Quick Links",
+    "customerService": "Customer Service",
+    "copyright": "All rights reserved."
+  }
+}
--- a/src/i18n/messages/sr.json
+++ b/src/i18n/messages/sr.json
@@ -0,0 +1,53 @@
+{
+  "Navigation": {
+    "home": "Početna",
+    "products": "Proizvodi",
+    "about": "O nama",
+    "contact": "Kontakt"
+  },
+  "Home": {
+    "hero": {
+      "title": "Premium prirodna ulja",
+      "subtitle": "Za negu kose i kože"
+    },
+    "ticker": {
+      "text": "Besplatna dostava za porudžbine preko 3000 RSD • Prirodni sastojci • Bez okrutnosti • Ručno sa ljubavlju"
+    },
+    "products": {
+      "title": "Naši proizvodi"
+    },
+    "bestsellers": {
+      "title": "Najprodavaniji"
+    },
+    "story": {
+      "title": "Naša priča",
+      "description": "ManoonOils je rođen iz strasti za prirodnu lepotu..."
+    },
+    "newsletter": {
+      "title": "Ostanite u toku",
+      "placeholder": "Unesite vaš email",
+      "button": "Pretplati se"
+    }
+  },
+  "Product": {
+    "addToCart": "Dodaj u korpu",
+    "outOfStock": "Nema na stanju",
+    "details": "Detalji",
+    "ingredients": "Sastojci",
+    "usage": "Način upotrebe",
+    "related": "Takođe će vam se svideti"
+  },
+  "Cart": {
+    "title": "Vaša korpa",
+    "empty": "Vaša korpa je prazna",
+    "continueShopping": "Nastavite kupovinu",
+    "checkout": "Kupovina",
+    "subtotal": "Ukupno",
+    "remove": "Ukloni"
+  },
+  "Footer": {
+    "quickLinks": "Brze veze",
+    "customerService": "Korisnička podrška",
+    "copyright": "Sva prava zadržana."
+  }
+}
--- a/src/i18n/request.tsx
+++ b/src/i18n/request.tsx
@@ -0,0 +1,15 @@
+import { getRequestConfig } from 'next-intl/server';
+import { routing } from './routing';
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  let locale = await requestLocale;
+  
+  if (!locale || !routing.locales.includes(locale as any)) {
+    locale = routing.defaultLocale;
+  }
+  
+  return {
+    locale,
+    messages: (await import(`./messages/${locale}.json`)).default
+  };
+});
--- a/src/i18n/routing.ts
+++ b/src/i18n/routing.ts
@@ -0,0 +1,6 @@
+import { defineRouting } from 'next-intl/routing';
+
+export const routing = defineRouting({
+  locales: ['en', 'sr'],
+  defaultLocale: 'sr'
+});
--- a/src/lib/woocommerce.ts
+++ b/src/lib/woocommerce.ts
@@ -0,0 +1,107 @@
+import WooCommerceRestApi from "@woocommerce/woocommerce-rest-api";
+
+const api = new WooCommerceRestApi({
+  url: process.env.NEXT_PUBLIC_WOOCOMMERCE_URL || "",
+  consumerKey: process.env.NEXT_PUBLIC_WOOCOMMERCE_CONSUMER_KEY || "",
+  consumerSecret: process.env.NEXT_PUBLIC_WOOCOMMERCE_CONSUMER_SECRET || "",
+  version: "wc/v3",
+});
+
+export interface WooProduct {
+  id: number;
+  name: string;
+  slug: string;
+  price: string;
+  regular_price: string;
+  sale_price: string;
+  description: string;
+  short_description: string;
+  status: "publish" | "draft" | "private";
+  stock_status: "instock" | "outofstock";
+  images: { id: number; src: string; alt: string }[];
+  sku: string;
+  categories: { id: number; name: string; slug: string }[];
+  meta_data: { key: string; value: string }[];
+}
+
+export interface WooCategory {
+  id: number;
+  name: string;
+  slug: string;
+  description: string;
+  image: { src: string } | null;
+}
+
+export async function getProducts(perPage = 100): Promise<WooProduct[]> {
+  try {
+    const response = await api.get("products", { per_page: perPage });
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching products:", error);
+    return [];
+  }
+}
+
+export async function getProduct(id: number): Promise<WooProduct | null> {
+  try {
+    const response = await api.get(`products/${id}`);
+    return response.data;
+  } catch (error) {
+    console.error(`Error fetching product ${id}:`, error);
+    return null;
+  }
+}
+
+export async function getProductBySlug(slug: string): Promise<WooProduct | null> {
+  try {
+    const response = await api.get("products", { slug });
+    return response.data[0] || null;
+  } catch (error) {
+    console.error(`Error fetching product by slug ${slug}:`, error);
+    return null;
+  }
+}
+
+export async function getCategories(): Promise<WooCategory[]> {
+  try {
+    const response = await api.get("product-categories", { per_page: 100 });
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching categories:", error);
+    return [];
+  }
+}
+
+export async function getProductsByCategory(
+  categoryId: number
+): Promise<WooProduct[]> {
+  try {
+    const response = await api.get("products", {
+      category: categoryId,
+      per_page: 100,
+    });
+    return response.data;
+  } catch (error) {
+    console.error(`Error fetching products for category ${categoryId}:`, error);
+    return [];
+  }
+}
+
+export function formatPrice(price: string, currency = "RSD"): string {
+  const num = parseFloat(price);
+  if (isNaN(num)) return "0 RSD";
+  return new Intl.NumberFormat("sr-RS", {
+    style: "currency",
+    currency: currency,
+    minimumFractionDigits: 0,
+  }).format(num);
+}
+
+export function getProductImage(product: WooProduct): string {
+  if (product.images && product.images.length > 0) {
+    return product.images[0].src;
+  }
+  return "/placeholder-product.jpg";
+}
+
+export default api;
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -0,0 +1,13 @@
+import createMiddleware from "next-intl/middleware";
+import { defineRouting } from 'next-intl/routing';
+
+const routing = defineRouting({
+  locales: ['en', 'sr'],
+  defaultLocale: 'sr'
+});
+
+export default createMiddleware(routing);
+
+export const config = {
+  matcher: ['/((?!api|_next|_vercel|).*)']
+};
--- a/src/stores/cartStore.ts
+++ b/src/stores/cartStore.ts
@@ -0,0 +1,86 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+export interface CartItem {
+  id: number;
+  name: string;
+  price: string;
+  quantity: number;
+  image: string;
+  sku: string;
+}
+
+interface CartStore {
+  items: CartItem[];
+  isOpen: boolean;
+  addItem: (item: CartItem) => void;
+  removeItem: (id: number) => void;
+  updateQuantity: (id: number, quantity: number) => void;
+  toggleCart: () => void;
+  openCart: () => void;
+  closeCart: () => void;
+  clearCart: () => void;
+  getTotal: () => number;
+  getItemCount: () => number;
+}
+
+export const useCartStore = create<CartStore>()(
+  persist(
+    (set, get) => ({
+      items: [],
+      isOpen: false,
+
+      addItem: (item) => {
+        const items = get().items;
+        const existingItem = items.find((i) => i.id === item.id);
+
+        if (existingItem) {
+          set({
+            items: items.map((i) =>
+              i.id === item.id
+                ? { ...i, quantity: i.quantity + item.quantity }
+                : i
+            ),
+          });
+        } else {
+          set({ items: [...items, item] });
+        }
+        set({ isOpen: true });
+      },
+
+      removeItem: (id) => {
+        set({ items: get().items.filter((i) => i.id !== id) });
+      },
+
+      updateQuantity: (id, quantity) => {
+        if (quantity <= 0) {
+          set({ items: get().items.filter((i) => i.id !== id) });
+        } else {
+          set({
+            items: get().items.map((i) =>
+              i.id === id ? { ...i, quantity } : i
+            ),
+          });
+        }
+      },
+
+      toggleCart: () => set({ isOpen: !get().isOpen }),
+      openCart: () => set({ isOpen: true }),
+      closeCart: () => set({ isOpen: false }),
+      clearCart: () => set({ items: [] }),
+
+      getTotal: () => {
+        return get().items.reduce((total, item) => {
+          return total + parseFloat(item.price) * item.quantity;
+        }, 0);
+      },
+
+      getItemCount: () => {
+        return get().items.reduce((count, item) => count + item.quantity, 0);
+      },
+    }),
+    {
+      name: "manoonoils-cart",
+    }
+  )
+);