コンポーネントガイド

<button class="bg-accent-blue-500 hover:bg-accent-blue-700 text-white font-medium px-6 py-3 rounded-lg shadow-md hover:shadow-lg transition-all duration-200">
  プライマリボタン
</button>

---
import Card from '@/design-system/components/Card.astro';
---

<!-- 基本カード -->
<Card>
  <h3>タイトル</h3>
  <p>内容</p>
</Card>

<!-- フィーチャーカード -->
<Card variant="feature">
  <div slot="icon">
    <i class="fas fa-check"></i>
  </div>
  <h3>タイトル</h3>
  <p>内容</p>
</Card>

<!-- 画像付きカード -->
<Card variant="image" imageSrc="/image.jpg" imageAlt="説明">
  <h3>タイトル</h3>
  <p>内容</p>
</Card>

---
import Input from '@/design-system/components/Input.astro';
import Textarea from '@/design-system/components/Textarea.astro';
---

<Input
  type="text"
  id="name"
  label="お名前"
  placeholder="山田太郎"
  required
/>

<Input
  type="email"
  id="email"
  label="メールアドレス"
  placeholder="example@email.com"
  required
/>

<Textarea
  id="message"
  label="お問い合わせ内容"
  rows={4}
  required
/>

---
import Badge from '@/design-system/components/Badge.astro';
---

<Badge variant="coral">新着</Badge>
<Badge variant="accent">おすすめ</Badge>
<Badge variant="outline">限定</Badge>
<Badge variant="success">在庫あり</Badge>
<Badge variant="error">売り切れ</Badge>

---
import Alert from '@/design-system/components/Alert.astro';
---

<Alert variant="success">送信が完了しました。</Alert>
<Alert variant="error">エラーが発生しました。</Alert>
<Alert variant="info">重要なお知らせです。</Alert>
<Alert variant="warning">入力内容をご確認ください。</Alert>

---
import Section from '@/design-system/components/Section.astro';
---

<Section variant="hero" containerWidth="default">
  <h1>ヒーローセクション</h1>
  <p>メインメッセージ</p>
</Section>

<Section>
  <h2>標準セクション</h2>
  <p>コンテンツ</p>
</Section>

<Section variant="alternate" containerWidth="wide">
  <h2>交互セクション</h2>
  <p>背景色が異なるセクション</p>
</Section>

---
import Header from '@/design-system/components/Header.astro';
import NavLink from '@/design-system/components/NavLink.astro';
---

<Header logoText="サイト名" logoHref="/">
  <NavLink href="#about">About</NavLink>
  <NavLink href="#service" active>Service</NavLink>
  <NavLink href="#contact">Contact</NavLink>
</Header>