added empty pages

features/products/components/ProductReviewsSection.tsx

@@ -3,6 +3,7 @@ import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useTranslations } from "next-intl";
 
 interface Review {
   id: number;
@@ -41,11 +42,13 @@ export function ProductReviewsSection({
     );
   };
 
+  const t= useTranslations();
+
   return (
     <Card className="p-6 rounded-xl">
-      <div className="flex justify-between items-center mb-6">
+      <div className="flex justify-between items-center ">
         <div>
-          <h3 className="text-2xl font-bold">Customer Reviews</h3>
+          <h3 className="text-2xl font-bold">{t("customer_reviews")}</h3>
           <div className="flex items-center gap-2 mt-2">
             {renderStars(Math.round(averageRating))}
             <span className="text-sm text-gray-600">
@@ -53,9 +56,9 @@ export function ProductReviewsSection({
             </span>
           </div>
         </div>
-        <Button onClick={onWriteReview} className="rounded-lg">
+        <Button onClick={onWriteReview} className="rounded-lg bg-[#005bff] hover:bg-[#0041c4]">
           <Send className="mr-2 h-4 w-4" />
-          Write Review
+          {t("write_review")}
         </Button>
       </div>
 
@@ -83,7 +86,7 @@ export function ProductReviewsSection({
         </div>
       ) : (
         <div className="text-center py-8 text-gray-500">
-          No reviews yet. Be the first to review this product!
+          {t("no_reviews")}
         </div>
       )}
     </Card>

features/products/components/RelatedProductsSection.tsx

@@ -1,5 +1,5 @@
 import ProductCard from "@/features/home/components/ProductCard";
-
+import {useTranslations} from "next-intl";
 interface RelatedProduct {
   id: number;
   slug: string;
@@ -30,12 +30,13 @@ interface RelatedProductsSectionProps {
 export function RelatedProductsSection({
   products,
 }: RelatedProductsSectionProps) {
+  const t = useTranslations();
   if (!products || products.length === 0) return null;
 
   return (
     <div className="bg-white rounded-lg p-6">
-      <h2 className="text-2xl font-bold mb-6">Related Products</h2>
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      <h2 className="text-2xl font-bold mb-6">{t("related_products")}</h2>
+      <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
         {products.slice(0, 4).map((product) => {
           // Extract image URLs from media
           const images =

features/products/components/ReviewModal.tsx

@@ -9,6 +9,7 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
+import { useTranslations } from "next-intl";
 
 interface ReviewModalProps {
   open: boolean;
@@ -27,6 +28,8 @@ export function ReviewModal({
   const [text, setText] = useState("");
   const [hoveredStar, setHoveredStar] = useState(0);
 
+  const t = useTranslations();
+
   const handleClose = () => {
     onOpenChange(false);
     setRating(0);
@@ -63,29 +66,29 @@ export function ReviewModal({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle className="text-xl">Write a Review</DialogTitle>
+          <DialogTitle className="text-xl">{t("write_review")}</DialogTitle>
           <DialogDescription>
-            Share your experience with this product
+            {t("share_experience")}
           </DialogDescription>
         </DialogHeader>
         <div className="space-y-4 pt-4">
           <div>
-            <label className="block text-sm font-medium mb-2">Rating</label>
+            <label className="block text-sm font-medium mb-2">{t("rating")}</label>
             {renderStars()}
           </div>
           <div>
             <label className="block text-sm font-medium mb-2">
-              Your Review
+              {t("your_review")}
             </label>
             <Textarea
               value={text}
               onChange={(e) => setText(e.target.value)}
-              placeholder="Write your review here..."
+              placeholder={t("write_review")}
               className="min-h-[120px] resize-none"
               maxLength={500}
             />
             <p className="text-xs text-gray-500 mt-1">
-              {text.length}/500 characters
+              {text.length}/500 {t("characters")}
             </p>
           </div>
         </div>
@@ -95,22 +98,22 @@ export function ReviewModal({
             onClick={handleClose}
             className="flex-1 rounded-lg"
           >
-            Cancel
+            {t("cancel")}
           </Button>
           <Button
             onClick={handleSubmit}
             disabled={rating === 0 || !text.trim() || isSubmitting}
-            className="flex-1 rounded-lg"
+            className="flex-1 rounded-lg bg-[#005bff] hover:bg-[#0041c4]"
           >
             {isSubmitting ? (
               <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Submitting...
+                {t("submitting")}
               </>
             ) : (
               <>
                 <Send className="mr-2 h-4 w-4" />
-                Submit Review
+                {t("submit_review")}
               </>
             )}
           </Button>