valtech-components 2.0.794 → 2.0.795

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

@@ -0,0 +1,680 @@
+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>
+\`\`\`
+        `,
+      },
+    },
+  },
+};