✨Feat: 재승 - 랜딩 페이지 밑에 섹션들 구현

src/pages/Landing/LandingPage.jsx

@@ -2,6 +2,10 @@ import { useNavigate } from 'react-router-dom';
 import './LandingPage.scss';
 import logo from '../../assets/image/logo/fandom-klogo.svg';
 import bg from '../../assets/image/landing-bg.png';
+import landing1_1_img from '../../assets/image/landing-1-1.png';
+import landing2_1_img from '../../assets/image/landing2-1.png';
+import landing3_1_img from '../../assets/image/landing3-1.png';
+import newBg from '../../assets/image/landing-bottom.png';
 
 function LandingPage() {
   const navigate = useNavigate();
@@ -12,22 +16,68 @@ function LandingPage() {
 
   return (
     <>
-    <div className="landing" style={{ backgroundImage: `url(${bg})` }}>
-      <div className="overlay">
-        <p className="subtitle">
-          내가 좋아하는 아이돌을 <br />
-          가장 <span className="highlight">쉽게 덕질</span>하는 방법
-        </p>
-        <img src={logo} alt="Fandom-K Logo" className="logo" onClick={handleStart} />
-        {/* 아니 ㅋㅋㅋ 이거 br 이러면 안되는거 아는데 css능력이 딸려서 이렇게 일단 해놨어요 ㅠㅠ 보고 너무 웃지 말아줘요... 백그라운드 이미지 opacity 70퍼도 해야함 ㅠ */}
-        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
-
-        {/* 랜딩페이지에서만 써서 따로 컴포넌트 제작안하고 만듬 */}
-        <button className="start-btn" onClick={handleStart}>
-          지금 시작하기
-        </button>
+      <div className="landing">
+        <div className="background-image main-bg" style={{ backgroundImage: `url(${bg})` }}></div>
+        <div className="overlay overlay-main">
+          <div className="landing-header">
+            <p className="subtitle">
+              내가 좋아하는 아이돌을 <br />
+              가장 <span className="highlight">쉽게 덕질</span>하는 방법
+            </p>
+            <img src={logo} alt="Fandom-K Logo" className="logo" onClick={handleStart} />
+          </div>
+          <div className="button-container">
+            <button className="start-btn" onClick={handleStart}>
+              지금 시작하기
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="landing-section-2">
+        <div
+          className="background-image bg-section-2"
+          style={{ backgroundImage: `url(${newBg})` }}
+        ></div>
+        <div className="overlay-2">
+          <p className="slogan">후원하기</p>
+          <p className="slogan-subtitle">
+            좋아하는 아이돌에게
+            <br />
+            쉽게 조공해 보세요
+          </p>
+          <img src={landing1_1_img} alt="landing page section 1" className="landing-image" />
+        </div>
+      </div>
+      <div className="landing-section-3">
+        <div
+          className="background-image bg-section-3"
+          style={{ backgroundImage: `url(${newBg})` }}
+        ></div>
+        <div className="overlay-3">
+          <p className="slogan">이달의 아티스트</p>
+          <p className="slogan-subtitle">
+            내 아티스트에게 1등의
+            <br />
+            영예를 선물하세요
+          </p>
+          <img src={landing2_1_img} alt="landing page section 2" className="landing-image" />
+        </div>
+      </div>
+      <div className="landing-section-4">
+        <div
+          className="background-image bg-section-4"
+          style={{ backgroundImage: `url(${newBg})` }}
+        ></div>
+        <div className="overlay-4">
+          <p className="slogan">나만의 아티스트</p>
+          <p className="slogan-subtitle">
+            좋아하는 아티스트들의
+            <br />
+            소식을 모아보세요
+          </p>
+          <img src={landing3_1_img} alt="landing page section 3" className="landing-image" />
+        </div>
       </div>
-    </div>
     </>
   );
 }

src/pages/Landing/LandingPage.scss

@@ -1,27 +1,92 @@
-.landing {
+.landing, .landing-section-2, .landing-section-3, .landing-section-4 {
   width: 100%;
-  height: 100vh;
-  background-position: center;
-  background-repeat: no-repeat;
+  min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #02000E;
+  position: relative;
+  overflow: hidden;
+}
+
+.background-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 1;
+}
+
+.main-bg {
+  background-size: contain;
+}
+
+.bg-section-2, .bg-section-3, .bg-section-4 {
+  background-size: 100% 300%;
 }
 
-.overlay {
+.bg-section-2 {
+  background-position-y: 0%;
+}
+
+.bg-section-3 {
+  background-position-y: 50%;
+}
+
+.bg-section-4 {
+  background-position-y: 100%;
+}
+
+.background-image::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 80%);
+  z-index: 2;
+}
+
+.overlay, .overlay-2, .overlay-3, .overlay-4 {
   text-align: center;
   color: white;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center; 
+  position: relative;
+  z-index: 3;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+}
+
+.landing {
+  padding-bottom: 0; 
+}
+
+.overlay-main {
+  justify-content: space-between; 
+  height: 100vh;
+  padding: 80px 20px;
+}
+
+.landing-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px; 
 }
 
 /* 텍스트 */
 .subtitle {
-  font-size: 18px;
-  margin-bottom: 16px;
+  font-size: 24px;
   line-height: 1.5;
+  margin-top: 0; 
 }
 
 .highlight {
@@ -30,11 +95,14 @@
 
 /* 로고 */
 .logo {
-  width: 280px;
-  margin: 20px 0;
+  width: 380px;
   cursor: pointer;
 }
 
+.button-container {
+  margin-bottom: 50px; 
+}
+
 /* 버튼 */
 .start-btn {
   background: linear-gradient(90deg, #ff4f85, #ff6fb1);
@@ -44,6 +112,33 @@
   color: white;
   font-size: 16px;
   font-weight: 600;
-  margin-top: 24px;
   cursor: pointer;
 }
+
+.slogan {
+  font-size: 16px;
+  font-weight: bold;
+  color: #ff4f85;
+  margin-bottom: 16px;
+}
+
+.slogan-subtitle {
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 1.5;
+  margin-bottom: 40px;
+}
+
+.landing-image {
+  width: 100%;
+  max-width: 300px;
+  border: 2px solid white;
+  border-radius: 25px;
+  box-sizing: border-box;
+}
+
+.bg-section-2::after,
+.bg-section-3::after,
+.bg-section-4::after {
+  background: none;
+}