feat: ツールスポンサー・WiFiスポンサーを追加

src/components/top/Sponsors.astro

@@ -8,6 +8,7 @@ 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 Wifi from "./sponsor/Wifi.astro";
 import {
   goldSponsors,
   silverSponsors,
@@ -16,6 +17,7 @@ import {
   bronzeSponsors,
   gopherSponsors,
   toolSponsors,
+  wifiSponsors,
 } from "./sponsors";
 
 const currentLocale = Astro.currentLocale || "ja";
@@ -27,7 +29,8 @@ if (
   lunchSponsors.length === 0 &&
   bronzeSponsors.length === 0 &&
   gopherSponsors.length === 0 &&
-  toolSponsors.length === 0
+  toolSponsors.length === 0 &&
+  wifiSponsors.length === 0
 ) {
   return null;
 }
@@ -55,6 +58,7 @@ if (
     <Bronze sponsors={bronzeSponsors} />
     <Gopher sponsors={gopherSponsors} />
     <Tool sponsors={toolSponsors} />
+    <Wifi sponsors={wifiSponsors} />
   </div>
 </section>
 

src/components/top/sponsor/Drink.astro

@@ -81,26 +81,30 @@ const currentLocale = Astro.currentLocale || "ja";
 
   a > img,
   li > img {
-    width: 100%;
+    width: 354px;
     height: auto;
     aspect-ratio: 354 / 164;
-    max-width: 354px;
+    max-width: 100%;
     object-fit: contain;
     display: block;
+    padding: 16px;
+    box-sizing: border-box;
   }
 
   @media screen and (max-width: 768px) {
     ul {
-      padding: 0 40px;
+      padding: 0;
     }
 
     li {
       width: 100%;
     }
 
-    a > img {
-      width: 262px;
-      aspect-ratio: 262 / 64;
+    a > img,
+    li > img {
+      width: 342px;
+      aspect-ratio: 262 / 90;
+      padding: 4px 32px;
     }
   }
 </style>

src/components/top/sponsor/Gold.astro

@@ -39,6 +39,8 @@ const currentLocale = Astro.currentLocale || "ja";
                 src={sponsor.imageSrc}
                 alt={sponsor.name}
                 title={sponsor.name}
+                width={532}
+                height={280}
                 loading="lazy"
                 priority
               />
@@ -48,6 +50,8 @@ const currentLocale = Astro.currentLocale || "ja";
               src={sponsor.imageSrc}
               alt={sponsor.name}
               title={sponsor.name}
+              width={532}
+              height={280}
               loading="lazy"
               priority
             />
@@ -109,7 +113,8 @@ const currentLocale = Astro.currentLocale || "ja";
       justify-content: center;
     }
 
-    a > img {
+    a > img,
+    li > img {
       width: 342px;
       aspect-ratio: 342 / 160;
     }

src/components/top/sponsor/Lunch.astro

@@ -87,23 +87,27 @@ const currentLocale = Astro.currentLocale || "ja";
     max-width: 100%;
     object-fit: contain;
     display: block;
+    padding: 16px;
+    box-sizing: border-box;
   }
 
   @media screen and (max-width: 768px) {
     ul {
       grid-template-columns: repeat(1, auto);
       gap: 24px;
-      padding: 0 40px;
+      padding: 0;
     }
 
     li {
       display: flex;
       justify-content: center;
     }
 
-    a > img {
-      width: 262px;
-      aspect-ratio: 262 / 64;
+    a > img,
+    li > img {
+      width: 342px;
+      aspect-ratio: 262 / 90;
+      padding: 4px 32px;
     }
   }
 </style>

src/components/top/sponsor/Silver.astro

@@ -86,23 +86,27 @@ const currentLocale = Astro.currentLocale || "ja";
     max-width: 100%;
     object-fit: contain;
     display: block;
+    padding: 16px;
+    box-sizing: border-box;
   }
 
   @media screen and (max-width: 768px) {
     ul {
       grid-template-columns: repeat(1, auto);
       gap: 24px;
-      padding: 0 40px;
+      padding: 0;
     }
 
     li {
       display: flex;
       justify-content: center;
     }
 
-    a > img {
-      width: 262px;
-      aspect-ratio: 262 / 64;
+    a > img,
+    li > img {
+      width: 342px;
+      aspect-ratio: 262 / 90;
+      padding: 4px 32px;
     }
   }
 </style>

src/components/top/sponsor/Wifi.astro

@@ -0,0 +1,82 @@
+---
+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" ? "WiFiスポンサー" : "WiFi Sponsor"}
+  </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(1, auto);
+    list-style: none;
+    text-align: center;
+    padding: 0 182px;
+    gap: 40px;
+    margin: 0 auto;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  li {
+    max-width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  li > img {
+    width: 560px;
+    height: auto;
+    aspect-ratio: 560 / 160;
+    max-width: 100%;
+    object-fit: contain;
+    display: block;
+  }
+
+  @media screen and (max-width: 768px) {
+    ul {
+      gap: 24px;
+      padding: 0;
+    }
+
+    li > img {
+      width: 342px;
+      aspect-ratio: 342 / 160;
+    }
+  }
+</style>

src/components/top/sponsors.ts

@@ -61,6 +61,7 @@ import gopher18Img from "../../assets/sponsors/gopher/gopher_18.jpg";
 import gopher19Img from "../../assets/sponsors/gopher/gopher_19.png";
 import gopher20Img from "../../assets/sponsors/gopher/gopher_20.png";
 import gopher21Img from "../../assets/sponsors/gopher/gopher_21.png";
+import wifi1Img from "../../assets/sponsors/wifi/wifi_1.png";
 
 export type SponsorWithUrl = {
   name: string;
@@ -236,4 +237,10 @@ export const gopherSponsors: Sponsor[] = [
   // { name: "瀬上 祐匡", imageSrc: gopher22Img },
 ];
 
-export const toolSponsors: Sponsor[] = [];
+export const toolSponsors: Sponsor[] = [
+  { name: "株式会社LayerX", imageSrc: gold2Img },
+];
+
+export const wifiSponsors: Sponsor[] = [
+  { name: "インターネット・ゼミ", imageSrc: wifi1Img },
+];