From 56934df6a8463e023ec323015b960d3e8af80162 Mon Sep 17 00:00:00 2001
From: pantyetta <email@pantyetta.com>
Date: Fri, 22 Nov 2024 01:26:07 +0900
Subject: [PATCH] special thanks animation

---
 src/components/header.tsx |  9 +++++++++
 src/routes/index.tsx      | 37 +++++++++++++++++++++++--------------
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index f1a437d..7c9c390 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -69,6 +69,9 @@ export default component$(() => {
             <li>
               <HeaderLink value="SpecialThanks" />
             </li>
+            <li>
+              <HeaderLink value="Ads" />
+            </li>
           </ul>
         </nav>
       </div>
@@ -257,6 +260,12 @@ export default component$(() => {
                   <HeaderLink value="SpecialThanks" />
                 </span>
               </li>
+              <li>
+                <span></span>
+                <span>
+                  <HeaderLink value="Ads" />
+                </span>
+              </li>
             </ul>
           </nav>
         </div>
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 91b4696..c74988b 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -346,6 +346,16 @@ export default component$(() => {
           {/* --- Venue --- */}
           <Section>
             <Heading value="SpecialThanks" description="協力" />
+            <Block Title="ステージ共同制作">
+              <p
+                class={css({
+                  marginBottom: 20,
+                })}
+              >
+                けんとけん かずま
+              </p>
+            </Block>
+            <Heading value="Ads" description="広告" />
             <budoux-ja>
               <div
                 class={css({
@@ -354,22 +364,21 @@ export default component$(() => {
                   margin: 5,
                   gap: 4,
                   flexWrap: "wrap",
+                  opacity: 0,
+                  transform: "translateX(-10px)",
                 })}
+                onQVisible$={(e) => {
+                  animate(
+                    e.detail.target,
+                    { opacity: 1, transform: "translateX(0px)" },
+                    {
+                      duration: 0.6,
+                      delay: base_delay + 0.45,
+                      easing: "ease-in-out",
+                    },
+                  );
+                }}
               >
-                <div
-                  class={css({
-                    height: "500px",
-                    width: "353px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    border: "white 1px solid",
-                    fontSize: "30px",
-                    backdropFilter: "blur(1px)",
-                  })}
-                >
-                  Kazuma
-                </div>
                 <div>
                   <Nekoteru
                     class={css({