import { Canvas, Controls, Meta } from '@storybook/blocks'
import { ResourceLinks, KAIOInstallation } from '~storybook/components'
import * as BrandMoment from './BrandMoment.stories'

<Meta of={BrandMoment} />

# BrandMoment

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/BrandMoment"
  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?type=design&node-id=9-132873&mode=design&t=ITSkv2Fu67xK6kBC-0"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061589/Brand+Moment"

/>

<KAIOInstallation exportNames="BrandMoment" />

## Overview

A brand moment is a page that showcases the brand's vibrant animations and illustration. The page provides an engaging experience for users when they reach these junction, helping to create a strong connection between the brand and product.

<Canvas of={BrandMoment.Playground} />
<Controls of={BrandMoment.Playground} />

## Variant

### Informative

<Canvas of={BrandMoment.Informative} />

### Success

<Canvas of={BrandMoment.Success} />

### Warning

<Canvas of={BrandMoment.Warning} />