هیرو

heroبلاک

تیتر بزرگ وسط‌چین با دو دکمه و یک خط اثبات اجتماعی، روی شبکه‌ی محو.

لندینگشروع
تمام‌صفحه

نصب

  1. با CLI

    اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.

    $ npx vibefarsi add hero
  2. نصب دستی

    محتوای تب «کد» را در 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/>

پراپ‌ها

پراپنوعپیش‌فرضتوضیح
titleReactNode-تیتر. می‌تونید یک کلمه را با text-brand برجسته کنید.
proof{ people; text }-آواتارها و متن اثبات اجتماعی.