diff --git a/src/assets/image/landing-1-1.png b/src/assets/image/landing-1-1.png
new file mode 100755
index 0000000..1b290c3
Binary files /dev/null and b/src/assets/image/landing-1-1.png differ
diff --git a/src/assets/image/landing-bg.png b/src/assets/image/landing-bg.png
index 7ffa8a0..e1b6422 100644
Binary files a/src/assets/image/landing-bg.png and b/src/assets/image/landing-bg.png differ
diff --git a/src/assets/image/landing-bottom.png b/src/assets/image/landing-bottom.png
new file mode 100644
index 0000000..bb90547
Binary files /dev/null and b/src/assets/image/landing-bottom.png differ
diff --git a/src/assets/image/landing2-1.png b/src/assets/image/landing2-1.png
new file mode 100755
index 0000000..1c67ab0
Binary files /dev/null and b/src/assets/image/landing2-1.png differ
diff --git a/src/assets/image/landing3-1.png b/src/assets/image/landing3-1.png
new file mode 100755
index 0000000..293f42c
Binary files /dev/null and b/src/assets/image/landing3-1.png differ
diff --git a/src/pages/Landing/LandingPage.jsx b/src/pages/Landing/LandingPage.jsx
index d8bd6d4..ab96b78 100644
--- a/src/pages/Landing/LandingPage.jsx
+++ b/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 (
<>
-
-
-
- 내가 좋아하는 아이돌을
- 가장 쉽게 덕질하는 방법
-
-

- {/* 아니 ㅋㅋㅋ 이거 br 이러면 안되는거 아는데 css능력이 딸려서 이렇게 일단 해놨어요 ㅠㅠ 보고 너무 웃지 말아줘요... 백그라운드 이미지 opacity 70퍼도 해야함 ㅠ */}
-
-
- {/* 랜딩페이지에서만 써서 따로 컴포넌트 제작안하고 만듬 */}
-
+
+
+
+
+
+ 내가 좋아하는 아이돌을
+ 가장 쉽게 덕질하는 방법
+
+

+
+
+
+
+
+
+
+
+
+
후원하기
+
+ 좋아하는 아이돌에게
+
+ 쉽게 조공해 보세요
+
+

+
+
+
+
+
+
이달의 아티스트
+
+ 내 아티스트에게 1등의
+
+ 영예를 선물하세요
+
+

+
+
+
+
+
+
나만의 아티스트
+
+ 좋아하는 아티스트들의
+
+ 소식을 모아보세요
+
+

+
-
>
);
}
diff --git a/src/pages/Landing/LandingPage.scss b/src/pages/Landing/LandingPage.scss
index cde555c..10f0b84 100644
--- a/src/pages/Landing/LandingPage.scss
+++ b/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;
+}