---
import "@fontsource-variable/inter";
import CallToAction from "~/components/call-to-action.astro";
import HowItWorks from "~/components/how-it-works.astro";
import Footer from "~/components/footer.astro";
import Header from "~/components/header.astro";
import Intro from "~/components/intro.astro";
import Splash from "~/components/splash.astro";
import "~/styles/index.css";

const { generator, site } = Astro;
const image = new URL("social.jpg", site);
const description =
  "Build fast websites, faster. Astro is a new kind of site builder for the modern web. Lightning-fast performance meets powerful developer experience.";
---

<!doctype html>
<html lang="en" class="h-full motion-safe:scroll-smooth" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <meta name="generator" content={generator} />

    <title>Sejour</title>
    <meta name="description" content={description} />

    <!-- social media -->
    <meta property="og:title" content="Sejour" />
    <meta property="og:type" content="website" />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={image} />
    <meta property="og:url" content={site} />
    <meta name="twitter:card" content="summary_large_image" />
    <script is:inline>
      document.documentElement.dataset.theme = "light";
    </script>
  </head>
  <body
    class="h-full overflow-x-hidden bg-default text-default text-base selection:bg-secondary selection:text-white"
  >
    <Header />
    <Splash />
    <div class="space-y-24 px-8 py-32">
      <Intro />
      <HowItWorks />
      <CallToAction />
    </div>
    <Footer />
  </body>
</html>
