polishing ui

.claude/launch.json

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

.dockerignore

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

Dockerfile

@@ -5,7 +5,6 @@ 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:
-  app:
+  web:
+    container_name: lk-landing-page
     build:
       context: .
       dockerfile: Dockerfile
-    container_name: lk-landing-page
-    environment:
-      - NODE_ENV=production
+    networks:
+      - cloudflare
     restart: unless-stopped
+networks:
+  cloudflare:
+    external: true

package.json

@@ -13,8 +13,7 @@
     "@emailjs/browser": "^4.3.3",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.3",
-    "caniuse-lite": "^1.0.30001696",
-    "framer-motion": "^12.7.3",
+    "framer-motion": "^13.2.0",
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",
@@ -24,13 +23,11 @@
     "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",
@@ -43,6 +40,6 @@
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.2.2",
-    "vite": "^6.3.2"
+    "vite": "^5.1.0"
   }
 }

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": "Contact Us"
+    "button": "Yes, I want that!"
   },
   "services": {
     "heading": {
@@ -99,8 +99,8 @@
   },
   "optimization": {
     "heading": {
-      "part1": "So How Do I Optimize",
-      "part2": "My Business?"
+      "part1": "So How Do You Optimize",
+      "part2": "Your Business?"
     },
     "cards": {
       "card1": {
@@ -120,7 +120,7 @@
   "results": {
     "heading": {
       "part1": "Ok... So What Makes",
-      "part2": "You Different?"
+      "part2": "Us 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 and we’ll get",
+      "part1": "Would you like to know what we could do for you? Fill out the form ad we’ll get",
       "part2": "back to you. No obligation, no annoying tactics. We won’t waste your time."
     },
     "form": {
@@ -159,20 +159,13 @@
       "company": "Company",
       "phone": "Phone",
       "question": "What is your most important question?",
-      "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"
+      "message": "Message",
+      "button": "Send"
     },
     "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.",
-      "invalidCountryCode": "Please enter a valid country code.",
-      "invalidEmail": "Please enter a valid email address.",
-      "invalidPhone": "Please enter a valid phone number."
+      "empty": "Please fill out all the fields before sending the message."
     }
   },
   "footer": {

public/locales/common/pt.json

@@ -11,10 +11,10 @@
       "part2": "TEU NEGÓCIO"
     },
     "subheading": {
-      "part1": "Nós tratamos da tua presença digital,",
+      "part1": "Nós tratamos de toda a tua presença digital,",
       "part2": "para que te possas concentrar no que é importante!"
     },
-    "button": "Contacta-nos"
+    "button": "Eu quero isto!"
   },
   "services": {
     "heading": {
@@ -119,7 +119,7 @@
   },
   "results": {
     "heading": {
-      "part1": "Ok... Então O Que Vos Torna",
+      "part1": "Ok... Então O Que Nos Torna",
       "part2": "Diferentes?"
     },
     "subheading": "Ajudamos muitos negócios a crescer e expandir a sua presença digital.",
@@ -159,25 +159,18 @@
       "company": "Empresa",
       "phone": "Telefone",
       "question": "Qual é a tua pergunta mais importante?",
-      "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."
+      "message": "Mensagem",
+      "button": "Enviar"
     },
     "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.",
-      "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."
+      "empty": "Por favor, preenche todos os campos antes de enviar a mensagem."
     }
   },
   "footer": {
     "rights": "©2024 Direitos reservados a LK Results",
     "tos": "Termos de Serviço",
-    "privacy": "Política de Privacidade"
+    "privacy": "Polítca de Privacidade"
   }
 }

src/App.tsx

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

src/Components/Card.tsx

@@ -1,28 +1,49 @@
+import { motion, useReducedMotion } from "framer-motion";
+
 interface IProps {
   title: string;
   description: string;
   image: string;
+  index?: number;
 }
 
-const Card = ({ title, description, image }: IProps) => {
-  const defaultImgClasses = `w-full h-20 mt-5`;
-  const imgClasses = image ? defaultImgClasses : `${defaultImgClasses} hidden`;
+const Card = ({ title, description, image, index = 0 }: IProps) => {
+  const prefersReducedMotion = useReducedMotion();
 
   return (
-    <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>
+    <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>
   );
 };
 

src/Components/Footer/Footer.tsx

@@ -1,15 +1,76 @@
 import { useTranslation } from "react-i18next";
+import { FaFacebook, FaLinkedin } from "react-icons/fa";
+import { motion } from "framer-motion";
 
 const Footer = () => {
-  const { t } = useTranslation();
+  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";
 
   return (
-    <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>
+    <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>
       </div>
-      <p className="text-xs text-gray-400 text-center">{t("footer.rights")}</p>
+
+      <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>
     </footer>
   );
 };

src/Components/Loading.tsx

@@ -1,7 +1,19 @@
+import { motion, useReducedMotion } from "framer-motion";
+
 const Loading = () => {
+  const prefersReducedMotion = useReducedMotion();
+
   return (
-    <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 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>
   );
 };

src/Components/Navbar/MenuContent.tsx

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,85 @@
+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,35 +1,27 @@
 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";
 
-export default () => {
+const NAVBAR_HEIGHT = 110;
+
+const Navbar = () => {
   const [state, setState] = useState(false);
   const { t, i18n } = useTranslation();
+  const prefersReducedMotion = useReducedMotion();
 
   const [colorChange, setColorChange] = useState(false);
-  useEffect(() => {
-    const changeColor = () => {
-      if (window.scrollY >= 100) {
-        setColorChange(true);
-      } else {
-        setColorChange(false);
-      }
-    };
+  const [activeSection, setActiveSection] = useState("Services");
 
-    window.addEventListener("scroll", changeColor);
-
-    const scrollPath = sessionStorage.getItem("scrollPath");
-    if (scrollPath) {
-      smoothScroll(scrollPath);
-      sessionStorage.removeItem("scrollPath");
-    }
-
-    return () => {
-      window.removeEventListener("scroll", changeColor);
-    };
-  }, []);
+  // 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" },
@@ -38,7 +30,69 @@ export default () => {
     { 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;
+        }
+      }
+      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);
+
+    const scrollPath = sessionStorage.getItem("scrollPath");
+    if (scrollPath) {
+      smoothScroll(scrollPath);
+      sessionStorage.removeItem("scrollPath");
+    }
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", measureSections);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const handleNavigation = (path: string) => {
+    setState(false);
     if (
       (window.location.pathname === "/tos" ||
         window.location.pathname === "/privacy") &&
@@ -53,10 +107,9 @@ export default () => {
 
   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 - navbarHeight;
+        element.getBoundingClientRect().top + window.scrollY - NAVBAR_HEIGHT;
       window.scrollTo({ top: top, behavior: "smooth" });
     }
   };
@@ -65,21 +118,50 @@ export default () => {
     i18n.changeLanguage(lng);
   };
 
-  return (
-    <nav
-      className={`${
-        colorChange || state
-          ? "bg-custom-bglight w-full border-0 sticky top-0 z-10"
-          : "z-10"
-      }`}
-    >
-      <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"
+  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 }}
+    >
+      <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
+            href="Top"
+            whileTap={{ scale: 0.92 }}
+            transition={{ type: "spring", stiffness: 500, damping: 30 }}
             onClick={(e) => {
-              e.preventDefault(); // Prevent the default anchor tag behavior
+              e.preventDefault();
               if (window.location.pathname === "/") {
                 window.scrollTo({ top: 0, behavior: "smooth" });
               } else {
@@ -87,101 +169,108 @@ export default () => {
               }
             }}
           >
-            <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>
-          )}
+            <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>
         </div>
-
-        {/* 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 && (
-          <div
-            className="fixed top-0 left-0 w-full h-screen bg-black bg-opacity-60 z-40 lg:hidden"
-            onClick={() => setState(false)}
-          />
-        )}
       </div>
-    </nav>
+
+      <AnimatePresence>
+        {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>
+          </>
+        )}
+      </AnimatePresence>
+    </motion.nav>
   );
 };
+
+export default Navbar;

src/Components/Navbar/langFlag.ts

@@ -0,0 +1,11 @@
+// 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

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

src/Components/Pages/Contact/ContactForm.tsx

@@ -3,18 +3,58 @@ import emailjs from "@emailjs/browser";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { useTranslation } from "react-i18next";
-import PhoneInput, {
-  formatPhoneNumber,
-  isValidPhoneNumber,
-  parsePhoneNumber,
-} from "react-phone-number-input";
-import "react-phone-number-input/style.css";
-import "./ContactForm.css";
-import PremiumButton from "../../Shared/PremiumButton";
+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;
+};
 
 const ContactForm = () => {
   const { t } = useTranslation();
-  const [phone, setPhone] = useState<string | undefined>(undefined);
+  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 notify = () => {
     toast.success(t("contact.toasts.success"));
@@ -28,61 +68,21 @@ 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();
 
-    let isEmpty = Array.from(e.currentTarget.elements).some(
-      (input) =>
-        (input as HTMLInputElement).type !== "submit" &&
-        (input as HTMLInputElement).value.trim() === ""
-    );
+    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() === "";
+    });
 
-    if (isEmpty || !phone) {
-      if (!phone || !isValidPhoneNumber(phone)) {
-        toast.error(t("contact.toasts.invalidPhone"));
-      } else {
-        emptyForm();
-      }
+    if (isEmpty) {
+      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,13 +99,23 @@ const ContactForm = () => {
       );
 
     e.currentTarget.reset();
-    setPhone(undefined); // Reset phone state
+    setPhoneDigits("");
+    setCountryCode("+351");
   };
 
   return (
-    <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">
+    <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">
           <input
             className="form-input flex-1"
             type="text"
@@ -119,28 +129,28 @@ const ContactForm = () => {
             placeholder={t("contact.form.email")}
           />
         </div>
-        <div className="flex flex-col md:flex-row md:gap-4 md:mt-4">
+        <div className="flex flex-col md:flex-row md:gap-3">
           <input
-            className="form-input md:w-1/2"
+            className="form-input flex-1"
             type="text"
             name="user_company"
             placeholder={t("contact.form.company")}
           />
-          <div className="md:w-1/2 flex items-center">
-            <PhoneInput
-              defaultCountry="PT"
+          <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)}
               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 md:mt-4">
+        <div className="flex flex-col">
           <input
             className="form-input"
             type="text"
@@ -148,40 +158,24 @@ const ContactForm = () => {
             placeholder={t("contact.form.question")}
           ></input>
 
-          <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>
+          <textarea
+            className="form-input resize-none"
+            name="message"
+            placeholder={t("contact.form.message")}
+            rows={5}
+          ></textarea>
         </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>
+        <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>
 
         <ToastContainer
           position="top-center"
@@ -195,7 +189,7 @@ const ContactForm = () => {
           pauseOnHover
           theme="dark"
         />
-      </form>
+      </motion.form>
     </div>
   );
 };

src/Components/Pages/Contact/ContactPage.tsx

@@ -1,22 +1,48 @@
 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">
-        <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 }}
+        >
           {t("contact.heading.part1")} <br />
           {t("contact.heading.part2")}{" "}
-          <span className="gold-text"><span className="gold-text">{t("contact.heading.part3")}</span></span>{" "}
+          <span className="gold-text">{t("contact.heading.part3")}</span>{" "}
           {t("contact.heading.part4")}
-        </h1>
-        <h2 className="sub-header-text ">
+        </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,
+          }}
+        >
           {t("contact.subheading.part1")} <br />
           {t("contact.subheading.part2")}
-        </h2>
+        </motion.h2>
       </div>
       <ContactForm />
     </div>

src/Components/Pages/Contact/PhoneCodeSelect.tsx

@@ -0,0 +1,106 @@
+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,14 +1,20 @@
 import { useTranslation } from "react-i18next";
-import PremiumButton from "../../Shared/PremiumButton";
-import HeroImg from "../../../assets/HeroImg.svg";
+import { motion, useReducedMotion } from "framer-motion";
 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; // Replace with your navbar's height
+    const navbarHeight = 110;
     if (element) {
       const top =
         element.getBoundingClientRect().top + window.scrollY - navbarHeight;
@@ -16,41 +22,59 @@ 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">
-      <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>
+      <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="justify-center items-center lg:w-1/2 xl:w-1/2">
-        <div className="flex flex-col text-center pt-4 lg:pt-10 lg:pr-20 lg:text-right">
-          <img
+        <div className="flex flex-col text-center lg:pt-10 lg:pr-20 lg:text-right 2xl:pr-40">
+          <motion.img
             src={Stars}
             alt="hero"
             className="md:px-0 ml-auto mr-auto lg:mr-0 lg:text-right"
-          ></img>
+            {...rise(0)}
+          />
           <div>
-            <h1
-              className={i18n.language === "en" ? "hero-text" : "hero-text-pt"}
+            <motion.h1
+              className={currentLang === "en" ? "hero-text" : "hero-text-pt"}
+              {...rise(0.05)}
             >
               {t("hero.heading.part1")}
-            </h1>
-            <h1
-              className={i18n.language === "en" ? "hero-text" : "hero-text-pt"}
+            </motion.h1>
+            <motion.h1
+              className={currentLang === "en" ? "hero-text" : "hero-text-pt"}
+              {...rise(0.1)}
             >
-              {t("hero.heading.part2")}
-            </h1>
-            <div>
-              <img
-                src={HeroImg}
-                alt="heroSm"
-                className="flex mt-6 lg:hidden"
-              ></img>
+              <span className="gold-text">{t("hero.heading.part2")}</span>
+            </motion.h1>
+            <div className="flex mt-6 lg:hidden">
+              <HeroVisual />
             </div>
           </div>
-          <div className="mx-5 lg:mx-0">
+          <motion.div className="mx-5 lg:mx-0" {...rise(0.15)}>
             <h2
               className={
-                i18n.language === "en"
+                currentLang === "en"
                   ? "hero-sub-text mt-4 md:mt-10"
                   : "hero-sub-text-pt mt-4 md:mt-10"
               }
@@ -59,20 +83,34 @@ const Hero = () => {
             </h2>
             <h2
               className={
-                i18n.language === "en" ? "hero-sub-text" : "hero-sub-text-pt"
+                currentLang === "en" ? "hero-sub-text" : "hero-sub-text-pt"
               }
             >
               {t("hero.subheading.part2")}
             </h2>
-          </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>
+          </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>
+    </div>
   );
 };
 

src/Components/Pages/Hero/HeroVisual.tsx

@@ -0,0 +1,79 @@
+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,21 +9,24 @@ const CardContainer = () => {
   const { t } = useTranslation();
 
   return (
-    <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">
+    <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">
       <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,18 +1,29 @@
-import CardContainer from './CardContainer'
-import { useTranslation } from 'react-i18next'
+import CardContainer from "./CardContainer";
+import { useTranslation } from "react-i18next";
+import { motion, useReducedMotion } from "framer-motion";
 
 const Optimization = () => {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
+  const prefersReducedMotion = useReducedMotion();
+
   return (
     <div className="header-text">
-      <h1>
-        <span className="gold-text">"</span>
-        {t("optimization.heading.part1")} <br /> {t("optimization.heading.part2")}
-        <span className="gold-text">"</span>
-      </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 }}
+      >
+        <span className="gold-text">&ldquo;</span>
+        {t("optimization.heading.part1")} <br />{" "}
+        {t("optimization.heading.part2")}
+        <span className="gold-text">&rdquo;</span>
+      </motion.h1>
       <CardContainer />
     </div>
-  )
-}
+  );
+};
 
-export default Optimization
+export default Optimization;

src/Components/Pages/Results/CardContainer.tsx

@@ -5,26 +5,30 @@ const CardContainer = () => {
   const { t } = useTranslation();
 
   return (
-    <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">
+    <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">
       <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,16 +1,25 @@
 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 p-8 md:p-16 mx-4 my-10 rounded-2xl">
-      <h1>
-        <span className="gold-text">"</span>
+    <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("results.heading.part1")} <br /> {t("results.heading.part2")}
-        <span className="gold-text">"</span>
-      </h1>
+        <span className="gold-text">&rdquo;</span>
+      </motion.h1>
       <CardContainer />
     </div>
   );

src/Components/Pages/Services/Buttons.tsx

@@ -16,7 +16,7 @@ const Buttons = ({ changeActiveGroup }: props) => {
   };
 
   return (
-    <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">
+    <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">
       <CardBtn
         title="Marketing"
         onClick={() => handleClick("markCards")}
@@ -28,12 +28,12 @@ const Buttons = ({ changeActiveGroup }: props) => {
         isSelected={selectedButton === "webCards"}
       />
       <CardBtn
-        title="Social Media"
+        title="Social"
         onClick={() => handleClick("smCards")}
         isSelected={selectedButton === "smCards"}
       />
       <CardBtn
-        title="Video & Edits"
+        title="Camera"
         onClick={() => handleClick("camCards")}
         isSelected={selectedButton === "camCards"}
       />

src/Components/Pages/Services/CameraCards.tsx

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

src/Components/Pages/Services/CardBtn.tsx

@@ -1,3 +1,5 @@
+import { motion } from "framer-motion";
+
 interface props {
   title: string;
   onClick: () => void;
@@ -5,14 +7,24 @@ 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 (
-      <a className={buttonClass} onClick={onClick}>
-        {title}
-      </a>
+    <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>
   );
 };
 

src/Components/Pages/Services/CardGroup.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import WesiteCards from "./WebsiteCards";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import WesiteCards from "./WesiteCards";
 import Buttons from "./Buttons";
 import MarketingCards from "./MarketingCards";
 import CameraCards from "./CameraCards";
@@ -7,6 +8,7 @@ import SocialMediaCards from "./SocialMedia";
 
 const CardGroup = () => {
   const [activeGroup, setActiveGroup] = useState("webCards");
+  const prefersReducedMotion = useReducedMotion();
 
   const changeActiveGroup = (group: string) => {
     setActiveGroup(group);
@@ -31,9 +33,29 @@ const CardGroup = () => {
   }
 
   return (
-    <div className="h-full font-medium md:px-8 py-3 text-2xl md:text-3xl flex flex-col">
-      {ActiveCards && <ActiveCards />}
+    <div className="flex flex-col gap-8 lg:gap-10">
       <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,30 +9,34 @@ const MarketingCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap md:flex-row md:mx-4 gap-5">
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-6">
       <Card
+        step={1}
         title={t("services.cards.marketing.card1.title")}
         description={t("services.cards.marketing.card1.description")}
         imgSrc={AnaliseImg}
-        delay="0s"
+        delay={0}
       />
       <Card
+        step={2}
         title={t("services.cards.marketing.card2.title")}
         description={t("services.cards.marketing.card2.description")}
         imgSrc={CreateImg}
-        delay="0.1s"
+        delay={0.08}
       />
       <Card
+        step={3}
         title={t("services.cards.marketing.card3.title")}
         description={t("services.cards.marketing.card3.description")}
         imgSrc={ScaleImg}
-        delay="0.2s"
+        delay={0.16}
       />
       <Card
+        step={4}
         title={t("services.cards.marketing.card4.title")}
         description={t("services.cards.marketing.card4.description")}
         imgSrc={ExecuteImg}
-        delay="0.3s"
+        delay={0.24}
       />
     </div>
   );

src/Components/Pages/Services/ServiceCard.tsx

@@ -1,36 +1,49 @@
+import { motion, useReducedMotion } from "framer-motion";
+
 interface IProps {
+  step: number;
   title: string;
   description: string;
   imgSrc: string;
-  delay: string;
+  delay: number;
 }
 
-const Card = ({ title, description, imgSrc, delay }: IProps) => {
+const Card = ({ step, title, description, imgSrc, delay }: IProps) => {
+  const prefersReducedMotion = useReducedMotion();
+
   return (
-    <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,
+    <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="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 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>
-    </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>
   );
 };
 

src/Components/Pages/Services/ServiceCardContainer.tsx

@@ -2,7 +2,7 @@ import CardGroup from "./CardGroup";
 
 const ServiceCardContainer = () => {
   return (
-    <div className="h-full xl:h-[65vh] 1920:h-[60vh] rounded-xl mx-4 lg:mx-20 xl:mx-40 2xl:mx-60 1920:margin-calc mt-10 p-0.5 gap-4">
+    <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">
       <CardGroup />
     </div>
   );

src/Components/Pages/Services/Services.tsx

@@ -1,26 +1,42 @@
 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 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
+    <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
             src={Underline}
             alt="underline"
             className="absolute bottom-0 left-0"
           />
-  </span>{" "}
-</h1>
-      <h1>
+        </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 }}
+      >
         {t("services.heading.part3")}
-      </h1>
+      </motion.h1>
       <ServiceCardContainer />
     </div>
   );

src/Components/Pages/Services/SocialMedia.tsx

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

src/Components/Pages/Services/WesiteCards.tsx

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

src/Components/Shared/PremiumButton.tsx

@@ -1,23 +0,0 @@
-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,19 +17,10 @@ i18n
     defaultNS: 'common',
     backend: {
       // translation file path
-      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`;
-      },
+      loadPath: (lng : string, ns : string) => `/locales/${ns}/${lng}.json`,
     },
-    // '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"],
+    debug: true,
+    fallbackLng: "en",
     interpolation: {
       escapeValue: false, // not needed for react as it escapes by default
     },

src/index.css

@@ -1,115 +1,177 @@
-@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");
+@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap");
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/* Gradient Glow Border for Hero Button */
-.gradient-glow-border {
-  position: relative;
-  z-index: 1;
-}
-.gradient-glow-border::before {
-  content: '';
-  position: absolute;
-  inset: -4px;
-  border-radius: 9999px;
-  background: linear-gradient(to bottom right, theme('colors.gold-gradient-light'), theme('colors.gold-gradient-dark'));
-  filter: blur(8px) brightness(1.18);
-  opacity: 0.7;
-  z-index: -1;
-  transition: filter 0.3s, opacity 0.3s;
-}
-.gradient-glow-border:hover::before {
-  filter: blur(10px) brightness(1.7);
-  opacity: 0.9;
+::selection {
+  background: rgba(250, 204, 151, 0.25);
+  color: #fff;
 }
 
+html {
+  scroll-behavior: smooth;
+  color-scheme: dark;
+}
 
 body {
-  @apply bg-gradient-to-br from-custom-bglight to-custom-bgdark antialiased min-h-screen text-white;
-  font-family: 'Inter', sans-serif;
+  @apply bg-custom-bgdark text-white;
+  background: radial-gradient(120% 90% at 50% -10%, #26262c 0%, #131316 42%, #06060b 100%);
+  min-height: 100vh;
 }
 
-.glass-premium {
-  @apply bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl shadow-lg border border-white border-opacity-20;
+::-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;
 }
 
-
-.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;
+:focus-visible {
+  outline: 2px solid #facc97;
+  outline-offset: 2px;
+  border-radius: 4px;
 }
 
+/* Display / hero type — negative tracking + tight leading, sized down for room to breathe */
 .hero-text {
-  @apply font-medium text-5xl lg:text-7xl xl:text-8xl;
+  @apply font-semibold text-5xl lg:text-7xl xl:text-8xl;
+  line-height: 1.02;
+  letter-spacing: -0.02em;
 }
 .hero-text-pt {
-  @apply font-medium text-4xl md:text-5xl lg:text-6xl xl:text-8xl;
+  @apply font-semibold text-4xl lg:text-6xl xl:text-7xl;
+  line-height: 1.04;
+  letter-spacing: -0.015em;
 }
 
 .hero-sub-text {
-  @apply italic text-lg md:text-2xl 2xl:text-3xl;
+  @apply text-lg md:text-2xl 2xl:text-3xl text-white/60;
+  line-height: 1.4;
+  letter-spacing: -0.005em;
+  font-style: normal;
 }
 .hero-sub-text-pt {
-  @apply italic text-lg md:text-xl 2xl:text-2xl;
+  @apply text-lg md:text-xl 2xl:text-2xl text-white/60;
+  line-height: 1.4;
+  letter-spacing: 0;
+  font-style: normal;
 }
 
 .header-text {
-  @apply mt-20 lg:mt-48 text-3xl md:text-5xl xl:text-7xl text-center;
+  @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;
 }
 
 .sub-header-text {
-  @apply italic font-thin block text-sm mx-10 md:text-2xl mt-5 text-gray-400;
+  @apply block text-sm mx-10 md:text-2xl mt-5 text-white/50;
+  font-weight: 300;
+  line-height: 1.45;
 }
 
 .form-input {
-  @apply rounded-xl px-4 py-4 mt-2 bg-gray-bg border-solid border border-gray-300 text-xs md:text-xl;
+  @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;
 }
 
 .gold-text {
-  @apply bg-clip-text text-transparent bg-gradient-to-br from-gold-gradient-light to-gold-gradient-dark;
+  @apply bg-clip-text text-transparent bg-gradient-to-br from-gold-light to-gold-mid;
 }
 
 .fade-effect {
-  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;
+  animation: fadeEffect 0.6s ease-out both;
 }
 
 .footer-text {
-  @apply text-gray-400 font-medium text-xs md:text-base
+  @apply text-white/45 font-medium text-xs md:text-sm tracking-wide;
 }
 
 .footer-text-pt {
-  @apply text-gray-400 font-medium text-xs md:text-base
+  @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;
+  }
 }
 
 @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,69 +2,144 @@ 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 font-inter">
+    <div className="min-h-screen">
       <Navbar />
-      <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 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>
       </div>
-      <Footer/>
+      <Footer />
     </div>
   );
 };

src/routes/TOS.tsx

@@ -3,56 +3,113 @@ 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 font-inter">
+    <div className="min-h-screen">
       <Navbar />
-      <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 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>
       </div>
-      <Footer/>
+      <Footer />
     </div>
   );
 };

tailwind.config.js

@@ -3,26 +3,30 @@ 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",
       },
-      backgroundImage: {
-        "hero-pattern": "url('./src/assets/HeroImg.svg')",
+      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",
       },
     },
   },