import { Meta } from '@storybook/blocks';
import StableBadge from '../assets/stable-badge.png';
import ExperimentalBadge from '../assets/experimental-badge.png';
import HierarchyExample from '../assets/hierarchy-example.png';

<Meta title="Getting Started/Editors & Designers/Introduction & Usage" />

<style>
  {`
  figcaption {
    font-size: 0.8em;
    color: #999;
    margin-top: 0.5em;
  }
  `}
</style>

<h1 className="text-center">Introduction & Usage</h1>

Welcome to our design system! This guide will help content editors and designers create consistent,
user-friendly websites using our pre-built components.

Our design system provides a collection of reusable components and patterns that work together
to create cohesive user experiences. Whether you're building a new page or updating existing content,
these components will help you maintain consistency while saving time and effort.

As you explore our design system, you'll find everything from basic elements like buttons and forms
to complex patterns for navigation, data display, and user interaction.

<h2>Ready-to-Use vs. Preview Components</h2>

Our design system offers two types of components: ready-to-use and preview. Ready-to-use components have been thoroughly tested and are safe to use
in your live websites. Preview components are still being refined and may change or be removed over time. For your website projects, we recommend
sticking with the ready-to-use components to ensure the best experience for your visitors. If you request the use of a preview component, please
be aware that the development team may deny your request.

<h3>How to Tell Components Apart</h3>

We've made it easy to identify which components you can use right away. Look for these visual indicators:

- Ready-to-use components show a green "Stable" badge at the top of the page
- Preview components show a red "Experimental" badge
- In the left menu, you'll find ready-to-use components under "Components"
- Preview components are listed separately under "Experimental"

<figure>
  <img src={StableBadge} alt="Green stable badge" />
  <figcaption>Ready-to-use component indicator</figcaption>
</figure>

<figure>
  <img src={ExperimentalBadge} alt="Red experimental badge" />
  <figcaption>Preview component indicator</figcaption>
</figure>

<h2>Exploring Components</h2>

The lefthand menu is your gateway to discovering all our available components and design patterns. Use the
menu to find the components you need and view examples of how to use the components.

<figure>
  <img
    src={HierarchyExample}
    alt="The menu hierarchy of this site. Ordered: 'Getting Started', 'Components', 'Experimental'"
  />
  <figcaption>Component menu hierarchy in the lefthand menu</figcaption>
</figure>

Each component comes with live examples that you can interact with, and many components can be
customized to suit your needs. Look for the 'Docs' page, where you'll find:

- Different ways to use the component
- Options to customize its appearance and behavior
- Interactive controls to preview different settings

Pages beneath the 'Docs' page are additional examples of the component in use.