---
import Footer from "@src/components/Footer.astro";
import BaseLayout from "@layouts/BaseLayout.astro";
import Marquee from "@components/marquee/Marquee.astro";
import FeatureList from "@src/components/featurelist/FeatureList.astro";
import { getVersionsData } from "@config/io/generateTypeData";
const defaultVersion = (await getVersionsData()).default;

const title = "Quickshell";
---
<BaseLayout title={title} description="A fully user customizable desktop shell" image="/quickshell.png">
  <div class="main-page_hero" data-pagefind-ignore>
    <div class="titlebox">
      <img src="/favicon.svg" alt="Quickshell"/>
      <h1 class="gradient-text">Quickshell</h1>
    </div>
    <section class="main-page_hero-text">
      <h2>building blocks for your desktop</h2>
    </section>
    <Marquee/>
    <section class="about">
      <div class="about-txt">
        <p>
          Quickshell is a toolkit for building status bars, widgets, lockscreens,
          and other desktop components using QtQuick. It can be used alongside your
          wayland compositor or window manager to build a complete desktop environment.
          <br class="about-break">
          <br class="about-break">
          <a href="/about">More information</a>
        </p>
      </div>
      <div class="about-buttons">
        <a href={`/docs/${defaultVersion}/guide/install-setup`} class="main-page_link-card">
          <h3>Install</h3>
        </a>
        <a href={`/docs/${defaultVersion}/types`} class="main-page_link-card main-page_bluecard">
          <h3>Documentation</h3>
        </a>
      </div>
    </section>
    <section class="featurelist-section">
      <FeatureList/>
    </section>
  </div>
  <Footer class="frontpage-footer"/>
</BaseLayout>