pre-main

src/components/layout/header/header.tsx

@@ -142,22 +142,24 @@ export default function Header() {
     <>
       <Box
         as="nav"
-        bg={isSticky ? "rgba(255, 255, 255, 0.6)" : "white"}
+        bg={isSticky ? "rgba(5, 5, 10, 0.6)" : "transparent"}
         _dark={{
-          bg: isSticky ? "rgba(1, 1, 1, 0.6)" : "black",
+          bg: isSticky ? "rgba(5, 5, 10, 0.6)" : "transparent",
         }}
-        shadow={isSticky ? "sm" : "none"}
-        backdropFilter="blur(12px) saturate(180%)"
-        border="1px solid"
-        borderColor={isSticky ? "whiteAlpha.300" : "transparent"}
-        borderBottomRadius={isSticky ? "xl" : "none"}
-        transition="all 0.4s ease-in-out"
+        shadow={isSticky ? "lg" : "none"}
+        backdropFilter={isSticky ? "blur(16px) saturate(180%)" : "none"}
+        borderBottom="1px solid"
+        borderColor={isSticky ? "whiteAlpha.100" : "transparent"}
+        borderBottomRadius={isSticky ? "2xl" : "none"}
+        transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
+        mx={isSticky ? { base: 4, md: 8 } : 0}
+        mt={isSticky ? 4 : 0}
         px={{ base: 4, md: 8 }}
-        py="3"
+        py="4"
         position="sticky"
         top={0}
-        zIndex={10}
-        w="full"
+        zIndex={100}
+        w={isSticky ? "auto" : "full"}
       >
         <Flex justify="space-between" align="center" maxW="8xl" mx="auto">
           {/* Logo */}
@@ -166,11 +168,11 @@ export default function Header() {
               as={Link}
               href="/home"
               fontSize="3xl"
-              fontWeight="extrabold"
-              letterSpacing="wide"
+              fontWeight="900"
+              letterSpacing="tight"
               bgGradient="to-r"
-              gradientFrom="primary.400"
-              gradientTo="primary.600"
+              gradientFrom="brand.300"
+              gradientTo="brand.500"
               bgClip="text"
               bgSize="200% auto"
               animation="text-gradient 12s linear infinite"