feat: implement locale-aware routing with [locale] dynamic segments

WARNING: This change breaks existing SEO URLs for Serbian locale.

Changes:
- Migrated from separate locale folders (src/app/en/, src/app/de/, etc.)
  to [locale] dynamic segments (src/app/[locale]/)
- Serbian is now at /sr/ instead of / (root)
- English at /en/, German at /de/, French at /fr/
- All components updated to generate locale-aware links
- Root / now redirects to /sr (307 temporary redirect)

SEO Impact:
- Previously indexed Serbian URLs (/, /products, /about, /contact)
  will now return 404 or redirect to /sr/* URLs
- This is a breaking change for SEO - Serbian pages should ideally
  remain at root (/) with only non-default locales getting prefix
- Consider implementing 301 redirects from old URLs to maintain
  search engine rankings

Technical Notes:
- next-intl v4 with [locale] structure requires ALL locales to
  have the prefix (cannot have default locale at root)
- Alternative approach would be separate folder structure per locale

src/app/[locale]/about/page.tsx

@@ -1,20 +1,31 @@
-import { getTranslations } from "next-intl/server";
+import { getTranslations, setRequestLocale } from "next-intl/server";
 import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
 
-export async function generateMetadata() {
+interface AboutPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: AboutPageProps) {
+  const { locale } = await params;
   return {
-    title: "O nama - ManoonOils",
-    description: "Saznajte više o ManoonOils - naša priča, misija i posvećenost prirodnoj lepoti.",
+    title: locale === "sr" 
+      ? "O nama - ManoonOils"
+      : "About - ManoonOils",
+    description: locale === "sr"
+      ? "Saznajte više o ManoonOils - naša priča, misija i posvećenost prirodnoj lepoti."
+      : "Learn more about ManoonOils - our story, mission, and commitment to natural beauty.",
   };
 }
 
-export default async function AboutPage() {
+export default async function AboutPage({ params }: AboutPageProps) {
+  const { locale } = await params;
+  setRequestLocale(locale);
   const t = await getTranslations("About");
 
   return (
     <>
-      <Header />
+      <Header locale={locale} />
       <main className="min-h-screen bg-white">
         <div className="pt-[104px]">
           <div className="container py-12 md:py-16">
@@ -32,7 +43,7 @@ export default async function AboutPage() {
         <div className="relative h-[400px] md:h-[500px] overflow-hidden">
           <img
             src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=2000&auto=format&fit=crop"
-            alt="Proizvodnja prirodnih ulja"
+            alt={locale === "sr" ? "Proizvodnja prirodnih ulja" : "Natural oils production"}
             className="w-full h-full object-cover"
           />
           <div className="absolute inset-0 bg-black/20" />
@@ -110,8 +121,8 @@ export default async function AboutPage() {
         </section>
       </main>
       <div className="pt-16">
-        <Footer />
+        <Footer locale={locale} />
       </div>
     </>
   );
-}
+}

src/app/[locale]/checkout/page.tsx

@@ -0,0 +1,384 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+import { useTranslations, useLocale } from "next-intl";
+import Header from "@/components/layout/Header";
+import Footer from "@/components/layout/Footer";
+import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
+import { formatPrice } from "@/lib/saleor";
+import { saleorClient } from "@/lib/saleor/client";
+import {
+  CHECKOUT_SHIPPING_ADDRESS_UPDATE,
+  CHECKOUT_BILLING_ADDRESS_UPDATE,
+  CHECKOUT_COMPLETE,
+} from "@/lib/saleor/mutations/Checkout";
+import type { Checkout } from "@/types/saleor";
+
+interface ShippingAddressUpdateResponse {
+  checkoutShippingAddressUpdate?: {
+    checkout?: Checkout;
+    errors?: Array<{ message: string }>;
+  };
+}
+
+interface BillingAddressUpdateResponse {
+  checkoutBillingAddressUpdate?: {
+    checkout?: Checkout;
+    errors?: Array<{ message: string }>;
+  };
+}
+
+interface CheckoutCompleteResponse {
+  checkoutComplete?: {
+    order?: { number: string };
+    errors?: Array<{ message: string }>;
+  };
+}
+
+interface AddressForm {
+  firstName: string;
+  lastName: string;
+  streetAddress1: string;
+  streetAddress2: string;
+  city: string;
+  postalCode: string;
+  phone: string;
+}
+
+export default function CheckoutPage() {
+  const t = useTranslations("Checkout");
+  const locale = useLocale();
+  const router = useRouter();
+  const { checkout, refreshCheckout, getLines, getTotal } = useSaleorCheckoutStore();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [orderComplete, setOrderComplete] = useState(false);
+  const [orderNumber, setOrderNumber] = useState<string | null>(null);
+
+  const [sameAsShipping, setSameAsShipping] = useState(true);
+  const [shippingAddress, setShippingAddress] = useState<AddressForm>({
+    firstName: "",
+    lastName: "",
+    streetAddress1: "",
+    streetAddress2: "",
+    city: "",
+    postalCode: "",
+    phone: "",
+  });
+  const [billingAddress, setBillingAddress] = useState<AddressForm>({
+    firstName: "",
+    lastName: "",
+    streetAddress1: "",
+    streetAddress2: "",
+    city: "",
+    postalCode: "",
+    phone: "",
+  });
+
+  const lines = getLines();
+  const total = getTotal();
+
+  useEffect(() => {
+    if (!checkout) {
+      refreshCheckout();
+    }
+  }, [checkout, refreshCheckout]);
+
+  const handleShippingChange = (field: keyof AddressForm, value: string) => {
+    setShippingAddress((prev) => ({ ...prev, [field]: value }));
+    if (sameAsShipping) {
+      setBillingAddress((prev) => ({ ...prev, [field]: value }));
+    }
+  };
+
+  const handleBillingChange = (field: keyof AddressForm, value: string) => {
+    setBillingAddress((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!checkout) {
+      setError(t("errorNoCheckout"));
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const shippingResult = await saleorClient.mutate<ShippingAddressUpdateResponse>({
+        mutation: CHECKOUT_SHIPPING_ADDRESS_UPDATE,
+        variables: {
+          checkoutId: checkout.id,
+          shippingAddress: {
+            ...shippingAddress,
+            country: "RS",
+          },
+        },
+      });
+
+      if (shippingResult.data?.checkoutShippingAddressUpdate?.errors && shippingResult.data.checkoutShippingAddressUpdate.errors.length > 0) {
+        throw new Error(shippingResult.data.checkoutShippingAddressUpdate.errors[0].message);
+      }
+
+      const billingResult = await saleorClient.mutate<BillingAddressUpdateResponse>({
+        mutation: CHECKOUT_BILLING_ADDRESS_UPDATE,
+        variables: {
+          checkoutId: checkout.id,
+          billingAddress: {
+            ...billingAddress,
+            country: "RS",
+          },
+        },
+      });
+
+      if (billingResult.data?.checkoutBillingAddressUpdate?.errors && billingResult.data.checkoutBillingAddressUpdate.errors.length > 0) {
+        throw new Error(billingResult.data.checkoutBillingAddressUpdate.errors[0].message);
+      }
+
+      const completeResult = await saleorClient.mutate<CheckoutCompleteResponse>({
+        mutation: CHECKOUT_COMPLETE,
+        variables: {
+          checkoutId: checkout.id,
+        },
+      });
+
+      if (completeResult.data?.checkoutComplete?.errors && completeResult.data.checkoutComplete.errors.length > 0) {
+        throw new Error(completeResult.data.checkoutComplete.errors[0].message);
+      }
+
+      const order = completeResult.data?.checkoutComplete?.order;
+      if (order) {
+        setOrderNumber(order.number);
+        setOrderComplete(true);
+      } else {
+        throw new Error(t("errorCreatingOrder"));
+      }
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : null;
+      setError(errorMessage || t("errorOccurred"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (orderComplete) {
+    return (
+      <>
+        <Header locale={locale} />
+        <main className="min-h-screen">
+          <section className="pt-[120px] pb-20 px-4">
+            <div className="max-w-2xl mx-auto text-center">
+              <div className="mb-6">
+                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                </div>
+                <h1 className="text-3xl font-serif mb-2">{t("orderConfirmed")}</h1>
+                <p className="text-foreground-muted">{t("thankYou")}</p>
+              </div>
+
+              {orderNumber && (
+                <div className="bg-background-ice p-6 rounded-lg mb-6">
+                  <p className="text-sm text-foreground-muted mb-1">{t("orderNumber")}</p>
+                  <p className="text-2xl font-serif">#{orderNumber}</p>
+                </div>
+              )}
+
+              <p className="text-foreground-muted mb-8">
+                {t("confirmationEmail")}
+              </p>
+
+              <Link
+                href={`/${locale}/products`}
+                className="inline-block px-8 py-3 bg-foreground text-white hover:bg-accent-dark transition-colors"
+              >
+                {t("continueShoppingBtn")}
+              </Link>
+            </div>
+          </section>
+        </main>
+        <div className="pt-16">
+          <Footer locale={locale} />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Header />
+      <main className="min-h-screen">
+        <section className="pt-[120px] pb-20 px-4">
+          <div className="max-w-7xl mx-auto">
+            <h1 className="text-3xl font-serif mb-8">{t("checkout")}</h1>
+
+            {error && (
+              <div className="bg-red-50 border border-red-200 text-red-600 p-4 mb-6 rounded">
+                {error}
+              </div>
+            )}
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+              <div>
+                <form onSubmit={handleSubmit} className="space-y-6">
+                  <div className="border-b border-border pb-6">
+                    <h2 className="text-xl font-serif mb-4">{t("shippingAddress")}</h2>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <label className="block text-sm font-medium mb-1">{t("firstName")}</label>
+                        <input
+                          type="text"
+                          required
+                          value={shippingAddress.firstName}
+                          onChange={(e) => handleShippingChange("firstName", e.target.value)}
+                          className="w-full border border-border px-4 py-2 rounded"
+                        />
+                      </div>
+                      <div>
+                        <label className="block text-sm font-medium mb-1">{t("lastName")}</label>
+                        <input
+                          type="text"
+                          required
+                          value={shippingAddress.lastName}
+                          onChange={(e) => handleShippingChange("lastName", e.target.value)}
+                          className="w-full border border-border px-4 py-2 rounded"
+                        />
+                      </div>
+                      <div className="col-span-2">
+                        <label className="block text-sm font-medium mb-1">{t("streetAddress")}</label>
+                        <input
+                          type="text"
+                          required
+                          value={shippingAddress.streetAddress1}
+                          onChange={(e) => handleShippingChange("streetAddress1", e.target.value)}
+                          className="w-full border border-border px-4 py-2 rounded"
+                        />
+                      </div>
+                      <div className="col-span-2">
+                        <input
+                          type="text"
+                          value={shippingAddress.streetAddress2}
+                          onChange={(e) => handleShippingChange("streetAddress2", e.target.value)}
+                          placeholder={t("streetAddressOptional")}
+                          className="w-full border border-border px-4 py-2 rounded"
+                        />
+                      </div>
+                      <div>
+                        <label className="block text-sm font-medium mb-1">{t("city")}</label>
+                        <input
+                          type="text"
+                          required
+                          value={shippingAddress.city}
+                          onChange={(e) => handleShippingChange("city", e.target.value)}
+                          className="w-full border border-border px-4 py-2 rounded"
+                        />
+                      </div>
+                      <div>
+                        <label className="block text-sm font-medium mb-1">{t("postalCode")}</label>
+                        <input
+                          type="text"
+                          required
+                          value={shippingAddress.postalCode}
+                          onChange={(e) => handleShippingChange("postalCode", e.target.value)}
+                          className="w-full border border-border px-4 py-2 rounded"
+                        />
+                      </div>
+                      <div className="col-span-2">
+                        <label className="block text-sm font-medium mb-1">{t("phone")}</label>
+                        <input
+                          type="tel"
+                          required
+                          value={shippingAddress.phone}
+                          onChange={(e) => handleShippingChange("phone", e.target.value)}
+                          className="w-full border border-border px-4 py-2 rounded"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="border-b border-border pb-6">
+                    <label className="flex items-center gap-2 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={sameAsShipping}
+                        onChange={(e) => setSameAsShipping(e.target.checked)}
+                        className="w-4 h-4"
+                      />
+                      <span>{t("billingAddressSame")}</span>
+                    </label>
+                  </div>
+
+                  <button
+                    type="submit"
+                    disabled={isLoading || lines.length === 0}
+                    className="w-full py-4 bg-foreground text-white font-medium hover:bg-accent-dark transition-colors disabled:opacity-50"
+                  >
+                    {isLoading ? t("processing") : t("completeOrder", { total: formatPrice(total) })}
+                  </button>
+                </form>
+              </div>
+
+              <div className="bg-background-ice p-6 rounded-lg h-fit">
+                <h2 className="text-xl font-serif mb-6">{t("orderSummary")}</h2>
+
+                {lines.length === 0 ? (
+                  <p className="text-foreground-muted">{t("yourCartEmpty")}</p>
+                ) : (
+                  <>
+                    <div className="space-y-4 mb-6">
+                      {lines.map((line) => (
+                        <div key={line.id} className="flex gap-4">
+                          <div className="w-16 h-16 bg-white relative flex-shrink-0">
+                            {line.variant.product.media[0]?.url && (
+                              <Image
+                                src={line.variant.product.media[0].url}
+                                alt={line.variant.product.name}
+                                fill
+                                sizes="64px"
+                                className="object-cover"
+                              />
+                            )}
+                          </div>
+                          <div className="flex-1">
+                            <h3 className="font-medium text-sm">{line.variant.product.name}</h3>
+                            <p className="text-foreground-muted text-sm">
+                              {t("qty")}: {line.quantity}
+                            </p>
+                            <p className="text-sm">
+                              {formatPrice(line.totalPrice.gross.amount)}
+                            </p>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+
+                    <div className="border-t border-border pt-4 space-y-2">
+                      <div className="flex justify-between">
+                        <span className="text-foreground-muted">{t("subtotal")}</span>
+                        <span>{formatPrice(checkout?.subtotalPrice?.gross?.amount || 0)}</span>
+                      </div>
+                      <div className="flex justify-between font-medium text-lg pt-2 border-t border-border">
+                        <span>{t("total")}</span>
+                        <span>{formatPrice(total)}</span>
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      <div className="pt-16">
+        <Footer />
+      </div>
+    </>
+  );
+}

src/app/[locale]/contact/page.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import { useState } from "react";
-import { useTranslations } from "next-intl";
+import { useTranslations, useLocale } from "next-intl";
 import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
 import { Mail, MapPin, Truck, Check } from "lucide-react";
 
 export default function ContactPage() {
   const t = useTranslations("Contact");
+  const locale = useLocale();
   const [formData, setFormData] = useState({
     name: "",
     email: "",
@@ -22,7 +23,7 @@ export default function ContactPage() {
 
   return (
     <>
-      <Header />
+      <Header locale={locale} />
       <main className="min-h-screen bg-white">
         <div className="pt-[104px]">
           <div className="container py-12 md:py-16">
@@ -184,8 +185,8 @@ export default function ContactPage() {
       </main>
 
       <div className="pt-16">
-        <Footer />
+        <Footer locale={locale} />
       </div>
     </>
   );
-}
+}

src/app/[locale]/layout.tsx

@@ -0,0 +1,25 @@
+import { NextIntlClientProvider } from "next-intl";
+import { getMessages, setRequestLocale } from "next-intl/server";
+import { routing } from "@/i18n/routing";
+
+export function generateStaticParams() {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const messages = await getMessages();
+
+  return (
+    <NextIntlClientProvider messages={messages}>
+      {children}
+    </NextIntlClientProvider>
+  );
+}

src/app/[locale]/page.tsx

@@ -1,5 +1,5 @@
 import { getProducts } from "@/lib/saleor";
-import { getTranslations } from "next-intl/server";
+import { getTranslations, setRequestLocale } from "next-intl/server";
 import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
 import HeroVideo from "@/components/home/HeroVideo";
@@ -11,20 +11,29 @@ import BeforeAfterGallery from "@/components/home/BeforeAfterGallery";
 import ProblemSection from "@/components/home/ProblemSection";
 import HowItWorks from "@/components/home/HowItWorks";
 
-export async function generateMetadata() {
+export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  setRequestLocale(locale);
   return {
-    title: "ManoonOils - Premium Natural Oils for Hair & Skin",
-    description: "Discover our premium collection of natural oils for hair and skin care.",
+    title: locale === "sr" 
+      ? "ManoonOils - Premium prirodna ulja za negu kose i kože"
+      : "ManoonOils - Premium Natural Oils for Hair & Skin",
+    description: locale === "sr"
+      ? "Otkrijte našu premium kolekciju prirodnih ulja za negu kose i kože."
+      : "Discover our premium collection of natural oils for hair and skin care.",
   };
 }
 
-export default async function EnglishHomepage() {
+export default async function Homepage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  setRequestLocale(locale);
   const t = await getTranslations("Home");
   const tBenefits = await getTranslations("Benefits");
-
+  
+  const productLocale = locale === "sr" ? "SR" : "EN";
   let products: any[] = [];
   try {
-    products = await getProducts("UK");
+    products = await getProducts(productLocale);
   } catch (e) {
     console.log("Failed to fetch products during build");
   }
@@ -32,12 +41,14 @@ export default async function EnglishHomepage() {
   const featuredProducts = products?.slice(0, 4) || [];
   const hasProducts = featuredProducts.length > 0;
 
+  const basePath = `/${locale}`;
+ 
   return (
     <>
-      <Header />
+      <Header locale={locale} />
 
       <main className="min-h-screen bg-white">
-        <HeroVideo />
+        <HeroVideo locale={locale} />
 
         <AsSeenIn />
 
@@ -67,13 +78,13 @@ export default async function EnglishHomepage() {
 
                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
                   {featuredProducts.map((product, index) => (
-                    <ProductCard key={product.id} product={product} index={index} locale="EN" />
+                    <ProductCard key={product.id} product={product} index={index} locale={productLocale} />
                   ))}
                 </div>
 
                 <div className="text-center mt-12">
                   <a
-                    href="/en/products"
+                    href={`${basePath}/products`}
                     className="inline-block text-sm uppercase tracking-[0.1em] border-b border-black pb-1 hover:text-[#666666] hover:border-[#666666] transition-colors"
                   >
                     {t("viewAll")}
@@ -102,7 +113,7 @@ export default async function EnglishHomepage() {
                     {t("storyText2")}
                   </p>
                   <a
-                    href="/en/about"
+                    href={`${basePath}/about`}
                     className="inline-block text-sm uppercase tracking-[0.1em] border-b border-black pb-1 hover:text-[#666666] hover:border-[#666666] transition-colors"
                   >
                     {t("learnMore")}
@@ -111,7 +122,7 @@ export default async function EnglishHomepage() {
                 <div className="relative aspect-[4/3] bg-[#e8f0f5] rounded-lg overflow-hidden">
                   <img
                     src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=800&auto=format&fit=crop"
-                    alt="Natural oils production"
+                    alt={locale === "sr" ? "Proizvodnja prirodnih ulja" : "Natural oils production"}
                     className="w-full h-full object-cover"
                   />
                 </div>
@@ -208,7 +219,7 @@ export default async function EnglishHomepage() {
         </div>
       </main>
 
-      <Footer />
+      <Footer locale={locale} />
     </>
   );
-}
+}

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

@@ -1,40 +1,44 @@
 import { getProductBySlug, getProducts, getLocalizedProduct } from "@/lib/saleor";
-import { getTranslations } from "next-intl/server";
+import { getTranslations, setRequestLocale } from "next-intl/server";
 import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
 import ProductDetail from "@/components/product/ProductDetail";
 import type { Product } from "@/types/saleor";
+import { routing } from "@/i18n/routing";
 
 interface ProductPageProps {
-  params: Promise<{ slug: string }>;
+  params: Promise<{ locale: string; slug: string }>;
 }
 
 export async function generateStaticParams() {
-  try {
-    const products = await getProducts("SR", 100);
-    const params: Array<{ slug: string }> = [];
-
-    products.forEach((product: Product) => {
-      params.push({ slug: product.slug });
-    });
-
-    return params;
-  } catch (e) {
-    return [];
+  const locales = routing.locales;
+  const params: Array<{ locale: string; slug: string }> = [];
+  
+  for (const locale of locales) {
+    try {
+      const productLocale = locale === "sr" ? "SR" : "EN";
+      const products = await getProducts(productLocale, 100);
+      products.forEach((product: Product) => {
+        params.push({ locale, slug: product.slug });
+      });
+    } catch (e) {
+    }
   }
+  return params;
 }
 
 export async function generateMetadata({ params }: ProductPageProps) {
-  const { slug } = await params;
-  const product = await getProductBySlug(slug, "SR");
+  const { locale, slug } = await params;
+  const productLocale = locale === "sr" ? "SR" : "EN";
+  const product = await getProductBySlug(slug, productLocale);
 
   if (!product) {
     return {
-      title: "Proizvod nije pronađen",
+      title: locale === "sr" ? "Proizvod nije pronađen" : "Product not found",
     };
   }
 
-  const localized = getLocalizedProduct(product, "SR");
+  const localized = getLocalizedProduct(product, productLocale);
 
   return {
     title: localized.name,
@@ -43,14 +47,18 @@ export async function generateMetadata({ params }: ProductPageProps) {
 }
 
 export default async function ProductPage({ params }: ProductPageProps) {
+  const { locale, slug } = await params;
+  setRequestLocale(locale);
   const t = await getTranslations("Product");
-  const { slug } = await params;
-  const product = await getProductBySlug(slug, "SR");
+  const productLocale = locale === "sr" ? "SR" : "EN";
+  const product = await getProductBySlug(slug, productLocale);
+
+  const basePath = locale === "sr" ? "" : `/${locale}`;
 
   if (!product) {
     return (
       <>
-        <Header />
+        <Header locale={locale} />
         <main className="min-h-screen bg-white">
           <div className="pt-[180px] lg:pt-[200px] pb-20 text-center px-4">
             <h1 className="text-2xl font-medium mb-4">
@@ -60,21 +68,21 @@ export default async function ProductPage({ params }: ProductPageProps) {
               {t("notFoundDesc")}
             </p>
             <a
-              href="/products"
+              href={`${basePath}/products`}
               className="inline-block px-8 py-3 bg-black text-white text-sm uppercase tracking-[0.1em] hover:bg-[#333333] transition-colors"
             >
               {t("browseProducts")}
             </a>
           </div>
         </main>
-        <Footer />
+      <Footer locale={locale} />
       </>
     );
   }
 
   let relatedProducts: Product[] = [];
   try {
-    const allProducts = await getProducts("SR", 8);
+    const allProducts = await getProducts(productLocale, 8);
     relatedProducts = allProducts
       .filter((p: Product) => p.id !== product.id)
       .slice(0, 4);
@@ -82,15 +90,15 @@ export default async function ProductPage({ params }: ProductPageProps) {
 
   return (
     <>
-      <Header />
+      <Header locale={locale} />
       <main className="min-h-screen bg-white">
         <ProductDetail
           product={product}
           relatedProducts={relatedProducts}
-          locale="SR"
+          locale={productLocale}
         />
       </main>
       <Footer />
     </>
   );
-}
+}

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

@@ -1,24 +1,36 @@
 import { getProducts } from "@/lib/saleor";
-import { getTranslations } from "next-intl/server";
+import { getTranslations, setRequestLocale } from "next-intl/server";
 import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
 import ProductCard from "@/components/product/ProductCard";
 import { ChevronDown } from "lucide-react";
 
-export async function generateMetadata() {
+interface ProductsPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: ProductsPageProps) {
+  const { locale } = await params;
   return {
-    title: "Proizvodi - ManoonOils",
-    description: "Pregledajte našu kolekciju premium prirodnih ulja za negu kose i kože.",
+    title: locale === "sr" 
+      ? "Proizvodi - ManoonOils"
+      : "Products - ManoonOils",
+    description: locale === "sr"
+      ? "Pregledajte našu kolekciju premium prirodnih ulja za negu kose i kože."
+      : "Browse our collection of premium natural oils for hair and skin care.",
   };
 }
 
-export default async function ProductsPage() {
+export default async function ProductsPage({ params }: ProductsPageProps) {
+  const { locale } = await params;
+  setRequestLocale(locale);
   const t = await getTranslations("Products");
-  const products = await getProducts("SR");
+  const productLocale = locale === "sr" ? "SR" : "EN";
+  const products = await getProducts(productLocale);
 
   return (
     <>
-      <Header />
+      <Header locale={locale} />
 
       <main className="min-h-screen bg-white">
         <div className="pt-[72px] lg:pt-[72px]">
@@ -73,7 +85,7 @@ export default async function ProductsPage() {
                       key={product.id}
                       product={product}
                       index={index}
-                      locale="SR"
+                      locale={productLocale}
                     />
                   ))}
                 </div>
@@ -84,8 +96,8 @@ export default async function ProductsPage() {
       </main>
 
       <div className="pt-16">
-        <Footer />
+        <Footer locale={locale} />
       </div>
     </>
   );
-}
+}

src/app/checkout/page.tsx

@@ -1,495 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { useRouter } from "next/navigation";
-import Link from "next/link";
-import Image from "next/image";
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
-import { formatPrice } from "@/lib/saleor";
-import { saleorClient } from "@/lib/saleor/client";
-import {
-  CHECKOUT_SHIPPING_ADDRESS_UPDATE,
-  CHECKOUT_BILLING_ADDRESS_UPDATE,
-  CHECKOUT_COMPLETE,
-} from "@/lib/saleor/mutations/Checkout";
-import type { Checkout } from "@/types/saleor";
-
-// GraphQL Response Types
-interface ShippingAddressUpdateResponse {
-  checkoutShippingAddressUpdate?: {
-    checkout?: Checkout;
-    errors?: Array<{ message: string }>;
-  };
-}
-
-interface BillingAddressUpdateResponse {
-  checkoutBillingAddressUpdate?: {
-    checkout?: Checkout;
-    errors?: Array<{ message: string }>;
-  };
-}
-
-interface CheckoutCompleteResponse {
-  checkoutComplete?: {
-    order?: { number: string };
-    errors?: Array<{ message: string }>;
-  };
-}
-
-interface AddressForm {
-  firstName: string;
-  lastName: string;
-  streetAddress1: string;
-  streetAddress2: string;
-  city: string;
-  postalCode: string;
-  phone: string;
-}
-
-export default function CheckoutPage() {
-  const router = useRouter();
-  const { checkout, refreshCheckout, getLines, getTotal } = useSaleorCheckoutStore();
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [orderComplete, setOrderComplete] = useState(false);
-  const [orderNumber, setOrderNumber] = useState<string | null>(null);
-  
-  const [sameAsShipping, setSameAsShipping] = useState(true);
-  const [shippingAddress, setShippingAddress] = useState<AddressForm>({
-    firstName: "",
-    lastName: "",
-    streetAddress1: "",
-    streetAddress2: "",
-    city: "",
-    postalCode: "",
-    phone: "",
-  });
-  const [billingAddress, setBillingAddress] = useState<AddressForm>({
-    firstName: "",
-    lastName: "",
-    streetAddress1: "",
-    streetAddress2: "",
-    city: "",
-    postalCode: "",
-    phone: "",
-  });
-
-  const lines = getLines();
-  const total = getTotal();
-
-  useEffect(() => {
-    if (!checkout) {
-      refreshCheckout();
-    }
-  }, [checkout, refreshCheckout]);
-
-  // Redirect if cart is empty
-  useEffect(() => {
-    if (lines.length === 0 && !orderComplete) {
-      // Optionally redirect to cart or products
-      // router.push("/products");
-    }
-  }, [lines, orderComplete, router]);
-
-  const handleShippingChange = (field: keyof AddressForm, value: string) => {
-    setShippingAddress((prev) => ({ ...prev, [field]: value }));
-    if (sameAsShipping) {
-      setBillingAddress((prev) => ({ ...prev, [field]: value }));
-    }
-  };
-
-  const handleBillingChange = (field: keyof AddressForm, value: string) => {
-    setBillingAddress((prev) => ({ ...prev, [field]: value }));
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!checkout) {
-      setError("No active checkout. Please try again.");
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      // Update shipping address
-      const shippingResult = await saleorClient.mutate<ShippingAddressUpdateResponse>({
-        mutation: CHECKOUT_SHIPPING_ADDRESS_UPDATE,
-        variables: {
-          checkoutId: checkout.id,
-          shippingAddress: {
-            ...shippingAddress,
-            country: "RS", // Serbia
-          },
-        },
-      });
-
-      if (shippingResult.data?.checkoutShippingAddressUpdate?.errors && shippingResult.data.checkoutShippingAddressUpdate.errors.length > 0) {
-        throw new Error(shippingResult.data.checkoutShippingAddressUpdate.errors[0].message);
-      }
-
-      // Update billing address
-      const billingResult = await saleorClient.mutate<BillingAddressUpdateResponse>({
-        mutation: CHECKOUT_BILLING_ADDRESS_UPDATE,
-        variables: {
-          checkoutId: checkout.id,
-          billingAddress: {
-            ...billingAddress,
-            country: "RS",
-          },
-        },
-      });
-
-      if (billingResult.data?.checkoutBillingAddressUpdate?.errors && billingResult.data.checkoutBillingAddressUpdate.errors.length > 0) {
-        throw new Error(billingResult.data.checkoutBillingAddressUpdate.errors[0].message);
-      }
-
-      // Complete checkout (creates order)
-      const completeResult = await saleorClient.mutate<CheckoutCompleteResponse>({
-        mutation: CHECKOUT_COMPLETE,
-        variables: {
-          checkoutId: checkout.id,
-        },
-      });
-
-      if (completeResult.data?.checkoutComplete?.errors && completeResult.data.checkoutComplete.errors.length > 0) {
-        throw new Error(completeResult.data.checkoutComplete.errors[0].message);
-      }
-
-      const order = completeResult.data?.checkoutComplete?.order;
-      if (order) {
-        setOrderNumber(order.number);
-        setOrderComplete(true);
-      } else {
-        throw new Error("Failed to create order");
-      }
-    } catch (err: any) {
-      setError(err.message || "An error occurred during checkout");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  // Order Success Page
-  if (orderComplete) {
-    return (
-      <>
-        <Header />
-        <main className="min-h-screen">
-          <section className="pt-[120px] pb-20 px-4">
-          <div className="max-w-2xl mx-auto text-center">
-            <div className="mb-6">
-              <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                </svg>
-              </div>
-              <h1 className="text-3xl font-serif mb-2">Order Confirmed!</h1>
-              <p className="text-foreground-muted">Thank you for your purchase.</p>
-            </div>
-            
-            {orderNumber && (
-              <div className="bg-background-ice p-6 rounded-lg mb-6">
-                <p className="text-sm text-foreground-muted mb-1">Order Number</p>
-                <p className="text-2xl font-serif">#{orderNumber}</p>
-              </div>
-            )}
-            
-            <p className="text-foreground-muted mb-8">
-              You will receive a confirmation email shortly. We will contact you to arrange Cash on Delivery.
-            </p>
-            
-            <Link
-              href="/products"
-              className="inline-block px-8 py-3 bg-foreground text-white hover:bg-accent-dark transition-colors"
-            >
-              Continue Shopping
-            </Link>
-          </div>
-        </section>
-        </main>
-        <div className="pt-16">
-          <Footer />
-        </div>
-      </>
-    );
-  }
-
-  return (
-    <>
-      <Header />
-      <main className="min-h-screen">
-        <section className="pt-[120px] pb-20 px-4">
-        <div className="max-w-7xl mx-auto">
-          <h1 className="text-3xl font-serif mb-8">Checkout</h1>
-          
-          {error && (
-            <div className="bg-red-50 border border-red-200 text-red-600 p-4 mb-6 rounded">
-              {error}
-            </div>
-          )}
-          
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
-            {/* Checkout Form */}
-            <div>
-              <form onSubmit={handleSubmit} className="space-y-6">
-                {/* Shipping Address */}
-                <div className="border-b border-border pb-6">
-                  <h2 className="text-xl font-serif mb-4">Shipping Address</h2>
-                  <div className="grid grid-cols-2 gap-4">
-                    <div>
-                      <label className="block text-sm font-medium mb-1">First Name</label>
-                      <input
-                        type="text"
-                        required
-                        value={shippingAddress.firstName}
-                        onChange={(e) => handleShippingChange("firstName", e.target.value)}
-                        className="w-full border border-border px-4 py-2 rounded"
-                      />
-                    </div>
-                    <div>
-                      <label className="block text-sm font-medium mb-1">Last Name</label>
-                      <input
-                        type="text"
-                        required
-                        value={shippingAddress.lastName}
-                        onChange={(e) => handleShippingChange("lastName", e.target.value)}
-                        className="w-full border border-border px-4 py-2 rounded"
-                      />
-                    </div>
-                    <div className="col-span-2">
-                      <label className="block text-sm font-medium mb-1">Street Address</label>
-                      <input
-                        type="text"
-                        required
-                        value={shippingAddress.streetAddress1}
-                        onChange={(e) => handleShippingChange("streetAddress1", e.target.value)}
-                        className="w-full border border-border px-4 py-2 rounded"
-                      />
-                    </div>
-                    <div className="col-span-2">
-                      <input
-                        type="text"
-                        value={shippingAddress.streetAddress2}
-                        onChange={(e) => handleShippingChange("streetAddress2", e.target.value)}
-                        placeholder="Apartment, suite, etc. (optional)"
-                        className="w-full border border-border px-4 py-2 rounded"
-                      />
-                    </div>
-                    <div>
-                      <label className="block text-sm font-medium mb-1">City</label>
-                      <input
-                        type="text"
-                        required
-                        value={shippingAddress.city}
-                        onChange={(e) => handleShippingChange("city", e.target.value)}
-                        className="w-full border border-border px-4 py-2 rounded"
-                      />
-                    </div>
-                    <div>
-                      <label className="block text-sm font-medium mb-1">Postal Code</label>
-                      <input
-                        type="text"
-                        required
-                        value={shippingAddress.postalCode}
-                        onChange={(e) => handleShippingChange("postalCode", e.target.value)}
-                        className="w-full border border-border px-4 py-2 rounded"
-                      />
-                    </div>
-                    <div className="col-span-2">
-                      <label className="block text-sm font-medium mb-1">Phone</label>
-                      <input
-                        type="tel"
-                        required
-                        value={shippingAddress.phone}
-                        onChange={(e) => handleShippingChange("phone", e.target.value)}
-                        className="w-full border border-border px-4 py-2 rounded"
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                {/* Billing Address Toggle */}
-                <div className="border-b border-border pb-6">
-                  <label className="flex items-center gap-2 cursor-pointer">
-                    <input
-                      type="checkbox"
-                      checked={sameAsShipping}
-                      onChange={(e) => setSameAsShipping(e.target.checked)}
-                      className="w-4 h-4"
-                    />
-                    <span>Billing address same as shipping</span>
-                  </label>
-                </div>
-
-                {/* Billing Address (if different) */}
-                {!sameAsShipping && (
-                  <div className="border-b border-border pb-6">
-                    <h2 className="text-xl font-serif mb-4">Billing Address</h2>
-                    <div className="grid grid-cols-2 gap-4">
-                      <div>
-                        <label className="block text-sm font-medium mb-1">First Name</label>
-                        <input
-                          type="text"
-                          required
-                          value={billingAddress.firstName}
-                          onChange={(e) => handleBillingChange("firstName", e.target.value)}
-                          className="w-full border border-border px-4 py-2 rounded"
-                        />
-                      </div>
-                      <div>
-                        <label className="block text-sm font-medium mb-1">Last Name</label>
-                        <input
-                          type="text"
-                          required
-                          value={billingAddress.lastName}
-                          onChange={(e) => handleBillingChange("lastName", e.target.value)}
-                          className="w-full border border-border px-4 py-2 rounded"
-                        />
-                      </div>
-                      <div className="col-span-2">
-                        <label className="block text-sm font-medium mb-1">Street Address</label>
-                        <input
-                          type="text"
-                          required
-                          value={billingAddress.streetAddress1}
-                          onChange={(e) => handleBillingChange("streetAddress1", e.target.value)}
-                          className="w-full border border-border px-4 py-2 rounded"
-                        />
-                      </div>
-                      <div>
-                        <label className="block text-sm font-medium mb-1">City</label>
-                        <input
-                          type="text"
-                          required
-                          value={billingAddress.city}
-                          onChange={(e) => handleBillingChange("city", e.target.value)}
-                          className="w-full border border-border px-4 py-2 rounded"
-                        />
-                      </div>
-                      <div>
-                        <label className="block text-sm font-medium mb-1">Postal Code</label>
-                        <input
-                          type="text"
-                          required
-                          value={billingAddress.postalCode}
-                          onChange={(e) => handleBillingChange("postalCode", e.target.value)}
-                          className="w-full border border-border px-4 py-2 rounded"
-                        />
-                      </div>
-                      <div className="col-span-2">
-                        <label className="block text-sm font-medium mb-1">Phone</label>
-                        <input
-                          type="tel"
-                          required
-                          value={billingAddress.phone}
-                          onChange={(e) => handleBillingChange("phone", e.target.value)}
-                          className="w-full border border-border px-4 py-2 rounded"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                )}
-
-                {/* Payment Method */}
-                <div className="border-b border-border pb-6">
-                  <h2 className="text-xl font-serif mb-4">Payment Method</h2>
-                  <div className="bg-background-ice p-4 rounded">
-                    <div className="flex items-center gap-3">
-                      <input
-                        type="radio"
-                        checked
-                        readOnly
-                        className="w-4 h-4"
-                      />
-                      <span>Cash on Delivery (COD)</span>
-                    </div>
-                    <p className="text-sm text-foreground-muted mt-2 ml-7">
-                      Pay when your order is delivered to your door.
-                    </p>
-                  </div>
-                </div>
-
-                {/* Submit Button */}
-                <button
-                  type="submit"
-                  disabled={isLoading || lines.length === 0}
-                  className="w-full py-4 bg-foreground text-white font-medium hover:bg-accent-dark transition-colors disabled:opacity-50"
-                >
-                  {isLoading ? "Processing..." : `Complete Order - ${formatPrice(total)}`}
-                </button>
-              </form>
-            </div>
-
-            {/* Order Summary */}
-            <div className="bg-background-ice p-6 rounded-lg h-fit">
-              <h2 className="text-xl font-serif mb-6">Order Summary</h2>
-              
-              {lines.length === 0 ? (
-                <p className="text-foreground-muted">Your cart is empty</p>
-              ) : (
-                <>
-                  <div className="space-y-4 mb-6">
-                    {lines.map((line) => (
-                      <div key={line.id} className="flex gap-4">
-                        <div className="w-16 h-16 bg-white relative flex-shrink-0">
-                          {line.variant.product.media[0]?.url && (
-                            <Image
-                              src={line.variant.product.media[0].url}
-                              alt={line.variant.product.name}
-                              fill
-                              sizes="64px"
-                              className="object-cover"
-                            />
-                          )}
-                        </div>
-                        <div className="flex-1">
-                          <h3 className="font-medium text-sm">{line.variant.product.name}</h3>
-                          <p className="text-foreground-muted text-sm">
-                            Qty: {line.quantity}
-                          </p>
-                          <p className="text-sm">
-                            {formatPrice(line.totalPrice.gross.amount)}
-                          </p>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                  
-                  <div className="border-t border-border pt-4 space-y-2">
-                    <div className="flex justify-between">
-                      <span className="text-foreground-muted">Subtotal</span>
-                      <span>{formatPrice(checkout?.subtotalPrice?.gross?.amount || 0)}</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-foreground-muted">Shipping</span>
-                      <span>
-                        {checkout?.shippingPrice?.gross?.amount 
-                          ? formatPrice(checkout.shippingPrice.gross.amount)
-                          : "Calculated"
-                        }
-                      </span>
-                    </div>
-                    <div className="flex justify-between font-medium text-lg pt-2 border-t border-border">
-                      <span>Total</span>
-                      <span>{formatPrice(total)}</span>
-                    </div>
-                  </div>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-      </section>
-      </main>
-      
-      <div className="pt-16">
-        <Footer />
-      </div>
-    </>
-  );
-}

src/app/contact/page.tsx

@@ -1,191 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useTranslations } from "next-intl";
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-import { Mail, MapPin, Truck, Check } from "lucide-react";
-
-export default function ContactPage() {
-  const t = useTranslations("Contact");
-  const [formData, setFormData] = useState({
-    name: "",
-    email: "",
-    message: "",
-  });
-  const [submitted, setSubmitted] = useState(false);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    setSubmitted(true);
-  };
-
-  return (
-    <>
-      <Header />
-      <main className="min-h-screen bg-white">
-        <div className="pt-[104px]">
-          <div className="container py-12 md:py-16">
-            <div className="max-w-2xl mx-auto text-center">
-              <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
-                {t("subtitle")}
-              </span>
-              <h1 className="text-4xl md:text-5xl font-medium tracking-tight mb-4">
-                {t("title")}
-              </h1>
-              <p className="text-[#666666]">
-                {t("getInTouchDesc")}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <section className="py-12 md:py-16">
-          <div className="container">
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20">
-              <div>
-                <h2 className="text-2xl font-medium mb-6">
-                  {t("getInTouch")}
-                </h2>
-                <p className="text-[#666666] mb-8 leading-relaxed">
-                  {t("getInTouchDesc")}
-                </p>
-
-                <div className="space-y-6">
-                  <div className="flex items-start gap-4">
-                    <div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0">
-                      <Mail className="w-5 h-5 text-[#666666]" strokeWidth={1.5} />
-                    </div>
-                    <div>
-                      <h3 className="font-medium mb-1">{t("email")}</h3>
-                      <p className="text-[#666666] text-sm">hello@manoonoils.com</p>
-                      <p className="text-[#999999] text-xs mt-1">{t("emailReply")}</p>
-                    </div>
-                  </div>
-
-                  <div className="flex items-start gap-4">
-                    <div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0">
-                      <Truck className="w-5 h-5 text-[#666666]" strokeWidth={1.5} />
-                    </div>
-                    <div>
-                      <h3 className="font-medium mb-1">{t("shippingTitle")}</h3>
-                      <p className="text-[#666666] text-sm">{t("freeShipping")}</p>
-                      <p className="text-[#999999] text-xs mt-1">{t("deliveryTime")}</p>
-                    </div>
-                  </div>
-
-                  <div className="flex items-start gap-4">
-                    <div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0">
-                      <MapPin className="w-5 h-5 text-[#666666]" strokeWidth={1.5} />
-                    </div>
-                    <div>
-                      <h3 className="font-medium mb-1">{t("location")}</h3>
-                      <p className="text-[#666666] text-sm">{t("locationDesc")}</p>
-                      <p className="text-[#999999] text-xs mt-1">{t("worldwideShipping")}</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="bg-[#f8f9fa] p-8 md:p-10">
-                {submitted ? (
-                  <div className="text-center py-12">
-                    <div className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4">
-                      <Check className="w-8 h-8 text-green-600" strokeWidth={1.5} />
-                    </div>
-                    <h3 className="text-xl font-medium mb-2">{t("thankYou")}</h3>
-                    <p className="text-[#666666]">
-                      {t("thankYouDesc")}
-                    </p>
-                  </div>
-                ) : (
-                  <form onSubmit={handleSubmit} className="space-y-6">
-                    <div>
-                      <label htmlFor="name" className="block text-sm font-medium mb-2">
-                        {t("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 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors"
-                        placeholder={t("namePlaceholder")}
-                      />
-                    </div>
-
-                    <div>
-                      <label htmlFor="email" className="block text-sm font-medium mb-2">
-                        {t("emailField")}
-                      </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 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors"
-                        placeholder={t("emailPlaceholder")}
-                      />
-                    </div>
-
-                    <div>
-                      <label htmlFor="message" className="block text-sm font-medium mb-2">
-                        {t("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 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors resize-none"
-                        placeholder={t("messagePlaceholder")}
-                      />
-                    </div>
-
-                    <button
-                      type="submit"
-                      className="w-full py-4 bg-black text-white text-sm uppercase tracking-[0.1em] font-medium hover:bg-[#333333] transition-colors"
-                    >
-                      {t("sendMessage")}
-                    </button>
-                  </form>
-                )}
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <section className="py-16 md:py-24 border-t border-[#e5e5e5]">
-          <div className="container">
-            <div className="max-w-3xl mx-auto">
-              <h2 className="text-2xl font-medium text-center mb-12">
-                {t("faqTitle")}
-              </h2>
-
-              <div className="space-y-6">
-                {[
-                  { q: t("faq1q"), a: t("faq1a") },
-                  { q: t("faq2q"), a: t("faq2a") },
-                  { q: t("faq3q"), a: t("faq3a") },
-                  { q: t("faq4q"), a: t("faq4a") },
-                ].map((faq, index) => (
-                  <div key={index} className="border-b border-[#e5e5e5] pb-6">
-                    <h3 className="font-medium mb-2">{faq.q}</h3>
-                    <p className="text-[#666666] text-sm leading-relaxed">{faq.a}</p>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </section>
-      </main>
-
-      <div className="pt-16">
-        <Footer />
-      </div>
-    </>
-  );
-}

src/app/de/about/page.tsx

@@ -1,110 +0,0 @@
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-
-export const metadata = {
-  title: "Über Uns - ManoonOils",
-  description: "Erfahren Sie mehr über ManoonOils - unsere Geschichte, Mission und unser Engagement für natürliche Schönheit.",
-};
-
-export default function AboutPage() {
-  return (
-    <>
-      <Header />
-      <main className="min-h-screen bg-white">
-        <div className="pt-[104px]">
-          <div className="container py-12 md:py-16">
-            <div className="max-w-2xl mx-auto text-center">
-              <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">Unsere Geschichte</span>
-              <h1 className="text-4xl md:text-5xl font-medium tracking-tight">Über ManoonOils</h1>
-            </div>
-          </div>
-        </div>
-
-        <div className="relative h-[400px] md:h-[500px] overflow-hidden">
-          <img
-            src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=2000&auto=format&fit=crop"
-            alt="Natürliche Ölproduktion"
-            className="w-full h-full object-cover"
-          />
-          <div className="absolute inset-0 bg-black/20" />
-        </div>
-
-        <section className="py-16 md:py-24">
-          <div className="container">
-            <div className="max-w-3xl mx-auto">
-              <div className="mb-16">
-                <p className="text-xl md:text-2xl text-[#1a1a1a] leading-relaxed mb-8">
-                  ManoonOils wurde aus einer Leidenschaft für natürliche Schönheit und dem Glauben geboren, 
-                  dass die beste Hautpflege von der Natur selbst kommt.
-                </p>
-                <p className="text-[#666666] leading-relaxed">
-                  Wir glauben an die Kraft natürlicher Inhaltsstoffe. Jedes Öl in unserer 
-                  Kollektion wird sorgfältig aufgrund seiner einzigartigen Eigenschaften und 
-                  Vorteile ausgewählt. Von nährenden Ölen, die die Haar vitalität wiederherstellen, 
-                  bis zu Seren, die die Haut verjüngen, stellen wir jedes Produkt mit Liebe und 
-                  Aufmerksamkeit für Details her.
-                </p>
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 mb-16">
-                <div className="p-6 bg-[#f8f9fa]">
-                  <h3 className="text-lg font-medium mb-3">Natürliche Inhaltsstoffe</h3>
-                  <p className="text-[#666666] text-sm leading-relaxed">
-                    Wir verwenden nur die feinsten natürlichen Inhaltsstoffe, die ethisch und nachhaltig 
-                    von vertrauenswürdigen Lieferanten aus aller Welt bezogen werden.
-                  </p>
-                </div>
-                <div className="p-6 bg-[#f8f9fa]">
-                  <h3 className="text-lg font-medium mb-3">Tierversuchsfrei</h3>
-                  <p className="text-[#666666] text-sm leading-relaxed">
-                    Unsere Produkte werden niemals an Tieren getestet. Wir glauben an Schönheit 
-                    ohne Kompromisse.
-                  </p>
-                </div>
-                <div className="p-6 bg-[#f8f9fa]">
-                  <h3 className="text-lg font-medium mb-3">Nachhaltige Verpackung</h3>
-                  <p className="text-[#666666] text-sm leading-relaxed">
-                    Wir verwenden umweltfreundliche Verpackungsmaterialien und minimieren Abfall 
-                    während unseres gesamten Produktionsprozesses.
-                  </p>
-                </div>
-                <div className="p-6 bg-[#f8f9fa]">
-                  <h3 className="text-lg font-medium mb-3">Handgefertigte Qualität</h3>
-                  <p className="text-[#666666] text-sm leading-relaxed">
-                    Jede Flasche wird in kleinen Chargen von Hand hergestellt, um 
-                    höchste Qualität und Frische zu gewährleisten.
-                  </p>
-                </div>
-              </div>
-
-              <div className="text-center py-12 border-t border-b border-[#e5e5e5]">
-                <span className="text-caption text-[#666666] mb-4 block">Unsere Mission</span>
-                <blockquote className="text-2xl md:text-3xl font-medium tracking-tight">
-                  &ldquo;Hochwertige, natürliche Produkte anzubieten, die Ihre tägliche Schönheitsroutine verbessern.&rdquo;
-                </blockquote>
-              </div>
-
-              <div className="mt-16">
-                <h2 className="text-2xl font-medium mb-6">Mit Liebe Handgemacht</h2>
-                <p className="text-[#666666] leading-relaxed mb-6">
-                  Jede Flasche ManoonOils wird mit Sorgfalt von Hand hergestellt. Wir stellen unsere 
-                  Produkte in kleinen Chargen her, um höchste Qualität und Frische zu gewährleisten. 
-                  Wenn Sie ManoonOils verwenden, können Sie sicher sein, dass Sie etwas verwenden, 
-                  das mit echter Sorgfalt und Fachwissen hergestellt wurde.
-                </p>
-                <p className="text-[#666666] leading-relaxed">
-                  Unsere Reise begann mit einer einfachen Frage: Wie können wir Produkte entwickeln, 
-                  die Haar und Haut wirklich pflegen? Heute innovieren wir weiter, während wir 
-                  unserem Engagement für natürliche, effektive Schönheitslösungen treu bleiben.
-                </p>
-              </div>
-            </div>
-          </div>
-        </section>
-      </main>
-      <div className="pt-16">
-        <Footer />
-      </div>
-    </>
-  );
-}

src/app/de/contact/page.tsx

@@ -1,128 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-import { Mail, MapPin, Truck, Check } from "lucide-react";
-
-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 (
-    <>
-      <Header />
-      <main className="min-h-screen bg-white">
-        <div className="pt-[104px]">
-          <div className="container py-12 md:py-16">
-            <div className="max-w-2xl mx-auto text-center">
-              <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">Kontaktieren Sie Uns</span>
-              <h1 className="text-4xl md:text-5xl font-medium tracking-tight mb-4">Kontakt</h1>
-              <p className="text-[#666666]">Haben Sie Fragen? Wir würden uns freuen, von Ihnen zu hören.</p>
-            </div>
-          </div>
-        </div>
-
-        <section className="py-12 md:py-16">
-          <div className="container">
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20">
-              <div>
-                <h2 className="text-2xl font-medium mb-6">Kontaktieren Sie Uns</h2>
-                <p className="text-[#666666] mb-8 leading-relaxed">
-                  Wir sind hier um zu helfen! Ob Sie Fragen zu unseren Produkten haben, 
-                  Hilfe bei einer Bestellung benötigen oder einfach Hallo sagen möchten.
-                </p>
-                <div className="space-y-6">
-                  <div className="flex items-start gap-4">
-                    <div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0">
-                      <Mail className="w-5 h-5 text-[#666666]" strokeWidth={1.5} />
-                    </div>
-                    <div>
-                      <h3 className="font-medium mb-1">E-Mail</h3>
-                      <p className="text-[#666666] text-sm">hello@manoonoils.com</p>
-                      <p className="text-[#999999] text-xs mt-1">Wir antworten innerhalb von 24 Stunden</p>
-                    </div>
-                  </div>
-                  <div className="flex items-start gap-4">
-                    <div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0">
-                      <Truck className="w-5 h-5 text-[#666666]" strokeWidth={1.5} />
-                    </div>
-                    <div>
-                      <h3 className="font-medium mb-1">Versand</h3>
-                      <p className="text-[#666666] text-sm">Kostenloser Versand ab €50</p>
-                      <p className="text-[#999999] text-xs mt-1">Lieferung innerhalb von 2-5 Werktagen</p>
-                    </div>
-                  </div>
-                  <div className="flex items-start gap-4">
-                    <div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0">
-                      <MapPin className="w-5 h-5 text-[#666666]" strokeWidth={1.5} />
-                    </div>
-                    <div>
-                      <h3 className="font-medium mb-1">Standort</h3>
-                      <p className="text-[#666666] text-sm">Serbien</p>
-                      <p className="text-[#999999] text-xs mt-1">Weltweiter Versand</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="bg-[#f8f9fa] p-8 md:p-10">
-                {submitted ? (
-                  <div className="text-center py-12">
-                    <div className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4">
-                      <Check className="w-8 h-8 text-green-600" strokeWidth={1.5} />
-                    </div>
-                    <h3 className="text-xl font-medium mb-2">Vielen Dank!</h3>
-                    <p className="text-[#666666]">Ihre Nachricht wurde gesendet. Wir werden uns bald bei Ihnen melden.</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 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors" placeholder="Ihr Name" />
-                    </div>
-                    <div>
-                      <label htmlFor="email" className="block text-sm font-medium mb-2">E-Mail</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 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors" placeholder="ihre@email.com" />
-                    </div>
-                    <div>
-                      <label htmlFor="message" className="block text-sm font-medium mb-2">Nachricht</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 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors resize-none" placeholder="Wie können wir Ihnen helfen?" />
-                    </div>
-                    <button type="submit" className="w-full py-4 bg-black text-white text-sm uppercase tracking-[0.1em] font-medium hover:bg-[#333333] transition-colors">Nachricht Senden</button>
-                  </form>
-                )}
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <section className="py-16 md:py-24 border-t border-[#e5e5e5]">
-          <div className="container">
-            <div className="max-w-3xl mx-auto">
-              <h2 className="text-2xl font-medium text-center mb-12">Häufig Gestellte Fragen</h2>
-              <div className="space-y-6">
-                {[
-                  { q: "Wie lange dauert der Versand?", a: "Bestellungen werden normalerweise innerhalb von 2-5 Werktagen für Inlandsversand geliefert. Sie erhalten eine Tracking-Nummer, sobald Ihre Bestellung versandt wurde." },
-                  { q: "Sind Ihre Produkte 100% natürlich?", a: "Ja! Alle unsere Öle sind 100% natürlich, kaltgepresst und frei von Zusatzstoffen, Konservierungsstoffen oder künstlichen Duftstoffen." },
-                  { q: "Was ist Ihre Rückgaberichtlinie?", a: "Wir akzeptieren Rücksendungen innerhalb von 14 Tagen nach Lieferung für ungeöffnete Produkte. Bitte kontaktieren Sie uns, wenn Sie Probleme mit Ihrer Bestellung haben." },
-                  { q: "Bieten Sie Wiederverkauf an?", a: "Ja, wir bieten Wiederverkaufspreise für Bulk-Bestellungen. Bitte kontaktieren Sie uns unter hello@manoonoils.com für mehr Informationen." }
-                ].map((faq, index) => (
-                  <div key={index} className="border-b border-[#e5e5e5] pb-6">
-                    <h3 className="font-medium mb-2">{faq.q}</h3>
-                    <p className="text-[#666666] text-sm leading-relaxed">{faq.a}</p>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </section>
-      </main>
-      <div className="pt-16"><Footer /></div>
-    </>
-  );
-}

src/app/de/page.tsx

@@ -1,213 +0,0 @@
-import { getProducts } from "@/lib/saleor";
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-import HeroVideo from "@/components/home/HeroVideo";
-import ProductCard from "@/components/product/ProductCard";
-import TrustBadges from "@/components/home/TrustBadges";
-import AsSeenIn from "@/components/home/AsSeenIn";
-import ProductReviews from "@/components/product/ProductReviews";
-import BeforeAfterGallery from "@/components/home/BeforeAfterGallery";
-import ProblemSection from "@/components/home/ProblemSection";
-import HowItWorks from "@/components/home/HowItWorks";
-
-export const metadata = {
-  title: "ManoonOils - Premium Natürliche Öle für Haar & Haut",
-  description:
-    "Entdecken Sie unsere Premium-Kollektion natürlicher Öle für Haar- und Hautpflege. Mit Liebe handgemacht aus den feinsten Zutaten.",
-};
-
-export default async function GermanHomepage() {
-  let products: any[] = [];
-  try {
-    products = await getProducts("DE");
-  } catch (e) {
-    console.log("Failed to fetch products during build");
-  }
-
-  const featuredProducts = products?.slice(0, 4) || [];
-  const hasProducts = featuredProducts.length > 0;
-
-  return (
-    <>
-      <Header />
-
-      <main className="min-h-screen bg-white">
-        <HeroVideo />
-
-        <AsSeenIn />
-
-        <ProductReviews />
-
-        <TrustBadges />
-
-        <ProblemSection />
-
-        <BeforeAfterGallery />
-
-        <div id="main_content" className="scroll-mt-[72px] lg:scroll-mt-[72px]">
-          {hasProducts && (
-            <section className="py-24 px-4 sm:px-6 lg:px-8 bg-white">
-              <div className="max-w-7xl mx-auto">
-                <div className="text-center mb-16">
-                  <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
-                    Unsere Kollektion
-                  </span>
-                  <h2 className="text-3xl md:text-4xl font-medium mb-4">
-                    Premium Natürliche Öle
-                  </h2>
-                  <p className="text-[#666666] max-w-xl mx-auto">
-                    Kaltgepresst, rein und natürlich für Ihre tägliche Schönheitsroutine
-                  </p>
-                </div>
-
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
-                  {featuredProducts.map((product, index) => (
-                    <ProductCard key={product.id} product={product} index={index} locale="DE" />
-                  ))}
-                </div>
-
-                <div className="text-center mt-12">
-                  <a
-                    href="/de/products"
-                    className="inline-block text-sm uppercase tracking-[0.1em] border-b border-black pb-1 hover:text-[#666666] hover:border-[#666666] transition-colors"
-                  >
-                    Alle Produkte Ansehen
-                  </a>
-                </div>
-              </div>
-            </section>
-          )}
-
-          <HowItWorks />
-
-          <section className="py-24 px-4 sm:px-6 lg:px-8 bg-[#f8f9fa]">
-            <div className="max-w-7xl mx-auto">
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
-                <div>
-                  <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
-                    Unsere Geschichte
-                  </span>
-                  <h2 className="text-3xl md:text-4xl font-medium mb-6">
-                    Mit Liebe Handgemacht
-                  </h2>
-                  <p className="text-[#666666] mb-6 leading-relaxed">
-                    Jede Flasche ManoonOils wird mit größter Sorgfalt hergestellt, unter 
-                    Verwendung traditioneller Methoden, die von Generation zu Generation 
-                    weitergegeben wurden. Wir beziehen nur die besten organischen 
-                    Zutaten, um Ihnen Öle zu liefern, die Haar und Haut pflegen.
-                  </p>
-                  <p className="text-[#666666] mb-8 leading-relaxed">
-                    Unser Engagement für Reinheit bedeutet: keine Zusatzstoffe, keine 
-                    Konservierungsstoffe - nur die Güte der Natur in ihrer potentesten Form.
-                  </p>
-                  <a
-                    href="/de/about"
-                    className="inline-block text-sm uppercase tracking-[0.1em] border-b border-black pb-1 hover:text-[#666666] hover:border-[#666666] transition-colors"
-                  >
-                    Mehr Erfahren
-                  </a>
-                </div>
-                <div className="relative aspect-[4/3] bg-[#e8f0f5] rounded-lg overflow-hidden">
-                  <img
-                    src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=800&auto=format&fit=crop"
-                    alt="Natürliche Ölproduktion"
-                    className="w-full h-full object-cover"
-                  />
-                </div>
-              </div>
-            </div>
-          </section>
-
-          <section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-white to-[#faf9f7]">
-            <div className="max-w-7xl mx-auto">
-              <div className="text-center mb-16">
-                <span className="text-xs uppercase tracking-[0.3em] text-[#c9a962] mb-4 block font-medium">
-                  Warum Uns Wählen
-                </span>
-                <h2 className="text-3xl md:text-4xl lg:text-5xl font-medium text-[#1a1a1a]">
-                  Der Manoon Unterschied
-                </h2>
-                <div className="w-24 h-1 bg-gradient-to-r from-[#c9a962] to-[#FFD700] mx-auto mt-6 rounded-full" />
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
-                {[
-                  {
-                    title: "100% Natürlich",
-                    description: "Reine, kaltgepresste Öle ohne Zusatzstoffe oder Konservierungsstoffe. Nur die Güte der Natur.",
-                    icon: (
-                      <svg className="w-10 h-10" viewBox="0 0 24 24" fill="none">
-                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="#7eb89e"/>
-                        <path stroke="#7eb89e" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                      </svg>
-                    ),
-                  },
-                  {
-                    title: "Handgefertigt",
-                    description: "Jede Charge wird sorgfältig von Hand zubereitet, um höchste Qualität zu gewährleisten.",
-                    icon: (
-                      <svg className="w-10 h-10" viewBox="0 0 24 24" fill="none">
-                        <path stroke="#c9a962" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z"/>
-                      </svg>
-                    ),
-                  },
-                  {
-                    title: "Nachhaltig",
-                    description: "Ethnisch beschaffte Zutaten und umweltfreundliche Verpackungen für einen besseren Planeten.",
-                    icon: (
-                      <svg className="w-10 h-10" viewBox="0 0 24 24" fill="none">
-                        <path stroke="#e8967a" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" d="M12.75 3.03v.568c0 .334.148.65.405.864l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 01-1.161.886l-.143.048a1.107 1.107 0 00-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 11-1.652.928l-.714-.093a1.125 1.125 0 00-1.906.172L4.5 15.75l-.612.153M12.75 3.031l.002-.004m0 0a8.955 8.955 0 00-4.943.834 8.974 8.974 0 004.943.834m4.943-.834a8.955 8.955 0 00-4.943-.834c2.687 0 5.18.948 7.161 2.664a8.974 8.974 0 014.943-.834z"/>
-                      </svg>
-                    ),
-                  },
-                ].map((benefit, index) => (
-                  <div
-                    key={index}
-                    className="relative text-center p-8 bg-white rounded-3xl shadow-lg border border-[#f0ede8] hover:shadow-2xl hover:border-[#c9a962]/30 transition-all duration-500 group"
-                  >
-                    <div className="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-[#faf9f7] to-[#f5f0e8] flex items-center justify-center shadow-md border border-[#e8e4dc] group-hover:border-[#c9a962]/50 transition-colors duration-300">
-                      {benefit.icon}
-                    </div>
-                    <h3 className="text-xl font-semibold text-[#1a1a1a] mb-3">{benefit.title}</h3>
-                    <p className="text-sm text-[#666666] leading-relaxed">{benefit.description}</p>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </section>
-
-          <section className="py-28 lg:py-32 px-4 sm:px-6 lg:px-8 bg-[#1a1a1a] text-white">
-            <div className="max-w-7xl mx-auto">
-              <div className="max-w-2xl mx-auto text-center">
-                <span className="text-xs uppercase tracking-[0.2em] text-white/60 mb-3 block">
-                  Verbunden Bleiben
-                </span>
-                <h2 className="text-3xl md:text-4xl lg:text-5xl font-medium mb-6">
-                  Werden Sie Teil Unserer Gemeinschaft
-                </h2>
-                <p className="text-white/70 mb-10 mx-auto text-lg">
-                  Abonnieren Sie, um exklusive Angebote, Beauty-Tipps zu erhalten und der Erste zu sein, der neue Produkte erfährt.
-                </p>
-                <form className="flex flex-col sm:flex-row items-stretch justify-center max-w-md mx-auto gap-0">
-                  <input
-                    type="email"
-                    placeholder="Geben Sie Ihre E-Mail ein"
-                    className="flex-1 min-w-0 px-5 h-14 bg-white/10 border border-white/20 border-b-0 sm:border-b border-r-0 sm:border-r border-white/20 text-white placeholder:text-white/50 focus:border-white focus:outline-none transition-colors text-base text-center sm:text-left rounded-t sm:rounded-l sm:rounded-tr-none"
-                  />
-                  <button
-                    type="submit"
-                    className="px-8 h-14 bg-white text-black text-sm uppercase tracking-[0.1em] font-medium hover:bg-white/90 transition-colors whitespace-nowrap flex-shrink-0 rounded-b sm:rounded-r sm:rounded-bl-none"
-                  >
-                    Abonnieren
-                  </button>
-                </form>
-              </div>
-            </div>
-          </section>
-        </div>
-      </main>
-
-      <Footer />
-    </>
-  );
-}

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

@@ -1,90 +0,0 @@
-import { getProductBySlug, getProducts, getLocalizedProduct } from "@/lib/saleor";
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-import ProductDetail from "@/components/product/ProductDetail";
-import type { Product } from "@/types/saleor";
-
-interface ProductPageProps {
-  params: Promise<{ slug: string }>;
-}
-
-export async function generateStaticParams() {
-  try {
-    const products = await getProducts("DE", 100);
-    const params: Array<{ slug: string }> = [];
-    products.forEach((product: Product) => {
-      if (product.translation?.slug) {
-        params.push({ slug: product.translation.slug });
-      }
-    });
-    return params;
-  } catch (e) {
-    return [];
-  }
-}
-
-export async function generateMetadata({ params }: ProductPageProps) {
-  const { slug } = await params;
-  const product = await getProductBySlug(slug, "DE");
-  
-  if (!product) {
-    return { title: "Produkt Nicht Gefunden" };
-  }
-  
-  const localized = getLocalizedProduct(product, "DE");
-  
-  return {
-    title: localized.name,
-    description: localized.seoDescription || localized.description?.slice(0, 160),
-    openGraph: {
-      title: localized.name,
-      description: localized.seoDescription || localized.description?.slice(0, 160),
-      images: product.media?.[0]?.url ? [product.media[0].url] : [],
-      type: "website",
-    },
-  };
-}
-
-export default async function GermanProductPage({ params }: ProductPageProps) {
-  const { slug } = await params;
-  const product = await getProductBySlug(slug, "DE");
-  
-  if (!product) {
-    return (
-      <>
-        <Header />
-        <main className="min-h-screen bg-white">
-          <div className="pt-[180px] lg:pt-[200px] pb-20 text-center px-4">
-            <h1 className="text-2xl font-medium mb-4">Produkt nicht gefunden</h1>
-            <p className="text-[#666666] mb-8">
-              Das gesuchte Produkt existiert nicht oder wurde entfernt.
-            </p>
-            <a 
-              href="/de/products"
-              className="inline-block px-8 py-3 bg-black text-white text-sm uppercase tracking-[0.1em] hover:bg-[#333333] transition-colors"
-            >
-              Produkte Durchsuchen
-            </a>
-          </div>
-        </main>
-        <Footer />
-      </>
-    );
-  }
-
-  let relatedProducts: Product[] = [];
-  try {
-    const allProducts = await getProducts("DE", 8);
-    relatedProducts = allProducts.filter((p: Product) => p.id !== product.id).slice(0, 4);
-  } catch (e) {}
-
-  return (
-    <>
-      <Header />
-      <main className="min-h-screen bg-white">
-        <ProductDetail product={product} relatedProducts={relatedProducts} locale="DE" />
-      </main>
-      <Footer />
-    </>
-  );
-}

src/app/de/products/page.tsx

@@ -1,87 +0,0 @@
-import { getProducts } from "@/lib/saleor";
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-import ProductCard from "@/components/product/ProductCard";
-import { ChevronDown } from "lucide-react";
-
-export const metadata = {
-  title: "Produkte - ManoonOils",
-  description: "Durchsuchen Sie unsere Kollektion von Premium natürlichen Ölen für Haar- und Hautpflege.",
-};
-
-export default async function GermanProductsPage() {
-  const products = await getProducts("DE");
-
-  return (
-    <>
-      <Header />
-      
-      <main className="min-h-screen bg-white">
-        <div className="pt-[72px] lg:pt-[72px]">
-          <div className="border-b border-[#e5e5e5]">
-            <div className="container py-8 md:py-12">
-              <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
-                <div>
-                  <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-2 block">
-                    Unsere Kollektion
-                  </span>
-                  <h1 className="text-3xl md:text-4xl font-medium">
-                    Alle Produkte
-                  </h1>
-                </div>
-                
-                <div className="flex items-center gap-3">
-                  <span className="text-sm text-[#666666]">
-                    {products.length} Produkte
-                  </span>
-                  <div className="relative">
-                    <select 
-                      className="appearance-none bg-transparent border border-[#e5e5e5] pl-4 pr-10 py-2 text-sm focus:outline-none focus:border-black cursor-pointer"
-                      defaultValue="featured"
-                    >
-                      <option value="featured">Empfohlen</option>
-                      <option value="newest">Neueste</option>
-                      <option value="price-low">Preis: Aufsteigend</option>
-                      <option value="price-high">Preis: Absteigend</option>
-                    </select>
-                    <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none text-[#666666]" />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <section className="py-12 md:py-16">
-            <div className="container">
-              {products.length === 0 ? (
-                <div className="text-center py-20">
-                  <p className="text-[#666666] mb-4">
-                    Keine Produkte verfügbar
-                  </p>
-                  <p className="text-sm text-[#999999]">
-                    Bitte schauen Sie später nach neuen Produkten.
-                  </p>
-                </div>
-              ) : (
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
-                  {products.map((product, index) => (
-                    <ProductCard 
-                      key={product.id} 
-                      product={product} 
-                      index={index}
-                      locale="DE"
-                    />
-                  ))}
-                </div>
-              )}
-            </div>
-          </section>
-        </div>
-      </main>
-      
-      <div className="pt-16">
-        <Footer />
-      </div>
-    </>
-  );
-}

src/app/en/about/page.tsx

@@ -1,117 +0,0 @@
-import { getTranslations } from "next-intl/server";
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-
-export async function generateMetadata() {
-  return {
-    title: "About - ManoonOils",
-    description: "Learn about ManoonOils - our story, mission, and commitment to natural beauty.",
-  };
-}
-
-export default async function AboutPage() {
-  const t = await getTranslations("About");
-
-  return (
-    <>
-      <Header />
-      <main className="min-h-screen bg-white">
-        <div className="pt-[104px]">
-          <div className="container py-12 md:py-16">
-            <div className="max-w-2xl mx-auto text-center">
-              <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
-                {t("subtitle")}
-              </span>
-              <h1 className="text-4xl md:text-5xl font-medium tracking-tight">
-                {t("title")}
-              </h1>
-            </div>
-          </div>
-        </div>
-
-        <div className="relative h-[400px] md:h-[500px] overflow-hidden">
-          <img
-            src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=2000&auto=format&fit=crop"
-            alt="Natural oils production"
-            className="w-full h-full object-cover"
-          />
-          <div className="absolute inset-0 bg-black/20" />
-        </div>
-
-        <section className="py-16 md:py-24">
-          <div className="container">
-            <div className="max-w-3xl mx-auto">
-              <div className="mb-16">
-                <p className="text-xl md:text-2xl text-[#1a1a1a] leading-relaxed mb-8">
-                  {t("intro")}
-                </p>
-                <p className="text-[#666666] leading-relaxed">
-                  {t("intro2")}
-                </p>
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 mb-16">
-                <div className="p-6 bg-[#f8f9fa]">
-                  <h3 className="text-lg font-medium mb-3">
-                    {t("naturalIngredients")}
-                  </h3>
-                  <p className="text-[#666666] text-sm leading-relaxed">
-                    {t("naturalIngredientsDesc")}
-                  </p>
-                </div>
-                <div className="p-6 bg-[#f8f9fa]">
-                  <h3 className="text-lg font-medium mb-3">
-                    {t("crueltyFree")}
-                  </h3>
-                  <p className="text-[#666666] text-sm leading-relaxed">
-                    {t("crueltyFreeDesc")}
-                  </p>
-                </div>
-                <div className="p-6 bg-[#f8f9fa]">
-                  <h3 className="text-lg font-medium mb-3">
-                    {t("sustainablePackaging")}
-                  </h3>
-                  <p className="text-[#666666] text-sm leading-relaxed">
-                    {t("sustainablePackagingDesc")}
-                  </p>
-                </div>
-                <div className="p-6 bg-[#f8f9fa]">
-                  <h3 className="text-lg font-medium mb-3">
-                    {t("handcraftedQuality")}
-                  </h3>
-                  <p className="text-[#666666] text-sm leading-relaxed">
-                    {t("handcraftedQualityDesc")}
-                  </p>
-                </div>
-              </div>
-
-              <div className="text-center py-12 border-t border-b border-[#e5e5e5]">
-                <span className="text-caption text-[#666666] mb-4 block">
-                  {t("mission")}
-                </span>
-                <blockquote className="text-2xl md:text-3xl font-medium tracking-tight">
-                  &ldquo;{t("missionQuote")}&rdquo;
-                </blockquote>
-              </div>
-
-              <div className="mt-16">
-                <h2 className="text-2xl font-medium mb-6">
-                  {t("handmadeTitle")}
-                </h2>
-                <p className="text-[#666666] leading-relaxed mb-6">
-                  {t("handmadeText1")}
-                </p>
-                <p className="text-[#666666] leading-relaxed">
-                  {t("handmadeText2")}
-                </p>
-              </div>
-            </div>
-          </div>
-        </section>
-      </main>
-      <div className="pt-16">
-        <Footer />
-      </div>
-    </>
-  );
-}

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

@@ -1,102 +0,0 @@
-import { getProductBySlug, getProducts, getLocalizedProduct } from "@/lib/saleor";
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-import ProductDetail from "@/components/product/ProductDetail";
-import type { Product } from "@/types/saleor";
-
-interface ProductPageProps {
-  params: Promise<{ slug: string }>;
-}
-
-export async function generateStaticParams() {
-  try {
-    const products = await getProducts("UK", 100);
-    const params: Array<{ slug: string }> = [];
-    
-    products.forEach((product: Product) => {
-      if (product.translation?.slug) {
-        params.push({ slug: product.translation.slug });
-      }
-    });
-    
-    return params;
-  } catch (e) {
-    return [];
-  }
-}
-
-export async function generateMetadata({ params }: ProductPageProps) {
-  const { slug } = await params;
-  const product = await getProductBySlug(slug, "EN");
-  
-  if (!product) {
-    return {
-      title: "Product Not Found",
-    };
-  }
-  
-  const localized = getLocalizedProduct(product, "EN");
-  
-  return {
-    title: localized.name,
-    description: localized.seoDescription || localized.description?.slice(0, 160),
-    openGraph: {
-      title: localized.name,
-      description: localized.seoDescription || localized.description?.slice(0, 160),
-      images: product.media?.[0]?.url ? [product.media[0].url] : [],
-      type: "website",
-    },
-  };
-}
-
-export default async function EnglishProductPage({ params }: ProductPageProps) {
-  const { slug } = await params;
-  const product = await getProductBySlug(slug, "EN");
-  
-  if (!product) {
-    return (
-      <>
-        <Header />
-        <main className="min-h-screen bg-white">
-          <div className="pt-[180px] lg:pt-[200px] pb-20 text-center px-4">
-            <h1 className="text-2xl font-medium mb-4">Product not found</h1>
-            <p className="text-[#666666] mb-8">
-              The product you&apos;re looking for doesn&apos;t exist or has been removed.
-            </p>
-            <a 
-              href="/en/products"
-              className="inline-block px-8 py-3 bg-black text-white text-sm uppercase tracking-[0.1em] hover:bg-[#333333] transition-colors"
-            >
-              Browse Products
-            </a>
-          </div>
-        </main>
-        <Footer />
-      </>
-    );
-  }
-
-  let relatedProducts: Product[] = [];
-  try {
-    const allProducts = await getProducts("EN", 8);
-    relatedProducts = allProducts
-      .filter((p: Product) => p.id !== product.id)
-      .slice(0, 4);
-  } catch (e) {
-    // Ignore error
-  }
-
-  return (
-    <>
-      <Header />
-      <main className="min-h-screen bg-white">
-        <ProductDetail 
-          product={product} 
-          relatedProducts={relatedProducts}
-          locale="EN"
-        />
-      </main>
-      <Footer />
-    </>
-  );
-}

src/app/en/products/page.tsx

@@ -1,91 +0,0 @@
-import { getProducts } from "@/lib/saleor";
-import { getTranslations } from "next-intl/server";
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-import ProductCard from "@/components/product/ProductCard";
-import { ChevronDown } from "lucide-react";
-
-export async function generateMetadata() {
-  return {
-    title: "Products - ManoonOils",
-    description: "Browse our collection of premium natural oils for hair and skin care.",
-  };
-}
-
-export default async function EnglishProductsPage() {
-  const t = await getTranslations("Products");
-  const products = await getProducts("UK");
-
-  return (
-    <>
-      <Header />
-
-      <main className="min-h-screen bg-white">
-        <div className="pt-[72px] lg:pt-[72px]">
-          <div className="border-b border-[#e5e5e5]">
-            <div className="container py-8 md:py-12">
-              <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
-                <div>
-                  <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-2 block">
-                    {t("collection")}
-                  </span>
-                  <h1 className="text-3xl md:text-4xl font-medium">
-                    {t("allProducts")}
-                  </h1>
-                </div>
-
-                <div className="flex items-center gap-3">
-                  <span className="text-sm text-[#666666]">
-                    {t("productsCount", { count: products.length })}
-                  </span>
-                  <div className="relative">
-                    <select
-                      className="appearance-none bg-transparent border border-[#e5e5e5] pl-4 pr-10 py-2 text-sm focus:outline-none focus:border-black cursor-pointer"
-                      defaultValue="featured"
-                    >
-                      <option value="featured">{t("featured")}</option>
-                      <option value="newest">{t("newest")}</option>
-                      <option value="price-low">{t("priceLow")}</option>
-                      <option value="price-high">{t("priceHigh")}</option>
-                    </select>
-                    <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none text-[#666666]" />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <section className="py-12 md:py-16">
-            <div className="container">
-              {products.length === 0 ? (
-                <div className="text-center py-20">
-                  <p className="text-[#666666] mb-4">
-                    {t("noProducts")}
-                  </p>
-                  <p className="text-sm text-[#999999]">
-                    {t("checkBack")}
-                  </p>
-                </div>
-              ) : (
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
-                  {products.map((product, index) => (
-                    <ProductCard
-                      key={product.id}
-                      product={product}
-                      index={index}
-                      locale="EN"
-                    />
-                  ))}
-                </div>
-              )}
-            </div>
-          </section>
-        </div>
-      </main>
-
-      <div className="pt-16">
-        <Footer />
-      </div>
-    </>
-  );
-}

src/app/fr/about/page.tsx

@@ -1,48 +0,0 @@
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-
-export const metadata = {
-  title: "À Propos - ManoonOils",
-  description: "Découvrez ManoonOils - notre histoire, notre mission et notre engagement pour la beauté naturelle.",
-};
-
-export default function AboutPage() {
-  return (
-    <>
-      <Header />
-      <main className="min-h-screen bg-white">
-        <div className="pt-[104px]">
-          <div className="container py-12 md:py-16">
-            <div className="max-w-2xl mx-auto text-center">
-              <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">Notre Histoire</span>
-              <h1 className="text-4xl md:text-5xl font-medium tracking-tight">À Propos de ManoonOils</h1>
-            </div>
-          </div>
-        </div>
-        <div className="relative h-[400px] md:h-[500px] overflow-hidden">
-          <img src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=2000&auto=format&fit=crop" alt="Production d'huiles naturelles" className="w-full h-full object-cover" />
-          <div className="absolute inset-0 bg-black/20" />
-        </div>
-        <section className="py-16 md:py-24">
-          <div className="container">
-            <div className="max-w-3xl mx-auto">
-              <div className="mb-16">
-                <p className="text-xl md:text-2xl text-[#1a1a1a] leading-relaxed mb-8">ManoonOils est né d'une passion pour la beauté naturelle et de la conviction que les meilleurs soins Cutanee viennent de la nature elle-même.</p>
-                <p className="text-[#666666] leading-relaxed">Nous croyons en le pouvoir des ingrédients naturels. Chaque huile de notre collection est soigneusement sélectionnée pour ses propriétés et bienfaits uniques. Des huiles nourrissantes qui restaurent la vitalité des cheveux aux sérums qui rajeunissent la peau, nous élaborons chaque produit avec amour et attention aux détails.</p>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 mb-16">
-                <div className="p-6 bg-[#f8f9fa]"><h3 className="text-lg font-medium mb-3">Ingrédients Naturels</h3><p className="text-[#666666] text-sm leading-relaxed">Nous utilisons uniquement les meilleurs ingrédients naturels, sourcés de manière éthique et durable auprès de fournisseurs de confiance du monde entier.</p></div>
-                <div className="p-6 bg-[#f8f9fa]"><h3 className="text-lg font-medium mb-3">Non Testé sur Animaux</h3><p className="text-[#666666] text-sm leading-relaxed">Nos produits ne sont jamais testés sur les animaux. Nous croyons en la beauté sans compromis.</p></div>
-                <div className="p-6 bg-[#f8f9fa]"><h3 className="text-lg font-medium mb-3">Emballage Durable</h3><p className="text-[#666666] text-sm leading-relaxed">Nous utilisons des matériaux d'emballage écologiques et minimisons les déchets tout au long de notre processus de production.</p></div>
-                <div className="p-6 bg-[#f8f9fa]"><h3 className="text-lg font-medium mb-3">Qualité Artisanale</h3><p className="text-[#666666] text-sm leading-relaxed">Chaque flacon est fabriqué à la main en petites quantités pour garantir la plus haute qualité et fraîcheur.</p></div>
-              </div>
-              <div className="text-center py-12 border-t border-b border-[#e5e5e5]"><span className="text-caption text-[#666666] mb-4 block">Notre Mission</span><blockquote className="text-2xl md:text-3xl font-medium tracking-tight">&ldquo;Fournir des produits naturels de qualité premium qui améliorent votre routine beauté quotidienne.&rdquo;</blockquote></div>
-              <div className="mt-16"><h2 className="text-2xl font-medium mb-6">Fait Main avec Amour</h2><p className="text-[#666666] leading-relaxed mb-6">Chaque flacon de ManoonOils est fabriqué avec soin. Nous produisons nos produits en petites quantités pour garantir la plus haute qualité et fraîcheur. Lorsque vous utilisez ManoonOils, vous pouvez être sûr d'utiliser quelque chose fait avec un véritable soin et expertise.</p><p className="text-[#666666] leading-relaxed">Notre voyage a commencé par une simple question: comment créer des produits qui soignent vraiment les cheveux et la peau? Aujourd'hui, nous continuons à innover tout en restant fidèles à notre engagement envers des solutions beauté naturelles et efficaces.</p></div>
-            </div>
-          </div>
-        </section>
-      </main>
-      <div className="pt-16"><Footer /></div>
-    </>
-  );
-}

src/app/fr/contact/page.tsx

@@ -1,89 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-import { Mail, MapPin, Truck, Check } from "lucide-react";
-
-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 (
-    <>
-      <Header />
-      <main className="min-h-screen bg-white">
-        <div className="pt-[104px]">
-          <div className="container py-12 md:py-16">
-            <div className="max-w-2xl mx-auto text-center">
-              <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">Contactez-Nous</span>
-              <h1 className="text-4xl md:text-5xl font-medium tracking-tight mb-4">Nous Contacter</h1>
-              <p className="text-[#666666]">Des questions? Nous serions ravis de vous entendre.</p>
-            </div>
-          </div>
-        </div>
-        <section className="py-12 md:py-16">
-          <div className="container">
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20">
-              <div>
-                <h2 className="text-2xl font-medium mb-6">Contactez-Nous</h2>
-                <p className="text-[#666666] mb-8 leading-relaxed">Nous sommes là pour aider! Que vous ayez des questions sur nos produits, besoin d'aide avec une commande, ou simplement voulez dire bonjour.</p>
-                <div className="space-y-6">
-                  <div className="flex items-start gap-4">
-                    <div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0"><Mail className="w-5 h-5 text-[#666666]" strokeWidth={1.5} /></div>
-                    <div><h3 className="font-medium mb-1">Email</h3><p className="text-[#666666] text-sm">hello@manoonoils.com</p><p className="text-[#999999] text-xs mt-1">Nous répondons sous 24 heures</p></div>
-                  </div>
-                  <div className="flex items-start gap-4">
-                    <div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0"><Truck className="w-5 h-5 text-[#666666]" strokeWidth={1.5} /></div>
-                    <div><h3 className="font-medium mb-1">Livraison</h3><p className="text-[#666666] text-sm">Livraison gratuite dès €50</p><p className="text-[#999999] text-xs mt-1">Livré sous 2-5 jours ouvrables</p></div>
-                  </div>
-                  <div className="flex items-start gap-4">
-                    <div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0"><MapPin className="w-5 h-5 text-[#666666]" strokeWidth={1.5} /></div>
-                    <div><h3 className="font-medium mb-1">Localisation</h3><p className="text-[#666666] text-sm">Serbie</p><p className="text-[#999999] text-xs mt-1">Expédition dans le monde entier</p></div>
-                  </div>
-                </div>
-              </div>
-              <div className="bg-[#f8f9fa] p-8 md:p-10">
-                {submitted ? (
-                  <div className="text-center py-12">
-                    <div className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4"><Check className="w-8 h-8 text-green-600" strokeWidth={1.5} /></div>
-                    <h3 className="text-xl font-medium mb-2">Merci!</h3>
-                    <p className="text-[#666666]">Votre message a été envoyé. Nous reviendrons vers vous bientôt.</p>
-                  </div>
-                ) : (
-                  <form onSubmit={handleSubmit} className="space-y-6">
-                    <div><label htmlFor="name" className="block text-sm font-medium mb-2">Nom</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 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors" placeholder="Votre nom" /></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 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors" placeholder="votre@email.com" /></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 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors resize-none" placeholder="Comment pouvons-nous vous aider?" /></div>
-                    <button type="submit" className="w-full py-4 bg-black text-white text-sm uppercase tracking-[0.1em] font-medium hover:bg-[#333333] transition-colors">Envoyer Le Message</button>
-                  </form>
-                )}
-              </div>
-            </div>
-          </div>
-        </section>
-        <section className="py-16 md:py-24 border-t border-[#e5e5e5]">
-          <div className="container">
-            <div className="max-w-3xl mx-auto">
-              <h2 className="text-2xl font-medium text-center mb-12">Questions Fréquentes</h2>
-              <div className="space-y-6">
-                {[
-                  { q: "Combien de temps dure la livraison?", a: "Les commandes sont généralement livrées sous 2-5 jours ouvrables pour la livraison nationale. Vous recevrez un numéro de suivi une fois votre commande expédiée." },
-                  { q: "Vos produits sont-ils 100% naturels?", a: "Oui! Toutes nos huiles sont 100% naturelles, pressées à froid et sans additifs, conservateurs ou parfums artificiels." },
-                  { q: "Quelle est votre politique de retour?", a: "Nous acceptons les retours dans les 14 jours suivant la livraison pour les produits non ouverts. Veuillez nous contacter si vous avez des problèmes avec votre commande." },
-                  { q: "Offrez-vous la vente en gros?", a: "Oui, nous proposons des prix de gros pour les commandes en vrac. Veuillez nous contacter à hello@manoonoils.com pour plus d'informations." }
-                ].map((faq, index) => (<div key={index} className="border-b border-[#e5e5e5] pb-6"><h3 className="font-medium mb-2">{faq.q}</h3><p className="text-[#666666] text-sm leading-relaxed">{faq.a}</p></div>))}
-              </div>
-            </div>
-          </div>
-        </section>
-      </main>
-      <div className="pt-16"><Footer /></div>
-    </>
-  );
-}

src/app/fr/page.tsx

@@ -1,117 +0,0 @@
-import { getProducts } from "@/lib/saleor";
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-import HeroVideo from "@/components/home/HeroVideo";
-import ProductCard from "@/components/product/ProductCard";
-import TrustBadges from "@/components/home/TrustBadges";
-import AsSeenIn from "@/components/home/AsSeenIn";
-import ProductReviews from "@/components/product/ProductReviews";
-import BeforeAfterGallery from "@/components/home/BeforeAfterGallery";
-import ProblemSection from "@/components/home/ProblemSection";
-import HowItWorks from "@/components/home/HowItWorks";
-
-export const metadata = {
-  title: "ManoonOils - Huiles Naturelles Premium pour Cheveux & Peau",
-  description:
-    "Découvrez notre collection premium d'huiles naturelles pour les soins capillaires et cutanés. Fait main avec amour en utilisant uniquement les meilleurs ingrédients.",
-};
-
-export default async function FrenchHomepage() {
-  let products: any[] = [];
-  try {
-    products = await getProducts("FR");
-  } catch (e) {
-    console.log("Failed to fetch products during build");
-  }
-
-  const featuredProducts = products?.slice(0, 4) || [];
-  const hasProducts = featuredProducts.length > 0;
-
-  return (
-    <>
-      <Header />
-      <main className="min-h-screen bg-white">
-        <HeroVideo />
-        <AsSeenIn />
-        <ProductReviews />
-        <TrustBadges />
-        <ProblemSection />
-        <BeforeAfterGallery />
-        <div id="main_content" className="scroll-mt-[72px] lg:scroll-mt-[72px]">
-          {hasProducts && (
-            <section className="py-24 px-4 sm:px-6 lg:px-8 bg-white">
-              <div className="max-w-7xl mx-auto">
-                <div className="text-center mb-16">
-                  <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">Notre Collection</span>
-                  <h2 className="text-3xl md:text-4xl font-medium mb-4">Huiles Naturelles Premium</h2>
-                  <p className="text-[#666666] max-w-xl mx-auto">Pressées à froid, pures et naturelles pour votre routine beauté quotidienne</p>
-                </div>
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
-                  {featuredProducts.map((product, index) => (
-                    <ProductCard key={product.id} product={product} index={index} locale="FR" />
-                  ))}
-                </div>
-                <div className="text-center mt-12">
-                  <a href="/fr/products" className="inline-block text-sm uppercase tracking-[0.1em] border-b border-black pb-1 hover:text-[#666666] hover:border-[#666666] transition-colors">Voir Tous Les Produits</a>
-                </div>
-              </div>
-            </section>
-          )}
-          <HowItWorks />
-          <section className="py-24 px-4 sm:px-6 lg:px-8 bg-[#f8f9fa]">
-            <div className="max-w-7xl mx-auto">
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
-                <div>
-                  <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">Notre Histoire</span>
-                  <h2 className="text-3xl md:text-4xl font-medium mb-6">Fait Main avec Amour</h2>
-                  <p className="text-[#666666] mb-6 leading-relaxed">Chaque flacon de ManoonOils est fabriqué avec soin en utilisant des méthodes traditionnelles transmises de génération en génération. Nous ne sélectionnons que les meilleurs ingrédients biologiques pour vous apporter des huiles qui nourrissent les cheveux et la peau.</p>
-                  <p className="text-[#666666] mb-8 leading-relaxed">Notre engagement envers la pureté signifie pas d'additifs, pas de préservatifs - juste la bonté de la nature sous sa forme la plus potente.</p>
-                  <a href="/fr/about" className="inline-block text-sm uppercase tracking-[0.1em] border-b border-black pb-1 hover:text-[#666666] hover:border-[#666666] transition-colors">En Savoir Plus</a>
-                </div>
-                <div className="relative aspect-[4/3] bg-[#e8f0f5] rounded-lg overflow-hidden">
-                  <img src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=800&auto=format&fit=crop" alt="Production d'huiles naturelles" className="w-full h-full object-cover" />
-                </div>
-              </div>
-            </div>
-          </section>
-          <section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-white to-[#faf9f7]">
-            <div className="max-w-7xl mx-auto">
-              <div className="text-center mb-16">
-                <span className="text-xs uppercase tracking-[0.3em] text-[#c9a962] mb-4 block font-medium">Pourquoi Nous Choisir</span>
-                <h2 className="text-3xl md:text-4xl lg:text-5xl font-medium text-[#1a1a1a]">La Différence Manoon</h2>
-                <div className="w-24 h-1 bg-gradient-to-r from-[#c9a962] to-[#FFD700] mx-auto mt-6 rounded-full" />
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
-                {[
-                  { title: "100% Naturel", description: "Huiles pures pressées à froid sans additifs ni préservatifs. Juste la bonté de la nature.", icon: (<svg className="w-10 h-10" viewBox="0 0 24 24" fill="none"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="#7eb89e"/><path stroke="#7eb89e" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>) },
-                  { title: "Artisanal", description: "Chaque lot est soigneusement préparé à la main pour garantir la plus haute qualité.", icon: (<svg className="w-10 h-10" viewBox="0 0 24 24" fill="none"><path stroke="#c9a962" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z"/></svg>) },
-                  { title: "Durable", description: "Ingrédients sourcés de manière éthique et emballage écologique pour une meilleure planète.", icon: (<svg className="w-10 h-10" viewBox="0 0 24 24" fill="none"><path stroke="#e8967a" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" d="M12.75 3.03v.568c0 .334.148.65.405.864l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 01-1.161.886l-.143.048a1.107 1.107 0 00-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 11-1.652.928l-.714-.093a1.125 1.125 0 00-1.906.172L4.5 15.75l-.612.153M12.75 3.031l.002-.004m0 0a8.955 8.955 0 00-4.943.834 8.974 8.974 0 004.943.834m4.943-.834a8.955 8.955 0 00-4.943-.834c2.687 0 5.18.948 7.161 2.664a8.974 8.974 0 014.943-.834z"/></svg>) },
-                ].map((benefit, index) => (
-                  <div key={index} className="relative text-center p-8 bg-white rounded-3xl shadow-lg border border-[#f0ede8] hover:shadow-2xl hover:border-[#c9a962]/30 transition-all duration-500 group">
-                    <div className="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-[#faf9f7] to-[#f5f0e8] flex items-center justify-center shadow-md border border-[#e8e4dc] group-hover:border-[#c9a962]/50 transition-colors duration-300">{benefit.icon}</div>
-                    <h3 className="text-xl font-semibold text-[#1a1a1a] mb-3">{benefit.title}</h3>
-                    <p className="text-sm text-[#666666] leading-relaxed">{benefit.description}</p>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </section>
-          <section className="py-28 lg:py-32 px-4 sm:px-6 lg:px-8 bg-[#1a1a1a] text-white">
-            <div className="max-w-7xl mx-auto">
-              <div className="max-w-2xl mx-auto text-center">
-                <span className="text-xs uppercase tracking-[0.2em] text-white/60 mb-3 block">Restez Connecté</span>
-                <h2 className="text-3xl md:text-4xl lg:text-5xl font-medium mb-6">Rejoignez Notre Communauté</h2>
-                <p className="text-white/70 mb-10 mx-auto text-lg">Abonnez-vous pour recevoir des offres exclusives, des conseils beauté et être le premier à connaître les nouveaux produits.</p>
-                <form className="flex flex-col sm:flex-row items-stretch justify-center max-w-md mx-auto gap-0">
-                  <input type="email" placeholder="Entrez votre email" className="flex-1 min-w-0 px-5 h-14 bg-white/10 border border-white/20 border-b-0 sm:border-b border-r-0 sm:border-r border-white/20 text-white placeholder:text-white/50 focus:border-white focus:outline-none transition-colors text-base text-center sm:text-left rounded-t sm:rounded-l sm:rounded-tr-none" />
-                  <button type="submit" className="px-8 h-14 bg-white text-black text-sm uppercase tracking-[0.1em] font-medium hover:bg-white/90 transition-colors whitespace-nowrap flex-shrink-0 rounded-b sm:rounded-r sm:rounded-bl-none">S'abonner</button>
-                </form>
-              </div>
-            </div>
-          </section>
-        </div>
-      </main>
-      <Footer />
-    </>
-  );
-}

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

@@ -1,83 +0,0 @@
-import { getProductBySlug, getProducts, getLocalizedProduct } from "@/lib/saleor";
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-import ProductDetail from "@/components/product/ProductDetail";
-import type { Product } from "@/types/saleor";
-
-interface ProductPageProps {
-  params: Promise<{ slug: string }>;
-}
-
-export async function generateStaticParams() {
-  try {
-    const products = await getProducts("FR", 100);
-    const params: Array<{ slug: string }> = [];
-    products.forEach((product: Product) => {
-      if (product.translation?.slug) {
-        params.push({ slug: product.translation.slug });
-      }
-    });
-    return params;
-  } catch (e) {
-    return [];
-  }
-}
-
-export async function generateMetadata({ params }: ProductPageProps) {
-  const { slug } = await params;
-  const product = await getProductBySlug(slug, "FR");
-  
-  if (!product) {
-    return { title: "Produit Non Trouvé" };
-  }
-  
-  const localized = getLocalizedProduct(product, "FR");
-  
-  return {
-    title: localized.name,
-    description: localized.seoDescription || localized.description?.slice(0, 160),
-    openGraph: {
-      title: localized.name,
-      description: localized.seoDescription || localized.description?.slice(0, 160),
-      images: product.media?.[0]?.url ? [product.media[0].url] : [],
-      type: "website",
-    },
-  };
-}
-
-export default async function FrenchProductPage({ params }: ProductPageProps) {
-  const { slug } = await params;
-  const product = await getProductBySlug(slug, "FR");
-  
-  if (!product) {
-    return (
-      <>
-        <Header />
-        <main className="min-h-screen bg-white">
-          <div className="pt-[180px] lg:pt-[200px] pb-20 text-center px-4">
-            <h1 className="text-2xl font-medium mb-4">Produit non trouvé</h1>
-            <p className="text-[#666666] mb-8">Le produit que vous recherchez n'existe pas ou a été supprimé.</p>
-            <a href="/fr/products" className="inline-block px-8 py-3 bg-black text-white text-sm uppercase tracking-[0.1em] hover:bg-[#333333] transition-colors">Parcourir Les Produits</a>
-          </div>
-        </main>
-        <Footer />
-      </>
-    );
-  }
-
-  let relatedProducts: Product[] = [];
-  try {
-    const allProducts = await getProducts("FR", 8);
-    relatedProducts = allProducts.filter((p: Product) => p.id !== product.id).slice(0, 4);
-  } catch (e) {}
-
-  return (
-    <>
-      <Header />
-      <main className="min-h-screen bg-white">
-        <ProductDetail product={product} relatedProducts={relatedProducts} locale="FR" />
-      </main>
-      <Footer />
-    </>
-  );
-}

src/app/fr/products/page.tsx

@@ -1,63 +0,0 @@
-import { getProducts } from "@/lib/saleor";
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-import ProductCard from "@/components/product/ProductCard";
-import { ChevronDown } from "lucide-react";
-
-export const metadata = {
-  title: "Produits - ManoonOils",
-  description: "Parcourez notre collection d'huiles naturelles premium pour les soins capillaires et cutanés.",
-};
-
-export default async function FrenchProductsPage() {
-  const products = await getProducts("FR");
-
-  return (
-    <>
-      <Header />
-      <main className="min-h-screen bg-white">
-        <div className="pt-[72px] lg:pt-[72px]">
-          <div className="border-b border-[#e5e5e5]">
-            <div className="container py-8 md:py-12">
-              <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
-                <div>
-                  <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-2 block">Notre Collection</span>
-                  <h1 className="text-3xl md:text-4xl font-medium">Tous Les Produits</h1>
-                </div>
-                <div className="flex items-center gap-3">
-                  <span className="text-sm text-[#666666]">{products.length} produits</span>
-                  <div className="relative">
-                    <select className="appearance-none bg-transparent border border-[#e5e5e5] pl-4 pr-10 py-2 text-sm focus:outline-none focus:border-black cursor-pointer" defaultValue="featured">
-                      <option value="featured">En Vedette</option>
-                      <option value="newest">Nouveautés</option>
-                      <option value="price-low">Prix: Croissant</option>
-                      <option value="price-high">Prix: Décroissant</option>
-                    </select>
-                    <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none text-[#666666]" />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <section className="py-12 md:py-16">
-            <div className="container">
-              {products.length === 0 ? (
-                <div className="text-center py-20">
-                  <p className="text-[#666666] mb-4">Aucun produit disponible</p>
-                  <p className="text-sm text-[#999999]">Veuillez revenir plus tard pour les nouveaux arrivages.</p>
-                </div>
-              ) : (
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
-                  {products.map((product, index) => (
-                    <ProductCard key={product.id} product={product} index={index} locale="FR" />
-                  ))}
-                </div>
-              )}
-            </div>
-          </section>
-        </div>
-      </main>
-      <div className="pt-16"><Footer /></div>
-    </>
-  );
-}

src/app/layout.tsx

@@ -1,8 +1,6 @@
 import "./globals.css";
 import type { Metadata, Viewport } from "next";
 import ErrorBoundary from "@/components/providers/ErrorBoundary";
-import { NextIntlClientProvider } from "next-intl";
-import { getMessages } from "next-intl/server";
 
 export const metadata: Metadata = {
   title: {
@@ -25,27 +23,18 @@ export const viewport: Viewport = {
   maximumScale: 5,
 };
 
-const suppressHydrationWarning = true;
-
 export default async function RootLayout({
   children,
-  params,
 }: {
   children: React.ReactNode;
-  params: Promise<{ locale: string }>;
 }) {
-  const { locale } = await params;
-  const messages = await getMessages();
-
   return (
-    <html lang={locale} suppressHydrationWarning>
+    <html suppressHydrationWarning>
       <body className="antialiased" suppressHydrationWarning>
         <ErrorBoundary>
-          <NextIntlClientProvider messages={messages}>
-            {children}
-          </NextIntlClientProvider>
+          {children}
         </ErrorBoundary>
       </body>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,215 +1,5 @@
-import { getProducts } from "@/lib/saleor";
-import { getTranslations } from "next-intl/server";
-import Header from "@/components/layout/Header";
-import Footer from "@/components/layout/Footer";
-import HeroVideo from "@/components/home/HeroVideo";
-import ProductCard from "@/components/product/ProductCard";
-import TrustBadges from "@/components/home/TrustBadges";
-import AsSeenIn from "@/components/home/AsSeenIn";
-import ProductReviews from "@/components/product/ProductReviews";
-import BeforeAfterGallery from "@/components/home/BeforeAfterGallery";
-import ProblemSection from "@/components/home/ProblemSection";
-import HowItWorks from "@/components/home/HowItWorks";
+import { redirect } from "next/navigation";
 
-export async function generateMetadata() {
-  const t = await getTranslations("Home");
-  return {
-    title: "ManoonOils - Premium prirodna ulja za negu kose i kože",
-    description: "Otkrijte našu premium kolekciju prirodnih ulja za negu kose i kože.",
-  };
-}
-
-export default async function Homepage() {
-  const t = await getTranslations("Home");
-  const tBenefits = await getTranslations("Benefits");
-  
-  let products: any[] = [];
-  try {
-    products = await getProducts("SR");
-  } catch (e) {
-    console.log("Failed to fetch products during build");
-  }
-
-  const featuredProducts = products?.slice(0, 4) || [];
-  const hasProducts = featuredProducts.length > 0;
-
-  return (
-    <>
-      <Header />
-
-      <main className="min-h-screen bg-white">
-        <HeroVideo />
-
-        <AsSeenIn />
-
-        <ProductReviews />
-
-        <TrustBadges />
-
-        <ProblemSection />
-
-        <BeforeAfterGallery />
-
-        <div id="main-content" className="scroll-mt-[72px] lg:scroll-mt-[72px]">
-          {hasProducts && (
-            <section className="py-24 px-4 sm:px-6 lg:px-8 bg-white">
-              <div className="max-w-7xl mx-auto">
-                <div className="text-center mb-16">
-                  <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
-                    {t("collection")}
-                  </span>
-                  <h2 className="text-3xl md:text-4xl font-medium mb-4">
-                    {t("premiumOils")}
-                  </h2>
-                  <p className="text-[#666666] max-w-xl mx-auto">
-                    {t("oilsDescription")}
-                  </p>
-                </div>
-
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
-                  {featuredProducts.map((product, index) => (
-                    <ProductCard key={product.id} product={product} index={index} locale="SR" />
-                  ))}
-                </div>
-
-                <div className="text-center mt-12">
-                  <a
-                    href="/products"
-                    className="inline-block text-sm uppercase tracking-[0.1em] border-b border-black pb-1 hover:text-[#666666] hover:border-[#666666] transition-colors"
-                  >
-                    {t("viewAll")}
-                  </a>
-                </div>
-              </div>
-            </section>
-          )}
-
-          <HowItWorks />
-
-          <section className="py-24 px-4 sm:px-6 lg:px-8 bg-[#f8f9fa]">
-            <div className="max-w-7xl mx-auto">
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
-                <div>
-                  <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
-                    {t("ourStory")}
-                  </span>
-                  <h2 className="text-3xl md:text-4xl font-medium mb-6">
-                    {t("handmadeWithLove")}
-                  </h2>
-                  <p className="text-[#666666] mb-6 leading-relaxed">
-                    {t("storyText1")}
-                  </p>
-                  <p className="text-[#666666] mb-8 leading-relaxed">
-                    {t("storyText2")}
-                  </p>
-                  <a
-                    href="/about"
-                    className="inline-block text-sm uppercase tracking-[0.1em] border-b border-black pb-1 hover:text-[#666666] hover:border-[#666666] transition-colors"
-                  >
-                    {t("learnMore")}
-                  </a>
-                </div>
-                <div className="relative aspect-[4/3] bg-[#e8f0f5] rounded-lg overflow-hidden">
-                  <img
-                    src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=800&auto=format&fit=crop"
-                    alt="Proizvodnja prirodnih ulja"
-                    className="w-full h-full object-cover"
-                  />
-                </div>
-              </div>
-            </div>
-          </section>
-
-          <section className="py-24 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-white to-[#faf9f7]">
-            <div className="max-w-7xl mx-auto">
-              <div className="text-center mb-16">
-                <span className="text-xs uppercase tracking-[0.3em] text-[#c9a962] mb-4 block font-medium">
-                  {t("whyChooseUs")}
-                </span>
-                <h2 className="text-3xl md:text-4xl lg:text-5xl font-medium text-[#1a1a1a]">
-                  {t("manoonDifference")}
-                </h2>
-                <div className="w-24 h-1 bg-gradient-to-r from-[#c9a962] to-[#FFD700] mx-auto mt-6 rounded-full" />
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
-                {[
-                  {
-                    title: tBenefits("natural"),
-                    description: tBenefits("naturalDesc"),
-                    icon: (
-                      <svg className="w-10 h-10" viewBox="0 0 24 24" fill="none">
-                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="#7eb89e"/>
-                        <path stroke="#7eb89e" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                      </svg>
-                    ),
-                  },
-                  {
-                    title: tBenefits("handcrafted"),
-                    description: tBenefits("handcraftedDesc"),
-                    icon: (
-                      <svg className="w-10 h-10" viewBox="0 0 24 24" fill="none">
-                        <path stroke="#c9a962" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z"/>
-                      </svg>
-                    ),
-                  },
-                  {
-                    title: tBenefits("sustainable"),
-                    description: tBenefits("sustainableDesc"),
-                    icon: (
-                      <svg className="w-10 h-10" viewBox="0 0 24 24" fill="none">
-                        <path stroke="#e8967a" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" d="M12.75 3.03v.568c0 .334.148.65.405.864l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 01-1.161.886l-.143.048a1.107 1.107 0 00-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 11-1.652.928l-.714-.093a1.125 1.125 0 00-1.906.172L4.5 15.75l-.612.153M12.75 3.031l.002-.004m0 0a8.955 8.955 0 00-4.943.834 8.974 8.974 0 004.943.834m4.943-.834a8.955 8.955 0 00-4.943-.834c2.687 0 5.18.948 7.161 2.664a8.974 8.974 0 014.943-.834z"/>
-                      </svg>
-                    ),
-                  },
-                ].map((benefit, index) => (
-                  <div
-                    key={index}
-                    className="relative text-center p-8 bg-white rounded-3xl shadow-lg border border-[#f0ede8] hover:shadow-2xl hover:border-[#c9a962]/30 transition-all duration-500 group"
-                  >
-                    <div className="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-[#faf9f7] to-[#f5f0e8] flex items-center justify-center shadow-md border border-[#e8e4dc] group-hover:border-[#c9a962]/50 transition-colors duration-300">
-                      {benefit.icon}
-                    </div>
-                    <h3 className="text-xl font-semibold text-[#1a1a1a] mb-3">{benefit.title}</h3>
-                    <p className="text-sm text-[#666666] leading-relaxed">{benefit.description}</p>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </section>
-
-          <section className="py-28 lg:py-32 px-4 sm:px-6 lg:px-8 bg-[#1a1a1a] text-white">
-            <div className="max-w-7xl mx-auto">
-              <div className="max-w-2xl mx-auto text-center">
-                <span className="text-xs uppercase tracking-[0.2em] text-white/60 mb-3 block">
-                  {t("stayConnected")}
-                </span>
-                <h2 className="text-3xl md:text-4xl lg:text-5xl font-medium mb-6">
-                  {t("joinCommunity")}
-                </h2>
-                <p className="text-white/70 mb-10 mx-auto text-lg">
-                  {t("newsletterText")}
-                </p>
-                <form className="flex flex-col sm:flex-row items-stretch justify-center max-w-md mx-auto gap-0">
-                  <input
-                    type="email"
-                    placeholder={t("emailPlaceholder")}
-                    className="flex-1 min-w-0 px-5 h-14 bg-white/10 border border-white/20 border-b-0 sm:border-b border-r-0 sm:border-r border-white/20 text-white placeholder:text-white/50 focus:border-white focus:outline-none transition-colors text-base text-center sm:text-left rounded-t sm:rounded-l sm:rounded-tr-none"
-                  />
-                  <button
-                    type="submit"
-                    className="px-8 h-14 bg-white text-black text-sm uppercase tracking-[0.1em] font-medium hover:bg-white/90 transition-colors whitespace-nowrap flex-shrink-0 rounded-b sm:rounded-r sm:rounded-bl-none"
-                  >
-                    {t("subscribe")}
-                  </button>
-                </form>
-              </div>
-            </div>
-          </section>
-        </div>
-      </main>
-
-      <Footer />
-    </>
-  );
-}
+export default function RootPage() {
+  redirect("/sr");
+}