Merge pull request #28 from coderdojo-japan/improve-navigation-flow

トップページ/ヘッダーの各種導線の整理

Author: yasulab

_includes/faq.html

@@ -1,7 +1,9 @@
 <section id="faq">
-  <div class="text-center mb-16 pt-12">
-    <h1 class="text-5xl sm:text-6xl font-bold uppercase tracking-wider border-b-10 border-teal-500 inline-block" style="font-family: 'League Gothic', sans-serif; color: #221C35;">FAQ</h1>
-    <p class="text-xl mt-2" style="color: #444444;">よくある質問と回答</p>
+  <div class="text-center pt-24 mb-16">
+    <a href="#faq" style="text-decoration: none;">
+      <h1 class="text-5xl sm:text-6xl font-bold uppercase tracking-wider border-b-10 border-teal-500 inline-block" style="font-family: 'League Gothic', sans-serif; color: #221C35;">FAQ</h1>
+      <p class="text-xl mt-2" style="color: #444444;">よくある質問と回答</p>
+    </a>
   </div>
   <div class="qanda">
   {% for faq in site.data.faq %}
@@ -19,4 +21,4 @@ <h1 class="text-5xl sm:text-6xl font-bold uppercase tracking-wider border-b-10 b
     {% endif %}
   {% endfor %}
   </div>
-</section>
+</section>

_includes/footer.html

@@ -6,7 +6,7 @@
         <a href="/">ホーム</a>
         <a href="/about">開催概要</a>
         <a href="/sponsors">スポンサー</a>
-        <a href="/news">お知らせ</a>
+        <a href="/#news">お知らせ</a>
         <a href="/register">来場応募する</a>
         <a href="/staff">運営に参加する</a>
         <a href="/faq">よくある質問</a>

_includes/header.html

@@ -20,6 +20,9 @@
             <li>
               <a class="header-txt" href="/about"> 開催概要 </a>
             </li>
+            <li>
+              <a class="header-txt" href="/#news"> お知らせ </a>
+            </li>
             <li>
               <a class="header-txt" href="/sponsors"> スポンサー </a>
             </li>

_layouts/post.html

@@ -48,11 +48,11 @@ <h1 class="hero-title">お知らせ</h1>
         <div class="max-w-4xl mx-auto">
           <!-- 戻るボタン -->
           <div class="mb-8">
-            <a href="/news" class="inline-flex items-center text-black hover:text-gray-700 font-bold">
+            <a href="/#news" class="inline-flex items-center text-black hover:text-gray-700 font-bold">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
               </svg>
-              一覧に戻る
+              お知らせ一覧に戻る
             </a>
           </div>
 

index.md

@@ -110,12 +110,19 @@ layout: plain
           <p class="mt-5 text-xl sm:text-2xl">Coolest Projectsは、18歳以下の子どもたちのための世界的な作品展示イベントです。プログラミングやテクノロジーを使って作った独自のアイデアや作品を、コミュニティ全体で称賛し合います。順位を競うコンテストではありません。あなたの情熱、創造性、そして技術的な挑戦を世界中の仲間と共有する場所です。</p>
         </div>
       </div>
+
+      <div class="text-center mt-12">
+        <a class="button-push" href="/about">開催概要を見る</a>
+      </div>
     </div>
-    <div class="mt-24">
+
+    <div class="pt-36" id="categories">
       <div class="text-center mb-8">
-        <h1 class='text-5xl sm:text-6xl font-bold uppercase tracking-wider border-b-10 border-teal-500 inline-block'
-          style="font-family: 'League Gothic', sans-serif; color: #221C35;">CATEGORIES</h1>
-        <p class="text-xl mt-2" style="color: #444444;">カテゴリー</p>
+	<a href="#categories" style="text-decoration: none;">
+          <h1 class='text-5xl sm:text-6xl font-bold uppercase tracking-wider border-b-10 border-teal-500 inline-block'
+           style="font-family: 'League Gothic', sans-serif; color: #221C35;">CATEGORIES</h1>
+          <p class="text-xl mt-2" style="color: #444444;">カテゴリー</p>
+	</a>
       </div>
       <!-- カテゴリーカード -->
       <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
@@ -192,12 +199,15 @@ layout: plain
         </div>
       </div>
     </div>
+
     <!-- NEWS セクション -->
-    <div class="mt-24">
+    <div class="pt-36" id="news">
       <div class="text-center mb-16">
-        <h1 class='text-5xl sm:text-6xl font-bold uppercase tracking-wider border-b-10 border-teal-500 inline-block'
-          style="font-family: 'League Gothic', sans-serif; color: #221C35;">NEWS</h1>
-        <p class="text-xl mt-2" style="color: #444444;">お知らせ</p>
+	<a href="#news" style="text-decoration: none;">
+          <h1 class='text-5xl sm:text-6xl font-bold uppercase tracking-wider border-b-10 border-teal-500 inline-block'
+           style="font-family: 'League Gothic', sans-serif; color: #221C35;">NEWS</h1>
+          <p class="text-xl mt-2" style="color: #444444;">お知らせ</p>
+	</a>
       </div>
       <!-- お知らせ一覧（最新3件） -->
       {% assign latest_news = site.posts | where: "categories", "news" | sort: "date" | reverse | limit: 3 %}
@@ -206,16 +216,17 @@ layout: plain
           {% include news_card.html post=post %}
         {% endfor %}
       </div>
-      <!-- もっと見るボタン -->
-      <div class="text-center mt-8">
-        <a class="button-push" href="/news"> もっと見る </a>
-      </div>
+
+      <!-- もっと見るボタン is temporarily disabled until we have more news posts: <div class="text-center mt-8"><a class="button-push" href="/news"> もっと見る </a></div>-->
     </div>
-    <div class="mt-24">
+
+    <div class="pt-36" id="sponsors">
       <div class="text-center mb-16">
-        <h1 class='text-5xl sm:text-6xl font-bold uppercase tracking-wider border-b-10 border-teal-500 inline-block'
-          style="font-family: 'League Gothic', sans-serif; color: #221C35;">SPONSORS</h1>
-        <p class="text-xl mt-2" style="color: #444444;">スポンサー</p>
+	<a href="#sponsors" style="text-decoration: none;">
+          <h1 class='text-5xl sm:text-6xl font-bold uppercase tracking-wider border-b-10 border-teal-500 inline-block'
+           style="font-family: 'League Gothic', sans-serif; color: #221C35;">SPONSORS</h1>
+          <p class="text-xl mt-2" style="color: #444444;">スポンサー</p>
+	</a>
       </div>
       <div class="text-center mb-16">
         <p class="text-xl mb-12" style="color: #444444;">Coolest Projects Japanはスポンサーのご協力により開催されています。協賛くださいました、皆様ありがとうございます。</p>
@@ -313,7 +324,7 @@ layout: plain
             </section>
           </div>
           -->
-          <a href="/sponsors" class="button-push"> スポンサーページを見る </a>
+          <a href="/sponsors" class="button-push"> スポンサー募集のご案内を見る </a>
       </div>
     </div>
   </div>