From c75d1873653ebbdb09988018046494abdaa6bf8f Mon Sep 17 00:00:00 2001
From: heejung0413 <acb4287@gmail.com>
Date: Thu, 4 Apr 2024 21:24:27 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84Design:=20=EB=A9=94=EC=9D=B8?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                             |  3 +--
 src/components/home/MainDesign.tsx      | 30 +++++++++++----------
 src/components/layout/parts/LogoBox.tsx |  4 +--
 src/styles/Home/home.style.ts           | 35 +++++++++++--------------
 src/styles/layout/layout.style.ts       |  2 +-
 5 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index db3db8f..7807a9e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,5 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import '@aws-amplify/ui-react/styles.css';
-import { withAuthenticator } from '@aws-amplify/ui-react';
 import { Amplify } from 'aws-amplify';
 import awsConfig from './awsConfig';
 import MainLayout from './components/layout/MainLayout';
@@ -48,4 +47,4 @@ const App = () => {
   );
 };
 
-export default withAuthenticator(App);
+export default App;
diff --git a/src/components/home/MainDesign.tsx b/src/components/home/MainDesign.tsx
index e58bbc4..58a3ef8 100644
--- a/src/components/home/MainDesign.tsx
+++ b/src/components/home/MainDesign.tsx
@@ -4,33 +4,35 @@ import * as L from '@/styles/layout/layout.style';
 
 const MainDesign = () => {
   return (
-    <S.TopTriangleContainer>
+    <>
+      <S.TopTriangleContainer>
+        <S.TopText>
+          개인회고와 팀 회고 템플릿을 동시에 제공하는 회괴 웹페이지입니다. <br />
+          우리는 개인과 팀이 모두 발전할 수 있도록, <br />
+          과거의 경험을 효과적으로 되새기고 배우는 것을 지원합니다.
+        </S.TopText>
+        <S.BottomText>
+          과거를 회고하며 미래로 나아가는 과정을 촉진하는 의미를 가진 이름으로 <br />
+          &apos; Past&apos; (과거)와 &apos;Forward &apos;(앞으로 나아가다)를 결합하여 비전을 표현합니다.
+        </S.BottomText>
+      </S.TopTriangleContainer>
       <S.BrandContainer>
-        <img src={logo} style={{ marginTop: '150px', marginLeft: '80px', width: '300px', zIndex: '999' }} />
+        <img src={logo} style={{ paddingLeft: '80px', width: '300px' }} />
         <S.BrandTextBox>
-          <S.BrandSmallText style={{ marginLeft: '30%' }}>Moving</S.BrandSmallText>
+          <S.BrandSmallText style={{ paddingLeft: '20%' }}>Moving</S.BrandSmallText>
           <L.LogoText color="white" style={{ fontSize: '70px' }}>
             Forward
           </L.LogoText>
         </S.BrandTextBox>
         <S.BrandTextBox>
-          <S.BrandSmallText style={{ marginLeft: '45%' }}>From the</S.BrandSmallText>
+          <S.BrandSmallText style={{ paddingLeft: '45%' }}>From the</S.BrandSmallText>
           <L.LogoText color="white" style={{ fontSize: '70px' }}>
             Past
           </L.LogoText>
         </S.BrandTextBox>
         <S.StartedFreeButton>Get Started for Free</S.StartedFreeButton>
       </S.BrandContainer>
-      <S.TopText style={{ marginLeft: '70%' }}>
-        개인회고와 팀 회고 템플릿을 동시에 제공하는 회괴 웹페이지입니다. <br />
-        우리는 개인과 팀이 모두 발전할 수 있도록, <br />
-        과거의 경험을 효과적으로 되새기고 배우는 것을 지원합니다.
-      </S.TopText>
-      <S.BottomText>
-        과거를 회고하며 미래로 나아가는 과정을 촉진하는 의미를 가진 이름으로 <br />
-        &apos; Past&apos; (과거)와 &apos;Forward &apos;(앞으로 나아가다)를 결합하여 비전을 표현합니다.
-      </S.BottomText>
-    </S.TopTriangleContainer>
+    </>
   );
 };
 
diff --git a/src/components/layout/parts/LogoBox.tsx b/src/components/layout/parts/LogoBox.tsx
index c7e3ff3..649cf55 100644
--- a/src/components/layout/parts/LogoBox.tsx
+++ b/src/components/layout/parts/LogoBox.tsx
@@ -2,12 +2,12 @@ import Logo from '@/../public/logo.svg';
 import * as S from '@/styles/layout/layout.style';
 const LogoBox = () => {
   return (
-    <S.LogoBox>
+    <>
       <S.LogoText color="brand" href="/#">
         <img src={Logo} />
         Past Forward
       </S.LogoText>
-    </S.LogoBox>
+    </>
   );
 };
 
diff --git a/src/styles/Home/home.style.ts b/src/styles/Home/home.style.ts
index 91567b8..552ea79 100644
--- a/src/styles/Home/home.style.ts
+++ b/src/styles/Home/home.style.ts
@@ -1,53 +1,50 @@
 import styled from 'styled-components';
 
-export const TopTriangleContainer = styled.div`
-  position: relative;
-  background-color: white;
-  min-width: 1200px;
-  height: 1000px;
-`;
-
 export const TopText = styled.p`
-  margin-top: 100px;
-  margin-left: 800px;
+  margin-top: 50px;
+  margin-left: 55%;
   color: #111b47;
 `;
 
 export const BottomText = styled.p`
-  margin-top: 400px;
-  margin-left: 100px;
+  margin-top: 30%;
+  margin-left: 5%;
   color: #111b47;
 `;
 
 export const BrandContainer = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 800px;
-  clip-path: polygon(0 49%, 0 0, 100% 47%, 100% 100%);
+  clip-path: polygon(0 0, 100% 48%, 100% 100%, 0 56%);
   background: rgb(2, 0, 36);
   background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(28, 28, 101, 1) 37%, rgba(36, 123, 218, 1) 100%);
+  padding: 10% 5%;
 `;
 
 export const BrandSmallText = styled.p`
   color: white;
   font-size: 40px;
-  margin-top: 40px;
-  margin-right: 10px;
+  padding-top: 50px;
 `;
 
 export const BrandTextBox = styled.div`
   display: flex;
-  flex-direction: row;
 `;
 
 export const StartedFreeButton = styled.button`
   background-color: white;
   color: #111b47;
   font-size: 30px;
-  padding: 10px 20px;
+  padding: 10px 40px;
   margin-left: 70%;
   border-radius: 10px;
   &:hover {
     background-color: #ababab;
   }
 `;
+export const TopTriangleContainer = styled.div`
+  position: absolute;
+  width: 100%;
+`;
+
+export const Container = styled.div`
+  margin: 0 auto;
+`;
diff --git a/src/styles/layout/layout.style.ts b/src/styles/layout/layout.style.ts
index 0a76fc4..101bc8c 100644
--- a/src/styles/layout/layout.style.ts
+++ b/src/styles/layout/layout.style.ts
@@ -88,7 +88,7 @@ export const LogoText = styled.a<ColorProps>`
   font-size: 30px;
   font-weight: bold;
   border: 20px;
-  padding: 10px 5px;
+  padding: 10px 20px;
   text-decoration: none;
   padding-top: 10px;
 `;