Components

# HowItWorks

Shows a visually appealing section that breaks down your product or service into three simple steps. Each step includes an icon, title, description, and step number badge.

# Basic Usage

The component is self-contained and doesn't require any props. It uses a predefined array of steps with icons, titles, and descriptions.

To use the component, simply import and add it to your page:

        import HowItWorks from "$lib/components/HowItWorks.svelte"

      

Then use it in your template:

        <HowItWorks />

      

# Structure

The component displays:

• A main heading "How It Works"
• A subheading describing the process
• Three cards in a grid layout, each containing:
  • Step number badge
  • Icon
  • Title
  • Description

# Styling

The component uses DaisyUI classes and includes:

• Responsive grid layout (3 columns on medium screens and up)
• Card hover effects with elevation and translation
• Blur backdrop filter
• Primary color accents for badges and icons
• Consistent spacing and typography

# Customization

To modify the steps, edit the steps array in the component:

        const steps = [
    {
        title: "Your Title",
        description: "Your description",
        icon: `<svg>...</svg>` // SVG icon markup
    },
    // ... more steps
];

      

Each step object requires:

• title (string): The step title
• description (string): The step description
• icon (string): SVG markup for the step icon

# Visual Features

• Hover animations on cards
• Blur effect backdrop
• Responsive design
• Consistent spacing and alignment
• Primary color accents
• Step number badges
• Centered layout with maximum width constraints