フルスタックSaaSランディングページビルダー

[製品タイプ]のランディングページを本番環境向けに構築してください。以下の仕様に従います。 フロントエンド要件: - ヒーローセクション: 魅力的な見出し[あなたの価値提案]、サブ見出し、CTAボタン - 特徴セクション: アイコン+見出し+説明形式の6つの利点 - インタラクティブな料金比較表: 3つのティア(中央のティアを強調) - ソーシャルプルーフセクション: お客様の声カードと会社ロゴ - FAQアコーディオン: 8つの一般的な反論に回答 - メールキャプチャフォーム: リアルタイム検証付き - モバイル対応デザイン(モバイル、タブレット、デスクトップのブレークポイント) - React 18、TypeScript、Tailwind CSS、Framer Motionをアニメーションに使用 バックエンド要件: - Stripe決済統合: サブスクリプション用のウェブフック処理 - ConvertKit API統合: メールリスト管理用 - NextAuth.jsによるユーザー認証(メール+Google OAuth) - ユーザーとサブスクリプション用のPostgreSQLデータベーススキーマ - APIルート: ユーザー登録、決済処理、サブスクリプション管理 成果物: - 全コンポーネントを含む完全なファイル構造 - 環境変数設定ガイド - Vercelへのデプロイ手順 - 主要なロジックを説明するコメント付きコード - 全依存関係を含むpackage.json ファイル構造から始め、各コンポーネントを体系的に構築してください。