コンポーネント

varshaには、マーケティングサイトを構築するための再利用可能なコンポーネントがいくつか付属しています。このリファレンスでは、各コンポーネントのプロパティと使用方法について説明します。

MarketingLayout

すべてのマーケティングページのルートレイアウト。ヘッダー、フッター、テーマスイッチャー、SEOメタタグ、帰属表示を提供します。

---
import MarketingLayout from '../components/MarketingLayout.astro';
---

<MarketingLayout
  title="Page Title"
  description="Page description for SEO."
  canonicalPath="/page-path/"
  image="/custom-og.png"
>
  <!-- ページコンテンツ -->
</MarketingLayout>

プロパティ	型	必須	説明
title	string	はい	ページタイトル
description	string	はい	メタディスクリプション
canonicalPath	string	はい	正規URLパス
image	string	いいえ	カスタムOG画像のパス

BuiltWith

「Built with varsha by myndlabs」の帰属バッジを表示します。このコンポーネントはMarketingLayoutによって自動的に含まれます。

---
import BuiltWith from '../components/BuiltWith.astro';
---

<BuiltWith />

重要： このコンポーネントは削除しないでください。これはvarshaの使用条件で必要な帰属表示であり、https://myndlabs.techにリンクする必要があります。

Hero.astro

ランディングページ用のヒーローセクションコンポーネント。

---
import Hero from '../components/Hero.astro';
---

<Hero
  title="Build beautiful websites fast."
  subtitle="A premium Astro starter with themes, docs, and blog."
  primaryCta={{ text: "Get started", href: "/docs/install/" }}
  secondaryCta={{ text: "View on GitHub", href: "https://github.com/yethikrishna/web-ui-template" }}
/>

プロパティ	型	説明
title	string	メインのヒーロー見出し
subtitle	string	サブタイトル/説明文
primaryCta	{ text, href }	プライマリCTAボタン
secondaryCta	{ text, href }	セカンダリCTAボタン

ThemeSwitcher

テーマ切り替えモーダル。MarketingLayoutによって自動的に含まれます。ユーザーは/またはtを押して開くことができます。

---
import ThemeSwitcher from '../components/ThemeSwitcher.astro';
---

<ThemeSwitcher />

Footer.astro

ナビゲーションリンクとソーシャルリンクを含むサイトフッター。

---
import Footer from '../components/Footer.astro';
---

<Footer />

フッターのリンクとコンテンツはsrc/components/Footer.astroを編集してカスタマイズします。

セクションユーティリティクラス

専用コンポーネントはありませんが、マーケティングページでは以下のCSSクラスを使用できます：

<section class="hero">
  <!-- フルワイドのヒーローセクション -->
</section>

<section class="section">
  <div class="container">
    <!-- 標準コンテンツセクション -->
  </div>
</section>

<section class="section alt">
  <div class="container">
    <!-- 代替背景のセクション -->
  </div>
</section>

カードグリッドパターン

.card-gridクラスと.cardクラスを使用して、フィーチャーグリッドなどを作成します：

<div class="card-grid">
  <div class="card">
    <h3>Feature One</h3>
    <p>Description of feature one.</p>
  </div>
  <div class="card">
    <h3>Feature Two</h3>
    <p>Description of feature two.</p>
  </div>
  <div class="card">
    <h3>Feature Three</h3>
    <p>Description of feature three.</p>
  </div>
</div>

グリッドは利用可能なスペースに基づいて自動的にレスポンシブに調整されます。

ボタン

ボタンスタイルはユーティリティクラスを通じて利用できます：

<a href="/docs/" class="btn btn-primary">Get started</a>
<a href="/blog/" class="btn btn-secondary">Read the blog</a>
<a href="https://github.com/..." class="btn btn-ghost">View on GitHub</a>

クラス	用途
.btn-primary	ページの主要CTA
.btn-secondary	セカンダリアクション
.btn-ghost	控えめな/テキストのみのアクション

Starlightドキュメントコンポーネント

ドキュメントページ（MDX）では、Starlightの組み込みコンポーネントを使用できます：

import { Card, CardGrid, Tabs, TabItem, Aside } from '@astrojs/starlight/components';

<Aside type="tip">
  これは役立つヒントです。
</Aside>

<Tabs>
  <TabItem label="npm">npm install</TabItem>
  <TabItem label="pnpm">pnpm add</TabItem>
</Tabs>

よく使用されるStarlightコンポーネント：

• <Card> / <CardGrid> — カードレイアウト
• <Tabs> / <TabItem> — タブ付きコンテンツ
• <Aside> — コールアウトボックス（tip, note, caution, danger）
• <Steps> — 番号付きステップリスト
• <Icon> — アイコン

カスタムコンポーネントの作成

独自の再利用可能なコンポーネントをsrc/components/に作成できます：

src/components/FeatureCard.astro

---
const { icon, title, children } = Astro.props;
---

<div class="card feature-card">
  {icon && <span class="feature-icon">{icon}</span>}
  <h3>{title}</h3>
  <p>{children}</p>
</div>

<style>
  .feature-card {
    text-align: center;
  }
  .feature-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-3);
  }
</style>

ページで使用：

---
import FeatureCard from '../components/FeatureCard.astro';
---

<div class="card-grid">
  <FeatureCard icon="⚡" title="Fast">Lightning-fast performance.</FeatureCard>
  <FeatureCard icon="🎨" title="Beautiful">18+ built-in themes.</FeatureCard>
</div>

次のステップ

CSSトークン

コンポーネントをスタイルするためのすべてのデザイントークンを学びます。

CSSトークン →

ページとレイアウト

これらのコンポーネントを使ってページを構成する方法を学びます。

ページとレイアウト →