---
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"
>
  <!--<a class="main-page-banner" href="/changelog">
    Quickshell 0.2.1 has been released! | 2025-10-11
  </a>-->
  <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>
