{title}

import { cn } from "@/lib/utils" const shapeSvgClass = "w-full fill-background text-foreground" const flipClasses = { none: "", /** Center origin keeps flips inside the viewBox; edge origins mirror the path out of frame. */ vertical: "origin-center -scale-y-100", horizontal: "origin-center -scale-x-100", both: "origin-center -scale-x-100 -scale-y-100", } as const export type BandShapeFlip = keyof typeof flipClasses export interface BandShapeProps { path: string viewBox: string flip?: BandShapeFlip className?: string /** Accessible name; defaults to a generic label when omitted. */ title?: string } /** * Generic section ornament: pass a closed clockwise `path` plus `viewBox`. * Use `flip` for mirrored top/bottom or left/right trims (mirrors around the viewBox center). */ export function BandShape({ path, viewBox, flip = "none", className, title = "Decorative section shape", }: BandShapeProps) { return ( ) } /** Band: flat top with a single downward angle on the right. Flip vertical for a bottom trim. */ export function FlatSingleAngleBandSvg({ className }: { className?: string }) { return ( ) } const CASTLE_WALL_TEETH = 12 const CASTLE_WALL_BOTTOM_Y = 179 const CASTLE_WALL_TOP_Y = 46 const CASTLE_WALL_CRENE_Y = 106 const CASTLE_WALL_X_MIN = 1 const CASTLE_WALL_X_MAX = 2399 function fmtPathX(x: number): string { const r = Math.round(x * 1000) / 1000 return Number.isInteger(r) ? String(r) : r.toFixed(3) } /** Even battlement: `toothCount` merlons, equal merlon and crene run in x (span 1–2399). */ export function castleWallBandPath(toothCount: number): string { if (toothCount < 1) { throw new RangeError("castleWallBandPath: toothCount must be >= 1") } const span = CASTLE_WALL_X_MAX - CASTLE_WALL_X_MIN const parts = [ `M${CASTLE_WALL_X_MIN} ${CASTLE_WALL_BOTTOM_Y}H${CASTLE_WALL_X_MAX}V${CASTLE_WALL_TOP_Y}`, ] for (let i = 0; i < toothCount; i++) { const xMerlonEnd = CASTLE_WALL_X_MAX - ((2 * i + 1) * span) / (2 * toothCount) const xCreneEnd = CASTLE_WALL_X_MAX - ((2 * i + 2) * span) / (2 * toothCount) parts.push( `H${fmtPathX(xMerlonEnd)}`, `V${CASTLE_WALL_CRENE_Y}`, `H${fmtPathX(xCreneEnd)}`, `V${CASTLE_WALL_TOP_Y}` ) } parts.push(`V${CASTLE_WALL_BOTTOM_Y}Z`) return parts.join("") } /** * Band: crenellated / battlement top (castle-wall silhouette) — 12 alternating merlons and crenels. * Flip vertical for a bottom trim with teeth pointing downward. */ export function CastleWallBandSvg({ className }: { className?: string }) { return ( ) } /** Band: symmetric shallow “V” on top; mirror vertically for an inverted profile. */ export function SymmetricVBandSvg({ className }: { className?: string }) { return ( ) } /** * Band: twin V-notches along the top edge (skill gallery); flip vertical for a bottom crown. * Lighter than dual-notch full frame or single center tab. */ export function NotchedTopBandSvg({ className }: { className?: string }) { return ( ) } const ZIGZAG_X_MIN = 1 const ZIGZAG_X_MAX = 2399 const ZIGZAG_BOTTOM_Y = 199 const ZIGZAG_PEAK_Y = 2 const ZIGZAG_VALLEY_Y = 100 /** Clockwise sawtooth top / flat bottom; period = 2400 / `teeth` on the wide grid (8 / 12 / 16 / 24 typical). */ export function zigzagSawtoothBandPath(teeth: number): string { if (teeth < 2) { throw new RangeError("zigzagSawtoothBandPath: teeth must be >= 2") } const period = 2400 / teeth const parts = [`M${ZIGZAG_X_MIN} ${ZIGZAG_BOTTOM_Y}`, `V${ZIGZAG_VALLEY_Y}`] for (let i = 0; i < teeth - 1; i++) { const peakX = Math.round((i + 0.5) * period) const valleyX = Math.round((i + 1) * period) parts.push(`L${peakX} ${ZIGZAG_PEAK_Y}`, `L${valleyX} ${ZIGZAG_VALLEY_Y}`) } const lastPeak = Math.round((teeth - 0.5) * period) parts.push( `L${lastPeak} ${ZIGZAG_PEAK_Y}`, `L${ZIGZAG_X_MAX} ${ZIGZAG_VALLEY_Y}`, `V${ZIGZAG_BOTTOM_Y}`, `H${ZIGZAG_X_MIN}`, "Z" ) return parts.join("") } /** * Band: zigzag / sawtooth profile (sharp peaks & valleys). Flip vertical with `origin-bottom -scale-y-100` for a bottom trim. * @param teeth — default 12 (~200px period); use 8 / 16 / 24 for chunkier / finer zigzag. */ export function ZigzagSawtoothBandSvg({ className, teeth = 12, }: { className?: string teeth?: number }) { return ( ) } /** * Band: flat top with a single centered rectangular tab (SKILL — 2400×200). Tab ~300px; flip vertical for bottom variant. */ export function CenterTabBandSvg({ className }: { className?: string }) { return ( ) } /** Band: parallelogram slash — diagonal left edge, flat top, vertical right. */ export function DiagonalSlashBandSvg({ className }: { className?: string }) { return ( ) } /** Band: right-pointing arrow / chevron (flat top & bottom, tip at right center). */ export function ArrowChevronBandSvg({ className }: { className?: string }) { return ( ) } /** Band: five equal steps descending along the top edge (480px treads, 60px risers). */ export function StaircaseBandSvg({ className }: { className?: string }) { return ( ) } /** * Band: stepped-out segment on the left edge plus steep angled transition on the right (SKILL §3). * Flip vertical for a bottom-oriented variant pinned to the section edge. */ export function SteppedLeftSteepRightBandSvg({ className, }: { className?: string }) { return ( ) } /** * Panel: inset stepped frame — outer rectangle with rectangular bite inward on all four sides * (skill gallery). Distinct from dual-notch ornamental frame. */ export function SteppedInsetFrameSvg({ className }: { className?: string }) { return ( ) } /** Panel: chamfered rectangle — equal angled cuts on all four corners; good for hero or card frames. */ export function AngledCornerPanelSvg({ className }: { className?: string }) { return ( ) } const ornamentResponsiveClass = "origin-top-right max-md:translate-x-3 max-md:scale-x-250 max-md:scale-y-125" /** Full ornamental frame with matching notches on both sides (dual side tabs). */ export function DualSideNotchFrameSvg({ className }: { className?: string }) { return ( ) } /** * Narrow top band: shallow slope on the left, steep apex at the upper-right. * Single subpath (no corner fillet) so the outline stays one clean quadrilateral. */ export function TopBandSteepRightSvg({ className }: { className?: string }) { return ( ) } /** * Symmetric steep corners: left shelf fillet matches the right (12.73 unit handle, P1 along the * steep diagonal for a clean tangent). Same shelf + right path as TopBandSteepRightSvg. */ export function TopBandSteepBothSvg({ className }: { className?: string }) { return ( ) } /** * Horizontal mirror of TopBandSteepRightSvg — steep apex at the upper-left, shallow * slope on the right. */ export function TopBandSteepLeftSvg({ className }: { className?: string }) { return ( ) } /** Bottom edge band — vertical flip of TopBandSteepRightSvg for section footers. */ export function BottomBandSteepRightSvg({ className }: { className?: string }) { return ( ) } /** Low undulating strip along the bottom edge (smooth repeating wave). */ export function WavyBottomEdgeSvg({ className }: { className?: string }) { return ( ) } /** * Shorter top ornament: one centered upward tab and filleted upper corners on a 2402-wide * grid (proportions aligned with DualSideNotchFrameSvg shoulders). */ export function CenterTabTopBandSvg({ className }: { className?: string }) { return ( ) } /** Tall panel with angled header and vertical sides — hero / feature backdrop. */ export function TallAngledHeroPanelSvg({ className }: { className?: string }) { return ( ) } /** * Truncated pyramid profile: four up-steps, flat top plateau, four down-steps (symmetric). * Closed band — filled lid + stroke — aligned to 2400-wide ornaments. */ export function PyramidStepBandSvg({ className }: { className?: string }) { return ( ) } /** * Truncated pyramid profile: 12 up-steps, flat top plateau, 12 down-steps (symmetric). * Closed band — filled lid + stroke — aligned to 2400-wide ornaments. */ export function PyramidStepBandLotsOfStepsSvg({ className, }: { className?: string }) { return ( ) }

Svg Bands

Instalação