Product Launch Bento Grid With Mini UI Mockups

import type { ReactNode } from "react";

// Launch-day bento for a team calendar. Each tile holds a small drawn piece of the product.
// Layout: Tailwind spans on a six-column grid (md and up); one column on phones.
const week = [
  { day: "Mon", blocks: [{ top: 8, h: 30, c: "bg-teal-400/80" }, { top: 50, h: 20, c: "bg-zinc-600" }] },
  { day: "Tue", blocks: [{ top: 20, h: 40, c: "bg-zinc-600" }] },
  { day: "Wed", blocks: [{ top: 6, h: 18, c: "bg-zinc-600" }, { top: 34, h: 44, c: "bg-teal-400/80" }] },
  { day: "Thu", blocks: [{ top: 14, h: 26, c: "bg-zinc-600" }, { top: 56, h: 22, c: "bg-zinc-600" }] },
  { day: "Fri", blocks: [{ top: 4, h: 60, c: "bg-teal-400/80" }] },
];
const people = [
  { i: "AO", c: "bg-amber-300", free: true },
  { i: "RK", c: "bg-sky-300", free: true },
  { i: "MV", c: "bg-rose-300", free: false },
  { i: "JT", c: "bg-lime-300", free: true },
];

function Tile({ className, title, body, children }: { className: string; title: string; body: string; children: ReactNode }) {
  return (
    <article className={`flex flex-col overflow-hidden rounded-3xl border border-white/10 bg-zinc-900 p-6 ${className}`}>
      <div className="flex-1" aria-hidden="true">{children}</div>
      <h3 className="mt-6 text-lg font-semibold text-white">{title}</h3>
      <p className="mt-1 text-[15px] leading-relaxed text-zinc-400">{body}</p>
    </article>
  );
}

export default function ProductLaunchBentoGridWithMiniUiMockups() {
  return (
    <section className="bg-zinc-950 px-5 py-16 sm:py-24">
      <div className="mx-auto max-w-6xl">
        <span className="inline-flex items-center gap-2 rounded-full border border-teal-400/30 bg-teal-400/10 px-3 py-1 text-xs font-medium text-teal-300">New in Tidepool 3.0</span>
        <h2 className="mt-4 max-w-2xl text-3xl font-semibold tracking-tight text-white sm:text-4xl">A calendar that protects the hours you do real work in</h2>
        <div className="mt-12 grid grid-cols-1 gap-4 md:grid-cols-6 md:auto-rows-[minmax(260px,auto)]">
          <Tile className="md:col-span-4" title="Focus blocks that move themselves" body="When a meeting lands on your focus time, the block slides to the next free slot instead of vanishing.">
            <div className="grid h-44 grid-cols-5 gap-2 rounded-2xl bg-zinc-950/60 p-3">
              {week.map((d) => (
                <div key={d.day} className="flex flex-col">
                  <span className="text-[11px] font-medium text-zinc-500">{d.day}</span>
                  <div className="relative mt-2 flex-1 rounded-md bg-zinc-800/60">
                    {d.blocks.map((b, i) => (
                      <span key={i} className={`absolute inset-x-1 rounded ${b.c}`} style={{ top: `${b.top}%`, height: `${b.h}%` }} />
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </Tile>
          <Tile className="md:col-span-2" title="One switch for quiet days" body="Turn on No Meeting Wednesday for the whole team.">
            <div className="flex h-full flex-col justify-center gap-3">
              {[["No Meeting Wednesday", true], ["Auto-decline overlaps", false]].map(([l, on]) => (
                <div key={String(l)} className="flex items-center justify-between rounded-xl bg-zinc-800/70 px-4 py-3">
                  <span className="text-sm text-zinc-200">{l}</span>
                  <span className={`relative h-5 w-9 rounded-full ${on ? "bg-teal-400" : "bg-zinc-600"}`}>
                    <span className={`absolute top-0.5 h-4 w-4 rounded-full bg-white ${on ? "left-[18px]" : "left-0.5"}`} />
                  </span>
                </div>
              ))}
            </div>
          </Tile>
          <Tile className="md:col-span-2" title="Who is free, at a glance" body="Hover a time and see the team light up.">
            <div className="flex h-full items-center justify-center gap-2">
              {people.map((p) => (
                <span key={p.i} className={`relative grid h-12 w-12 place-items-center rounded-full text-sm font-semibold text-zinc-900 ${p.c} ${p.free ? "" : "opacity-40"}`}>
                  {p.i}
                  <span className={`absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded-full border-2 border-zinc-900 ${p.free ? "bg-teal-400" : "bg-zinc-500"}`} />
                </span>
              ))}
            </div>
          </Tile>
          <Tile className="md:col-span-2" title="Type it, book it" body="Write 'coffee with Rosa Thursday' and it is in.">
            <div className="flex h-full flex-col justify-center">
              <div className="rounded-xl border border-white/10 bg-zinc-800/70 px-4 py-3 font-mono text-sm text-zinc-200">coffee with Rosa thu 10am<span className="ml-0.5 inline-block h-4 w-[2px] translate-y-0.5 bg-teal-300" /></div>
              <div className="mt-2 rounded-xl bg-teal-400/10 px-4 py-2 text-sm text-teal-200">Thu 10:00 to 10:30, Rosa Kemp</div>
            </div>
          </Tile>
          <Tile className="md:col-span-2" title="Time zones without maths" body="Drag across the bar to find hours that suit Lisbon and Denver.">
            <div className="flex h-full flex-col justify-center gap-3">
              {[["Lisbon", 6, 13], ["Denver", 0, 6]].map(([city, a, b]) => (
                <div key={String(city)}>
                  <span className="text-xs text-zinc-400">{city}</span>
                  <div className="mt-1 grid grid-cols-[repeat(16,1fr)] gap-0.5">
                    {Array.from({ length: 16 }, (_, i) => (
                      <span key={i} className={`h-4 rounded-sm ${i >= Number(a) && i < Number(b) ? "bg-teal-400/80" : "bg-zinc-700"}`} />
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </Tile>
        </div>
      </div>
    </section>
  );
}