diff --git a/public/images/banner.png b/public/images/banner.png new file mode 100644 index 0000000..ff0b7f5 Binary files /dev/null and b/public/images/banner.png differ diff --git a/public/images/dashboard.png b/public/images/dashboard.png new file mode 100644 index 0000000..fc6e0a5 Binary files /dev/null and b/public/images/dashboard.png differ diff --git a/public/images/github-icon-block.svg b/public/images/github-icon-block.svg new file mode 100644 index 0000000..a8d1174 --- /dev/null +++ b/public/images/github-icon-block.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/github-icon-white.svg b/public/images/github-icon-white.svg new file mode 100644 index 0000000..f0324db --- /dev/null +++ b/public/images/github-icon-white.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/images/invite.svg b/public/images/invite.svg new file mode 100644 index 0000000..3ac203d --- /dev/null +++ b/public/images/invite.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/logo-dark2.svg b/public/images/logo-dark2.svg new file mode 100644 index 0000000..177cf4f --- /dev/null +++ b/public/images/logo-dark2.svg @@ -0,0 +1,11 @@ + +
 + + + + + + + + + diff --git a/public/images/logo-icon-dark.svg b/public/images/logo-icon-dark.svg new file mode 100644 index 0000000..3290798 --- /dev/null +++ b/public/images/logo-icon-dark.svg @@ -0,0 +1,5 @@ + +
 + + + diff --git a/public/images/logo-icon-light.svg b/public/images/logo-icon-light.svg new file mode 100644 index 0000000..ce99b6d --- /dev/null +++ b/public/images/logo-icon-light.svg @@ -0,0 +1,5 @@ + +
 + + + diff --git a/public/images/member.svg b/public/images/member.svg new file mode 100644 index 0000000..be00225 --- /dev/null +++ b/public/images/member.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/newdashboard.svg b/public/images/newdashboard.svg new file mode 100644 index 0000000..a57c502 --- /dev/null +++ b/public/images/newdashboard.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/images/todomodal.svg b/public/images/todomodal.svg new file mode 100644 index 0000000..2c1a90d --- /dev/null +++ b/public/images/todomodal.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/features/landing/components/FeatureCard.tsx b/src/app/features/landing/components/FeatureCard.tsx new file mode 100644 index 0000000..9249e45 --- /dev/null +++ b/src/app/features/landing/components/FeatureCard.tsx @@ -0,0 +1,33 @@ +import Image from 'next/image' + +import { cn } from '@/app/shared/lib/cn' + +interface FeatureCardProps { + image: string + imageAlt: string + title: string + description: string + imageClassName?: string +} + +export default function FeatureCard({ + image, + imageAlt, + title, + description, + imageClassName, +}: FeatureCardProps) { + return ( +
+
+
+ {imageAlt} +
+
+
+

{title}

+

{description}

+
+
+ ) +} diff --git a/src/app/features/landing/components/FeatureCardSection.tsx b/src/app/features/landing/components/FeatureCardSection.tsx new file mode 100644 index 0000000..2b38fae --- /dev/null +++ b/src/app/features/landing/components/FeatureCardSection.tsx @@ -0,0 +1,34 @@ +import FeatureCard from './FeatureCard' +export default function FeatureCardSection() { + return ( +
+

+ 생산성을 높이는 다양한 설정 ⚡ +

+ +
+ + + +
+
+ ) +} diff --git a/src/app/features/landing/components/Footer.tsx b/src/app/features/landing/components/Footer.tsx new file mode 100644 index 0000000..8225c45 --- /dev/null +++ b/src/app/features/landing/components/Footer.tsx @@ -0,0 +1,10 @@ +import GithubIcon from './GithubIcon' + +export default function Footer() { + return ( + + ) +} diff --git a/src/app/features/landing/components/GithubIcon.tsx b/src/app/features/landing/components/GithubIcon.tsx new file mode 100644 index 0000000..9d03a4a --- /dev/null +++ b/src/app/features/landing/components/GithubIcon.tsx @@ -0,0 +1,28 @@ +'use client' + +import { useMounted } from '@hooks/useMounted' +import Image from 'next/image' +import Link from 'next/link' +import { useTheme } from 'next-themes' + +export default function GithubIcon() { + const { resolvedTheme } = useTheme() + const mounted = useMounted() + + const isDark = resolvedTheme === 'dark' + + const src = mounted + ? isDark + ? '/images/github-icon-white.svg' + : '/images/github-icon-block.svg' + : '/images/github-icon-block.svg' // SSR fallback + + return ( + + 깃허브 바로가기 + + ) +} diff --git a/src/app/features/landing/components/Header.tsx b/src/app/features/landing/components/Header.tsx new file mode 100644 index 0000000..0c87979 --- /dev/null +++ b/src/app/features/landing/components/Header.tsx @@ -0,0 +1,20 @@ +'use client' + +import ThemeToggle from '@components/ThemeToggle' +import Link from 'next/link' + +import Logo from './Logo' +export default function Header() { + return ( +
+ +
+ ) +} diff --git a/src/app/features/landing/components/HeroSection.tsx b/src/app/features/landing/components/HeroSection.tsx new file mode 100644 index 0000000..d1385df --- /dev/null +++ b/src/app/features/landing/components/HeroSection.tsx @@ -0,0 +1,29 @@ +import Image from 'next/image' +import Link from 'next/link' + +export default function HeroSection() { + return ( +
+
+ invitations +
+ +

+ 새로운 일정 관리 CoPlan +

+ + + 로그인하기 + +
+ ) +} diff --git a/src/app/features/landing/components/Logo.tsx b/src/app/features/landing/components/Logo.tsx new file mode 100644 index 0000000..0255303 --- /dev/null +++ b/src/app/features/landing/components/Logo.tsx @@ -0,0 +1,50 @@ +'use client' + +import { useMounted } from '@hooks/useMounted' +import Image from 'next/image' +import Link from 'next/link' +import { useTheme } from 'next-themes' + +export default function Logo() { + const { resolvedTheme } = useTheme() + const mounted = useMounted() + + const isDark = resolvedTheme === 'dark' + + const mobileLogoSrc = mounted + ? isDark + ? '/images/logo-icon-dark.svg' + : '/images/logo-icon-light.svg' + : '/images/logo-icon-light.svg' + + const desktopLogoSrc = mounted + ? isDark + ? '/images/logo-dark2.svg' + : '/images/logo-light2.svg' + : '/images/logo-light2.svg' + + return ( + + {/* 모바일용 로고 */} + 모바일 로고 + + {/* 데스크탑/태블릿용 로고 */} + 일반 로고 + + ) +} diff --git a/src/app/features/landing/components/Main.tsx b/src/app/features/landing/components/Main.tsx new file mode 100644 index 0000000..4660779 --- /dev/null +++ b/src/app/features/landing/components/Main.tsx @@ -0,0 +1,15 @@ +import FeatureCardSection from './FeatureCardSection' +import HeroSection from './HeroSection' +import PointSection from './PointSection' + +export default function Main() { + return ( +
+ +
+ + +
+
+ ) +} diff --git a/src/app/features/landing/components/PointSection.tsx b/src/app/features/landing/components/PointSection.tsx new file mode 100644 index 0000000..6e7a2d6 --- /dev/null +++ b/src/app/features/landing/components/PointSection.tsx @@ -0,0 +1,43 @@ +import Image from 'next/image' + +export default function PointSection() { + return ( + <> +
+
+

Point 1

+

+ 일의 우선순위를
+ 관리하세요 +

+
+ +
+
+ 대시보드 +
+
+
+
+
+

Point 2

+

+ 해야 할 일을
+ 관리하세요 +

+
+ +
+
+ 할 일 모달 +
+
+
+ + ) +} diff --git a/src/app/globals.css b/src/app/globals.css index 71a8f3e..ef5316c 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -8,9 +8,9 @@ --font-sans: 'Pretendard', 'Noto Sans KR', sans-serif; } -html, -body { +html { height: 100%; + min-width: 375px; } body { @@ -109,3 +109,10 @@ body { .Input-readOnly { @apply w-520 cursor-pointer rounded-6 border border-[#D9D9D9] px-16 py-11 pt-14 text-14 text-[#333236] placeholder-gray-400 caret-transparent focus:border-[#44aeff] focus:outline-none dark:border-[#747474] dark:text-[#FFFFFF] dark:focus:border-[#3474a5]; } +.BG-section { + @apply bg-[#F5F5F5] dark:bg-[#2A2A2A]; +} + +.BG-card { + @apply bg-[#83C8FA] dark:bg-[#000000]; +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 2d736f6..d75e879 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,13 @@ +import Footer from './features/landing/components/Footer' +import Header from './features/landing/components/Header' +import Main from './features/landing/components/Main' + export default function Home() { return ( -
-

랜딩페이지

-
+ <> +
+
+