[Feature] Implement Advanced Scalable SVG Card System

[nickborrello]

We need to implement a set of reusable React card components that support complex, non-rectangular shapes and ornate borders. Standard CSS borders and box-shadows are insufficient for the desired visual fidelity.
This implementation requires using SVGs to ensure patterns remain crisp at any screen size without pixelation.
Technical Approach:
The system should support three distinct rendering modes based on the design requirements:

• 9-Slice Scaling: For ornate borders that stretch variable widths/heights.
• CSS Masking: For non-rectangular containers (hexagons, shards).
• Inline SVG: For dynamic paths that require prop-based coloring (hover states, error states).
  Implementation Checklist
  Phase 1: Asset Preparation
• Audit design files and export border/shape assets as optimized SVGs.
• Clean up SVG XML (remove unused IDs, metadata, and minimize decimal precision).
• For 9-Slice borders: Ensure the SVG is designed on a grid that allows for clear slicing (top-left, top, top-right, etc.).
  Phase 2: Component Architecture
• Create base Card component interface.
• Implement BorderImageCard component (Logic: CSS border-image).
  • Must accept borderSlice and borderSource props.
• Implement MaskedCard component (Logic: CSS mask-image).
  • Must accept a shapeSrc prop.
• Implement DynamicVectorCard component (Logic: Inline SVG).
  • Must use preserveAspectRatio="none" on the SVG.
  • Must use vector-effect="non-scaling-stroke" on paths to prevent border distortion during resize.
    Phase 3: Integration & Testing
• Ensure text content respects the safe areas (padding) of irregular shapes so content is not clipped.
• Verify responsiveness: Cards must resize fluidly without distorting the aspect ratio of the decorative corners.
• Test accessibility: Ensure hidden decorative SVGs have aria-hidden="true".
  Technical Reference / Snippets
  For 9-Slice (Borders)
  .card-nine-slice {
  border: 20px solid transparent;
  border-image-source: url('/assets/borders/ornate-border.svg');
  border-image-slice: 30 fill; /* Adjust based on SVG grid /
  border-image-repeat: round; / Prevents gaps in the pattern */
  }

For Non-Scaling Strokes (Inline SVG)
When embedding the SVG directly in React, ensure the paths do not get "fat" when the card stretches:

Acceptance Criteria

• Cards scale from mobile to desktop sizes without image artifacting.
• Content inside the cards does not bleed outside the irregular boundaries.
• Decorative elements are ignored by screen readers.
  Would you like me to create the initial React component code for the "9-Slice" wrapper mentioned in this issue?