هیرو

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 }-آواتارها و متن اثبات اجتماعی.