diff --git a/public/landing/image142.png b/public/landing/image142.png new file mode 100644 index 00000000..3a44a572 Binary files /dev/null and b/public/landing/image142.png differ diff --git a/public/landing/image152.png b/public/landing/image152.png new file mode 100644 index 00000000..b405148a Binary files /dev/null and b/public/landing/image152.png differ diff --git a/public/landing/image153.png b/public/landing/image153.png new file mode 100644 index 00000000..9206bc3e Binary files /dev/null and b/public/landing/image153.png differ diff --git a/public/landing/image154.png b/public/landing/image154.png new file mode 100644 index 00000000..0fe1a225 Binary files /dev/null and b/public/landing/image154.png differ diff --git a/public/landing/image155.png b/public/landing/image155.png new file mode 100644 index 00000000..8b2662ce Binary files /dev/null and b/public/landing/image155.png differ diff --git a/public/landing/image156.png b/public/landing/image156.png new file mode 100644 index 00000000..adb76ec7 Binary files /dev/null and b/public/landing/image156.png differ diff --git a/public/landing/image157.png b/public/landing/image157.png new file mode 100644 index 00000000..104da8a1 Binary files /dev/null and b/public/landing/image157.png differ diff --git a/public/logo-title.svg b/public/logo-title.svg new file mode 100644 index 00000000..ca75de0b --- /dev/null +++ b/public/logo-title.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/logo.svg b/public/logo.svg index ca75de0b..5848711f 100644 --- a/public/logo.svg +++ b/public/logo.svg @@ -1,12 +1,12 @@ - - - - - - - - - - - + + + + + + + + + + + diff --git a/src/app/landing/components/Badge.tsx b/src/app/landing/components/Badge.tsx new file mode 100644 index 00000000..5af05b0d --- /dev/null +++ b/src/app/landing/components/Badge.tsx @@ -0,0 +1,25 @@ +import { cn } from '@/utils'; +import { ComponentProps } from 'react'; +import { match } from 'ts-pattern'; + +interface BadgeProps extends ComponentProps<'div'> { + variant?: 'A' | 'B'; +} + +export function Badge({ variant = 'A', className, ...restProps }: BadgeProps) { + const paddingClassName = match(variant) + .with('A', () => 'py-[12px] px-[20px]') + .with('B', () => 'py-[2px] px-[11px]') + .exhaustive(); + + return ( +
+ ); +} diff --git a/src/app/landing/containers/FirstSection/FirstSection.tsx b/src/app/landing/containers/FirstSection/FirstSection.tsx new file mode 100644 index 00000000..7ee7aac8 --- /dev/null +++ b/src/app/landing/containers/FirstSection/FirstSection.tsx @@ -0,0 +1,18 @@ +import { Spacing } from '@/system/utils/Spacing'; +import { DownArrow } from './components/DownArrow'; + +export function FirstSection() { + return ( +
+ 아.. 그때 써놓은 자소서 항목 어딨더라? + + + {`취준 중 모으는 수많은 정보들, 막상 필요할 때\n어디 있었는지 찾기 힘들었던 경험 있으셨나요?`} + + + + + +
+ ); +} diff --git a/src/app/landing/containers/FirstSection/components/DownArrow.tsx b/src/app/landing/containers/FirstSection/components/DownArrow.tsx new file mode 100644 index 00000000..9685168f --- /dev/null +++ b/src/app/landing/containers/FirstSection/components/DownArrow.tsx @@ -0,0 +1,25 @@ +'use client'; + +import { motion } from 'framer-motion'; + +export function DownArrow() { + return ( + + SCROLL + + + + + + + + ); +} diff --git a/src/app/landing/containers/Footer/Footer.tsx b/src/app/landing/containers/Footer/Footer.tsx new file mode 100644 index 00000000..20e8cb50 --- /dev/null +++ b/src/app/landing/containers/Footer/Footer.tsx @@ -0,0 +1,30 @@ +import { TouchButton } from '@/components/TouchButton'; +import { Spacing } from '@/system/utils/Spacing'; +import { NoteIcon } from './components/NoteIcon'; +import { PencilIcon } from './components/PencilIcon'; +import { CloverIcon } from './components/CloverIcon'; +import { TitleIcon } from './components/TitleIcon'; + +export function Footer() { + return ( + + ); +} diff --git a/src/app/landing/containers/Footer/components/CloverIcon.tsx b/src/app/landing/containers/Footer/components/CloverIcon.tsx new file mode 100644 index 00000000..7c04e3dc --- /dev/null +++ b/src/app/landing/containers/Footer/components/CloverIcon.tsx @@ -0,0 +1,37 @@ +export function CloverIcon() { + return ( + + + + + + + + + ); +} diff --git a/src/app/landing/containers/Footer/components/NoteIcon.tsx b/src/app/landing/containers/Footer/components/NoteIcon.tsx new file mode 100644 index 00000000..d2c84eac --- /dev/null +++ b/src/app/landing/containers/Footer/components/NoteIcon.tsx @@ -0,0 +1,10 @@ +export function NoteIcon() { + return ( + + + + + + + ); +} diff --git a/src/app/landing/containers/Footer/components/PencilIcon.tsx b/src/app/landing/containers/Footer/components/PencilIcon.tsx new file mode 100644 index 00000000..cab4cb46 --- /dev/null +++ b/src/app/landing/containers/Footer/components/PencilIcon.tsx @@ -0,0 +1,32 @@ +export function PencilIcon() { + return ( + + + + + + + + ); +} diff --git a/src/app/landing/containers/Footer/components/TitleIcon.tsx b/src/app/landing/containers/Footer/components/TitleIcon.tsx new file mode 100644 index 00000000..dd35f001 --- /dev/null +++ b/src/app/landing/containers/Footer/components/TitleIcon.tsx @@ -0,0 +1,18 @@ +export function TitleIcon() { + return ( + + + + + + + ); +} diff --git a/src/app/landing/containers/FourthSection/FourthSection.tsx b/src/app/landing/containers/FourthSection/FourthSection.tsx new file mode 100644 index 00000000..d02c49fc --- /dev/null +++ b/src/app/landing/containers/FourthSection/FourthSection.tsx @@ -0,0 +1,22 @@ +import { Tag } from '@/system/components'; +import { Spacing } from '@/system/utils/Spacing'; +import { Badge } from '../../components/Badge'; +import Image from 'next/image'; + +export function FourthSection() { + return ( +
+ 태그 검색 + + + 태그 검색으로 원하는 정보 탐색이 쉬워져요 + + + {`취준 정보를 작성하는 순간부터 태그를 등록하여\n원하는 키워드의 정보를 빠르게 찾을 수 있어요`} + +
+ +
+
+ ); +} diff --git a/src/app/landing/containers/Header.tsx b/src/app/landing/containers/Header.tsx new file mode 100644 index 00000000..29df969a --- /dev/null +++ b/src/app/landing/containers/Header.tsx @@ -0,0 +1,13 @@ +import { Logo } from '@/components/Logo'; +import { TouchButton } from '@/components/TouchButton'; + +export function Header() { + return ( +
+ + + 시작하기 + +
+ ); +} diff --git a/src/app/landing/containers/SecondSection/SecondSection.tsx b/src/app/landing/containers/SecondSection/SecondSection.tsx new file mode 100644 index 00000000..86b55b0d --- /dev/null +++ b/src/app/landing/containers/SecondSection/SecondSection.tsx @@ -0,0 +1,36 @@ +import { Spacing } from '@/system/utils/Spacing'; +import { Badge } from '../../components/Badge'; +import Image from 'next/image'; +import { TitleIcon } from '@/app/landing/containers/SecondSection/components/TitleIcon'; + +export function SecondSection() { + return ( +
+
+
+ +
+ + 여기저기 쌓여있는 내 취준 정보, 이젠 쉽게 정리해보세요! + + 취준 데이터 관리 서비스 + + +
+ +
+ + 내 정보 + + {`마스터 자소서부터 필수 면접 답변까지\n공통적으로 쓰이는 내 정보를 따로 모아놔요`} + + 자주쓰는 정보를 태그로 쉽게 분류할 수 있어요 + +
+ +
+ +
+
+ ); +} diff --git a/src/app/landing/containers/SecondSection/components/TitleIcon.tsx b/src/app/landing/containers/SecondSection/components/TitleIcon.tsx new file mode 100644 index 00000000..dd35f001 --- /dev/null +++ b/src/app/landing/containers/SecondSection/components/TitleIcon.tsx @@ -0,0 +1,18 @@ +export function TitleIcon() { + return ( + + + + + + + ); +} diff --git a/src/app/landing/containers/ThirdSection/ThridSection.tsx b/src/app/landing/containers/ThirdSection/ThridSection.tsx new file mode 100644 index 00000000..bc3cb564 --- /dev/null +++ b/src/app/landing/containers/ThirdSection/ThridSection.tsx @@ -0,0 +1,78 @@ +import { Spacing } from '@/system/utils/Spacing'; +import { Badge } from '../../components/Badge'; +import Image from 'next/image'; + +export function ThirdSection() { + return ( +
+ 내 공고 + + {`지원하고 싶은 공고가 떴나요?\n공고 폴더를 만들어 효율적으로 지원 현황을 관리해요`} + +
+
+
+ 1 + + + {`추가한 공고들을 분기별로 확인하고\n공고 일정에 맞춰 리마인드 알림까지!\n`} + 효율적으로 내 공고별 정보를 관리해요 + +
+ + + +
+ +
+
+ +
+
+
+ + + +
+
+
+ +
+ + + +
+ +
+ 2 + + + + + {`미리 모아둔 내 정보들을 단계별로 분류해\n`} + 공고 진행상황에 맞춰 빠른 파악이 가능해요 + +
+ + +
+ 3 + +
+
+ 내 공고 ‘팀네이버 2024 디자이...’ 폴더로 복사 중 +
+
+ + + {`필요한 정보만 `} + 드래그 앤 드롭 + {`으로\n간단하게 복사해서 모아요`} + +
+
+
+
+
+ ); +} diff --git a/src/app/landing/page.tsx b/src/app/landing/page.tsx new file mode 100644 index 00000000..077b355e --- /dev/null +++ b/src/app/landing/page.tsx @@ -0,0 +1,19 @@ +import { FirstSection } from './containers/FirstSection/FirstSection'; +import { Footer } from './containers/Footer/Footer'; +import { FourthSection } from './containers/FourthSection/FourthSection'; +import { Header } from './containers/Header'; +import { SecondSection } from './containers/SecondSection/SecondSection'; +import { ThirdSection } from './containers/ThirdSection/ThridSection'; + +export default function Landing() { + return ( + <> +
+ + + + +