cutout-card-demo

1"use client"
2 
3import { motion } from "motion/react"
4 
5import {
6  CutoutCard,
7  CutoutCardAction,
8  CutoutCardContent,
9  CutoutCardFooter,
10  CutoutCardImage,
11  CutoutCardInsetLabel,
12  CutoutCardMedia,
13  CutoutCardOverlay,
14  CutoutCardPin,
15  cutoutCardSurfaceClassName,
16  CutoutCorner,
17  useCutoutContentStaggerVariants,
18} from "@/registry/default/ui/cutout-card"
19 
20// ============================================================================
21// Demo — full-page showcase matching the original single-component layout
22// ============================================================================
23 
24function CutoutCardDemo() {
25  const stagger = useCutoutContentStaggerVariants()
26 
27  return (
28    <div className="flex min-h-screen items-center justify-center ">
29      <div className="relative w-full max-w-md">
30        <CutoutCard className={cutoutCardSurfaceClassName}>
31          <CutoutCardMedia className="h-72">
32            <CutoutCardImage
33              alt="Mountain landscape"
34              sizes="(max-width: 768px) 100vw, 448px"
35              src="/placeholders/apple-wallpaper.jpg"
36            />
37            <CutoutCardOverlay />
38            <CutoutCardInsetLabel className="bottom-0 left-0 rounded-tr-[20px] bg-card px-5 py-3">
39              <span className="font-semibold text-[11px] text-muted-foreground uppercase tracking-widest">
40                Featured
41              </span>
42              <CutoutCorner className="absolute -right-[31px] -bottom-px rotate-90 text-card" />
43              <CutoutCorner className="absolute -top-[31px] -left-px rotate-90 text-card" />
44            </CutoutCardInsetLabel>
45            <CutoutCardPin className="top-0 right-0 rounded-bl-[16px] bg-primary px-4 py-2 font-semibold text-primary-foreground text-sm shadow-foreground/10 shadow-md ring-1 ring-border/30">
46              New
47              <CutoutCorner
48                className="absolute top-0 -left-[23px] -rotate-90 text-primary"
49                size={24}
50              />
51              <CutoutCorner
52                className="absolute right-0 -bottom-[23px] -rotate-90 text-primary"
53                size={24}
54              />
55            </CutoutCardPin>
56          </CutoutCardMedia>
57          <CutoutCardContent>
58            <motion.div
59              animate="show"
60              className="contents"
61              initial="hidden"
62              variants={stagger.container}
63            >
64              <motion.h2
65// … truncated