shade top diamond

src/pages/index.tsx

@@ -1,33 +1,45 @@
 import Layout from "@/components/layouts/base";
 import ScheduleSection from "@/components/organisms/Schedule";
 import StatementSection from "@/components/organisms/Statement";
-import { mq } from "@/themes/settings/breakpoints";
 import { brand } from "@/themes/settings/color";
 import type { PageProps } from "@/types";
 import type { ComponentProps } from "@/types";
 import { css } from "@emotion/react";
 import { NextPage } from "next";
 import Image from "next/image";
 import Link from "next/link";
-import topHero from "public/images/hero-top.png";
+import topHero from "public/images/hero_top.jpg";
 import ETHTokyoLogo from "public/logo/ETHTokyoLogo.png";
 import seikaiha from "public/seikaiha.png";
 
 const Page: NextPage<PageProps> = ({ params, searchParams }) => {
   const TriangleJpWaveBackground = ({ children }: ComponentProps) => {
-    const jpWaveStyle = css`
-      background-color: ${brand.Miyabi};
-      background-image: url(${seikaiha.src});
-      background-repeat: repeat;
-      clip-path: polygon(-30% 0, 130% 0, 50% 65vh);
-      height: 65%;
+    const jpWaveBackgroundStyle = css`
+      background: linear-gradient(
+        to right,
+        #622d58 50%,
+        #622d58 50%,
+        ${brand.Miyabi} 50%,
+        ${brand.Miyabi} 100%
+      );
+      clip-path: polygon(calc(50% - 380px) 0, calc(50% + 380px) 0, 50% 500px);
+      height: 500px;
       text-align: center;
 
-      ${mq.laptop} {
-        clip-path: polygon(20% 0, 80% 0, 50% 65vh);
-      }
+
     `;
-    return <div css={jpWaveStyle}>{children}</div>;
+    return (
+      <div css={jpWaveBackgroundStyle}>
+        <div
+          css={css`
+            background: url(${seikaiha.src}), repeat;
+            height: 100%;
+          `}
+        >
+          {children}
+        </div>
+      </div>
+    );
   };
 
   const EventLogo = () => {
@@ -37,12 +49,8 @@ const Page: NextPage<PageProps> = ({ params, searchParams }) => {
         alt="ETHTokyo logo"
         css={css`
           height: auto;
-          max-width: 240px;
-          width: 50vw;
-
-          ${mq.laptop} {
-            padding: 1rem
-          }
+          max-width: 256px;
+          padding-top: 1rem
         `}
       />
     );
@@ -51,7 +59,7 @@ const Page: NextPage<PageProps> = ({ params, searchParams }) => {
   const TopSection = () => {
     const topBackgroundStyle = css`
       background-image: url(${topHero.src});
-      background-position: top;
+      background-position: top 4rem center;
       background-size: cover;
       height: 100vh;
       width: 100%;
@@ -66,13 +74,7 @@ const Page: NextPage<PageProps> = ({ params, searchParams }) => {
           </p>
 
           <EventLogo />
-          <div
-            css={css`
-              ${mq.desktop} {
-                padding: 2rem 0;
-              }
-            `}
-          >
+          <div css={css`padding: 1rem 0;`}>
             <h1>Aug 23-26, 2024</h1>
             <h1>Tokyo, Japan</h1>
           </div>