added docker-compose

.claude/launch.json

@@ -1,11 +0,0 @@
-{
-  "version": "0.0.1",
-  "configurations": [
-    {
-      "name": "dev",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "dev"],
-      "port": 5173
-    }
-  ]
-}

.dockerignore

@@ -1,5 +0,0 @@
-node_modules
-dist
-.git
-.claude
-*.log

Dockerfile

@@ -5,6 +5,7 @@ WORKDIR /lk-results/
 COPY . .
 
 RUN npm install
+RUN npm audit fix --force 
 RUN npm run build
 RUN npm install -g serve
 

docker-compose.yml

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

package.json

@@ -13,7 +13,8 @@
     "@emailjs/browser": "^4.3.3",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.3",
-    "framer-motion": "^13.2.0",
+    "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",
@@ -23,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",
@@ -40,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",
-      "part2": "Your Business?"
+      "part1": "So How Do I Optimize",
+      "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",
-      "button": "Send"
+      "reference": "How did you hear about us?",
+      "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",
-      "button": "Enviar"
+      "reference": "Como nos conheceste?",
+      "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

@@ -1,49 +1,28 @@
-import { motion, useReducedMotion } from "framer-motion";
-
 interface IProps {
   title: string;
   description: string;
   image: string;
-  index?: number;
 }
 
-const Card = ({ title, description, image, index = 0 }: IProps) => {
-  const prefersReducedMotion = useReducedMotion();
+const Card = ({ title, description, image }: IProps) => {
+  const defaultImgClasses = `w-full h-20 mt-5`;
+  const imgClasses = image ? defaultImgClasses : `${defaultImgClasses} hidden`;
 
   return (
-    <motion.div
-      className={`relative flex flex-1 flex-col gap-5 rounded-2xl glass-panel shadow-glass px-6 py-7 md:px-7 md:py-8 ${
-        image ? "text-left items-start" : "text-center items-center"
-      }`}
-      initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 24 }}
-      whileInView={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
-      viewport={{ once: true, margin: "-80px" }}
-      transition={{
-        type: "spring",
-        damping: 22,
-        stiffness: 140,
-        delay: prefersReducedMotion ? 0 : index * 0.08,
-      }}
-      whileHover={prefersReducedMotion ? {} : { y: -4 }}
-    >
-      <span className="absolute inset-x-6 top-0 h-px bg-gradient-to-r from-transparent via-gold-light/50 to-transparent" />
-
-      {image && <img src={image} alt="" className="h-10 w-10" />}
-
-      <div className="flex flex-col gap-2">
-        <h3 className="text-xl lg:text-2xl font-semibold text-white tracking-tight leading-snug">
-          {title}
-        </h3>
-        <p className="text-sm lg:text-base text-white/55 leading-relaxed">
-          {description.split("\n").map((line, i) => (
-            <span key={i}>
-              {line}
-              <br />
-            </span>
-          ))}
-        </p>
-      </div>
-    </motion.div>
+    <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 rounded-2xl">
+    <object type="image/svg+xml" data={image} className={imgClasses} aria-label={title}></object>
+    <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">
+      {description.split("\n").map((line, i) => (
+        <span key={i}>
+          {line}
+          <br />
+        </span>
+      ))}
+    </h2>
+  </div>
+</div>
   );
 };
 

src/Components/Footer/Footer.tsx

@@ -1,76 +1,15 @@
 import { useTranslation } from "react-i18next";
-import { FaFacebook, FaLinkedin } from "react-icons/fa";
-import { motion } from "framer-motion";
 
 const Footer = () => {
-  const { t, i18n } = useTranslation();
-
-  // Browsers report region variants (e.g. "en-US", "pt-BR"), not just the
-  // bare "en"/"pt" i18next is configured with - matching on that exactly
-  // would pick the wrong sized text class for most real visitors.
-  const currentLang = i18n.language?.startsWith("pt") ? "pt" : "en";
+  const { t } = useTranslation();
 
   return (
-    <footer className="flex flex-col space-y-8 justify-center items-center mt-10 mb-8 px-6 pt-10">
-      <div className="w-full max-w-xs h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
-
-      <div className="flex justify-center space-x-6">
-        <motion.a
-          href="https://www.facebook.com/people/LK-Marketing/61556714037746/"
-          target="_blank"
-          rel="noopener noreferrer"
-          whileHover={{ scale: 1.12, color: "#FACC97" }}
-          whileTap={{ scale: 0.9 }}
-          transition={{ type: "spring", stiffness: 400, damping: 22 }}
-          className="text-gold-light"
-        >
-          <FaFacebook size={26} />
-        </motion.a>
-        <motion.a
-          href="https://www.linkedin.com/company/lk-results"
-          target="_blank"
-          rel="noopener noreferrer"
-          whileHover={{ scale: 1.12, color: "#FACC97" }}
-          whileTap={{ scale: 0.9 }}
-          transition={{ type: "spring", stiffness: 400, damping: 22 }}
-          className="text-gold-light"
-        >
-          <FaLinkedin size={26} />
-        </motion.a>
+    <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 space-x-6 mb-2">
+        <a href="/tos" className="text-sm text-gray-400 hover:underline">{t("footer.tos")}</a>
+        <a href="/privacy" className="text-sm text-gray-400 hover:underline">{t("footer.privacy")}</a>
       </div>
-
-      <div className="flex justify-center space-x-6">
-        <a
-          href="/tos"
-          className={
-            currentLang === "en"
-              ? "footer-text hover:text-gold-light transition-colors"
-              : "footer-text-pt hover:text-gold-light transition-colors"
-          }
-        >
-          {t("footer.tos")}
-        </a>
-        <a
-          href="/privacy"
-          className={
-            currentLang === "en"
-              ? "footer-text hover:text-gold-light transition-colors"
-              : "footer-text-pt hover:text-gold-light transition-colors"
-          }
-        >
-          {t("footer.privacy")}
-        </a>
-      </div>
-
-      <p
-        className={
-          currentLang === "en"
-            ? "footer-text text-center"
-            : "footer-text-pt text-center"
-        }
-      >
-        {t("footer.rights")}
-      </p>
+      <p className="text-xs text-gray-400 text-center">{t("footer.rights")}</p>
     </footer>
   );
 };

src/Components/Loading.tsx

@@ -1,19 +1,7 @@
-import { motion, useReducedMotion } from "framer-motion";
-
 const Loading = () => {
-  const prefersReducedMotion = useReducedMotion();
-
   return (
-    <div className="flex items-center justify-center h-screen bg-custom-bgdark">
-      {prefersReducedMotion ? (
-        <div className="h-16 w-16 rounded-full border-4 border-white/10 border-t-gold-light" />
-      ) : (
-        <motion.div
-          className="h-16 w-16 rounded-full border-4 border-white/10 border-t-gold-light"
-          animate={{ rotate: 360 }}
-          transition={{ duration: 0.9, repeat: Infinity, ease: "linear" }}
-        />
-      )}
+    <div className="flex items-center justify-center h-screen">
+      <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div>
     </div>
   );
 };

src/Components/Navbar/MenuContent.tsx

@@ -1,49 +0,0 @@
-import { motion } from "framer-motion";
-
-interface MenuContentProps {
-  navigation: { title: string; path: string }[];
-  activeSection: string;
-  handleNavigation: (path: string) => void;
-}
-
-const MenuContent = ({
-  navigation,
-  activeSection,
-  handleNavigation,
-}: MenuContentProps) => {
-  return (
-    <ul className="flex items-center gap-8">
-      {navigation.map((item, idx) => {
-        const isActive = activeSection === item.path;
-        return (
-          <li key={idx}>
-            <motion.a
-              href={item.path}
-              className="relative block text-sm font-medium tracking-wide"
-              animate={{ color: isActive ? "#ffffff" : "rgba(255,255,255,0.55)" }}
-              whileHover={{ color: "#ffffff" }}
-              whileTap={{ scale: 0.95 }}
-              transition={{ type: "spring", stiffness: 400, damping: 25 }}
-              aria-current={isActive ? "page" : undefined}
-              onClick={(e) => {
-                e.preventDefault();
-                handleNavigation(item.path);
-              }}
-            >
-              {item.title}
-              {isActive && (
-                <motion.span
-                  layoutId="desktop-nav-underline"
-                  className="absolute -bottom-1.5 left-0 h-px w-full rounded-full bg-gold-light"
-                  transition={{ type: "spring", stiffness: 380, damping: 32 }}
-                />
-              )}
-            </motion.a>
-          </li>
-        );
-      })}
-    </ul>
-  );
-};
-
-export default MenuContent;

src/Components/Navbar/MobileMenu.tsx

@@ -1,85 +0,0 @@
-import { motion } from "framer-motion";
-import {
-  FaLayerGroup,
-  FaGaugeHigh,
-  FaAward,
-  FaEnvelope,
-} from "react-icons/fa6";
-import { langFlagUrl } from "./langFlag";
-
-const ICONS: Record<string, typeof FaLayerGroup> = {
-  Services: FaLayerGroup,
-  Optimization: FaGaugeHigh,
-  Advantages: FaAward,
-  Contact: FaEnvelope,
-};
-
-interface MobileMenuProps {
-  navigation: { title: string; path: string }[];
-  handleNavigation: (path: string) => void;
-  setState: (v: boolean) => void;
-  currentLang: "en" | "pt";
-  changeLanguage: (lng: string) => void;
-}
-
-const MobileMenu = ({
-  navigation,
-  handleNavigation,
-  setState,
-  currentLang,
-  changeLanguage,
-}: MobileMenuProps) => {
-  return (
-    <div className="flex w-full flex-col px-3 pt-2 pb-3">
-      <ul className="flex flex-col gap-1">
-        {navigation.map((item, idx) => {
-          const Icon = ICONS[item.path];
-          return (
-            <li key={idx}>
-              <motion.a
-                href={item.path}
-                className="flex items-center gap-3 rounded-xl px-4 py-3 text-lg font-medium text-white/70"
-                whileHover={{ backgroundColor: "rgba(255,255,255,0.06)", color: "#ffffff" }}
-                whileTap={{ scale: 0.98 }}
-                transition={{ type: "spring", stiffness: 400, damping: 25 }}
-                onClick={(e) => {
-                  e.preventDefault();
-                  setState(false);
-                  handleNavigation(item.path);
-                }}
-              >
-                {Icon && <Icon className="h-4 w-4 text-gold-light shrink-0" />}
-                {item.title}
-              </motion.a>
-            </li>
-          );
-        })}
-      </ul>
-
-      <div className="my-3 h-px bg-white/10" />
-
-      <button
-        type="button"
-        className="flex items-center justify-between rounded-xl px-4 py-3"
-        onClick={() => changeLanguage(currentLang === "en" ? "pt" : "en")}
-      >
-        <span className="text-sm text-white/45">Language</span>
-        <motion.span
-          className="flex items-center gap-1.5 rounded-full border border-gold-light/25 px-3 py-1 text-sm font-semibold text-gold-light"
-          whileHover={{ borderColor: "rgba(250,204,151,0.6)" }}
-          whileTap={{ scale: 0.9 }}
-          transition={{ type: "spring", stiffness: 400, damping: 25 }}
-        >
-          <img
-            src={langFlagUrl(currentLang === "en" ? "pt" : "en")}
-            alt=""
-            className="h-3.5 w-5 rounded-[2px] object-cover"
-          />
-          {currentLang === "en" ? "PT" : "EN"}
-        </motion.span>
-      </button>
-    </div>
-  );
-};
-
-export default MobileMenu;

src/Components/Navbar/Navbar.tsx

@@ -1,82 +1,24 @@
 import { useState, useEffect } from "react";
 import { FaTimes, FaBars } from "react-icons/fa";
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 
 import Logo from "../../assets/logo.svg";
 import { useTranslation } from "react-i18next";
-import MenuContent from "./MenuContent";
-import MobileMenu from "./MobileMenu";
-import { langFlagUrl } from "./langFlag";
 
-const NAVBAR_HEIGHT = 110;
-
-const Navbar = () => {
+export default () => {
   const [state, setState] = useState(false);
   const { t, i18n } = useTranslation();
-  const prefersReducedMotion = useReducedMotion();
 
   const [colorChange, setColorChange] = useState(false);
-  const [activeSection, setActiveSection] = useState("Services");
-
-  // Browsers report region variants (e.g. "en-US", "pt-BR"), not just the
-  // bare "en"/"pt" i18next is configured with - matching on that exactly
-  // would leave the toggle mislabeled for most real visitors.
-  const currentLang = i18n.language?.startsWith("pt") ? "pt" : "en";
-
-  const navigation = [
-    { title: t("navbar.services"), path: "Services" },
-    { title: t("navbar.optimization"), path: "Optimization" },
-    { title: t("navbar.advantages"), path: "Advantages" },
-    { title: t("navbar.contact"), path: "Contact" },
-  ];
-
   useEffect(() => {
-    // Each section's offset, measured once (and on resize) instead of on
-    // every scroll tick - getBoundingClientRect() forces a synchronous
-    // layout recalc, and calling it on every native scroll event (which
-    // fires far more often than the display's refresh rate during a fast
-    // swipe or a smooth-scroll animation) is what made scrolling feel
-    // sluggish: layout was being thrashed dozens of times a second.
-    let sectionTops: { path: string; top: number }[] = [];
-
-    const measureSections = () => {
-      sectionTops = navigation.map((item) => {
-        const el = document.getElementById(item.path);
-        const top = el
-          ? el.getBoundingClientRect().top + window.scrollY
-          : Infinity;
-        return { path: item.path, top };
-      });
-    };
-
-    let ticking = false;
-
-    const updateFromScroll = () => {
-      setColorChange(window.scrollY >= 100);
-
-      // The active section is whichever nav target's start we've scrolled
-      // past most recently - not just "is it in the viewport", since a
-      // short section could otherwise never register as active at all.
-      let current = navigation[0].path;
-      for (const { path, top } of sectionTops) {
-        if (window.scrollY + NAVBAR_HEIGHT + 40 >= top) {
-          current = path;
-        }
+    const changeColor = () => {
+      if (window.scrollY >= 100) {
+        setColorChange(true);
+      } else {
+        setColorChange(false);
       }
-      setActiveSection(current);
-      ticking = false;
     };
 
-    const handleScroll = () => {
-      if (ticking) return;
-      ticking = true;
-      requestAnimationFrame(updateFromScroll);
-    };
-
-    measureSections();
-    updateFromScroll();
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    window.addEventListener("resize", measureSections);
+    window.addEventListener("scroll", changeColor);
 
     const scrollPath = sessionStorage.getItem("scrollPath");
     if (scrollPath) {
@@ -85,14 +27,18 @@ const Navbar = () => {
     }
 
     return () => {
-      window.removeEventListener("scroll", handleScroll);
-      window.removeEventListener("resize", measureSections);
+      window.removeEventListener("scroll", changeColor);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const navigation = [
+    { title: t("navbar.services"), path: "Services" },
+    { title: t("navbar.optimization"), path: "Optimization" },
+    { title: t("navbar.advantages"), path: "Advantages" },
+    { title: t("navbar.contact"), path: "Contact" },
+  ];
+
   const handleNavigation = (path: string) => {
-    setState(false);
     if (
       (window.location.pathname === "/tos" ||
         window.location.pathname === "/privacy") &&
@@ -107,9 +53,10 @@ const Navbar = () => {
 
   const smoothScroll = (path: string) => {
     const element = document.getElementById(path);
+    const navbarHeight = 110; // Replace with your navbar's height
     if (element) {
       const top =
-        element.getBoundingClientRect().top + window.scrollY - NAVBAR_HEIGHT;
+        element.getBoundingClientRect().top + window.scrollY - navbarHeight;
       window.scrollTo({ top: top, behavior: "smooth" });
     }
   };
@@ -118,50 +65,21 @@ const Navbar = () => {
     i18n.changeLanguage(lng);
   };
 
-  useEffect(() => {
-    document.body.style.overflow = state ? "hidden" : "";
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [state]);
-
-  const springTap = prefersReducedMotion ? {} : { whileTap: { scale: 0.94 } };
-
   return (
-    <motion.nav
-      className="sticky top-0 z-40 w-full"
-      initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -16 }}
-      animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
-      transition={{ type: "spring", damping: 22, stiffness: 140 }}
+    <nav
+      className={`${
+        colorChange || state
+          ? "bg-custom-bglight w-full border-0 sticky top-0 z-10"
+          : "z-10"
+      }`}
     >
-      <div className={colorChange ? "px-4" : ""}>
-        <div
-          className={`relative mx-auto flex items-center justify-between transition-[max-width,margin,padding] duration-500 ${
-            colorChange
-              ? "mt-3 max-w-3xl px-5 py-2.5"
-              : "max-w-screen-xl px-4 py-3 md:px-8 md:py-5"
-          }`}
-        >
-          {/*
-            The glass material is its own layer, separate from the box
-            above whose size/margin is animating. backdrop-filter can't be
-            smoothly interpolated between "none" and "blur(20px)" - toggling
-            it on the same element that's also resizing is what produced a
-            seam along the bottom edge mid-transition. Here it's always
-            present and only crossfades via opacity, which is safe.
-          */}
-          <div
-            className={`absolute inset-0 -z-10 rounded-full glass-nav shadow-glass-lg transition-opacity duration-500 ${
-              colorChange ? "opacity-100" : "opacity-0"
-            }`}
-          />
-
-          <motion.a
+      <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 flex-row items-center justify-between w-full py-3 lg:py-5 lg:justify-between">
+          <a
             href="Top"
-            whileTap={{ scale: 0.92 }}
-            transition={{ type: "spring", stiffness: 500, damping: 30 }}
+            
             onClick={(e) => {
-              e.preventDefault();
+              e.preventDefault(); // Prevent the default anchor tag behavior
               if (window.location.pathname === "/") {
                 window.scrollTo({ top: 0, behavior: "smooth" });
               } else {
@@ -169,108 +87,101 @@ const Navbar = () => {
               }
             }}
           >
-            <img
-              src={Logo}
-              width={colorChange ? 40 : 56}
-              height={colorChange ? 40 : 56}
-              alt="logo"
-              className="transition-all duration-500"
-            />
-          </motion.a>
-
-          {/*
-            Centered against the whole bar (absolute + left-1/2), not just
-            "between" the logo and the language toggle - those two groups
-            are different widths, so a plain flex justify-between would
-            center the nav in the remaining space rather than in the bar
-            itself, visibly pulling it off-center.
-          */}
-          <div className="absolute left-1/2 hidden -translate-x-1/2 md:block">
-            <MenuContent
-              navigation={navigation}
-              activeSection={activeSection}
-              handleNavigation={handleNavigation}
-            />
-          </div>
-
-          <div className="flex items-center gap-3">
-            <motion.button
-              className="hidden md:flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-gold-light/25 text-sm font-semibold text-gold-light"
-              whileHover={{ borderColor: "rgba(250,204,151,0.6)" }}
-              whileTap={{ scale: 0.9 }}
-              transition={{ type: "spring", stiffness: 400, damping: 25 }}
-              onClick={() => changeLanguage(currentLang === "en" ? "pt" : "en")}
-            >
-              <img
-                src={langFlagUrl(currentLang === "en" ? "pt" : "en")}
-                alt=""
-                className="h-3.5 w-5 rounded-[2px] object-cover"
-              />
-              {currentLang === "en" ? "PT" : "EN"}
-            </motion.button>
-
-            <motion.button
-              className="md:hidden outline-none p-2 rounded-full bg-white/5 hover:bg-white/10 transition-colors"
-              onClick={() => setState(!state)}
-              {...springTap}
-              transition={{ type: "spring", stiffness: 500, damping: 30 }}
-              aria-label={state ? "Close menu" : "Open menu"}
-            >
-              {state ? (
-                <FaTimes className="h-5 w-5" />
-              ) : (
-                <FaBars className="h-5 w-5" />
-              )}
-            </motion.button>
-          </div>
+            <img src={Logo} width={60} height={60} alt="logo"  />
+          </a>
+          {/* Only show hamburger button when menu is closed */}
+          {!state && (
+            <div className="lg:hidden">
+              <button
+                className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
+                onClick={() => setState(true)}
+              >
+                <FaBars className="h-6 w-6" />
+              </button>
+            </div>
+          )}
         </div>
-      </div>
 
-      <AnimatePresence>
+        {/* Center nav items for desktop */}
+        <div className="hidden lg:flex lg:items-center lg:justify-center lg:absolute lg:left-1/2 lg:-translate-x-1/2">
+          <ul className="flex space-x-6 items-center">
+            {navigation.map((item, idx) => {
+              return (
+                <li key={idx} className="text-white hover:text-gold-accent text-center transition-colors duration-200">
+                  <a
+                    href={item.path}
+                    className="block py-0 px-4 text-xl font-medium"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleNavigation(item.path);
+                    }}
+                  >
+                    {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}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+          <button
+            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 && (
-          <>
-            <motion.div
-              key="mobile-scrim"
-              className="fixed inset-0 z-40 bg-black/60 md:hidden"
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.25 }}
-              onClick={() => setState(false)}
-            />
-            <motion.div
-              key="mobile-menu"
-              initial={
-                prefersReducedMotion
-                  ? { opacity: 0 }
-                  : { opacity: 0, y: -12, scale: 0.98 }
-              }
-              animate={
-                prefersReducedMotion
-                  ? { opacity: 1 }
-                  : { opacity: 1, y: 0, scale: 1 }
-              }
-              exit={
-                prefersReducedMotion
-                  ? { opacity: 0 }
-                  : { opacity: 0, y: -12, scale: 0.98 }
-              }
-              transition={{ type: "spring", damping: 26, stiffness: 300 }}
-              className="absolute top-[3.6rem] left-0 right-0 z-50 mx-4 flex flex-col rounded-2xl glass-sheet shadow-glass-lg md:hidden"
-            >
-              <MobileMenu
-                navigation={navigation}
-                handleNavigation={handleNavigation}
-                setState={setState}
-                currentLang={currentLang}
-                changeLanguage={changeLanguage}
-              />
-            </motion.div>
-          </>
+          <div
+            className="fixed top-0 left-0 w-full h-screen bg-black bg-opacity-60 z-40 lg:hidden"
+            onClick={() => setState(false)}
+          />
         )}
-      </AnimatePresence>
-    </motion.nav>
+      </div>
+    </nav>
   );
 };
-
-export default Navbar;

src/Components/Navbar/langFlag.ts

@@ -1,11 +0,0 @@
-// Flag images (not emoji) for the same reason the phone country-code
-// picker uses them: emoji flag glyphs render with wildly inconsistent
-// metrics across platforms (and don't render as flags at all on some,
-// e.g. Windows), while a fixed-size image is pixel-identical everywhere.
-const LANG_ISO: Record<string, string> = {
-  en: "gb",
-  pt: "pt",
-};
-
-export const langFlagUrl = (lng: string) =>
-  `https://flagcdn.com/${LANG_ISO[lng] ?? lng}.svg`;

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

@@ -3,58 +3,18 @@ import emailjs from "@emailjs/browser";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { useTranslation } from "react-i18next";
-import { motion, useReducedMotion } from "framer-motion";
-import PhoneCodeSelect from "./PhoneCodeSelect";
-
-const PHONE_PATTERNS: Record<string, string> = {
-  "+351": "### ### ###",
-  "+34": "### ### ###",
-  "+33": "# ## ## ## ##",
-  "+44": "#### ######",
-  "+1": "(###) ###-####",
-  "+55": "(##) #####-####",
-};
-
-const digitsOnly = (value: string) => value.replace(/\D/g, "");
-
-const maxDigitsFor = (pattern: string) =>
-  pattern.split("").filter((c) => c === "#").length;
-
-const formatPhoneNumber = (digits: string, pattern: string) => {
-  let result = "";
-  let digitIndex = 0;
-  for (let i = 0; i < pattern.length && digitIndex < digits.length; i++) {
-    const ch = pattern[i];
-    if (ch === "#") {
-      result += digits[digitIndex];
-      digitIndex++;
-    } else {
-      result += ch;
-    }
-  }
-  return result;
-};
+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 prefersReducedMotion = useReducedMotion();
-  const [countryCode, setCountryCode] = useState("+351");
-  const [phoneDigits, setPhoneDigits] = useState("");
-
-  const activePattern = PHONE_PATTERNS[countryCode];
-  const formattedPhone = formatPhoneNumber(phoneDigits, activePattern);
-
-  const handleCountryChange = (code: string) => {
-    setCountryCode(code);
-    setPhoneDigits((prev) =>
-      prev.slice(0, maxDigitsFor(PHONE_PATTERNS[code]))
-    );
-  };
-
-  const handlePhoneChange = (raw: string) => {
-    const digits = digitsOnly(raw).slice(0, maxDigitsFor(activePattern));
-    setPhoneDigits(digits);
-  };
+  const [phone, setPhone] = useState<string | undefined>(undefined);
 
   const notify = () => {
     toast.success(t("contact.toasts.success"));
@@ -68,21 +28,61 @@ 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();
 
-    const isEmpty = Array.from(e.currentTarget.elements).some((el) => {
-      if (el.tagName !== "INPUT" && el.tagName !== "TEXTAREA") return false;
-      const field = el as HTMLInputElement | HTMLTextAreaElement;
-      if (field.type === "hidden") return false;
-      return field.value.trim() === "";
-    });
+    let isEmpty = Array.from(e.currentTarget.elements).some(
+      (input) =>
+        (input as HTMLInputElement).type !== "submit" &&
+        (input as HTMLInputElement).value.trim() === ""
+    );
 
-    if (isEmpty) {
-      emptyForm();
+    if (isEmpty || !phone) {
+      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",
@@ -99,23 +99,13 @@ const ContactForm = () => {
       );
 
     e.currentTarget.reset();
-    setPhoneDigits("");
-    setCountryCode("+351");
+    setPhone(undefined); // Reset phone state
   };
 
   return (
-    <div className="mt-10 mx-5 mb-10 lg:mx-0 flex justify-center items-center">
-      <motion.form
-        onSubmit={sendEmail}
-        className="w-full md:w-[42rem] rounded-3xl glass-panel shadow-glass-lg p-6 md:p-10"
-        initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 24 }}
-        whileInView={
-          prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
-        }
-        viewport={{ once: true, margin: "-80px" }}
-        transition={{ type: "spring", damping: 22, stiffness: 140 }}
-      >
-        <div className="flex flex-col md:flex-row md:gap-3">
+    <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-4">
           <input
             className="form-input flex-1"
             type="text"
@@ -129,28 +119,28 @@ const ContactForm = () => {
             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 flex-1"
+            className="form-input md:w-1/2"
             type="text"
             name="user_company"
             placeholder={t("contact.form.company")}
           />
-          <div className="phone-input-group flex-1 flex items-center">
-            <PhoneCodeSelect value={countryCode} onChange={handleCountryChange} />
-            <span className="h-5 w-px bg-white/10 mx-2" aria-hidden="true" />
-            <input
-              className="phone-number-input"
-              type="tel"
-              inputMode="numeric"
-              name="user_phone"
-              value={formattedPhone}
-              onChange={(e) => handlePhoneChange(e.target.value)}
+          <div className="md:w-1/2 flex items-center">
+            <PhoneInput
+              defaultCountry="PT"
               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"
@@ -158,24 +148,40 @@ const ContactForm = () => {
             placeholder={t("contact.form.question")}
           ></input>
 
-          <textarea
-            className="form-input resize-none"
-            name="message"
-            placeholder={t("contact.form.message")}
-            rows={5}
-          ></textarea>
+          <div className="md:mt-4">
+            <input
+              className="form-input w-full"
+              name="user_reference"
+              placeholder={t("contact.form.reference")}
+            ></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-6 rounded-xl bg-gradient-to-br from-gold-light to-gold-mid p-0.5 shadow-gold-glow">
-          <motion.button
-            type="submit"
-            className="flex-1 font-semibold px-8 py-3 text-xl md:text-2xl bg-custom-bgdark text-white rounded-[0.65rem] hover:bg-transparent transition-colors duration-300"
-            whileTap={{ scale: 0.97 }}
-            transition={{ type: "spring", stiffness: 500, damping: 30 }}
-          >
-            {t("contact.form.button")}
-          </motion.button>
-        </div>
+        <div className="flex mx-10 md:mx-40 lg:mx-0 lg:ml-auto mt-5 mb-10 lg:mt-12">
+  <PremiumButton type="submit" className="sm:mx-40">
+    {t("contact.form.button")}
+  </PremiumButton>
+</div>
 
         <ToastContainer
           position="top-center"
@@ -189,7 +195,7 @@ const ContactForm = () => {
           pauseOnHover
           theme="dark"
         />
-      </motion.form>
+      </form>
     </div>
   );
 };

src/Components/Pages/Contact/ContactPage.tsx

@@ -1,48 +1,22 @@
 import { useTranslation } from "react-i18next";
-import { motion, useReducedMotion } from "framer-motion";
 import ContactForm from "./ContactForm";
 
 const ContactPage = () => {
   const { t } = useTranslation();
-  const prefersReducedMotion = useReducedMotion();
 
   return (
     <div className="h-full">
       <div className="header-text">
-        <motion.h1
-          initial={
-            prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 20 }
-          }
-          whileInView={
-            prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
-          }
-          viewport={{ once: true, margin: "-100px" }}
-          transition={{ type: "spring", damping: 22, stiffness: 140 }}
-        >
+        <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")}
-        </motion.h1>
-        <motion.h2
-          className="sub-header-text"
-          initial={
-            prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 20 }
-          }
-          whileInView={
-            prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
-          }
-          viewport={{ once: true, margin: "-100px" }}
-          transition={{
-            type: "spring",
-            damping: 22,
-            stiffness: 140,
-            delay: 0.05,
-          }}
-        >
+        </h1>
+        <h2 className="sub-header-text ">
           {t("contact.subheading.part1")} <br />
           {t("contact.subheading.part2")}
-        </motion.h2>
+        </h2>
       </div>
       <ContactForm />
     </div>

src/Components/Pages/Contact/PhoneCodeSelect.tsx

@@ -1,106 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-
-interface Country {
-  code: string;
-  iso: string;
-  label: string;
-}
-
-const COUNTRIES: Country[] = [
-  { code: "+351", iso: "pt", label: "Portugal" },
-  { code: "+34", iso: "es", label: "Spain" },
-  { code: "+33", iso: "fr", label: "France" },
-  { code: "+44", iso: "gb", label: "United Kingdom" },
-  { code: "+1", iso: "us", label: "United States" },
-  { code: "+55", iso: "br", label: "Brazil" },
-];
-
-const flagUrl = (iso: string) => `https://flagcdn.com/${iso}.svg`;
-
-interface Props {
-  value: string;
-  onChange: (code: string) => void;
-}
-
-const PhoneCodeSelect = ({ value, onChange }: Props) => {
-  const [open, setOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const active = COUNTRIES.find((c) => c.code === value) ?? COUNTRIES[0];
-
-  useEffect(() => {
-    if (!open) return;
-    const handlePointerDown = (e: MouseEvent) => {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(e.target as Node)
-      ) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handlePointerDown);
-    return () => document.removeEventListener("mousedown", handlePointerDown);
-  }, [open]);
-
-  return (
-    <div className="relative" ref={containerRef}>
-      <input type="hidden" name="phone_code" value={active.code} />
-      <motion.button
-        type="button"
-        className="flex items-center gap-1.5 outline-none"
-        onClick={() => setOpen((o) => !o)}
-        whileTap={{ scale: 0.95 }}
-        transition={{ type: "spring", stiffness: 500, damping: 30 }}
-        aria-label="Country code"
-      >
-        <img
-          src={flagUrl(active.iso)}
-          alt={active.label}
-          className="w-5 h-[14px] rounded-[2px] object-cover shrink-0"
-        />
-        <span className="text-sm md:text-base text-white font-medium leading-none">
-          {active.code}
-        </span>
-      </motion.button>
-
-      <AnimatePresence>
-        {open && (
-          <motion.div
-            initial={{ opacity: 0, scale: 0.95, y: -6 }}
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.95, y: -6 }}
-            transition={{ type: "spring", damping: 24, stiffness: 300 }}
-            style={{ transformOrigin: "top left" }}
-            className="absolute left-0 top-full mt-2 w-48 rounded-xl glass-panel shadow-glass-lg overflow-hidden z-20"
-          >
-            {COUNTRIES.map((country) => (
-              <button
-                key={country.code}
-                type="button"
-                onClick={() => {
-                  onChange(country.code);
-                  setOpen(false);
-                }}
-                className={`flex w-full items-center gap-2 px-3 py-2 text-sm text-left transition-colors ${
-                  country.code === active.code
-                    ? "text-gold-light bg-white/5"
-                    : "text-white/70 hover:bg-white/5 hover:text-white"
-                }`}
-              >
-                <img
-                  src={flagUrl(country.iso)}
-                  alt={country.label}
-                  className="w-5 h-[14px] rounded-[2px] object-cover shrink-0"
-                />
-                <span className="flex-1">{country.label}</span>
-                <span className="text-white/40">{country.code}</span>
-              </button>
-            ))}
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};
-
-export default PhoneCodeSelect;

src/Components/Pages/Hero/Hero.tsx

@@ -1,20 +1,14 @@
 import { useTranslation } from "react-i18next";
-import { motion, useReducedMotion } from "framer-motion";
+import PremiumButton from "../../Shared/PremiumButton";
+import HeroImg from "../../../assets/HeroImg.svg";
 import Stars from "../../../assets/Stars.svg";
-import HeroVisual from "./HeroVisual";
 
 const Hero = () => {
   const { t, i18n } = useTranslation();
-  const prefersReducedMotion = useReducedMotion();
-
-  // Browsers report region variants (e.g. "en-US", "pt-BR"), not just the
-  // bare "en"/"pt" i18next is configured with - matching on that exactly
-  // would pick the wrong sized text class for most real visitors.
-  const currentLang = i18n.language?.startsWith("pt") ? "pt" : "en";
 
   const handleNavigation = (path: string) => {
     const element = document.getElementById(path);
-    const navbarHeight = 110;
+    const navbarHeight = 110; // Replace with your navbar's height
     if (element) {
       const top =
         element.getBoundingClientRect().top + window.scrollY - navbarHeight;
@@ -22,59 +16,41 @@ const Hero = () => {
     }
   };
 
-  const rise = (delay = 0) =>
-    prefersReducedMotion
-      ? { initial: { opacity: 0 }, animate: { opacity: 1 } }
-      : {
-          initial: { opacity: 0, y: 24 },
-          animate: { opacity: 1, y: 0 },
-          transition: {
-            type: "spring" as const,
-            damping: 22,
-            stiffness: 140,
-            delay,
-          },
-        };
-
   return (
     <div className="flex flex-col lg:mt-20 lg:flex-row 1920:padding-calc items-center">
-      <motion.div
-        className="lg:w-1/2 w-full xl:w-1/2 hidden lg:flex"
-        initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, x: -30 }}
-        animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, x: 0 }}
-        transition={{ type: "spring", damping: 20, stiffness: 100 }}
-      >
-        <HeroVisual />
-      </motion.div>
+      <div className="lg:w-1/2 w-full xl:w-1/2 hidden lg:flex transform origin-left">
+        <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">
-          <motion.img
+        <div className="flex flex-col text-center pt-4 lg:pt-10 lg:pr-20 lg:text-right">
+          <img
             src={Stars}
             alt="hero"
             className="md:px-0 ml-auto mr-auto lg:mr-0 lg:text-right"
-            {...rise(0)}
-          />
+          ></img>
           <div>
-            <motion.h1
-              className={currentLang === "en" ? "hero-text" : "hero-text-pt"}
-              {...rise(0.05)}
+            <h1
+              className={i18n.language === "en" ? "hero-text" : "hero-text-pt"}
             >
               {t("hero.heading.part1")}
-            </motion.h1>
-            <motion.h1
-              className={currentLang === "en" ? "hero-text" : "hero-text-pt"}
-              {...rise(0.1)}
+            </h1>
+            <h1
+              className={i18n.language === "en" ? "hero-text" : "hero-text-pt"}
             >
-              <span className="gold-text">{t("hero.heading.part2")}</span>
-            </motion.h1>
-            <div className="flex mt-6 lg:hidden">
-              <HeroVisual />
+              {t("hero.heading.part2")}
+            </h1>
+            <div>
+              <img
+                src={HeroImg}
+                alt="heroSm"
+                className="flex mt-6 lg:hidden"
+              ></img>
             </div>
           </div>
-          <motion.div className="mx-5 lg:mx-0" {...rise(0.15)}>
+          <div className="mx-5 lg:mx-0">
             <h2
               className={
-                currentLang === "en"
+                i18n.language === "en"
                   ? "hero-sub-text mt-4 md:mt-10"
                   : "hero-sub-text-pt mt-4 md:mt-10"
               }
@@ -83,34 +59,20 @@ const Hero = () => {
             </h2>
             <h2
               className={
-                currentLang === "en" ? "hero-sub-text" : "hero-sub-text-pt"
+                i18n.language === "en" ? "hero-sub-text" : "hero-sub-text-pt"
               }
             >
               {t("hero.subheading.part2")}
             </h2>
-          </motion.div>
-          <motion.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-gold-glow"
-            {...rise(0.2)}
-          >
-            <motion.a
-              className="flex w-full"
-              href="Contact"
-              whileTap={{ scale: 0.97 }}
-              transition={{ type: "spring", stiffness: 500, damping: 30 }}
-              onClick={(e) => {
-                e.preventDefault();
-                handleNavigation("Contact");
-              }}
-            >
-              <button className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-custom-bgdark rounded-xl hover:bg-transparent transition-colors duration-300">
-                {t("hero.button")}
-              </button>
-            </motion.a>
-          </motion.div>
+          </div>
+          <div className="flex mt-8 lg:mt-16 mx-10 md:mx-20 lg:mx-0 lg:ml-auto">
+  <PremiumButton onClick={() => handleNavigation("Contact")} className="sm:mx-40 lg:mx-0">
+    {t("hero.button")}
+  </PremiumButton>
+</div>
+          </div>
         </div>
       </div>
-    </div>
   );
 };
 

src/Components/Pages/Hero/HeroVisual.tsx

@@ -1,79 +0,0 @@
-import { motion, useReducedMotion } from "framer-motion";
-import Logo from "../../../assets/logo.svg";
-
-interface OrbitConfig {
-  rotateZ: number;
-  rotateX: number;
-  duration: number;
-  reverse: boolean;
-  inset: string;
-}
-
-const orbits: OrbitConfig[] = [
-  { rotateZ: 55, rotateX: 66, duration: 9, reverse: false, inset: "6%" },
-  { rotateZ: -55, rotateX: 66, duration: 7, reverse: true, inset: "16%" },
-];
-
-const HeroVisual = () => {
-  const prefersReducedMotion = useReducedMotion();
-
-  return (
-    <div className="relative w-full max-w-xs sm:max-w-sm lg:max-w-lg mx-auto aspect-square">
-      <div className="absolute inset-[26%] rounded-full bg-gradient-to-br from-gold-light to-gold-dark opacity-30 blur-3xl" />
-
-      {orbits.map((orbit, i) => (
-        <motion.div
-          key={i}
-          className="absolute rounded-full border border-gold-light/30"
-          style={{
-            inset: orbit.inset,
-            transform: `rotateZ(${orbit.rotateZ}deg) rotateX(${orbit.rotateX}deg)`,
-          }}
-          initial={{ opacity: 0, scale: 0.85 }}
-          animate={{ opacity: 1, scale: 1 }}
-          transition={{
-            type: "spring",
-            damping: 20,
-            stiffness: 100,
-            delay: i * 0.15,
-          }}
-        >
-          <motion.div
-            className="absolute inset-0"
-            animate={{
-              rotate: prefersReducedMotion
-                ? orbit.reverse
-                  ? -30
-                  : 30
-                : orbit.reverse
-                ? -360
-                : 360,
-            }}
-            transition={
-              prefersReducedMotion
-                ? { duration: 0.6, ease: "easeOut" }
-                : {
-                    duration: orbit.duration,
-                    repeat: Infinity,
-                    ease: "linear",
-                  }
-            }
-          >
-            <span className="absolute -top-[5px] left-1/2 -translate-x-1/2 h-2.5 w-2.5 rounded-full bg-gold-light shadow-[0_0_10px_2px_rgba(250,204,151,0.55)]" />
-          </motion.div>
-        </motion.div>
-      ))}
-
-      <motion.div
-        className="absolute inset-[32%] rounded-full glass-panel shadow-glass-lg flex items-center justify-center z-10"
-        initial={{ opacity: 0, scale: 0.8 }}
-        animate={{ opacity: 1, scale: 1 }}
-        transition={{ type: "spring", damping: 20, stiffness: 100 }}
-      >
-        <img src={Logo} alt="LK Results" className="w-2/5 h-2/5 opacity-90" />
-      </motion.div>
-    </div>
-  );
-};
-
-export default HeroVisual;

src/Components/Pages/Optimization/CardContainer.tsx

@@ -9,24 +9,21 @@ const CardContainer = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="mt-10 lg:mt-16 flex gap-5 lg:gap-6 flex-col h-full lg:flex-row px-10 lg:px-32 1920:margin-calc">
+    <div className="mt-10 lg:mt-32 flex gap-10 flex-col h-full lg:flex-row px-10 lg:px-32 1920:margin-calc">
       <Card
         title={t("optimization.cards.card1.title")}
         description={t("optimization.cards.card1.description")}
         image={yourself}
-        index={0}
       />
       <Card
         title={t("optimization.cards.card2.title")}
         description={t("optimization.cards.card2.description")}
         image={staff}
-        index={1}
       />
       <Card
         title={t("optimization.cards.card3.title")}
         description={t("optimization.cards.card3.description")}
         image={agency}
-        index={2}
       />
     </div>
   );

src/Components/Pages/Optimization/Optimization.tsx

@@ -1,29 +1,18 @@
-import CardContainer from "./CardContainer";
-import { useTranslation } from "react-i18next";
-import { motion, useReducedMotion } from "framer-motion";
+import CardContainer from './CardContainer'
+import { useTranslation } from 'react-i18next'
 
 const Optimization = () => {
-  const { t } = useTranslation();
-  const prefersReducedMotion = useReducedMotion();
-
+  const { t } = useTranslation()
   return (
     <div className="header-text">
-      <motion.h1
-        initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 20 }}
-        whileInView={
-          prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
-        }
-        viewport={{ once: true, margin: "-100px" }}
-        transition={{ type: "spring", damping: 22, stiffness: 140 }}
-      >
-        <span className="gold-text">&ldquo;</span>
-        {t("optimization.heading.part1")} <br />{" "}
-        {t("optimization.heading.part2")}
-        <span className="gold-text">&rdquo;</span>
-      </motion.h1>
+      <h1>
+        <span className="gold-text">"</span>
+        {t("optimization.heading.part1")} <br /> {t("optimization.heading.part2")}
+        <span className="gold-text">"</span>
+      </h1>
       <CardContainer />
     </div>
-  );
-};
+  )
+}
 
-export default Optimization;
+export default Optimization

src/Components/Pages/Results/CardContainer.tsx

@@ -5,30 +5,26 @@ const CardContainer = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="mt-10 flex flex-col gap-5 h-full lg:grid lg:grid-cols-2 lg:gap-6 px-10 lg:px-40 2xl:px-96 1920:margin-calc">
+    <div className="mt-10 flex-col h-full lg:grid lg:grid-cols-2 lg:gap-10 px-10 lg:px-40 2xl:px-96 1920:margin-calc">
       <Card
         title={t("results.cards.card1.title")}
         description={t("results.cards.card1.description")}
         image=""
-        index={0}
       />
       <Card
         title={t("results.cards.card2.title")}
         description={t("results.cards.card2.description")}
         image=""
-        index={1}
       />
       <Card
         title={t("results.cards.card3.title")}
         description={t("results.cards.card3.description")}
         image=""
-        index={2}
       />
       <Card
         title={t("results.cards.card4.title")}
         description={t("results.cards.card4.description")}
         image=""
-        index={3}
       />
     </div>
   );

src/Components/Pages/Results/ResultsPage.tsx

@@ -1,25 +1,16 @@
 import { useTranslation } from "react-i18next";
-import { motion, useReducedMotion } from "framer-motion";
 import CardContainer from "./CardContainer";
 
 const ResultsPage = () => {
   const { t } = useTranslation();
-  const prefersReducedMotion = useReducedMotion();
 
   return (
-    <div className="header-text">
-      <motion.h1
-        initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 20 }}
-        whileInView={
-          prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
-        }
-        viewport={{ once: true, margin: "-100px" }}
-        transition={{ type: "spring", damping: 22, stiffness: 140 }}
-      >
-        <span className="gold-text">&ldquo;</span>
+    <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")}
-        <span className="gold-text">&rdquo;</span>
-      </motion.h1>
+        <span className="gold-text">"</span>
+      </h1>
       <CardContainer />
     </div>
   );

src/Components/Pages/Services/Buttons.tsx

@@ -16,7 +16,7 @@ const Buttons = ({ changeActiveGroup }: props) => {
   };
 
   return (
-    <div className="flex flex-row gap-1 mx-auto w-full sm:w-fit justify-center rounded-full bg-black/25 border border-white/5 p-1">
+    <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")}
@@ -28,12 +28,12 @@ const Buttons = ({ changeActiveGroup }: props) => {
         isSelected={selectedButton === "webCards"}
       />
       <CardBtn
-        title="Social"
+        title="Social Media"
         onClick={() => handleClick("smCards")}
         isSelected={selectedButton === "smCards"}
       />
       <CardBtn
-        title="Camera"
+        title="Video & Edits"
         onClick={() => handleClick("camCards")}
         isSelected={selectedButton === "camCards"}
       />

src/Components/Pages/Services/CameraCards.tsx

@@ -9,34 +9,30 @@ const CameraCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="grid grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-6">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap md:flex-row md:mx-4 gap-5">
       <Card
-        step={1}
         title={t("services.cards.media.card1.title")}
         description={t("services.cards.media.card1.description")}
         imgSrc={EnvisionImg}
-        delay={0}
+        delay="0s"
       />
       <Card
-        step={2}
         title={t("services.cards.media.card2.title")}
         description={t("services.cards.media.card2.description")}
         imgSrc={CaptureImg}
-        delay={0.08}
+        delay="0.1s"
       />
       <Card
-        step={3}
         title={t("services.cards.media.card3.title")}
         description={t("services.cards.media.card3.description")}
         imgSrc={EditImg}
-        delay={0.16}
+        delay="0.2s"
       />
       <Card
-        step={4}
         title={t("services.cards.media.card4.title")}
         description={t("services.cards.media.card4.description")}
         imgSrc={PublishImg}
-        delay={0.24}
+        delay="0.3s"
       />
     </div>
   );

src/Components/Pages/Services/CardBtn.tsx

@@ -1,5 +1,3 @@
-import { motion } from "framer-motion";
-
 interface props {
   title: string;
   onClick: () => void;
@@ -7,24 +5,14 @@ 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-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 (
-    <motion.button
-      className={`relative flex-1 whitespace-nowrap rounded-full py-1.5 px-3 sm:px-4 text-xs sm:text-sm font-medium cursor-pointer transition-colors duration-300 ${
-        isSelected ? "text-custom-bgdark" : "text-white/50 hover:text-white"
-      }`}
-      onClick={onClick}
-      whileTap={{ scale: 0.96 }}
-      transition={{ type: "spring", stiffness: 500, damping: 30 }}
-    >
-      {isSelected && (
-        <motion.span
-          layoutId="service-tab-pill"
-          className="absolute inset-0 rounded-full bg-gradient-to-br from-gold-light to-gold-mid shadow-gold-glow"
-          transition={{ type: "spring", stiffness: 380, damping: 32 }}
-        />
-      )}
-      <span className="relative font-semibold">{title}</span>
-    </motion.button>
+      <a className={buttonClass} onClick={onClick}>
+        {title}
+      </a>
   );
 };
 

src/Components/Pages/Services/CardGroup.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
-import WesiteCards from "./WesiteCards";
+import WesiteCards from "./WebsiteCards";
 import Buttons from "./Buttons";
 import MarketingCards from "./MarketingCards";
 import CameraCards from "./CameraCards";
@@ -8,7 +7,6 @@ import SocialMediaCards from "./SocialMedia";
 
 const CardGroup = () => {
   const [activeGroup, setActiveGroup] = useState("webCards");
-  const prefersReducedMotion = useReducedMotion();
 
   const changeActiveGroup = (group: string) => {
     setActiveGroup(group);
@@ -33,29 +31,9 @@ const CardGroup = () => {
   }
 
   return (
-    <div className="flex flex-col gap-8 lg:gap-10">
+    <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 className="relative">
-        <AnimatePresence mode="wait">
-          {ActiveCards && (
-            <motion.div
-              key={activeGroup}
-              initial={
-                prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 12 }
-              }
-              animate={
-                prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
-              }
-              exit={
-                prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -12 }
-              }
-              transition={{ type: "spring", damping: 26, stiffness: 220 }}
-            >
-              <ActiveCards />
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
     </div>
   );
 };

src/Components/Pages/Services/MarketingCards.tsx

@@ -9,34 +9,30 @@ const MarketingCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="grid grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-6">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap md:flex-row md:mx-4 gap-5">
       <Card
-        step={1}
         title={t("services.cards.marketing.card1.title")}
         description={t("services.cards.marketing.card1.description")}
         imgSrc={AnaliseImg}
-        delay={0}
+        delay="0s"
       />
       <Card
-        step={2}
         title={t("services.cards.marketing.card2.title")}
         description={t("services.cards.marketing.card2.description")}
         imgSrc={CreateImg}
-        delay={0.08}
+        delay="0.1s"
       />
       <Card
-        step={3}
         title={t("services.cards.marketing.card3.title")}
         description={t("services.cards.marketing.card3.description")}
         imgSrc={ScaleImg}
-        delay={0.16}
+        delay="0.2s"
       />
       <Card
-        step={4}
         title={t("services.cards.marketing.card4.title")}
         description={t("services.cards.marketing.card4.description")}
         imgSrc={ExecuteImg}
-        delay={0.24}
+        delay="0.3s"
       />
     </div>
   );

src/Components/Pages/Services/ServiceCard.tsx

@@ -1,49 +1,36 @@
-import { motion, useReducedMotion } from "framer-motion";
-
 interface IProps {
-  step: number;
   title: string;
   description: string;
   imgSrc: string;
-  delay: number;
+  delay: string;
 }
 
-const Card = ({ step, title, description, imgSrc, delay }: IProps) => {
-  const prefersReducedMotion = useReducedMotion();
-
+const Card = ({ title, description, imgSrc, delay }: IProps) => {
   return (
-    <motion.div
-      className="flex flex-col gap-4"
-      initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 16 }}
-      animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
-      transition={{
-        type: "spring",
-        damping: 24,
-        stiffness: 160,
-        delay: prefersReducedMotion ? 0 : delay,
+    <div
+      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%)",
+        animation: `fadeEffect 1s ${delay} forwards`,
+        opacity: 0,
       }}
     >
-      <div className="relative aspect-[4/5] rounded-2xl overflow-hidden ring-1 ring-white/10">
-        <motion.div
-          className="absolute inset-0 bg-cover bg-center"
-          style={{ backgroundImage: `url(${imgSrc})` }}
-          whileHover={prefersReducedMotion ? {} : { scale: 1.06 }}
-          transition={{ type: "spring", damping: 22, stiffness: 120 }}
-        />
-        <div className="absolute inset-0 bg-gradient-to-t from-black/35 via-transparent to-transparent" />
-        <span className="absolute top-3 left-3 h-8 w-8 rounded-full glass-panel flex items-center justify-center text-xs font-bold text-gold-light">
-          {String(step).padStart(2, "0")}
-        </span>
+      <div className="glass-premium p-6">
+        <div className="lg:py-6">
+          <h2
+            className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] text-3xl font-bold text-white"
+          >
+            {title}
+          </h2>
+          <p
+            className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] font-thin text-xl"
+          >
+            {description}
+          </p>
+        </div>
       </div>
-      <div className="px-0.5">
-        <h3 className="text-lg lg:text-xl font-semibold text-white tracking-tight">
-          {title}
-        </h3>
-        <p className="mt-1.5 text-sm lg:text-base text-white/55 leading-snug">
-          {description}
-        </p>
-      </div>
-    </motion.div>
+    </div>
   );
 };
 

src/Components/Pages/Services/ServiceCardContainer.tsx

@@ -2,7 +2,7 @@ import CardGroup from "./CardGroup";
 
 const ServiceCardContainer = () => {
   return (
-    <div className="rounded-3xl mx-4 lg:mx-16 xl:mx-24 2xl:mx-48 1920:margin-calc mt-10 glass-panel shadow-glass-lg p-5 md:p-8 lg:p-10">
+    <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

@@ -1,42 +1,26 @@
 import { useTranslation } from "react-i18next";
-import { motion, useReducedMotion } from "framer-motion";
 import Underline from "../../../assets/Underline.svg";
 import ServiceCardContainer from "./ServiceCardContainer";
 
 const Services = () => {
   const { t } = useTranslation();
-  const prefersReducedMotion = useReducedMotion();
 
   return (
-    <div className="header-text">
-      <motion.h1
-        initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 20 }}
-        whileInView={
-          prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
-        }
-        viewport={{ once: true, margin: "-100px" }}
-        transition={{ type: "spring", damping: 22, stiffness: 140 }}
-      >
-        {t("services.heading.part1")}
-        <span className="relative inline-block">
-          {t("services.heading.part2")}{" "}
-          <img
+    <div className="header-text p-8 md:p-16 mx-4 my-10 rounded-2xl">
+      <h1>
+  {t("services.heading.part1")}
+  <span className="relative inline-block">
+    {t("services.heading.part2")} 
+    <img
             src={Underline}
             alt="underline"
             className="absolute bottom-0 left-0"
           />
-        </span>{" "}
-      </motion.h1>
-      <motion.h1
-        initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 20 }}
-        whileInView={
-          prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
-        }
-        viewport={{ once: true, margin: "-100px" }}
-        transition={{ type: "spring", damping: 22, stiffness: 140, delay: 0.05 }}
-      >
+  </span>{" "}
+</h1>
+      <h1>
         {t("services.heading.part3")}
-      </motion.h1>
+      </h1>
       <ServiceCardContainer />
     </div>
   );

src/Components/Pages/Services/SocialMedia.tsx

@@ -9,34 +9,30 @@ const SocialMediaCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="grid grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-6">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap md:flex-row md:mx-4 gap-5">
       <Card
-        step={1}
         title={t("services.cards.social.card1.title")}
         description={t("services.cards.social.card1.description")}
         imgSrc={AlgorithmImg}
-        delay={0}
+        delay="0s"
       />
       <Card
-        step={2}
         title={t("services.cards.social.card2.title")}
         description={t("services.cards.social.card2.description")}
         imgSrc={ScheduleImg}
-        delay={0.08}
+        delay="0.1s"
       />
       <Card
-        step={3}
         title={t("services.cards.social.card3.title")}
         description={t("services.cards.social.card3.description")}
         imgSrc={TargetImg}
-        delay={0.16}
+        delay="0.2s"
       />
       <Card
-        step={4}
         title={t("services.cards.social.card4.title")}
         description={t("services.cards.social.card4.description")}
         imgSrc={ExpandImg}
-        delay={0.24}
+        delay="0.3s"
       />
     </div>
   );

src/Components/Pages/Services/WebsiteCards.tsx

@@ -9,34 +9,30 @@ const WesiteCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="grid grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-6">
+    <div className="h-full flex lg:mt-20 flex-col flex-wrap md:flex-row md:mx-4 gap-5">
       <Card
-        step={1}
         title={t("services.cards.website.card1.title")}
         description={t("services.cards.website.card1.description")}
         imgSrc={IdealizeImg}
-        delay={0}
+        delay="0s"
       />
       <Card
-        step={2}
         title={t("services.cards.website.card2.title")}
         description={t("services.cards.website.card2.description")}
         imgSrc={DesignImg}
-        delay={0.08}
+        delay="0.1s"
       />
       <Card
-        step={3}
         title={t("services.cards.website.card3.title")}
         description={t("services.cards.website.card3.description")}
         imgSrc={CodeImg}
-        delay={0.16}
+        delay="0.2s"
       />
       <Card
-        step={4}
         title={t("services.cards.website.card4.title")}
         description={t("services.cards.website.card4.description")}
         imgSrc={BuildImg}
-        delay={0.24}
+        delay="0.3s"
       />
     </div>
   );

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,
-    fallbackLng: "en",
+    // 'process.env.NODE_ENV' is replaced at build time by most bundlers (Vite, CRA, Webpack) to control debug mode.
+// 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,177 +1,115 @@
-@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap");
+@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;
 
-::selection {
-  background: rgba(250, 204, 151, 0.25);
-  color: #fff;
+/* 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;
 }
 
-html {
-  scroll-behavior: smooth;
-  color-scheme: dark;
-}
 
 body {
-  @apply bg-custom-bgdark text-white;
-  background: radial-gradient(120% 90% at 50% -10%, #26262c 0%, #131316 42%, #06060b 100%);
-  min-height: 100vh;
+  @apply bg-gradient-to-br from-custom-bglight to-custom-bgdark antialiased min-h-screen text-white;
+  font-family: 'Inter', sans-serif;
 }
 
-::-webkit-scrollbar {
-  width: 10px;
-}
-::-webkit-scrollbar-track {
-  background: #06060b;
-}
-::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, #facc97, #54330f);
-  border-radius: 999px;
-  border: 2px solid #06060b;
+.glass-premium {
+  @apply bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl shadow-lg border border-white border-opacity-20;
 }
 
-:focus-visible {
-  outline: 2px solid #facc97;
-  outline-offset: 2px;
-  border-radius: 4px;
+
+.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;
 }
 
-/* Display / hero type — negative tracking + tight leading, sized down for room to breathe */
 .hero-text {
-  @apply font-semibold text-5xl lg:text-7xl xl:text-8xl;
-  line-height: 1.02;
-  letter-spacing: -0.02em;
+  @apply font-medium text-5xl lg:text-7xl xl:text-8xl;
 }
 .hero-text-pt {
-  @apply font-semibold text-4xl lg:text-6xl xl:text-7xl;
-  line-height: 1.04;
-  letter-spacing: -0.015em;
+  @apply font-medium text-4xl md:text-5xl lg:text-6xl xl:text-8xl;
 }
 
 .hero-sub-text {
-  @apply text-lg md:text-2xl 2xl:text-3xl text-white/60;
-  line-height: 1.4;
-  letter-spacing: -0.005em;
-  font-style: normal;
+  @apply italic text-lg md:text-2xl 2xl:text-3xl;
 }
 .hero-sub-text-pt {
-  @apply text-lg md:text-xl 2xl:text-2xl text-white/60;
-  line-height: 1.4;
-  letter-spacing: 0;
-  font-style: normal;
+  @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 font-semibold;
-  line-height: 1.1;
-  letter-spacing: -0.015em;
+  @apply mt-20 lg:mt-48 text-3xl md:text-5xl xl:text-7xl text-center;
 }
 
 .sub-header-text {
-  @apply block text-sm mx-10 md:text-2xl mt-5 text-white/50;
-  font-weight: 300;
-  line-height: 1.45;
+  @apply italic font-thin block text-sm mx-10 md:text-2xl mt-5 text-gray-400;
 }
 
 .form-input {
-  @apply rounded-xl px-4 py-3 mt-2 bg-white/[0.03] border border-white/10 text-sm md:text-base text-white placeholder-white/35 transition-colors duration-200;
-}
-.form-input:focus {
-  @apply border-gold-light/50 bg-white/[0.05];
-  outline: none;
-}
-
-.phone-input-group {
-  @apply rounded-xl mt-2 px-4 py-3 bg-white/[0.03] border border-white/10 transition-colors duration-200;
-}
-.phone-input-group:focus-within {
-  @apply border-gold-light/50 bg-white/[0.05];
-}
-.phone-number-input {
-  @apply flex-1 min-w-0 bg-transparent text-white placeholder-white/35 text-sm md:text-base pl-2 outline-none leading-tight;
+  @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-mid;
+  @apply bg-clip-text text-transparent bg-gradient-to-br from-gold-gradient-light to-gold-gradient-dark;
 }
 
 .fade-effect {
-  animation: fadeEffect 0.6s ease-out both;
+  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-5 mt-3 italic text-lg xl:text-2xl font-medium text-gray-300;
 }
 
 .footer-text {
-  @apply text-white/45 font-medium text-xs md:text-sm tracking-wide;
+  @apply text-gray-400 font-medium text-xs md:text-base
 }
 
 .footer-text-pt {
-  @apply text-white/45 font-medium text-xs md:text-sm tracking-wide;
-}
-
-/* Glass material — the floating functional layer (§12) */
-.glass-panel {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
-  border: 1px solid rgba(250, 204, 151, 0.14);
-  backdrop-filter: blur(20px) saturate(160%);
-  -webkit-backdrop-filter: blur(20px) saturate(160%);
-}
-
-.glass-nav {
-  background: rgba(10, 10, 13, 0.55);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
-  border: 1px solid rgba(250, 204, 151, 0.1);
-}
-
-/* Heavier material for full takeover surfaces (mobile menu sheet) — a
-   bigger surface needs to read as thicker, per the materials guidance. */
-.glass-sheet {
-  background: rgba(14, 14, 17, 0.92);
-  backdrop-filter: blur(28px) saturate(150%);
-  -webkit-backdrop-filter: blur(28px) saturate(150%);
-  border: 1px solid rgba(250, 204, 151, 0.14);
-}
-
-@media (prefers-reduced-transparency: reduce) {
-  .glass-sheet {
-    background: #0c0c10;
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
-  }
+  @apply text-gray-400 font-medium text-xs md:text-base
 }
 
 @keyframes fadeEffect {
   0% {
     opacity: 0;
-    transform: translateY(6px);
   }
   100% {
     opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
-  }
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-
-@media (prefers-contrast: more) {
-  .glass-panel,
-  .glass-nav {
-    background: #0c0c10;
-    border-color: rgba(250, 204, 151, 0.4);
-    backdrop-filter: none;
-    -webkit-backdrop-filter: none;
   }
 }

src/routes/PP.tsx

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

src/routes/TOS.tsx

@@ -3,115 +3,58 @@ import Navbar from "../Components/Navbar/Navbar";
 import Footer from "../Components/Footer/Footer";
 
 const TOS = () => {
-  const { t } = useTranslation("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 max-w-4xl">
-        <h1 className="text-3xl md:text-5xl font-semibold text-center mb-10 tracking-tight">
-          {t("tos.pageTitle")}
-        </h1>
-        <div className="glass-panel shadow-glass-lg rounded-3xl p-6 md:p-12">
-          <p className="mb-4 text-white/45 text-sm">{t("tos.lastUpdated")}</p>
-          <p className="mb-8 text-white/70 leading-relaxed">
-            {t("tos.introText")}
-          </p>
-          <h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
-            {t("tos.tos1.title")}
-          </h2>
-          {t("tos.tos1.desc")
-            .split("\n\n")
-            .map((paragraph, index) => (
-              <p key={index} className="mb-4 text-white/70 leading-relaxed">
-                {paragraph.split("\n").map((line, index) => (
-                  <span key={index}>
-                    {line}
-                    <br />
-                  </span>
-                ))}
-              </p>
-            ))}
-          <h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
-            {t("tos.tos2.title")}
-          </h2>
-          {t("tos.tos2.desc")
-            .split("\n\n")
-            .map((paragraph, index) => (
-              <p key={index} className="mb-4 text-white/70 leading-relaxed">
-                {paragraph.split("\n").map((line, index) => (
-                  <span key={index}>
-                    {line}
-                    <br />
-                  </span>
-                ))}
-              </p>
-            ))}
-          <h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
-            {t("tos.tos3.title")}
-          </h2>
-          {t("tos.tos3.desc")
-            .split("\n\n")
-            .map((paragraph, index) => (
-              <p key={index} className="mb-4 text-white/70 leading-relaxed">
-                {paragraph.split("\n").map((line, index) => (
-                  <span key={index}>
-                    {line}
-                    <br />
-                  </span>
-                ))}
-              </p>
-            ))}
-          <h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
-            {t("tos.tos4.title")}
-          </h2>
-          {t("tos.tos4.desc")
-            .split("\n\n")
-            .map((paragraph, index) => (
-              <p key={index} className="mb-4 text-white/70 leading-relaxed">
-                {paragraph.split("\n").map((line, index) => (
-                  <span key={index}>
-                    {line}
-                    <br />
-                  </span>
-                ))}
-              </p>
-            ))}
-          <h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
-            {t("tos.tos5.title")}
-          </h2>
-          {t("tos.tos5.desc")
-            .split("\n\n")
-            .map((paragraph, index) => (
-              <p key={index} className="mb-4 text-white/70 leading-relaxed">
-                {paragraph.split("\n").map((line, index) => (
-                  <span key={index}>
-                    {line}
-                    <br />
-                  </span>
-                ))}
-              </p>
-            ))}
-          <h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
-            {t("tos.tos6.title")}
-          </h2>
-          {t("tos.tos6.desc")
-            .split("\n\n")
-            .map((paragraph, index) => (
-              <p key={index} className="mb-4 text-white/70 leading-relaxed">
-                {paragraph.split("\n").map((line, index) => (
-                  <span key={index}>
-                    {line}
-                    <br />
-                  </span>
-                ))}
-              </p>
-            ))}
+      <div className="container mx-auto px-4 py-20 flex flex-col min-h-[70vh]">
+        <h1 className="text-4xl md:text-5xl font-extrabold gold-text text-center mb-6 tracking-wide animate-fadein">{t("tos.pageTitle")}</h1>
+        <p className="mb-2 text-white text-sm text-center animate-fadein">{t("tos.lastUpdated")}</p>
+        <p className="mb-10 text-white text-base text-center animate-fadein">{t("tos.introText")}</p>
+        <div className="w-full max-w-5xl mx-auto">
+          
+          <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 text-white text-base text-left">{paragraph.split("\n").map((line, index) => (
+              <span key={index}>{line}<br/></span>
+            ))}</p>
+          ))}
+          <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 text-white text-base text-left">{paragraph.split("\n").map((line, index) => (
+              <span key={index}>{line}<br/></span>
+            ))}</p>
+          ))}
+          <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 text-white text-base text-left">{paragraph.split("\n").map((line, index) => (
+              <span key={index}>{line}<br/></span>
+            ))}</p>
+          ))}
+          <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 text-white text-base text-left">{paragraph.split("\n").map((line, index) => (
+              <span key={index}>{line}<br/></span>
+            ))}</p>
+          ))}
+          <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 text-white text-base text-left">{paragraph.split("\n").map((line, index) => (
+              <span key={index}>{line}<br/></span>
+            ))}</p>
+          ))}
+          <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 text-white text-base text-left">{paragraph.split("\n").map((line, index) => (
+              <span key={index}>{line}<br/></span>
+            ))}</p>
+          ))}
         </div>
       </div>
-      <Footer />
+      <Footer/>
     </div>
   );
 };
 
-export default TOS;
+export default TOS;

tailwind.config.js

@@ -3,30 +3,26 @@ export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
+      fontFamily: {
+        inter: ['Inter', 'sans-serif'],
+        baijam: ['Bai Jamjuree', 'sans-serif'],
+      },
+      colors: {
+        'gold-accent': '#C28818',
+        'gold-light': '#E6C674',
+        'gold-dark': '#8C6B1F',
+        'gold-gradient-light': '#FACC97',
+        'gold-gradient-dark': '#54330F',
+        'custom-bglight': '#1C1C1F',
+        'custom-bgdark': '#06060B',
+        'text-gold': '#FACC97',
+        'gray-bg': '#1C1C1C',
+      },
       screens: {
         1920: "1921px",
       },
-      colors: {
-        "custom-bglight": "#1C1C1F",
-        "custom-bgdark": "#06060B",
-        "text-gold": "#FACC97",
-        "gold-light": "#FACC97",
-        "gold-dark": "#54330F",
-        "gold-mid": "#C9924F",
-        "gray-bg": "#1C1C1C",
-        surface: "rgba(255, 255, 255, 0.04)",
-        "surface-border": "rgba(250, 204, 151, 0.14)",
-      },
-      fontFamily: {
-        baijam: ['"Bai Jamjuree"', "sans-serif"],
-      },
-      boxShadow: {
-        glass: "0 1px 1px rgba(250, 204, 151, 0.08), 0 20px 60px -20px rgba(0, 0, 0, 0.6)",
-        "glass-lg": "0 1px 1px rgba(250, 204, 151, 0.1), 0 30px 90px -20px rgba(0, 0, 0, 0.7)",
-        "gold-glow": "0 8px 30px -8px rgba(250, 204, 151, 0.35)",
-      },
-      backdropBlur: {
-        xs: "2px",
+      backgroundImage: {
+        "hero-pattern": "url('./src/assets/HeroImg.svg')",
       },
     },
   },