nextui/packages/storybook/.storybook/welcome.stories.mdx

import {Meta, Story} from "@storybook/addon-docs";
import {link, button} from "@nextui-org/theme";

<Meta title="Welcome" />

<br />

# Welcome 👋🏼

<br />

## NextUI Version 2 - Design system

<br />

<p className="!text-base !text-foreground max-w-xl">
  Here you can find the guidelines, components APIs and examples to help you build your next project
  with NextUI. This version is still in development, so some components are not yet available. You
  can follow the progress in the{" "}
  <a
    href="https://github.com/orgs/nextui-org/projects/2/views/1?pane=issue&itemId=20037976"
    target="_blank"
    className={link()}
  >
    project board
  </a>
  .
</p>

<div className="flex flex-col gap-8">
  <div className="flex flex-row justify-start items-center mt-8 gap-4">
    <a
      href="https://nextui.org"
      target="_blank"
      className={button({
        color: "primary",
        variant: "flat",
        className: "!text-primary gap-1 [&>svg]:fill-none",
      })}
    >
      Website (v1)
      <svg
        aria-hidden="true"
        className="flex stroke-current self-center"
        fill="none"
        height="1em"
        shapeRendering="geometricPrecision"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.5"
        viewBox="0 0 24 24"
        width="1em"
      >
        <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
        <path d="M15 3h6v6" />
        <path d="M10 14L21 3" />
      </svg>
    </a>
    <a
      href="https://github.com/nextui-org/nextui"
      target="_blank"
      className={button({
        color: "neutral",
        variant: "bordered",
        className: "!text-foreground gap-1 [&>svg]:fill-none",
      })}
    >
      Github
      <svg
        aria-hidden="true"
        className="flex stroke-current self-center"
        fill="none"
        height="1em"
        shapeRendering="geometricPrecision"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.5"
        viewBox="0 0 24 24"
        width="1em"
      >
        <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
        <path d="M15 3h6v6" />
        <path d="M10 14L21 3" />
      </svg>
    </a>
    <a
      href="https://discord.gg/9b6yyZKmH4"
      target="_blank"
      className={button({
        color: "neutral",
        variant: "bordered",
        className: "!text-foreground gap-1 [&>svg]:fill-none",
      })}
    >
      Discord
      <svg
        aria-hidden="true"
        className="flex stroke-current self-center"
        fill="none"
        height="1em"
        shapeRendering="geometricPrecision"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.5"
        viewBox="0 0 24 24"
        width="1em"
      >
        <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
        <path d="M15 3h6v6" />
        <path d="M10 14L21 3" />
      </svg>
    </a>
  </div>

  <div className="flex items-center gap-2">
  <svg width="30" height="30" viewBox="0 0 374 374" >
    <g transform="translate(-773 -353)">
      <rect width="374" height="374" rx="99" transform="translate(773 353)" fill="currentColor"/>
      <path d="M127.309-159.273h14.543V-53.817a55.656,55.656,0,0,1-7.621,29.047A54.131,54.131,0,0,1,113.039-4.627Q99.468,2.722,81.5,2.722q-17.887,0-31.5-7.388A54.429,54.429,0,0,1,28.775-24.809a55.451,55.451,0,0,1-7.621-29.008V-159.273H35.7V-54.828a44.65,44.65,0,0,0,5.677,22.592A40.568,40.568,0,0,0,57.355-16.643q10.3,5.677,24.148,5.677t24.186-5.677a40.232,40.232,0,0,0,15.982-15.593,44.893,44.893,0,0,0,5.638-22.592Zm71.393,0V0H184.159V-159.273Z" transform="translate(851 620)" fill="currentColor" className="text-background"/>
    </g>
  </svg>

  <svg
    height="24.48"
    viewBox="0 0 100 24.48"
    width="100"
  >
    <path fill="currentColor" d="M18.745 0v24.069h-2.139L2.386 3.914h-.188v20.155H0V0h2.127l14.267 20.179h.188V0zm13.256 24.445a7.934 7.934 0 01-4.371-1.181 7.79 7.79 0 01-2.85-3.279 11.069 11.069 0 01-1-4.836 11.2 11.2 0 011-4.848 8.1 8.1 0 012.785-3.326 7.175 7.175 0 014.119-1.2 7.689 7.689 0 012.832.535 7.042 7.042 0 012.45 1.634 7.836 7.836 0 011.722 2.756 11.015 11.015 0 01.635 3.931v1.034h-12.1V13.82h9.963a6.882 6.882 0 00-.7-3.132 5.55 5.55 0 00-1.939-2.2 5.11 5.11 0 00-2.862-.811 5.121 5.121 0 00-3.02.917 6.251 6.251 0 00-2.039 2.421 7.513 7.513 0 00-.746 3.291v1.1a8.822 8.822 0 00.746 3.755 5.751 5.751 0 002.124 2.487 5.9 5.9 0 003.255.881 5.873 5.873 0 002.251-.4 4.843 4.843 0 001.634-1.075 4.729 4.729 0 001-1.487l1.986.646a5.885 5.885 0 01-1.346 2.1 6.889 6.889 0 01-2.327 1.545 8.251 8.251 0 01-3.202.587zm12.74-18.428l4.654 7.7 4.654-7.7h2.433l-5.806 9.026 5.806 9.026H54.05l-4.654-7.451-4.655 7.451H42.32l5.735-9.026-5.735-9.026zm23.246 0v1.822h-8.615V6.017zm-5.923-4.325h2.1v17.664a3.414 3.414 0 00.388 1.769 2.159 2.159 0 001.011.9 3.363 3.363 0 001.328.264 4.045 4.045 0 00.705-.053q.294-.053.517-.112l.447 1.892a5.433 5.433 0 01-.752.217 5.162 5.162 0 01-1.1.1 5.1 5.1 0 01-2.215-.505 4.337 4.337 0 01-1.743-1.499 4.3 4.3 0 01-.682-2.48zM89.211 0h2.2v15.936a8.411 8.411 0 01-1.152 4.389 8.18 8.18 0 01-3.2 3.044 9.854 9.854 0 01-4.77 1.111 9.82 9.82 0 01-4.76-1.116 8.225 8.225 0 01-3.208-3.044 8.379 8.379 0 01-1.152-4.384V0h2.2v15.783a6.747 6.747 0 00.858 3.414 6.13 6.13 0 002.415 2.356 7.444 7.444 0 003.649.858 7.478 7.478 0 003.655-.858 6.08 6.08 0 002.413-2.353 6.784 6.784 0 00.852-3.414zM100 0v24.069h-2.2V0z" />
  </svg>
  </div>
</div>

<br />

<div class="block text-xs text-neutral-400">
  Last updated on <time datetime="2023-03-07">April 11, 2023</time>
</div>