Tarjeta de cuero con costura

"use client";

import type { CSSProperties } from "react";

/** Tarjeta skeuomórfica de cuero con costura, grano, marcador y texto estampado en relieve. React + TypeScript, sin dependencias. */
export type TarjetaCueroProps = {
  title?: string;
  subtitle?: string;
  lines?: string[];
  className?: string;
  style?: CSSProperties;
};

const GRAIN = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")";

const CSS = `
.gctcu-root { box-sizing: border-box; display: block; width: 100%; max-width: 340px; color: #f2dcb8; font: 600 15px/1.4 "Georgia", ui-serif, serif; }
.gctcu-root *, .gctcu-root *::before, .gctcu-root *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { .gctcu-root *, .gctcu-root *::before, .gctcu-root *::after { transition-duration: .01ms !important; } }
.gctcu-card { position: relative; padding: 30px 28px 28px; border-radius: 14px; background: ${GRAIN}, radial-gradient(120% 120% at 30% 0%, #8a4a26, #5a2d14 60%, #3d1d0b); background-blend-mode: multiply, normal; box-shadow: inset 0 1px 0 rgba(255, 220, 170, .35), inset 0 -2px 6px rgba(0, 0, 0, .55), 0 2px 0 #2a1306, 0 18px 28px -10px rgba(0, 0, 0, .65); transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.gctcu-card:hover { transform: translateY(-3px) rotate(-.4deg); }
.gctcu-card::before { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(242, 205, 150, .75); border-radius: 8px; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)); }
.gctcu-mark { position: absolute; top: -4px; right: 30px; width: 26px; height: 62px; background: linear-gradient(180deg, #b3261e, #7a1812); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); box-shadow: 0 6px 8px rgba(0, 0, 0, .5); }
.gctcu-title { margin: 6px 0 4px; font-size: 24px; font-weight: 700; letter-spacing: .02em; color: #e9c78d; text-shadow: 0 -1px 0 rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 225, 175, .35); }
.gctcu-sub { margin: 0 0 18px; font-style: italic; color: #cfa970; text-shadow: 0 -1px 0 rgba(0, 0, 0, .6); }
.gctcu-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.gctcu-list li { position: relative; padding-left: 20px; text-shadow: 0 -1px 0 rgba(0, 0, 0, .6); }
.gctcu-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6dc, #c99a4b 70%); box-shadow: 0 1px 1px rgba(0, 0, 0, .7); }`;

export function TarjetaCuero({ title = "Cuaderno de obra", subtitle = "Bitácora del proyecto", lines = ["Visitas y avances por fecha", "Fotos y notas en cada frente", "Firmas y observaciones del cliente"], className = "", style }: TarjetaCueroProps) {
  return (
    <div className={`gctcu-root ${className}`} style={style}>
      <style>{CSS}</style>
      <article className="gctcu-card">
        <span className="gctcu-mark" aria-hidden="true" />
        <h3 className="gctcu-title">{title}</h3>
        <p className="gctcu-sub">{subtitle}</p>
        <ul className="gctcu-list">
          {lines.map((line) => (
            <li key={line}>{line}</li>
          ))}
        </ul>
      </article>
    </div>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/tarjeta-cuero

import { TarjetaCuero } from "./tarjeta-cuero";

export default function Ejemplo() {
  return <TarjetaCuero title="Ejemplo" />;
}