import { Meta } from '@storybook/addon-docs/blocks';
import Code from './assets/code-brackets.svg';
import Colors from './assets/colors.svg';
import Comments from './assets/comments.svg';
import Direction from './assets/direction.svg';
import Flow from './assets/flow.svg';
import Plugin from './assets/plugin.svg';
import Repo from './assets/repo.svg';
import StackAlt from './assets/stackalt.svg';

<Meta title='Introduction' />

<style>
	{`
  .subheading {
    --mediumdark: '#999999';
    font-weight: 900;
    font-size: 13px;
    color: #999;
    letter-spacing: 6px;
    line-height: 24px;
    text-transform: uppercase;
    margin-bottom: 12px;
    margin-top: 40px;
  }

  .link-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 10px;
  }

  @media (min-width: 620px) {
    .link-list {
      row-gap: 20px;
      column-gap: 20px;
      grid-template-columns: 1fr 1fr;
    }
  }

  @media all and (-ms-high-contrast:none) {
  .link-list {
      display: -ms-grid;
      -ms-grid-columns: 1fr 1fr;
      -ms-grid-rows: 1fr 1fr;
    }
  }

  .link-item {
    display: block;
    padding: 20px 30px 20px 15px;
    border: 1px solid #00000010;
    border-radius: 5px;
    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
    color: #333333;
    display: flex;
    align-items: flex-start;
  }

  .link-item:hover {
    border-color: #1EA7FD50;
    transform: translate3d(0, -3px, 0);
    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
  }

  .link-item:active {
    border-color: #1EA7FD;
    transform: translate3d(0, 0, 0);
  }

  .link-item strong {
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
  }

  .link-item img {
    height: 40px;
    width: 40px;
    margin-right: 15px;
    flex: none;
  }

  .link-item span {
    font-size: 14px;
    line-height: 20px;
  }

  .tip {
    display: inline-block;
    border-radius: 1em;
    font-size: 11px;
    line-height: 12px;
    font-weight: 700;
    background: #E7FDD8;
    color: #66BF3C;
    padding: 4px 12px;
    margin-right: 10px;
    vertical-align: top;
  }

  .tip-wrapper {
    font-size: 13px;
    line-height: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .tip-wrapper code {
    font-size: 12px;
    display: inline-block;
  }


  `}
</style>

# Welcome to Facit

UI components are built using **Bootstrap 5**. By combining them, you can create the necessary components.

[**Formik**](https://formik.org/docs/overview) for forms is integrated. You will have a lot of fun while dealing with forms, you will get the results you want without contradicting the design of the project.
In fact, we have another good news, validation is also included.

<div className='subheading'>Summary</div>

<div className='link-list'>
	<span className='link-item'>
		<img src={Plugin} alt='plugin' />
		<span>
			<strong>Bootstrap API</strong>
			The utility API is a Sass-based tool to generate utility classes.
		</span>
	</span>
	<span className='link-item'>
		<img src={StackAlt} alt='Build' />
		<span>
			<strong>Combining</strong>
			You can create it by combining your necessary components.
		</span>
	</span>
	<span className='link-item'>
		<img src={Colors} alt='colors' />
		<span>
			<strong>Colors</strong>
			You can easily change the colors to suit your project.
		</span>
	</span>
	<span className='link-item'>
		<img src={Flow} alt='flow' />
		<span>
			<strong>Charts</strong>
			You can easily include 16 different types of graphics in your project and have harmonious
			designs.
		</span>
	</span>
	<span className='link-item'>
		<img src={Repo} alt='repo' />
		<span>
			<strong>Documentation</strong>
			Detailed information in the presentation of components.
		</span>
	</span>
	<span className='link-item'>
		<img src={Direction} alt='direction' />
		<span>
			<strong>Demo Pages</strong>
			Examples of how to use it are provided on the sample pages.
		</span>
	</span>
	<span className='link-item'>
		<img src={Code} alt='code' />
		<span>
			<strong>Clean Code</strong>
			Clean code with eslint, stylelint and prettier.
		</span>
	</span>
	<span className='link-item'>
		<img src={Comments} alt='comments' />
		<span>
			<strong>Support</strong>
			You can always get answers to your questions. <a href='mailto:info@omtanke.studio'>
				info@omtanke.studio
			</a>.
		</span>
	</span>
</div>

<div className='tip-wrapper'>
	<span className='tip'>Note</span>Will be added soon in sample assembled parts.
</div>