💄 Design: Main 페이지 디자인 수정

src/components/Main/Contact.tsx

@@ -3,7 +3,7 @@ import * as S from '@/styles/Main/Contact.styles';
 
 const Contact: React.FC = () => {
   return (
-    <>
+    <div style={{ height: '100vh', paddingLeft: '115px', paddingRight: '115px' }}>
       <S.Container>
         <S.TitleContainer>
           <S.Title>Contact</S.Title>
@@ -46,7 +46,10 @@ const Contact: React.FC = () => {
           </S.ButtonContainer>
         </S.TextContainer>
       </S.Container>
-    </>
+      <S.ContactButtonContainer>
+        <S.ContactButton>회고 무료로 시작하기</S.ContactButton>
+      </S.ContactButtonContainer>
+    </div>
   );
 };
 

src/components/Main/Template1.tsx

@@ -42,7 +42,7 @@ const Template1: React.FC = () => {
         </S.CategoryBox>
       </S.CategoryTitle>
       <S.HexagonWrapper>
-        <S.Hexagon size={240}>
+        <S.Hexagon size={220}>
           <S.HexaIcon src={CategoryIcon1} />
           <S.HexaText>팀 성장 촉진</S.HexaText>
           <S.HoverTitleText className="HoverTitle">팀 성장 촉진</S.HoverTitleText>
@@ -57,7 +57,7 @@ const Template1: React.FC = () => {
         </S.Hexagon>
       </S.HexagonWrapper>
       <S.HexagonWrapper>
-        <S.Hexagon size={240}>
+        <S.Hexagon size={220}>
           <S.HexaIcon src={CategoryIcon2} />
           <S.HexaText>문제 해결</S.HexaText>
           <S.HoverTitleText className="HoverTitle">문제 해결</S.HoverTitleText>
@@ -75,7 +75,7 @@ const Template1: React.FC = () => {
         </S.Hexagon>
       </S.HexagonWrapper>
       <S.HexagonWrapper>
-        <S.Hexagon size={240}>
+        <S.Hexagon size={220}>
           <S.HexaIcon src={CategoryIcon3} />
           <S.HexaText>프로세스 개선</S.HexaText>
           <S.HoverTitleText className="HoverTitle">프로세스 개선</S.HoverTitleText>
@@ -90,7 +90,7 @@ const Template1: React.FC = () => {
         </S.Hexagon>
       </S.HexagonWrapper>
       <S.HexagonWrapper>
-        <S.Hexagon size={240}>
+        <S.Hexagon size={220}>
           <S.HexaIcon src={CategoryIcon4} />
           <S.HexaText>팀워크 강화</S.HexaText>
           <S.HoverTitleText className="HoverTitle">팀워크 강화</S.HoverTitleText>
@@ -104,7 +104,7 @@ const Template1: React.FC = () => {
         </S.Hexagon>
       </S.HexagonWrapper>
       <S.HexagonWrapper>
-        <S.Hexagon size={240}>
+        <S.Hexagon size={220}>
           <S.HexaIcon src={CategoryIcon5} />
           <S.HexaText>적응력 향상</S.HexaText>
           <S.HoverTitleText className="HoverTitle">적응력 향상</S.HoverTitleText>

src/components/Main/Template2.tsx

@@ -7,6 +7,7 @@ const Template2: React.FC = () => {
       <S.TitleBox>
         <S.Title>회고를 통한 프로젝트 성장</S.Title>
       </S.TitleBox>
+      <S.Line></S.Line>
       <S.SubtitleBox>
         <S.SubTitle>템플릿에 맞춰서 쉽게 회고를 시작하고 빠르게 프로젝트를 성장시키세요</S.SubTitle>
       </S.SubtitleBox>

src/components/Main/Template3.tsx

@@ -7,6 +7,7 @@ const Template3: React.FC = () => {
       <S.TitleBox>
         <S.Title>명확한 분류로 정렬된 회고보드 확인</S.Title>
       </S.TitleBox>
+      <S.Line></S.Line>
       <S.SubtitleBox>
         <S.SubTitle>원하는 정렬로 회고 페이지를 쉽고 명확하게 탐색하세요</S.SubTitle>
       </S.SubtitleBox>

src/components/Main/Template4.tsx

@@ -16,6 +16,7 @@ const Template4: React.FC = () => {
       <S.TitleBox>
         <S.Title>미리보기</S.Title>
       </S.TitleBox>
+      <S.Line></S.Line>
       <S.SubtitleBox>
         <S.SubTitle>세부 설명이 포함된 Preview</S.SubTitle>
       </S.SubtitleBox>

src/components/home/MainDesign.tsx

@@ -11,7 +11,7 @@ const MainDesign = () => {
   };
 
   return (
-    <>
+    <div style={{ height: '100vh' }}>
       <S.TopTriangleContainer>
         <S.TopText>
           개인회고와 팀 회고 템플릿을 동시에 제공하는 회고 웹페이지입니다. <br />
@@ -39,7 +39,7 @@ const MainDesign = () => {
         </S.BrandTextBox>
         <S.StartedFreeButton onClick={navigateToCreate}>Get Started for Free</S.StartedFreeButton>
       </S.BrandContainer>
-    </>
+    </div>
   );
 };
 

src/pages/HomePage.tsx

@@ -6,14 +6,12 @@ import Template2 from '@/components/Main/Template2';
 import Template3 from '@/components/Main/Template3';
 import Template4 from '@/components/Main/Template4';
 import MainDesign from '@/components/home/MainDesign';
-import * as S from '@/styles/Main/HomaPage.styles';
 
 interface AppProps {}
 
 const App: React.FC<AppProps> = () => {
   const options = {
     anchors: ['Home', 'Template', 'Template2', 'Template3', 'Template4', 'AboutUs', 'Contact'],
-    scrollBar: false,
   };
 
   return (
@@ -22,6 +20,7 @@ const App: React.FC<AppProps> = () => {
         <Section>
           <MainDesign />
         </Section>
+        {/* <S.Container> */}
         <Section>
           <Template1 />
         </Section>
@@ -39,10 +38,8 @@ const App: React.FC<AppProps> = () => {
         </Section>
         <Section>
           <Contact />
-          <S.ButtonContainer>
-            <S.Button>회고 무료로 시작하기</S.Button>
-          </S.ButtonContainer>
         </Section>
+        {/* </S.Container> */}
       </SectionsContainer>
     </>
   );

src/styles/Main/About.styles.ts

@@ -1,11 +1,14 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
+  height: 100vh;
   display: flex;
   justify-content: center;
+  padding-left: 115px;
+  padding-right: 115px;
 `;
 export const Img = styled.img`
-  margin-top: 20px;
-  width: 70%;
-  height: auto;
+  margin-top: 40px;
+  width: 75%;
+  height: 70%;
 `;

src/styles/Main/Contact.styles.ts

@@ -5,7 +5,7 @@ interface RadioInputProps {
 }
 
 export const Container = styled.div`
-  height: 80%;
+  height: 75vh;
   display: grid;
   grid-template-columns: 0.3fr 1.5fr 3fr 0.3fr;
   grid-template-rows: 1fr 6.5fr 1fr;
@@ -199,3 +199,19 @@ export const ButtonText = styled.span`
   display: block;
   margin-top: 5px;
 `;
+
+export const ContactButtonContainer = styled.div`
+  height: 300px;
+  background-color: #ececec;
+  display: flex;
+  justify-content: center;
+`;
+
+export const ContactButton = styled.button`
+  width: 300px;
+  height: 50px;
+  color: white;
+  background-color: #111b47;
+  border-radius: 3px;
+  margin-top: 15px;
+`;

src/styles/Main/Template1.styles.ts

@@ -1,10 +1,13 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
+  height: 100vh;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: 120px 30px 60px auto;
   overflow-x: hidden;
+  padding-left: 115px;
+  padding-right: 115px;
 `;
 
 export const TitleBox = styled.span`
@@ -22,8 +25,7 @@ export const TitleBox = styled.span`
 export const Title = styled.span`
   font-size: xx-large;
   font-weight: bold;
-  padding-top: 15px;
-  padding-bottom: 15px;
+  padding-bottom: 10px;
   padding-left: 400px;
   padding-right: 400px;
   border-bottom: 2px solid #111b47;
@@ -79,7 +81,9 @@ export const CheckIcon = styled.img`
 export const HexagonWrapper = styled.div`
   margin-top: 30px;
   display: grid;
-  place-items: center;
+  place-items: stretch;
+  position: relative;
+  left: 10%;
 `;
 
 export const Hexagon = styled.div<{ size: number }>`
@@ -175,3 +179,12 @@ export const Divider = styled.div`
   opacity: 0;
   transition: opacity 0.7s ease;
 `;
+
+export const Line = styled.div`
+  width: 900px;
+  height: 2px;
+  border: 1px solid #111b47;
+  background-color: '#111b47';
+  justify-self: center;
+  align-self: center;
+`;

src/styles/Main/Template2.styles.ts

@@ -1,24 +1,27 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
+  height: 100vh;
   display: grid;
-  grid-template-rows: 120px 30px auto;
+  grid-template-rows: 80px 10px 30px auto;
+  padding-left: 115px;
+  padding-right: 115px;
 `;
 
 export const Title = styled.span`
   font-size: xx-large;
   font-weight: bold;
-  padding-top: 25px;
-  padding-bottom: 15px;
-  padding-left: 400px;
-  padding-right: 400px;
-  border-bottom: 2px solid #111b47;
+  padding-bottom: 10px;
+  align-self: center;
+  margin-top: 10px;
 `;
 
 export const SubTitle = styled.span`
   font-size: large;
   color: #a3a3a3;
   display: block;
+  align-self: center;
+  margin-top: 5px;
 `;
 
 export const TitleBox = styled.span`
@@ -30,6 +33,8 @@ export const TitleBox = styled.span`
   }
   justify-self: center;
   align-self: center;
+  display: flex;
+  flex-direction: column;
 `;
 
 export const SubtitleBox = styled.div`
@@ -44,7 +49,17 @@ export const SubtitleBox = styled.div`
 `;
 
 export const Img = styled.img`
-  width: auto;
-  height: 100%;
-  margin-top: 10px;
+  width: 1100px;
+  height: auto;
+  justify-self: center;
+  align-self: center;
+`;
+
+export const Line = styled.div`
+  width: 900px;
+  height: 2px;
+  border: 1px solid #111b47;
+  background-color: '#111b47';
+  justify-self: center;
+  align-self: center;
 `;

src/styles/Main/Template3.styles.ts

@@ -1,24 +1,29 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
+  height: 100vh;
   display: grid;
-  grid-template-rows: 120px 30px auto;
+  grid-template-rows: 80px 10px 30px auto;
+  background-color: white;
+  display: relative;
+  padding-left: 115px;
+  padding-right: 115px;
 `;
 
 export const Title = styled.span`
   font-size: xx-large;
   font-weight: bold;
-  padding-top: 25px;
-  padding-bottom: 15px;
-  padding-left: 400px;
-  padding-right: 400px;
-  border-bottom: 2px solid #111b47;
+  padding-bottom: 10px;
+  align-self: center;
+  margin-top: 10px;
 `;
 
 export const SubTitle = styled.span`
   font-size: large;
   color: #a3a3a3;
   display: block;
+  align-self: center;
+  margin-top: 5px;
 `;
 
 export const TitleBox = styled.span`
@@ -30,6 +35,8 @@ export const TitleBox = styled.span`
   }
   justify-self: center;
   align-self: center;
+  display: flex;
+  flex-direction: column;
 `;
 
 export const SubtitleBox = styled.div`
@@ -43,8 +50,19 @@ export const SubtitleBox = styled.div`
   align-self: center;
 `;
 
+export const Line = styled.div`
+  width: 900px;
+  height: 2px;
+  border: 1px solid #111b47;
+  background-color: '#111b47';
+  justify-self: center;
+  align-self: center;
+`;
+
 export const Img = styled.img`
-  width: auto;
-  height: 100%;
-  margin-top: 10px;
+  width: 1100px;
+  height: auto;
+  justify-self: center;
+  align-self: center;
+  top: 0%;
 `;