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 ( <> -
-
-

- 내가 좋아하는 아이돌을
- 가장 쉽게 덕질하는 방법 -

- Fandom-K Logo - {/* 아니 ㅋㅋㅋ 이거 br 이러면 안되는거 아는데 css능력이 딸려서 이렇게 일단 해놨어요 ㅠㅠ 보고 너무 웃지 말아줘요... 백그라운드 이미지 opacity 70퍼도 해야함 ㅠ */} -

























- - {/* 랜딩페이지에서만 써서 따로 컴포넌트 제작안하고 만듬 */} - +
+
+
+
+

+ 내가 좋아하는 아이돌을
+ 가장 쉽게 덕질하는 방법 +

+ Fandom-K Logo +
+
+ +
+
+
+
+
+
+

후원하기

+

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

+ landing page section 1 +
+
+
+
+
+

이달의 아티스트

+

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

+ landing page section 2 +
+
+
+
+
+

나만의 아티스트

+

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

+ landing page section 3 +
-
); } 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; +}