Responsive design fix PT

src/Components/Pages/Hero/Hero.tsx

@@ -3,7 +3,7 @@ import HeroImg from "../../../assets/HeroImg.svg";
 import Stars from "../../../assets/Stars.svg";
 
 const Hero = () => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const handleNavigation = (path: string) => {
     const element = document.getElementById(path);
@@ -28,8 +28,16 @@ const Hero = () => {
             className="md:px-0 ml-auto mr-auto lg:mr-0 lg:text-right"
           ></img>
           <div>
-            <h1 className="hero-text">{t("hero.heading.part1")}</h1>
+            <h1
-            <h1 className="hero-text">{t("hero.heading.part2")}</h1>
+              className={i18n.language === "en" ? "hero-text" : "hero-text-pt"}
+            >
+              {t("hero.heading.part1")}
+            </h1>
+            <h1
+              className={i18n.language === "en" ? "hero-text" : "hero-text-pt"}
+            >
+              {t("hero.heading.part2")}
+            </h1>
             <div>
               <img
                 src={HeroImg}
@@ -39,10 +47,20 @@ const Hero = () => {
             </div>
           </div>
           <div className="mx-5 lg:mx-0">
-            <h2 className="italic text-lg md:text-2xl 2xl:text-3xl mt-4 md:mt-10">
+            <h2
+              className={
+                i18n.language === "en"
+                  ? "hero-sub-text mt-4 md:mt-10"
+                  : "hero-sub-text-pt mt-4 md:mt-10"
+              }
+            >
               {t("hero.subheading.part1")}
             </h2>
-            <h2 className="italic text-lg md:text-2xl 2xl:text-3xl">
+            <h2
+              className={
+                i18n.language === "en" ? "hero-sub-text" : "hero-sub-text-pt"
+              }
+            >
               {t("hero.subheading.part2")}
             </h2>
           </div>

src/Components/Pages/Results/Card.tsx

@@ -1,14 +1,32 @@
+import { useTranslation } from "react-i18next";
+
 interface IProps {
   title: string;
   description: string;
 }
 
 const Card = ({ title, description }: IProps) => {
+  const { i18n } = useTranslation();
+
   return (
     <div className="mt-5 xl:mt-0 flex bg-gradient-to-b from-gold-light to-gold-dark p-0.5 shadow-lg">
       <div className="w-full font-medium md:px-4 py-1 bg-gradient-to-br from-custom-bglight to-custom-bgdark">
-        <h1 className="mt-2 lg:mt-6 text-3xl xl:text-5xl">{title}</h1>
+        <h1
-        <h2 className="mb-2 mt-3 italic text-xl xl:text-3xl font-medium text-gray-300">
+          className={
+            i18n.language === "en"
+              ? "results-card-heading"
+              : "results-card-heading-pt"
+          }
+        >
+          {title}
+        </h1>
+        <h2
+          className={
+            i18n.language === "en"
+              ? "results-card-content"
+              : "results-card-content-pt"
+          }
+        >
           {description.split("\n").map((line, i) => (
             <span key={i}>
               {line}

src/index.css

@@ -11,6 +11,16 @@ body {
 .hero-text {
   @apply font-medium text-5xl lg:text-7xl xl:text-8xl;
 }
+.hero-text-pt {
+  @apply font-medium text-4xl lg:text-6xl xl:text-7xl;
+}
+
+.hero-sub-text {
+  @apply italic text-lg md:text-2xl 2xl:text-3xl;
+}
+.hero-sub-text-pt {
+  @apply italic text-lg md:text-xl 2xl:text-2xl;
+}
 
 .header-text {
   @apply mt-20 lg:mt-48 text-3xl md:text-5xl xl:text-7xl text-center;
@@ -32,6 +42,22 @@ body {
   animation: fadeEffect 1s ease-in-out;
 }
 
+.results-card-heading {
+  @apply mt-2 lg:mt-6 text-3xl xl:text-5xl;
+}
+.results-card-heading-pt {
+  @apply mt-2 lg:mt-6 text-2xl xl:text-4xl;
+}
+
+.results-card-content {
+  @apply mb-2 mt-3 italic text-xl xl:text-3xl font-medium text-gray-300;
+}
+
+.results-card-content-pt {
+  @apply mb-2 mt-3 italic text-lg xl:text-2xl font-medium text-gray-300;
+}
+
+
 @keyframes fadeEffect {
   0% {
     opacity: 0;