例

varshaは、SaaSランディングページ、ファウンダーポートフォリオ、ドキュメントサイト、ブログ、プロダクトマイクロサイトなど、幅広いウェブサイトの出発点として設計されています。このページでは、varshaが実際にどのように使用されているかを紹介します。

公式の例

myndlabs.tech

varshaの公式ウェブサイトとドキュメント。スターターのすべての機能を紹介する標準リファレンス実装。

myndlabs.techを見る →

founder.myndlabs.tech

varshaで構築されたファウンダー向けサイト。パーソナルブランディング、プロダクトローンチ、カスタムスタイルのポートフォリオパターンを示しています。

founder.myndlabs.techを見る →

スターターテンプレート

varshaは、デフォルトで完全なスターターとして使用することも、特定のユースケースのベースとして使用することもできます。

デフォルトスターター

このドキュメントで説明されている標準のvarshaテンプレート。マーケティングサイト、ドキュメント、ブログが含まれます。

GitHub: yethikrishna/web-ui-template

SaaSランディングページ

料金セクション、お客様の声、CTAセクション、ヒーローのバリエーションを追加することで、SaaSプロダクトサイトに最適です。

個人ポートフォリオ

ブログセクションをプロジェクトショーケースに置き換え、プロフィールページを追加し、テーマをパーソナライズしてポートフォリオサイトを作成します。

ドキュメントサイト

マーケティングページを削除し、Starlightドキュメントを拡張して、製品やライブラリのドキュメントサイトに焦点を当てます。

一般的なサイトパターン

最小限のランディングページ

ヒーロー、3〜4のフィーチャーカード、CTAセクション、フッターのみを使用：

<MarketingLayout title="My App" description="..." canonicalPath="/">
  <main class="page">
    <section class="hero">
      <h1>Ship faster.</h1>
      <p>Simple, beautiful apps.</p>
      <a href="/signup" class="btn btn-primary">Get started</a>
    </section>
    <section class="section">
      <div class="container">
        <div class="card-grid">
          <div class="card"><h3>Fast</h3><p>Lightning speed.</p></div>
          <div class="card"><h3>Simple</h3><p>Easy to use.</p></div>
          <div class="card"><h3>Beautiful</h3><p>Gorgeous themes.</p></div>
        </div>
      </div>
    </section>
  </main>
</MarketingLayout>

ブログメインのサイト

ブログに焦点を当て、マーケティングセクションを減らし、ホームページでブログ記事を紹介します。src/content/blog/に記事を追加し、必要に応じてブログレイアウトをカスタマイズします。

プロダクトドキュメント

製品中心のサイトの場合は、ナビゲーションとホームページを/docs/に向け、Starlightサイドバーを充実させます。

カスタマイズ例

カスタムカラーパレット

ブランドカラーに合わせてCSS変数を変更します。例：紫のアクセントにするには--color-accent: #8b5cf6を設定。

カスタムフォント

Google Fontsでフォントを追加し、--font-sansと--font-displayを更新。

追加ページ

Pricing、Changelog、About、ContactページをMarketingLayoutで追加。

カスタムコンポーネント

TestimonialCarousel、PricingTable、LogoCloudなどのコンポーネントをsrc/components/に作成。

あなたのサイトを紹介する

varshaでサイトを構築されましたか？ぜひお知らせください！

• Instagram: @yethikrishnarにタグ付け
• GitHub: リポジトリにPRまたはissueを送信

ショーケースページで厳選されたサイトをご覧ください。