import styles from '@/styles/Home.module.scss';

import Navbar from '@/components/Navbar';
import ThemeChanger from '@/components/ThemeChanger';

import {
  Mountain
} from 'lucide-react';
import Button from '@/components/Button';
import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>Flint &bull; Git Hosting That Just Works.</title>

        <meta name="description" content="A free and open-source, self hostable federated git platform." />
      </Head>

      <Navbar currentPage="home" />

      <header className={styles.headLine}>
        <h3>Flint</h3>

        <h1>
          Git Hosting That Just Works.
        </h1>

        <p>
          A free and open-source, self hostable federated git platform.
        </p>

        <ul>
          <li>
            <Button href="/servers" type={'primary'}>
              Find a Server
            </Button>
          </li>
          <li>
            <Button href="/docs" type={'outlined'}>
              Get Started
            </Button>
          </li>
        </ul>

        <span className={styles.gradient}></span>
      </header>

      <main className={styles.container}>
        <section>
          <h2>Features</h2>

          <ul>
            <li>Self-Hostable</li>
            <li>Federated</li>
            <li>Open-Source</li>
            <li>Easy to Use</li>
          </ul>
        </section>
      </main>

      <ThemeChanger />
    </>
  );
}