added docker-compose

Dockerfile

@@ -5,7 +5,8 @@ WORKDIR /lk-results/
 COPY . .
 
 RUN npm install
+RUN npm audit fix --force 
 RUN npm run build
-RUN npm install -g
+RUN npm install -g serve
 
 CMD ["serve", "-s", "dist"]

docker-compose.yml

@@ -0,0 +1,12 @@
+version: "3.9"
+name: lk-landing-page
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: lk-landing-page
+    environment:
+      - NODE_ENV=production
+    restart: unless-stopped

package.json

@@ -13,6 +13,8 @@
     "@emailjs/browser": "^4.3.3",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.3",
+    "caniuse-lite": "^1.0.30001696",
+    "framer-motion": "^12.7.3",
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",
@@ -22,11 +24,13 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.2",
     "react-icons": "^5.0.1",
+    "react-phone-number-input": "^3.4.3",
     "react-router-dom": "^6.22.3",
     "react-toastify": "^10.0.5",
     "sort-by": "^0.0.2"
   },
   "devDependencies": {
+    "@types/node": "^22.14.1",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -39,6 +43,6 @@
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.2.2",
-    "vite": "^5.1.0"
+    "vite": "^6.3.2"
   }
 }

public/locales/common/en.json

@@ -14,7 +14,7 @@
       "part1": "We do all the digital footprint for you,",
       "part2": "so you can focus on what's important!"
     },
-    "button": "Yes, I want that!"
+    "button": "Contact Us"
   },
   "services": {
     "heading": {
@@ -99,8 +99,8 @@
   },
   "optimization": {
     "heading": {
-      "part1": "So How Do You Optimize",
+      "part1": "So How Do I Optimize",
-      "part2": "Your Business?"
+      "part2": "My Business?"
     },
     "cards": {
       "card1": {
@@ -120,7 +120,7 @@
   "results": {
     "heading": {
       "part1": "Ok... So What Makes",
-      "part2": "Us Different?"
+      "part2": "You Different?"
     },
     "subheading": "We have helped many businesses grow and expand their digital footprint.",
     "cards": {
@@ -150,7 +150,7 @@
       "part4": "Analysis"
     },
     "subheading": {
-      "part1": "Would you like to know what we could do for you? Fill out the form ad we’ll get",
+      "part1": "Would you like to know what we could do for you? Fill out the form and we’ll get",
       "part2": "back to you. No obligation, no annoying tactics. We won’t waste your time."
     },
     "form": {
@@ -159,13 +159,20 @@
       "company": "Company",
       "phone": "Phone",
       "question": "What is your most important question?",
-      "message": "Message",
+      "reference": "How did you hear about us?",
-      "button": "Send"
+      "button": "Send",
+      "agreement": "By submitting this form, you agree to our ",
+      "tos": "Terms of Service",
+      "and": " and ",
+      "privacy": "Privacy Policy"
     },
     "toasts": {
       "success": "Your message has been sent successfully!",
       "error": "An error occurred while sending your message. Please try again later.",
-      "empty": "Please fill out all the fields before sending the message."
+      "empty": "Please fill out all the fields before sending the message.",
+      "invalidCountryCode": "Please enter a valid country code.",
+      "invalidEmail": "Please enter a valid email address.",
+      "invalidPhone": "Please enter a valid phone number."
     }
   },
   "footer": {

public/locales/common/pt.json

@@ -11,10 +11,10 @@
       "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": "Eu quero isto!"
+    "button": "Contacta-nos"
   },
   "services": {
     "heading": {
@@ -119,7 +119,7 @@
   },
   "results": {
     "heading": {
-      "part1": "Ok... Então O Que Nos Torna",
+      "part1": "Ok... Então O Que Vos Torna",
       "part2": "Diferentes?"
     },
     "subheading": "Ajudamos muitos negócios a crescer e expandir a sua presença digital.",
@@ -159,18 +159,25 @@
       "company": "Empresa",
       "phone": "Telefone",
       "question": "Qual é a tua pergunta mais importante?",
-      "message": "Mensagem",
+      "reference": "Como nos conheceste?",
-      "button": "Enviar"
+      "button": "Enviar",
+      "agreement": "Ao enviar este formulário, concordas com os nossos",
+      "tos": "Termos de Serviço",
+      "and": " e ",
+      "privacy": "Política de Privacidade."
     },
     "toasts": {
       "success": "A tua mensagem foi enviada com sucesso!",
       "error": "Ocorreu um erro ao enviar a tua mensagem. Por favor, tenta novamente mais tarde.",
-      "empty": "Por favor, preenche todos os campos antes de enviar a mensagem."
+      "empty": "Por favor, preenche todos os campos antes de enviar a mensagem.",
+      "invalidCountryCode": "Por favor, preenche um código de país válido.",
+      "invalidEmail": "Por favor, preenche um endereço de email válido.",
+      "invalidPhone": "Por favor, preenche um número de telefone válido."
     }
   },
   "footer": {
     "rights": "©2024 Direitos reservados a LK Results",
     "tos": "Termos de Serviço",
-    "privacy": "Polítca de Privacidade"
+    "privacy": "Política de Privacidade"
   }
 }

src/App.tsx

@@ -14,4 +14,3 @@ export default function App() {
     </div>
   );
 }
- 

src/Components/Card.tsx

@@ -9,20 +9,20 @@ const Card = ({ title, description, image }: IProps) => {
   const imgClasses = image ? defaultImgClasses : `${defaultImgClasses} hidden`;
 
   return (
-    <div className="mt-5 xl:mt-0 flex flex-1 bg-gradient-to-b from-gold-light to-gold-dark p-0.5 shadow-lg">
+    <div className="glass-premium mt-5 xl:mt-0 flex flex-1 border-2 border-gold-accent shadow-xl rounded-2xl transition-transform duration-300 hover:scale-105 hover:shadow-gold-accent/40">
-      <div className="w-full font-medium flex-col md:px-4 py-1 bg-gradient-to-br from-custom-bglight to-custom-bgdark">
+  <div className="w-full font-medium flex-col md:px-4 py-1 bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-2xl">
-        <object type="image/svg+xml" data={image} className={imgClasses} aria-label={title}></object>
+    <object type="image/svg+xml" data={image} className={imgClasses} aria-label={title}></object>
-        <h1 className="mt-2 lg:mt-6 text-3xl xl:text-5xl">{title}</h1>
+    <h1 className="mt-2 lg:mt-6 text-2xl md:text-3xl xl:text-4xl font-bold text-white drop-shadow-lg break-words truncate max-w-full whitespace-normal">{title}</h1>
-        <h2 className="results-card-content">
+    <h2 className="results-card-content">
-          {description.split("\n").map((line, i) => (
+      {description.split("\n").map((line, i) => (
-            <span key={i}>
+        <span key={i}>
-              {line}
+          {line}
-              <br />
+          <br />
-            </span>
+        </span>
-          ))}
+      ))}
-        </h2>
+    </h2>
-      </div>
+  </div>
-    </div>
+</div>
   );
 };
 

src/Components/Footer/Footer.tsx

@@ -1,60 +1,17 @@
 import { useTranslation } from "react-i18next";
-import { FaFacebook, FaLinkedin } from "react-icons/fa";
 
 const Footer = () => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
 
   return (
-    <footer className="flex flex-col space-y-10 justify-center m-10">
+    <footer className="flex flex-col items-center justify-center py-6 px-4 mt-10 border-t border-gray-800 bg-transparent">
-      <div className="flex justify-center space-x-5">
+      <div className="flex space-x-6 mb-2">
-        <a
+        <a href="/tos" className="text-sm text-gray-400 hover:underline">{t("footer.tos")}</a>
-          href="https://www.facebook.com/people/LK-Marketing/61556714037746/"
+        <a href="/privacy" className="text-sm text-gray-400 hover:underline">{t("footer.privacy")}</a>
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <FaFacebook className="text-gold-light" size={30} />
-        </a>
-        <a
-          href="https://www.linkedin.com/company/lk-results"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <FaLinkedin className="text-gold-light" size={30} />
-        </a>
-        {/* Uncomment these lines if you want to include Instagram and Twitter icons */}
-        {/* <a
-          href="https://instagram.com"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <FaInstagram className="text-gold-light" size={30} />
-        </a>
-        <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
-          <FaXTwitter className="text-gold-light" size={30} />
-        </a> */}
       </div>
-
+      <p className="text-xs text-gray-400 text-center">{t("footer.rights")}</p>
-      <div className="flex justify-center space-x-5">
-        <a
-          href="/tos"
-          className={i18n.language === "en" ? "footer-text hover:text-gold-light" : "footer-text-pt hover:text-gold-light"}
-        >
-          {t("footer.tos")}
-        </a>
-        <a
-          href="/privacy"
-          className={i18n.language === "en" ? "footer-text hover:text-gold-light" : "footer-text-pt hover:text-gold-light"}
-        >
-          {t("footer.privacy")}
-        </a>
-      </div>
-
-      <p className={i18n.language === "en" ? "footer-text text-center" : "footer-text-pt text-center"}>
-        {t("footer.rights")}
-      </p>
     </footer>
   );
 };
 
 export default Footer;
-

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,15 +68,16 @@ 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-[1400px] mx-auto w-full flex flex-col lg:flex-row lg:justify-between lg:px-8">
-        <div className="flex items-center justify-between py-3 md:py-5 md:block">
+        <div className="flex flex-row items-center justify-between w-full py-3 lg:py-5 lg:justify-between">
           <a
             href="Top"
+            
             onClick={(e) => {
               e.preventDefault(); // Prevent the default anchor tag behavior
               if (window.location.pathname === "/") {
@@ -82,41 +87,77 @@ export default () => {
               }
             }}
           >
-            <img src={Logo} width={60} height={60} alt="logo" />
+            <img src={Logo} width={60} height={60} alt="logo"  />
           </a>
-          <div className="md:hidden">
+          {/* Only show hamburger button when menu is closed */}
-            <button
+          {!state && (
-              className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
+            <div className="lg:hidden">
-              onClick={() => setState(!state)}
+              <button
-            >
+                className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
-              {state ? (
+                onClick={() => setState(true)}
-                <FaTimes className="h-6 w-6" />
+              >
-              ) : (
                 <FaBars className="h-6 w-6" />
-              )}
+              </button>
-            </button>
+            </div>
-          </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 ${
+        {/* Center nav items for desktop */}
-            state
+        <div className="hidden lg:flex lg:items-center lg:justify-center lg:absolute lg:left-1/2 lg:-translate-x-1/2">
-              ? colorChange
+          <ul className="flex space-x-6 items-center">
-                ? "block bg-black bg-opacity-80 transition duration-500"
-                : "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">
             {navigation.map((item, idx) => {
               return (
-                <li key={idx} className="hover:text-white">
+                <li key={idx} className="text-white hover:text-gold-accent text-center transition-colors duration-200">
                   <a
                     href={item.path}
-                    className="block py-2 md:py-0 md:px-4 text-xl font-medium"
+                    className="block py-0 px-4 text-xl font-medium"
                     onClick={(e) => {
-                      e.preventDefault(); // Prevent the default anchor tag behavior
+                      e.preventDefault();
-                      setState(false); // Close the navigation
+                      handleNavigation(item.path);
-                      handleNavigation(item.path); // Navigate to the section
+                    }}
+                  >
+                    {item.title}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+
+        {/* Language toggle for desktop */}
+        <div className="hidden lg:flex lg:items-center ml-auto">
+          <button
+            className="text-white hover:text-gold-accent transition-colors duration-200"
+            onClick={() => changeLanguage(i18n.language === "en" ? "pt" : "en")}
+          >
+            {i18n.language === "en" ? "PT" : "EN"}
+          </button>
+        </div>
+
+        {/* Mobile slide-in menu */}
+        <div
+          className={`glass-premium fixed top-0 right-0 h-screen w-[70%] z-50 flex flex-col items-center justify-center pt-16 shadow-lg transition-transform duration-300 ease-in-out lg:hidden ${
+            state ? "transform-none" : "translate-x-full"
+          }`}
+        >
+          <button
+            className="absolute top-4 left-4 text-text-gold hover:text-white"
+            onClick={() => setState(false)}
+          >
+            <FaTimes className="h-6 w-6" />
+          </button>
+
+          <ul className="space-y-8 text-center justify-center items-center">
+            {navigation.map((item, idx) => {
+              return (
+                <li key={idx} className="text-white hover:text-gold-accent w-full text-center transition-colors duration-200">
+                  <a
+                    href={item.path}
+                    className="block py-2 text-xl font-medium"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setState(false);
+                      handleNavigation(item.path);
                     }}
                   >
                     {item.title}
@@ -126,12 +167,20 @@ export default () => {
             })}
           </ul>
           <button
-            className="mt-5 md:mt-0 md:ml-auto"
+            className="absolute bottom-10 right-10 text-white hover:text-gold-accent transition-colors duration-200"
             onClick={() => changeLanguage(i18n.language === "en" ? "pt" : "en")}
           >
             {i18n.language === "en" ? "PT" : "EN"}
           </button>
         </div>
+
+        {/* Dark overlay behind menu */}
+        {state && (
+          <div
+            className="fixed top-0 left-0 w-full h-screen bg-black bg-opacity-60 z-40 lg:hidden"
+            onClick={() => setState(false)}
+          />
+        )}
       </div>
     </nav>
   );

src/Components/Pages/Contact/ContactForm.css

@@ -0,0 +1,10 @@
+.PhoneInputInput {
+    background-color: transparent;
+    border: none;
+    outline: none;
+    width: 100%;
+}
+
+.PhoneInputCountrySelect {
+    background-color: #1C1C1C;
+}

src/Components/Pages/Contact/ContactForm.tsx

@@ -1,11 +1,20 @@
-import React from "react";
+import React, { useState } from "react";
 import emailjs from "@emailjs/browser";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { useTranslation } from "react-i18next";
+import PhoneInput, {
+  formatPhoneNumber,
+  isValidPhoneNumber,
+  parsePhoneNumber,
+} from "react-phone-number-input";
+import "react-phone-number-input/style.css";
+import "./ContactForm.css";
+import PremiumButton from "../../Shared/PremiumButton";
 
 const ContactForm = () => {
   const { t } = useTranslation();
+  const [phone, setPhone] = useState<string | undefined>(undefined);
 
   const notify = () => {
     toast.success(t("contact.toasts.success"));
@@ -19,6 +28,19 @@ const ContactForm = () => {
     toast.warning(t("contact.toasts.empty"));
   };
 
+  const validateEmail = (email: string) => {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(email);
+  };
+
+  const invalidEmail = () => {
+    toast.error(t("contact.toasts.invalidEmail"));
+  };
+
+  const invalidCountryCode = () => {
+    toast.error(t("contact.toasts.invalidCountryCode"));
+  };
+
   const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -28,11 +50,39 @@ const ContactForm = () => {
         (input as HTMLInputElement).value.trim() === ""
     );
 
-    if (isEmpty) {
+    if (isEmpty || !phone) {
-      emptyForm();
+      if (!phone || !isValidPhoneNumber(phone)) {
+        toast.error(t("contact.toasts.invalidPhone"));
+      } else {
+        emptyForm();
+      }
       return;
     }
 
+    const email = e.currentTarget.user_email.value;
+    if (!validateEmail(email)) {
+      invalidEmail();
+      return;
+    }
+
+    let parsedPhone = parsePhoneNumber(phone);
+    let countryCode = parsedPhone?.countryCallingCode;
+
+    if (!countryCode) {
+      invalidCountryCode();
+      return;
+    }
+
+    // Append phone number to the form
+    const phoneInput = document.createElement("input");
+    phoneInput.setAttribute("type", "hidden");
+    phoneInput.setAttribute(
+      "value",
+      `+${countryCode} ${formatPhoneNumber(phone)}`
+    );
+    phoneInput.setAttribute("name", "user_phone");
+    e.currentTarget.appendChild(phoneInput);
+
     emailjs
       .sendForm("service_o7kxotj", "template_f30zlog", e.currentTarget, {
         publicKey: "vcSOwPedqkRH3nmr9",
@@ -49,40 +99,48 @@ const ContactForm = () => {
       );
 
     e.currentTarget.reset();
+    setPhone(undefined); // Reset phone state
   };
 
   return (
-    <div className="mt-10 mx-5  lg:mx-0 flex justify-center items-center">
+    <div className="mt-10 mx-5 lg:mx-0 flex justify-center items-center">
       <form onSubmit={sendEmail} className="w-full md:w-auto">
-        <div className="flex flex-col md:flex-row md:gap-3">
+        <div className="flex flex-col md:flex-row md:gap-4">
           <input
-            className="form-input"
+            className="form-input flex-1"
             type="text"
             name="user_name"
             placeholder={t("contact.form.name")}
           />
           <input
-            className="form-input"
+            className="form-input flex-1"
             type="email"
             name="user_email"
             placeholder={t("contact.form.email")}
           />
         </div>
-        <div className="flex flex-col md:flex-row md:gap-3">
+        <div className="flex flex-col md:flex-row md:gap-4 md:mt-4">
           <input
-            className="form-input"
+            className="form-input md:w-1/2"
             type="text"
             name="user_company"
             placeholder={t("contact.form.company")}
           />
-          <input
+          <div className="md:w-1/2 flex items-center">
-            className="form-input"
+            <PhoneInput
-            type="number"
+              defaultCountry="PT"
-            name="user_phone"
+              placeholder={t("contact.form.phone")}
-            placeholder={t("contact.form.phone")}
+              className="form-input placeholder-white w-full"
-          />
+              value={phone}
+              onChange={setPhone}
+              inputprops={{
+                name: "user_phone",
+                required: true,
+              }}
+            />
+          </div>
         </div>
-        <div className="flex flex-col">
+        <div className="flex flex-col md:mt-4">
           <input
             className="form-input"
             type="text"
@@ -90,22 +148,40 @@ const ContactForm = () => {
             placeholder={t("contact.form.question")}
           ></input>
 
-          <textarea
+          <div className="md:mt-4">
-            className="form-input"
+            <input
-            name="message"
+              className="form-input w-full"
-            placeholder={t("contact.form.message")}
+              name="user_reference"
-            rows={6}
+              placeholder={t("contact.form.reference")}
-          ></textarea>
+            ></input>
+          </div>
+
+          <div className="mt-3 md:mt-4">
+            <div className="flex items-center">
+              <input
+                type="checkbox"
+                id="user_agreement"
+                name="user_agreement"
+                required
+              />
+              <label
+                htmlFor="user_agreement"
+                className="ml-2 text-xs md:text-sm"
+              >
+                {t("contact.form.agreement")}{" "}
+                <a href="/tos">{t("contact.form.tos")}</a>{" "}
+                {t("contact.form.and")}{" "}
+                <a href="/privacy">{t("contact.form.privacy")}</a>
+              </label>
+            </div>
+          </div>
         </div>
 
-        <div className="flex mt-5 mb-10 lg:mt-12 mx-10 lg:mx-20 rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
+        <div className="flex mx-10 md:mx-40 lg:mx-0 lg:ml-auto mt-5 mb-10 lg:mt-12">
-          <button
+  <PremiumButton type="submit" className="sm:mx-40">
-            type="submit"
+    {t("contact.form.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"
+  </PremiumButton>
-          >
+</div>
-            {t("contact.form.button")}
-          </button>
-        </div>
 
         <ToastContainer
           position="top-center"

src/Components/Pages/Contact/ContactPage.tsx

@@ -10,7 +10,7 @@ const ContactPage = () => {
         <h1>
           {t("contact.heading.part1")} <br />
           {t("contact.heading.part2")}{" "}
-          <span className="gold-text">{t("contact.heading.part3")}</span>{" "}
+          <span className="gold-text"><span className="gold-text">{t("contact.heading.part3")}</span></span>{" "}
           {t("contact.heading.part4")}
         </h1>
         <h2 className="sub-header-text ">

src/Components/Pages/Hero/Hero.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+import PremiumButton from "../../Shared/PremiumButton";
 import HeroImg from "../../../assets/HeroImg.svg";
 import Stars from "../../../assets/Stars.svg";
 
@@ -21,7 +22,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 2xl:pr-40">
+        <div className="flex flex-col text-center pt-4 lg:pt-10 lg:pr-20 lg:text-right">
           <img
             src={Stars}
             alt="hero"
@@ -64,23 +65,14 @@ const Hero = () => {
               {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">
+          <div className="flex mt-8 lg:mt-16 mx-10 md:mx-20 lg:mx-0 lg:ml-auto">
-            <a
+  <PremiumButton onClick={() => handleNavigation("Contact")} className="sm:mx-40 lg:mx-0">
-              className="flex w-full"
+    {t("hero.button")}
-              href="Contact"
+  </PremiumButton>
-              onClick={(e) => {
+</div>
-                e.preventDefault();
-                handleNavigation("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">
-                {t("hero.button")}
-              </button>
-            </a>
           </div>
         </div>
       </div>
-    </div>
   );
 };
 

src/Components/Pages/Results/ResultsPage.tsx

@@ -5,7 +5,7 @@ const ResultsPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="header-text">
+    <div className="header-text p-8 md:p-16 mx-4 my-10 rounded-2xl">
       <h1>
         <span className="gold-text">"</span>
         {t("results.heading.part1")} <br /> {t("results.heading.part2")}

src/Components/Pages/Services/Buttons.tsx

@@ -16,7 +16,7 @@ const Buttons = ({ changeActiveGroup }: props) => {
   };
 
   return (
-    <div className="lg:px-40 flex flex-row 2xl:gap-8 gap-2 mx-2 md:gap-5 mt-5 lg:mt-10 mb-4 justify-center">
+    <div className="lg:px-40 mx-5 gap-5 flex flex-row flex-1 2xl:gap-8 md:gap-5 mt-5 lg:mt-10 mb-4 justify-center">
       <CardBtn
         title="Marketing"
         onClick={() => handleClick("markCards")}
@@ -33,7 +33,7 @@ const Buttons = ({ changeActiveGroup }: props) => {
         isSelected={selectedButton === "smCards"}
       />
       <CardBtn
-        title="Camera & Edits"
+        title="Video & Edits"
         onClick={() => handleClick("camCards")}
         isSelected={selectedButton === "camCards"}
       />

src/Components/Pages/Services/CameraCards.tsx

@@ -9,7 +9,7 @@ const CameraCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap md:flex-row md:mx-4 gap-5">
       <Card
         title={t("services.cards.media.card1.title")}
         description={t("services.cards.media.card1.description")}

src/Components/Pages/Services/CardBtn.tsx

@@ -6,7 +6,7 @@ interface props {
 
 const CardBtn = ({ title, onClick, isSelected }: props) => {
   const buttonClass = isSelected
-    ? "w-full font-bold md:px-4 py-1 text-xs lg:text-sm xl:text-2xl cursor-pointer"
+    ? "w-full font-bold md:px-4 py-1 text-xs lg:text-sm xl:text-xl cursor-pointer"
     : "w-full font-medium md:px-4 py-1 text-xs lg:text-sm xl:text-xl text-gray-400 shadow-inner hover:text-text-gold cursor-pointer";
 
   return (

src/Components/Pages/Services/CardGroup.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import WesiteCards from "./WesiteCards";
+import WesiteCards from "./WebsiteCards";
 import Buttons from "./Buttons";
 import MarketingCards from "./MarketingCards";
 import CameraCards from "./CameraCards";
@@ -31,7 +31,7 @@ const CardGroup = () => {
   }
 
   return (
-    <div className="h-full font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl flex flex-col">
+    <div className="h-full font-medium md:px-8 py-3 text-2xl md:text-3xl flex flex-col">
       {ActiveCards && <ActiveCards />}
       <Buttons changeActiveGroup={changeActiveGroup} />
     </div>

src/Components/Pages/Services/MarketingCards.tsx

@@ -9,7 +9,7 @@ const MarketingCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap md:flex-row md:mx-4 gap-5">
       <Card
         title={t("services.cards.marketing.card1.title")}
         description={t("services.cards.marketing.card1.description")}

src/Components/Pages/Services/ServiceCard.tsx

@@ -8,7 +8,7 @@ interface IProps {
 const Card = ({ title, description, imgSrc, delay }: IProps) => {
   return (
     <div
-      className="flex flex-col justify-end flex-1 h-full border-solid border shadow-lg bg-cover bg-center text-center"
+      className="flex flex-col mt-4 lg:mt-0 justify-end flex-1 h-full w-full md:w-96 xl:w-[340px] 2xl:w-[400px] border-solid border bg-cover bg-center text-center shadow-xl rounded-2xl transition-transform duration-300 hover:scale-105 hover:shadow-gold-accent/40"
       style={{
         backgroundImage: `url(${imgSrc})`,
         filter: "saturate(50%)",
@@ -16,19 +16,19 @@ const Card = ({ title, description, imgSrc, delay }: IProps) => {
         opacity: 0,
       }}
     >
-      <div className="lg:my-6">
+      <div className="glass-premium p-6">
-        <h2
+        <div className="lg:py-6">
-          className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]
+          <h2
- text-3xl font-bold"
+            className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] text-3xl font-bold text-white"
-        >
+          >
-          {title}
+            {title}
-        </h2>
+          </h2>
-        <p
+          <p
-          className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]
+            className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] font-thin text-xl"
- xl:mb-10 font-thin text-xl"
+          >
-        >
+            {description}
-          {description}
+          </p>
-        </p>
+        </div>
       </div>
     </div>
   );

src/Components/Pages/Services/ServiceCardContainer.tsx

@@ -2,7 +2,7 @@ import CardGroup from "./CardGroup";
 
 const ServiceCardContainer = () => {
   return (
-    <div className="h-full xl:h-[65vh] 1920:h-[60vh] rounded-xl mx-4 lg:mx-20 xl:mx-40 2xl:mx-60 1920:margin-calc mt-10 bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg ">
+    <div className="h-full xl:h-[65vh] 1920:h-[60vh] rounded-xl mx-4 lg:mx-20 xl:mx-40 2xl:mx-60 1920:margin-calc mt-10 p-0.5 gap-4">
       <CardGroup />
     </div>
   );

src/Components/Pages/Services/Services.tsx

@@ -6,18 +6,18 @@ const Services = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="header-text">
+    <div className="header-text p-8 md:p-16 mx-4 my-10 rounded-2xl">
       <h1>
-        {t("services.heading.part1")}
+  {t("services.heading.part1")}
-        <span className="relative inline-block">
+  <span className="relative inline-block">
-          {t("services.heading.part2")}{" "}
+    {t("services.heading.part2")} 
-          <img
+    <img
             src={Underline}
             alt="underline"
             className="absolute bottom-0 left-0"
           />
-        </span>{" "}
+  </span>{" "}
-      </h1>
+</h1>
       <h1>
         {t("services.heading.part3")}
       </h1>

src/Components/Pages/Services/SocialMedia.tsx

@@ -9,7 +9,7 @@ const SocialMediaCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap md:flex-row md:mx-4 gap-5">
       <Card
         title={t("services.cards.social.card1.title")}
         description={t("services.cards.social.card1.description")}

src/Components/Pages/Services/WebsiteCards.tsx

@@ -9,7 +9,7 @@ const WesiteCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap md:flex-row md:mx-4 gap-5">
       <Card
         title={t("services.cards.website.card1.title")}
         description={t("services.cards.website.card1.description")}

src/Components/Shared/PremiumButton.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface PremiumButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const PremiumButton: React.FC<PremiumButtonProps> = ({
+  children,
+  className = "",
+  ...props
+}) => (
+  <div className={`gradient-glow-border p-[2px] rounded-full w-full transition-all duration-300 hover:scale-105 ${className}`}>
+    <button
+      className={`flex-1 w-full font-medium md:px-8 py-3 text-2xl md:text-3xl rounded-full bg-gradient-to-br from-custom-bglight to-custom-bgdark text-white shadow-lg transition-all duration-300`}
+      {...props}
+    >
+      {children}
+    </button>
+  </div>
+);
+
+export default PremiumButton;

src/i18n.ts

@@ -17,10 +17,19 @@ i18n
     defaultNS: 'common',
     backend: {
       // translation file path
-      loadPath: (lng : string, ns : string) => `/locales/${ns}/${lng}.json`,
+      loadPath: (lngs: string[], namespaces: string[]) => {
+        // i18next-http-backend passes arrays for lngs and namespaces
+        const lng = lngs[0];
+        const ns = namespaces[0];
+        return `/locales/${ns}/${lng}.json`;
+      },
     },
-    debug: true,
+    // 'process.env.NODE_ENV' is replaced at build time by most bundlers (Vite, CRA, Webpack) to control debug mode.
-    fallbackLng: "en",
+// TypeScript may show a warning about 'process' not being defined. You can safely ignore this if using a modern React toolchain.
+// To silence the error in your editor, install Node types: npm install --save-dev @types/node
+debug: process.env.NODE_ENV !== "production",
+    fallbackLng: { default: ["en"] },
+supportedLngs: ["en", "pt"],
     interpolation: {
       escapeValue: false, // not needed for react as it escapes by default
     },

src/index.css

@@ -1,18 +1,62 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
 @import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;700&display=swap");
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+/* Gradient Glow Border for Hero Button */
+.gradient-glow-border {
+  position: relative;
+  z-index: 1;
+}
+.gradient-glow-border::before {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border-radius: 9999px;
+  background: linear-gradient(to bottom right, theme('colors.gold-gradient-light'), theme('colors.gold-gradient-dark'));
+  filter: blur(8px) brightness(1.18);
+  opacity: 0.7;
+  z-index: -1;
+  transition: filter 0.3s, opacity 0.3s;
+}
+.gradient-glow-border:hover::before {
+  filter: blur(10px) brightness(1.7);
+  opacity: 0.9;
+}
+
+
 body {
-  @apply bg-gradient-to-br from-custom-bglight to-custom-bgdark;
+  @apply bg-gradient-to-br from-custom-bglight to-custom-bgdark antialiased min-h-screen text-white;
+  font-family: 'Inter', sans-serif;
+}
+
+.glass-premium {
+  @apply bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl shadow-lg border border-white border-opacity-20;
+}
+
+
+.underline-gold {
+  position: relative;
+  display: inline-block;
+}
+.underline-gold::after {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 5px;
+  margin-top: 0.18em;
+  background: linear-gradient(90deg, #E6C674 0%, #C28818 60%, #8C6B1F 100%);
+  border-radius: 2px;
+  opacity: 0.85;
 }
 
 .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;
+  @apply font-medium text-4xl md:text-5xl lg:text-6xl xl:text-8xl;
 }
 
 .hero-sub-text {
@@ -31,11 +75,11 @@ body {
 }
 
 .form-input {
-  @apply rounded-xl px-4 py-2 mt-2 bg-gray-bg border-solid border border-gray-300 text-sm md:text-lg;
+  @apply rounded-xl px-4 py-4 mt-2 bg-gray-bg border-solid border border-gray-300 text-xs md:text-xl;
 }
 
 .gold-text {
-  @apply bg-clip-text text-transparent bg-gradient-to-br from-gold-light to-gold-dark;
+  @apply bg-clip-text text-transparent bg-gradient-to-br from-gold-gradient-light to-gold-gradient-dark;
 }
 
 .fade-effect {
@@ -50,7 +94,7 @@ body {
 }
 
 .results-card-content {
-  @apply mb-2 mt-3 italic text-lg xl:text-2xl font-medium text-gray-300;
+  @apply mb-5 mt-3 italic text-lg xl:text-2xl font-medium text-gray-300;
 }
 
 .footer-text {

src/routes/PP.tsx

@@ -2,60 +2,61 @@ import { useTranslation } from "react-i18next";
 import Navbar from "../Components/Navbar/Navbar";
 import Footer from "../Components/Footer/Footer";
 
+
 const PP = () => {
-     const { t } = useTranslation("PP")
+  const { t } = useTranslation("PP");
 
   return (
-    <div className="min-h-screen">
+    <div className="min-h-screen font-inter">
       <Navbar />
-      <div className="container mx-auto px-4 py-12">
+      <div className="container mx-auto px-4 py-20 flex flex-col min-h-[70vh]">
-        <h1 className="text-3xl font-bold text-center mb-6">{t("pp.pageTitle")}</h1>
+        <h1 className="text-4xl md:text-5xl font-extrabold gold-text text-center mb-6 tracking-wide animate-fadein">{t("pp.pageTitle")}</h1>
-        <div className="shadow-md rounded-lg p-8">
+        <p className="mb-2 text-white text-sm text-center animate-fadein">{t("pp.lastUpdated")}</p>
-          <p className="mb-4">{t("pp.lastUpdated")}</p>
+        <p className="mb-10 text-white text-base text-center animate-fadein">{t("pp.introText")}</p>
-          <p className="mb-4">{t("pp.introText")}</p>
+        <div className="w-full max-w-5xl mx-auto">
-          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp1.title")}</h2>
+          <h2 className="text-xl font-bold mb-3 gold-text text-left">{t("pp.pp1.title")}</h2>
           {t("pp.pp1.desc").split("\n\n").map((paragraph, index) => (
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
+            <p key={index} className="mb-4 text-white text-base text-left">{paragraph.split("\n").map((line, index) => (
               <span key={index}>{line}<br/></span>
             ))}</p>
           ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp2.title")}</h2>
+          <h2 className="text-xl font-bold mb-3 gold-text text-left">{t("pp.pp2.title")}</h2>
           {t("pp.pp2.desc").split("\n\n").map((paragraph, index) => (
             <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
               <span key={index}>{line}<br/></span>
             ))}</p>
           ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp3.title")}</h2>
+          <h2 className="text-xl font-bold mb-3 gold-text text-left">{t("pp.pp3.title")}</h2>
           {t("pp.pp3.desc").split("\n\n").map((paragraph, index) => (
             <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
               <span key={index}>{line}<br/></span>
             ))}</p>
           ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp4.title")}</h2>
+          <h2 className="text-xl font-bold mb-3 gold-text text-left">{t("pp.pp4.title")}</h2>
           {t("pp.pp4.desc").split("\n\n").map((paragraph, index) => (
             <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
               <span key={index}>{line}<br/></span>
             ))}</p>
           ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp5.title")}</h2>
+          <h2 className="text-xl font-bold mb-3 gold-text text-left">{t("pp.pp5.title")}</h2>
           {t("pp.pp5.desc").split("\n\n").map((paragraph, index) => (
             <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
               <span key={index}>{line}<br/></span>
             ))}</p>
           ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp6.title")}</h2>
+          <h2 className="text-xl font-bold mb-3 gold-text text-left">{t("pp.pp6.title")}</h2>
           {t("pp.pp6.desc").split("\n\n").map((paragraph, index) => (
             <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
               <span key={index}>{line}<br/></span>
             ))}</p>
           ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp7.title")}</h2>
+          <h2 className="text-xl font-bold mb-3 gold-text text-left">{t("pp.pp7.title")}</h2>
           {t("pp.pp7.desc").split("\n\n").map((paragraph, index) => (
             <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
               <span key={index}>{line}<br/></span>
             ))}</p>
           ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp8.title")}</h2>
+          <h2 className="text-xl font-bold mb-3 gold-text text-left">{t("pp.pp8.title")}</h2>
           {t("pp.pp8.desc").split("\n\n").map((paragraph, index) => (
             <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
               <span key={index}>{line}<br/></span>

src/routes/TOS.tsx

@@ -6,46 +6,47 @@ const TOS = () => {
      const { t } = useTranslation("TOS")
     
   return (
-    <div className="min-h-screen">
+    <div className="min-h-screen font-inter">
       <Navbar />
-      <div className="container mx-auto px-4 py-12">
+      <div className="container mx-auto px-4 py-20 flex flex-col min-h-[70vh]">
-        <h1 className="text-3xl font-bold text-center mb-6">{t("tos.pageTitle")}</h1>
+        <h1 className="text-4xl md:text-5xl font-extrabold gold-text text-center mb-6 tracking-wide animate-fadein">{t("tos.pageTitle")}</h1>
-        <div className="shadow-md rounded-lg p-8">
+        <p className="mb-2 text-white text-sm text-center animate-fadein">{t("tos.lastUpdated")}</p>
-          <p className="mb-4">{t("tos.lastUpdated")}</p>
+        <p className="mb-10 text-white text-base text-center animate-fadein">{t("tos.introText")}</p>
-          <p className="mb-4">{t("tos.introText")}</p>
+        <div className="w-full max-w-5xl mx-auto">
-          <h2 className="text-2xl font-semibold mb-4">{t("tos.tos1.title")}</h2>
+          
+          <h2 className="text-xl font-bold mb-3 gold-text text-left">{t("tos.tos1.title")}</h2>
           {t("tos.tos1.desc").split("\n\n").map((paragraph, index) => (
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
+            <p key={index} className="mb-4 text-white text-base text-left">{paragraph.split("\n").map((line, index) => (
               <span key={index}>{line}<br/></span>
             ))}</p>
           ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("tos.tos2.title")}</h2>
+          <h2 className="text-xl font-bold mb-3 gold-text text-left">{t("tos.tos2.title")}</h2>
           {t("tos.tos2.desc").split("\n\n").map((paragraph, index) => (
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
+            <p key={index} className="mb-4 text-white text-base text-left">{paragraph.split("\n").map((line, index) => (
               <span key={index}>{line}<br/></span>
             ))}</p>
           ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("tos.tos3.title")}</h2>
+          <h2 className="text-xl font-bold mb-3 gold-text text-left">{t("tos.tos3.title")}</h2>
           {t("tos.tos3.desc").split("\n\n").map((paragraph, index) => (
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
+            <p key={index} className="mb-4 text-white text-base text-left">{paragraph.split("\n").map((line, index) => (
               <span key={index}>{line}<br/></span>
             ))}</p>
           ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("tos.tos4.title")}</h2>
+          <h2 className="text-xl font-bold mb-3 gold-text text-left">{t("tos.tos4.title")}</h2>
           {t("tos.tos4.desc").split("\n\n").map((paragraph, index) => (
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
+            <p key={index} className="mb-4 text-white text-base text-left">{paragraph.split("\n").map((line, index) => (
               <span key={index}>{line}<br/></span>
             ))}</p>
           ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("tos.tos5.title")}</h2>
+          <h2 className="text-xl font-bold mb-3 gold-text text-left">{t("tos.tos5.title")}</h2>
           {t("tos.tos5.desc").split("\n\n").map((paragraph, index) => (
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
+            <p key={index} className="mb-4 text-white text-base text-left">{paragraph.split("\n").map((line, index) => (
               <span key={index}>{line}<br/></span>
             ))}</p>
           ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("tos.tos6.title")}</h2>
+          <h2 className="text-xl font-bold mb-3 gold-text text-left">{t("tos.tos6.title")}</h2>
           {t("tos.tos6.desc").split("\n\n").map((paragraph, index) => (
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
+            <p key={index} className="mb-4 text-white text-base text-left">{paragraph.split("\n").map((line, index) => (
               <span key={index}>{line}<br/></span>
             ))}</p>
           ))}

tailwind.config.js

@@ -3,19 +3,23 @@ export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
-      screens: {
+      fontFamily: {
-        1920: "1921px",
+        inter: ['Inter', 'sans-serif'],
+        baijam: ['Bai Jamjuree', 'sans-serif'],
       },
       colors: {
-        "custom-bglight": "#1C1C1F",
+        'gold-accent': '#C28818',
-        "custom-bgdark": "#06060B",
+        'gold-light': '#E6C674',
-        "text-gold": "#FACC97",
+        'gold-dark': '#8C6B1F',
-        "gold-light": "#FACC97",
+        'gold-gradient-light': '#FACC97',
-        "gold-dark": "#54330F",
+        'gold-gradient-dark': '#54330F',
-        "gray-bg": "#1C1C1C",
+        'custom-bglight': '#1C1C1F',
+        'custom-bgdark': '#06060B',
+        'text-gold': '#FACC97',
+        'gray-bg': '#1C1C1C',
       },
-      fontFamily: {
+      screens: {
-        baijam: ['"Bai Jamjuree"', "sans-serif"],
+        1920: "1921px",
       },
       backgroundImage: {
         "hero-pattern": "url('./src/assets/HeroImg.svg')",