Changed string values to use i18n

src/Components/Pages/Hero/Hero.tsx

@@ -1,7 +1,10 @@
+import { useTranslation } from "react-i18next";
 import HeroImg from "../../../assets/HeroImg.svg";
 import Stars from "../../../assets/Stars.svg";
 
 const Hero = () => {
+  const { t } = useTranslation();
+
   return (
     <div className="flex flex-col lg:mt-20 lg:flex-row 1920:padding-calc items-center">
       <div className="lg:w-1/2 w-full xl:w-1/2 hidden lg:flex transform origin-left">
@@ -15,8 +18,8 @@ const Hero = () => {
             className="md:px-0 ml-auto mr-auto lg:mr-0 lg:text-right"
           ></img>
           <div>
-            <h1 className="hero-text">GROW YOUR</h1>
-            <h1 className="hero-text">BUSINESS</h1>
+            <h1 className="hero-text">{t("hero.heading.part1")}</h1>
+            <h1 className="hero-text">{t("hero.heading.part2")}</h1>
             <div>
               <img
                 src={HeroImg}
@@ -25,16 +28,18 @@ const Hero = () => {
               ></img>
             </div>
           </div>
-          <h2 className="italic text-lg md:text-2xl 2xl:text-3xl mt-4 md:mt-10">
-            We do all the digital footprint for you,
-          </h2>
-          <h2 className="italic text-lg md:text-2xl 2xl:text-3xl">
-            so you can focus on what's important!
-          </h2>
-          <div className="flex mt-5 lg:mt-12 mx-20 lg:mx-0 lg:ml-auto rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
+          <div className="mx-5 lg:mx-0">
+            <h2 className="italic text-lg md:text-2xl 2xl:text-3xl mt-4 md:mt-10">
+              {t("hero.subheading.part1")}
+            </h2>
+            <h2 className="italic text-lg md:text-2xl 2xl:text-3xl">
+              {t("hero.subheading.part2")}
+            </h2>
+          </div>
+          <div className="flex mt-5 lg:mt-12 mx-10 lg:mx-0 lg:ml-auto rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
             <a className="flex w-full" href="#Contact">
               <button className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500">
-                Yes, I want that!
+                {t("hero.button")}
               </button>
             </a>
           </div>