valtech-components 2.0.691 → 2.0.692

package/src/lib/components/molecules/glow-card/glow-card.stories.ts

@@ -1,680 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { GlowCardComponent } from './glow-card.component';
-import { GlowCardMetadata, createGlowCardProps } from './types';
-
-const SAMPLE_IMAGE = 'https://picsum.photos/seed/glowcard/800/450';
-const SAMPLE_IMAGE_2 = 'https://picsum.photos/seed/glowcard2/800/450';
-const SAMPLE_IMAGE_3 = 'https://picsum.photos/seed/glowcard3/800/450';
-const SAMPLE_IMAGE_SQUARE = 'https://picsum.photos/seed/glowsquare/400/400';
-
-/**
- * Helper to create GlowCardMetadata with defaults
- */
-const createProps = (overrides: Partial<GlowCardMetadata> = {}): GlowCardMetadata =>
-  createGlowCardProps({
-    imageSrc: SAMPLE_IMAGE,
-    imageAlt: 'Sample card image',
-    title: 'Try just-announced services free with AWS Free Tier',
-    description: 'Get started with some of the newest AWS products and services at no cost for up to 6 months.',
-    cta: {
-      text: 'Create free account',
-      url: '/signup',
-      type: 'internal',
-    },
-    ...overrides,
-  });
-
-const meta: Meta<GlowCardComponent> = {
-  title: 'Molecules/GlowCard',
-  component: GlowCardComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, GlowCardComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Card configuration object',
-      control: 'object',
-    },
-    onClick: {
-      action: 'clicked',
-      description: 'Event emitted when card, image, or CTA is clicked',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-glow-card
-
-A card component featuring:
-- **Image with zoom effect** on hover (scale 1.08)
-- **Animated CTA link** that expands from icon-only to text + icon
-- **Dynamic glow effect** that adapts to light/dark mode
-
-### Features
-
-- Automatic glow based on theme (shadow in light mode, luminous glow in dark mode)
-- Configurable glow color and intensity (subtle, medium, intense)
-- Multiple aspect ratio options (16:9, 4:3, 1:1, 3:2, 21:9)
-- i18n support for title, description, and CTA text
-- Accessible with reduced motion support
-- Responsive design
-
-### Usage
-
-\`\`\`html
-<val-glow-card
-  [props]="{
-    imageSrc: 'image-url.jpg',
-    imageAlt: 'Description',
-    title: 'Card Title',
-    description: 'Card description...',
-    cta: { text: 'Learn More', url: '/page', type: 'internal' }
-  }"
-  (onClick)="handleClick($event)"
-></val-glow-card>
-\`\`\`
-
-### Glow Configuration
-
-\`\`\`typescript
-glow: {
-  enabled: true,        // Enable/disable glow effect
-  color: 'primary',     // Ionic color or hex value
-  intensity: 'medium'   // 'subtle' | 'medium' | 'intense'
-}
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<GlowCardComponent>;
-
-// ===== DEFAULT STORY =====
-export const Default: Story = {
-  render: () => ({
-    template: `
-      <div style="max-width: 380px;">
-        <val-glow-card [props]="cardProps"></val-glow-card>
-      </div>
-    `,
-    props: {
-      cardProps: createProps(),
-    },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Default glow card with medium intensity glow effect. Hover to see the image zoom and CTA expand.',
-      },
-    },
-  },
-};
-
-// ===== CUSTOM GLOW COLORS =====
-export const CustomGlowColor: Story = {
-  render: () => ({
-    template: `
-      <p style="margin: 0 0 16px; font-family: system-ui; font-size: 14px; color: #666;">
-        <strong>Hover over each card</strong> to see the colored glow effect
-      </p>
-      <div style="display: flex; gap: 24px; flex-wrap: wrap;">
-        <div style="max-width: 320px;">
-          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Primary (purple)</p>
-          <val-glow-card [props]="primaryProps"></val-glow-card>
-        </div>
-        <div style="max-width: 320px;">
-          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Success (green)</p>
-          <val-glow-card [props]="successProps"></val-glow-card>
-        </div>
-        <div style="max-width: 320px;">
-          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Danger (red)</p>
-          <val-glow-card [props]="dangerProps"></val-glow-card>
-        </div>
-      </div>
-    `,
-    props: {
-      primaryProps: createProps({
-        title: 'Primary Glow',
-        description: 'Using the default primary color for the glow effect.',
-        glow: { enabled: true, color: 'primary', intensity: 'intense' },
-      }),
-      successProps: createProps({
-        imageSrc: SAMPLE_IMAGE_2,
-        title: 'Success Glow',
-        description: 'Using the success color for a green glow effect.',
-        glow: { enabled: true, color: 'success', intensity: 'intense' },
-        cta: { text: 'Get Started', url: '/start', type: 'internal' },
-      }),
-      dangerProps: createProps({
-        imageSrc: SAMPLE_IMAGE_3,
-        title: 'Danger Glow',
-        description: 'Using the danger color for a red glow effect.',
-        glow: { enabled: true, color: 'danger', intensity: 'intense' },
-        cta: { text: 'Explore', url: '/explore', type: 'internal' },
-      }),
-    },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Glow color can be set to any Ionic color (primary, secondary, success, danger, etc.). Hover to see the colored glow effect.',
-      },
-    },
-  },
-};
-
-// ===== GLOW INTENSITY =====
-export const GlowIntensity: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; gap: 24px; flex-wrap: wrap;">
-        <div style="max-width: 300px;">
-          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Subtle</p>
-          <val-glow-card [props]="subtleProps"></val-glow-card>
-        </div>
-        <div style="max-width: 300px;">
-          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Medium (default)</p>
-          <val-glow-card [props]="mediumProps"></val-glow-card>
-        </div>
-        <div style="max-width: 300px;">
-          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Intense</p>
-          <val-glow-card [props]="intenseProps"></val-glow-card>
-        </div>
-      </div>
-    `,
-    props: {
-      subtleProps: createProps({
-        title: 'Subtle Effect',
-        description: 'A gentle, understated glow for minimal designs.',
-        glow: { enabled: true, intensity: 'subtle' },
-      }),
-      mediumProps: createProps({
-        imageSrc: SAMPLE_IMAGE_2,
-        title: 'Medium Effect',
-        description: 'Balanced glow intensity for most use cases.',
-        glow: { enabled: true, intensity: 'medium' },
-      }),
-      intenseProps: createProps({
-        imageSrc: SAMPLE_IMAGE_3,
-        title: 'Intense Effect',
-        description: 'Bold, eye-catching glow for featured content.',
-        glow: { enabled: true, intensity: 'intense' },
-      }),
-    },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Three intensity levels are available: subtle (minimal shadow), medium (balanced), and intense (prominent glow).',
-      },
-    },
-  },
-};
-
-// ===== ASPECT RATIOS =====
-export const AspectRatios: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; gap: 24px; flex-wrap: wrap; align-items: start;">
-        <div style="width: 300px;">
-          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">16:9 (default - widescreen)</p>
-          <val-glow-card [props]="ratio16x9"></val-glow-card>
-        </div>
-        <div style="width: 280px;">
-          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">4:3 (classic)</p>
-          <val-glow-card [props]="ratio4x3"></val-glow-card>
-        </div>
-        <div style="width: 240px;">
-          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">1:1 (square)</p>
-          <val-glow-card [props]="ratio1x1"></val-glow-card>
-        </div>
-      </div>
-    `,
-    props: {
-      ratio16x9: createProps({
-        aspectRatio: '16:9',
-        title: 'Widescreen Format',
-        description: 'Perfect for video thumbnails and modern layouts.',
-      }),
-      ratio4x3: createProps({
-        aspectRatio: '4:3',
-        imageSrc: SAMPLE_IMAGE_2,
-        title: 'Classic Format',
-        description: 'Traditional aspect ratio for general use.',
-      }),
-      ratio1x1: createProps({
-        aspectRatio: '1:1',
-        imageSrc: SAMPLE_IMAGE_SQUARE,
-        title: 'Square Format',
-        description: 'Ideal for profile cards and social media.',
-      }),
-    },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Multiple aspect ratios available: 16:9, 4:3, 1:1, 3:2, and 21:9 (ultrawide).',
-      },
-    },
-  },
-};
-
-// ===== NO GLOW =====
-export const NoGlow: Story = {
-  render: () => ({
-    template: `
-      <div style="max-width: 380px;">
-        <val-glow-card [props]="cardProps"></val-glow-card>
-      </div>
-    `,
-    props: {
-      cardProps: createProps({
-        title: 'Card Without Glow',
-        description: 'The glow effect is disabled, but image zoom and CTA animations still work.',
-        glow: { enabled: false },
-      }),
-    },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Glow effect can be disabled while keeping other hover animations (image zoom, CTA expand).',
-      },
-    },
-  },
-};
-
-// ===== BORDERED =====
-export const Bordered: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; gap: 24px; flex-wrap: wrap;">
-        <div style="max-width: 320px;">
-          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Default border (medium)</p>
-          <val-glow-card [props]="defaultBorder"></val-glow-card>
-        </div>
-        <div style="max-width: 320px;">
-          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Primary border</p>
-          <val-glow-card [props]="primaryBorder"></val-glow-card>
-        </div>
-        <div style="max-width: 320px;">
-          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Custom color border</p>
-          <val-glow-card [props]="customBorder"></val-glow-card>
-        </div>
-      </div>
-    `,
-    props: {
-      defaultBorder: createProps({
-        title: 'Default Border',
-        description: 'Card with default medium color border.',
-        bordered: true,
-      }),
-      primaryBorder: createProps({
-        imageSrc: SAMPLE_IMAGE_2,
-        title: 'Primary Border',
-        description: 'Card with primary color border.',
-        bordered: true,
-        borderColor: 'primary',
-        glow: { color: 'primary' },
-      }),
-      customBorder: createProps({
-        imageSrc: SAMPLE_IMAGE_3,
-        title: 'Custom Border',
-        description: 'Card with custom hex color border.',
-        bordered: true,
-        borderColor: '#ff6b35',
-        glow: { color: '#ff6b35' },
-      }),
-    },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Cards can have a border with configurable color. Use `bordered: true` and optionally `borderColor` to customize.',
-      },
-    },
-  },
-};
-
-// ===== SHOWCASE =====
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; max-width: 1100px;">
-        <val-glow-card [props]="card1"></val-glow-card>
-        <val-glow-card [props]="card2"></val-glow-card>
-        <val-glow-card [props]="card3"></val-glow-card>
-      </div>
-    `,
-    props: {
-      card1: createProps({
-        imageSrc: 'https://picsum.photos/seed/tech/800/450',
-        title: 'Technology Solutions',
-        description: 'Cutting-edge technology solutions to transform your business operations and drive innovation.',
-        cta: { text: 'Explore Tech', url: '/tech', type: 'internal' },
-        glow: { color: 'primary', intensity: 'medium' },
-      }),
-      card2: createProps({
-        imageSrc: 'https://picsum.photos/seed/design/800/450',
-        title: 'Creative Design',
-        description: 'Beautiful, user-centric designs that captivate audiences and convert visitors into customers.',
-        cta: { text: 'View Portfolio', url: '/design', type: 'internal' },
-        glow: { color: 'secondary', intensity: 'medium' },
-      }),
-      card3: createProps({
-        imageSrc: 'https://picsum.photos/seed/strategy/800/450',
-        title: 'Digital Strategy',
-        description: 'Data-driven strategies to accelerate your digital transformation and stay ahead of competition.',
-        cta: { text: 'Get Started', url: '/strategy', type: 'internal' },
-        glow: { color: 'tertiary', intensity: 'intense' },
-      }),
-    },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'A showcase of multiple glow cards in a responsive grid layout, demonstrating different colors and content.',
-      },
-    },
-  },
-};
-
-// ===== DARK MODE PREVIEW =====
-export const DarkModePreview: Story = {
-  render: () => ({
-    template: `
-      <div class="dark-mode-container">
-        <p class="dark-mode-label">
-          Dark mode preview (hover to see luminous glow effect)
-        </p>
-        <div class="dark-mode-cards">
-          <div class="dark-mode-card-wrapper">
-            <val-glow-card [props]="card1"></val-glow-card>
-          </div>
-          <div class="dark-mode-card-wrapper">
-            <val-glow-card [props]="card2"></val-glow-card>
-          </div>
-          <div class="dark-mode-card-wrapper">
-            <val-glow-card [props]="card3"></val-glow-card>
-          </div>
-        </div>
-      </div>
-      <style>
-        .dark-mode-container {
-          background: #0d0d0d;
-          padding: 32px;
-          border-radius: 16px;
-          --ion-background-color: #0d0d0d;
-          --ion-card-background: #1a1a1a;
-          --ion-text-color: #ffffff;
-          --ion-color-darki: #ffffff;
-          --ion-color-texti: #b0b0b0;
-        }
-        .dark-mode-label {
-          margin: 0 0 24px;
-          font-family: system-ui;
-          font-size: 14px;
-          color: #888;
-        }
-        .dark-mode-cards {
-          display: flex;
-          gap: 24px;
-          flex-wrap: wrap;
-        }
-        .dark-mode-card-wrapper {
-          max-width: 340px;
-        }
-        /* Force dark mode styles on glow-card */
-        .dark-mode-container val-glow-card .glow-card {
-          background: #1a1a1a !important;
-        }
-        .dark-mode-container val-glow-card .glow-card__title {
-          color: #ffffff !important;
-        }
-        .dark-mode-container val-glow-card .glow-card__description {
-          color: #b0b0b0 !important;
-        }
-        /* Luminous glow effect for dark mode */
-        .dark-mode-container val-glow-card .glow-card.glow-enabled:hover {
-          box-shadow:
-            0 0 20px rgb(var(--glow-color-rgb) / 0.35),
-            0 0 40px rgb(var(--glow-color-rgb) / 0.25),
-            0 0 60px rgb(var(--glow-color-rgb) / 0.15) !important;
-        }
-        .dark-mode-container val-glow-card .glow-card.glow-enabled.glow-intense:hover {
-          box-shadow:
-            0 0 32px rgb(var(--glow-color-rgb) / 0.5),
-            0 0 64px rgb(var(--glow-color-rgb) / 0.35),
-            0 0 96px rgb(var(--glow-color-rgb) / 0.2) !important;
-        }
-      </style>
-    `,
-    props: {
-      card1: createProps({
-        title: 'Primary Glow',
-        description: 'The glow effect becomes luminous and colored in dark mode.',
-        glow: { color: 'primary', intensity: 'intense' },
-        bordered: true,
-        borderColor: 'primary',
-      }),
-      card2: createProps({
-        imageSrc: SAMPLE_IMAGE_2,
-        title: 'Success Glow',
-        description: 'Green luminous glow creates an eye-catching effect.',
-        glow: { color: 'success', intensity: 'intense' },
-        cta: { text: 'Learn More', url: '/learn', type: 'internal' },
-        bordered: true,
-        borderColor: 'success',
-      }),
-      card3: createProps({
-        imageSrc: SAMPLE_IMAGE_3,
-        title: 'Danger Glow',
-        description: 'Red luminous glow for attention-grabbing content.',
-        glow: { color: 'danger', intensity: 'intense' },
-        cta: { text: 'View Details', url: '/details', type: 'internal' },
-        bordered: true,
-        borderColor: 'danger',
-      }),
-    },
-  }),
-  parameters: {
-    backgrounds: { default: 'dark' },
-    docs: {
-      description: {
-        story: 'In dark mode, the glow effect becomes luminous with the configured color, creating a neon-like effect. Hover over cards to see the effect.',
-      },
-    },
-  },
-};
-
-// ===== NO IMAGE VARIANT =====
-export const NoImage: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; gap: 24px; flex-wrap: wrap;">
-        <div style="max-width: 400px;">
-          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Con Label y Gradiente</p>
-          <val-glow-card [props]="withLabelProps"></val-glow-card>
-        </div>
-        <div style="max-width: 400px;">
-          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Solo Gradiente</p>
-          <val-glow-card [props]="gradientOnlyProps"></val-glow-card>
-        </div>
-        <div style="max-width: 400px;">
-          <p style="margin: 0 0 8px; font-family: system-ui; font-size: 12px; color: #666;">Color Sólido</p>
-          <val-glow-card [props]="solidColorProps"></val-glow-card>
-        </div>
-      </div>
-    `,
-    props: {
-      withLabelProps: createGlowCardProps({
-        label: 'Getting started',
-        title: 'Getting started resource center',
-        description: 'Explore hands-on tutorials, getting started guides, and learn more about cloud essentials',
-        backgroundColor: 'linear-gradient(135deg, #2dd4bf 0%, #3b82f6 100%)',
-        cta: {
-          url: '/getting-started',
-          type: 'internal',
-        },
-        glow: { enabled: true, color: '#3b82f6', intensity: 'medium' },
-      }),
-      gradientOnlyProps: createGlowCardProps({
-        title: 'Explore our solutions',
-        description: 'Discover powerful tools and services designed to accelerate your digital transformation journey.',
-        backgroundColor: 'linear-gradient(135deg, #7c3aed 0%, #db2777 100%)',
-        cta: {
-          text: 'Learn more',
-          url: '/solutions',
-          type: 'internal',
-        },
-        glow: { enabled: true, color: '#7c3aed', intensity: 'medium' },
-      }),
-      solidColorProps: createGlowCardProps({
-        label: 'New',
-        title: 'Featured announcement',
-        description: 'Check out our latest product updates and new features available now.',
-        backgroundColor: 'primary',
-        cta: {
-          text: 'Read more',
-          url: '/announcements',
-          type: 'internal',
-        },
-        glow: { enabled: true, color: 'primary', intensity: 'intense' },
-      }),
-    },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: `
-Cards without images can use \`backgroundColor\` for solid colors or CSS gradients.
-Add an optional \`label\` to display a pill-style tag above the title.
-
-### Usage
-
-\`\`\`html
-<val-glow-card
-  [props]="{
-    label: 'Getting started',
-    title: 'Resource Center',
-    description: 'Learn more about...',
-    backgroundColor: 'linear-gradient(135deg, #2dd4bf, #3b82f6)',
-    cta: { url: '/start', type: 'internal' }
-  }"
-></val-glow-card>
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-// ===== NO IMAGE WITH IONIC COLORS =====
-export const NoImageIonicColors: Story = {
-  render: () => ({
-    template: `
-      <p style="margin: 0 0 16px; font-family: system-ui; font-size: 14px; color: #666;">
-        <strong>Variante sin imagen usando colores Ionic como fondo</strong>
-      </p>
-      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; max-width: 1100px;">
-        <val-glow-card [props]="primaryProps"></val-glow-card>
-        <val-glow-card [props]="secondaryProps"></val-glow-card>
-        <val-glow-card [props]="tertiaryProps"></val-glow-card>
-        <val-glow-card [props]="successProps"></val-glow-card>
-        <val-glow-card [props]="warningProps"></val-glow-card>
-        <val-glow-card [props]="dangerProps"></val-glow-card>
-      </div>
-    `,
-    props: {
-      primaryProps: createGlowCardProps({
-        label: 'Primary',
-        title: 'Primary Color Card',
-        description: 'Using the primary Ionic color as background. Glow color set to dark for contrast.',
-        backgroundColor: 'primary',
-        cta: { url: '/primary', type: 'internal' },
-        glow: { enabled: true, color: '#1a1a2e', intensity: 'intense' },
-      }),
-      secondaryProps: createGlowCardProps({
-        label: 'Secondary',
-        title: 'Secondary Color Card',
-        description: 'Using the secondary Ionic color. Glow color set to primary for contrast.',
-        backgroundColor: 'secondary',
-        cta: { url: '/secondary', type: 'internal' },
-        glow: { enabled: true, color: 'primary', intensity: 'intense' },
-      }),
-      tertiaryProps: createGlowCardProps({
-        label: 'Tertiary',
-        title: 'Tertiary Color Card',
-        description: 'Using the tertiary Ionic color. Glow color set to dark for contrast.',
-        backgroundColor: 'tertiary',
-        cta: { url: '/tertiary', type: 'internal' },
-        glow: { enabled: true, color: '#1a1a2e', intensity: 'intense' },
-      }),
-      successProps: createGlowCardProps({
-        label: 'Success',
-        title: 'Success Color Card',
-        description: 'Using the success Ionic color. Glow color set to dark for contrast.',
-        backgroundColor: 'success',
-        cta: { url: '/success', type: 'internal' },
-        glow: { enabled: true, color: '#0d3320', intensity: 'intense' },
-      }),
-      warningProps: createGlowCardProps({
-        label: 'Warning',
-        title: 'Warning Color Card',
-        description: 'Using the warning Ionic color. Glow color set to dark for contrast.',
-        backgroundColor: 'warning',
-        cta: { url: '/warning', type: 'internal' },
-        glow: { enabled: true, color: '#3d2e00', intensity: 'intense' },
-      }),
-      dangerProps: createGlowCardProps({
-        label: 'Danger',
-        title: 'Danger Color Card',
-        description: 'Using the danger Ionic color. Glow color set to dark for contrast.',
-        backgroundColor: 'danger',
-        cta: { url: '/danger', type: 'internal' },
-        glow: { enabled: true, color: '#2e0a10', intensity: 'intense' },
-      }),
-    },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: `
-Cards without images can use Ionic colors directly as \`backgroundColor\`.
-The component automatically resolves Ionic color names to CSS variables.
-
-### Available Ionic Colors
-- \`primary\` - Main brand color (purple)
-- \`secondary\` - Supporting color (light purple)
-- \`tertiary\` - Accent color (blue)
-- \`success\` - Positive actions (green)
-- \`warning\` - Alerts (yellow)
-- \`danger\` - Critical actions (red)
-
-### Usage
-\`\`\`html
-<val-glow-card
-  [props]="{
-    label: 'New Feature',
-    title: 'Card Title',
-    description: 'Description...',
-    backgroundColor: 'primary',
-    cta: { url: '/action', type: 'internal' },
-    glow: { color: 'primary', intensity: 'intense' }
-  }"
-></val-glow-card>
-\`\`\`
-        `,
-      },
-    },
-  },
-};