I hope I'm done ;-;

public/locales/common/pt.json

@@ -11,7 +11,7 @@
       "part2": "TEU NEGÓCIO"
     },
     "subheading": {
-      "part1": "Nós tratamos de toda a tua presença digital,",
+      "part1": "Nós tratamos da tua presença digital,",
       "part2": "para que te possas concentrar no que é importante!"
     },
     "button": "Contacta-nos"

src/Components/Navbar/Navbar.tsx

@@ -9,7 +9,7 @@ export default () => {
   const { t, i18n } = useTranslation();
 
   const [colorChange, setColorChange] = useState(false);
- useEffect(() => {
+  useEffect(() => {
     const changeColor = () => {
       if (window.scrollY >= 100) {
         setColorChange(true);
@@ -39,15 +39,19 @@ export default () => {
   ];
 
   const handleNavigation = (path: string) => {
-    if ((window.location.pathname === "/tos" || window.location.pathname === "/privacy") && navigation.some(navItem => navItem.path === path)) {
+    if (
+      (window.location.pathname === "/tos" ||
+        window.location.pathname === "/privacy") &&
+      navigation.some((navItem) => navItem.path === path)
+    ) {
       sessionStorage.setItem("scrollPath", path);
       window.location.href = "/";
-    }else{
+    } else {
-      smoothScroll(path)
+      smoothScroll(path);
     }
   };
 
-  const smoothScroll = (path :string) => {
+  const smoothScroll = (path: string) => {
     const element = document.getElementById(path);
     const navbarHeight = 110; // Replace with your navbar's height
     if (element) {
@@ -55,7 +59,7 @@ export default () => {
         element.getBoundingClientRect().top + window.scrollY - navbarHeight;
       window.scrollTo({ top: top, behavior: "smooth" });
     }
-  }
+  };
 
   const changeLanguage = (lng: string) => {
     i18n.changeLanguage(lng);
@@ -64,17 +68,17 @@ export default () => {
   return (
     <nav
       className={`${
-        colorChange
+        colorChange || state
-          ? "bg-black bg-opacity-80 transition duration-500 w-full border-0 sticky top-0 z-10"
+          ? "bg-custom-bglight w-full border-0 sticky top-0 z-10"
           : "z-10"
       }`}
     >
-      <div className="items-center px-4 max-w-screen-xl mx-auto md:flex md:px-8">
+      <div className="items-center px-4 max-w-screen-xl mx-auto lg:flex lg:px-8">
-        <div className="flex items-center justify-between py-3 md:py-5 md:block">
+        <div className="flex items-center justify-between py-3 lg:py-5 lg:block">
           <a
             href="Top"
             onClick={(e) => {
-              e.preventDefault(); // Prevent the default anchor tag behavior
+              e.preventDefault(); // Prevent the defa ult anchor tag behavior
               if (window.location.pathname === "/") {
                 window.scrollTo({ top: 0, behavior: "smooth" });
               } else {
@@ -84,7 +88,7 @@ export default () => {
           >
             <img src={Logo} width={60} height={60} alt="logo" />
           </a>
-          <div className="md:hidden">
+          <div className="lg:hidden">
             <button
               className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
               onClick={() => setState(!state)}
@@ -98,21 +102,19 @@ export default () => {
           </div>
         </div>
         <div
-          className={`absolute top-[3.24rem] md:top-0 left-0 w-full z-50 flex flex-col md:flex-row items-center justify-center pb-3 mt-8 md:relative md:bg-transparent md:pb-0 md:mt-0 ${
+          className={`absolute top-[3.24rem] lg:top-0 left-0 w-full z-50 flex flex-col lg:flex-row items-center justify-center pb-3 mt-8 lg:relative lg:bg-transparent lg:pb-0 lg:mt-0 ${
             state
-              ? colorChange
+              ? "block bg-custom-bglight transition duration-500"
-                ? "block bg-black bg-opacity-80 transition duration-500"
+              : "hidden lg:flex"
-                : "block bg-gradient-to-br from-custom-bglight to-custom-bgdark"
-              : "hidden md:flex"
           }`}
         >
-          <ul className="text-text-gold space-y-8 md:ml-auto md:flex md:space-x-6 md:space-y-0 justify-center items-center">
+          <ul className="text-text-gold space-y-8 lg:ml-auto lg:flex lg:space-x-6 lg:space-y-0 text-center justify-center items-center">
             {navigation.map((item, idx) => {
               return (
-                <li key={idx} className="hover:text-white">
+                <li key={idx} className="hover:text-white w-full text-center">
                   <a
                     href={item.path}
-                    className="block py-2 md:py-0 md:px-4 text-xl font-medium"
+                    className="block py-2 lg:py-0 lg:px-4 text-xl font-medium"
                     onClick={(e) => {
                       e.preventDefault(); // Prevent the default anchor tag behavior
                       setState(false); // Close the navigation
@@ -126,7 +128,7 @@ export default () => {
             })}
           </ul>
           <button
-            className="mt-5 md:mt-0 md:ml-auto"
+            className="mt-10 lg:mt-0 lg:ml-auto text-text-gold hover:text-white"
             onClick={() => changeLanguage(i18n.language === "en" ? "pt" : "en")}
           >
             {i18n.language === "en" ? "PT" : "EN"}

src/Components/Pages/Hero/Hero.tsx

@@ -21,7 +21,7 @@ const Hero = () => {
         <img className="items-center" src={HeroImg} alt="hero"></img>
       </div>
       <div className="justify-center items-center lg:w-1/2 xl:w-1/2">
-        <div className="flex flex-col text-center lg:pt-10 lg:pr-20 lg:text-right">
+        <div className="flex flex-col text-center pt-4 lg:pt-10 lg:pr-20 lg:text-right">
           <img
             src={Stars}
             alt="hero"

src/index.css

@@ -12,7 +12,7 @@ body {
   @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;
+  @apply font-medium text-4xl md:text-5xl lg:text-6xl xl:text-8xl;
 }
 
 .hero-sub-text {