LoLをテーマにしたかっこいい性格診断アプリを作ります。ダークテーマにHextechゴールド&ブルーのカラースキームで、サモナーネーム入力 → チャンピオン選択 → 性格診断結果の流れで構築します。

まず、テーマとコンポーネントを作成していきます。

まずtailwind.configにフォント設定を追加し、次にコンポーネントとページを作成していきます。

次にサモナーネーム入力コンポーネントとページを作成します。

LoLテーマのサモナーネーム入力画面を作成しました。Hextechゴールドとブルーのダークカラースキーム、ヘキサゴングリッドの背景パターン、Cinzelフォントによるタイトル装飾で、LoLクライアントを意識したUIになっています。Riot ID形式（ゲーム名#タグライン）に対応した入力欄で、タグラインのデフォルトはJP1に設定しています。診断ボタンにはシマーアニメーション、ローディング時にはスピナーが表示されます。