feat: implement i18n for product and category, add 5 new locales

apps/spa/src/components/ProductReviews.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import { useAuthStore } from '../store/authStore'
 import { API_BASE } from '../types'
 import { Star } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 
 interface Review {
   id: number
@@ -15,6 +16,7 @@ interface Review {
 }
 
 export default function ProductReviews({ productId }: { productId: number }) {
+  const { t } = useTranslation()
   const [reviews, setReviews] = useState<Review[]>([])
   const [loading, setLoading] = useState(true)
   const { customer } = useAuthStore()
@@ -81,7 +83,7 @@ export default function ProductReviews({ productId }: { productId: number }) {
       <div className="flex flex-col md:flex-row gap-12 items-start">
         {/* Summary */}
         <div className="w-full md:w-1/3 bg-spa-light p-8 rounded-3xl text-center space-y-4">
-          <h2 className="text-3xl font-bold text-pop-black">Reviews</h2>
+          <h2 className="text-3xl font-bold text-pop-black">{t('product.reviews')}</h2>
           <div className="text-6xl font-black text-spa-forest">{avgRating}</div>
           <div className="flex justify-center gap-1">
             {[1, 2, 3, 4, 5].map(star => (