# Quote Values Combo

> A layout that pairs a featured quote with a list of supporting values beside it. Use it to ground your mission in a memorable statement and proof.

A shadcn/ui block from the [@shadcn-ui-blocks](https://www.shadcn-ui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-ui-blocks/portfolio-portfolio-mission-and-values-quote-values-combo).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-ui-blocks/portfolio-portfolio-mission-and-values-quote-values-combo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-ui-blocks/portfolio-portfolio-mission-and-values-quote-values-combo-light-9b4531a27bfba384.png
- Registry item: https://www.shadcn-ui-blocks.com/r/portfolio-portfolio-mission-and-values-quote-values-combo.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.shadcn-ui-blocks.com/r/portfolio-portfolio-mission-and-values-quote-values-combo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`

## Files

### `components/blocks/portfolio/portfolio-mission-and-values/quote-values-combo.tsx`

```tsx
import { QuoteIcon } from 'lucide-react';

export default function MissionAndValuesQuoteCombo() {
  const values = [
    {
      title: 'Purpose-Driven',
      description:
        'We believe in creating work that serves a meaningful purpose and delivers real value.',
    },
    {
      title: 'Continuous Growth',
      description:
        'We embrace learning and evolution as essential parts of our journey.',
    },
    {
      title: 'Client Partnership',
      description:
        'We see our clients as partners in a shared mission, not just customers.',
    },
    {
      title: 'Creative Excellence',
      description:
        'We push creative boundaries while maintaining the highest standards of quality.',
    },
    {
      title: 'Human-Centered',
      description:
        'We design for people first, putting human needs at the center of everything we create.',
    },
    {
      title: 'Sustainable Innovation',
      description:
        "We create solutions that are not only innovative today but sustainable for tomorrow's challenges.",
    },
  ];

  return (
    <section className="py-16 md:py-24">
      <div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
        {/* Quote Section */}
        <div className="mb-16 text-center">
          <QuoteIcon className="text-primary/50 mx-auto mb-6 h-12 w-12" />

          <blockquote className="mx-auto max-w-4xl">
            <p className="text-2xl leading-relaxed font-medium italic md:text-3xl">
              &quot;The goal isn&apos;t to build a website, an app, or a
              company. The goal is to change the world by giving people tools
              that make their lives better and make them better people.&quot;
            </p>
          </blockquote>

          <div className="mt-6">
            <div className="flex items-center justify-center">
              <div className="relative h-12 w-12 overflow-hidden rounded-full">
                <img
                  src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                  alt="Founder"
                  className="object-cover"
                />
              </div>
              <div className="ml-4 text-left">
                <p className="font-semibold">Alex Morgan</p>
                <p className="text-muted-foreground text-sm">
                  Founder & Creative Director
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Mission Statement */}
        <div className="bg-card mx-auto mb-16 max-w-3xl rounded-lg border p-8 text-center shadow-sm">
          <h2 className="mb-4 text-2xl font-bold sm:text-3xl">Our Mission</h2>
          <p className="text-muted-foreground text-lg">
            To create digital experiences that elevate brands, empower users,
            and inspire meaningful connections through thoughtful design and
            innovative technology.
          </p>
        </div>

        {/* Values Section */}
        <div>
          <h2 className="mb-8 text-center text-2xl font-bold sm:text-3xl">
            Guiding Values
          </h2>

          <div className="mx-auto grid max-w-5xl gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {values.map((value, index) => (
              <div
                key={index}
                className="border-l-primary bg-card rounded-lg border border-l-4 p-6 shadow-sm"
              >
                <h3 className="mb-2 text-xl font-semibold">{value.title}</h3>
                <p className="text-muted-foreground">{value.description}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
```