---
import Layout from "@/layouts/main.astro"
import { Button } from "@/components/ui/button"
import Header from "@/components/Header.astro"
import Marquee from "@/components/ui/Marquee.astro"
import Hero from "@/components/Hero.astro"
import Projects from "@/components/Projects.astro"
import About from "@/components/About.astro"
import Stats from "@/components/Stats.astro"
import Footer from "@/components/Footer.astro"

const marqueeItems = [
  "interactions",
  "front-end",
  "videogames",
  "creation",
  "development",
  "caribbean",
]
---

<Layout>
  <Header />

  <div class="overflow-x-clip">
    <div
      class="-mx-2 flex h-14 -rotate-2 items-center border-y-2 border-black bg-main px-2 sm:-mx-4 sm:h-18.25 sm:-rotate-5 sm:px-0"
    >
      <Marquee speed={40} pauseOnHover={false}>
        {
          marqueeItems.map((item) => (
            <div class="px-2 font-robot-crush text-base font-semibold tracking-widest text-white italic sm:px-0 sm:text-xl">
              {item}
            </div>
          ))
        }
      </Marquee>
    </div>
  </div>

  <Hero />
  <Projects />
  <About />
  <Stats />
  <Footer />
</Layout>