diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 4c6c821..e69f18f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,7 +1,6 @@ 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"; @@ -9,25 +8,38 @@ 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 = ({ 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
{children}
; + return ( +
+
+ {children} +
+
+ ); }; const EventLogo = () => { @@ -37,12 +49,8 @@ const Page: NextPage = ({ 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 = ({ 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 = ({ params, searchParams }) => {

-
+

Aug 23-26, 2024

Tokyo, Japan