---
import "../main.css";
import Head from "../components/Head.astro";
import Logo from "../components/Logo.astro";
import Terminal from "../components/Terminal/Terminal.astro";
import { Icon } from 'astro-icon'
---

<html lang="en">
  <head>
    <Head />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <header class="container">
      <Logo />
      <h1 class="visually-hidden">clack</h1>
      <a href="https://github.com/natemoo-re/clack">
        <Icon name="mdi:github" />
        GitHub
      </a>
      <a href="https://github.com/natemoo-re/clack/tree/main/packages/core#readme">
        <Icon name="ic:twotone-monitor" />
				Core
      </a>
      <a href="https://github.com/natemoo-re/clack/tree/main/packages/prompts#readme">
        <Icon name="ion:book" />
				Prompts
      </a>
    </header>

    <main class="container">
      <p>
        Building interactive command line applications doesn't have to be so
        hard. <code>@clack/core</code> provides unstyled, feature-rich components
        designed to be a strong foundation for your custom CLIs.
      </p>
      <p>
        Of course, sometimes you just want to use something well-designed.
        That's why <code>@clack/prompts</code> comes out-of-the-box with beautiful prompts and a straightforward API.
      </p>
    </main>

    <Terminal />

    <style>
      header {
        display: flex;
        align-items: center;
      }

      h2 {
        font-weight: 400;
        font-size: var(--step-0);
      }

      header > a {
        margin-left: var(--space-xs);
      }

      main {
        margin: var(--space-l-xl) auto;
        display: flex;
        flex-direction: column;
        gap: var(--step-1);
      }
    </style>
  </body>
</html>
