feat: update homepage design

src/components/Button/Button.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled'
 import React from 'react'
 
 interface ButtonProps {
-  color?: 'black' | 'white'
+  color?: 'black' | 'white' | 'grey'
   fontSize?: string
   padding?: string
   width?: string
@@ -11,11 +11,16 @@ interface ButtonProps {
 }
 
 const StyledButton = styled.button<ButtonProps>`
-  background-color: ${(props) => (props.color === 'black' ? 'black' : 'white')};
+  background-color: ${(props) =>
+    props.color === 'black'
+      ? 'black'
+      : props.color === 'grey'
+      ? 'rgba(0, 0, 0, 0.05)'
+      : 'white'};
   color: ${(props) => (props.color === 'black' ? 'white' : 'black')};
   font-size: ${(props) => props.fontSize || '14px'};
   padding: ${(props) => props.padding || '6px 12px'};
-  border: 1px solid black;
+  border: ${(props) => (props.color === 'grey' ? 'none' : '1px solid black')};
   cursor: pointer;
   transition: 0.3s;
   box-sizing: border-box;
@@ -23,6 +28,7 @@ const StyledButton = styled.button<ButtonProps>`
   height: ${(props) => props.height || 'auto'};
   white-space: nowrap;
   text-align: center;
+  border-radius: 2px;
 
   &:hover {
     opacity: 0.8;

src/components/Footer/HomeFooter.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import Image from 'next/image'
 
@@ -27,17 +28,54 @@ export const HomeFooter = () => {
         </p>
         <button>Email us</button>
       </Description>
-      <div>
+      <Links>
+        <LinksColumn>
+          <h3>Infrastructure</h3>
+          <a href="" target="_blank">
+            Waku
+          </a>
+          <a href="" target="_blank">
+            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">
+            LinkedIn
+          </a>
+          <a href="" target="_blank">
+            Vimeo
+          </a>
+          <a href="" target="_blank">
+            Youtube
+          </a>
+          <a href="" target="_blank">
+            X
+          </a>
+        </LinksColumn>
+      </Links>
+      <Bottom>
         <p>
           Institute of Free Technology.
           <br />©{new Date().getFullYear()}
         </p>
-      </div>
+        <p>All Rights Reserved.</p>
-      <span>
+      </Bottom>
-        <p>LinkedIn</p>
-        <p>Vimeo</p>
-        <p>Youtube</p>
-      </span>
     </Container>
   )
 }
@@ -49,7 +87,7 @@ const Container = styled.nav`
   flex-direction: column;
   color: white;
   width: 50vw;
-  padding: 16px;
+  padding: 16px 16px 0 16px;
   margin-top: 204px;
 
   h2 {
@@ -58,11 +96,22 @@ const Container = styled.nav`
     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;
-  margin-bottom: 16px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.18);
 `
 
@@ -101,6 +150,76 @@ const Description = styled.div`
     color: #fff;
     cursor: pointer;
   }
+
+  @media (max-width: ${breakpoints.md}px) {
+    width: 100%;
+    margin-top: 24px;
+    margin-bottom: 32px;
+
+    p {
+      font-size: 22px;
+      line-height: 122%;
+    }
+  }
+`
+
+const Links = styled.div`
+  display: flex;
+  padding-top: 20px;
+  padding-bottom: 64px;
+  border-top: 1px solid rgba(255, 255, 255, 0.18);
+
+  @media (max-width: ${breakpoints.md}px) {
+    padding-bottom: 48px;
+  }
+`
+
+const LinksColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 50%;
+
+  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 Bottom = styled.div`
+  border-top: 1px solid rgba(255, 255, 255, 0.18);
+  display: flex;
+  display: border-box;
+  padding-block: 20px;
+
+  p {
+    width: 50%;
+  }
+
+  @media (max-width: ${breakpoints.md}px) {
+    p {
+      font-size: 12px;
+      line-height: 130%;
+    }
+  }
 `
 
 export default HomeFooter

src/components/Hero/Description.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 
 type Props = React.DetailedHTMLProps<
@@ -16,13 +17,19 @@ const Container = styled.div`
   gap: 40px;
   padding-block: 20px;
   border-top: 1px solid rgba(0, 0, 0, 0.18);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
+  margin-block: 24px;
-  margin-block: 32px;
 
   p {
     font-size: 22px;
     line-height: normal;
   }
+
+  @media (max-width: ${breakpoints.md}px) {
+    p {
+      font-size: 14px;
+      line-height: 126%;
+    }
+  }
 `
 
 export default Description

src/components/Hero/Hero.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 
 type Props = React.DetailedHTMLProps<
@@ -10,12 +11,29 @@ export const Hero: React.FC = ({ children, ...props }: Props) => {
 }
 
 const Container = styled.div`
-  h1 {
+  h1,
-    text-transform: uppercase;
+  h2 {
-    font-size: 80px;
+    font-size: 36px;
-    line-height: 87%;
+    line-height: 128%;
+    word-break: break-word;
   }
+
+  h2 {
+    opacity: 0.3;
+    margin-bottom: 32px;
+  }
+
   margin-bottom: 165px;
+
+  @media (max-width: ${breakpoints.md}px) {
+    h1,
+    h2 {
+      font-size: 22px;
+      line-height: 122%;
+    }
+
+    margin-bottom: 74px;
+  }
 `
 
 export default Hero

src/components/JobList/JobFilter.tsx

@@ -74,8 +74,8 @@ const BUs = styled.div`
   display: flex;
   align-items: center;
   gap: 16px;
-  border-top: 1px solid rgba(0, 0, 0, 0.28);
+  border-top: 1px solid rgba(0, 0, 0, 0.18);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.28);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
   padding: 16px 0;
 `
 

src/components/JobList/JobList.tsx

@@ -38,7 +38,7 @@ const Container = styled.div`
   width: 100%;
   justify-content: space-between;
   margin-top: 180px;
-  border-top: 1px solid rgba(0, 0, 0, 0.28);
+  border-top: 1px solid rgba(0, 0, 0, 0.18);
 `
 
 const Jobs = styled.div`

src/components/Mission/Mission.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import { Button } from '../Button'
 
@@ -11,7 +12,9 @@ export const Mission = ({ title, children }: Props) => {
     <Container>
       <Header>
         <Title>{title}</Title>
-        <Button color="white">Learn more</Button>
+        <Button width="150px" padding="10px 34px" color="grey">
+          Learn more
+        </Button>
       </Header>
       <Content>{children}</Content>
     </Container>
@@ -23,8 +26,10 @@ const Container = styled.div`
   width: 100%;
   flex-wrap: wrap;
   justify-content: space-between;
-  border-top: 1px solid rgba(0, 0, 0, 0.28);
+  border-top: 1px solid rgba(0, 0, 0, 0.18);
-  margin-bottom: 70px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
+  margin-top: 220px;
+  margin-bottom: 148px;
 
   h2 {
     font-size: 36px;
@@ -38,6 +43,11 @@ const Container = styled.div`
     display: flex;
     margin-top: 32px;
     margin-bottom: 40px;
+    gap: 16px;
+
+    @media (max-width: ${breakpoints.md}px) {
+      gap: 8px;
+    }
   }
 
   p {
@@ -76,6 +86,18 @@ const Container = styled.div`
     line-height: 130%;
     padding: 20px 0 8px 0;
   }
+
+  @media (max-width: ${breakpoints.md}px) {
+    h2 {
+      font-size: 22px;
+      line-height: 122%;
+    }
+
+    p {
+      font-size: 14px;
+      line-height: 126%;
+    }
+  }
 `
 
 const Header = styled.div`
@@ -83,6 +105,12 @@ const Header = styled.div`
   width: 100%;
   align-items: center;
   justify-content: space-between;
+
+  @media (max-width: ${breakpoints.md}px) {
+    button {
+      padding: 6px 14px;
+    }
+  }
 `
 
 const Title = styled.h3`

src/components/Navbar/Navbar.tsx

@@ -1,10 +1,25 @@
-import { uiConfigs } from '@/configs/ui.configs'
+import { breakpoints, uiConfigs } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
 
 export const Navbar = () => {
+  const [scrolled, setScrolled] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 0)
+    }
+
+    window.addEventListener('scroll', handleScroll)
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
   return (
-    <Container>
+    <Container scrolled={scrolled}>
       <span>
         <Link href="/">
           <p>HOME</p>
@@ -23,15 +38,13 @@ export const Navbar = () => {
   )
 }
 
-const Container = styled.nav`
+const Container = styled.nav<{ scrolled: boolean }>`
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
   background: black;
   height: ${uiConfigs.navbarHeight}px;
   padding: 4px 16px;
@@ -43,6 +56,7 @@ const Container = styled.nav`
     display: flex;
     align-items: center;
     gap: 24px;
+    flex-wrap: wrap;
   }
 
   p {
@@ -51,6 +65,25 @@ const Container = styled.nav`
     font-weight: 400;
     line-height: 20px;
     color: white;
+    white-space: nowrap;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  @media (max-width: ${breakpoints.md}px) {
+    background-color: transparent;
+    background-color: ${({ scrolled }) => (scrolled ? 'black' : 'transparent')};
+
+    span {
+      gap: 10px 20px;
+    }
+
+    p {
+      font-size: 12px;
+      line-height: 20px;
+    }
   }
 `
 

src/components/Portfolio/Portfolio.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import React from 'react'
 
@@ -27,6 +28,13 @@ const Title = styled.p`
   line-height: 130%;
   padding-block: 24px;
   margin-bottom: 56px;
+  box-sizing: border-box;
+
+  @media (max-width: ${breakpoints.md}px) {
+    font-size: 22px;
+    line-height: 122%;
+    margin-bottom: 48px;
+  }
 `
 
 export default Portfolio

src/components/Portfolio/PortfolioItem.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import Image from 'next/image'
 import { useState } from 'react'
@@ -24,10 +25,8 @@ export const PortfolioItem = ({ title, mark, est, children }: Props) => {
           <Tag>est. {est}</Tag>
         </Title>
         <Toggle onClick={handleClick}>
-          <Image
+          <ToggleButtonImage
             src={open ? '/icons/minus.svg' : '/icons/plus.svg'}
-            width={48}
-            height={48}
             alt={open ? 'minus' : 'plus'}
           />
         </Toggle>
@@ -82,6 +81,26 @@ const Container = styled.div`
     line-height: 130%;
     padding: 20px 0 8px 0;
   }
+
+  @media (max-width: ${breakpoints.md}px) {
+    p {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 126%;
+      margin-top: 24px;
+      margin-bottom: 24px;
+    }
+
+    table {
+      margin-bottom: 16px;
+    }
+
+    table th,
+    table tr {
+      font-size: 14px;
+      padding: 16px 0 8px 0;
+    }
+  }
 `
 
 const Header = styled.div`
@@ -90,6 +109,11 @@ const Header = styled.div`
   justify-content: space-between;
   width: 100%;
   padding-block: 24px;
+  box-sizing: border-box;
+
+  @media (max-width: ${breakpoints.md}px) {
+    padding-block: 16px;
+  }
 `
 
 const Toggle = styled.button`
@@ -103,11 +127,19 @@ const Title = styled.div`
   gap: 16px;
   align-items: center;
   width: 100%;
+
+  @media (max-width: ${breakpoints.md}px) {
+    font-size: 12px;
+  }
 `
 
 const TitleText = styled.h3`
   font-size: 26px;
   line-height: 130%;
+
+  @media (max-width: ${breakpoints.md}px) {
+    font-size: 16px;
+  }
 `
 
 const Tag = styled.div`
@@ -124,11 +156,33 @@ const Tag = styled.div`
   box-sizing: border-box;
   cursor: pointer;
   border: 1px solid black;
+
+  @media (max-width: ${breakpoints.md}px) {
+    font-size: 11px;
+  }
 `
 
 const Content = styled.div`
   width: 100%;
   padding-bottom: 40px;
+
+  @media (max-width: ${breakpoints.md}px) {
+    padding-bottom: 16px;
+
+    button {
+      width: 100%;
+    }
+  }
+`
+
+const ToggleButtonImage = styled.img`
+  width: 48px;
+  height: 48px;
+
+  @media (max-width: ${breakpoints.md}px) {
+    width: 18px;
+    height: 18px;
+  }
 `
 
 export default PortfolioItem

src/components/Tags/Tags.tsx

@@ -20,8 +20,8 @@ const TagsContainer = styled.div`
   align-items: flex-start;
   gap: 16px;
   align-self: stretch;
-  border-top: 1px solid rgba(0, 0, 0, 0.28);
+  border-top: 1px solid rgba(0, 0, 0, 0.18);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.28);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
   margin-block: 16px;
 `
 

src/components/Team/Member.tsx

@@ -51,7 +51,10 @@ const MemberImage = styled(Image)`
 `
 
 const Content = styled.div`
+  display: flex;
+  flex-direction: column;
   width: 100%;
+  gap: 8px;
 `
 
 export default Member

src/components/Team/Team.tsx

@@ -16,7 +16,7 @@ export const Team = ({ children, ...props }: Props) => {
 }
 
 const Container = styled.div`
-  border-top: 1px solid rgba(0, 0, 0, 0.28);
+  border-top: 1px solid rgba(0, 0, 0, 0.18);
 `
 
 const Title = styled.p`

src/configs/ui.configs.ts

@@ -3,3 +3,10 @@ export const uiConfigs = {
   maxContainerWidth: 1440,
   articleRenderedMT: 45 * 2,
 }
+
+export const breakpoints = {
+  sm: 768,
+  md: 1024,
+  lg: 1280,
+  xl: 1440,
+}

src/containers/Home/GIFContainer.tsx

@@ -1,4 +1,4 @@
-import { uiConfigs } from '@/configs/ui.configs'
+import { breakpoints, uiConfigs } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import React from 'react'
 
@@ -11,15 +11,28 @@ export const GIFContainer: React.FC = () => {
 }
 
 const Container = styled.div`
-  width: 50vw;
+  width: 50%;
   background-color: black;
   background-size: 100%;
+  box-sizing: border-box;
+
+  @media (max-width: ${breakpoints.md}px) {
+    width: 100%;
+  }
 `
 
 const Image = styled.img`
   position: fixed;
   top: ${uiConfigs.navbarHeight}px;
-  right: 0;
+  right: 0px;
-  height: calc(100vh - 28px);
   width: 50vw;
+  height: calc(100vh - 28px);
+  box-sizing: border-box;
+
+  @media (max-width: ${breakpoints.md}px) {
+    position: relative;
+    top: 0px;
+    width: 100%;
+    height: 84px;
+  }
 `

src/containers/Home/Home.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import React from 'react'
 import { GIFContainer } from './GIFContainer'
@@ -20,11 +21,21 @@ const Root = styled.div`
   display: flex;
   width: 100%;
   box-sizing: border-box;
+
+  @media (max-width: ${breakpoints.md}px) {
+    flex-direction: column-reverse;
+    width: 100%;
+  }
 `
 
 const Content = styled.div`
-  width: 50vw;
+  width: 50%;
   margin-top: 48px;
   padding: 16px;
   box-sizing: border-box;
+
+  @media (max-width: ${breakpoints.md}px) {
+    width: 100%;
+    margin-top: 0;
+  }
 `

src/pages/index.mdx

@@ -14,22 +14,18 @@ import { HomeFooter } from '@/components/Footer'
 
 <Home>
     <Hero>
-        # Institute<br />of Free <br />Technology
+        # Institute of Free Technologies
+
+        ## Fostering innovation, defending digital liberties
+
+        <Button color="black" width="150px" height="40px" padding="10px 34px">Learn more</Button>
         
         <Description>
             A mission-driven tech startup studio. We take ideas from the drawing board to market with financial, technical, legal, HR, and brand-building support at every step.<br/><br/>
             Our startups are free to focus on what they do best — building tech to safeguard civil liberties in the digital age.
         </Description>
-
-        <Button color="white" width="150px" height="40px" padding="10px 34px">Learn more</Button>
     </Hero>
 
-    <Section>
-        ## Fostering innovation, defending digital liberties
-
-        <Button color="white" width="188px" height="40px">Explore Ecosystem</Button>
-    </Section>
-
     <Portfolio>
         <PortfolioItem mark="/icons/bu/logos.svg" title="Logos" est={2020}>
 
@@ -43,7 +39,7 @@ import { HomeFooter } from '@/components/Footer'
 
             A movement supporting the development of the decentralised web. Logos technologies lay the foundations for a freer internet upon which communities can evolve into network states. Each protocol in the Logos stack seeks to empower its users while upholding civil liberties and fundamental freedoms.
 
-            <Button width="150px" height="40px" color="white">Learn more</Button>
+            <Button width="150px" height="40px" color="grey">Learn more</Button>
         </PortfolioItem>
         <PortfolioItem mark="/icons/bu/waku.svg" title="Waku" est={2020}>
 
@@ -57,7 +53,7 @@ import { HomeFooter } from '@/components/Footer'
 
             A movement supporting the development of the decentralised web. Logos technologies lay the foundations for a freer internet upon which communities can evolve into network states. Each protocol in the Logos stack seeks to empower its users while upholding civil liberties and fundamental freedoms.
 
-            <Button width="150px" height="40px" color="white">Learn more</Button>
+            <Button width="150px" height="40px" color="grey">Learn more</Button>
         </PortfolioItem>
         <PortfolioItem mark="/icons/bu/codex.svg" title="Codex" est={2020}>
 
@@ -71,7 +67,7 @@ import { HomeFooter } from '@/components/Footer'
 
             A movement supporting the development of the decentralised web. Logos technologies lay the foundations for a freer internet upon which communities can evolve into network states. Each protocol in the Logos stack seeks to empower its users while upholding civil liberties and fundamental freedoms.
 
-            <Button width="150px" height="40px" color="white">Learn more</Button>
+            <Button width="150px" height="40px" color="grey">Learn more</Button>
         </PortfolioItem>
         <PortfolioItem mark="/icons/bu/nomos.svg" title="Nomos" est={2020}>
 
@@ -85,7 +81,7 @@ import { HomeFooter } from '@/components/Footer'
 
             A movement supporting the development of the decentralised web. Logos technologies lay the foundations for a freer internet upon which communities can evolve into network states. Each protocol in the Logos stack seeks to empower its users while upholding civil liberties and fundamental freedoms.
 
-            <Button width="150px" height="40px" color="white">Learn more</Button>
+            <Button width="150px" height="40px" color="grey">Learn more</Button>
         </PortfolioItem>
         <PortfolioItem mark="/icons/bu/status.svg" title="Status" est={2020}>
 
@@ -99,7 +95,7 @@ import { HomeFooter } from '@/components/Footer'
 
             A movement supporting the development of the decentralised web. Logos technologies lay the foundations for a freer internet upon which communities can evolve into network states. Each protocol in the Logos stack seeks to empower its users while upholding civil liberties and fundamental freedoms.
 
-            <Button width="150px" height="40px" color="white">Learn more</Button>
+            <Button width="150px" height="40px" color="grey">Learn more</Button>
         </PortfolioItem>
         <PortfolioItem mark="/icons/bu/nimbus.svg" title="Nimbus" est={2020}>
 
@@ -113,7 +109,7 @@ import { HomeFooter } from '@/components/Footer'
 
             A movement supporting the development of the decentralised web. Logos technologies lay the foundations for a freer internet upon which communities can evolve into network states. Each protocol in the Logos stack seeks to empower its users while upholding civil liberties and fundamental freedoms.
 
-            <Button width="150px" height="40px" color="white">Learn more</Button>
+            <Button width="150px" height="40px" color="grey">Learn more</Button>
         </PortfolioItem>
     </Portfolio>
     <Mission title="Mission">
@@ -131,24 +127,34 @@ import { HomeFooter } from '@/components/Footer'
     </Mission>
     <Team>
         <Member img="/profile.png">
-            ### Nick Griffin
+            ### Jarrad Hope
 
-            Founding Partner & Chief Investment Officer
+            Co-founder
         </Member>
         <Member img="/profile.png">
-            ### Brooklyn Simmons
+            ### Carl Bennetts
 
-            Partner & Portfolio Manager
+            Co-founder
         </Member>
         <Member img="/profile.png">
-            ### Nick Griffin
+            ### Dr. Agata Ferreira
 
-            Partner & Portfolio Manager
+            Chief Legal Officer
         </Member>
         <Member img="/profile.png">
-            ### Courtney Henry
+            ### Adam Kissack 
 
-            Partner & Portfolio Manager
+            Chief Financial Officer
+        </Member>
+        <Member img="/profile.png">
+            ### Jonathan Barker 
+
+            Head of People Operations
+        </Member>
+        <Member img="/profile.png">
+            ### Ned Karlovich 
+
+            Creative Director
         </Member>
     </Team>
 </Home>