import { Meta, Subtitle } from '@storybook/addon-docs/blocks'
import { Card, CardWithCover, CardHeader, CardTitle, CardContent, CardActions, Link } from '../blocks/Cards'

<Meta title="Introduction/1-Welcome" />

<img src="/images/unity-illustrations-cover.jpg" alt="Unity illustrations cover" style={{ width: '100%', marginBottom: '2rem' }} />

# Unity Illustrations

<Subtitle>Unity Illustrations is the Illustration library for the Unity Design system. Illustrations are scalable graphics that can be used to represent concepts, objects, or actions, and create visual interest and appeal. They can be static or animated.</Subtitle>

<section className="uy:grid uy:grid-cols-1 uy:gap-150 uy:sm:grid-cols-2">
    <Card>
        <CardHeader>
            <CardTitle>Getting Started</CardTitle>
        </CardHeader>
        <CardContent>
            <p className="sb-unstyled uy:m-0">Set up a new project with Unity Illustrations or add it to an existing project.</p>
        </CardContent>
        <CardActions>
            <Link href="/?path=/docs/introduction-2-getting-started--docs">Get Started</Link>
        </CardActions>
    </Card>
    <Card>
        <CardHeader>
            <CardTitle>Usage</CardTitle>
        </CardHeader>
        <CardContent>
            <p className="sb-unstyled uy:m-0">Learn how to use the Illustrations in your project.</p>
        </CardContent>
        <CardActions>
            <Link href="/?path=/docs/introduction-3-usage--docs">Learn to use</Link>
        </CardActions>
    </Card>
</section>

## Our approach

### Performant

Unity Illustrations are designed to be lightweight and tree-shakable, ensuring that you only bundle the illustrations you need.

### Easy to use

Unity Illustrations are easy to use and integrate into your project. You can use them in any React project.

### Accessible

Unity Illustrations are built with accessibility in mind and follow the best practices for creating accessible illustrations.

## Related packages

Unity Illustrations is part of the Unity Design System, and is particularly thought out to work with the Unity components library. Here are the main packages you might want to use in conjunction with Unity Illustrations:

<section className="uy:grid uy:grid-cols-1 uy:gap-150 uy:sm:grid-cols-2">
    <CardWithCover coverSrc="images/unity-themes-cover.png" coverAlt="Unity themes">
        <CardHeader>
            <CardTitle>Unity themes</CardTitle>
        </CardHeader>
        <CardContent>
            <p className="sb-unstyled uy:m-0">
                Unity themes provides the base implementation of the foundational principles of the Unity Design system as a TailwindCSS preset.
            </p>
        </CardContent>
        <CardActions>
            <Link href="https://unity-theme.payfit.io/" target="_blank" rel="noopener noreferrer">Visit Unity themes</Link>
        </CardActions>
    </CardWithCover>
    <CardWithCover coverSrc="images/unity-components-cover.png" coverAlt="Unity components">
        <CardHeader>
            <CardTitle>Unity components</CardTitle>
        </CardHeader>
        <CardContent>
            <p className="sb-unstyled uy:m-0">
                Unity components is a library of React components that implement the Unity Design system.
            </p>
        </CardContent>
        <CardActions>
            <Link href="https://unity-components.payfit.io/" target="_blank" rel="noopener noreferrer">Visit Unity components</Link>
        </CardActions>
    </CardWithCover>
</section>

## Need help?

If you have any questions or a request related to Unity Illustrations, feel free to reach out to the Frontend Framework team on Slack. If you need to know more about the foundations and guidelines of Unity, visit the design system's main documentation.

<section className="uy:grid uy:grid-cols-1 uy:gap-150 uy:sm:grid-cols-2">
    <Card>
        <CardHeader>
            <CardTitle>Contact the team</CardTitle>
        </CardHeader>
        <CardContent>
            <p className="sb-unstyled uy:m-0">Send us any questions, help requests or bug reports to The Front-end Framework's team slack channel</p>
        </CardContent>
        <CardActions>
            <Link href="https://payfit.slack.com/archives/C05UJ6A1FJT" target="_blank" rel="noopener noreferrer">#ask-frontend-framework</Link>
        </CardActions>
    </Card>
    <Card>
        <CardHeader>
            <CardTitle>Payfit.design</CardTitle>
        </CardHeader>
        <CardContent>
            <p className="sb-unstyled uy:m-0">Learn more about the design foundation and component usage guidelines of Unity</p>
        </CardContent>
        <CardActions>
            <Link href="https://www.payfit.design/24f360409/p/35fcc1-payfit-design-system" target="_blank" rel="noopener noreferrer">Visit payfit.design</Link>
        </CardActions>
    </Card>
</section>