Clasteria公式サイトを実装

[kanade1825]

概要

• 共有された Figma 正本をChrome上で確認し、緑ヘッダー、薄いミント背景、白カード、横タブ、濃緑フッターの元レイアウトへ寄せました。
• Pixelsia/pixelsia-recruit v2 の Pixelsia ロゴ + 区切り + Clasteria 表記にロックアップを統一しました。
• Clasteria Website の規約に合わせ、Nuxt UI v4 / Tailwind v4 / main.css パレット経由で実装しています。Tailwind Arbitrary Values と新規依存は追加していません。
• 既存の Home、CodingCraft、articles 一覧/詳細の機能は維持しています。

実装内容

• 共通ヘッダー/フッターから Home、プログラミング、鬼ごっこ、かくれんぼ、リーダーボード、サポート、ニュース、ログイン、購入・登録へ到達できる導線を維持しました。
• Home を暗い全面ヒーローから、Figmaに近い明るい白パネル + メインビジュアル配置へ変更しました。
• 鬼ごっこ/かくれんぼを「ページ導入 + 横タブ + ルールカード + マップカード + ランキングカード」の構成へ変更しました。
• リーダーボードをタブ、TODO検索欄、緑のテーブルヘッダーを持つ一覧レイアウトへ変更しました。
• app/components/site/PageTabs.vue を追加し、ページ内タブ表現を共通化しました。

検証

• pnpm lint
• pnpm test
• pnpm generate
• pnpm dev + Chrome実画面で Home / かくれんぼ / リーダーボードを確認

残課題

• TODO: リーダーボードのデータソース、集計期間、更新頻度、対象指標は未決です。
• TODO: サポートフォームの送信先、受付項目、通知先、個人情報の扱いは未決です。
• TODO: ログインの ID server、Google ログイン、Minecraft OTP 連携の画面分担は未決です。
• TODO: 購入・登録のプラン、課金状態、支払い方法、サブスクリプション管理の導線は未決です。
• TODO: ニュースで Pixelsia、Clasteria、Connectia を同一面で扱う範囲は未決です。
• TODO: マップ詳細ボタンの遷移先と詳細ページの仕様は未決のため、現在は無効状態です。

補足

• Figma MCP は View 権限のみでメタデータ取得ができなかったため、Chrome上のFigma実画面を根拠にレイアウトを確認しました。

[cloudflare-workers-and-pages]

Deploying pixelsia-website with    Cloudflare Pages

Latest commit:	d380a89
Status:	✅  Deploy successful!
Preview URL:	https://7069dddd.pixelsia-website-w93.pages.dev
Branch Preview URL:	https://codex-clasteria-official-sit.pixelsia-website-w93.pages.dev

View logs