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. 
-            No additives, no preservatives—just nature&apos;s purest goodness for your daily beauty ritual.
+            {t("subtitleText")}
           </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>