← 갤러리로 돌아가기

스타트업 홈페이지

런치패드 — 제품 소개와 얼리 액세스 신청을 담은 다크 테마 랜딩페이지예요.

홈페이지랜딩페이지스타트업

이 앱은 데모 페이지에서 로그인 없이 바로 체험할 수 있어요. 아래 버튼으로 이동해서 더미 데이터로 주요 기능을 눌러보세요.

데모 보러 가기

🛠️ 개발 가이드

SaaS 스타트업 제품을 알리는 다크 테마 랜딩페이지 데모예요. 얼리 액세스 이메일 폼을 히어로와 하단 두 곳에 배치했어요.

기술 스택

Next.jsReactCSS 그라디언트

핵심 구현 포인트

  • CSS의 background + WebkitBackgroundClip: text로 타이틀에 그라디언트 텍스트 효과를 줬어요.
  • 이메일 정규식 검증 후에만 "신청 완료" 상태로 전환해요.
  • 같은 WaitlistForm 컴포넌트를 히어로와 하단 CTA 두 군데에서 재사용해요.

이렇게 만들면 돼요

  1. 이메일 형식을 정규식으로 검증하는 폼 컴포넌트를 만들어요.
  2. 그라디언트 텍스트 효과로 타이틀에 포인트를 줘요.
  3. 같은 폼 컴포넌트를 필요한 위치마다 재사용해요.

참고 파일

components/gallery/StartupLandingDemo.jsx