feat: optimize

Author: staticWagomU

2025/src/pages/index.astro

@@ -5,19 +5,18 @@ import Layout from '../layouts/Layout.astro';
 <Layout>
   <header class="hero">
     <div class="container">
-      <h1>VimConf 2025</h1>
-      <p>なんか</p>
+      <h1>VimConf <wbr />2025</h1>
     </div>
   </header>
 
   <section>
     <div class="container">
-      <h2 class="section-title">VimConf 2025 とは？</h2>
+      <h2 id="VimConf 2025 とは？" class="section-title"><a href="#VimConf 2025 とは？">VimConf 2025 とは？</a></h2>
       <p>VimConf は、世界初かつ世界で唯一のコミュニティによって定期運営されているVimの国際カンファレンスです。</p>
       <h3>概要</h3>
       <table>
         <tr>
-          <th>開催日(予定)</th>
+          <th style="word-break::keep-all;">開催日<wbr />(予定)</th>
           <td>2025-11-02（日）</td>
         </tr>
         <tr>
@@ -29,7 +28,7 @@ import Layout from '../layouts/Layout.astro';
           <td><a href="https://www.fsi.co.jp/akibaplaza/hall.html">アキバプラザ・アキバホール</a></td>
         </tr>
       </table>
-      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.053340275775!2d139.77188631510504!3d35.70030498018984!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ea7a29cf80b%3A0xdce74a4dd51e0a66!2z5a-M5aOr44K944OV44OI44Ki44Kt44OQ44OX44Op44K2!5e0!3m2!1sja!2sjp!4v1513741028586&amp;key=AIzaSyDYecdzqzXTkep-BSPK-rl52Yx3D1HFjME" width="1000" height="400" frameborder="0" style="border:0" allowfullscreen=""></iframe>
+      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.053340275775!2d139.77188631510504!3d35.70030498018984!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ea7a29cf80b%3A0xdce74a4dd51e0a66!2z5a-M5aOr44K944OV44OI44Ki44Kt44OQ44OX44Op44K2!5e0!3m2!1sja!2sjp!4v1513741028586&amp;key=AIzaSyDYecdzqzXTkep-BSPK-rl52Yx3D1HFjME" height="400" style="border:0;width:100%" allowfullscreen=""></iframe>
       <h3>その他</h3>
       <p>発表スライドはすべて英語です。発表は英語か日本語かいずれかの言語で行われます。</p>
       <p>登壇の様子を撮影し、後日 YouTube にアップロードします。</p>
@@ -43,7 +42,7 @@ import Layout from '../layouts/Layout.astro';
 
   <section>
     <div class="container">
-      <h2 class="section-title">なぜスポンサー募集が必要なのか？</h2>
+      <h2 id="なぜスポンサー募集が必要なのか？" class="section-title"><a href="#なぜスポンサー募集が必要なのか？">なぜスポンサー募集が必要なのか？</a></h2>
       <p>
         VimConf2025は、普段なかなか顔を合わせられないVimmer同士が情熱を交わし、知見を共有するための貴重な場です。<br>
         今年は、イベント継続の担保と柔軟な運営のため、必要な資金をスポンサー様のご支援で集める仕組みを採用します。
@@ -53,20 +52,20 @@ import Layout from '../layouts/Layout.astro';
 
   <section>
     <div class="container sponsor-info">
-      <h2 class="section-title">スポンサーシップ概要</h2>
+      <h2 id="スポンサーシップ概要" class="section-title"><a href="#スポンサーシップ概要">スポンサーシップ概要</a></h2>
       <p>
-        <strong>募集期間と判断タイミング：</strong><br>
+        <h3>募集期間と判断タイミング：</h3>
         スポンサー募集は既に開始されています。イベント開催は、必要な支援金が集まった場合にのみ実施します。<br>
-        開催の最終判断は<strong>2025年5月15日（木）</strong>に行います。
+        開催の最終判断は<b>2025年5月15日（木）</b>に行います。
       </p>
       <p>
-        <strong>ご提供いただく支援：</strong><br>
+        <h3>ご提供いただく支援：</h3>
         スポンサーシップに応じたメリット（公式サイトでのロゴ掲載、ノベルティの配布、バックパネルへのロゴ掲載など）をご用意しております。<br>
         イベント開催のための資金として、ぜひご協力ください。<br>
         <em>※ 個人スポンサー募集も行っております。（開催されなかった場合でも返金不可）</em>
       </p>
       <p>
-        <strong>初の試みですので、</strong>不明点やご質問があれば遠慮なくお問い合わせください。
+        <b>初の試みですので、</b>不明点やご質問があれば遠慮なくお問い合わせください。
       </p>
     </div>
   </section>
@@ -77,31 +76,31 @@ import Layout from '../layouts/Layout.astro';
       <h2 class="section-title">スポンサーに関するお問い合わせ</h2>
       <p>
         スポンサーシップに関するご質問、提案などのお問い合わせは、下記のフォームまたはメールにてお気軽にご連絡ください。<br>
-        <strong>※最新情報は随時更新していきます。</strong>
+        <b>※最新情報は随時更新していきます。</b>
       </p>
-      <p style="text-align: center; margin-top: 20px;">
-        <a class="btn" href="https://docs.google.com/presentation/d/1lePjhmnJj7YuH6orB8ykrXXGLMnLMnKSAz22tzCb_Ko/edit#slide=id.p" style="background-color: #069700;" _target="blank">
+      <p style="text-align: center;">
+        <a class="btn" href="https://docs.google.com/presentation/d/1lePjhmnJj7YuH6orB8ykrXXGLMnLMnKSAz22tzCb_Ko/edit#slide=id.p" target="blank">
           お問い合わせフォームへ
         </a>
       </p>
     </div>
   </section>
+  <footer style="background: linear-gradient(240deg, #9ebd13 0%, #069700 100%); color: #fff; text-align: center; padding: 20px 0;">
+  </footer>
 </Layout>
 
 <style>
 
-
-img {
-  max-width: 100%;
-  height: auto;
+h3 {
+  font-size: 1.2rem;
 }
 
 /* コンテナ */
 .container {
   width: 90%;
   max-width: 960px;
   margin: auto;
-  padding: 20px 0;
+  padding: 24px 0;
 }
 
 /* ヒーローセクション */
@@ -110,68 +109,60 @@ img {
   color: #fff;
   padding: 100px 0;
   text-align: center;
-}
-
-.hero h1 {
-  font-size: 2.5rem;
-  margin-bottom: 20px;
-  font-family: "Cardo", serif;
-  font-weight: 400;
-  font-style: italic;
-}
 
-.hero p {
-  font-size: 1.2rem;
+  h1 {
+    font-size: 4rem;
+    margin-bottom: 16px;
+    font-family: "Cardo", serif;
+    font-weight: 400;
+    font-style: italic;
+  }
 }
 
 /* セクションタイトル */
 .section-title {
-  font-size: 1.8rem;
-  margin-bottom: 20px;
+  font-size: 2.4rem;
   border-bottom: 2px solid #ccc;
-  padding-bottom: 10px;
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
 }
 
 /* セクション共通 */
 section {
   padding: 50px 0;
   background-color: #fff;
-  margin-bottom: 20px;
-}
 
-section:nth-of-type(even) {
-  background-color: #f9f9f9;
-}
+  &:nth-of-type(even) {
+    background: #f1f9f1;
+  }
 
-/* スポンサー募集セクション */
-.sponsor-info ul {
-  list-style: disc inside;
-  margin: 10px 0 20px;
+
+section + section {
+  margin-top: 16px;
 }
 
 /* お問い合わせボタン */
 .btn {
   display: inline-block;
-  background-color: #007acc;
+  background-color: #069700;
   color: #fff;
   padding: 12px 20px;
   border-radius: 4px;
-  transition: background-color 0.3s ease;
 }
 
-.btn:hover {
-  background-color: #005fa3;
-}
 table {
   width: 100%;
   border-collapse: collapse;
-  margin: 20px 0;
+  margin: 12px 0;
 }
 
 table th,
 table td {
   border: 1px solid #ccc;
-  padding: 10px;
+  padding: 12px;
   text-align: left;
 }
 
@@ -183,13 +174,11 @@ table th {
 /* レスポンシブ調整 */
 @media (max-width: 600px) {
   .hero h1 {
-    font-size: 2rem;
-  }
-  .hero p {
-    font-size: 1rem;
+    font-size: 3rem;
   }
+
   .section-title {
-    font-size: 1.5rem;
+    font-size: 1.6rem;
   }
 }
 </style>