hero.astro

---
// import { Picture } from "astro:assets";
// import heroImage from "/public/images/conference_photo.jpg";

import IconWithLabel from "./icon-label.astro";
// import Icon from "@ui/Icon.astro";
import Button from "@ui/Button.astro";

const action1 = "https://programme.europython.eu/europython-2026/";
const action2 = "https://www.youtube.com/watch?v=laSzm-raS5A";
---

<section class="relative z-10">
  <div
    class="bg-icons relative flex flex-col items-center justify-center"
    style=""
  >
    <div class="prose-xl relative z-10 text-center">
      <div class="grid md:flex items-center space-x-3 p-10 pt-32 md:pt-36 justify-center">
        <div class="flex items-center justify-center">
          <img
            class="h-full block md:w-full lg:w-[250px] pr-3"
            src="/eps-logo.svg"
            height="250"
            width="250"
            alt="EuroPython Society Logo"
          />
        </div>
        <h1
          class="text-6xl md:text-8xl lg:text-9xl mb-0"
        >
          EuroPython
        </h1>
      </div>
      <p
        class="max-w-2xl mx-10 md:mx-40 text-center text-xl text-gray-700 -mt-6"
      >
        EuroPython 2026 is coming to Kraków! Join thousands of Python enthusiasts for a week of learning, networking, and community. Stay tuned for more details!
      </p>
    </div>
    <!-- First 2x1 Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mx-6 my-10">
        <IconWithLabel icon="map-pin" label="ICE, Kraków, Poland" />
        <IconWithLabel icon="calendar-days" label="13-19 July, 2026" />
    </div>

    <!-- Second 2x1 Grid with Action Buttons -->
    <div class="text-center grid grid-cols-1 md:grid-cols-2 gap-4 m-6">
      <div class="btn-outline">
        <Button outline url={action1} class="!text-white !border-white hover:!bg-white hover:!text-primary"> Submit your talk! </Button>
      </div>
      <div class="btn-outline">
        <Button outline url={action2} class="!text-white !border-white hover:!bg-white hover:!text-primary"> Watch the video (no Rickrolls) </Button>
      </div>
    </div>
  </div>

  <style>
    .bg-icons {
      min-height: 400px;
      padding-bottom: 50px;
      overflow: hidden;
    }
    .bg-icon {
      position: absolute;
      width: 140px;
      height: 140px;
      opacity: 0.7;
    }
    .bluebox {
      background-color: #E8F4F8;
      z-index: -2;
    }
    .bluebox-shift {
      position: relative;
      top: -100px;
    }
    .stats {
      position: relative;
      top: 10px;
    }

  </style>
</section>