ヒーロー (Hero) セクション

Hero (ヒーロー) セクションは、訪問者が最初に目にする場所です。各テーマには、カスタムアニメーション、背景、レイアウトを備えた独自の強力なヒーローデザインがあります。

テーマのバリアント

テーマ	コンポーネント	デザイン
Liquid	`HeroLiquid.astro`	アニメーションする液体のような SVG ブロブ、グラデーションのテキスト
Glass	`HeroGlass.astro`	ぼかし背景を持つすりガラスのヒーローカード
Neo	`HeroNeo.astro`	大胆なタイポグラフィ、ハイコントラスト
Luxury	`HeroLuxury.astro`	ゴールドのアクセント、プレミアムなレイアウト
Minimal	`HeroMinimal.astro`	クリーンで中央に配置され、気を散らさないデザイン
Aurora	`HeroAurora.astro`	グラデーションメッシュ、幾何学的な要素

すべてのバリアントは src/components/sections/hero/ に配置されています。

仕組み

ヒーローバリアントはそれぞれ自己完結型の Astro コンポーネントであり、以下の役割を果たします。

現在のロケールのために useTranslations() をインポートして初期化します。
テーマ固有の CSS を用いて、独自の HTML 構造をレンダリングします。
hero.title、hero.subtitle、hero.cta、hero.liveBadge などの翻訳キーを src/locales/{lang}/hero.json から読み込みます。

---
import { useTranslations } from '../../../utils/i18n';
import { getLocaleFromUrl } from '../../../utils/locale-utils';

const locale = getLocaleFromUrl(Astro.url);
const t = useTranslations(locale);
---

<section>
  <h1>{t('hero.title')}</h1>
  <p>{t('hero.subtitle')}</p>
  <a href="#explore">{t('hero.cta')}</a>
</section>

ℹ️

プロパティ (Props) なし

Hero コンポーネントは外部からのプロパティ (Props) を受け取りません。見出し、サブタイトル、または CTA (コールトゥアクション) テキストを変更するには、src/locales/ja/hero.json (または適切なロケールファイル) を編集してください。

ヒーローのカスタマイズ

特定のテーマのヒーローをカスタマイズするには：

src/components/sections/hero/Hero{Theme}.astro を開きます。
必要に応じて HTML 構造、クラス、またはアニメーションを変更します。
CSS を変更する場合は、src/styles/components/hero/Hero{Theme}.css を編集します。
テキストを変更する場合は、src/locales/{lang}/hero.json を編集します。

テーマのバリアント

仕組み

ヒーローのカスタマイズ

目次