Why Me Vs Competition

A two column comparison table contrasting your offer against typical alternatives. Helps undecided visitors see why you are the better choice at a glance.

import { ArrowRight, Check, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';

// Sample comparison data
const comparisonPoints = [
  {
    id: 1,
    category: 'Quality',
    me: {
      value: 'Custom solutions built specifically for your needs',
      included: true,
    },
    others: {
      value: 'Often pre-made templates with minimal customization',
      included: false,
    },
  },
  {
    id: 2,
    category: 'Communication',
    me: {
      value: 'Direct access to me throughout the entire project',
      included: true,
    },
    others: {
      value: 'Often dealing with account managers or multiple team members',
      included: false,
    },
  },
  {
    id: 3,
    category: 'Turnaround Time',
    me: {
      value: 'Focused attention on your project with quick iterations',
      included: true,
    },
    others: {
      value: 'Can be delayed due to multiple projects and priorities',
      included: false,
    },
  },
  {
    id: 4,
    category: 'Pricing',
    me: {
      value: 'Transparent pricing with no hidden fees',
      included: true,
    },
    others: {
      value: 'Often includes markups or unexpected costs',
      included: false,
    },
  },
  {
    id: 5,
    category: 'Flexibility',
    me: {
      value: 'Adaptable to changes and evolving requirements',
      included: true,
    },
    others: {
      value: 'Usually rigid process with change fees',
      included: false,
    },
  },
];

// Key advantages data
const keyAdvantages = [
  'Personal attention and care for every detail of your project',
  'Direct collaboration with no middlemen or communication barriers',
  'Competitive pricing without the agency overhead costs',
  'Specialized expertise focused on your industry',
  'Faster delivery with efficient workflows',
];

export default function WhyMeVsCompetition() {
  return (
    <section className="bg-background py-16 md:py-24">
      <div className="container mx-auto px-4">
        {/* 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">
            How I Compare
          </h2>
          <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
            Understanding the differences between working with me versus other
            options
          </p>
        </div>

        <div className="mx-auto">
          {/* Comparison Table */}
          <div className="mb-12 overflow-hidden rounded-xl border shadow-sm">
            <Table>
              <TableHeader>
                <TableRow className="bg-muted/50">
                  <TableHead className="w-[200px]">Comparison Point</TableHead>
                  <TableHead className="text-center">Working With Me</TableHead>
                  <TableHead className="text-center">Other Options</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {comparisonPoints.map((point) => (
                  <TableRow key={point.id}>
                    <TableCell className="font-medium">
                      {point.category}
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <div className="bg-primary/10 mt-0.5 rounded-full p-1">
                          <Check className="text-primary h-4 w-4" />
                        </div>
                        <span>{point.me.value}</span>
                      </div>
                    </TableCell>
                    <TableCell className="text-muted-foreground">
                      <div className="flex items-center gap-2">
                        <div className="bg-destructive/10 mt-0.5 rounded-full p-1">
                          <X className="text-destructive h-4 w-4" />
                        </div>
                        <span>{point.others.value}</span>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

          {/* Key Advantages */}
          <div className="bg-card rounded-xl border p-6 shadow-sm">
            <h3 className="mb-6 text-center text-xl font-semibold">
              My Key Advantages
            </h3>
            <ul className="grid gap-4 sm:grid-cols-2">
              {keyAdvantages.map((advantage, index) => (
                <li key={index} className="flex items-start gap-2">
                  <div className="bg-primary/10 rounded-full p-1">
                    <Check className="text-primary h-4 w-4" />
                  </div>
                  <span>{advantage}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="mt-12 text-center">
            <Button size="lg" asChild>
              <a href="#" className="inline-flex items-center gap-2">
                <span>Discuss your project</span>
                <ArrowRight className="h-4 w-4" />
              </a>
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

About this block

Why Me Vs Competition opens with a centered badge, heading, and a short supporting sentence. Below that sits a bordered, rounded table with three columns: a category label on the left, a "Working With Me" column in the center, and an "Other Options" column on the right. Each row pairs a check icon on a tinted background with a short descriptive phrase, so visitors read both sides of every comparison in one sweep. Beneath the table a card lists key advantages in a two column grid, each item prefixed with the same check icon. A call to action button at the bottom rounds the block out.

Every piece of copy is independent. You can rename the column headers, swap in your own comparison categories, add or remove rows, and rewrite the advantages list without touching the layout. The CTA button label and destination are equally straightforward to update.

When to use

Reach for this block when a prospective client is weighing you against a larger agency or a generic freelance marketplace. The structured table makes the case at a glance rather than asking the reader to hunt through paragraphs of prose. For a creative agency or studio, it is especially useful on a services or hire page where visitors already know what they need but have not yet decided who to trust.

A natural flow around it on a Portfolio page:

Before

Core Services Overview to establish what you offer before explaining why you are the better choice
About And Skills to give visitors context on your background before the comparison lands

After

Client Oriented Testimonials to back up the comparison claims with real client voices
Contact Sections to capture the decision once visitors are convinced

What you can display

The natural fit is a direct comparison of your solo or boutique offer against typical agency alternatives, but the table works for other framings too:

Methodology comparisons. Contrast your iterative approach against a waterfall process so clients understand the practical difference in how projects run.
Pricing transparency. Dedicate one or two rows to cost structure and what is included, helping budget conscious clients see the full value up front.
Specialization versus generalism. Use the advantages card to call out the niche expertise that a generalist shop cannot match.

Tip: keep the table to five or six rows so the comparison stays readable without scrolling; move secondary points into the advantages card instead.

About this block

When to use

A natural flow around it on a Portfolio page:

Before

Core Services Overview to establish what you offer before explaining why you are the better choice
About And Skills to give visitors context on your background before the comparison lands

After

Client Oriented Testimonials to back up the comparison claims with real client voices
Contact Sections to capture the decision once visitors are convinced

What you can display

The natural fit is a direct comparison of your solo or boutique offer against typical agency alternatives, but the table works for other framings too:

Methodology comparisons. Contrast your iterative approach against a waterfall process so clients understand the practical difference in how projects run.
Pricing transparency. Dedicate one or two rows to cost structure and what is included, helping budget conscious clients see the full value up front.
Specialization versus generalism. Use the advantages card to call out the niche expertise that a generalist shop cannot match.

Tip: keep the table to five or six rows so the comparison stays readable without scrolling; move secondary points into the advantages card instead.

Why Me Vs Competition

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display