{% stories GettingStarted with {
  "title": "Getting Started/Welcome",
  "parameters": {
    "docs": {
      "description": {
        "component": "Getting started page for Varbase Storybook"
      }
    }
  }
} %}

{% story GettingStartedWelcome with {
  "name": "Welcome"
} %}

<div class="container">
  <div class="row">
    <div class="col d-flex justify-content-start">
      <img src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x/varbase-logo-emblem-colored.svg" width="177px" alt="Varbase Logo" />
    </div>
    <div class="col d-flex justify-content-end">
      <img src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x/vardot-logo.svg" width="75px" alt="Vardot Logo" />
    </div>
  </div>
  <div class="row mt-5">
    <div class="col">
      <h1>Welcome To Varbase's Design System</h1>
    </div>
  </div>

  <div class="row">
    <div class="col pt-3">
      <span class="h5">Your Shortcut to Stunning Websites</span>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col">
      <p>Meet Varbase's Design System, a game-changing open-source framework by <a href="https://www.vardot.com/en">Vardot</a> that supercharges your web development. Built on atomic design principles, it lets you craft beautiful, consistent websites with lightning speed. Whether you're juggling multiple projects or launching something new, Varbase simplifies the process with reusable components and seamless asset management, saving you time and effort.</p>
    </div>
  </div>


  <div class="row mt-5 pt-5">
    <div class="col pt-5 border-top border-light-subtle">
      <h2>How to Use It</h2>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col">
      <p>Ready to build smarter? Varbase’s component-based approach makes creating and managing web assets a breeze. Dive into our intuitive system, explore the Figma file for design inspiration, and start turning your ideas into reality. Perfect for developers and designers alike, it’s the toolkit you didn’t know you needed!</p>
      <div class="mt-5 bg-light p-5 d-flex flex-column justify-content-center w-25">
        <img class="d-flex mx-auto d-block" src="https://raw.githubusercontent.com/Vardot/varbase-assets/refs/heads/main/v10-01-x/figma-logo.svg" width="50px" alt="Figma icon logo" />
        <a class="d-flex justify-content-center"href="https://www.figma.com/design/shEqHupsCBTp2CmIiA84rv/VB---Stylesheet_2024">View Figma File</a>
      </div>
    </div>
  </div>


  <div class="row mt-5 pt-5">
    <div class="col pt-5 border-top border-light-subtle">
      <h2>What’s Included?</h2>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col">
      <h3 class="mt-4">01 - Varbase Design System</h3>
      <p>Everything you need to start using the UI Toolkit to create Varbase websites.</p>

      <h3 class="mt-4">02 - Foundation</h3>
      <p>Guidelines on using colors, typography, icons and logos.</p>

      <h3 class="mt-4">03 - UI Components</h3>
      <p>A library of ready-to-use UI components for your web projects.</p>
    </div>
  </div>

  <div class="row mt-5 pt-5">
    <div class="col pt-5 border-top border-light-subtle">
      <h2>Contact Us</h2>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col">
      <p>Got feedback or need a hand? Our team is here to support you, <a href="https://www.vardot.com/en/contact-us">reach out</a> for help with the Varbase Toolkit or to share your ideas!</p>
    </div>
  </div>
</div>

{% endstory %}

{% endstories %}
