Quote Award Combo

A block pairing a testimonial quote with an award badge side by side. Combines praise and recognition to build credibility on a portfolio page.

import { Trophy, Award, Medal } from 'lucide-react';

export default function AwardsAndRecognitionQuoteCombo() {
  const awards = [
    {
      name: 'Digital Innovation Award',
      organization: 'Creative Technology Foundation',
      year: '2023',
      quote:
        'Sets new standards for what a modern digital experience can achieve. Exceptional technical implementation paired with creative vision.',
      judge: 'Sarah Johnson',
      judgeTitle: 'Head of Jury, Digital Innovation Awards',
      icon: <Trophy className="h-6 w-6" />,
      link: '#',
    },
    {
      name: 'Excellence in UX Design',
      organization: 'UX Design Association',
      year: '2022',
      quote:
        'A masterclass in user-centered design. Every interaction has been thoughtfully crafted with the end-user in mind.',
      judge: 'Michael Chen',
      judgeTitle: 'UX Design Director, Tech Innovations',
      icon: <Award className="h-6 w-6" />,
      link: '#',
    },
    {
      name: 'Best Portfolio Website',
      organization: 'Web Design Awards',
      year: '2021',
      quote:
        'The perfect balance of aesthetics and functionality. This portfolio sets the creator apart as a true professional in their field.',
      judge: 'Alexandra Rivera',
      judgeTitle: 'Senior Creative Director, DesignStudio',
      icon: <Medal className="h-6 w-6" />,
      link: '#',
    },
  ];

  return (
    <section className="py-16 md:py-24">
      <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
        {/* Header */}
        <div className="mb-16 text-center">
          <h2 className="mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
            Award Recognition
          </h2>
          <p className="text-muted-foreground mx-auto max-w-3xl text-lg">
            What industry experts have said about my award-winning work.
          </p>
        </div>

        {/* Awards with Quotes */}
        <div className="mx-auto grid max-w-5xl gap-8 md:gap-12">
          {awards.map((award, index) => (
            <div
              key={index}
              className={`bg-card relative overflow-hidden rounded-xl border p-8 shadow-sm ${
                index === 0 ? 'md:p-10' : ''
              }`}
            >
              {/* Award Info */}
              <div className="mb-6 flex items-start justify-between gap-4">
                <div>
                  <div className="text-muted-foreground text-sm font-medium">
                    {award.organization} • {award.year}
                  </div>
                  <h3 className="mt-1 text-xl font-bold md:text-2xl">
                    {award.name}
                  </h3>
                </div>
                <div className="bg-primary/10 text-primary flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
                  {award.icon}
                </div>
              </div>

              {/* Quote */}
              <div className="bg-muted relative mb-8 rounded-lg p-6">
                <blockquote className="italic">
                  &quot;{award.quote}&quot;
                </blockquote>
                <div className="mt-4 flex items-center">
                  <div className="">
                    <p className="font-medium">{award.judge}</p>
                    <p className="text-muted-foreground text-sm">
                      {award.judgeTitle}
                    </p>
                  </div>
                </div>
              </div>

              {/* Link */}
              <div className="text-right">
                <a
                  href={award.link}
                  className="text-primary text-sm font-medium hover:underline"
                >
                  Learn more about this award
                </a>
              </div>
            </div>
          ))}
        </div>

        {/* Personal Reflection */}
        <div className="bg-card mx-auto mt-16 max-w-3xl rounded-lg border p-8 text-center">
          <h3 className="mb-4 text-xl font-semibold">My Reflection</h3>
          <p className="text-muted-foreground">
            These awards represent not just recognition of my work, but
            milestones in my professional journey. Each one has pushed me to
            explore new techniques, refine my skills, and continue delivering
            exceptional results for my clients. I&apos;m honored to have my work
            recognized by these respected organizations.
          </p>
        </div>
      </div>
    </section>
  );
}

About this block

Quote Award Combo opens with a centered heading and a one-line subheading, then stacks a vertical list of award cards beneath it. Each card holds an award header row (organization name, year, and award title on the left; a circular icon badge on the right), a shaded blockquote panel with the judge's verbatim comment plus their name and title, and a small "Learn more" link anchored to the bottom right. Below the card list a separate reflection panel sits centered, carrying a short personal note about what the honors mean.

The number of award cards is driven by an array, so you can add or remove entries freely. The heading copy, the reflection text, and the judge attribution on each card are all independent strings. The icon inside each badge is a standard icon component and can be swapped to any icon that fits the award type.

When to use

Reach for this block when you want judges' or jurors' voices to carry the weight of your credentials rather than listing awards as bare facts. It suits the recognition section of an online education platform profile where peer-reviewed accolades and expert endorsements carry more authority than a plain list. The side-by-side pairing of the award metadata and the quote in one card keeps each honor self-contained, which works better than a separate testimonials section followed by a separate awards grid when you want both signals in a single glance.

A natural flow around it on a Portfolio page:

Before

About And Skills to establish credentials before showing recognition
Featured Work Highlights so visitors see the actual output that earned the awards

After

Quote And Feedback to extend the social proof beyond formal awards
CTA Banner to convert readers while credibility is at its peak

What you can display

Each card pairs one award with one expert voice, so the most natural content is a short roster of your strongest honors. A few other ways to fill the frame:

Course or curriculum awards. For an education platform, slot in instructional design awards with quotes from review board members who evaluated the course.
Industry certification endorsements. Replace trophy icons with certification body logos and use the quote panel for an evaluator's summary statement.
Conference recognition. Feature best-talk or best-paper awards with a program chair's comment as the blockquote.

Tip: keep the judge title specific (role and organization) so readers can assess the weight of each endorsement at a glance.

About this block

When to use

A natural flow around it on a Portfolio page:

Before

About And Skills to establish credentials before showing recognition
Featured Work Highlights so visitors see the actual output that earned the awards

After

Quote And Feedback to extend the social proof beyond formal awards
CTA Banner to convert readers while credibility is at its peak

What you can display

Each card pairs one award with one expert voice, so the most natural content is a short roster of your strongest honors. A few other ways to fill the frame:

Course or curriculum awards. For an education platform, slot in instructional design awards with quotes from review board members who evaluated the course.
Industry certification endorsements. Replace trophy icons with certification body logos and use the quote panel for an evaluator's summary statement.
Conference recognition. Feature best-talk or best-paper awards with a program chair's comment as the blockquote.

Tip: keep the judge title specific (role and organization) so readers can assess the weight of each endorsement at a glance.

Quote Award Combo

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display