イベントリストをTOPに表示できるようにする

_includes/top/sections/event.html

@@ -0,0 +1,28 @@
+<div
+  class="max-w-3xl lg:max-w-[1800px] px-8 mx-auto mt-20 lg:mt-48 mb-16 flex flex-col lg:flex-row-reverse items-center lg:items-start">
+  <div class="w-full lg:w-2/5 mb-8">
+    <div class="lg:max-w-sm lg:place-self-start lg:ml-[10%]">
+      <h2 class="text-4xl mb-4 text-center lg:text-left">
+        イベント
+        <span class="block mt-2 text-2xl">EVENT</span>
+      </h2>
+      <p class="leading-7 mb-10">
+        コンテストや体験型のワークショップ等を企画しています。<br>
+        気になっていたことにチャレンジしたり、新しい道具や考え方にふれるチャンス！<br>
+        詳細は<a href="/events/" class="underline">イベント一覧</a>をご覧ください。
+      </p>
+    </div>
+  </div>
+  <ul class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-12 lg:-mt-16 lg:w-3/5">
+    {%  assign events = site.data.events | slice: 0, 6 %}
+    {% for event in events %}
+    <li class="flex flex-col min-w-0">
+      <a href="{{ event.url }}" class="block hover:opacity-80 transition grow">
+      <img class="w-full md:max-h-[160px] md:object-contain " src="{{ event.img }}" alt="{{ event.title }}" />
+      <p class="mt-2">{{ event.title }}</p>
+      <p class="text-xs mb-2 leading-5">{{ event.outline }}</p>
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
+</div>

index.md

@@ -29,7 +29,7 @@ layout: top
 
 {% include top/sections/session.html %}
 
-{% include top/sections/workshop.html %}
+{% include top/sections/event.html %}
 
 <div class="-mx-4">
   <img class="w-full" src="/img/top/background3.webp" alt="鉄道模型を動かしている様子"/>