Brutalist Hero

新粗野主义风格的 Hero 区段，适用于落地页，包含标题、副标题、CTA 按钮和装饰性代码预览卡片。

预览

Neo-Brutalism UI

Build Bold Interfaces Faster with BrutxUI

$ npx brutxui init

Project initialized

安装

npx brutx@latest add --block brutalist-hero

用法

<script setup>
import BrutalistHero from '@/components/ui/BrutalistHero.vue'

function handlePrimary() {
    console.log('Primary CTA clicked')
}

function handleSecondary() {
    console.log('Secondary CTA clicked')
}
</script>

<template>
    <BrutalistHero
        title="Build Bold Interfaces Faster with BrutxUI"
        subtitle="A Neo-Brutalism component library for Vue 3. Bold borders, hard shadows, zero apologies."
        primary-cta-text="Get Started Now"
        secondary-cta-text="View Component Registry"
        @primary-cta="handlePrimary"
        @secondary-cta="handleSecondary"
    />
</template>

Props

属性	类型	默认值
title	string	'Build Bold Interfaces Faster with BrutxUI'
subtitle	string	—
primaryCtaText	string	'Get Started Now'
secondaryCtaText	string	'View Component Registry'
class	string	—

事件

事件	载荷
primaryCta	[]
secondaryCta	[]

布局

Hero 使用双列网格布局：

• 左列：徽章、标题、副标题和 CTA 按钮
• 右列：带有偏移阴影和代码预览的装饰性卡片
• 在移动端，列会垂直堆叠