src/pages/index.astro

---
import Tweet from 'astro-tweet'

import Head from '$commons/head.astro'
import BaseLayout from '$layouts/base.astro'
import CFImage from '$components/cfImage.astro'
import EventPoster from '$components/eventPoster.astro'
import { upcomingEventsFilter } from '$functions/upcomingEventsFilter'

import { getEvents } from '$functions/getEvents'

const events = await getEvents()
const upcomingEvents = events.filter(upcomingEventsFilter).reverse()

const series = [
  {
    name: 'Bingsu.js',
    link: 'https://bingsu.js.org',
  },
  {
    name: 'BKK.js',
    link: 'https://bkk.js.org',
  },
  {
    name: 'SHiT',
    link: 'https://stupid.hackathon.in.th',
  },
  {
    name: 'G0 Club',
    link: '/wiki/GardenZero',
  },
]
const stories = [
  {
    name: 'The Stupid Hackathon Thailand',
    text: "Unlocking 🇹🇭 developers' creativity and potential through free-style non-competitive non-business hackathons",
    link: '/wiki/StupidHackTH',
    img: '/images/landing/sht7.webp',
    color: 'bg-gradient-to-br from-co to-cp',
  },
  {
    name: 'How to Learn (Almost) Anything',
    text: '🏰 Exploring the fun in learning through creations and stories -- in collaboration with Thaicom Foundation and Thailand Knowledge Park (TK Park)',
    link: 'https://www.boomchanneltv.com/content/876/',
    img: '/images/landing/learn.webp',
    color: 'bg-co',
  },
  {
    name: 'Creative Coding Series',
    text: 'Bridging the gap between art and code, artists and coders',
    link: '/event/creativecodingmeetup',
    img: '/images/landing/code.webp',
    color: 'bg-cp',
  },
  {
    name: 'Bangkok Open Source Initiative',
    text: '🚀 Accelerating Gov Tech, Civic Tech, and Open Source Communities. In partnership with Thai Programmer Association and Bangkok Metropolitan Administration',
    link: '/event/bangkok',
    img: '/images/landing/bosh.webp',
    color: 'bg-cg',
  },
  {
    name: 'Sciยศาสตร์ Night',
    text: "Taking a tour beyond history classes' metanarrative: an exploration of history of science through history of superstition",
    link: '/event/scisart',
    img: '/images/landing/scisart.webp',
    color: 'bg-cbr',
  },
  {
    name: 'Code Golf Party',
    text: '🤔 Lighting up code competion? --  code golf competition in a bar sounds fun! 💻🏌️',
    link: '/event/golf1',
    img: '/images/landing/golf.webp',
    color: 'bg-cb',
  },
]
---

<Head />

<BaseLayout
  class="mx-4 mt-4 grid gap-6 divide-y divide-cbr/30 lg:mx-8 lg:gap-10"
>
  <section id="hero" class="relative flex flex-col gap-4 lg:gap-8">
    <h1
      class="text-4xl leading-[1.2] md:text-5xl md:leading-[1.3] lg:w-3/4 xl:text-[3.75rem] xl:leading-[1.2]"
    >
      We are a <span class="font-medium">community of creators</span> (mostly) based
      in Thailand.
    </h1>
    <h2
      class="text-4xl leading-[1.2] md:text-5xl md:leading-[1.3] lg:w-3/4 xl:text-[3.75rem] xl:leading-[1.2]"
    >
      We work with 🌃 <span class="link text-cg">open source communities</span>,
      💻 <span class="link text-cb"> developers</span>, 🚀 <span
        class="link text-co"
      >
        educators</span
      >, 🦾 <span class="link text-cy"> artists</span>, and more to explore new
      possibilities and co-create fascinating things <span class="font-medium"
        >together</span
      >.
    </h2>
    <a
      href="#s"
      class="bottom-0 text-xl text-cbr hover:font-medium xl:absolute xl:right-0"
    >
      Our Stories ↓
    </a>
    <img
      src="/images/decor.svg"
      class="absolute right-0 top-0 hidden h-32 lg:block xl:h-48"
    />
  </section>

  <section class="pt-10">
    <div
      class="justify-left flex flex-col lg:flex-row lg:items-center lg:justify-between"
    >
      <h3 class="text-3xl font-medium uppercase">
        {upcomingEvents.length > 0 ? 'UPCOMING' : 'EVENT SERIES:'}
      </h3>
      <div
        class="mt-6 flex flex-wrap gap-3 text-xl text-neutral-500 lg:mt-0 lg:justify-center"
      >
        {
          series.map(x => (
            <a
              href={x.link}
              class="rounded-full bg-cg px-3 py-[0.15rem] text-sm text-white transition-colors hover:bg-cb md:text-base"
            >
              {x.name}
            </a>
          ))
        }
        <a
          href="/events"
          class="rounded-full bg-ck px-3 py-[0.15rem] text-sm text-white md:text-base"
        >
          See More →
        </a>
      </div>
    </div>
    {
      upcomingEvents.length !== 0 && (
        <section>
          <div class="space-y-6 pt-8 md:grid-cols-2 lg:grid lg:gap-y-12 lg:space-y-0">
            {upcomingEvents.map(event => (
              <EventPoster event={event} />
            ))}
          </div>
        </section>
      )
    }
  </section>

  <section
    id="s"
    class="grid gap-3 pt-10 md:grid-cols-2 lg:gap-4 xl:grid-cols-3"
  >
    {
      stories.map(x => (
        <a href={x.link} class="group relative">
          <CFImage
            src={x.img}
            alt={x.name}
            width={{
              max: 600,
              md: 800,
            }}
            ratio={16 / 9}
            class="aspect-video w-full bg-neutral-200 object-cover"
          />
          <div
            class={`${x.color} absolute top-0 flex aspect-video w-full flex-col items-start justify-between gap-4 p-6 pr-12 text-lg text-white opacity-0 transition-all group-hover:opacity-100 md:text-xl`}
          >
            <div>{x.text}</div>
            <div class="text-base">{x.name}</div>
          </div>
        </a>
      ))
    }
  </section>

  <section class="pt-8">
    <div class="grid gap-6 lg:grid-cols-2">
      <div class="flex flex-col justify-between">
        <h3 class="text-3xl font-medium uppercase">Our presences</h3>
        <div class="mt-6 flex gap-3 xl:gap-4">
          <a href="https://facebook.com/creatorsgarten"
            ><h5 class="text-xl hover:underline">Facebook</h5></a
          >
          <a href="https://instagram.com/creatorsgarten"
            ><h5 class="text-xl hover:underline">Instagram</h5></a
          >
          <a href="https://youtube.com/@creatorsgarten"
            ><h5 class="text-xl hover:underline">Youtube</h5></a
          >
        </div>
      </div>
      <ul class="divde-cbr/50 grid gap-4 divide-y lg:w-3/4 lg:divide-y-0">
        <li class="group">
          <a href="https://www.boomchanneltv.com/content/876/">
            <h6 class="text-neutral-500">Interview</h6>
            <h5 class="text-lg group-hover:underline xl:text-xl">
              <span class="font-medium">Mappa Media</span> · เนิร์ดได้แต่ต้องสนุกด้วย!
              Creatorsgarten สวนของนักสร้างที่อยากให้ทุกคนมาลองเล่นและเรียนรู้ไปด้วยกัน
            </h5>
          </a>
        </li>
        <li class="group pt-4 lg:pt-2">
          <a
            href="https://www.thekommon.co/creatorsgarten-sharing-knowledge-change-society/"
          >
            <h6 class="text-neutral-500">Interview</h6>
            <h5 class="text-lg group-hover:underline xl:text-xl">
              <span class="font-medium">The KOMMON</span> · Creatorsgarten ชุมชนคนเนิร์ดที่สนุกกับไอเดียสร้างสรรค์
              สวนสวรรค์ของ Creative Technologist
            </h5>
          </a>
        </li>
        <li class="group pt-4 lg:pt-2">
          <a href="https://thematter.co/editorial/open-source/203976">
            <h6 class="text-neutral-500">Write</h6>
            <h5 class="text-lg group-hover:underline xl:text-xl">
              <span class="font-medium">The MATTER</span> · ‘Open Source’ จากการแชร์โค้ดของนักพัฒนาสู่ไอเดียพัฒนาประเทศ
            </h5>
          </a>
        </li>
      </ul>
    </div>
  </section>

  <section class="pt-8">
    <div class="flex flex-col justify-between">
      <h3 class="pb-6 text-3xl font-medium uppercase">Our Partners</h3>
      <ul class="flex flex-wrap gap-8">
        <li>
          <a href="https://www.cleverse.com/">
            <img
              class="h-14"
              src="/images/cleverse.svg"
              loading="lazy"
              alt="Cleverse"
            />
          </a>
        </li>
        <li>
          <a href="https://www.jetbrains.com/">
            <img
              class="h-12"
              src="/images/jetbrains.svg"
              loading="lazy"
              alt="JetBrains"
            />
          </a>
        </li>
        <li>
          <a href="https://deploys.app/">
            <img
              class="h-16"
              src="/images/deploys.svg"
              loading="lazy"
              alt="JetBrains"
            />
          </a>
        </li>
      </ul>
    </div>
  </section>

  <section
    class="flex flex-col items-center gap-8 overflow-x-auto pt-8 md:flex-row"
  >
    <Tweet id="1659598202293866497" />
    <div
      class="no-scrollbar hidden items-center justify-start gap-6 overflow-x-auto md:flex"
    >
      <div class="flex">
        <iframe
          width="560"
          height="315"
          src="https://www.youtube.com/embed/N09H1Rbuf9g?si=Ki1f3zMVpsfmCDko"
          title="The โง่ Hackathon ครั้งที่ 7 แห่งประเทศ Thailand"
          loading="lazy"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen></iframe>
      </div>
      <div class="flex">
        <iframe
          width="560"
          height="315"
          src="https://www.youtube.com/embed/Wuxt4HiZtB4?si=bHghMucy6Rbsl2vL"
          title="A Journey into Next-Gen CSS-in-JS Innovations"
          loading="lazy"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen></iframe>
      </div>
      <div class="flex">
        <iframe
          width="560"
          height="315"
          src="https://www.youtube.com/embed/i58lEAFqDlw?si=rkHlAlEvzEbRLaRM"
          title="Using GitHub as a database for rich content and video processing"
          loading="lazy"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowfullscreen></iframe>
      </div>
    </div>
  </section>

  <!--<section class="pt-8">-->
  <!--  <div class="grid grid-cols-2 gap-3 md:grid-cols-4 lg:gap-6">-->
  <!--    <div-->
  <!--      class="flex aspect-square w-full flex-col justify-between bg-gradient-to-br from-neutral-100 to-neutral-300 p-4 pr-8"-->
  <!--    >-->
  <!--      <h4 class="text-2xl xl:text-3xl">✍️ Cluster wiki</h4>-->
  <!--      <p class="text-sm lg:text-lg">-->
  <!--        Markdown-based wiki engine, supercharged by liquid-->
  <!--      </p>-->
  <!--    </div>-->
  <!--    <div-->
  <!--      class="from-co to-cy flex aspect-square w-full flex-col justify-between bg-gradient-to-br p-4 pr-8 text-white"-->
  <!--    >-->
  <!--      <h4 class="text-2xl xl:text-3xl">🔥 Bonfires</h4>-->
  <!--      <p class="text-sm lg:text-lg">Toolkit for the art of gatherings</p>-->
  <!--    </div>-->
  <!--    <div-->
  <!--      class="from-cb to-ck flex aspect-square w-full flex-col justify-between bg-gradient-to-br p-4 pr-8 text-white"-->
  <!--    >-->
  <!--      <h4 class="text-2xl xl:text-3xl">📅 techcal.dev</h4>-->
  <!--      <div>-->
  <!--        <p class="text-sm lg:text-lg">-->
  <!--          All-in-one calendar for Tech events in your town-->
  <!--        </p>-->
  <!--      </div>-->
  <!--    </div>-->

  <!--    <div class="mx-4 flex w-4/5 flex-col gap-1 lg:gap-3">-->
  <!--      <div class="text-2xl xl:text-4xl">Crafts</div>-->
  <!--      <p class="text-sm lg:text-lg">-->
  <!--        Projects crafted and maintained by people of Creatorsgarten. Both-->
  <!--        on-going and in the making.-->
  <!--      </p>-->
  <!--      <div class="mt-1 flex lg:mt-4">-->
  <!--        <div-->
  <!--          class="bg-cb rounded-full px-3 py-1 text-sm text-white lg:text-base"-->
  <!--        >-->
  <!--          See More ->-->
  <!--        </div>-->
  <!--      </div>-->
  <!--    </div>-->
  <!--  </div>-->
  <!--</section>-->
</BaseLayout>

<style>
  body {
    font-family:
      'Basier Circle',
      'Anuphan',
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      'Open Sans',
      'Helvetica Neue',
      sans-serif;
  }
  .mono {
    font-family: 'Zed Mono Extended', monospace;
  }
  #hero a.link {
    @apply decoration-4 hover:underline;
  }

  html {
    scroll-behavior: smooth;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
</style>