import pkg from '../../../../package.json'
import { Meta } from '@storybook/addon-docs/blocks'
import { Tag } from '../../../components'
import { WelcomeCard } from '../../components/WelcomeCard'

<Meta title="Introduction/Welcome" />
<img src="/BlocksLogo.svg" alt="Blocks UI" style={{ height: '120px' }} />
<div className="h-8" />
<Tag variant="success">
  <strong>Version</strong> {pkg.version}
</Tag>
Welcome to Blocks UI – your ChainlinkLabs design system library! Built with
reusability, speed, and simplicity in mind, our library follows an atomic design
methodology to provide scalable, modular components that eliminate low-level
decision-making.
<div className="mt-8 grid gap-4 md:grid-cols-3">
  <WelcomeCard
    title="Getting Started"
    description="Learn how to install and set up Blocks UI in your project. Follow our quick start guide to begin using our components."
    link={{
      text: 'View Getting Started Guide →',
      url: '/?path=/docs/introduction-getting-started--docs',
    }}
  />
  <WelcomeCard
    title="Changelog"
    description="Stay up to date with the latest changes, new features, and improvements in Blocks UI."
    link={{
      text: 'View Changelog →',
      url: '/?path=/docs/introduction-changelog--docs',
    }}
  />
  <WelcomeCard
    title="Component Lifecycle"
    description="Understand how components progress through different stages from experimental to stable."
    link={{
      text: 'View Component Lifecycle →',
      url: '/?path=/docs/introduction-component-lifecycle--docs',
    }}
  />

  <WelcomeCard
    title="Contributing"
    description="Help us improve Blocks UI by using it, joining our Slack channel, and providing feedback."
    link={{
      text: 'View Contributing Guide →',
      url: '/?path=/docs/introduction-contributing--docs',
    }}
  />
  <WelcomeCard
    title="Dark Mode"
    description="Learn how to implement dark mode in your application using our semantic design tokens."
    link={{
      text: 'View Dark Mode Guide →',
      url: '/?path=/docs/theme-dark-mode--docs',
    }}
  />
</div>