From e4cd910a054eb070dca1c3159c17e8d54686d15d Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Thu, 7 Dec 2023 00:03:37 +0900
Subject: [PATCH] feat: responsive design for 1440px breakpoint

---
 src/components/Badge/Badge.tsx             |  5 +++
 src/components/Footer/HomeFooter.tsx       | 52 +++++++++++++++++++++-
 src/components/Hero/Description.tsx        |  9 ++++
 src/components/Hero/Hero.tsx               | 22 +++++++++
 src/components/Mission/Mission.tsx         | 20 +++++++++
 src/components/Portfolio/Portfolio.tsx     | 16 +++++++
 src/components/Portfolio/PortfolioItem.tsx | 36 ++++++++++++++-
 src/components/Team/Member.tsx             | 15 +++++++
 src/components/Team/Team.tsx               | 11 +++++
 src/pages/index.mdx                        |  2 +-
 10 files changed, 184 insertions(+), 4 deletions(-)

diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index 253a1c2..2babcda 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -16,6 +16,11 @@ export const Badge = styled.div`
   border-radius: 999px;
   border: 1px solid rgba(0, 0, 0, 0.18);
 
+  @media (max-width: ${breakpoints.xl}px) {
+    font-size: 9px;
+    padding: 3px 7.5px;
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     font-size: 12px;
     padding: 4px 8px;
diff --git a/src/components/Footer/HomeFooter.tsx b/src/components/Footer/HomeFooter.tsx
index fb00e47..9650936 100644
--- a/src/components/Footer/HomeFooter.tsx
+++ b/src/components/Footer/HomeFooter.tsx
@@ -76,6 +76,14 @@ const Container = styled.footer`
     line-height: 42px;
   }
 
+  @media (max-width: ${breakpoints.xl}px) {
+    h2 {
+      font-size: 27px;
+      line-height: 32px;
+      padding-block: 18px;
+    }
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     width: 100%;
     margin-top: 74px;
@@ -127,9 +135,28 @@ const Description = styled.div`
     background-color: transparent;
     border: 1px solid #fff;
     color: #fff;
+    box-sizing: border-box;
     cursor: pointer;
   }
 
+  @media (max-width: ${breakpoints.xl}px) {
+    margin-top: 24px;
+    margin-bottom: 48px;
+    gap: 30px;
+
+    p {
+      font-size: 27px;
+      line-height: 32px;
+    }
+
+    button {
+      width: 95px;
+      font-size: 11px;
+      line-height: 15px;
+      padding: 8px 16px;
+    }
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     width: 100%;
     margin-top: 8px;
@@ -149,7 +176,7 @@ const Links = styled.div`
   padding-bottom: 64px;
   border-top: 1px solid rgba(255, 255, 255, 0.18);
 
-  @media (max-width: ${breakpoints.md}px) {
+  @media (max-width: ${breakpoints.xl}px) {
     padding-bottom: 48px;
   }
 `
@@ -172,6 +199,18 @@ const LinksColumn = styled.div`
     color: white;
   }
 
+  @media (max-width: ${breakpoints.xl}px) {
+    h3 {
+      font-size: 12px;
+      line-height: 15px;
+    }
+
+    a {
+      font-size: 12px;
+      line-height: 130%;
+    }
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     h3 {
       font-size: 12px;
@@ -179,7 +218,7 @@ const LinksColumn = styled.div`
 
     a {
       font-size: 12px;
-      line-height: 130%;
+      line-height: 15px;
     }
   }
 `
@@ -199,6 +238,15 @@ const Bottom = styled.div`
     }
   }
 
+  @media (max-width: ${breakpoints.xl}px) {
+    padding-block: 15px;
+
+    p {
+      font-size: 12px;
+      line-height: 15px;
+    }
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     p {
       font-size: 12px;
diff --git a/src/components/Hero/Description.tsx b/src/components/Hero/Description.tsx
index bb58ba9..68d49d6 100644
--- a/src/components/Hero/Description.tsx
+++ b/src/components/Hero/Description.tsx
@@ -24,6 +24,15 @@ const Container = styled.div`
     line-height: 122%;
   }
 
+  @media (max-width: ${breakpoints.xl}px) {
+    margin-block: 18px;
+    padding-block: 18px;
+    p {
+      font-size: 16px;
+      line-height: 122%;
+    }
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     p {
       font-size: 14px;
diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx
index c4c8484..ab90dae 100644
--- a/src/components/Hero/Hero.tsx
+++ b/src/components/Hero/Hero.tsx
@@ -37,6 +37,28 @@ const Container = styled.div`
 
   margin-bottom: 165px;
 
+  @media (max-width: ${breakpoints.xl}px) {
+    h1,
+    h2 {
+      font-size: 27px;
+      line-height: 32px;
+    }
+
+    h2 {
+      margin-bottom: 24px;
+    }
+
+    button {
+      width: 110px;
+      height: 32px;
+      font-size: 11px;
+      line-height: 15px;
+      padding: 8px 26px;
+    }
+
+    margin-bottom: 150px;
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     h1,
     h2 {
diff --git a/src/components/Mission/Mission.tsx b/src/components/Mission/Mission.tsx
index bebb0a9..b1ed1bb 100644
--- a/src/components/Mission/Mission.tsx
+++ b/src/components/Mission/Mission.tsx
@@ -86,6 +86,21 @@ const Container = styled.div`
     padding: 20px 0 8px 0;
   }
 
+  @media (max-width: ${breakpoints.xl}px) {
+    margin-top: 165px;
+    margin-bottom: 111px;
+
+    h2 {
+      font-size: 27px;
+      line-height: 32px;
+    }
+
+    p {
+      font-size: 16px;
+      line-height: 122%;
+    }
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     h2 {
       font-size: 22px;
@@ -117,6 +132,11 @@ const Title = styled.h3`
   line-height: 130%;
   width: 100%;
   padding-block: 16px;
+
+  @media (max-width: ${breakpoints.xl}px) {
+    font-size: 27px;
+    line-height: 32px;
+  }
 `
 
 const Content = styled.div`
diff --git a/src/components/Portfolio/Portfolio.tsx b/src/components/Portfolio/Portfolio.tsx
index 9cb6137..818ab51 100644
--- a/src/components/Portfolio/Portfolio.tsx
+++ b/src/components/Portfolio/Portfolio.tsx
@@ -36,9 +36,20 @@ const Header = styled.div`
     font-weight: 400;
   }
 
+  @media (max-width: ${breakpoints.xl}px) {
+    padding-block: 18px;
+    margin-bottom: 42px;
+
+    sup {
+      font-size: 12px;
+      margin-left: 0px;
+    }
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     padding-block: 16px;
     margin-bottom: 48px;
+
     sup {
       font-size: 12px;
       margin-left: 0px;
@@ -52,6 +63,11 @@ const Title = styled.p`
   line-height: 130%;
   box-sizing: border-box;
 
+  @media (max-width: ${breakpoints.xl}px) {
+    font-size: 27px;
+    line-height: 32px;
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     font-size: 22px;
     line-height: 122%;
diff --git a/src/components/Portfolio/PortfolioItem.tsx b/src/components/Portfolio/PortfolioItem.tsx
index 353cbfb..1b64204 100644
--- a/src/components/Portfolio/PortfolioItem.tsx
+++ b/src/components/Portfolio/PortfolioItem.tsx
@@ -85,6 +85,26 @@ const Container = styled.div`
     padding: 20px 0 8px 0;
   }
 
+  @media (max-width: ${breakpoints.xl}px) {
+    table {
+      margin-bottom: 15px;
+    }
+
+    table th,
+    table tr {
+      font-size: 13px;
+      line-height: 18px;
+      padding: 15px 0 6px 0;
+    }
+
+    p {
+      font-size: 16px;
+      line-height: 122%;
+      margin-top: 30px;
+      margin-bottom: 24px;
+    }
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     p {
       font-size: 14px;
@@ -114,6 +134,10 @@ const Header = styled.div`
   padding-block: 24px;
   box-sizing: border-box;
 
+  @media (max-width: ${breakpoints.xl}px) {
+    padding-block: 18px;
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     padding-block: 16px;
   }
@@ -140,8 +164,9 @@ const TitleText = styled.h3`
   font-size: 22px;
   line-height: 26px;
 
-  @media (max-width: ${breakpoints.md}px) {
+  @media (max-width: ${breakpoints.xl}px) {
     font-size: 16px;
+    line-height: 20px;
   }
 `
 
@@ -149,6 +174,10 @@ const Content = styled.div`
   width: 100%;
   padding-bottom: 40px;
 
+  @media (max-width: ${breakpoints.xl}px) {
+    padding-bottom: 30px;
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     padding-bottom: 16px;
 
@@ -162,6 +191,11 @@ const ToggleButtonImage = styled.img`
   width: 48px;
   height: 48px;
 
+  @media (max-width: ${breakpoints.xl}px) {
+    width: 36px;
+    height: 36px;
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     width: 18px;
     height: 18px;
diff --git a/src/components/Team/Member.tsx b/src/components/Team/Member.tsx
index 33d5754..e8a28de 100644
--- a/src/components/Team/Member.tsx
+++ b/src/components/Team/Member.tsx
@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import Image from 'next/image'
 
@@ -27,6 +28,11 @@ const Container = styled.div`
     font-size: 22px;
     font-weight: 400;
     line-height: 130%;
+
+    @media (max-width: ${breakpoints.xl}px) {
+      font-size: 16px;
+      line-height: 20px;
+    }
   }
 
   p {
@@ -35,6 +41,11 @@ const Container = styled.div`
     font-weight: 400;
     text-transform: capitalize;
     opacity: 0.5;
+
+    @media (max-width: ${breakpoints.xl}px) {
+      font-size: 13px;
+      line-height: 18px;
+    }
   }
 `
 
@@ -43,6 +54,10 @@ const ImageContainer = styled.div`
   width: 100%;
   margin-bottom: 16px;
   aspect-ratio: 1;
+
+  @media (max-width: ${breakpoints.xl}px) {
+    margin-bottom: 12px;
+  }
 `
 
 const MemberImage = styled(Image)`
diff --git a/src/components/Team/Team.tsx b/src/components/Team/Team.tsx
index f07bffa..408d6d5 100644
--- a/src/components/Team/Team.tsx
+++ b/src/components/Team/Team.tsx
@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import React from 'react'
 
@@ -24,12 +25,22 @@ const Title = styled.p`
   font-weight: 400;
   line-height: 130%;
   padding-block: 20px;
+
+  @media (max-width: ${breakpoints.xl}px) {
+    font-size: 16px;
+    line-height: 20px;
+    padding-block: 18px;
+  }
 `
 
 const Grid = styled.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
+
+  @media (max-width: ${breakpoints.xl}px) {
+    gap: 12px;
+  }
 `
 
 export default Team
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
index dfa5bee..e216420 100644
--- a/src/pages/index.mdx
+++ b/src/pages/index.mdx
@@ -20,7 +20,7 @@ import BU_DATA from '../data/bu-data'
         <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, people operations, and brand-building support at every step. Our startups are free to focus on what they do best — building public goods to safeguard civil liberties in the digital age.
+            A mission-driven tech startup studio. We take ideas from the drawing board to market with financial, technical, legal, people operations, and brand-building support at every step. <br/><br/> Our startups are free to focus on what they do best — building public goods to safeguard civil liberties in the digital age.
         </Description>
     </Hero>