feat: translate TestimonialsSection and HeroVideo with i18n

src/components/home/HeroVideo.tsx

@@ -2,9 +2,12 @@
 
 import { motion } from "framer-motion";
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { ChevronDown } from "lucide-react";
 
 export default function HeroVideo() {
+  const t = useTranslations("Home.hero");
+
   const scrollToContent = () => {
     const element = document.getElementById("main-content");
     if (element) {
@@ -47,7 +50,7 @@ export default function HeroVideo() {
               ))}
             </div>
             <span className="text-sm text-white/80">
-              Loved by 50,000+ customers worldwide
+              {t("lovedBy")}
             </span>
           </motion.div>
 
@@ -58,9 +61,9 @@ export default function HeroVideo() {
             transition={{ duration: 0.8, delay: 0.5 }}
             className="text-4xl md:text-6xl lg:text-7xl font-medium mb-6 tracking-tight leading-tight"
           >
-            Transform Your Hair & Skin
+            {t("transformHeadline")}
             <br />
-            <span className="text-white/90">with 100% Natural Oils</span>
+            <span className="text-white/90">{t("withNaturalOils")}</span>
           </motion.h1>
 
           {/* Subtitle - Expands on how */}
@@ -70,8 +73,7 @@ export default function HeroVideo() {
             transition={{ duration: 0.6, delay: 0.7 }}
             className="text-lg md:text-xl text-white/80 mb-8 font-light max-w-2xl mx-auto leading-relaxed"
           >
-            Cold-pressed, organic oils handcrafted with love. 
+            {t("subtitleText")}
-            No additives, no preservatives—just nature&apos;s purest goodness for your daily beauty ritual.
           </motion.p>
 
           {/* CTA Button - Action verb + value */}
@@ -85,13 +87,13 @@ export default function HeroVideo() {
               href="/products"
               className="inline-block px-10 py-4 bg-white text-black text-[13px] uppercase tracking-[0.15em] font-semibold hover:bg-white/90 transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl"
             >
-              Transform My Hair & Skin
+              {t("ctaButton")}
             </Link>
             <Link
               href="/about"
               className="inline-block px-10 py-4 border border-white/50 text-white text-[13px] uppercase tracking-[0.15em] font-medium hover:bg-white/10 transition-all duration-300"
             >
-              Learn Our Story
+              {t("learnStory")}
             </Link>
           </motion.div>
 
@@ -106,19 +108,19 @@ export default function HeroVideo() {
               <svg className="w-5 h-5" 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>
-              <span>30-Day Money Back</span>
+              <span>{t("moneyBack")}</span>
             </div>
             <div className="flex items-center gap-2">
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
               </svg>
-              <span>Free Shipping Over 3,000 RSD</span>
+              <span>{t("freeShipping")}</span>
             </div>
             <div className="flex items-center gap-2">
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
               </svg>
-              <span>Cruelty Free</span>
+              <span>{t("crueltyFree")}</span>
             </div>
           </motion.div>
         </motion.div>

src/components/home/TestimonialsSection.tsx

@@ -2,36 +2,20 @@
 
 import { motion } from "framer-motion";
 import { Star, Check } from "lucide-react";
-
+import { useTranslations } from "next-intl";
-const testimonials = [
-  {
-    id: 1,
-    name: "Sarah M.",
-    skinType: "Dry, sensitive skin",
-    text: "I've tried countless oils over the years, but ManoonOils is different. My skin has never felt this nourished and healthy. The argan oil is now a staple in my routine.",
-    verified: true,
-  },
-  {
-    id: 2,
-    name: "James K.",
-    skinType: "Hair care enthusiast",
-    text: "Finally found an oil that actually tames my frizz without making my hair greasy. The jojoba oil works wonders for my beard too. Highly recommend!",
-    verified: true,
-  },
-  {
-    id: 3,
-    name: "Emma L.",
-    skinType: "Combination skin",
-    text: "Was skeptical at first but after 3 weeks of using the rosehip oil, my skin texture has improved dramatically. The quality is unmatched.",
-    verified: true,
-  },
-];
 
 export default function TestimonialsSection() {
+  const t = useTranslations("Testimonials");
+
+  const reviews = t.raw("reviews") as Array<{
+    name: string;
+    skinType: string;
+    text: string;
+  }>;
+
   return (
     <section className="py-24 lg:py-32 bg-[#F0F7FA]">
       <div className="max-w-[1400px] mx-auto px-6">
-        {/* Header */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -43,22 +27,20 @@ export default function TestimonialsSection() {
             Testimonials
           </span>
           <h2 className="font-serif italic text-4xl lg:text-5xl text-[#1A1A1A] tracking-tight">
-            What our customers say
+            {t("title")}
           </h2>
         </motion.div>
 
-        {/* Testimonials Grid */}
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {testimonials.map((testimonial, index) => (
+          {reviews.map((review, index) => (
             <motion.div
-              key={testimonial.id}
+              key={index}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ duration: 0.6, delay: index * 0.1 }}
               className="bg-white rounded-[6px] border border-[#1A1A1A]/[0.06] p-9 flex flex-col"
             >
-              {/* Stars */}
               <div className="flex gap-1 mb-5">
                 {[...Array(5)].map((_, i) => (
                   <Star
@@ -68,28 +50,24 @@ export default function TestimonialsSection() {
                 ))}
               </div>
 
-              {/* Quote */}
               <p className="font-serif italic text-base lg:text-lg text-[#1A1A1A] leading-relaxed flex-1 mb-6">
-                &ldquo;{testimonial.text}&rdquo;
+                &ldquo;{review.text}&rdquo;
               </p>
 
-              {/* Author */}
               <div className="flex items-center justify-between pt-4 border-t border-[#1A1A1A]/[0.06]">
                 <div>
                   <p className="text-sm font-medium text-[#1A1A1A]">
-                    {testimonial.name}
+                    {review.name}
                   </p>
                   <p className="text-xs text-[#4A4A4A]/70">
-                    {testimonial.skinType}
+                    {review.skinType}
                   </p>
                 </div>
 
-                {testimonial.verified && (
+                <div className="inline-flex items-center gap-1 text-[10px] tracking-wider uppercase text-emerald-600 font-medium">
-                  <div className="inline-flex items-center gap-1 text-[10px] tracking-wider uppercase text-emerald-600 font-medium">
+                  <Check className="w-3 h-3" />
-                    <Check className="w-3 h-3" />
+                  {t("verified")}
-                    Verified purchase
+                </div>
-                  </div>
-                )}
               </div>
             </motion.div>
           ))}

src/i18n/messages/en.json

@@ -8,7 +8,16 @@
   "Home": {
     "hero": {
       "title": "Premium Natural Oils",
-      "subtitle": "For hair and skin care"
+      "subtitle": "For hair and skin care",
+      "lovedBy": "Loved by 50,000+ customers worldwide",
+      "transformHeadline": "Transform Your Hair & Skin",
+      "withNaturalOils": "with 100% Natural Oils",
+      "subtitleText": "Cold-pressed, organic oils handcrafted with love. No additives, no preservatives—just nature's purest goodness for your daily beauty ritual.",
+      "ctaButton": "Transform My Hair & Skin",
+      "learnStory": "Learn Our Story",
+      "moneyBack": "30-Day Money Back",
+      "freeShipping": "Free Shipping Over 3,000 RSD",
+      "crueltyFree": "Cruelty Free"
     },
     "collection": "Our Collection",
     "premiumOils": "Premium Natural Oils",
@@ -145,5 +154,26 @@
     "previous": "Previous",
     "search": "Search",
     "noResults": "No results found"
+  },
+  "Testimonials": {
+    "title": "What our customers say",
+    "verified": "Verified purchase",
+    "reviews": [
+      {
+        "name": "Sarah M.",
+        "skinType": "Dry, sensitive skin",
+        "text": "I've tried countless oils over the years, but ManoonOils is different. My skin has never felt this nourished and healthy. The argan oil is now a staple in my routine."
+      },
+      {
+        "name": "James K.",
+        "skinType": "Hair care enthusiast",
+        "text": "Finally found an oil that actually tames my frizz without making my hair greasy. The jojoba oil works wonders for my beard too. Highly recommend!"
+      },
+      {
+        "name": "Emma L.",
+        "skinType": "Combination skin",
+        "text": "Was skeptical at first but after 3 weeks of using the rosehip oil, my skin texture has improved dramatically. The quality is unmatched."
+      }
+    ]
   }
 }

src/i18n/messages/sr.json

@@ -8,7 +8,16 @@
   "Home": {
     "hero": {
       "title": "Premium prirodna ulja",
-      "subtitle": "Za negu kose i kože"
+      "subtitle": "Za negu kose i kože",
+      "lovedBy": "Omiljeno od 50.000+ kupaca širom sveta",
+      "transformHeadline": "Transformiši kosu i kožu",
+      "withNaturalOils": "sa 100% prirodnim uljima",
+      "subtitleText": "Hladno ceđena, organska ulja ručno pravljena sa ljubavlju. Bez aditiva, bez konzervanasa - samo najčistija dobrobit prirode za vašu svakodnevnu lepotu.",
+      "ctaButton": "Transformiši moju kosu i kožu",
+      "learnStory": "Saznaj našu priču",
+      "moneyBack": "Povrat novca 30 dana",
+      "freeShipping": "Besplatna dostava preko 3.000 RSD",
+      "crueltyFree": "Bez okrutnosti"
     },
     "collection": "Naša kolekcija",
     "premiumOils": "Premium prirodna ulja",
@@ -145,5 +154,26 @@
     "previous": "Prethodno",
     "search": "Pretraga",
     "noResults": "Nema rezultata"
+  },
+  "Testimonials": {
+    "title": "Šta naši kupci kažu",
+    "verified": "Potvrđena kupovina",
+    "reviews": [
+      {
+        "name": "Milica J.",
+        "skinType": "Suva, osetljiva koža",
+        "text": "Isprobala sam bezbroj ulja tokom godina, ali ManoonOils je drugačije. Moja koža nikad nije bila ovako negovana i zdrava. Arganovo ulje je sada osnovni deo moje rutine."
+      },
+      {
+        "name": "Marko P.",
+        "skinType": "Nega kose",
+        "text": "Konačno sam pronašla ulje koje zaista obuzdava moju kosu bez que je čini masnom. Jojobino ulje čini čuda i za moju bradu. Toplo preporučujem!"
+      },
+      {
+        "name": "Ana K.",
+        "skinType": "Kombinovana koža",
+        "text": "U početku sam bila skeptična, ali nakon 3 nedelje korišćenja ulja od šipka, tekstura moje kože se drastično poboljšala. Kvalitet je neuporediv."
+      }
+    ]
   }
 }