Edge Scrim

import { CelestographCover } from "@/components/celestograph/celestograph-cover"
import { EdgeScrim } from "@/components/glow/edge-scrim"
import { CardDescription, CardTitle } from "@/components/ui/card"

// Every word on the page. Change copy here, not in the markup.
const COPY = {
  title: "Tethys, from the Cassini flyby",
  body: "An icy moon, photographed on the way past Saturn.",
} as const

// The scrim darkens the foot of a picture so a caption can sit on it.
export default function Demo() {
  return (
    <div className="dark relative isolate grid min-h-full w-full flex-1 place-items-center overflow-hidden bg-background text-foreground">
      <div className="relative isolate grid aspect-4/3 w-full max-w-lg content-end overflow-hidden rounded-2xl p-8">
        <CelestographCover from="tethys" palette="warmth" />
        <EdgeScrim />
        <CardTitle className="relative">{COPY.title}</CardTitle>
        <CardDescription className="relative">{COPY.body}</CardDescription>
      </div>
    </div>
  )
}