feat: update jobs page design

src/components/Footer/Footer.tsx

@@ -1,27 +1,284 @@
+import { breakpoints, footerBUs, footerSocial } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
+import Image from 'next/image'
 
 export const Footer = () => {
+  const handleGoToTop = () => {
+    window.scrollTo(0, 0)
+  }
+
   return (
     <Container>
-      <div>
+      <Header>
-        <p>Institute of Free Technology. ©{new Date().getFullYear()}</p>
+        <GoToTop onClick={handleGoToTop}>
-        <p>IFT@contact.com</p>
+          <Image
-      </div>
+            src="/icons/chevron.svg"
-      <span>
+            width={14}
-        <p>LinkedIn</p>
+            height={14}
-        <p>Vimeo</p>
+            alt="go to top"
-        <p>Youtube</p>
+          />
-      </span>
+        </GoToTop>
+      </Header>
+      <FooterInto>
+        <FooterInfoItem>
+          <h2>IFT</h2>
+        </FooterInfoItem>
+        <FooterInfoItem>
+          <h2>Get in touch</h2>
+          <Description>
+            <p>
+              Share our mission and want to work with us?
+              <br />
+              Contact the IFT to see what we can do for you and your startup.
+            </p>
+            <button>Email us</button>
+          </Description>
+        </FooterInfoItem>
+      </FooterInto>
+      <Bottom>
+        <Org>
+          <p>
+            Institute of Free Technology.
+            <br />©{new Date().getFullYear()}
+          </p>
+          <p>All Rights Reserved.</p>
+        </Org>
+        <Links>
+          <LinksContainer>
+            <h3>Infrastructure</h3>
+            <LinkItems>
+              {footerBUs.map((bu) => (
+                <a key={bu.link} href={bu.link} target="_blank">
+                  {bu.name}
+                </a>
+              ))}
+            </LinkItems>
+          </LinksContainer>
+          <LinksContainer>
+            <h3>Social</h3>
+            <LinkItems>
+              {footerSocial.map((item) => (
+                <a key={item.link} href={item.link} target="_blank">
+                  {item.name}
+                </a>
+              ))}
+            </LinkItems>
+          </LinksContainer>
+        </Links>
+      </Bottom>
     </Container>
   )
 }
 
 const Container = styled.nav`
   display: flex;
-  flex-direction: column;
+  box-sizing: border-box;
   background-color: black;
+  flex-direction: column;
   color: white;
-  padding: 16px;
+  padding: 16px 16px 44px 16px;
+  margin-top: 204px;
+
+  h2 {
+    padding-block: 24px;
+    font-size: 36px;
+    font-weight: 400;
+    line-height: 130%;
+  }
+
+  @media (max-width: ${breakpoints.md}px) {
+    width: 100%;
+    margin-top: 74px;
+    padding: 16px 8px 0 8px;
+
+    h2 {
+      font-size: 22px;
+      line-height: 122%;
+      padding-block: 16px;
+    }
+  }
+`
+
+const Header = styled.div`
+  padding-bottom: 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
+`
+
+const GoToTop = styled.button`
+  display: flex;
+  width: 24px;
+  height: 24px;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #fff;
+  background-color: transparent;
+  cursor: pointer;
+`
+
+const FooterInto = styled.div`
+  display: flex;
+  gap: 16px;
+
+  @media (max-width: ${breakpoints.md}px) {
+    & > div:first-child {
+      display: none;
+    }
+  }
+`
+
+const FooterInfoItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+
+  h2 {
+    font-size: 36px;
+    font-weight: 400;
+    line-height: 130%;
+  }
+
+  @media (max-width: ${breakpoints.md}px) {
+    width: 100%;
+
+    h2 {
+      font-size: 22px;
+      line-height: 122%;
+    }
+  }
+`
+
+const Description = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  margin-bottom: 60px;
+
+  p {
+    font-size: 18px;
+    line-height: 122%;
+  }
+
+  button {
+    display: flex;
+    width: 150px;
+    padding: 10px 34px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    background-color: transparent;
+    border: 1px solid #fff;
+    color: #fff;
+    cursor: pointer;
+  }
+
+  @media (max-width: ${breakpoints.md}px) {
+    width: 100%;
+    margin-bottom: 48px;
+
+    p {
+      font-size: 22px;
+      line-height: 122%;
+    }
+  }
+`
+
+const Links = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+
+  @media (max-width: ${breakpoints.md}px) {
+    width: 100%;
+    padding-bottom: 20px;
+    flex-direction: row;
+    gap: 8px;
+  }
+`
+
+const LinksContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 50%;
+  padding-block: 20px;
+  border-top: 1px solid rgba(255, 255, 255, 0.18);
+
+  h3 {
+    color: rgba(255, 255, 255, 0.35);
+    font-size: 16px;
+  }
+
+  a {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 130%;
+    color: white;
+  }
+
+  @media (max-width: ${breakpoints.md}px) {
+    h3 {
+      font-size: 12px;
+    }
+
+    a {
+      font-size: 12px;
+      line-height: 130%;
+    }
+  }
+`
+
+const LinkItems = styled.div`
+  display: flex;
+  gap: 16px;
+  width: 100%;
+
+  @media (max-width: ${breakpoints.md}px) {
+    flex-direction: column;
+  }
+`
+
+const Org = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  border-top: 1px solid rgba(255, 255, 255, 0.18);
+
+  p:first-child {
+    padding-top: 20px;
+  }
+
+  p:nth-child(2) {
+    margin-top: auto;
+    padding-bottom: 20px;
+  }
+
+  @media (max-width: ${breakpoints.md}px) {
+    width: 100%;
+    flex-direction: row;
+
+    p {
+      width: 50%;
+      font-size: 12px;
+    }
+
+    p:nth-child(2) {
+      padding-top: 20px;
+      padding-bottom: unset;
+      margin-top: unset;
+      margin-bottom: auto;
+    }
+  }
+`
+
+const Bottom = styled.div`
+  display: flex;
+  display: border-box;
+  padding-block: 20px;
+  gap: 16px;
+
+  @media (max-width: ${breakpoints.md}px) {
+    flex-direction: column-reverse;
+  }
 `
 
 export default Footer

src/components/Footer/HomeFooter.tsx

@@ -1,4 +1,4 @@
-import { breakpoints } from '@/configs/ui.configs'
+import { breakpoints, footerBUs, footerSocial } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import Image from 'next/image'
 
@@ -31,42 +31,19 @@ export const HomeFooter = () => {
       <Links>
         <LinksColumn>
           <h3>Infrastructure</h3>
-          <a href="" target="_blank">
+          {footerBUs.map((bu) => (
-            Waku
+            <a key={bu.link} href={bu.link} target="_blank">
-          </a>
+              {bu.name}
-          <a href="" target="_blank">
+            </a>
-            Nimbus
+          ))}
-          </a>
-          <a href="" target="_blank">
-            Codex
-          </a>
-          <a href="" target="_blank">
-            Nomos
-          </a>
-          <a href="" target="_blank">
-            Status
-          </a>
-          <a href="" target="_blank">
-            Keycard
-          </a>
-          <a href="" target="_blank">
-            Logos
-          </a>
         </LinksColumn>
         <LinksColumn>
           <h3>Social</h3>
-          <a href="" target="_blank">
+          {footerSocial.map((item) => (
-            LinkedIn
+            <a key={item.link} href={item.link} target="_blank">
-          </a>
+              {item.name}
-          <a href="" target="_blank">
+            </a>
-            Vimeo
+          ))}
-          </a>
-          <a href="" target="_blank">
-            Youtube
-          </a>
-          <a href="" target="_blank">
-            X
-          </a>
         </LinksColumn>
       </Links>
       <Bottom>

src/components/JobList/JobFilter.tsx

@@ -1,4 +1,4 @@
-import { uiConfigs } from '@/configs/ui.configs'
+import { breakpoints, uiConfigs } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import { Job } from './JobItem' // adjust path accordingly
 
@@ -77,6 +77,17 @@ const BUs = styled.div`
   border-top: 1px solid rgba(0, 0, 0, 0.18);
   border-bottom: 1px solid rgba(0, 0, 0, 0.18);
   padding: 16px 0;
+  overflow-x: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @media (max-width: ${breakpoints.md}px) {
+    width: calc(100vw - 32px);
+    margin-left: -16px;
+    padding: 16px;
+  }
 `
 
 const Tag = styled.div<{ active: boolean }>`
@@ -94,6 +105,7 @@ const Tag = styled.div<{ active: boolean }>`
   text-transform: capitalize;
   cursor: pointer;
   border: 1px solid black;
+  white-space: nowrap;
 `
 
 const NoJobs = styled.p`

src/components/JobList/JobItem.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import ArrowUpRight from '../Icons/ArrowUpRight'
 
@@ -52,12 +53,21 @@ const JobHeader = styled.div`
   flex-direction: column;
   gap: 16px;
   margin-bottom: 32px;
+
+  @media (max-width: ${breakpoints.md}px) {
+    margin-bottom: 24px;
+  }
 `
 
 const JobTitle = styled.div`
   font-size: 36px;
   color: black;
   text-decoration: none;
+
+  @media (max-width: ${breakpoints.md}px) {
+    font-size: 16px;
+    line-height: 130%;
+  }
 `
 
 const JobInfo = styled.p`
@@ -66,6 +76,10 @@ const JobInfo = styled.p`
   text-overflow: ellipsis;
   font-size: 18px;
   font-weight: 400;
+
+  @media (max-width: ${breakpoints.md}px) {
+    font-size: 12px;
+  }
 `
 
 const IconContainer = styled.span`
@@ -77,14 +91,15 @@ const IconContainer = styled.span`
 const ApplyButton = styled.a`
   width: 105px;
   height: 42px;
+  font-size: 14px;
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  background-color: white;
+  border-radius: 2px;
+  background: rgba(0, 0, 0, 0.05);
   position: relative;
   color: black;
   padding: 0 18px;
-  border: 1px solid black;
   cursor: pointer;
   text-decoration: none;
 `

src/components/JobList/JobList.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import JobItem, { Job } from './JobItem' // adjust path accordingly
 
@@ -39,6 +40,11 @@ const Container = styled.div`
   justify-content: space-between;
   margin-top: 180px;
   border-top: 1px solid rgba(0, 0, 0, 0.18);
+
+  @media (max-width: ${breakpoints.md}px) {
+    margin-top: 60px;
+    flex-direction: column;
+  }
 `
 
 const Jobs = styled.div`
@@ -51,8 +57,15 @@ const Title = styled.h3`
   color: #000;
   font-size: 52px;
   font-weight: 400;
-  line-height: 130%; /* 67.6px */
+  line-height: 130%;
   text-transform: capitalize;
+
+  @media (max-width: ${breakpoints.md}px) {
+    font-size: 22px;
+    line-height: 122%;
+    padding-block: 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
+  }
 `
 
 const NoJobs = styled.p`

src/components/Navbar/Navbar.tsx

@@ -1,10 +1,13 @@
 import { breakpoints, uiConfigs } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 
 export const Navbar = () => {
   const [scrolled, setScrolled] = useState(false)
+  const router = useRouter()
+  const isTransparent = router.pathname === '/'
 
   useEffect(() => {
     const handleScroll = () => {
@@ -19,7 +22,7 @@ export const Navbar = () => {
   }, [])
 
   return (
-    <Container scrolled={scrolled}>
+    <Container scrolled={scrolled} isTransparent={isTransparent}>
       <span>
         <Link href="/">
           <p>HOME</p>
@@ -38,7 +41,7 @@ export const Navbar = () => {
   )
 }
 
-const Container = styled.nav<{ scrolled: boolean }>`
+const Container = styled.nav<{ scrolled: boolean; isTransparent: boolean }>`
   position: fixed;
   top: 0;
   left: 0;
@@ -74,7 +77,8 @@ const Container = styled.nav<{ scrolled: boolean }>`
 
   @media (max-width: ${breakpoints.md}px) {
     background-color: transparent;
-    background-color: ${({ scrolled }) => (scrolled ? 'black' : 'transparent')};
+    background-color: ${({ isTransparent, scrolled }) =>
+      !scrolled && isTransparent ? 'transparent' : 'black'};
 
     span {
       gap: 10px 20px;

src/configs/ui.configs.ts

@@ -10,3 +10,53 @@ export const breakpoints = {
   lg: 1280,
   xl: 1440,
 }
+
+export const footerBUs = [
+  {
+    name: 'Waku',
+    link: '#',
+  },
+  {
+    name: 'Nimbus',
+    link: '#',
+  },
+  {
+    name: 'Codex',
+    link: '#',
+  },
+  {
+    name: 'Nomos',
+    link: '#',
+  },
+  {
+    name: 'Status',
+    link: '#',
+  },
+  {
+    name: 'Keycard',
+    link: '#',
+  },
+  {
+    name: 'Logos',
+    link: '#',
+  },
+]
+
+export const footerSocial = [
+  {
+    name: 'LinkedIn',
+    link: '#',
+  },
+  {
+    name: 'Vimeo',
+    link: '#',
+  },
+  {
+    name: 'Youtube',
+    link: '#',
+  },
+  {
+    name: 'X',
+    link: '#',
+  },
+]