feat: add dynamic navbar styling based on pathname

src/app/[lang]/about/become-a-collaborator/page.tsx

@@ -0,0 +1,3 @@
+export default function BecomeACollaborator() {
+  return <></>;
+}

src/app/[lang]/about/become-a-member/page.tsx

@@ -0,0 +1,3 @@
+export default function BecomeAMember() {
+  return <></>;
+}

src/components/footer.tsx

@@ -12,7 +12,12 @@ const Footer = () => {
     <footer className=" flex flex-col place-items-center bg-[#EBEBEB] px-5 pb-16 pt-8 sm:flex-row sm:place-items-end sm:px-7 md:px-20">
       <div className="flex w-full max-w-[500px] flex-col place-items-center justify-center space-y-5 sm:w-1/2 sm:max-w-max sm:flex-col-reverse md:place-items-start">
         <div className="w-full space-y-6 pb-2.5 sm:mt-[50px] sm:w-80 sm:pb-0">
-          <Image src="/logo/cesium.svg" alt="CeSIUM Logo Icon" width={32} height={37} />
+          <Image
+            src="/logo/cesium.svg"
+            alt="CeSIUM Logo Icon"
+            width={32}
+            height={37}
+          />
           <p className="text-sm leading-[17px] text-[#94959C]">{dict.cesium}</p>
           <div className="justify-left flex h-[30px] space-x-5">
             {dict.socials.map((social) => {

src/components/logo.tsx

@@ -0,0 +1,75 @@
+const Logo = ({
+  type,
+  width,
+  height,
+  fill,
+  className,
+}: {
+  type: string;
+  width: number;
+  height: number;
+  fill: string;
+  alt: string;
+  className: string;
+}) => {
+  switch (type) {
+    case "cesium":
+      return (
+        <svg
+          width={`${width}`}
+          height={`${height}`}
+          viewBox="0 0 30 34"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={`${className}`}
+        >
+          <path
+            d="M9.46108 19.3693L5.1497 16.8815V11.9059L14.6108 17.3554V22.331L9.46108 19.3693ZM10.6587 2.4878L14.9701 0L29.5808 8.29268L15.0299 16.6446L5.56886 11.2544L9.88024 8.76655L15.0299 11.669L20.9581 8.29268L10.6587 2.4878ZM9.88024 2.90244L19.3413 8.29268L15.0299 10.7805L9.88024 7.87805L4.73054 10.7805L0.419162 8.29268L9.88024 2.90244ZM0 9.00348L4.31138 11.4913V17.3554L9.46108 20.2578V25.2334L0 19.784V9.00348ZM0 20.7317L10.2395 26.5958V20.7317L14.5509 23.2195V34L0 25.6481V20.7317ZM15.3892 34V23.2195L24.8503 17.8293V22.8049L19.7006 25.7073V31.5714L15.3892 34ZM30 25.6481L20.5389 31.0383V26.122L30 20.7317V25.6481ZM25.6886 22.2718V17.77L29.6407 20.0209L25.6886 22.2718ZM30 13.9791L15.3892 22.2718V17.2962L30 8.94425V13.9791Z"
+            fill={`${fill}`}
+          />
+        </svg>
+      );
+    case "cesium-full":
+      return (
+        <svg
+          width={`${width}`}
+          height={`${height}`}
+          viewBox="0 0 103 32"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={`${className}`}
+        >
+          <path
+            d="M8.83034 18.23L4.80639 15.8885V11.2056L13.6367 16.3345V21.0174L8.83034 18.23ZM9.9481 2.34146L13.9721 0L27.6088 7.80488L14.0279 15.6655L5.1976 10.5923L9.22156 8.25087L14.0279 10.9826L19.5609 7.80488L9.9481 2.34146ZM9.22156 2.73171L18.0519 7.80488L14.0279 10.1463L9.22156 7.41463L4.41517 10.1463L0.391217 7.80488L9.22156 2.73171ZM0 8.47387L4.02395 10.8153V16.3345L8.83034 19.0662V23.7491L0 18.6202V8.47387ZM0 19.5122L9.55689 25.0314V19.5122L13.5808 21.8537V32L0 24.1394V19.5122ZM14.3633 32V21.8537L23.1936 16.7805V21.4634L18.3872 24.1951V29.7143L14.3633 32ZM28 24.1394L19.1697 29.2125V24.5854L28 19.5122V24.1394ZM23.976 20.9617V16.7247L27.6647 18.8432L23.976 20.9617ZM28 13.1568L14.3633 20.9617V16.2787L28 8.41812V13.1568Z"
+            fill={`${fill}`}
+          />
+          <path
+            d="M49.2687 15.7507C49.2687 14.8426 48.4571 14.2979 47.6004 14.2979H46.1121C45.1873 14.2979 44.4431 15.0473 44.4431 15.9773V19.925C44.4431 20.8562 45.1873 21.6499 46.1121 21.6499H47.6004C48.5245 21.6499 49.2687 21.241 49.2687 20.1971H50.7118C50.7118 21.4682 49.8322 23.0567 47.6901 23.0567H46.0211C44.3077 23.0567 43 21.6723 43 19.9481V16.0234C43 14.2985 44.398 12.8917 46.1115 12.8917H47.5998C49.2909 12.8917 50.7112 14.1168 50.7112 15.7513H49.2687V15.7507Z"
+            fill="black"
+          />
+          <path
+            d="M54.7257 18.7454V20.1061C54.7257 21.0597 55.6054 21.6498 56.5072 21.6498H58.063C58.762 21.6498 59.2352 21.3772 59.4381 20.606H60.9493C60.6109 21.9673 59.5513 23.0566 58.0858 23.0566H56.3724C54.6589 23.0566 53.2832 21.7856 53.2832 20.0613V15.9767C53.2832 14.2524 54.6818 12.8911 56.3947 12.8911H57.9281C59.6416 12.8911 61.0624 14.2978 61.0624 16.0227V18.7454H54.7257ZM59.6193 15.9318C59.6193 15.0006 58.83 14.2978 57.9275 14.2978H56.4169C55.4916 14.2978 54.7251 15.0012 54.7251 15.9318V17.361H59.6187V15.9318H59.6193Z"
+            fill={`${fill}`}
+          />
+          <path
+            d="M69.02 23.0566H65.9079C64.5774 23.0566 63.5184 21.9673 63.5406 20.606H64.9615C64.9844 21.1961 65.4124 21.6498 66.044 21.6498H69.0423C69.6293 21.6498 70.0573 21.173 70.0573 20.5835V19.6523C70.0573 19.0629 69.6293 18.6315 69.0423 18.6315H66.1789C64.7815 18.6315 63.7887 17.5652 63.7887 16.1578V15.3641C63.7887 13.9343 64.9163 12.8911 66.2921 12.8911H68.6371C70.0122 12.8911 71.1176 14.0712 71.1176 15.3872H69.6738C69.6738 14.8195 69.2458 14.2978 68.5468 14.2978H66.2463C65.6605 14.2978 65.2318 14.7286 65.2318 15.3187V16.1814C65.2318 16.7709 65.6605 17.2247 66.2463 17.2247H69.1555C70.5534 17.2247 71.5005 18.2686 71.5005 19.6748V20.5829C71.4999 21.9903 70.418 23.0566 69.02 23.0566Z"
+            fill="black"
+          />
+          <path
+            d="M74.1619 10.6222V8.94275H75.8308V10.6222H74.1619ZM74.2745 22.9197V13.0728H75.717V22.9203H74.2745V22.9197Z"
+            fill="black"
+          />
+          <path
+            d="M80.2044 13.0729V20.039C80.2044 20.9695 80.9046 21.6505 81.8287 21.6505H83.5422C84.4447 21.6505 85.2111 21.1059 85.2111 20.1529V13.0729H86.6549V22.9204H85.2111V22.1946C84.7156 22.6938 84.2641 23.0573 83.2948 23.0573H81.8065C80.093 23.0573 78.7625 21.6953 78.7625 19.9717V13.0729H80.2044Z"
+            fill="black"
+          />
+          <path
+            d="M94.1153 14.2978H92.6053C91.7257 14.2978 90.9587 14.8879 90.9587 15.8415V22.9203H89.5161V13.0728H90.9587V13.7992C91.4554 13.3 91.9063 12.8911 92.8533 12.8911H94.1839C94.6794 12.8911 95.6493 13.254 96.3712 14.0482C97.1376 13.2085 97.7234 12.8911 98.8059 12.8911H99.9775C101.646 12.8911 103 14.253 103 15.9542V22.9197H101.556V15.9542C101.556 15.0236 100.925 14.2972 100.023 14.2972H98.7385C97.7908 14.2972 97.0696 14.9782 97.0696 15.9088V22.9197H95.6258V15.9318C95.6264 15.0243 94.9274 14.3663 94.1153 14.2978Z"
+            fill="black"
+          />
+        </svg>
+      );
+  }
+};
+
+export default Logo;

src/components/navbar.tsx

@@ -7,6 +7,7 @@ import { usePathname } from "next/navigation";
 import { useState } from "react";
 import { AnimatePresence, motion } from "motion/react";
 import SocialIcon from "@/components/social-icon";
+import Logo from "./logo";
 
 const Navbar = () => {
   const dict = useDictionary();
@@ -31,42 +32,65 @@ const Navbar = () => {
     { name: dict.navbar.projects, path: "/projects" },
   ];
 
+  const isMemberOrCollaborator =
+    pathname === "/about/become-a-member" ||
+    pathname === "/about/become-a-collaborator";
+
+  const navbarBackgroundColor =
+    pathname === "/about/become-a-member"
+      ? "bg-primary"
+      : pathname === "/about/become-a-collaborator"
+        ? "bg-blue"
+        : "bg-background";
+  const linkColor = isMemberOrCollaborator ? "text-frost" : "text-gray";
+  const currentLink = isMemberOrCollaborator ? "text-white" : "text-black";
+  const colorLogo = isMemberOrCollaborator ? "white" : "#ED7950";
+  const hamburgerMenuColor = isOpen
+    ? "text-gray"
+    : isMemberOrCollaborator
+      ? "text-white"
+      : "text-gray";
+
   return (
-    <div className="sticky top-0 z-40 flex w-full flex-col bg-background px-5 pb-3 pt-4 after:absolute after:bottom-0 after:left-0 after:h-6 after:w-full after:translate-y-6 after:bg-gradient-to-b after:from-background after:to-transparent md:relative md:px-20 md:pt-12 after:md:hidden">
+    <div
+      className={`${navbarBackgroundColor} sticky top-0 z-40 flex w-full flex-col px-5 pb-3 pt-4 after:absolute after:bottom-0 after:left-0 after:h-6 after:w-full after:translate-y-6 after:bg-gradient-to-b after:from-background after:to-transparent md:relative md:px-20 md:pt-12 after:md:hidden`}
+    >
       <nav className="flex items-center justify-between gap-9 md:justify-normal">
         <Link href="/">
-          <Image
-            priority
-            src="/logo/cesium.svg"
+          <Logo
+            type="cesium"
             width={30}
             height={34}
             alt="CeSIUM Logo Icon"
+            fill={`${colorLogo}`}
             className="hidden md:block"
           />
-          <Image
-            priority
-            src="/logo/cesium-full.svg"
+          <Logo
+            type="cesium-full"
             width={103}
             height={32}
             alt="CeSIUM Logo"
+            fill={`${colorLogo}`}
             className="block md:hidden"
           />
         </Link>
-        <div className="hidden items-center space-x-6 font-title text-lg font-medium text-gray md:flex">
+        <div
+          className={`hidden items-center space-x-6 font-title text-lg font-medium ${linkColor} md:flex`}
+        >
           {routes.map((route) => (
             <Link
               key={route.path}
               href={route.path}
               className={`${
-                isCurrent(route.path) ? "text-black" : ""
+                isCurrent(route.path) ? `${currentLink}` : ""
               } transition-colors hover:text-black`}
             >
               {route.name}
             </Link>
           ))}
         </div>
         <motion.button
-          className="material-symbols-outlined z-50 p-1 text-3xl text-gray md:hidden"
+          className={`${hamburgerMenuColor} material-symbols-outlined z-50 p-1 text-3xl md:hidden`}
           onClick={() => setIsOpen(!isOpen)}
           animate={{ rotate: isOpen ? 90 : 0 }}
         >

tailwind.config.ts

@@ -19,6 +19,7 @@ const config: Config = {
         background: "#FAFAFA",
         stroke: "#D4D4D8",
         black: "#27272A",
+        frost: "rgba(256,256,256,0.5)",
         gray: "#94959C",
         stone: "#27272A",
         blue: "#5069ED",