feat: translate TestimonialsSection and HeroVideo with i18n

2026-03-23 18:35:52 +02:00
parent bcc51ce282
commit 5bd1a0f167
4 changed files with 93 additions and 53 deletions
--- a/src/components/home/HeroVideo.tsx
+++ b/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>
--- a/src/components/home/TestimonialsSection.tsx
+++ b/src/components/home/TestimonialsSection.tsx
@@ -2,36 +2,20 @@

 import { motion } from "framer-motion";
 import { Star, Check } from "lucide-react";
-
-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,
-  },
-];
+import { useTranslations } from "next-intl";

 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">
-                    <Check className="w-3 h-3" />
-                    Verified purchase
-                  </div>
-                )}
+                <div className="inline-flex items-center gap-1 text-[10px] tracking-wider uppercase text-emerald-600 font-medium">
+                  <Check className="w-3 h-3" />
+                  {t("verified")}
+                </div>
              </div>
            </motion.div>
          ))}