<div class="main">
  <p class="text-align-center">
    <img class="logo" src="./logo.png" />
  </p>
  <p>
    We've added some basic stories inside the
    <code class="code">stories</code>
    directory.
    <br />
    A story is a single state of one or more UI components.
    You can have as many stories as you want.
    <br />
    (Basically a story is like a visual test case.)
  </p>
  <p>
    See these sample
    <a class="link">stories</a>
    for a component called
    <code class="code">welcome-banner</code>
    .
  </p>
  <p>
    Just like that, you can add your own components as stories.
    <br />
    You can also edit those components and see changes right away.
    <br />
    (Try editing the <code class="code">welcome-banner</code> component
    located at <code class="code">app/components/welcome-banner.js</code>.)
  </p>
  <p>
    Usually we create stories with smaller UI components in the app.<br />
    Have a look at the
    <a
      class="link"
      href="https://storybook.js.org/basics/writing-stories"
      target="_blank"
    >
      Writing Stories
    </a>
    section in our documentation.
  </p>
  <p class="note">
    <b>NOTE:</b>
    <br />
    Have a look at the
    <code class="code">.storybook/webpack.config.js</code>
    to add webpack
    loaders and plugins you are using in this project.
  </p>
</div>
