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 (
+
+ );
};
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