ランディングLandingExperimental
ヒーローと機能セクションのあるランディングページです。
プレビュー
状態とバリエーション
hero だけが必須で、header・features・testimonials・pricing・cta・footer は渡した節だけが並びます。節の順番は固定です。
hero と cta だけ
最小の形です。1つのことだけを伝える短い頁は、節を足さないほうが速く決まります。
作る速さを変える
画面の土台がそろっているので、作りはじめから形になります。
今日から試せます
案内と機能と footer を足す
header は上に貼り付いたまま残ります。features は Container に包まれるので、左右の余白は自分で付けなくてかまいません。
Acme
作る速さを変える
画面の土台がそろっているので、作りはじめから形になります。
速い
待ち時間を作りません。
そろう
画面ごとの差が出ません。
続く
変更に強い土台です。
今日から試せます
声と料金の節を挟む
testimonials だけは背景が薄く塗られるので、節の切れ目が目で分かります。pricing はその次に固定で入ります。
Acme
作る速さを変える
画面の土台がそろっているので、作りはじめから形になります。
速い
待ち時間を作りません。
そろう
画面ごとの差が出ません。
続く
変更に強い土台です。
「画面の作り直しが1日で終わるようになりました。」
月額 2,900円から
今日から試せます
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| header | React.ReactNode | - | Content for the sticky header navigation. |
| hero | React.ReactNode | - | The main hero section content. |
| features | React.ReactNode | - | Section for features or benefits grid. |
| testimonials | React.ReactNode | - | Section for social proof and testimonials. |
| pricing | React.ReactNode | - | Section for pricing plans. |
| cta | React.ReactNode | - | Call to Action section at the bottom. |
| footer | React.ReactNode | - | Footer content area. |
| className | string | - | Additional classes for the root container. |
Usage
import { LandingTemplate, Button } from "@gunjo/ui";
export function LandingPage() {
return (
<LandingTemplate
header={
<div className="flex items-center justify-between w-full">
<span className="font-bold">Acme Corp</span>
<nav className="flex gap-4">
<a href="#">Features</a>
<a href="#">Pricing</a>
</nav>
</div>
}
hero={
<div className="container flex flex-col items-center gap-4 text-center py-20">
<h1 className="text-4xl font-bold">Build Faster</h1>
<p className="max-w-[700px] text-lg text-muted-foreground">The best platform for building amazing things.</p>
<div className="flex gap-4">
<Button>Get Started</Button>
<Button variant="outline">Learn More</Button>
</div>
</div>
}
features={
<div className="grid gap-8 md:grid-cols-3">
<div className="flex flex-col gap-2">
<h3 className="text-xl font-bold">Fast</h3>
<p className="text-muted-foreground">Blazing fast performance.</p>
</div>
{/* ... more features */}
</div>
}
footer={
<p className="text-sm text-muted-foreground">© 2024 Acme Corp.</p>
}
/>
)
}