UIPackage
Vue React

Features 01

block marketing
Edit on GitHub

Three-column features grid (six cards). Eyebrow + headline + lede, then each card has a tinted icon-box, a short title, and a one-paragraph description. Cards are spelled out inline — swap, reorder, or change icons without unwiring a wrapper.

Also available for React ->

Installation

$ npx shadcn-vue@latest add https://uipkge.dev/r/vue/features-01.json

Or with the named registry: npx shadcn-vue@latest add @uipkge/features-01

Examples

npm dependencies

lucide-vue-next

Includes

card

Files (1)

  • app/components/blocks/Features01.vue 4 kB 
    <script setup lang="ts">
import { BarChart3, Calendar, FileCheck2, ShieldCheck, Users, Wallet } from 'lucide-vue-next'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
</script>

<template>
  <section class="bg-background">
    <div class="mx-auto max-w-6xl px-6 py-24">
      <div class="mb-12 max-w-2xl space-y-3">
        <p class="text-primary text-sm font-medium tracking-widest uppercase">Features</p>
        <h2 class="text-3xl font-semibold tracking-tight sm:text-4xl">Everything teams need, nothing they don't.</h2>
        <p class="text-muted-foreground text-lg">
          Six modules that work together out of the box. Pay only for what you use.
        </p>
      </div>
      <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        <Card>
          <CardHeader class="space-y-3">
            <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
              <Users class="size-5" />
            </div>
            <CardTitle class="text-base">Employee directory</CardTitle>
          </CardHeader>
          <CardContent>
            <p class="text-muted-foreground text-sm">
              Single source of truth for people, roles and reporting lines — searchable and exportable.
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader class="space-y-3">
            <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
              <Wallet class="size-5" />
            </div>
            <CardTitle class="text-base">Payroll</CardTitle>
          </CardHeader>
          <CardContent>
            <p class="text-muted-foreground text-sm">
              Multi-currency runs with automatic tax filing and direct deposit. Pause and resume in one click.
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader class="space-y-3">
            <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
              <BarChart3 class="size-5" />
            </div>
            <CardTitle class="text-base">Performance</CardTitle>
          </CardHeader>
          <CardContent>
            <p class="text-muted-foreground text-sm">
              OKRs, 1:1s, 360 reviews and continuous feedback all linked to the org chart.
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader class="space-y-3">
            <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
              <FileCheck2 class="size-5" />
            </div>
            <CardTitle class="text-base">Onboarding</CardTitle>
          </CardHeader>
          <CardContent>
            <p class="text-muted-foreground text-sm">
              34 templated tasks split across pre-start, day 1, week 1, month 1 and 90-day milestones.
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader class="space-y-3">
            <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
              <Calendar class="size-5" />
            </div>
            <CardTitle class="text-base">Time off</CardTitle>
          </CardHeader>
          <CardContent>
            <p class="text-muted-foreground text-sm">
              Accrual-based leave with manager approval workflow and shared team calendar.
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader class="space-y-3">
            <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
              <ShieldCheck class="size-5" />
            </div>
            <CardTitle class="text-base">Compliance</CardTitle>
          </CardHeader>
          <CardContent>
            <p class="text-muted-foreground text-sm">
              GDPR, SOC2 and HIPAA-ready audit trails. Right-to-erasure built in.
            </p>
          </CardContent>
        </Card>
      </div>
    </div>
  </section>
</template>

Raw manifest: https://uipkge.dev/r/vue/features-01.json