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

@@ -6,6 +6,6 @@ COPY . .
 
 RUN npm install
 RUN npm run build
-RUN npm install -g
+RUN npm install -g serve
 
 CMD ["serve", "-s", "dist"]

docker-compose.yml

@@ -0,0 +1,12 @@
+services:
+  web:
+    container_name: lk-landing-page
+    build:
+      context: .
+      dockerfile: Dockerfile
+    networks:
+      - cloudflare
+    restart: unless-stopped
+networks:
+  cloudflare:
+    external: true

package-lock.json

@@ -11,6 +11,7 @@
         "@emailjs/browser": "^4.3.3",
         "@headlessui/react": "^1.7.18",
         "@heroicons/react": "^2.1.3",
+        "framer-motion": "^13.2.0",
         "i18next": "^23.11.5",
         "i18next-browser-languagedetector": "^8.0.0",
         "i18next-http-backend": "^2.5.2",
@@ -2595,6 +2596,29 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-13.2.0.tgz",
+      "integrity": "sha512-9E33ebgMaO33w1nN/jEdW8z3/GO483fMi4rqbMG9rt83XgW9QLKRe4NcmJ8s+fQ3O34++UHrIQwlIWGIWTITjA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^13.2.0",
+        "motion-utils": "^13.0.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3158,6 +3182,21 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-13.2.0.tgz",
+      "integrity": "sha512-N6gdSoWRDk0Rh/fVtlqUtLs+fEN3ELFZI3cn3IQE9Mnf3E+Mh8wjO6MstzCOPFh4Yf0L1as5m2eUyYWj8ylVSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^13.0.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-13.0.0.tgz",
+      "integrity": "sha512-7DnN7TmbLcYXcG4RVadXIihWlyuM9afoUww8Y5Agg431kGKiuL2/OMyP4mJ5wLz+pvN3t5ySClLOaVXJ+wekRQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -4238,6 +4277,12 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "dev": true
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "@emailjs/browser": "^4.3.3",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.3",
+    "framer-motion": "^13.2.0",
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",

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 Card = ({ title, description, image, index = 0 }: IProps) => {
-  const defaultImgClasses = `w-full h-20 mt-5`;
+  const prefersReducedMotion = useReducedMotion();
-  const imgClasses = image ? defaultImgClasses : `${defaultImgClasses} hidden`;
 
   return (
-    <div className="mt-5 xl:mt-0 flex flex-1 bg-gradient-to-b from-gold-light to-gold-dark p-0.5 shadow-lg">
+    <motion.div
-      <div className="w-full font-medium flex-col md:px-4 py-1 bg-gradient-to-br from-custom-bglight to-custom-bgdark">
+      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 ${
-        <object type="image/svg+xml" data={image} className={imgClasses} aria-label={title}></object>
+        image ? "text-left items-start" : "text-center items-center"
-        <h1 className="mt-2 lg:mt-6 text-3xl xl:text-5xl">{title}</h1>
+      }`}
-        <h2 className="results-card-content">
+      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>
           ))}
-        </h2>
+        </p>
-      </div>
       </div>
+    </motion.div>
   );
 };
 

src/Components/Footer/Footer.tsx

@@ -1,55 +1,74 @@
 import { useTranslation } from "react-i18next";
 import { FaFacebook, FaLinkedin } from "react-icons/fa";
+import { motion } from "framer-motion";
 
 const Footer = () => {
   const { t, i18n } = useTranslation();
 
+  // Browsers report region variants (e.g. "en-US", "pt-BR"), not just the
+  // bare "en"/"pt" i18next is configured with - matching on that exactly
+  // would pick the wrong sized text class for most real visitors.
+  const currentLang = i18n.language?.startsWith("pt") ? "pt" : "en";
+
   return (
-    <footer className="flex flex-col space-y-10 justify-center m-10">
+    <footer className="flex flex-col space-y-8 justify-center items-center mt-10 mb-8 px-6 pt-10">
-      <div className="flex justify-center space-x-5">
+      <div className="w-full max-w-xs h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
-        <a
+
+      <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 className="text-gold-light" size={30} />
+          <FaFacebook size={26} />
-        </a>
+        </motion.a>
-        <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 className="text-gold-light" size={30} />
+          <FaLinkedin size={26} />
-        </a>
+        </motion.a>
-        {/* Uncomment these lines if you want to include Instagram and Twitter icons */}
-        {/* <a
-          href="https://instagram.com"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <FaInstagram className="text-gold-light" size={30} />
-        </a>
-        <a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
-          <FaXTwitter className="text-gold-light" size={30} />
-        </a> */}
       </div>
 
-      <div className="flex justify-center space-x-5">
+      <div className="flex justify-center space-x-6">
         <a
           href="/tos"
-          className={i18n.language === "en" ? "footer-text hover:text-gold-light" : "footer-text-pt hover:text-gold-light"}
+          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={i18n.language === "en" ? "footer-text hover:text-gold-light" : "footer-text-pt hover:text-gold-light"}
+          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={i18n.language === "en" ? "footer-text text-center" : "footer-text-pt text-center"}>
+      <p
+        className={
+          currentLang === "en"
+            ? "footer-text text-center"
+            : "footer-text-pt text-center"
+        }
+      >
         {t("footer.rights")}
       </p>
     </footer>
@@ -57,4 +76,3 @@ const Footer = () => {
 };
 
 export default 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="flex items-center justify-center h-screen bg-custom-bgdark">
-      <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div>
+      {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 [activeSection, setActiveSection] = useState("Services");
-    const changeColor = () => {
-      if (window.scrollY >= 100) {
-        setColorChange(true);
-      } else {
-        setColorChange(false);
-      }
-    };
 
-    window.addEventListener("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
-    const scrollPath = sessionStorage.getItem("scrollPath");
+  // would leave the toggle mislabeled for most real visitors.
-    if (scrollPath) {
+  const currentLang = i18n.language?.startsWith("pt") ? "pt" : "en";
-      smoothScroll(scrollPath);
-      sessionStorage.removeItem("scrollPath");
-    }
-
-    return () => {
-      window.removeEventListener("scroll", changeColor);
-    };
-  }, []);
 
   const navigation = [
     { title: t("navbar.services"), path: "Services" },
@@ -38,43 +30,138 @@ 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) => {
-    if ((window.location.pathname === "/tos" || window.location.pathname === "/privacy") && navigation.some(navItem => navItem.path === path)) {
+    setState(false);
+    if (
+      (window.location.pathname === "/tos" ||
+        window.location.pathname === "/privacy") &&
+      navigation.some((navItem) => navItem.path === path)
+    ) {
       sessionStorage.setItem("scrollPath", path);
       window.location.href = "/";
-    }else{
+    } else {
-      smoothScroll(path)
+      smoothScroll(path);
     }
   };
 
-  const smoothScroll = (path :string) => {
+  const smoothScroll = (path: string) => {
     const element = document.getElementById(path);
-    const navbarHeight = 110; // Replace with your navbar's height
     if (element) {
       const top =
-        element.getBoundingClientRect().top + window.scrollY - navbarHeight;
+        element.getBoundingClientRect().top + window.scrollY - NAVBAR_HEIGHT;
       window.scrollTo({ top: top, behavior: "smooth" });
     }
-  }
+  };
 
   const changeLanguage = (lng: string) => {
     i18n.changeLanguage(lng);
   };
 
+  useEffect(() => {
+    document.body.style.overflow = state ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [state]);
+
+  const springTap = prefersReducedMotion ? {} : { whileTap: { scale: 0.94 } };
+
   return (
-    <nav
+    <motion.nav
-      className={`${
+      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
-          ? "bg-black bg-opacity-80 transition duration-500 w-full border-0 sticky top-0 z-10"
+              ? "mt-3 max-w-3xl px-5 py-2.5"
-          : "z-10"
+              : "max-w-screen-xl px-4 py-3 md:px-8 md:py-5"
           }`}
         >
-      <div className="items-center px-4 max-w-screen-xl mx-auto md:flex md:px-8">
+          {/*
-        <div className="flex items-center justify-between py-3 md:py-5 md:block">
+            The glass material is its own layer, separate from the box
-          <a
+            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 {
@@ -82,57 +169,108 @@ export default () => {
               }
             }}
           >
-            <img src={Logo} width={60} height={60} alt="logo" />
+            <img
-          </a>
+              src={Logo}
-          <div className="md:hidden">
+              width={colorChange ? 40 : 56}
-            <button
+              height={colorChange ? 40 : 56}
-              className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
+              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-6 w-6" />
+                <FaTimes className="h-5 w-5" />
               ) : (
-                <FaBars className="h-6 w-6" />
+                <FaBars className="h-5 w-5" />
               )}
-            </button>
+            </motion.button>
           </div>
         </div>
-        <div
+      </div>
-          className={`absolute top-[3.24rem] md:top-0 left-0 w-full z-50 flex flex-col md:flex-row items-center justify-center pb-3 mt-8 md:relative md:bg-transparent md:pb-0 md:mt-0 ${
+
-            state
+      <AnimatePresence>
-              ? colorChange
+        {state && (
-                ? "block bg-black bg-opacity-80 transition duration-500"
+          <>
-                : "block bg-gradient-to-br from-custom-bglight to-custom-bgdark"
+            <motion.div
-              : "hidden md:flex"
+              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"
             >
-          <ul className="text-text-gold space-y-8 md:ml-auto md:flex md:space-x-6 md:space-y-0 justify-center items-center">
+              <MobileMenu
-            {navigation.map((item, idx) => {
+                navigation={navigation}
-              return (
+                handleNavigation={handleNavigation}
-                <li key={idx} className="hover:text-white">
+                setState={setState}
-                  <a
+                currentLang={currentLang}
-                    href={item.path}
+                changeLanguage={changeLanguage}
-                    className="block py-2 md:py-0 md:px-4 text-xl font-medium"
+              />
-                    onClick={(e) => {
+            </motion.div>
-                      e.preventDefault(); // Prevent the default anchor tag behavior
+          </>
-                      setState(false); // Close the navigation
+        )}
-                      handleNavigation(item.path); // Navigate to the section
+      </AnimatePresence>
-                    }}
+    </motion.nav>
-                  >
-                    {item.title}
-                  </a>
-                </li>
-              );
-            })}
-          </ul>
-          <button
-            className="mt-5 md:mt-0 md:ml-auto"
-            onClick={() => changeLanguage(i18n.language === "en" ? "pt" : "en")}
-          >
-            {i18n.language === "en" ? "PT" : "EN"}
-          </button>
-        </div>
-      </div>
-    </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.tsx

@@ -1,11 +1,60 @@
-import React from "react";
+import React, { useState } from "react";
 import emailjs from "@emailjs/browser";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { useTranslation } from "react-i18next";
+import { 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 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"));
@@ -22,11 +71,12 @@ const ContactForm = () => {
   const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    let isEmpty = Array.from(e.currentTarget.elements).some(
+    const isEmpty = Array.from(e.currentTarget.elements).some((el) => {
-      (input) =>
+      if (el.tagName !== "INPUT" && el.tagName !== "TEXTAREA") return false;
-        (input as HTMLInputElement).type !== "submit" &&
+      const field = el as HTMLInputElement | HTMLTextAreaElement;
-        (input as HTMLInputElement).value.trim() === ""
+      if (field.type === "hidden") return false;
-    );
+      return field.value.trim() === "";
+    });
 
     if (isEmpty) {
       emptyForm();
@@ -49,20 +99,31 @@ const ContactForm = () => {
       );
 
     e.currentTarget.reset();
+    setPhoneDigits("");
+    setCountryCode("+351");
   };
 
   return (
-    <div className="mt-10 mx-5  lg:mx-0 flex justify-center items-center">
+    <div className="mt-10 mx-5 mb-10 lg:mx-0 flex justify-center items-center">
-      <form onSubmit={sendEmail} className="w-full md:w-auto">
+      <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"
+            className="form-input flex-1"
             type="text"
             name="user_name"
             placeholder={t("contact.form.name")}
           />
           <input
-            className="form-input"
+            className="form-input flex-1"
             type="email"
             name="user_email"
             placeholder={t("contact.form.email")}
@@ -70,18 +131,25 @@ const ContactForm = () => {
         </div>
         <div className="flex flex-col md:flex-row md:gap-3">
           <input
-            className="form-input"
+            className="form-input flex-1"
             type="text"
             name="user_company"
             placeholder={t("contact.form.company")}
           />
+          <div className="phone-input-group flex-1 flex items-center">
+            <PhoneCodeSelect value={countryCode} onChange={handleCountryChange} />
+            <span className="h-5 w-px bg-white/10 mx-2" aria-hidden="true" />
             <input
-            className="form-input"
+              className="phone-number-input"
-            type="number"
+              type="tel"
+              inputMode="numeric"
               name="user_phone"
+              value={formattedPhone}
+              onChange={(e) => handlePhoneChange(e.target.value)}
               placeholder={t("contact.form.phone")}
             />
           </div>
+        </div>
         <div className="flex flex-col">
           <input
             className="form-input"
@@ -91,20 +159,22 @@ const ContactForm = () => {
           ></input>
 
           <textarea
-            className="form-input"
+            className="form-input resize-none"
             name="message"
             placeholder={t("contact.form.message")}
-            rows={6}
+            rows={5}
           ></textarea>
         </div>
 
-        <div className="flex mt-5 mb-10 lg:mt-12 mx-10 lg:mx-20 rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
+        <div className="flex mt-6 rounded-xl bg-gradient-to-br from-gold-light to-gold-mid p-0.5 shadow-gold-glow">
-          <button
+          <motion.button
             type="submit"
-            className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500"
+            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")}
-          </button>
+          </motion.button>
         </div>
 
         <ToastContainer
@@ -119,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">{t("contact.heading.part3")}</span>{" "}
           {t("contact.heading.part4")}
-        </h1>
+        </motion.h1>
-        <h2 className="sub-header-text ">
+        <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,13 +1,20 @@
 import { useTranslation } from "react-i18next";
-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;
@@ -15,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">
+      <motion.div
-        <img className="items-center" src={HeroImg} alt="hero"></img>
+        className="lg:w-1/2 w-full xl:w-1/2 hidden lg:flex"
-      </div>
+        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 lg:pt-10 lg:pr-20 lg:text-right 2xl:pr-40">
-          <img
+          <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
+            <motion.h1
-              className={i18n.language === "en" ? "hero-text" : "hero-text-pt"}
+              className={currentLang === "en" ? "hero-text" : "hero-text-pt"}
+              {...rise(0.05)}
             >
               {t("hero.heading.part1")}
-            </h1>
+            </motion.h1>
-            <h1
+            <motion.h1
-              className={i18n.language === "en" ? "hero-text" : "hero-text-pt"}
+              className={currentLang === "en" ? "hero-text" : "hero-text-pt"}
+              {...rise(0.1)}
             >
-              {t("hero.heading.part2")}
+              <span className="gold-text">{t("hero.heading.part2")}</span>
-            </h1>
+            </motion.h1>
-            <div>
+            <div className="flex mt-6 lg:hidden">
-              <img
+              <HeroVisual />
-                src={HeroImg}
-                alt="heroSm"
-                className="flex mt-6 lg:hidden"
-              ></img>
             </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"
               }
@@ -58,26 +83,31 @@ 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>
+          </motion.div>
-          <div className="flex mt-5 lg:mt-12 mx-10 lg:mx-0 lg:ml-auto rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
+          <motion.div
-            <a
+            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-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500">
+              <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>
-            </a>
+            </motion.a>
-          </div>
+          </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 CardContainer from "./CardContainer";
-import { useTranslation } from 'react-i18next'
+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>
+      <motion.h1
-        <span className="gold-text">"</span>
+        initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 20 }}
-        {t("optimization.heading.part1")} <br /> {t("optimization.heading.part2")}
+        whileInView={
-        <span className="gold-text">"</span>
+          prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
-      </h1>
+        }
+        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">
-      <h1>
+      <motion.h1
-        <span className="gold-text">"</span>
+        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>
+        <span className="gold-text">&rdquo;</span>
-      </h1>
+      </motion.h1>
       <CardContainer />
     </div>
   );

src/Components/Pages/Services/Buttons.tsx

@@ -16,7 +16,7 @@ const Buttons = ({ changeActiveGroup }: props) => {
   };
 
   return (
-    <div className="lg:px-40 flex flex-row 2xl:gap-8 gap-2 mx-2 md:gap-5 mt-5 lg:mt-10 mb-4 justify-center">
+    <div className="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="Camera & 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 gap-4 xl:flex-row mx-4">
+    <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-2xl 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}>
+    <motion.button
-        {title}
+      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 ${
-      </a>
+        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,4 +1,5 @@
 import { useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import WesiteCards from "./WesiteCards";
 import Buttons from "./Buttons";
 import MarketingCards from "./MarketingCards";
@@ -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 bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl flex flex-col">
+    <div className="flex flex-col gap-8 lg:gap-10">
-      {ActiveCards && <ActiveCards />}
       <Buttons changeActiveGroup={changeActiveGroup} />
+      <div className="relative">
+        <AnimatePresence mode="wait">
+          {ActiveCards && (
+            <motion.div
+              key={activeGroup}
+              initial={
+                prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 12 }
+              }
+              animate={
+                prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+              }
+              exit={
+                prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -12 }
+              }
+              transition={{ type: "spring", damping: 26, stiffness: 220 }}
+            >
+              <ActiveCards />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
     </div>
   );
 };

src/Components/Pages/Services/MarketingCards.tsx

@@ -9,30 +9,34 @@ const MarketingCards = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
+    <div className="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
+    <motion.div
-      className="flex flex-col justify-end flex-1 h-full border-solid border shadow-lg bg-cover bg-center text-center"
+      className="flex flex-col gap-4"
-      style={{
+      initial={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 16 }}
-        backgroundImage: `url(${imgSrc})`,
+      animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
-        filter: "saturate(50%)",
+      transition={{
-        animation: `fadeEffect 1s ${delay} forwards`,
+        type: "spring",
-        opacity: 0,
+        damping: 24,
+        stiffness: 160,
+        delay: prefersReducedMotion ? 0 : delay,
       }}
     >
-      <div className="lg:my-6">
+      <div className="relative aspect-[4/5] rounded-2xl overflow-hidden ring-1 ring-white/10">
-        <h2
+        <motion.div
-          className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]
+          className="absolute inset-0 bg-cover bg-center"
- text-3xl font-bold"
+          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 className="px-0.5">
+        <h3 className="text-lg lg:text-xl font-semibold text-white tracking-tight">
           {title}
-        </h2>
+        </h3>
-        <p
+        <p className="mt-1.5 text-sm lg:text-base text-white/55 leading-snug">
-          className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]
- xl:mb-10 font-thin text-xl"
-        >
           {description}
         </p>
       </div>
-    </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 bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg ">
+    <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,13 +1,22 @@
 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">
-      <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("services.heading.part1")}
         <span className="relative inline-block">
           {t("services.heading.part2")}{" "}
@@ -17,10 +26,17 @@ const Services = () => {
             className="absolute bottom-0 left-0"
           />
         </span>{" "}
-      </h1>
+      </motion.h1>
-      <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 gap-4 xl:flex-row mx-4">
+    <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 gap-4 xl:flex-row mx-4">
+    <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/index.css

@@ -1,71 +1,177 @@
-@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;
 
-body {
+::selection {
-  @apply bg-gradient-to-br from-custom-bglight to-custom-bgdark;
+  background: rgba(250, 204, 151, 0.25);
+  color: #fff;
 }
 
+html {
+  scroll-behavior: smooth;
+  color-scheme: dark;
+}
+
+body {
+  @apply bg-custom-bgdark text-white;
+  background: radial-gradient(120% 90% at 50% -10%, #26262c 0%, #131316 42%, #06060b 100%);
+  min-height: 100vh;
+}
+
+::-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;
+}
+
+: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 lg:text-6xl xl:text-7xl;
+  @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-2 mt-2 bg-gray-bg border-solid border border-gray-300 text-sm md:text-lg;
+  @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-light to-gold-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;
+  animation: fadeEffect 0.6s ease-out both;
-}
-
-.results-card-heading {
-  @apply mt-2 lg:mt-6 text-3xl xl:text-5xl;
-}
-.results-card-heading-pt {
-  @apply mt-2 lg:mt-6 text-2xl xl:text-4xl;
-}
-
-.results-card-content {
-  @apply mb-2 mt-3 italic text-lg xl:text-2xl font-medium text-gray-300;
 }
 
 .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

@@ -3,67 +3,143 @@ import Navbar from "../Components/Navbar/Navbar";
 import Footer from "../Components/Footer/Footer";
 
 const PP = () => {
-     const { t } = useTranslation("PP")
+  const { t } = useTranslation("PP");
 
   return (
     <div className="min-h-screen">
       <Navbar />
-      <div className="container mx-auto px-4 py-12">
+      <div className="container mx-auto px-4 py-12 max-w-4xl">
-        <h1 className="text-3xl font-bold text-center mb-6">{t("pp.pageTitle")}</h1>
+        <h1 className="text-3xl md:text-5xl font-semibold text-center mb-10 tracking-tight">
-        <div className="shadow-md rounded-lg p-8">
+          {t("pp.pageTitle")}
-          <p className="mb-4">{t("pp.lastUpdated")}</p>
+        </h1>
-          <p className="mb-4">{t("pp.introText")}</p>
+        <div className="glass-panel shadow-glass-lg rounded-3xl p-6 md:p-12">
-          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp1.title")}</h2>
+          <p className="mb-4 text-white/45 text-sm">{t("pp.lastUpdated")}</p>
-          {t("pp.pp1.desc").split("\n\n").map((paragraph, index) => (
+          <p className="mb-8 text-white/70 leading-relaxed">
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
+            {t("pp.introText")}
-              <span key={index}>{line}<br/></span>
+          </p>
-            ))}</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>
                 ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp2.title")}</h2>
+              </p>
-          {t("pp.pp2.desc").split("\n\n").map((paragraph, index) => (
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
-              <span key={index}>{line}<br/></span>
-            ))}</p>
             ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp3.title")}</h2>
+          <h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
-          {t("pp.pp3.desc").split("\n\n").map((paragraph, index) => (
+            {t("pp.pp2.title")}
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
+          </h2>
-              <span key={index}>{line}<br/></span>
+          {t("pp.pp2.desc")
-            ))}</p>
+            .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>
                 ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp4.title")}</h2>
+              </p>
-          {t("pp.pp4.desc").split("\n\n").map((paragraph, index) => (
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
-              <span key={index}>{line}<br/></span>
-            ))}</p>
             ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp5.title")}</h2>
+          <h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
-          {t("pp.pp5.desc").split("\n\n").map((paragraph, index) => (
+            {t("pp.pp3.title")}
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
+          </h2>
-              <span key={index}>{line}<br/></span>
+          {t("pp.pp3.desc")
-            ))}</p>
+            .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>
                 ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp6.title")}</h2>
+              </p>
-          {t("pp.pp6.desc").split("\n\n").map((paragraph, index) => (
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
-              <span key={index}>{line}<br/></span>
-            ))}</p>
             ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp7.title")}</h2>
+          <h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
-          {t("pp.pp7.desc").split("\n\n").map((paragraph, index) => (
+            {t("pp.pp4.title")}
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
+          </h2>
-              <span key={index}>{line}<br/></span>
+          {t("pp.pp4.desc")
-            ))}</p>
+            .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>
                 ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("pp.pp8.title")}</h2>
+              </p>
-          {t("pp.pp8.desc").split("\n\n").map((paragraph, index) => (
+            ))}
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
+          <h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
-              <span key={index}>{line}<br/></span>
+            {t("pp.pp5.title")}
-            ))}</p>
+          </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,55 +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">
       <Navbar />
-      <div className="container mx-auto px-4 py-12">
+      <div className="container mx-auto px-4 py-12 max-w-4xl">
-        <h1 className="text-3xl font-bold text-center mb-6">{t("tos.pageTitle")}</h1>
+        <h1 className="text-3xl md:text-5xl font-semibold text-center mb-10 tracking-tight">
-        <div className="shadow-md rounded-lg p-8">
+          {t("tos.pageTitle")}
-          <p className="mb-4">{t("tos.lastUpdated")}</p>
+        </h1>
-          <p className="mb-4">{t("tos.introText")}</p>
+        <div className="glass-panel shadow-glass-lg rounded-3xl p-6 md:p-12">
-          <h2 className="text-2xl font-semibold mb-4">{t("tos.tos1.title")}</h2>
+          <p className="mb-4 text-white/45 text-sm">{t("tos.lastUpdated")}</p>
-          {t("tos.tos1.desc").split("\n\n").map((paragraph, index) => (
+          <p className="mb-8 text-white/70 leading-relaxed">
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
+            {t("tos.introText")}
-              <span key={index}>{line}<br/></span>
+          </p>
-            ))}</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>
                 ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("tos.tos2.title")}</h2>
+              </p>
-          {t("tos.tos2.desc").split("\n\n").map((paragraph, index) => (
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
-              <span key={index}>{line}<br/></span>
-            ))}</p>
             ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("tos.tos3.title")}</h2>
+          <h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
-          {t("tos.tos3.desc").split("\n\n").map((paragraph, index) => (
+            {t("tos.tos2.title")}
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
+          </h2>
-              <span key={index}>{line}<br/></span>
+          {t("tos.tos2.desc")
-            ))}</p>
+            .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>
                 ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("tos.tos4.title")}</h2>
+              </p>
-          {t("tos.tos4.desc").split("\n\n").map((paragraph, index) => (
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
-              <span key={index}>{line}<br/></span>
-            ))}</p>
             ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("tos.tos5.title")}</h2>
+          <h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
-          {t("tos.tos5.desc").split("\n\n").map((paragraph, index) => (
+            {t("tos.tos3.title")}
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
+          </h2>
-              <span key={index}>{line}<br/></span>
+          {t("tos.tos3.desc")
-            ))}</p>
+            .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>
                 ))}
-          <h2 className="text-2xl font-semibold mb-4">{t("tos.tos6.title")}</h2>
+              </p>
-          {t("tos.tos6.desc").split("\n\n").map((paragraph, index) => (
+            ))}
-            <p key={index} className="mb-4">{paragraph.split("\n").map((line, index) => (
+          <h2 className="text-xl md:text-2xl font-semibold mb-4 text-gold-light">
-              <span key={index}>{line}<br/></span>
+            {t("tos.tos4.title")}
-            ))}</p>
+          </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

@@ -12,13 +12,21 @@ export default {
         "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"],
       },
-      backgroundImage: {
+      boxShadow: {
-        "hero-pattern": "url('./src/assets/HeroImg.svg')",
+        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",
       },
     },
   },