From b85f0c4860b862ca86552f6407308907c2c719f2 Mon Sep 17 00:00:00 2001
From: mochi-yu <mochi.2225.it@gmail.com>
Date: Fri, 20 Mar 2026 22:09:41 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=83=88=E3=83=83=E3=83=97=E3=83=9A?=
 =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=81=AE=E3=80=8C=20Go=20Conference=20?=
 =?UTF-8?q?=E3=81=A8=E3=81=AF=E3=80=8D=E3=81=A8=E3=80=8C=E3=82=B9=E3=83=9D?=
 =?UTF-8?q?=E3=83=B3=E3=82=B5=E3=83=BC=E5=8B=9F=E9=9B=86=E4=B8=AD=E3=80=8D?=
 =?UTF-8?q?=E3=81=AE=E6=83=85=E5=A0=B1=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GlobalStyles.astro           |  1 +
 src/components/top/About.astro              | 93 +++++++++++++++++++++
 src/components/top/SponsorRecruitment.astro | 47 +++++++++++
 src/pages/index.astro                       | 29 +------
 4 files changed, 145 insertions(+), 25 deletions(-)
 create mode 100644 src/components/top/About.astro
 create mode 100644 src/components/top/SponsorRecruitment.astro

diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro
index b7042b6..6b64283 100644
--- a/src/components/GlobalStyles.astro
+++ b/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 {
diff --git a/src/components/top/About.astro b/src/components/top/About.astro
new file mode 100644
index 0000000..01e292b
--- /dev/null
+++ b/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>
diff --git a/src/components/top/SponsorRecruitment.astro b/src/components/top/SponsorRecruitment.astro
new file mode 100644
index 0000000..8299cd4
--- /dev/null
+++ b/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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cca371b..8e285c4 100644
--- a/src/pages/index.astro
+++ b/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>