Merge pull request #11 from nekko-lab/special-thanks

specialThanksの作成

src/components/header.tsx

@@ -23,7 +23,7 @@ export default component$(() => {
     >
       <div
         class={css({
-          display: { md: "flex", base: "none" },
+          display: { lg: "flex", base: "none" },
           justifyContent: "space-between",
           fontWeight: 300,
           fontSize: 20,
@@ -66,12 +66,18 @@ export default component$(() => {
             <li>
               <HeaderLink value="Venue" />
             </li>
+            <li>
+              <HeaderLink value="SpecialThanks" />
+            </li>
+            <li>
+              <HeaderLink value="Ads" />
+            </li>
           </ul>
         </nav>
       </div>
       <div
         class={css({
-          display: { md: "none", base: "inline-block" },
+          display: { lg: "none", base: "inline-block" },
           marginY: "40px",
           position: "relative",
           marginLeft: "2em",
@@ -169,7 +175,7 @@ export default component$(() => {
 
               maskImage:
                 "linear-gradient(to top, rgb(0 0 0 / 100%) 85%, rgb(0 0 0 / 0%) 100%), \
-              linear-gradient(to bottom, rgb(0 0 0 / 100%) 85%, rgb(0 0 0 / 0%) 100%), \
+              linear-gradient(to bottom, rgb(0 0 0 / 100%) 90%, rgb(0 0 0 / 0%) 100%), \
               linear-gradient(to left, rgb(0 0 0 / 100%) 85%, rgb(0 0 0 / 0%) 100%), \
               linear-gradient(to right, rgb(0 0 0 / 100%) 85%, rgb(0 0 0 / 0%) 100%)",
               maskComposite: "intersect",
@@ -186,7 +192,7 @@ export default component$(() => {
                 paddingTop: 15,
                 paddingLeft: 19,
                 position: "relative",
-                w: 140,
+                w: 220,
 
                 "& li": {
                   position: "relative",
@@ -248,6 +254,18 @@ export default component$(() => {
                   <HeaderLink value="Venue" />
                 </span>
               </li>
+              <li>
+                <span></span>
+                <span>
+                  <HeaderLink value="SpecialThanks" />
+                </span>
+              </li>
+              <li>
+                <span></span>
+                <span>
+                  <HeaderLink value="Ads" />
+                </span>
+              </li>
             </ul>
           </nav>
         </div>

src/routes/index.tsx

@@ -14,6 +14,8 @@ import Footer from "~/components/footer";
 import { animate } from "motion";
 import Map from "./map.png?jsx";
 import Character from "./character.png?jsx";
+import Nekoreru_menu from "./nekoteru_menu.jpg?jsx";
+import Nekoteru from "./nekoteru.jpg?jsx";
 
 export default component$(() => {
   // eslint-disable-next-line qwik/no-use-visible-task
@@ -343,6 +345,64 @@ export default component$(() => {
               </div>
             </budoux-ja>
           </Section>
+
+          {/* --- Venue --- */}
+          <Section>
+            <Heading value="SpecialThanks" description="協力" />
+            <Block Title="ステージ共同制作">
+              <p
+                class={css({
+                  marginBottom: 20,
+                })}
+              >
+                けんとけん かずま
+              </p>
+            </Block>
+            <Heading value="Ads" description="広告" />
+            <budoux-ja>
+              <div
+                class={css({
+                  display: "flex",
+                  flexDir: { md: "row", base: "column" },
+                  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>
+                  <Nekoteru
+                    class={css({
+                      height: "500px",
+                      width: "auto",
+                    })}
+                    alt="ネコテル ポスター"
+                  />
+                </div>
+                <div>
+                  <Nekoreru_menu
+                    class={css({
+                      height: "500px",
+                      width: "auto",
+                    })}
+                    alt="ネコテル メニュー"
+                  />
+                </div>
+              </div>
+            </budoux-ja>
+          </Section>
         </div>
       </main>
       <Footer />