---
import "../styles/global.css";
import { Navigation } from "../components/Navigation";
import { ClientLink } from "../components/partials/ClientLink";
import { Button } from "../components/partials/Button"
import Projects from "../views/Projects.astro" 
import AboutMe from "../views/AboutMe.astro"
import Products from "../views/Products.astro"
import LandingHero from "../views/LandingHero.astro"
import Footer from "../views/Footer.astro"

const encryptedMail = btoa('dominik@oceanwave018.de')
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Dominik - FullStackDev</title>

  </head>
  <body class="bg-zinc-900 text-zinc-100">
    <Navigation client:load />
    <LandingHero />
    <Projects />
    <AboutMe />
    <section class="w-screen h-28 bg-emerald-500 text-zinc-900 flex flex-col justify-center items-center gap-4">
      <p class="text-2xl text-center w-full">Services und Produkte</p>
      <img class="animate-bounce h-7 w-7" src="/img/arrowDownDark.svg" alt="arrowDark" />
    </section>
    <Products />
    <section class="py-10 w-screen gap-5 transition-all bg-zinc-900 text-zinc-50 flex flex-col items-center">
      <p class="text-3xl text-emerald-500">Interesse geweckt?</p>
      <p class="text-xl">Lass mir doch eine Nachricht da!</p>
      <div class="w-52 text-zinc-900">
        <Button client:load encryptedMail={encryptedMail} text="E-Mail schreiben"/>
      </div>      
    </section>
    <Footer />
  </body>
</html>
