# Content 1

> Content 1 variant for block.

A shadcn/ui block from the [@uiable](https://uiable.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiable/block-content-1).

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-content-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-content-1-light-f5b6998cc7c9d6df.png
- Registry item: https://uiable.com/r/block-content-1.json
- Categories: content
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-content-1.json
```

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

## Files

### `src/components/uiable/blocks/content/content-1/content-1.tsx`

```tsx
//  ------------------------------- | CONTENT 1 | -------------------------------  //

export default function Content1() {
  return (
    <div className="overflow-hidden py-24 sm:py-32">
      <div className="relative isolate px-6 pt-14 lg:px-8">
        <div
          aria-hidden="true"
          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
        >
          <div
            style={{
              clipPath:
                "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
            }}
            className="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-indigo-500 from-10% via-sky-500 via-30% to-purple-500 to-90% opacity-30 sm:left-[calc(50%-30rem)] sm:w-288.75"
          />
        </div>
        <div className="container mx-auto px-6 lg:px-8">
          <div className="grid grid-cols-12 items-center gap-6 sm:gap-10">
            <div className="col-span-12 lg:col-span-6">
              <div className="relative rounded-3xl bg-card p-3 shadow-[0_0_40px_-8px_#4680ff38]">
                <img
                  src="https://cdn.uiable.com/block/img-content-1.jpg"
                  alt="Team meeting in a conference room"
                  className="w-full rounded-xl"
                />
                <div className="absolute bottom-5 left-5 flex size-14 items-center justify-center rounded-full bg-amber-500 text-white shadow-[0_0_40px_-8px_#4680ff38] shadow-amber-500/90 sm:size-20 lg:top-5 lg:-right-5 lg:bottom-auto lg:left-auto lg:rotate-12">
                  <span className="text-2xl font-light sm:text-3xl">01</span>
                </div>
              </div>
            </div>
            <div className="relative col-span-12 lg:col-span-6">
              <div className="flex flex-col gap-4 sm:gap-6">
                <h2 className="text-lg font-medium text-slate-800 sm:text-3xl dark:text-slate-50">
                  Execution Strategy Kickoff
                </h2>
                <p className="max-w-200 text-slate-600 dark:text-slate-100">
                  Join us for the First Planning Meeting where we’ll discuss
                  project goals, timelines, responsibilities, and next steps.
                  This session is intended to align the team, gather initial
                  ideas, and establish a clear roadmap for successful execution.
                  All team members are encouraged to attend and contribute their
                  input.
                </p>
                <div className="flex flex-col gap-4">
                  <div className="flex flex-row items-center gap-4">
                    <div className="rounded-lg bg-card p-0.5 shadow-[0_0_40px_-8px_#4680ff38] shadow-emerald-500/50">
                      <div className="mx-auto inline-flex size-12 shrink-0 items-center justify-center rounded-md bg-emerald-500/10 text-emerald-500 transition-all">
                        <svg
                          className="size-7"
                          xmlns="http://www.w3.org/2000/svg"
                          width="32"
                          height="32"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M11.999 14.171c-2.13 0-3.87-1.73-3.87-3.87s1.74-3.86 3.87-3.86 3.87 1.73 3.87 3.87-1.74 3.86-3.87 3.86Zm0-6.23c-1.3 0-2.37 1.06-2.37 2.37s1.06 2.37 2.37 2.37 2.37-1.06 2.37-2.37-1.07-2.37-2.37-2.37Z"
                            fill="currentColor"
                          ></path>
                          <path
                            d="M12.002 22.76a5.97 5.97 0 0 1-4.13-1.67c-2.95-2.84-6.21-7.37-4.98-12.76 1.11-4.89 5.38-7.08 9.11-7.08h.01c3.73 0 8 2.19 9.11 7.09 1.22 5.39-2.04 9.91-4.99 12.75a5.97 5.97 0 0 1-4.13 1.67Zm0-20.01c-2.91 0-6.65 1.55-7.64 5.91-1.08 4.71 1.88 8.77 4.56 11.34a4.425 4.425 0 0 0 6.17 0c2.67-2.57 5.63-6.63 4.57-11.34-1-4.36-4.75-5.91-7.66-5.91Z"
                            fill="currentColor"
                          ></path>
                        </svg>
                      </div>
                    </div>
                    <div className="flex grow flex-col gap-2">
                      <p className="text-lg leading-none text-slate-800 dark:text-slate-100">
                        Venue
                      </p>
                      <p className="text-md leading-none text-slate-600 dark:text-slate-400">
                        118 E John Carpenter Fwy, Irving, Texas
                      </p>
                    </div>
                  </div>
                  <div className="flex flex-row items-center gap-4">
                    <div className="rounded-lg bg-card p-0.5 shadow-[0_0_40px_-8px_#4680ff38] shadow-purple-500/50">
                      <div className="mx-auto inline-flex size-12 shrink-0 items-center justify-center rounded-md bg-purple-500/10 text-purple-500 transition-all">
                        <svg
                          className="size-7"
                          xmlns="http://www.w3.org/2000/svg"
                          width="32"
                          height="32"
                          viewBox="0 0 24 24"
                          fill="none"
                        >
                          <path
                            d="M13.4 14.6c-.19 0-.38-.07-.53-.22l-1.4-1.4a.75.75 0 0 1-.22-.53V9.66c0-.41.34-.75.75-.75s.75.34.75.75v2.48l1.18 1.18c.29.29.29.77 0 1.06-.15.15-.34.22-.53.22Z"
                            fill="currentColor"
                          ></path>
                          <path
                            d="M12 19.25c-1.59 0-3.09-.5-4.35-1.45-.03-.02-.05-.03-.08-.05A7.243 7.243 0 0 1 4.75 12C4.75 8 8 4.75 12 4.75S19.25 8 19.25 12a7.23 7.23 0 0 1-2.79 5.72c-.03.02-.05.04-.08.06A7.2 7.2 0 0 1 12 19.25Zm-3.57-2.74c.03.02.05.03.07.05 2.03 1.57 5.01 1.56 7.03-.02.02-.02.05-.04.07-.05A5.717 5.717 0 0 0 17.75 12c0-3.17-2.58-5.75-5.75-5.75S6.25 8.83 6.25 12c0 1.77.79 3.41 2.18 4.51Z"
                            fill="currentColor"
                          ></path>
                          <path
                            d="M12.55 22.75h-1.09c-1.96 0-3.16-.97-3.67-2.98l-.5-2.47c-.04-.22.01-.45.16-.62.15-.17.36-.27.58-.27h.01c.17 0 .33.05.46.16 2.03 1.57 5.01 1.56 7.03-.02.31-.24.8-.19 1.05.12.14.17.2.4.16.62l-.51 2.47c-.53 2.02-1.73 2.99-3.68 2.99Zm-3.46-4.11.16.8c.38 1.5 1.16 1.81 2.21 1.81h1.09c1.04 0 1.82-.31 2.21-1.83l.16-.78c-1.81.8-4.01.81-5.83 0ZM16 7.62c-.17 0-.34-.06-.47-.16-2.02-1.58-5-1.59-7.03-.02-.31.24-.8.19-1.04-.11-.14-.17-.2-.4-.16-.62l.49-2.44c.51-2.05 1.71-3.02 3.67-3.02h1.09c1.95 0 3.15.97 3.66 2.96l.52 2.51c.05.22-.01.45-.15.62-.14.18-.35.28-.58.28Zm-4-2.87c1.03 0 2.01.21 2.92.61l-.17-.81c-.39-1.48-1.16-1.8-2.2-1.8h-1.09c-1.05 0-1.83.31-2.21 1.85l-.16.76c.91-.4 1.89-.61 2.91-.61Z"
                            fill="currentColor"
                          ></path>
                        </svg>
                      </div>
                    </div>
                    <div className="flex grow flex-col gap-2">
                      <p className="text-lg leading-none text-slate-800 dark:text-slate-100">
                        Time
                      </p>
                      <p className="text-md leading-none text-slate-600 dark:text-slate-400">
                        Friday, 28 June 2026, 10:30 AM – 12:00 PM IST
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          aria-hidden="true"
          className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
        >
          <div
            style={{
              clipPath:
                "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
            }}
            className="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-indigo-500 from-10% via-blue-500 via-30% to-emerald-500 to-90% opacity-30 sm:left-[calc(50%+36rem)] sm:w-288.75"
          />
        </div>
      </div>
    </div>
  )
}
```