セクションコンポーネントは、各テーマページの構成要素です。各テーマページは12以上のセクションで構成されており、それぞれにテーマごとの専用バリアントがあります。
利用可能なセクション
ヒーロー (Hero)
テーマ固有のアニメーションを備えたフルスクリーンのランディングセクション。
について (About)
会社や製品の紹介セクション。
特徴 (Features)
グリッド、リスト、カードを使用した製品機能の紹介。
ポートフォリオ (Portfolio)
プロジェクトのギャラリーとショーケース。
料金体系 (Pricing)
プランと機能比較を含む料金表。
お客様の声 (Testimonials)
社会的証明と顧客のレビュー。
よくある質問 (FAQ)
アコーディオンUIを使用したよくある質問。
コールトゥアクション (CTA)
コンバージョンを促進するためのコールトゥアクションセクション。
お問い合わせ (Contact)
Valibotバリデーションを備えたお問い合わせフォーム。
ナビゲーションバー (Navbar)
テーマ固有のヘッダーとナビゲーションバー。
フッター (Footer)
リンク、SNS、ブランディングを含むサイトのフッター。
仕組み
各セクションには、各テーマ（Liquid、Glass、Neo、Luxury、Minimal、Aurora）に対応する6つのテーマバリアントがあります。src/pages/[theme].astro の動的ページは、コンポーネントマップを使用して正しいバリアントをレンダリングします：
---// [theme].astro からの簡略化const componentMap = { liquid: { Hero: HeroLiquid, About: AboutLiquid, ... }, glass: { Hero: HeroGlass, About: AboutGlass, ... }, // neo, luxury, minimal, aurora...};
const components = componentMap[themeId];---
<components.Hero /><components.About /><components.Features />ℹ️
外部Propsなし
セクションコンポーネントはPropsを受け取りません。すべてのテキストコンテンツは、src/locales/{lang}/{section}.json から useTranslations() を介して内部的にロードされます。任意のセクションのコンテンツを変更するには、対応するロケールのJSONファイルを編集してください。
ファイル構造
各セクションは、一貫したディレクトリパターンに従っています：
src/components/sections/{section}/├── {Section}Liquid.astro├── {Section}Glass.astro├── {Section}Neo.astro├── {Section}Luxury.astro├── {Section}Minimal.astro└── {Section}Aurora.astro各セクションのCSSは src/styles/components/{section}/ にあります。