index.astro

---
import { Icon } from "astro-icon";
import Button from "../components/buttons/Button.astro";
import CtaCardSection from "../components/sections/CtaCardSection.astro";
import Layout from "../layouts/Page.astro";
import TextAndImageHero from "../components/sections/heros/TextAndImageHero.astro";
import AnnouncementBar from "../components/core/AnnouncementBar.astro";

const seo = {
  title: "Mejker",
  description: 'Udruženje "Mejker Srbija"',
};
---

<!-- Ovo je zgodno ako bude bilo nekih dogadjaja pa da ih reklamiramo -->
<AnnouncementBar
  text="Dođite na Maker Fest 2023 u subotu, 14. oktobra 2023. u Novom Sadu!"
  href="https://fest2023.maker.rs"
  slot="announcement-bar"
/>
<Layout {seo}>
  <TextAndImageHero reversed>
    <div slot="text-container">
      <h1>Udruženje "Mejker Srbija"</h1>
      <p>
        Udruženje entuzijasta za robotiku, elektroniku, programiranje i IoT koje
        nesebično deli svo stečeno znanje.
      </p>
    </div>
    <picture slot="image-container">
      <img src="/assets/hero.jpg" alt="Mejkeri" id="home-hero-image" />
    </picture>
  </TextAndImageHero>

  <CtaCardSection
    background="var(--theme-surface-2)"
    color="var(--theme-on-surface-2)"
  >
    <h2>Pridružite nam se!</h2>
    <p>
      Ako želite da se pridružite udruženju, učestvujete u organizaciji događaja
      i radionica ili imate neke svoje ideje za saradnju kontaktirajte nas.
    </p>
    <Button href="/contact" customIcon
      >Kontakt <Fragment slot="icon">
        <Icon name="ic:baseline-chevron-right" />
      </Fragment></Button
    >
  </CtaCardSection>
</Layout>