トップページの「 Go Conference とは」と「スポンサー募集中」の情報を追加

src/components/GlobalStyles.astro

@@ -59,6 +59,7 @@
     line-height: 1.75;
     font-family: "Noto Sans JP", sans-serif;
     min-width: 320px;
+    color: var(--text-primary);
   }
 
   .font-barlow {

src/components/top/About.astro

@@ -0,0 +1,93 @@
+---
+import Chip from "../ui/Chip.astro";
+import SectionTitle from "../ui/SectionTitle.astro";
+
+
+---
+
+<section id="about">
+  <div id="about-top">
+    <SectionTitle>
+      <span class="section-title"><span style="color: var(--text-accent);">Go Conference<wbr/></span>とは</span>
+    </SectionTitle>
+    <span class="text-body-large">Go Conference はプログラミング言語 ”Go” ユーザーのためのカンファレンスです。</span>
+  </div>
+
+  <div id="about-details">
+    <div class="row">
+      <div class="chip-container">
+        <Chip text="開催日時" />
+      </div>
+      <span class="text-body-large-strong">2026年9月11日（金） 　<br class="sp-only"/><wbr/>10：00 - 19:00 （開場　9：00）</span>
+    </div>
+    <div class="row">
+      <div class="chip-container">
+        <Chip text="会場" />
+      </div>
+      <span class="text-body-large-strong">東京都中野区中野4丁目10番2号　<br class="sp-only"/><wbr/>中野セントラルパークサウス1,B1F</span>
+    </div>
+    <div class="row">
+      <div class="chip-container">
+        <Chip text="チケット" />
+      </div>
+      <span class="text-body-large-strong">後日公開</span>
+    </div>
+  </div>
+</section>
+
+<style>
+  section#about {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: var(--space-m);
+    padding-bottom: var(--space-l);
+    display: flex;
+    gap: var(--space-m);
+    flex-direction: column;
+  }
+
+  #about-top {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: var(--space-s);
+  }
+
+  .row {
+    max-width: 784px;
+    display: flex;
+    padding: var(--space-xs) 0;
+    gap: var(--space-m);
+    align-items: center;
+    margin: 0 auto;
+    border-bottom: 1px solid var(--surface-disabled);
+
+    word-break: keep-all;
+    overflow-wrap: anywhere;
+  }
+
+  .row .chip-container {
+    width: 160px;
+  }
+
+  @media screen and (max-width: 768px) {
+    section#about {
+      padding: var(--space-m) var(--space-s);
+      gap: var(--space-s);
+    }
+
+    .row {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: var(--space-xs);
+      padding: var(--space-s) 0;
+    }
+
+    .section-title {
+      word-break: keep-all;
+      overflow-wrap: anywhere;
+    }
+  }
+</style>

src/components/top/SponsorRecruitment.astro

@@ -0,0 +1,47 @@
+---
+import Button from "../ui/Button.astro";
+import SectionTitle from "../ui/SectionTitle.astro";
+
+---
+
+<section id="sponsor-recruitment">
+  <SectionTitle>
+      <span class="section-title"><span style="color: var(--text-accent);">ス</span>ポンサー募集中</span>
+  </SectionTitle>
+  <span>Go Conferenceへのスポンサー応募は以下リンクからできます</span>
+  <div class="button-container">
+    <Button variant="secondary" href="https://docs.google.com/forms/d/e/1FAIpQLSdH5gsb4teQ5hdFi9GaCFtNdNNCw1G4qdzyw2NoSWYQCYplow/viewform" size="large" isBlankLink>
+      スポンサー募集フォーム
+    </Button>
+  </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-s);
+    align-items: center;
+  }
+
+  .section-title {
+    word-break: keep-all;
+    overflow-wrap: anywhere;
+    text-align: center;
+  }
+
+  .button-container {
+    max-width: 460px;
+    width: 100%;
+  }
+
+  @media screen and (max-width: 768px) {
+    section {
+      padding: var(--space-m) var(--space-s);
+      gap: var(--space-s);
+    }
+  }
+</style>

src/pages/index.astro

@@ -1,35 +1,14 @@
 ---
+import About from "../components/top/About.astro";
 import MainVisual from "../components/top/MainVisual.astro";
+import SponsorRecruitment from "../components/top/SponsorRecruitment.astro";
 import Layout from "../layouts/Layout.astro";
 ---
 
-<style>
-  .container {
-    display: flex;
-    max-width: 100%;
-    height: 20em;
-
-    align-items: center;
-    justify-content: center;
-  }
-
-  .card {
-    padding: 8px;
-
-    background-color: #e6e6e6;
-    border-radius: 4px;
-  }
-
-  .top-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-</style>
-
 <Layout title="Go Conference 2026">
   <main>
     <MainVisual />
+    <About />
+    <SponsorRecruitment />
   </main>
 </Layout>