Feature

PreviousNext

A component showcasing core values in a 3-column layout, with a large header spanning two rows and 4 smaller sections for individual values.

Docs
shadcnblocksblock

Preview

Loading preview…
code/block/feature42.tsx
import { cn } from "@/lib/utils";

interface Feature42Props {
  className?: string;
}

const Feature42 = ({ className }: Feature42Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="grid gap-8 lg:grid-cols-3">
          <h2 className="row-span-2 text-3xl font-semibold lg:text-5xl">
            Our Values and Principles
          </h2>
          <div>
            <h3 className="mb-2 text-xl font-medium">Team Spirit</h3>
            <p className="text-muted-foreground">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
              architecto atque consequuntur perferendis ratione dolorem vitae,
              doloribus facere.
            </p>
          </div>
          <div>
            <h3 className="mb-2 text-xl font-medium">Innovation</h3>
            <p className="text-muted-foreground">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
              architecto atque consequuntur perferendis ratione dolorem vitae,
              doloribus facere.
            </p>
          </div>
          <div>
            <h3 className="mb-2 text-xl font-medium">Quality</h3>
            <p className="text-muted-foreground">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
              architecto atque consequuntur perferendis ratione dolorem vitae,
              doloribus facere.
            </p>
          </div>
          <div>
            <h3 className="mb-2 text-xl font-medium">Integrity</h3>
            <p className="text-muted-foreground">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
              architecto atque consequuntur perferendis ratione dolorem vitae,
              doloribus facere.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature42 };

Installation

npx shadcn@latest add @shadcnblocks/feature42

Usage

import { Feature42 } from "@/components/feature42"
<Feature42 />