Design: 랜딩페이지 section 1,2,3 완료

TaePoong719 · Oct 15, 2023 · 8add65e · 8add65e
1 parent 59586f0
commit 8add65e
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 40 deletions.
diff --git a/src/components/CardPrev.jsx b/src/components/CardPrev.jsx
@@ -1,35 +1,25 @@
-import styled from 'styled-components'
-import { Link, useLocation } from 'react-router-dom'
+import styled, { css } from 'styled-components'
 import '../style/CardPrev.css'
 
 const CardPrev = ({ card }) => {
-  const location = useLocation()
   return (
-    <Link
-      to={`/card/${card.cardId}`}
-      className="custom-link "
-      state={{ background: location, CardAdd: false, card: card }}
-    >
-      <Container $color={card.cardColor}>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            width: '100%',
-            padding: '0 15px',
-            boxSizing: 'border-box',
-          }}
-        >
-          <CompanyImage
-            src={`${import.meta.env.BASE_URL}company/${card.company}.svg`}
-          ></CompanyImage>
-          <h3>{card.company}</h3>
-        </div>
-        <h1>{card.name}</h1>
-        <h4>{card.date}</h4>
-      </Container>
-    </Link>
+    <Container $color={card.cardColor}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          width: '100%',
+          padding: '0 15px',
+          boxSizing: 'border-box',
+        }}
+      >
+        <CompanyImage src={`${import.meta.env.BASE_URL}company/${card.company}.svg`}></CompanyImage>
+        <h3>{card.company}</h3>
+      </div>
+      <h1>{card.name}</h1>
+      <h4>{card.date}</h4>
+    </Container>
   )
 }
 

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -46,7 +46,15 @@ const Home = ({
       </HeadlineContainer>
       <CardContainer isModalOpen={isModalOpen}>
         {searchedCards.map((card) => {
-          return <CardPrev card={card} key={card.cardId} />
+          return (
+            <Link
+              to={`/card/${card.cardId}`}
+              className="custom-link "
+              state={{ background: location, CardAdd: false, card: card }}
+            >
+              <CardPrev card={card} key={card.cardId} />
+            </Link>
+          )
         })}
         <CardPrevAdd />
       </CardContainer>

diff --git a/src/pages/Landing.jsx b/src/pages/Landing.jsx
@@ -6,6 +6,7 @@ import AuthProvider from '../provider/userProvider'
 import '../style/Landing.css'
 import googleIcon from '../../public/googleIcon.svg'
 import styled from 'styled-components'
+import CardPrev from '../components/CardPrev'
 
 const Landing = () => {
   const provider = new GoogleAuthProvider()
@@ -34,41 +35,130 @@ const Landing = () => {
         <Wallpaper1 $imgsrc={`${import.meta.env.BASE_URL}landing_wallpaper1.svg`}>
           <h1 className="landing1__main-text">
             어려운 보험과 부동산,{<br />}
-            핀셋으로 중요한 정보만 쏙
+            <span className="blue">핀셋</span>으로 중요한 정보만 쏙
           </h1>
-          <h1></h1>
           <AuthButton onClick={handleAuth}>
             <img src={googleIcon} alt="google_login" />
             지금 시작하기
           </AuthButton>
         </Wallpaper1>
       </Section1>
-      <Section2></Section2>
+      <Section2>
+        <h1>
+          <span className="blue">Fin</span>ancial <span className="blue">S</span>ummary{' '}
+          <span className="blue">E</span>asy <span className="blue">T</span>ool
+        </h1>
+        <h2>
+          내가 가입한 모든 보험, 부동산 청약을 한 곳에서, <br></br>
+          핀셋과 함께라면 누구나 쉽게 확인할 수 있어요.
+        </h2>
+      </Section2>
+      <Section3>
+        <h1>
+          <span className="blue">
+            <strong>보험</strong>
+          </span>
+        </h1>
+        <h2>
+          보험 약관, <br />
+          깔끔하게 한 번에
+        </h2>
+        <p>
+          핀셋에 보험을 연결해 보세요 <br />
+          교보라이프플래닛은 물론, <br />
+          직접 보험 약관 파일을 추가할 수 있어요
+        </p>
+        <CardContainer>
+          <div className="card_1">
+            <CardPrev
+              card={{
+                name: '이륜차 상해보험',
+                date: '2023-10-05',
+                company: '교보생명',
+                cardColor: '#DF6962',
+              }}
+            />
+          </div>
+          <div className="card_2">
+            <CardPrev
+              card={{
+                name: '치아 보험',
+                date: '2023-10-13',
+                company: '교보생명',
+                cardColor: '#617797',
+              }}
+            />
+          </div>
+          <div className="card_3">
+            <CardPrev
+              card={{
+                name: '암 보험',
+                date: '2023-10-23',
+                company: '교보생명',
+                cardColor: '#B290AA',
+              }}
+            />
+          </div>
+        </CardContainer>
+      </Section3>
     </Container>
   )
 }
 
 const Container = styled.main`
   max-width: 1200px;
   margin: 0 auto;
+  letter-spacing: 2px;
+  .blue {
+    color: var(--main-color);
+  }
 `
 const Section = styled.section`
   margin: 0 auto;
-  height: 900px;
+  height: 850px;
   position: relative;
+  box-sizing: border-box;
 `
 
 const Section1 = styled(Section)`
   text-align: center;
   .landing1__main-text {
     font-size: 2.5rem;
-    margin: 150px 0 20px 0;
+    margin: 250px 0 40px 0;
     line-height: 1.8;
     font-weight: bold;
   }
 `
 
-const Section2 = styled(Section)``
+const Section2 = styled(Section)`
+  text-align: center;
+  padding-top: 100px;
+  height: 700px;
+  h1 {
+    font-size: 2.7rem;
+  }
+  h2 {
+    font-size: 1.5rem;
+  }
+`
+
+const Section3 = styled(Section)`
+  position: relative;
+  margin: 40px;
+  h1 {
+    font-size: 1.2rem;
+  }
+  h2 {
+    font-size: 2.5rem;
+  }
+  p {
+    position: absolute;
+    bottom: 150px;
+    right: 40px;
+    font-weight: bold;
+  }
+`
+
 const Wallpaper1 = styled.div`
   margin: 0 auto;
   left: 0;
@@ -77,14 +167,33 @@ const Wallpaper1 = styled.div`
   top: 0;
   position: absolute;
   background: url(${(props) => props.$imgsrc}) center no-repeat;
+  background-size: contain;
   height: 700px;
   width: 700px;
 `
+const CardContainer = styled.section`
+  letter-spacing: 0px;
+  .card_1 {
+    position: absolute;
+    top: 50px;
+    right: 50px;
+  }
+  .card_2 {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .card_3 {
+    position: absolute;
+    left: 50px;
+    bottom: 200px;
+  }
+`
 
 const AuthButton = styled.button`
   margin: 0 auto;
   display: flex;
-  align-items: center; /* 아이템들을 수평으로 중앙에 정렬 */
+  align-items: center;
   justify-content: space-between;
   border: none;
   font-weight: bold;
@@ -95,14 +204,14 @@ const AuthButton = styled.button`
   cursor: pointer;
   height: 55px;
   border-radius: 20px;
-  padding: 5px 15px; /* 양쪽 패딩을 조금 늘려서 버튼이 넓어지도록 조절합니다. */
+  padding: 5px 15px;
   text-align: center;
   background: white;
   img {
     margin-left: 10px;
-    margin-right: 10px; /* 이미지와 텍스트 사이의 간격 조절 */
-    width: 15px; /* 이미지의 너비 */
-    height: 16px; /* 이미지의 높이 */
+    margin-right: 10px;
+    width: 15px;
+    height: 16px;
   }
 `