diff --git a/src/components/icons/pin_black.svg b/src/components/icons/pin_black.svg
new file mode 100644
index 0000000..adb9eac
--- /dev/null
+++ b/src/components/icons/pin_black.svg
@@ -0,0 +1,11 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_888_2167)">
+<path d="M20 9.5C20 15 12.5 22 12.5 22C12.5 22 5 15 5 9.5C5 7.51088 5.79018 5.60322 7.1967 4.1967C8.60322 2.79018 10.5109 2 12.5 2C14.4891 2 16.3968 2.79018 17.8033 4.1967C19.2098 5.60322 20 7.51088 20 9.5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5 12C13.8807 12 15 10.8807 15 9.5C15 8.11929 13.8807 7 12.5 7C11.1193 7 10 8.11929 10 9.5C10 10.8807 11.1193 12 12.5 12Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_888_2167">
+<rect width="24" height="24" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/icons/pin_white.svg b/src/components/icons/pin_white.svg
new file mode 100644
index 0000000..202b87a
--- /dev/null
+++ b/src/components/icons/pin_white.svg
@@ -0,0 +1,11 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_888_2159)">
+<path d="M20 9.5C20 15 12.5 22 12.5 22C12.5 22 5 15 5 9.5C5 7.51088 5.79018 5.60322 7.1967 4.1967C8.60322 2.79018 10.5109 2 12.5 2C14.4891 2 16.3968 2.79018 17.8033 4.1967C19.2098 5.60322 20 7.51088 20 9.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5 12C13.8807 12 15 10.8807 15 9.5C15 8.11929 13.8807 7 12.5 7C11.1193 7 10 8.11929 10 9.5C10 10.8807 11.1193 12 12.5 12Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_888_2159">
+<rect width="24" height="24" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/top/Date.astro b/src/components/top/Date.astro
new file mode 100644
index 0000000..919dfb4
--- /dev/null
+++ b/src/components/top/Date.astro
@@ -0,0 +1,158 @@
+---
+import Panel from "../Layouts/Panel.astro";
+import MiniPanel from "../Layouts/MiniPanel.astro";
+
+import PinIcon from "../icons/pin_black.svg";
+import ArrowUpRightFromSquareIcon from "../icons/arrow-up-right-from-square.svg";
+---
+
+<style>
+ .date {
+ text-align: center;
+
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ margin-bottom: 24px;
+
+ .time {
+ font-family: "Futura", "Jost", sans-serif;
+ font-size: 36px;
+ font-weight: 500;
+ line-height: 47.81px;
+ text-underline-position: from-font;
+ text-decoration-skip-ink: none;
+ }
+
+ .start {
+ font-family: "Futura", "Jost", sans-serif;
+ font-size: 24px;
+ font-weight: 500;
+ line-height: 31.88px;
+ text-underline-position: from-font;
+ text-decoration-skip-ink: none;
+ }
+
+ .venue {
+ display: flex;
+ justify-content: center;
+ align-items: baseline;
+ gap: 12px;
+
+ a {
+ font-size: 24px;
+ font-weight: 600;
+ line-height: 36px;
+ text-align: center;
+ text-decoration-line: underline;
+ text-decoration-style: solid;
+ text-underline-position: from-font;
+ text-decoration-skip-ink: none;
+ }
+ }
+ }
+
+ .zenyasai {
+ .header {
+ padding-bottom: 16px;
+ margin-bottom: 16px;
+ border-bottom: 1px solid #AEAEB2;
+
+ h3 {
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 30px;
+ text-align: left;
+ text-underline-position: from-font;
+ text-decoration-skip-ink: none;
+ }
+ }
+
+ .body {
+ p {
+ font-size: 14px;
+ font-weight: 300;
+ line-height: 32px;
+ text-align: left;
+ text-underline-position: from-font;
+ text-decoration-skip-ink: none;
+ }
+ a {
+ text-decoration: none;
+ }
+
+ ul {
+ padding-left: 16px;
+
+ li {
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 32px;
+ text-align: left;
+ text-underline-position: from-font;
+ text-decoration-skip-ink: none;
+ }
+ }
+ }
+ }
+
+ .connpass {
+ margin-top: 24px;
+ display: flex;
+ justify-content: center;
+
+ a {
+ background-color: #fff;
+
+ padding: 16px 24px;
+ border: 1px solid #AEAEB2;
+ border-radius: 4px;
+
+ text-align: center;
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 24px;
+ text-align: left;
+ text-underline-position: from-font;
+ text-decoration-skip-ink: none;
+ text-decoration: none;
+ }
+ }
+</style>
+
+<Panel title="Date">
+ <div class="date">
+ <p class="time">2025.1.18 (Sat.) 11:00〜18:00</p>
+ <p class="start">Door Open 10:30</p>
+ <div class="venue">
+ <img src={PinIcon.src} alt="map pin" height="20" />
+ <a href="https://salvia.hall-info.jp/about/#access">横浜市鶴見区文化センター サルビアホール</a>
+ </div>
+ </div>
+ <div class="zenyasai">
+ <MiniPanel backgroundColor="#FCECE8">
+ <div class="header">
+ <h3>前夜祭について</h3>
+ </div>
+ <div class="body">
+ <p>チケットを購入した方のみご参加いただけます。詳細は <a href="https://connpass.com/event/339170/">connpass のイベント</a>をご確認ください。</p>
+ <ul>
+ <li>
+ 日時：2025.1.17 (Fri.)
+ <ul>
+ <li>第一部：クリエイティブコーディングワークショップ 16:00~</li>
+ <li>第二部：新年往復！ 駅伝トーク（鶴見中継所まで） 18:00~</li>
+ </ul>
+ </li>
+ <li>
+ 会場：株式会社アンドパッド 東京都千代田区神田練塀町300 住友不動産秋葉原駅前ビル 9階
+ </li>
+ </ul>
+ </div>
+ <div class="connpass">
+ <a href="https://connpass.com/event/339170/">詳細を確認する（connpass）<img src={ArrowUpRightFromSquareIcon.src} height="16" /></a>
+ </div>
+ </MiniPanel>
+ </div>
+</Panel>
diff --git a/src/components/top/Hero.astro b/src/components/top/Hero.astro
index acb1b05..90851cb 100644
--- a/src/components/top/Hero.astro
+++ b/src/components/top/Hero.astro
@@ -1,9 +1,11 @@
---
-import PrimaryLogoWhiteImage from "../../imgs/primary_logo_white.png";
-import TriImage from "../../imgs/tri.png";
import TicketButtonBefore from "./TicketButtonBefore.astro";
import TicketButtonSelling from "./TicketButtonSelling.astro";
+import PrimaryLogoWhiteImage from "../../imgs/primary_logo_white.png";
+import TriImage from "../../imgs/tri.png";
+import PinIcon from "../icons/pin_white.svg";
+
function isTicketOpen(): boolean {
return true;
}
@@ -71,21 +73,34 @@ function isTicketOpen(): boolean {
a,
p {
color: #fff;
- text-decoration: none;
}
.inner {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
.en {
display: flex;
justify-content: center;
+ align-items: baseline;
flex-wrap: wrap;
- gap: 4px;
+
+ img {
+ margin-right: 8px;
+ }
p {
font-family: "Futura", "Jost", sans-serif;
+ font-size: 24px;
font-weight: 500;
- font-size: 26px;
- line-height: 36px;
+ line-height: 31.88px;
+ text-align: center;
+ text-decoration-line: underline;
+ text-decoration-style: solid;
+ text-underline-position: from-font;
+ text-decoration-skip-ink: none;
+
}
@media screen and (width <= 480px) {
p {
@@ -99,12 +114,16 @@ function isTicketOpen(): boolean {
display: flex;
justify-content: center;
flex-wrap: wrap;
- gap: 2px;
p {
- font-weight: 500;
+ font-weight: 600;
font-size: 16px;
line-height: 24px;
+ text-align: center;
+ text-decoration-line: underline;
+ text-decoration-style: solid;
+ text-underline-position: from-font;
+ text-decoration-skip-ink: none;
}
@media screen and (width <= 480px) {
p {
@@ -152,11 +171,11 @@ function isTicketOpen(): boolean {
rel="noopener noreferrer"
class="inner"
>
- <div class="ja">
- <p>横浜市鶴見区民文化センター</p><p>サルビアホール</p>
- </div>
<div class="en">
- <p>Tsurumi Cultural Center</p><p>"Salvia Hall"</p>
+ <img src={PinIcon.src} height="24" /><p>Tsurumi Cultural Center</p><p>"Salvia Hall"</p>
+ </div>
+ <div class="ja">
+ <p>(横浜市鶴見区民文化センター</p><p>サルビアホール)</p>
</div>
</a>
</div>
diff --git a/src/components/top/KeynoteSpeakers.astro b/src/components/top/KeynoteSpeakers.astro
index 8aaefb2..72754c5 100644
--- a/src/components/top/KeynoteSpeakers.astro
+++ b/src/components/top/KeynoteSpeakers.astro
@@ -6,7 +6,7 @@ import JhawthornImage from "../../imgs/jhawthorn.jpg";
import EagletmtImage from "../../imgs/eagletmt.jpg";
---
-<Panel title="Keynote Speakers" subtitle="基調講演">
+<Panel title="Keynote Speakers">
<div class="inner">
<KeynoteSpeaker
iconSrc={JhawthornImage.src}
diff --git a/src/components/top/TopMain.astro b/src/components/top/TopMain.astro
index cbe6c78..f910fcd 100644
--- a/src/components/top/TopMain.astro
+++ b/src/components/top/TopMain.astro
@@ -1,9 +1,11 @@
---
-import News from "../news/List.astro";
import About from "./About.astro";
+import DateInfo from "./Date.astro";
+import News from "../news/List.astro";
import KeynoteSpeakers from "./KeynoteSpeakers.astro";
---
<About />
+<DateInfo />
<News limit={3}/>
<KeynoteSpeakers />