DevKnow SaaS 랜딩 페이지

기존 앱 스크린샷을 바탕으로 히어로 CTA, 제품 목업, 내비게이션, 기능 카드가 포함된 세련된 일본어 SaaS 랜딩 페이지를 생성합니다.

프롬프트

REFERENCE_0 을 제품 UI 스크린샷으로 사용하여 DevKnow 를 위한 세련된 일본어 SaaS 랜딩 페이지로 변환하세요. 앱 스크린샷을 알아볼 수 있게 유지하되, 히어로 섹션 오른쪽의 둥근 브라우저/목업 미리보기 안에 배치하고, 약간 축소한 뒤 부드러운 그림자와 배경에 은은한 보라색 추상 선/그라데이션 액센트를 추가하세요. 레이아웃: 흰색 배경과 보라색 브랜드 액센트를 사용한 깔끔한 데스크톱 랜딩 페이지를 만드세요. 상단 내비게이션 바에는 왼쪽에 기존 로고/이름을 넣고, 중앙에는 「特徴」, 「使い方」, 「料金」, 「アップデート」, 「よくある質問」이라는 5개의 메뉴 링크를 배치하며, 오른쪽에는 「ログイン」과 보라색 CTA 버튼인 「無料で始める →」를 추가하세요. 히어로 섹션: 왼쪽에는 「AI・個人開発の最新ニュースを毎日お届け」라고 적힌 작은 둥근 배지를 추가하세요. 그 아래에 굵은 일본어 헤드라인 開発の「今」を、毎日あなたのもとへ。 을 넣고, 「あなたのもとへ」 문구는 보라색으로 강조하세요. 그 아래에는 설명 문구 DevKnow は、AI・テック・個人開発に関する最新情報を毎日厳選してお届けするニュースアプリです。 를 추가하세요. 두 개의 히어로 버튼을 배치하세요: 보라색 기본 버튼 「無料で始める →」와 흰색 보조 버튼 「使い方を見る」. 버튼 아래에는 작은 보라색 체크 아이콘과 함께 3개의 신뢰 포인트 「登録不要で始める」, 「いつでも解約OK」, 「Webブラウザで利用可能」를 추가하세요. 기능 섹션: 히어로 섹션 아래에 보라색으로 중앙 정렬된 섹션 라벨 “FEATURES”와 헤딩 「DevKnow でできること」를 추가하세요. 부드러운 그림자와 보라색 아이콘이 포함된 둥근 기능 카드 4개를 한 줄로 만드세요: 1) 번개 아이콘, 제목 「毎日の厳選ニュース」, 설명 「AI・テック・個人開発の最新ニュースを毎日厳選してお届けします。」; 2) 쌓인 레이어 아이콘, 제목 「カテゴリで簡単に検索」, 설명 「興味のあるカテゴリを選んで、必要な情報にすぐアクセス。」; 3) 북마크 아이콘, 제목 「保存してあとで読む」, 설명 「気になるニュースを保存して、あとでゆっくり読めます。」; 4) 벨 아이콘, 제목 「通知で見逃さない」, 설명 「重要なニュースは通知でお知らせ。トレンドを逃しません。」 스타일 제약: 단순한 앱 스크린샷이 아닌 현대적이고 완성도 높은 랜딩 페이지처럼 보이게 하세요. 넉넉한 여백, 둥근 모서리, 은은한 그림자, 보라색 그라데이션 버튼, 깔끔한 일본어 타이포그래피를 사용하고, 구성된 랜딩 페이지 외부의 불필요한 요소는 제거하세요. 참조된 앱 UI 내용은 보이게 하되, 랜딩 페이지 디자인보다 부차적인 요소로 유지하세요.