feat: implement proper i18n translations for Serbian and English

- Add comprehensive Serbian translation file (sr.json) with all UI strings
- Add comprehensive English translation file (en.json) with all UI strings
- Update Serbian root pages (/, /products, /products/[slug], /about, /contact) to use getTranslations()
- Update English pages (/en/*) to use getTranslations()
- Replace all hardcoded strings with translation keys

src/app/products/page.tsx

@@ -1,64 +1,52 @@
 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 const metadata = {
-  title: "Products - ManoonOils",
-  description: "Browse our collection of premium natural oils for hair and skin care.",
-};
-
-interface ProductsPageProps {
-  params: Promise<{ locale: string }>;
+export async function generateMetadata() {
+  return {
+    title: "Proizvodi - ManoonOils",
+    description: "Pregledajte našu kolekciju premium prirodnih ulja za negu kose i kože.",
+  };
 }
 
-export default async function ProductsPage({ params }: ProductsPageProps) {
-  const { locale = "sr" } = await params;
-  const products = await getProducts(locale.toUpperCase());
-  const localeUpper = locale.toUpperCase();
+export default async function ProductsPage() {
+  const t = await getTranslations("Products");
+  const products = await getProducts("SR");
 
   return (
     <>
       <Header />
-      
+
       <main className="min-h-screen bg-white">
-        {/* Page Header */}
         <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">
-                    {localeUpper === "EN" ? "Our Collection" : "Naša kolekcija"}
+                    {t("collection")}
                   </span>
                   <h1 className="text-3xl md:text-4xl font-medium">
-                    {localeUpper === "EN" ? "All Products" : "Svi Proizvodi"}
+                    {t("allProducts")}
                   </h1>
                 </div>
-                
-                {/* Sort Dropdown */}
+
                 <div className="flex items-center gap-3">
                   <span className="text-sm text-[#666666]">
-                    {products.length} {localeUpper === "EN" ? "products" : "proizvoda"}
+                    {t("productsCount", { count: products.length })}
                   </span>
                   <div className="relative">
-                    <select 
+                    <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">
-                        {localeUpper === "EN" ? "Featured" : "Istaknuto"}
-                      </option>
-                      <option value="newest">
-                        {localeUpper === "EN" ? "Newest" : "Najnovije"}
-                      </option>
-                      <option value="price-low">
-                        {localeUpper === "EN" ? "Price: Low to High" : "Cena: Rastuće"}
-                      </option>
-                      <option value="price-high">
-                        {localeUpper === "EN" ? "Price: High to Low" : "Cena: Opadajuće"}
-                      </option>
+                      <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>
@@ -67,28 +55,25 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
             </div>
           </div>
 
-          {/* Products Grid */}
           <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">
-                    {localeUpper === "EN" ? "No products available" : "Nema dostupnih proizvoda"}
+                    {t("noProducts")}
                   </p>
                   <p className="text-sm text-[#999999]">
-                    {localeUpper === "EN" 
-                      ? "Please check back later for new arrivals." 
-                      : "Molimo proverite ponovo kasnije za nove proizvode."}
+                    {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} 
+                    <ProductCard
+                      key={product.id}
+                      product={product}
                       index={index}
-                      locale={localeUpper}
+                      locale="SR"
                     />
                   ))}
                 </div>
@@ -97,7 +82,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
           </section>
         </div>
       </main>
-      
+
       <div className="pt-16">
         <Footer />
       </div>