スポンサーリストを追加

src/components/top/Sponsors.astro

@@ -0,0 +1,96 @@
+---
+import SectionTitle from "../ui/SectionTitle.astro";
+
+import Gold from "./sponsor/Gold.astro";
+import Silver from "./sponsor/Silver.astro";
+import Drink from "./sponsor/Drink.astro";
+import Lunch from "./sponsor/Lunch.astro";
+import Bronze from "./sponsor/Bronze.astro";
+import Gopher from "./sponsor/Gopher.astro";
+import Tool from "./sponsor/Tool.astro";
+import {
+  goldSponsors,
+  silverSponsors,
+  drinkSponsors,
+  lunchSponsors,
+  bronzeSponsors,
+  gopherSponsors,
+  toolSponsors,
+} from "./sponsors";
+
+const currentLocale = Astro.currentLocale || "ja";
+
+if (
+  goldSponsors.length === 0 &&
+  silverSponsors.length === 0 &&
+  drinkSponsors.length === 0 &&
+  lunchSponsors.length === 0 &&
+  bronzeSponsors.length === 0 &&
+  gopherSponsors.length === 0 &&
+  toolSponsors.length === 0
+) {
+  return null;
+}
+---
+
+<section id="sponsors">
+  <SectionTitle>
+    {
+      currentLocale === "en" ? (
+        <span class="section-title">
+          <span style="color: var(--text-accent);">S</span>ponsors
+        </span>
+      ) : (
+        <span class="section-title">
+          <span style="color: var(--text-accent);">ス</span>ポンサー
+        </span>
+      )
+    }
+  </SectionTitle>
+  <div class="content">
+    <Gold sponsors={goldSponsors} />
+    <Silver sponsors={silverSponsors} />
+    <Drink sponsors={drinkSponsors} />
+    <Lunch sponsors={lunchSponsors} />
+    <Bronze sponsors={bronzeSponsors} />
+    <Gopher sponsors={gopherSponsors} />
+    <Tool sponsors={toolSponsors} />
+  </div>
+</section>
+
+<style>
+  section {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: var(--space-l) var(--space-m);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-m);
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-l);
+    width: 100%;
+  }
+
+  .section-title {
+    word-break: keep-all;
+    overflow-wrap: anywhere;
+    text-align: center;
+  }
+
+  @media screen and (max-width: 768px) {
+    section {
+      padding: var(--space-m) var(--space-s);
+      gap: var(--space-s);
+    }
+
+    .content {
+      max-width: 450px;
+    }
+  }
+</style>

src/components/top/TopPage.astro

@@ -3,6 +3,7 @@ import About from "./About.astro";
 import FAQ from "./FAQ.astro";
 import MainVisual from "./MainVisual.astro";
 import News from "./News.astro";
+import Sponsors from "./Sponsors.astro";
 import Layout from "../../layouts/Layout.astro";
 ---
 
@@ -12,5 +13,6 @@ import Layout from "../../layouts/Layout.astro";
     <News />
     <About />
     <FAQ />
+    <Sponsors />
   </main>
 </Layout>

src/components/top/sponsor/Bronze.astro

@@ -0,0 +1,90 @@
+---
+import { Image } from "astro:assets";
+import type { Sponsor } from "../sponsors";
+
+interface Props {
+  sponsors: Sponsor[];
+}
+
+const { sponsors } = Astro.props;
+
+if (sponsors.length === 0) {
+  return null;
+}
+
+const currentLocale = Astro.currentLocale || "ja";
+---
+
+<div class="sponsor-section">
+  <h4 class="text-h4">
+    {currentLocale === "ja" ? "ブロンズ" : "Bronze"}
+  </h4>
+  <ul>
+    {
+      sponsors.map((sponsor) => (
+        <li>
+          <Image
+            src={sponsor.imageSrc}
+            alt={sponsor.name}
+            title={sponsor.name}
+            loading="lazy"
+            priority
+          />
+        </li>
+      ))
+    }
+  </ul>
+</div>
+
+<style>
+  .sponsor-section {
+    text-align: center;
+  }
+
+  ul {
+    display: grid;
+    grid-template-columns: repeat(5, auto);
+    list-style: none;
+    text-align: center;
+    padding: 0;
+    gap: 20px;
+    margin: 0 auto;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  li {
+    max-width: 100%;
+  }
+
+  li > img {
+    width: 208px;
+    height: auto;
+    aspect-ratio: 208 / 100;
+    max-width: 100%;
+    object-fit: contain;
+    display: block;
+  }
+
+  li > img:hover {
+    opacity: 0.7;
+  }
+
+  @media screen and (max-width: 768px) {
+    ul {
+      grid-template-columns: repeat(2, auto);
+      column-gap: 16px;
+      row-gap: 8px;
+    }
+
+    li {
+      display: flex;
+      justify-content: center;
+    }
+
+    li > img {
+      width: 163px;
+      aspect-ratio: 163 / 64;
+    }
+  }
+</style>

src/components/top/sponsor/Drink.astro

@@ -0,0 +1,94 @@
+---
+import { Image } from "astro:assets";
+import type { SponsorWithUrl } from "../sponsors";
+
+interface Props {
+  sponsors: SponsorWithUrl[];
+}
+
+const { sponsors } = Astro.props;
+
+if (sponsors.length === 0) {
+  return null;
+}
+
+const currentLocale = Astro.currentLocale || "ja";
+---
+
+<div class="sponsor-section">
+  <h4 class="text-h4">
+    {currentLocale === "ja" ? "ドリンク" : "Drink"}
+  </h4>
+  <ul>
+    {
+      sponsors.map((sponsor) => (
+        <li>
+          <a href={sponsor.link} target="_blank" rel="noopener noreferrer">
+            <Image
+              src={sponsor.imageSrc}
+              alt={sponsor.name}
+              title={sponsor.name}
+              loading="lazy"
+              priority
+            />
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+</div>
+
+<style>
+  .sponsor-section {
+    text-align: center;
+  }
+
+  ul {
+    display: flex;
+    list-style: none;
+    text-align: center;
+    padding: 0 118px;
+    margin: 0 auto;
+    justify-content: center;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  li {
+    width: calc(50% - 10px);
+    display: flex;
+    justify-content: center;
+  }
+
+  a {
+    display: block;
+  }
+
+  a:hover {
+    opacity: 0.7;
+  }
+
+  a > img {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 354 / 164;
+    max-width: 354px;
+    object-fit: contain;
+    display: block;
+  }
+
+  @media screen and (max-width: 768px) {
+    ul {
+      padding: 0 40px;
+    }
+
+    li {
+      width: 100%;
+    }
+
+    a > img {
+      width: 262px;
+      aspect-ratio: 262 / 64;
+    }
+  }
+</style>