import type { KolaboraEvent } from "@/types/event"; import { QueueSection } from "@/components/motion/QueueSection"; /** * Direct port of `aboutSignaturee.svg` (repo root) — every background/blob * path, the hand+finger-line icon, the cream card shape, and both tree-icon * paths below are copied verbatim (same `d`, same nested transform * matrices, same colors) from that file, so this renders pixel-identical to * the source asset at any size (one scalable viewBox, not a hand-built * Tailwind layout — that's the only way "proporsi tetap identik pada setiap * breakpoint" holds). * * Two deliberate deviations from the raw file, both with a concrete * technical reason (not a style choice): * 1. The source's ~79 "text converted to outline" paths (one per glyph, * colored identically to whatever sits behind them — the design tool's * invisible font-fallback backup layer) are omitted. They render * strictly invisible in the original; a byte-identical DOM copy of them * would be pure dead weight with zero visual difference. * 2. The source bakes ONE specific event's placeholder text ("12 december * 2026", "KUSUMA AGROWISATA") using per-glyph tspan kerning tables that * are only valid for those exact characters. This component renders any * Signature Event, so the date/venue/address are real props. The "on"/ * "at" labels (content never varies) keep the original glyph-exact * / markup untouched. The venue name + address use a * at the original text block's coordinates instead of * SVG , so arbitrarily long real venue names wrap instead of either * silently reusing wrong per-glyph offsets or overflowing the card. * * Also intentionally NOT present: a CMS description paragraph. The source * SVG has no such element, so — per this pass's "don't add anything that * isn't in the reference asset" — none was added here. */ export function SignatureAbout({ event }: { event: KolaboraEvent }) { const dateLine1 = new Date(event.start_date) .toLocaleDateString("en-US", { day: "numeric", month: "long", timeZone: "UTC" }) .toUpperCase(); const dateLine2 = new Date(event.start_date).getUTCFullYear(); return ( {/* The pixel-perfect SVG itself keeps its own `overflow-hidden` wrapper (moved here from the section root, which used to carry it) — this is the ONLY change around the SVG; its internal content is untouched. Freeing the section root of overflow-hidden lets the crossing motifs below poke past its top/bottom edges, which is the whole point of "Overlapping Composition" at a seam — a motif fully clipped to its own box just reads as decoration, not a bridge. */}

{/* Below sm: sized by width like a normal banner (text stays readable, card may sit below the fold — same "scroll to see it all" pattern the rest of this page already uses on mobile). sm and up: height derives ONLY from width via the artwork's own aspect ratio (sm:aspect-[...]) — no max-height clamp, so the box's aspect ratio always exactly matches the content's: full width and zero cropping, guaranteed, on every viewport. The one trade-off is on unusually short/wide windows the section can extend slightly past one screen (a small scroll) rather than ever letterboxing or cropping real content — matches the explicit "full-width border, content adjusts to it" requirement over the earlier "always exactly one screen" one. */}

); }