Merge branch 'main' into 126/impl-download-button

src/components/AccessPanel.astro

@@ -18,7 +18,7 @@ import ColoredHeading from './ColoredHeading.astro';
   >
     茨香祭までの便利な行き方
   </p>
-  <div class="rounded-lg overflow-hidden">
+  <div class="rounded-lg overflow-hidden max-h-[370px]">
     <iframe
     src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4022.053516903501!2d140.55073074446793!3d36.39699021221313!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60222faa16bfeb1b%3A0x8ee69992b50722b8!2z6Iyo5Z-O5bel5qWt6auY562J5bCC6ZaA5a2m5qCh!5e0!3m2!1sja!2sjp!4v1729150639038!5m2!1sja!2sjp"
     width="450"
@@ -27,6 +27,6 @@ import ColoredHeading from './ColoredHeading.astro';
     allowfullscreen=""
     loading="lazy"
     referrerpolicy="no-referrer-when-downgrade"
-    class="w-full h-auto max-h-[370px]"></iframe>
+    class="w-full h-[370px]"></iframe>
   </div>
 </ColoredContainer>

src/components/EventPanel.astro

@@ -15,7 +15,7 @@ const EventSlugs = (await getCollection('events'))
   }) satisfies string[];
 ---
 
-<ColoredContainer color="violet" class="max-w-[1250px] flex-col">
+<ColoredContainer color="violet" class="w-full flex-col">
   <div class="w-full flex justify-between items-center">
     <ColoredHeading as="h3" class="text-4xl" text="イベント" color="violet" />
     <p

src/components/PreviewCircle.astro

@@ -0,0 +1,50 @@
+---
+import { getCollection } from 'astro:content';
+import { LayoutGrid } from 'lucide-astro';
+import ButtonLink from './ButtonLink.astro';
+import CircleCard from './CircleCard.astro';
+import ColoredContainer from './ColoredContainer.astro';
+import ColoredHeading from './ColoredHeading.astro';
+
+const CircleSlugs = (await getCollection('circles')).map(Circle => {
+  return Circle.slug;
+}) satisfies string[];
+---
+
+<ColoredContainer color="yellow" class="flex-col w-full">
+  <div class="flex items-center justify-between w-full">
+    <ColoredHeading as="h3" class="text-4xl" text="サークル" color="yellow" />
+    <p
+      class="hidden text-2xl font-Dela text-mauve-11 text-stroke-mauve-1 text-stroke-8 paint-sfm drop-shadow-bump shadow-mauve-6 md:block"
+    >
+      色々な出し物を回ってみよう
+    </p>
+    <ButtonLink color="yellow" href="/circle">
+      <LayoutGrid class="w-6 h-6 stroke-[2px]" />
+      一覧を開く
+    </ButtonLink>
+  </div>
+  <div class="flex gap-10 overflow-x-scroll hidden-scrollbar">
+    {
+      CircleSlugs.map((slug) => {
+        return (
+          <span class="self-stretch w-36">
+            <CircleCard type="grid" slug={slug} class="w-36" />
+          </span>
+        );
+      })
+    }
+  </div>
+</ColoredContainer>
+
+<style>
+  .hidden-scrollbar {
+    overflow: scroll;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .hidden-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+</style>

src/pages/index.astro

@@ -1,25 +1,20 @@
 ---
-import Layout from "../layouts/Layout.astro";
-import Theme from "../components/theme.astro"
+import Layout from "@/layouts/Layout.astro";
+import Theme from "@/components/theme.astro"
+import CirclePanel from "@/components/PreviewCircle.astro";
+import EventPanel from "@/components/EventPanel.astro";
+import StaffPanel from "@/components/StaffPanel.astro";
+import AccessPanel from "@/components/AccessPanel.astro";
 ---
 
 <Layout title="トップページ" hasHero>
-  <Theme />
-  <h1 class="font-Dela text-5xl">現在準備中です</h1>
-  <a
-    href="https://x.com/shikosai33/"
-    class="text-mauve-11 font-Dela underline"
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    X(Twitter) で最新情報をチェック
-  </a>
-  <a
-    href="https://instagram.com/shikosai33/"
-    class="text-mauve-11 font-Dela underline"
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    Instagram で最新情報をチェック
-  </a>
+  <div class="flex flex-col gap-6">
+    <Theme />
+    <CirclePanel />
+    <EventPanel />
+    <div class="grid gap-6 md:grid-cols-2">
+      <StaffPanel />
+      <AccessPanel />
+    </div>
+  </div>
 </Layout>