هیرو
heroبلاکتیتر بزرگ وسطچین با دو دکمه و یک خط اثبات اجتماعی، روی شبکهی محو.
لندینگشروع
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add heroنصب دستی
محتوای تب «کد» را در
components/blocks/hero.tsxبگذارید. پیشنیاز: button، badge، avatar.$ npm i lucide-reactکپی کل فایلregistry json
ساختهشده از
استفاده
usage.tsx
1import { HeroBlock } from "@/components/blocks/hero"23<HeroBlock4 badge="نسخهی ۲ منتشر شد"5 title={<>فروشگاهتان را امروز باز کنید، <span className="text-brand">نه ماه بعد</span></>}6 description="درگاه بانکی، پست، فاکتور شمسی و هوش مصنوعی فارسی، همه از روز اول آماده."7 primary={{ label: "ساخت فروشگاه رایگان" }}8 proof={{ people: [{ name: "سارا" }, { name: "علی" }, { name: "نگار" }], text: "بیش از ۲ هزار فروشگاه" }}9/>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| title | ReactNode | - | تیتر. میتونید یک کلمه را با text-brand برجسته کنید. |
| proof | { people; text } | - | آواتارها و متن اثبات اجتماعی. |