coderdojo-japan · kp54 · Aug 13, 2025 · Aug 12, 2025 · Aug 12, 2025 · Aug 12, 2025
diff --git a/_includes/top/sections/hero.html b/_includes/top/sections/hero.html
@@ -0,0 +1,11 @@
+<div class="max-w-[1500px] mt-2 xl:-mt-14 mx-auto px-[2%] md:px-8">
+  <img src="/img/2025/top/hero-image.png" alt="好奇心に火をつけよう！！ Inspire Next" />
+</div>
+
+<div class="flex mx-auto max-w-[1020px] justify-center lg:justify-start">
+  <p class="lg:-mt-6 xl:-mt-10 leading-8 px-6 text-lg font-bold">
+    DojoCon Japanとは日本の CoderDojo コミュニティメンバーが全国から集まる、<br />
+    年に1度のカンファレンスイベント(CoderDojo Conference) です。<br />
+    2016年に始まり、2025年は福岡県久留米市にて開催します。
+  </p>
+</div>
diff --git a/_layouts/top.html b/_layouts/top.html
@@ -0,0 +1,22 @@
+{% if page_title or page_title == '' %}
+  {% assign page_title = page.title %}
+{% endif %}
+{% if page_subtitle or page_subtitle == '' %}
+  {% assign page_subtitle = page.subtitle %}
+{% endif %}
+{% assign page_title = page.title %}
+<!DOCTYPE html>
+<html lang="ja" dir="ltr">
+{% include head.html %}
+
+<body class="bg-linear-106 from-[#9d1e29] to-[#d4932a] text-[#262626] font-bold tracking-wider min-h-dvh p-4 flex">
+  <div class="bg-white rounded-2xl min-h-full flex-grow flex flex-col">
+    <div class="flex-grow">
+      {{ content }}
+    </div>
+
+    {% include footer.html %}
+  </div>
+</body>
+
+</html>
diff --git a/img/2025/top/header-background.png b/img/2025/top/header-background.png
diff --git a/img/2025/top/hero-image.png b/img/2025/top/hero-image.png
diff --git a/index.md b/index.md
@@ -1,4 +1,8 @@
 ---
-layout: default
+layout: top
 ---
-{% include top/sections/contact.html %}
+<div class="bg-white bg-[url(/img/2025/top/header-background.png)] bg-contain bg-no-repeat bg-top bg-center rounded-2xl min-h-full flex-grow flex flex-col">
+  {% include header.html %}
+
+  {% include top/sections/hero.html %}
+</div>