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
2026-03-23 20:59:33 +02:00
parent 5bd1a0f167
commit 92b6c830e1
47 changed files with 2175 additions and 2881 deletions
--- a/src/components/product/ProductBenefits.tsx
+++ b/src/components/product/ProductBenefits.tsx
@@ -1,55 +1,58 @@
 "use client";

 import { motion } from "framer-motion";
+import { useTranslations } from "next-intl";

 interface ProductBenefitsProps {
  locale?: string;
 }

-const benefits = [
-  {
-    icon: (
-      <svg className="w-10 h-10" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}>
-        <path stroke="#c9a962" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
-        <path stroke="#c9a962" strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
-      </svg>
-    ),
-    title: "Pure & Natural",
-    description: "100% natural ingredients with no additives or preservatives",
-  },
-  {
-    icon: (
-      <svg className="w-10 h-10" viewBox="0 0 24 24" fill="none">
-        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#e8967a"/>
-        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" stroke="#c9a962" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-      </svg>
-    ),
-    title: "Cruelty Free",
-    description: "Never tested on animals, ethically sourced ingredients",
-  },
-  {
-    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 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" stroke="#c9a962" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-      </svg>
-    ),
-    title: "Made with Love",
-    description: "Handcrafted in small batches for maximum quality",
-  },
-  {
-    icon: (
-      <svg className="w-10 h-10" viewBox="0 0 24 24" fill="none">
-        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="#c9a962"/>
-        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="#b8944f" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-      </svg>
-    ),
-    title: "Visible Results",
-    description: "See noticeable improvements in 4-6 weeks",
-  },
-];
-
 export default function ProductBenefits({ locale = "SR" }: ProductBenefitsProps) {
+  const t = useTranslations("ProductBenefits");
+
+  const benefits = [
+    {
+      icon: (
+        <svg className="w-10 h-10" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}>
+          <path stroke="#c9a962" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
+          <path stroke="#c9a962" strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+        </svg>
+      ),
+      title: t("pureNatural"),
+      description: t("pureNaturalDesc"),
+    },
+    {
+      icon: (
+        <svg className="w-10 h-10" viewBox="0 0 24 24" fill="none">
+          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#e8967a"/>
+          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" stroke="#c9a962" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      ),
+      title: t("crueltyFree"),
+      description: t("crueltyFreeDesc"),
+    },
+    {
+      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 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" stroke="#c9a962" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      ),
+      title: t("madeWithLove"),
+      description: t("madeWithLoveDesc"),
+    },
+    {
+      icon: (
+        <svg className="w-10 h-10" viewBox="0 0 24 24" fill="none">
+          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="#c9a962"/>
+          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="#b8944f" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      ),
+      title: t("visibleResults"),
+      description: t("visibleResultsDesc"),
+    },
+  ];
+
  return (
    <section className="py-20 bg-gradient-to-b from-white to-[#faf9f7]">
      <div className="container mx-auto px-4">
@@ -61,10 +64,10 @@ export default function ProductBenefits({ locale = "SR" }: ProductBenefitsProps)
          transition={{ duration: 0.6 }}
        >
          <span className="text-xs uppercase tracking-[0.2em] text-[#c9a962] mb-3 block font-medium">
-            {locale === "EN" ? "Why Choose This Product" : "Zašto odabrati ovaj proizvod"}
+            {t("whyChoose")}
          </span>
          <h2 className="text-3xl md:text-4xl font-medium">
-            {locale === "EN" ? "The Manoon Difference" : "Manoon razlika"}
+            {t("manoonDifference")}
          </h2>
        </motion.div>

@@ -90,4 +93,4 @@ export default function ProductBenefits({ locale = "SR" }: ProductBenefitsProps)
      </div>
    </section>
  );
-}
+}
--- a/src/components/product/ProductCard.tsx
+++ b/src/components/product/ProductCard.tsx
@@ -3,6 +3,7 @@
 import { motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 import type { Product } from "@/types/saleor";
 import { getProductPrice, getProductImage, getLocalizedProduct } from "@/lib/saleor";

@@ -13,10 +14,12 @@ interface ProductCardProps {
 }

 export default function ProductCard({ product, index = 0, locale = "SR" }: ProductCardProps) {
+  const t = useTranslations("ProductCard");
  const image = getProductImage(product);
  const price = getProductPrice(product);
  const localized = getLocalizedProduct(product, locale);
  const isAvailable = product.variants?.[0]?.quantityAvailable > 0;
+  const urlLocale = locale === "SR" ? "sr" : "en";

  return (
    <motion.div
@@ -25,8 +28,7 @@ export default function ProductCard({ product, index = 0, locale = "SR" }: Produ
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: index * 0.1 }}
    >
-      <Link href={`/products/${localized.slug}`} className="group block">
-        {/* Image Container */}
+      <Link href={`/${urlLocale}/products/${localized.slug}`} className="group block">
        <div className="relative w-full aspect-square bg-[#f8f9fa] overflow-hidden mb-4">
          {image ? (
            <img
@@ -37,44 +39,40 @@ export default function ProductCard({ product, index = 0, locale = "SR" }: Produ
            />
          ) : (
            <div className="absolute inset-0 flex items-center justify-center text-[#999999]">
-              <span className="text-sm">No image</span>
+              <span className="text-sm">{t("noImage")}</span>
            </div>
          )}
-          
-          {/* Out of Stock Overlay */}
+
          {!isAvailable && (
            <div className="absolute inset-0 bg-white/80 flex items-center justify-center">
              <span className="text-sm uppercase tracking-[0.1em] text-[#666666]">
-                {locale === "EN" ? "Out of Stock" : "Nema na stanju"}
+                {t("outOfStock")}
              </span>
            </div>
          )}

-          {/* Hover Quick Add (optional) */}
          <div className="absolute inset-x-0 bottom-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
-            <button 
+            <button
              className="w-full py-3 bg-black text-white text-xs uppercase tracking-[0.1em] hover:bg-[#333333] transition-colors"
              onClick={(e) => {
                e.preventDefault();
-                // Quick add functionality can be added here
              }}
            >
-              {locale === "EN" ? "Quick Add" : "Dodaj u korpu"}
+              {t("quickAdd")}
            </button>
          </div>
        </div>
-        
-        {/* Product Info */}
+
        <div className="text-center">
          <h3 className="text-[15px] font-medium text-[#1a1a1a] mb-1 group-hover:text-[#666666] transition-colors line-clamp-1">
            {localized.name}
          </h3>
-          
+
          <p className="text-[14px] text-[#666666]">
-            {price || (locale === "EN" ? "Contact for price" : "Kontaktirajte za cenu")}
+            {price || t("contactForPrice")}
          </p>
        </div>
      </Link>
    </motion.div>
  );
-}
+}
--- a/src/components/product/ProductDetail.tsx
+++ b/src/components/product/ProductDetail.tsx
@@ -5,6 +5,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { motion, AnimatePresence } from "framer-motion";
 import { ChevronDown, Star, Minus, Plus } from "lucide-react";
+import { useTranslations } from "next-intl";
 import type { Product } from "@/types/saleor";
 import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
 import { getProductPrice, getProductPriceAmount, getLocalizedProduct, formatPrice } from "@/lib/saleor";
@@ -23,14 +24,13 @@ interface ProductDetailProps {
  locale?: string;
 }

-// Expandable Section Component
-function ExpandableSection({ 
-  title, 
-  children, 
-  defaultOpen = false 
-}: { 
-  title: string; 
-  children: React.ReactNode; 
+function ExpandableSection({
+  title,
+  children,
+  defaultOpen = false
+}: {
+  title: string;
+  children: React.ReactNode;
  defaultOpen?: boolean;
 }) {
  const [isOpen, setIsOpen] = useState(defaultOpen);
@@ -44,8 +44,8 @@ function ExpandableSection({
        <span className="text-sm uppercase tracking-[0.1em] font-medium">
          {title}
        </span>
-        <ChevronDown 
-          className={`w-5 h-5 transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`} 
+        <ChevronDown
+          className={`w-5 h-5 transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`}
          strokeWidth={1.5}
        />
      </button>
@@ -68,7 +68,6 @@ function ExpandableSection({
  );
 }

-// Star Rating Component
 function StarRating({ rating = 5, count = 0 }: { rating?: number; count?: number }) {
  return (
    <div className="flex items-center gap-1">
@@ -88,13 +87,14 @@ function StarRating({ rating = 5, count = 0 }: { rating?: number; count?: number
 }

 export default function ProductDetail({ product, relatedProducts, locale = "SR" }: ProductDetailProps) {
+  const t = useTranslations("ProductDetail");
+  const tProduct = useTranslations("Product");
  const [selectedImage, setSelectedImage] = useState(0);
  const [quantity, setQuantity] = useState(1);
  const [isAdding, setIsAdding] = useState(false);
  const [urgencyIndex, setUrgencyIndex] = useState(0);
  const { addLine, openCart } = useSaleorCheckoutStore();

-  // Cycle through urgency messages
  useEffect(() => {
    const interval = setInterval(() => {
      setUrgencyIndex(prev => (prev + 1) % 3);
@@ -103,22 +103,21 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
  }, []);

  const urgencyMessages = [
-    { icon: "🚀", text: "Hurry up! 500+ items sold in the last 3 days!" },
-    { icon: "🛒", text: "In the carts of 2.5K people - buy before its gone!" },
-    { icon: "👀", text: "7,562 people viewed this product in the last 24 hours!" },
+    { icon: "🚀", text: t("urgency1") },
+    { icon: "🛒", text: t("urgency2") },
+    { icon: "👀", text: t("urgency3") },
  ];

  const localized = getLocalizedProduct(product, locale);
  const variant = product.variants?.[0];
-  
-  // Get all images from media
-  const images = product.media?.length > 0 
+
+  const images = product.media?.length > 0
    ? product.media.filter(m => m.type === "IMAGE")
    : [{ id: "0", url: "/placeholder-product.jpg", alt: localized.name, type: "IMAGE" as const }];

  const handleAddToCart = async () => {
    if (!variant?.id) return;
-    
+
    setIsAdding(true);
    try {
      await addLine(variant.id, quantity);
@@ -132,13 +131,11 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
  const price = getProductPrice(product);
  const priceAmount = getProductPriceAmount(product);
  const originalPrice = priceAmount > 0 ? formatPrice(Math.round(priceAmount * 1.30)) : null;
-  
-  // Extract short description (first sentence or first 100 chars)
-  const shortDescription = localized.description 
+
+  const shortDescription = localized.description
    ? localized.description.split('.')[0] + '.'
    : locale === "EN" ? "Premium natural oil for your beauty routine." : "Premium prirodno ulje za vašu rutinu lepote.";

-  // Parse benefits from product metadata or use defaults
  const benefits = product.metadata?.find(m => m.key === "benefits")?.value?.split(',') || [
    locale === "EN" ? "Natural" : "Prirodno",
    locale === "EN" ? "Organic" : "Organsko",
@@ -148,12 +145,11 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
  return (
    <>
      <section className="min-h-screen" id="product-detail">
-        {/* Breadcrumb - with proper top padding for fixed header */}
        <div className="border-b border-[#e5e5e5] pt-[72px] lg:pt-[72px]">
          <div className="container py-5">
            <nav className="flex items-center gap-2 text-sm">
-              <Link href="/" className="text-[#666666] hover:text-black transition-colors">
-                {locale === "EN" ? "Home" : "Početna"}
+              <Link href={`/${locale.toLowerCase()}`} className="text-[#666666] hover:text-black transition-colors">
+                {t("home")}
              </Link>
              <span className="text-[#999999]">/</span>
              <span className="text-[#1a1a1a]">{localized.name}</span>
@@ -161,17 +157,14 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
          </div>
        </div>

-        {/* Product Content */}
        <div className="container py-12 lg:py-16">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20">
-            {/* Image Gallery - Left Side */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.6 }}
              className="flex flex-col md:flex-row gap-4"
            >
-              {/* Thumbnails - Vertical on Desktop, Hidden on Mobile */}
              {images.length > 1 && (
                <div className="hidden md:flex flex-col gap-3 w-20 flex-shrink-0">
                  {images.map((image, index) => (
@@ -179,8 +172,8 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
                      key={image.id}
                      onClick={() => setSelectedImage(index)}
                      className={`relative aspect-square w-full overflow-hidden border-2 transition-colors ${
-                        selectedImage === index 
-                          ? "border-black" 
+                        selectedImage === index
+                          ? "border-black"
                          : "border-transparent hover:border-[#999999]"
                      }`}
                    >
@@ -194,18 +187,15 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
                </div>
              )}

-              {/* Main Image */}
              <div className="relative w-full aspect-square bg-[#f8f9fa] overflow-hidden flex-1">
                <img
                  src={images[selectedImage].url}
                  alt={images[selectedImage].alt || localized.name}
                  className="w-full h-full object-cover"
                />
-                
-                {/* Carousel Navigation - Mobile Only */}
+
                {images.length > 1 && (
                  <>
-                    {/* Left Arrow */}
                    <button
                      onClick={() => setSelectedImage(prev => prev === 0 ? images.length - 1 : prev - 1)}
                      className="absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/80 hover:bg-white rounded-full flex items-center justify-center shadow-md transition-all hover:scale-110 md:hidden"
@@ -215,8 +205,7 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                      </svg>
                    </button>
-                    
-                    {/* Right Arrow */}
+
                    <button
                      onClick={() => setSelectedImage(prev => prev === images.length - 1 ? 0 : prev + 1)}
                      className="absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/80 hover:bg-white rounded-full flex items-center justify-center shadow-md transition-all hover:scale-110 md:hidden"
@@ -226,8 +215,7 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                      </svg>
                    </button>
-                    
-                    {/* Dot Indicators - Mobile Only */}
+
                    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 md:hidden">
                      {images.map((_, index) => (
                        <button
@@ -245,14 +233,12 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
              </div>
            </motion.div>

-            {/* Product Info - Right Side */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="lg:pl-8"
            >
-              {/* Urgency Sales Banner */}
              <motion.div
                key={urgencyIndex}
                initial={{ opacity: 0, y: -10 }}
@@ -265,26 +251,22 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
                {urgencyMessages[urgencyIndex].text}
              </motion.div>

-              {/* Product Name */}
              <h1 className="text-3xl md:text-4xl font-medium mb-4 tracking-tight">
                {localized.name}
              </h1>

-              {/* Short Description */}
              <p className="text-[#666666] leading-relaxed mb-4">
                {shortDescription}
              </p>

-              {/* Stock Warning - Static */}
              <div className="flex items-center justify-start gap-2 mb-6">
                <span className="relative flex h-3 w-3">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
                </span>
-                <span className="text-red-600 text-sm font-medium">Stocks are running out!</span>
+                <span className="text-red-600 text-sm font-medium">{t("stocksRunningOut")}</span>
              </div>

-              {/* Discount Price Display */}
              {originalPrice && priceAmount > 0 && (
                <div className="mb-4">
                  <div className="flex items-center gap-3 mb-2">
@@ -301,25 +283,22 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
                </div>
              )}

-              {/* Price & Rating */}
              {!originalPrice && (
                <div className="flex items-center justify-between mb-8">
                  <span className="text-3xl font-medium">
-                    {price || (locale === "EN" ? "Contact for price" : "Kontaktirajte za cenu")}
+                    {price || tProduct("outOfStock")}
                  </span>
                  <StarRating rating={5} count={1000} />
                </div>
              )}

-              {/* Divider */}
              <div className="border-t border-[#e5e5e5] mb-8" />

-              {/* Size Selector */}
              {product.variants && product.variants.length > 1 && (
                <div className="mb-8">
                  <div className="flex items-center justify-between mb-4">
                    <span className="text-sm uppercase tracking-[0.1em] font-medium">
-                      {locale === "EN" ? "Size" : "Veličina"}
+                      {t("size")}
                    </span>
                  </div>
                  <div className="flex gap-3">
@@ -339,10 +318,9 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
                </div>
              )}

-              {/* Quantity */}
              <div className="flex items-center gap-4 mb-8">
                <span className="text-sm uppercase tracking-[0.1em] font-medium w-16">
-                  {locale === "EN" ? "Qty" : "Kol"}
+                  {t("qty")}
                </span>
                <div className="flex items-center border-2 border-[#1a1a1a]">
                  <button
@@ -362,44 +340,39 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
                </div>
              </div>

-              {/* Add to Cart Button - Action verb + value */}
              {isAvailable ? (
                <button
                  onClick={handleAddToCart}
                  disabled={isAdding}
                  className="w-full h-16 bg-black text-white text-[13px] uppercase tracking-[0.15em] font-semibold hover:bg-[#333333] active:bg-[#1a1a1a] transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed mb-6 hover:scale-[1.02] shadow-lg hover:shadow-xl"
                >
-                  {isAdding 
-                    ? (locale === "EN" ? "Adding..." : "Dodavanje...")
-                    : (locale === "EN" ? "Transform My Hair & Skin" : "Transformiši kosu i kožu")
+                  {isAdding
+                    ? t("adding")
+                    : t("transformHairSkin")
                  }
                </button>
              ) : (
                <div className="w-full h-16 bg-[#f8f9fa] text-[#666666] flex items-center justify-center text-base uppercase tracking-[0.15em] mb-8">
-                  {locale === "EN" ? "Out of Stock" : "Nema na stanju"}
+                  {t("outOfStock")}
                </div>
              )}

-              {/* Free Shipping Note - with urgency */}
              <div className="flex items-center justify-center gap-2 mb-6">
                <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
                </svg>
                <p className="text-sm text-[#666666]">
-                  {locale === "EN" 
-                    ? "Free shipping on orders over 3,000 RSD"
-                    : "Besplatna dostava za porudžbine preko 3.000 RSD"}
+                  {t("freeShipping")}
                </p>
              </div>

-              {/* Trust Indicators */}
              <div className="grid grid-cols-3 gap-4 mb-8 p-4 bg-[#f8f9fa] rounded-lg">
                <div className="text-center">
                  <svg className="w-6 h-6 mx-auto mb-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                  </svg>
                  <p className="text-xs text-[#666666]">
-                    {locale === "EN" ? "30-Day Guarantee" : "30-dnevna garancija"}
+                    {t("guarantee")}
                  </p>
                </div>
                <div className="text-center">
@@ -407,7 +380,7 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                  </svg>
                  <p className="text-xs text-[#666666]">
-                    {locale === "EN" ? "Secure Checkout" : "Sigurno plaćanje"}
+                    {t("secureCheckout")}
                  </p>
                </div>
                <div className="text-center">
@@ -415,24 +388,22 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-8m15.357 8H15" />
                  </svg>
                  <p className="text-xs text-[#666666]">
-                    {locale === "EN" ? "Easy Returns" : "Lak povrat"}
+                    {t("easyReturns")}
                  </p>
                </div>
              </div>

-              {/* Divider */}
              <div className="border-t border-[#e5e5e5] mb-8" />

-              {/* Benefits */}
              <div className="mb-8">
                <div className="flex items-center justify-between mb-4">
                  <span className="text-sm uppercase tracking-[0.1em] font-medium">
-                    {locale === "EN" ? "Benefits" : "Prednosti"}
+                    {t("benefits")}
                  </span>
                </div>
                <div className="flex flex-wrap gap-2">
                  {benefits.map((benefit, index) => (
-                    <span 
+                    <span
                      key={index}
                      className="px-4 py-2 text-sm border border-[#e5e5e5] text-[#666666]"
                    >
@@ -442,32 +413,20 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
                </div>
              </div>

-              {/* Expandable Sections */}
              <div>
-                <ExpandableSection title={locale === "EN" ? "Description" : "Opis"}>
+                <ExpandableSection title={t("description")}>
                  <div dangerouslySetInnerHTML={{ __html: localized.description }} />
                </ExpandableSection>
-                
-                <ExpandableSection title={locale === "EN" ? "How to Use" : "Kako koristiti"}>
-                  <p>
-                    {locale === "EN" 
-                      ? "Apply a small amount to clean, damp hair or skin. Massage gently until absorbed. Use daily for best results."
-                      : "Nanesite malu količinu na čistu, vlažnu kosu ili kožu. Nežno masirajte dok se ne upije. Koristite svakodnevno za najbolje rezultate."
-                    }
-                  </p>
+
+                <ExpandableSection title={t("howToUse")}>
+                  <p>{t("howToUseText")}</p>
                </ExpandableSection>
-                
-                <ExpandableSection title={locale === "EN" ? "Ingredients" : "Sastojci"}>
-                  <p>
-                    {locale === "EN"
-                      ? "100% Pure Natural Oil. No additives, preservatives, or artificial fragrances."
-                      : "100% čisto prirodno ulje. Bez dodataka, konzervansa ili veštačkih mirisa."
-                    }
-                  </p>
+
+                <ExpandableSection title={t("ingredients")}>
+                  <p>{t("ingredientsText")}</p>
                </ExpandableSection>
              </div>

-              {/* SKU */}
              {variant?.sku && (
                <p className="text-xs text-[#999999] mt-8">
                  SKU: {variant.sku}
@@ -478,32 +437,28 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
        </div>
      </section>

-      {/* Customer Reviews */}
      <ProductReviews locale={locale} productName={localized.name} />

-      {/* As Featured In - Full Width */}
      <AsSeenIn />

-      {/* Before/After Gallery */}
      <BeforeAfterGallery />

-      {/* Related Products */}
      {relatedProducts && relatedProducts.length > 0 && (
        <section className="py-20 lg:py-28 bg-[#f8f9fa]">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-16">
              <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
-                {locale === "EN" ? "You May Also Like" : "Možda će vam se svideti"}
+                {t("youMayAlsoLike")}
              </span>
              <h2 className="text-3xl md:text-4xl font-medium">
-                {locale === "EN" ? "Similar Products" : "Slični proizvodi"}
+                {t("similarProducts")}
              </h2>
            </div>
            <div className="flex flex-wrap justify-center gap-6 lg:gap-8">
              {relatedProducts.filter(p => p && p.id).slice(0, 4).map((relatedProduct, index) => (
                <div key={relatedProduct.id} className="w-full sm:w-[calc(50%-12px)] lg:w-[calc(25%-18px)]">
-                  <ProductCard 
-                    product={relatedProduct} 
+                  <ProductCard
+                    product={relatedProduct}
                    index={index}
                    locale={locale}
                  />
@@ -514,17 +469,13 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
        </section>
      )}

-      {/* Product Benefits */}
      <ProductBenefits locale={locale} />

-      {/* Trust Badges */}
      <TrustBadges />

-      {/* How It Works */}
      <HowItWorks />

-      {/* Newsletter */}
      <NewsletterSection />
    </>
  );
-}
+}
--- a/src/components/product/ProductReviews.tsx
+++ b/src/components/product/ProductReviews.tsx
@@ -1,66 +1,22 @@
 "use client";

 import { motion } from "framer-motion";
+import { useTranslations } from "next-intl";
+
+interface Review {
+  id: number;
+  name: string;
+  location: string;
+  text: string;
+  rating: number;
+}

 interface ProductReviewsProps {
  locale?: string;
  productName?: string;
 }

-const reviews = [
-  { id: 1, name: "Ana M.", location: "Belgrade", text: "Manoon Anti-age Serum transformed my skin in just 2 weeks!", rating: 5 },
-  { id: 2, name: "Milica P.", location: "Novi Sad", text: "The best day serum I've ever used. My wrinkles are visibly reduced.", rating: 5 },
-  { id: 3, name: "Jelena K.", location: "Belgrade", text: "Manoon night serum is pure magic. Wake up with glowing skin every morning.", rating: 5 },
-  { id: 4, name: "Stefan R.", location: "Subotica", text: "The Anti-age Set is worth every dinar. My wife and I both use it.", rating: 5 },
-  { id: 5, name: "Marija T.", location: "Kragujevac", text: "Finally found a serum that actually works! Manoon delivers on its promises.", rating: 5 },
-  { id: 6, name: "Nikola V.", location: "Niš", text: "My fine lines are disappearing. This day serum is incredible.", rating: 5 },
-  { id: 7, name: "Ivana L.", location: "Belgrade", text: "Manoon morning glow serum smells divine and works even better.", rating: 5 },
-  { id: 8, name: "Dejan M.", location: "Novi Sad", text: "The night serum has transformed my skincare routine completely.", rating: 5 },
-  { id: 9, name: "Sanja B.", location: "Kragujevac", text: "My skin looks 10 years younger after using Manoon for a month.", rating: 5 },
-  { id: 10, name: "Marko J.", location: "Subotica", text: "The anti-age set makes a perfect gift. My mother loves it!", rating: 5 },
-  { id: 11, name: "Petra D.", location: "Niš", text: "The texture of Manoon serum is so luxurious. Worth every penny.", rating: 5 },
-  { id: 12, name: "Luka G.", location: "Belgrade", text: "Day serum absorbs instantly. No greasy feeling at all!", rating: 5 },
-  { id: 13, name: "Maja S.", location: "Novi Sad", text: "My esthetician asked what I'm using. Manoon is now my secret!", rating: 5 },
-  { id: 14, name: "Vladimir P.", location: "Kragujevac", text: "The night serum works while I sleep. Wake up to visibly smoother skin.", rating: 5 },
-  { id: 15, name: "Katarina N.", location: "Subotica", text: "The Anti-age Set arrived beautifully packaged. Perfect for gifting.", rating: 5 },
-  { id: 16, name: "Bojan R.", location: "Niš", text: "Been using Manoon for 3 months. My wrinkles are noticeably reduced.", rating: 5 },
-  { id: 17, name: "Tamara F.", location: "Belgrade", text: "The day serum provides the perfect base under makeup.", rating: 5 },
-  { id: 18, name: "Aleksandar K.", location: "Novi Sad", text: "Finally a Serbian brand that competes with luxury international brands!", rating: 5 },
-  { id: 19, name: "Natalia M.", location: "Kragujevac", text: "My sensitive skin loves Manoon. No irritation at all.", rating: 5 },
-  { id: 20, name: "Filip T.", location: "Subotica", text: "The anti-age serum is lightweight yet incredibly effective.", rating: 5 },
-  { id: 21, name: "Andrea L.", location: "Niš", text: "Manoon night serum is my evening ritual. Skin looks amazing!", rating: 5 },
-  { id: 22, name: "Ognjen P.", location: "Belgrade", text: "My friends keep asking what changed in my skincare routine.", rating: 5 },
-  { id: 23, name: "Mila J.", location: "Novi Sad", text: "The Anti-age Set includes everything you need. Great value!", rating: 5 },
-  { id: 24, name: "Dragan S.", location: "Kragujevac", text: "Even my husband noticed the difference. He now uses the day serum too!", rating: 5 },
-  { id: 25, name: "Jovana V.", location: "Subotica", text: "The morning glow serum gives the most beautiful luminosity.", rating: 5 },
-  { id: 26, name: "Stefan M.", location: "Niš", text: "Manoon products are now essential in my daily routine.", rating: 5 },
-  { id: 27, name: "Ana R.", location: "Belgrade", text: "The night serum helped clear my complexion. Skin looks so healthy!", rating: 5 },
-  { id: 28, name: "Nenad L.", location: "Novi Sad", text: "Anti-aging results visible within weeks. Highly recommend Manoon!", rating: 5 },
-  { id: 29, name: "Sofija D.", location: "Kragujevac", text: "The texture is divine. Feels like a luxury spa treatment at home.", rating: 5 },
-  { id: 30, name: "Velibor K.", location: "Subotica", text: "My crow's feet have diminished significantly. Thank you Manoon!", rating: 5 },
-  { id: 31, name: "Irena M.", location: "Niš", text: "The Anti-age Set makes the perfect birthday gift for my mother.", rating: 5 },
-  { id: 32, name: "Radoslav P.", location: "Belgrade", text: "Professional quality serum at an honest price. Serbian excellence!", rating: 5 },
-  { id: 33, name: "Jelena B.", location: "Novi Sad", text: "My skin has never been this hydrated. Day serum is amazing!", rating: 5 },
-  { id: 34, name: "Dimitrije S.", location: "Kragujevac", text: "The night serum is worth its weight in gold. Pure luxury!", rating: 5 },
-  { id: 35, name: "Minela G.", location: "Subotica", text: "Manoon lives up to the hype. My skin looks refreshed and young.", rating: 5 },
-  { id: 36, name: "Zoran T.", location: "Niš", text: "I've tried many serums. Manoon is by far the most effective.", rating: 5 },
-  { id: 37, name: "Mirjana F.", location: "Belgrade", text: "The Anti-age Set transformed my mother's skincare routine completely.", rating: 5 },
-  { id: 38, name: "Ivan J.", location: "Novi Sad", text: "Fast-acting serum with real results. I recommend Manoon to everyone.", rating: 5 },
-  { id: 39, name: "Kristina P.", location: "Kragujevac", text: "The morning glow serum gives such a beautiful dewy finish.", rating: 5 },
-  { id: 40, name: "Bratislav L.", location: "Subotica", text: "Noticeable results in just 2 weeks. This serum is the real deal!", rating: 5 },
-  { id: 41, name: "Zorica M.", location: "Niš", text: "The night serum erased years from my face. Absolutely miraculous!", rating: 5 },
-  { id: 42, name: "Patrik N.", location: "Belgrade", text: "Premium quality Serbian skincare that rivals international luxury brands.", rating: 5 },
-  { id: 43, name: "Simona K.", location: "Novi Sad", text: "Manoon Anti-age Serum is the best investment in my skin ever.", rating: 5 },
-  { id: 44, name: "Mladen D.", location: "Kragujevac", text: "The day serum absorbs in seconds. No waiting around!", rating: 5 },
-  { id: 45, name: "Ljiljana R.", location: "Subotica", text: "Gifting the Anti-age Set to my sisters. They loved it!", rating: 5 },
-  { id: 46, name: "Tomislav V.", location: "Niš", text: "My wrinkles are visibly reduced after using Manoon for a month.", rating: 5 },
-  { id: 47, name: "Emilija S.", location: "Belgrade", text: "The night serum leaves my skin so soft and renewed every morning.", rating: 5 },
-  { id: 48, name: "Andrija P.", location: "Novi Sad", text: "Manoon day serum is perfect under sunscreen. Essential duo!", rating: 5 },
-  { id: 49, name: "Miona L.", location: "Kragujevac", text: "My skin looks radiant and youthful. Couldn't be happier with Manoon!", rating: 5 },
-  { id: 50, name: "Slavko M.", location: "Subotica", text: "The Anti-age Set delivers visible results. True Serbian quality!", rating: 5 },
-];
-
-function ReviewCard({ review }: { review: typeof reviews[0] }) {
+function ReviewCard({ review }: { review: Review }) {
  return (
    <div className="flex-shrink-0 w-80 bg-white p-6 rounded-2xl shadow-sm border border-[#f0ede8] mx-3">
      <div className="flex items-center gap-1 mb-3">
@@ -90,7 +46,10 @@ function ReviewCard({ review }: { review: typeof reviews[0] }) {
  );
 }

-export default function ProductReviews({ locale = "SR", productName = "this product" }: ProductReviewsProps) {
+export default function ProductReviews(_props: ProductReviewsProps) {
+  const t = useTranslations("ProductReviews");
+  const reviews = t.raw("reviews") as Review[];
+
  return (
    <section className="py-16 bg-[#faf9f7] overflow-hidden">
      <div className="container mx-auto px-4 mb-8">
@@ -102,12 +61,12 @@ export default function ProductReviews({ locale = "SR", productName = "this prod
          transition={{ duration: 0.6 }}
        >
          <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
-            Customer Reviews
+            {t("customerReviews")}
          </span>
          <h2 className="text-3xl md:text-4xl font-medium">
-            What Customers Say
+            {t("whatCustomersSay")}
          </h2>
-          
+
          <div className="flex items-center justify-center gap-4 mt-4">
            <span className="text-5xl font-bold text-[#1a1a1a]">4.9</span>
            <div>
@@ -118,21 +77,16 @@ export default function ProductReviews({ locale = "SR", productName = "this prod
                  </svg>
                ))}
              </div>
-              <p className="text-sm text-[#666666] mt-1">Based on 1000+ reviews</p>
+              <p className="text-sm text-[#666666] mt-1">{t("basedOnReviews")}</p>
            </div>
          </div>
        </motion.div>
      </div>

-      {/* Scrolling Reviews Marquee */}
      <div className="relative">
-        {/* Left gradient fade */}
        <div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-[#faf9f7] to-transparent z-10 pointer-events-none" />
-        
-        {/* Right gradient fade */}
        <div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-[#faf9f7] to-transparent z-10 pointer-events-none" />
-        
-        {/* First row - left to right */}
+
        <div className="flex overflow-hidden mb-4">
          <motion.div
            className="flex items-center gap-0"
@@ -154,7 +108,6 @@ export default function ProductReviews({ locale = "SR", productName = "this prod
          </motion.div>
        </div>

-        {/* Second row - right to left */}
        <div className="flex overflow-hidden">
          <motion.div
            className="flex items-center gap-0"
@@ -178,4 +131,4 @@ export default function ProductReviews({ locale = "SR", productName = "this prod
      </div>
    </section>
  );
-}
+}