From ba8e676e52ffb14c0d177702e9b59148bfc0813e Mon Sep 17 00:00:00 2001 From: hyunju1211 Date: Sun, 2 Feb 2025 14:03:18 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[DESIGN!]=20LandingPage=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= =?UTF-8?q?=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 69 ++++++ package.json | 1 + public/section3card-1.svg | 208 +++++++++++++++++ public/section3card-2.svg | 62 +++++ public/section3card-3.svg | 297 ++++++++++++++++++++++++ public/section3card-4.svg | 59 +++++ src/App.js | 3 +- src/components/LandingPage.css | 122 ---------- src/components/LandingPage.js | 399 +++++++++++++++++++++++++-------- src/pages/LandingPage.js | 8 - src/styles/color.ts | 2 +- 11 files changed, 1003 insertions(+), 227 deletions(-) create mode 100644 public/section3card-1.svg create mode 100644 public/section3card-2.svg create mode 100644 public/section3card-3.svg create mode 100644 public/section3card-4.svg delete mode 100644 src/components/LandingPage.css delete mode 100644 src/pages/LandingPage.js diff --git a/package-lock.json b/package-lock.json index 3bf7570..f792426 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "https-browserify": "^1.0.0", "moment": "^2.30.1", "moment-timezone": "^0.5.46", + "motion": "^12.0.6", "os-browserify": "^0.3.0", "path-browserify": "^1.0.1", "react": "^18.3.1", @@ -13011,6 +13012,33 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "12.0.6", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.0.6.tgz", + "integrity": "sha512-LmrXbXF6Vv5WCNmb+O/zn891VPZrH7XbsZgRLBROw6kFiP+iTK49gxTv2Ur3F0Tbw6+sy9BVtSqnWfMUpH+6nA==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.0.0", + "motion-utils": "^12.0.0", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -18950,6 +18978,47 @@ "node": ">= 0.8" } }, + "node_modules/motion": { + "version": "12.0.6", + "resolved": "https://registry.npmjs.org/motion/-/motion-12.0.6.tgz", + "integrity": "sha512-AzCEO0+//mPlcGiL9JaVwjddHY1cbbnvz5upHL0toqQwsPCs+hiKJ0XG5jfG0XwDtBbiSXdEqW/UTmGLwkVQ6A==", + "license": "MIT", + "dependencies": { + "framer-motion": "^12.0.6", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, + "node_modules/motion-dom": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz", + "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.0.0" + } + }, + "node_modules/motion-utils": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz", + "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/package.json b/package.json index 2247d84..fa7f5d4 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "https-browserify": "^1.0.0", "moment": "^2.30.1", "moment-timezone": "^0.5.46", + "motion": "^12.0.6", "os-browserify": "^0.3.0", "path-browserify": "^1.0.1", "react": "^18.3.1", diff --git a/public/section3card-1.svg b/public/section3card-1.svg new file mode 100644 index 0000000..8568fce --- /dev/null +++ b/public/section3card-1.svg @@ -0,0 +1,208 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/section3card-2.svg b/public/section3card-2.svg new file mode 100644 index 0000000..8566b60 --- /dev/null +++ b/public/section3card-2.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/section3card-3.svg b/public/section3card-3.svg new file mode 100644 index 0000000..dcffe8d --- /dev/null +++ b/public/section3card-3.svg @@ -0,0 +1,297 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/section3card-4.svg b/public/section3card-4.svg new file mode 100644 index 0000000..67af4ee --- /dev/null +++ b/public/section3card-4.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/App.js b/src/App.js index 8789abb..9e60980 100644 --- a/src/App.js +++ b/src/App.js @@ -9,7 +9,8 @@ import IndividualCalendar from './pages/individualCalendar'; import MyPage from './pages/MyPage'; import AccountManagement from './pages/AccountManagement'; -import LandingPage from "./pages/LandingPage"; +// import LandingPage from "./components/LandingPage"; +import LandingPage from "./components/LandingPage"; function App() { return ( diff --git a/src/components/LandingPage.css b/src/components/LandingPage.css deleted file mode 100644 index 712e42a..0000000 --- a/src/components/LandingPage.css +++ /dev/null @@ -1,122 +0,0 @@ -html, body { - margin: 0; - padding: 0; - overflow-x: hidden; - } - -.landing-page { - font-family: Arial, sans-serif; - color: #333; - line-height: 1; - display: flex; - flex-direction: column; - /* min-height: 100vh; */ - -} - - .landing-header { - background-color: #F0F4F8; - color: white; - padding: 0.8rem; - text-align: center; - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 10; - } - - main { - flex: 1 0 auto; - padding-top: 60px; /* Adjust based on your header height */ - width: 100%; - } - - .ci-logo { - height: 40px; - margin-right: 10px; - } - - .hero { - text-align: center; - } - - .service-logo { - width: 120px; - margin-bottom: 1rem; - } - - .hero h2 { - font-size: 1.8rem; - margin-bottom: 0.5rem; - } - - .cta-button { - display: inline-block; - background-color: white; - color: #4A90E2; - padding: 0.5rem 1rem; - border-radius: 20px; - border-color: white; - text-decoration: none; - } - - .hero, .problem, .features, .team { - padding: 2rem 1rem; - box-sizing: border-box; - } - - .problem-logo-div { - background-image: url('../../public/logo.svg'); - background-position: center; - background-repeat: no-repeat; - background-size: contain; - height: 200px; - margin-bottom: 50px; - } - - .problem li { - margin-bottom: 1rem; - } - - .feature-card { - background-color: white; - border-radius: 8px; - padding: 1rem; - margin-bottom: 1rem; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); - } - - .feature-icon { - font-size: 2rem; - margin-right: 0.5rem; - } - - .team-content { - background-color: white; - border-radius: 8px; - padding: 1rem; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); - } - - .landing-footer { - background-color: #4A90E2; - color: white; - text-align: center; - padding: 1rem 0.1rem; - margin-left: -10%; - width: 120%; - box-sizing: border-box; - } - - .footer-cta { - font-weight: bold; - } - - @media (min-width: 768px) { - .features { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1rem; - } - } \ No newline at end of file diff --git a/src/components/LandingPage.js b/src/components/LandingPage.js index 2f4f409..f07ecca 100644 --- a/src/components/LandingPage.js +++ b/src/components/LandingPage.js @@ -1,111 +1,320 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; -import './LandingPage.css'; - -const Header = () => ( -
- CI 로고 -
-); +import React from "react"; +import { useCallback } from "react"; + +import { useNavigate, useLocation } from 'react-router-dom'; +import { typographyVariants } from '../styles/typography.ts'; +import { colorVariants, colors } from '../styles/color.ts'; +import { cn } from '../utils/cn.js'; +import { Button } from './Button.tsx'; +import { motion } from "framer-motion"; + -const Problem = () => ( -
-
-

다들 한번쯤 이런 적 있으시죠? 😫

-

카톡에서 "언제 괜찮아요?" 무한 반복하기

-

매번 지겹게 캘린더 스크린샷 올리기

-

투표 만들고 결과 정리하느라 시간 쓰기

+ +//빠른 약속 시간 체크할 때, 언제 볼까? +const Section1 = ({navigate }) => ( +
+
+ 언제볼까 로고 +
+
빠른 약속 시간 체크할 때,
+
언제 볼까?
+
+
); +//지금까지 모임 날짜 잡느라 고생 많으셨죠? +const Section2 = () => { + const cards = [ + { + icon: "🥺", + textParts: ["카톡방에서"," 언제 괜찮아요?", "무한 반복"], + highlightIndex: 1 + }, + { + icon: "📅", + textParts: ["단체 채팅방에"," 캘린더 스크린샷", "올리기 지겨우신 분?"], + highlightIndex: 1 + }, + { + icon: "📝", + textParts: ["투표 만들고,"," 결과 정리하느라 ", "시간 낭비하셨나요?"], + highlightIndex: 2 + } + ]; + + return ( +
+
+
지금까지
+
모임 날짜 잡느라
+
고생 많으셨죠?
+
+
+ {cards.map((card, index) => ( + + ))} +
+
+ ); + }; -const FeatureCard = ({ icon, title, description }) => ( -
- {icon} -

{title}

-

{description}

-
-); + const Section2Card = ({ icon, textParts, highlightIndex }) => ( +
+
{icon}
+
+
+
+ {textParts[0]} + + {textParts[1]} + +
+ {textParts.length > 2 && ( +
+ {textParts[2]} +
+ )} +
+
+
+ ); + -const Features = () => ( -
-

이렇게 해결해 드려요! 💪

- - - - - -
+//언제볼까? 에서 이렇게 해결해드립니다! +const Section3 = () => ( +
+
+
언제볼까?에서
+
이렇게 해결해드립니다!
+
+ + + + +
); +const Section3Card = ({ title, description, imgURL }) => { + return( +
+
+
{title}
+
+
+ {description[0]} +
+ {description[1] && ( +
+ {description[1]} +
+ )} +
+
+ 언제볼까? 서비스 UI +
+ ); +} -const Hero = () => ( -
-

이제는 쉽고 빠르게 약속을 잡아보세요!

- 시작하기 -
+//팀 소개 +//여기 디자인 갈아엎어질,,,예정,,,,ㅠㅠ +const Section4 = () => ( +
+
+
+
팀 소개
+
+
저희는 이런 문제들 속에 있는 대학생입니다.
+
회의, 팀플, 동아리 활동... 매번 약속 잡기가 힘들었죠.
+
그 경험을 바탕으로 ‘언제볼까?’가 탄생하게 되었습니다.
+
+
+
+ + + + + +
+
+
); +const Section4Card = ({ name, role, profileURL,flag }) => { + const userId = profileURL.replace('@', ''); -const Team = () => ( -
-

팀 소개

-
-

약속 잡기 힘들었던 사람들이 만든 서비스

-

회의, 팀플, 동아리 활동...

-

많은 상황에서 매번 약속 잡기가 힘들었죠

-

이러한 경험을 가진 사람들이 모여

-

“언제볼까?”가 탄생하게 되었습니다.

-
-
-
-

🧑‍💻민상연 (Team Lead): BE/Infra 개발

-

👩‍💻이현주 (FE Dev): FE 개발, 배포

-

👩‍🎨이시은 (Designer): 웹 버전 디자인

-

👩‍🎨장연우 (Designer): 모바일 버전 디자인

+ // 조건에 따라 URL 설정 + const url = flag === "dev" + ? `https://github.com/${userId}` // GitHub + : `https://example.com/profile/${userId}`; // 디자인 포트폴리오 사이트? + + return ( +
+
{name}
+
{role}
+ + {profileURL} +
-
-

저희의 목표는 약속 상황의 불편함을 해결하고

-

더 많은 만남과 추억을 만들 수 있도록 돕는 것!

-
-); -const Footer = () => ( -
-

함께해요! 그래서 우리, 언제 만나볼까요? 😉

- 시작하기 -
); +} +//함께해요! 그래서 우리, 언제 볼까요? +const Section5 = ({handleScrollToTop}) => ( +
+
+
저희 팀의 목표는
+
약속 상황의 소소한 불편함을 해결하고,
+
더 많은 만남과 추억을 만들 수 있도록 돕는 것!
+
+ +
+
함께해요!
+
그래서 우리, 언제 볼까요?
+
+
+); +//연락처 탭 +const Footer = () => ( +
+
연락처정보
+
연락처정보
+
연락처정보
+
연락처정보
+
연락처정보
-const LandingPage = () => ( -
-
-
- - - -
-
-
+
); -export default LandingPage; \ No newline at end of file +const LandingPage = () => { + const navigate = useNavigate(); + + const handleScrollToTop = useCallback(() => { + let currentPosition = window.scrollY; + let start = null; + + const easeOutExpo = (t) => 1 - Math.pow(2, -10 * t); // 점점 빠르게 + + const scrollAnimation = (timestamp) => { + if (!start) start = timestamp; + let progress = (timestamp - start) / 1000; // 초 단위 변환 + let easing = easeOutExpo(progress); + + let newPosition = currentPosition * (1 - easing); // 점점 적게 스크롤 남기기 + window.scrollTo(0, newPosition); + + if (newPosition > 1) { + requestAnimationFrame(scrollAnimation); + } else { + window.scrollTo(0, 0); + + } + }; + + requestAnimationFrame(scrollAnimation); + }, []); + + return ( +
+ + + + + +
+ +
+ ); +}; + +export default LandingPage; diff --git a/src/pages/LandingPage.js b/src/pages/LandingPage.js deleted file mode 100644 index e525650..0000000 --- a/src/pages/LandingPage.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import LandingPage from '../components/LandingPage'; - -const LandingPageWrapper = () => { - return ; -}; - -export default LandingPageWrapper; \ No newline at end of file diff --git a/src/styles/color.ts b/src/styles/color.ts index 9e4eab3..9cf1e04 100644 --- a/src/styles/color.ts +++ b/src/styles/color.ts @@ -39,7 +39,7 @@ export const colors = { export const colorVariants = cva('', { variants: { color: { - 'white': 'bg-[var(--white)]', + 'white': 'text-[var(--white)]', 'gray-50': 'text-[var(--gray-50)]', 'gray-100': 'text-[var(--gray-100)]', 'gray-200': 'text-[var(--gray-200)]', From 28ada0f1331152243b6e427ce91d88004fc8f09b Mon Sep 17 00:00:00 2001 From: hyunju1211 Date: Sun, 2 Feb 2025 20:10:16 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[DESGIN]=20LandingPage=20=EB=AA=A8=EC=85=98?= =?UTF-8?q?=EA=B7=B8=EB=9E=98=ED=94=BD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 20 ++ package.json | 1 + public/upArrow.json | 1 + src/components/Button.tsx | 6 +- src/components/LandingPage.js | 476 +++++++++++++++++++++++++--------- 5 files changed, 375 insertions(+), 129 deletions(-) create mode 100644 public/upArrow.json diff --git a/package-lock.json b/package-lock.json index f792426..fd1e98f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "crypto-browserify": "^3.12.1", "firebase": "^10.13.1", "https-browserify": "^1.0.0", + "lottie-react": "^2.4.1", "moment": "^2.30.1", "moment-timezone": "^0.5.46", "motion": "^12.0.6", @@ -18212,6 +18213,25 @@ "loose-envify": "cli.js" } }, + "node_modules/lottie-react": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.4.1.tgz", + "integrity": "sha512-LQrH7jlkigIIv++wIyrOYFLHSKQpEY4zehPicL9bQsrt1rnoKRYCYgpCUe5maqylNtacy58/sQDZTkwMcTRxZw==", + "license": "MIT", + "dependencies": { + "lottie-web": "^5.10.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/lottie-web": { + "version": "5.12.2", + "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz", + "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==", + "license": "MIT" + }, "node_modules/lower-case": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", diff --git a/package.json b/package.json index fa7f5d4..6a93aee 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "crypto-browserify": "^3.12.1", "firebase": "^10.13.1", "https-browserify": "^1.0.0", + "lottie-react": "^2.4.1", "moment": "^2.30.1", "moment-timezone": "^0.5.46", "motion": "^12.0.6", diff --git a/public/upArrow.json b/public/upArrow.json new file mode 100644 index 0000000..e81f924 --- /dev/null +++ b/public/upArrow.json @@ -0,0 +1 @@ +{"assets":[],"ddd":0,"fr":60,"h":500,"ip":0,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Path 1","hd":false,"sr":1,"ks":{"a":{"a":0,"k":[71.013,-28.405]},"o":{"a":0,"k":100},"p":{"a":1,"k":[{"t":0,"s":[250,253.015],"i":{"x":0.88,"y":0.77},"o":{"x":0.5,"y":0},"ti":[0,0],"to":[0,0]},{"t":48,"s":[250,213.015],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25},"ti":[0,0],"to":[0,0]},{"t":120,"s":[250,253.015],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":121,"st":0,"bm":0,"shapes":[{"ty":"sh","hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[0,0],[71.013,-56.811],[142.026,0]]}}},{"ty":"rd","hd":false,"r":{"a":0,"k":4}},{"ty":"st","hd":false,"bm":0,"c":{"a":1,"k":[{"t":0,"s":[0.302,0.671,0.992],"i":{"x":0.88,"y":0.77},"o":{"x":0.5,"y":0}},{"t":48,"s":[0,0.529,0.988],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25}},{"t":120,"s":[0.302,0.671,0.992],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"lc":2,"lj":1,"ml":28.96,"o":{"a":1,"k":[{"t":0,"s":[100],"i":{"x":0.88,"y":0.77},"o":{"x":0.5,"y":0}},{"t":48,"s":[100],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25}},{"t":120,"s":[100],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"w":{"a":0,"k":20}}]},{"ddd":0,"ind":2,"ty":4,"nm":"Path 2","hd":false,"sr":1,"ks":{"a":{"a":0,"k":[71.013,-28.405]},"o":{"a":0,"k":100},"p":{"a":1,"k":[{"t":0,"s":[250,301.985],"i":{"x":0.88,"y":0.77},"o":{"x":0.5,"y":0},"ti":[0,0],"to":[0,0]},{"t":52.2,"s":[250,260.985],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25},"ti":[0,0],"to":[0,0]},{"t":120,"s":[250,301.985],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":121,"st":0,"bm":0,"shapes":[{"ty":"sh","hd":false,"nm":"Path 2","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[0,0],[71.013,-56.811],[142.026,0]]}}},{"ty":"rd","hd":false,"r":{"a":0,"k":4}},{"ty":"st","hd":false,"bm":0,"c":{"a":1,"k":[{"t":0,"s":[0.835,0.906,0.961],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25}},{"t":52.2,"s":[0.667,0.808,0.922],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25}},{"t":120,"s":[0.835,0.906,0.961],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"lc":2,"lj":1,"ml":28.96,"o":{"a":1,"k":[{"t":0,"s":[100],"i":{"x":0.88,"y":0.77},"o":{"x":0.5,"y":0}},{"t":52.2,"s":[100],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25}},{"t":120,"s":[100],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"w":{"a":0,"k":20}}]}],"meta":{"g":"@phase-software/lottie-exporter 0.7.0"},"nm":"","op":120,"v":"5.6.0","w":500} \ No newline at end of file diff --git a/src/components/Button.tsx b/src/components/Button.tsx index f5e8086..8b47a2a 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -157,7 +157,7 @@ export const ButtonVariants = cva( 'font-pretendard', 'whitespace-nowrap', '!transform-none', - '!hover:transform hover:transform-none', + '!hover:transform-none', !typographyVariants({ variant: 'b1-sb' }), //disabled @@ -184,8 +184,8 @@ export const ButtonVariants = cva( 'whitespace-nowrap', typographyVariants({ variant: 'b1-sb' }), `text-[var(--white)]`, - 'transform hover:transform-none', - + 'hover:transform-none', + 'hover:none' ] }, }, diff --git a/src/components/LandingPage.js b/src/components/LandingPage.js index f07ecca..5f52648 100644 --- a/src/components/LandingPage.js +++ b/src/components/LandingPage.js @@ -1,21 +1,18 @@ import React from "react"; -import { useCallback } from "react"; +import { useCallback, useEffect, useState} from "react"; +import Lottie from "lottie-react"; import { useNavigate, useLocation } from 'react-router-dom'; -import { typographyVariants } from '../styles/typography.ts'; import { colorVariants, colors } from '../styles/color.ts'; -import { cn } from '../utils/cn.js'; import { Button } from './Button.tsx'; import { motion } from "framer-motion"; - - //빠른 약속 시간 체크할 때, 언제 볼까? const Section1 = ({navigate }) => (
( flex-col bg-transparent justify-center items-center - gap-14 - h-full + gap-9 + pt-[5em] text-[30px] text-[#020202] tracking-[-0.03em] leading-[40px] text-center `}> - 언제볼까 로고 -
-
빠른 약속 시간 체크할 때,
-
언제 볼까?
-
-
); @@ -71,19 +98,41 @@ const Section2 = () => { py-14 rounded-[20px] `}> -
-
지금까지
-
모임 날짜 잡느라
-
고생 많으셨죠?
+ +
+
지금까지
+
모임 날짜 잡느라
+
고생 많으셨죠?
+
{cards.map((card, index) => ( - + + + ))}
@@ -104,13 +153,13 @@ const Section2 = () => {
{textParts[0]} - + {textParts[1]}
{textParts.length > 2 && (
- {textParts[2]} + {textParts[2]}
)}
@@ -120,43 +169,78 @@ const Section2 = () => { //언제볼까? 에서 이렇게 해결해드립니다! -const Section3 = () => ( -
-
{ + const cards = [ + { + title: "원클릭 약속방 생성", + description: ["클릭 한 번으로 약속 잡기 시작!"], + imgURL: "/section3card-1.svg" + }, + { + title: "링크 공유로 초대하기", + description: ["공유만 하면 끝, 간편한 친구 초대!"], + imgURL: "/section3card-2.svg" + }, + { + title: "실시간 겹치는 시간 체크", + description: ["모두의 시간을 한눈에 확인", "최적의 시간을 척척 찾아드려요!"], + imgURL: "/section3card-3.svg" + }, + { + title: "프라이버시 보장", + description: ["안전하게 약속 잡고 자동 삭제, 걱정 끝!"], + imgURL: "/section3card-4.svg" + } + ]; + + return ( +
-
언제볼까?에서
-
이렇게 해결해드립니다!
-
- - - - -
-); + +
+
언제볼까?에서
+
이렇게 해결해드립니다!
+
+ + {cards.map((card, index) => ( + + + + ))} + + ); +}; + + const Section3Card = ({ title, description, imgURL }) => { return(
{ + // 현재 위치에서 중심까지의 벡터 계산 + const vectorX = centerX - x; + const vectorY = centerY - y; + + // 벡터의 크기 계산 + const magnitude = Math.sqrt(vectorX * vectorX + vectorY * vectorY); + + // 이동할 거리 (예: 전체 거리의 20%) + const moveDistance = magnitude * 0.15; + + // 정규화된 벡터에 이동 거리를 곱해 최종 이동량 계산 + const moveX = (vectorX / magnitude) * moveDistance; + const moveY = (vectorY / magnitude) * moveDistance; + + return { + x: x + moveX, + y: y + moveY + }; + }; + + return(
+ flex flex-col justify-center py-10 + bg-[#0087FC] min-h-[657px] h-auto rounded-[20px]">
-
+ +
팀 소개
-
-
저희는 이런 문제들 속에 있는 대학생입니다.
-
회의, 팀플, 동아리 활동... 매번 약속 잡기가 힘들었죠.
-
그 경험을 바탕으로 ‘언제볼까?’가 탄생하게 되었습니다.
-
+ +
+
저희는 이런 문제들 속에 있는 대학생입니다.
+
회의, 팀플, 동아리 활동... 매번 약속 잡기가 힘들었죠.
+
그 경험을 바탕으로 ‘언제볼까?’가 탄생하게 되었습니다.
+
+
-
- - - - - + +
+
+ {positions.map((item, index) => { + const targetPosition = calculateMovement(item.x, item.y, index); + return( + +
+ +
+ + ); + })}
+
-); - -const Section4Card = ({ name, role, profileURL,flag }) => { - const userId = profileURL.replace('@', ''); - - // 조건에 따라 URL 설정 - const url = flag === "dev" - ? `https://github.com/${userId}` // GitHub - : `https://example.com/profile/${userId}`; // 디자인 포트폴리오 사이트? + ); +}; +const Section4Card = ({ name, role, profileURL, flag }) => { + const userId = profileURL.replace("@", ""); + const url = + flag === "dev" + ? `https://github.com/${userId}` // GitHub + : `https://www.instagram.com/${userId}`; // 디자인 포트폴리오 사이트? + return ( -
-
{name}
-
{role}
- - {profileURL} - -
+
+
+ {role} +
+ + {name} + +
+ ); + }; + //함께해요! 그래서 우리, 언제 볼까요? -const Section5 = ({handleScrollToTop}) => ( +const Section5 = ({handleScrollToTop, animationData}) => { + const messages = [ + "저희 팀의 목표는", + "약속 상황의 소소한 불편함을 해결하고,", + "더 많은 만남과 추억을 만들 수 있도록 돕는 것!" + ]; + return(
+ bg-[#FFFFF] min-h-[400px] font-pretendard pt-[19em] pb-[1em] gap-20">
-
저희 팀의 목표는
-
약속 상황의 소소한 불편함을 해결하고,
-
더 많은 만남과 추억을 만들 수 있도록 돕는 것!
-
- -
-
함께해요!
-
그래서 우리, 언제 볼까요?
+ {messages.map((message, index) => ( + + {message} + + ))}
+ +
+
함께해요!
+
그래서 우리, 언제 볼까요?
+
+ {animationData ? ( + + ):( +

Loadding...

+ )} +
+
+
-); + ); +}; //연락처 탭 const Footer = () => (