feat: ヒーローセクションとミッションセクションを追加

src/app/wip/page.tsx

@@ -1,9 +1,15 @@
+import { HeroSection } from "../../components/HeroSection";
+import { MissionSection } from "../../components/MissionSection";
 import { Header } from "../../components/ui/header";
 
 export default function Home() {
   return (
     <>
       <Header />
+      <main className="pt-16">
+        <HeroSection />
+        <MissionSection />
+      </main>
     </>
   );
 }

src/components/Decoration/index.tsx

@@ -0,0 +1,30 @@
+export function Decoration() {
+  return (
+    <svg
+      width="33"
+      height="9"
+      viewBox="0 0 33 9"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden={true}
+    >
+      <path
+        d="M3.35 3.30005H19.5L16.65 9.00005H0.5L3.35 3.30005Z"
+        fill="#FFC0DB"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.4999 7.30005H8.8999L11.1856 3.30005H19.4999L17.4999 7.30005Z"
+        fill="#FF86B9"
+      />
+      <path d="M16.35 0H32.5L29.65 5.7H13.5L16.35 0Z" fill="#6BADE8" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21.3 5.70005H13.5L15.2 2.30005H23L21.3 5.70005Z"
+        fill="#0C7EDC"
+      />
+    </svg>
+  );
+}

src/components/HeroSection/index.tsx

@@ -0,0 +1,15 @@
+import Image from "next/image";
+import HeroImage from "../../../public/hero.png";
+
+export function HeroSection() {
+  return (
+    <section className="relative -mt-4 md:-mt-8 lg:-mt-16">
+      <Image
+        src={HeroImage}
+        alt="TSKaigi 2025のメインビジュアル。2025年5月23日(金) - 24日(土)に開催。"
+        priority
+        sizes="100vw"
+      />
+    </section>
+  );
+}

src/components/MissionSection/index.tsx

@@ -0,0 +1,37 @@
+import { Decoration } from "../Decoration";
+
+export function MissionSection() {
+  return (
+    <section
+      style={{
+        background:
+          "linear-gradient(180deg, rgba(133, 196, 255, 0.6) 0%, rgba(202, 230, 255, 0.6) 5.28%, rgba(233, 245, 255, 0.6) 8.92%)",
+      }}
+      className="relative -mt-8 -z-10 md:-mt-16 lg:-mt-24"
+    >
+      <div className="p-6 flex flex-col justify-center md:p-10 lg:max-w-[940px] lg:mx-auto lg:py-10">
+        <h2 className="text-sm text-center md:text-lg">MISSION</h2>
+
+        <p className="text-blue-500 text-xl font-bold text-center mt-1 lg:mt-4 md:text-2xl lg:text-3xl">
+          学び、繋がり、
+          <span className="text-2xl md:text-4xl lg:text-[42px] font-noto">”型”</span>
+          を破ろう
+        </p>
+        <div className="flex justify-center mt-4 lg:mt-6">
+          <Decoration />
+        </div>
+        <div className="mt-6 text-base leading-7 md:text-lg lg:mt-10">
+          <p>
+            TSKaigiは、日本最大級のTypeScriptをテーマとした技術カンファレンスです。
+          </p>
+          <p>
+            コロナ禍で様々なオフラインイベントが打撃を受ける中、TypeScriptを扱うエンジニアが会場で集まる機会は失われていきました。
+          </p>
+          <p>
+            新型コロナウイルスが落ち着いた今、各所で蓄積されたノウハウが日の目を浴び、より生き生きとTSエンジニアが働ける世界を目指して、TSKaigiを開催します。
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}