Next.js SaaSダッシュボードとオンボーディングフロー

以下の指示に厳密に従ってください： 1. next.jsとshadcnをセットアップする 2. サインアップページとログインページを備えたシンプルなsupabase認証を追加する 3. 以下のプロンプトに従ってフロントエンドをセットアップする： <frontend prompt> <summary_title> 以下の要件で詳細なコンポーネントを作成する： 1. クライアントサイドコンポーネントには'use client'ディレクティブを使用する 2. レスポンシブデザインにはTailwind CSSユーティリティクラスを使用する 3. アイコンにはLucide React（lucide-reactパッケージ）を使用する。特に指定がない限り、他のUIライブラリは使用しない 4. 適切な場合はhttps://t.co/kmBMYKBzp0のストック写真を使用する。存在が確認できている有効なURLのみを使用する 5. next.config.jsのimage remotePatternsを設定して、https://t.co/kmBMYKBzp0のストック写真を有効にする 6. すべてのページに必要なナビゲーション項目をラップするルートlayout.tsxページを作成する 7. ナビゲーション要素の項目を適切な場所（左サイドバー、トップヘッダー）に実装する必要がある 8. 必要なグリッドレイアウトを正確に実装する 9. 適切なインポート方法に従う： - @/パスエイリアスを使用する - コンポーネントのインポートを整理する - 現在のsrc/app/page.tsxを新しい包括的なコードで更新する - ルートルート（page.tsx）の処理を忘れない - 停止する前にプロンプト全体を完了する必要がある オンボーディングフローを備えたモダンなSaaSダッシュボード </summary_title> <image_analysis> 1. ナビゲーション要素： - 左サイドバー：Dashboard、Content、Community、Marketing、Analytics、Sales、Storefront - 下部のセカンダリナビゲーション：Settings、Help - サイドバー上部のユーザープロフィールセクション 2. レイアウトコンポーネント： - サイドバー幅：240px - メインコンテンツエリア：フレキシブル幅 - カードコンテナ：約500px幅 - パディング：24px（全体で一貫） - 32pxマージンのレスポンシブコンテナ 3. コンテンツセクション： - ユーザーへの挨拶を含むウェルカムヘッダー - はじめにチェックリスト（4ステップ） - ビデオ通話予約カード - ページビルダープレビューカード - 完了タスクの進捗インジケーター 4. インタラクティブコントロール： - 完了状態付きのチェックリスト項目 - 「Schedule time」および「Try it out」プライマリボタン - 「Learn more」テキストリンク - ホバー状態付きのナビゲーションメニュー項目 - ページビルダーのリッチテキストエディターコントロール 5. カラー： - プライマリブルー：#0066FF（ボタン） - 背景グレー：#F5F5F7 - テキストダーク：#1A1A1A - サクセスグリーン：#34C759 - アバター用アクセントカラー 6. グリッド/レイアウト構造： - メインコンテンツのシングルカラムレイアウト - カード間の24pxギャップ - フレキシブル幅コンテナ - 角丸（12px）のカードグリッドシステム </image_analysis> <development_planning> 1. プロジェクト構造： ``` src/ ├── components/ │ ├── layout/ │ │ ├── Sidebar │ │ ├── Header │ │ └── MainContent │ ├── features/ │ │ ├── Onboarding │ │ ├── VideoCall │ │ └── PageBuilder │ └── shared/ ├── assets/ ├── styles/ ├── hooks/ └── utils/ ``` 2. 主要機能： - オンボーディングチェックリストシステム - ビデオ通話スケジュール - ページビルダーインターフェース - 進捗トラッキング - ユーザーダッシュボード 3. 状態管理： ```typescript interface AppState { ├── onboarding: { │ ├── steps: Step[] │ ├── completedSteps: string[] │ └── currentStep: number ├── user: { │ ├── profile: UserProfile │ ├── preferences: UserPreferences │ └── settings: UserSettings } ``` 4. ルート： ```typescript const routes = [ ├── '/dashboard', ├── '/content/*', ├── '/community/*', ├── '/marketing/*', ├── '/analytics/*', ├── '/sales/*', └── '/storefront/*' ] ``` 5. コンポーネントアーキテクチャ： - DashboardLayout（親） - OnboardingCard（機能） - VideoCallCard（機能） - PageBuilderPreview（機能） - NavigationMenu（共有） - ActionButton（共有） 6. レスポンシブブレークポイント： ```scss $breakpoints: ( ├── 'mobile': 320px, ├── 'tablet': 768px, ├── 'desktop': 1024px, └── 'wide': 1440px ); ``` </development_planning> </frontend prompt> 4. 以下のプロンプトに従ってページ構造をセットアップする <page structure prompt> ナビゲーションメニュー項目に基づくNext.jsルート構造（メインルートを除く）。すべてのルートをコンポーネントでラップすることを確認する： ルート： - /dashboard - /content - /community - /marketing - /analytics - /sales - /storefront - /settings - /help ページ実装： /dashboard: コア目的：主要メトリクスの概要と主要機能へのクイックアクセスを提供する 主要コンポーネント - 統計カードグリッド - 最近のアクティビティフィード - クイックアクションボタン - パフォーマンスグラフ - タスク通知 レイアウト構造 - 12カラムシステムのグリッドベースレイアウト - モバイルでスタックするレスポンシブカード - 主要メトリクス付きのスティッキーヘッダー /content: コア目的：すべてのコンテンツアセットを管理および整理する 主要コンポーネント - コンテンツリスト /グリッドビュートグル - 検索およびフィルターシステム - コンテンツエディター - メディアライブラリ - バージョン履歴 レイアウト構造： - サイドバーナビゲーション付きの分割ビュー - 無限スクロール付きのメインコンテンツエリア - 編集用のモーダルオーバーレイ /community: コア目的：ユーザーインタラクションとコミュニティ機能を管理する 主要コンポーネント - メンバーディレクトリ - ディスカッションボード - モデレーションツール - ユーザーレポート - アクティビティログ レイアウト構造 - 3カラムレイアウト - 折りたたみ可能なサイドバー - スクロール可能なメインコンテンツエリア /marketing: コア目的：キャンペーン管理とマーケティングツール 主要コンポーネント - キャンペーンクリエイター - メールテンプレートビルダー - アナリティクスダッシュボード - オーディエンスセグメント - A/Bテストツール レイアウト構造 - タブ付きインターフェース - 編集用の分割ビュー - プレビューペイン /analytics: コア目的：データ可視化とレポート 主要コンポーネント - インタラクティブチャート - カスタムレポートビルダー - データエクスポートツール - メトリクス比較 - 日付範囲セレクター レイアウト構造 - 全幅グラフ - スティッキーフィルターヘッダー - レスポンシブデータテーブル /sales: コア目的：セールスパイプラインと注文管理 主要コンポーネント - 注文ダッシュボード - 顧客プロフィール - 請求書ジェネレーター - 支払い処理 - セールスレポート レイアウト構造 - カンバンボードビュー - リストビューオプション - 詳細パネル /storefront: コア目的：Eコマースストア管理 主要コンポーネント - 商品マネージャー - 在庫管理 - ストアカスタマイザー - 注文フルフィルメント - 配送設定 レイアウト構造 - グリッドベースの商品レイアウト - クイック編集サイドバー - プレビューモード /settings: コア目的：システム設定とユーザー設定 主要コンポーネント - アカウント設定 - システム設定 - 統合セットアップ - ユーザー管理 - セキュリティ設定 レイアウト構造 - カテゴリ別設定パネル - フォームベースレイアウト - 確認モーダル /help: コア目的：サポートドキュメントと支援 主要コンポーネント - ドキュメント検索 - FAQセクション - サポートへの問い合わせ - チュートリアルビデオ - ナレッジベース レイアウト構造 - 検索可能なサイドバー - 記事ビュー - クイックリンクパネル レイアウト： AdminLayout: - 適用ルート：/help以外のすべて - 主要コンポーネント - トップナビゲーションバー - サイドバーナビゲーション - ユーザープロフィールメニュー - 通知 - パンくずリスト - レスポンシブ動作 - モバイルで折りたたみ可能なサイドバー - 小さい画面ではナビゲーション用のドロップダウンメニュー - 調整可能なコンテンツ幅 HelpLayout - 適用ルート：/help - 主要コンポーネント - ドキュメンテーションサイドバー - 検索バー - サポートチャットウィジェット - 管理画面に戻るボタン - レスポンシブ動作 - モバイルでは全幅 - サポート用のフローティングアクションボタン - 折りたたみ可能なセクション </page structure prompt>