Merge pull request #3 from ctc-uci/2-recruitment-navbar-link-is-disabled-with-no-context

Open Recruitment page

Author: alexespejo

src/app/Recruitment/page.tsx

@@ -1,10 +1,12 @@
 "use client";
 import { VStack, Text } from "@chakra-ui/react";
 
+import { Footer } from "@/utils/components";
 import Hero from "@/utils/components/Hero";
 import BreakText from "@/utils/components/TextUtils/BreakText";
 import { RECRUITMENT_OPEN } from "@/utils/constants/Settings";
 
+
 export default function RecruitmentPage() {
  return (
   <VStack spacing={0}>
@@ -32,11 +34,29 @@ export default function RecruitmentPage() {
        textAlign="center"
       >
        Applications are currently closed and will reopen in the Fall.{" "}
-       <BreakText /> Follow us on social media to stay up to date!
+       <BreakText /> Follow us on{" "}
+       <a
+        href="https://www.instagram.com/ctc.uci/"
+        target="_blank"
+        rel="noopener noreferrer"
+       >
+        <Text
+         as="span"
+         color="ctc.purple"
+         textDecoration="underline"
+         fontWeight="bold"
+         _hover={{ color: "purple.500" }}
+         transition="color 0.3s ease-out"
+        >
+         social media
+        </Text>
+       </a>{" "}
+       to stay up to date!
       </Text>
      )}
     </VStack>
    </Hero>
+   <Footer />
   </VStack>
  );
 }

src/utils/components/Navbars/DesktopNavbar.tsx

@@ -78,18 +78,17 @@ function DesktopNavbar({ pathname, navItems }: DesktopNavbarProps) {
      )}
     </ChakraLink>
 
-    {navItems.map((item, index) => {
+    {navItems.map((item) => {
      const isActive = pathname === item.href;
-     const isWIP = index >= navItems.length - 1; // Last two items
      return (
       <ChakraLink
        key={item.href}
-       href={isWIP ? "#" : item.href}
+       href={item.href}
        as={Link}
-       color={isWIP ? "gray.400" : isActive ? "white" : "gray.800"}
+       color={isActive ? "white" : "gray.800"}
        fontWeight="500"
        fontSize="md"
-       bg={isActive && !isWIP ? "ctc.purple" : "transparent"}
+       bg={isActive ? "ctc.purple" : "transparent"}
        borderRadius="full"
        px={4}
        py={2}
@@ -115,17 +114,17 @@ function DesktopNavbar({ pathname, navItems }: DesktopNavbarProps) {
         opacity: 0,
        }}
        _hover={{
-        color: isWIP ? "gray.400" : isActive ? "white" : "ctc.purple",
-        bg: isActive && !isWIP ? "ctc.purple" : "transparent",
+        color: isActive ? "white" : "ctc.purple",
+        bg: isActive ? "ctc.purple" : "transparent",
         _before: {
-         transform: isWIP || isActive ? "scale(0)" : "scale(1)",
-         opacity: isWIP || isActive ? 0 : 1,
+         transform: isActive ? "scale(0)" : "scale(1)",
+         opacity: isActive ? 0 : 1,
         },
        }}
        transition="color 0.3s ease-out"
        textDecoration="none"
        whiteSpace="nowrap"
-       cursor={isWIP ? "not-allowed" : "pointer"}
+       cursor={"pointer"}
       >
        {item.label}
       </ChakraLink>