Hero.astro

---
import { Content } from "../assets/copy/Hero.md";
---

<section
  id="hero"
  class="py-6 px-3 h-120 bg-[url(../assets/photos/man-with-laptop-small.png)] sm:bg-[url(../assets/photos/man-with-laptop.png)] bg-cover bg-center"
>
  <div class="max-w-[130ch] mx-auto mt-20">
    <div
      class="prose prose-p:text-slate-100 prose-headings:text-slate-100 prose-headings:text-left max-w-120 prose-p:text-shadow-sm/35 prose-p:text-2xl! prose-p:leading-8! prose-headings:text-shadow-lg/15"
    >
      <Content />
    </div>
    <a href=`${import.meta.env.BASE_URL}/#projects`>
      <p
        class="mt-6 w-fit px-6 py-2 bg-white border-2 border-sky-500 rounded-full text-sky-700! text-lg font-bold font-serif"
      >
        See what we can do
      </p>
    </a>
  </div>
</section>