Bulleted Value Proposition

A scannable list of value points, each with an icon and short line. Summarizes what you deliver so visitors grasp your strengths in a few seconds.

import {
  ArrowRight,
  Clock,
  Award,
  Zap,
  HeartHandshake,
  Medal,
  Globe,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

// Sample values data
const values = [
  {
    id: 1,
    title: 'Fast Turnaround',
    description:
      'I deliver projects on time, every time. Your deadlines are my top priority.',
    icon: <Clock className="text-primary h-6 w-6" />,
  },
  {
    id: 2,
    title: 'Quality Craftsmanship',
    description:
      'Every pixel and line of code is crafted with care. I don&apos;t believe in cutting corners.',
    icon: <Award className="text-primary h-6 w-6" />,
  },
  {
    id: 3,
    title: 'Creative Solutions',
    description:
      'I approach every challenge with fresh eyes and innovative thinking to solve your unique problems.',
    icon: <Zap className="text-primary h-6 w-6" />,
  },
  {
    id: 4,
    title: 'Clear Communication',
    description:
      'No surprises or confusion. I keep you informed every step of the way with clear, jargon-free updates.',
    icon: <HeartHandshake className="text-primary h-6 w-6" />,
  },
  {
    id: 5,
    title: 'Proven Results',
    description:
      'My work consistently delivers measurable outcomes for clients across various industries.',
    icon: <Medal className="text-primary h-6 w-6" />,
  },
  {
    id: 6,
    title: 'Client-Focused Approach',
    description:
      'Your success is my success. I prioritize understanding your business goals to deliver solutions that truly matter.',
    icon: <Globe className="text-primary h-6 w-6" />,
  },
];

export default function BulletedValueProposition() {
  return (
    <section className="bg-background py-16 md:py-24">
      <div className="container mx-auto px-4 2xl:max-w-[1400px]">
        {/* Section header */}
        <div className="mb-12 text-center md:mb-16">
          <Badge className="mb-4" variant="outline">
            Why Choose Me
          </Badge>
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
            Why Work With Me?
          </h2>
          <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
            Here&apos;s what sets me apart and makes me the right partner for
            your next project
          </p>
        </div>

        {/* Values List */}
        <div className="mx-auto max-w-4xl">
          <div className="grid gap-6 md:grid-cols-2 lg:gap-10">
            {values.map((value) => (
              <Card
                key={value.id}
                className="border-primary/10 overflow-hidden"
              >
                <CardContent>
                  <div className="flex items-start gap-4">
                    <div className="bg-primary/10 flex-shrink-0 rounded-full p-3">
                      {value.icon}
                    </div>
                    <div>
                      <h3 className="mb-2 text-xl font-medium">
                        {value.title}
                      </h3>
                      <p className="text-muted-foreground text-sm">
                        {value.description}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          <div className="mt-12 text-center">
            <Button size="lg" asChild>
              <a href="#" className="inline-flex items-center gap-2">
                <span>Let&apos;s work together</span>
                <ArrowRight className="h-4 w-4" />
              </a>
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

About this block

Bulleted Value Proposition opens with a centered header section: a small outline badge, a bold heading, and a short supporting sentence. Below that sits a two column card grid, each card holding a circular icon badge on the left and a title plus one sentence of description on the right. Six cards fill the grid by default. A primary call to action button with an arrow icon sits centered beneath the grid to give visitors a clear next step.

Every piece of content in this block is independent. You can rewrite the badge label, heading, and subtitle without touching the cards. The card count is flexible, so you can trim to four items or expand further to match your actual strengths. Each card icon, title, and description swap independently, and the call to action label and destination are separate from the rest.

When to use

This block suits any point in a portfolio page where you need to give a visitor a fast, scannable read of what makes you worth hiring. For a freelancer or consultant pitching fintech or banking clients, it works especially well directly after a hero, because decision makers in those sectors scan for trust signals and delivery guarantees before they read anything in depth. It is more scannable than a prose paragraph and more compact than a full process walkthrough.

A natural flow around it on a Portfolio page:

Before

Hero Showcases to establish your positioning before the value list lands
About And Skills if you want to introduce yourself briefly before listing your strengths

After

Client Oriented Testimonials to back up the value claims with real client voices
Case Studies to give visitors concrete proof once they know what you stand for

What you can display

The cards can hold any short, distinct value you consistently deliver to clients. A few directions that work well:

Compliance and reliability signals. In regulated industries like banking, surface commitments such as audit trails, deadline adherence, or data handling practices that matter to procurement teams.
Communication style. Describe how you keep stakeholders informed during a project, which reassures clients who have been burned by opaque freelancers before.
Outcome focus. Lead each card with a measurable result rather than a method, so a hiring manager sees the business value before the technical detail.

Tip: keep each card description to one or two short sentences so all six cards stay at the same visual height and the grid feels balanced.

About this block

When to use

A natural flow around it on a Portfolio page:

Before

Hero Showcases to establish your positioning before the value list lands
About And Skills if you want to introduce yourself briefly before listing your strengths

After

Client Oriented Testimonials to back up the value claims with real client voices
Case Studies to give visitors concrete proof once they know what you stand for

What you can display

The cards can hold any short, distinct value you consistently deliver to clients. A few directions that work well:

Compliance and reliability signals. In regulated industries like banking, surface commitments such as audit trails, deadline adherence, or data handling practices that matter to procurement teams.
Communication style. Describe how you keep stakeholders informed during a project, which reassures clients who have been burned by opaque freelancers before.
Outcome focus. Lead each card with a measurable result rather than a method, so a hiring manager sees the business value before the technical detail.

Tip: keep each card description to one or two short sentences so all six cards stay at the same visual height and the grid feels balanced.

Bulleted Value Proposition

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display