Merge pull request #24 from GoCon/hytkgami/sponsor-page

スポンサー詳細ページのスタイリング
GoCon · Apr 10, 2024 · 1a08c25 · 1a08c25
2 parents 5ba51a3 + eb839c2
commit 1a08c25
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 30 deletions.
diff --git a/src/components/Footer/index.astro b/src/components/Footer/index.astro
@@ -61,6 +61,9 @@ import { concatWithBase } from "@utils/concatWithBase";
   .container {
     background-color: #f5f5f5;
     color: #222;
+
+    position: sticky;
+    top: 100vh;
   }
 
   .content {

diff --git a/src/components/Sponsors.astro b/src/components/Sponsors.astro
@@ -26,27 +26,31 @@ const bronzeSponsors = sponsors.data.filter(
     <div class="box">
       {
         platinumGoldSponsors.map((sponsor) => (
-          <Image
-            class="platinum"
-            src={concatWithBase(sponsor.image)}
-            alt={sponsor.name}
-            width={448}
-            height={242}
-          />
+          <a href={concatWithBase(`sponsors/${sponsor.id}`)}>
+            <Image
+              class="platinum"
+              src={concatWithBase(sponsor.image)}
+              alt={sponsor.name}
+              width={448}
+              height={242}
+            />
+          </a>
         ))
       }
     </div>
     <h3>Gold</h3>
     <div class="box">
       {
         goldSponsors.map((sponsor) => (
-          <Image
-            class="gold"
-            src={concatWithBase(sponsor.image)}
-            alt={sponsor.name}
-            width={448}
-            height={242}
-          />
+          <a href={concatWithBase(`sponsors/${sponsor.id}`)}>
+            <Image
+              class="gold"
+              src={concatWithBase(sponsor.image)}
+              alt={sponsor.name}
+              width={448}
+              height={242}
+            />
+          </a>
         ))
       }
     </div>
@@ -117,6 +121,10 @@ const bronzeSponsors = sponsors.data.filter(
       }
     }
 
+    a:hover {
+      opacity: 0.7;
+    }
+
     img {
       object-fit: contain;
     }

diff --git a/src/content/sponsors/data.json b/src/content/sponsors/data.json
@@ -3,7 +3,7 @@
     "id": 1,
     "name": "転職ドラフト",
     "class": "Platinum Gold",
-    "description": "",
+    "description": "「エンジニアの価値は世界が決める」\n転職ドラフトは、企業から年収付きで指名が届く、ITエンジニア向けの転職サービスです。\nITエンジニアが「自身の客観的な市場価値」を判断する機会は限られています。\n転職ドラフトは、評価におけるバイアスを排除し、ITエンジニアが実力で正当に評価され、実力に見合った報酬を得られる世界の実現を目指しています。\n利用企業数は累計700社以上。毎月600人超のITエンジニアが参加。\n挑戦的なキャリア形成の登竜門としてご利用いただけるよう、日々提供価値を拡充しています。",
     "image": "sponsors/転職ドラフト.png"
   },
   {
@@ -17,14 +17,14 @@
     "id": 3,
     "name": "ミイダス株式会社",
     "class": "Gold",
-    "description": "",
+    "description": "ミイダスは、マッチングをゴールとした従来の人材サービスとは一線を画し、データとテクノロジーを駆使して、人と仕事、人と組織のフィッティングを科学しています。 ミイダスが提唱する客観的・数値的な評価に基づいた採用「アセスメントリクルーティング」が日本の採用・転職の常識を変え、適材適所を見い出します。\nミイダス開発部ではエンジニアを採用中です！ご興味のある方はお気軽にお問い合わせください。",
     "image": "sponsors/ミイダス株式会社.jpg"
   },
   {
     "id": 4,
     "name": "株式会社カミナシ",
     "class": "Gold",
-    "description": "",
+    "description": "「ノンデスクワーカーの才能を解き放つ」をミッションに掲げるスタートアップ、カミナシは、ホリゾンタルSaaSの現場DXプラットフォームを提供しています。\nPCやデスクのない現場で働く約3,900万人のノンデスクワーカーの働き方を、現場のムダを削減し利益を生む現場づくりを実現する「現場DXプラットフォーム」のカミナシで解決します。\n2023年3月にシリーズBで約30億円の資金調達を行い、カミナシはオールインワンSaaSとして、現場のEmployeeやCommunication領域のDXに拡大していきます。",
     "image": "sponsors/株式会社カミナシ.png"
   },
   {

diff --git a/src/pages/sponsors/[id].astro b/src/pages/sponsors/[id].astro
@@ -6,29 +6,74 @@ import { concatWithBase } from "@utils/concatWithBase";
 
 export async function getStaticPaths() {
   const sponsors = await getEntry("sponsors", "data");
-  return sponsors.data.map((sponsor) => ({
-    params: { id: sponsor.id },
-    props: { sponsor },
-  }));
+  return sponsors.data
+    .filter(
+      (sponsor) =>
+        sponsor.class === "Platinum Gold" || sponsor.class === "Gold",
+    )
+    .map((sponsor) => ({
+      params: { id: sponsor.id },
+      props: { sponsor },
+    }));
 }
 
 const { sponsor } = Astro.props;
 ---
 
 <BaseLayout title={sponsor.name}>
-  <h1>{sponsor.name}</h1>
-  <Image
-    src={concatWithBase(sponsor.image)}
-    width="320"
-    height="240"
-    loading="lazy"
-    alt={sponsor.name}
-  />
-  <p>{sponsor.description}</p>
+  <div class="container">
+    <div class="card">
+      <Image
+        src={concatWithBase(sponsor.image)}
+        width="448"
+        height="242"
+        loading="lazy"
+        alt={sponsor.name}
+      />
+      <h1>{sponsor.name}</h1>
+      <h3 class="tier">{sponsor.class} スポンサー</h3>
+      <p>{sponsor.description}</p>
+    </div>
+  </div>
 </BaseLayout>
 
 <style>
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 32px;
+    padding-inline: 16px;
+
+    color: #222;
+  }
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
   img {
     object-fit: contain;
+    margin: 16px 0;
+    @media screen and (max-width: 448px) {
+      max-width: 448px;
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  .tier {
+    color: #666;
+  }
+
+  p {
+    font-size: 1.2rem;
+    line-height: 1.8;
+    margin-top: 48px;
+    @media screen and (max-width: 448px) {
+      font-size: 1rem;
+    }
   }
 </style>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -4,8 +4,13 @@
   padding: 0;
 }
 
+html {
+  height: 100%;
+}
+
 body {
   font-family: "Poppins", sans-serif;
+  height: 100%;
 }
 
 h1 {