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]/products/page.tsx

@@ -0,0 +1,103 @@
+import { getProducts } from "@/lib/saleor";
+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";
+
+interface ProductsPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: ProductsPageProps) {
+  const { locale } = await params;
+  return {
+    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({ params }: ProductsPageProps) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const t = await getTranslations("Products");
+  const productLocale = locale === "sr" ? "SR" : "EN";
+  const products = await getProducts(productLocale);
+
+  return (
+    <>
+      <Header locale={locale} />
+
+      <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={productLocale}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          </section>
+        </div>
+      </main>
+
+      <div className="pt-16">
+        <Footer locale={locale} />
+      </div>
+    </>
+  );
+}