diff --git a/apps/site/src/app/schedule/Header/Header.module.scss b/apps/site/src/app/schedule/Header/Header.module.scss index 2101401d..56dfd6c8 100644 --- a/apps/site/src/app/schedule/Header/Header.module.scss +++ b/apps/site/src/app/schedule/Header/Header.module.scss @@ -1,8 +1,8 @@ .header { - margin-top: 200px; height: auto; display: flex; flex-direction: column; - gap: 50px; align-items: center; + + gap: 50px; } diff --git a/apps/site/src/app/schedule/Header/Header.tsx b/apps/site/src/app/schedule/Header/Header.tsx index 2fef4767..6a72b07e 100644 --- a/apps/site/src/app/schedule/Header/Header.tsx +++ b/apps/site/src/app/schedule/Header/Header.tsx @@ -1,11 +1,11 @@ "use client"; +import Image from "next/image"; import Countdown from "../Countdown/Countdown"; -import Image from "next/image"; -import Chest from "@/assets/images/schedule-chest.png"; +import Chest from "@/assets/images/schedule-chest.svg"; import OpenChest from "@/assets/images/schedule-chest-open.svg"; -import Title from "@/assets/images/schedule-title.png"; +import Title from "@/assets/images/schedule-title.svg"; import styles from "./Header.module.scss"; interface HeaderProps { diff --git a/apps/site/src/app/schedule/Schedule.module.scss b/apps/site/src/app/schedule/Schedule.module.scss index 1919760f..5ea81e97 100644 --- a/apps/site/src/app/schedule/Schedule.module.scss +++ b/apps/site/src/app/schedule/Schedule.module.scss @@ -1,21 +1,26 @@ @use "bootstrap-utils" as bootstrap; -$container-padding: 8rem; +$sm-width: 170vw; +$md-width: 140vw; +$width: 100vw; -.schedule { - h1 { - text-align: center; +.background { + position: absolute; + width: $sm-width; + left: calc((100% - $sm-width) / 2); + padding-top: 0; - @include bootstrap.rfs(8rem, margin-bottom); - } - - margin: 10rem 1rem; + z-index: -1; @include bootstrap.media-breakpoint-up(md) { - margin: 10rem 7rem; + padding-top: 50px; + width: $md-width; + left: calc((100% - $md-width) / 2); } - h2 { - text-align: center; + @include bootstrap.media-breakpoint-up(xxl) { + height: auto; + width: $width; + left: calc((100% - $width) / 2); } } diff --git a/apps/site/src/app/schedule/Schedule.tsx b/apps/site/src/app/schedule/Schedule.tsx index 9e7acd6e..d75f7f27 100644 --- a/apps/site/src/app/schedule/Schedule.tsx +++ b/apps/site/src/app/schedule/Schedule.tsx @@ -1,9 +1,22 @@ +import Image from "next/image"; + import { getSchedule } from "./getSchedule"; +import ScheduleTimer from "./ScheduleTimer/ScheduleTimer"; + +import background from "@/assets/images/schedule-background.svg"; import styles from "./Schedule.module.scss"; -import ScheduleTimer from "./ScheduleTimer"; export default async function Schedule() { const schedule = await getSchedule(); - return ; + return ( + <> + cloud background + + + ); } diff --git a/apps/site/src/app/schedule/ScheduleTimer/ScheduleTimer.module.scss b/apps/site/src/app/schedule/ScheduleTimer/ScheduleTimer.module.scss new file mode 100644 index 00000000..97f46657 --- /dev/null +++ b/apps/site/src/app/schedule/ScheduleTimer/ScheduleTimer.module.scss @@ -0,0 +1,3 @@ +.timer { + padding-top: 200px; +} diff --git a/apps/site/src/app/schedule/ScheduleTimer.tsx b/apps/site/src/app/schedule/ScheduleTimer/ScheduleTimer.tsx similarity index 80% rename from apps/site/src/app/schedule/ScheduleTimer.tsx rename to apps/site/src/app/schedule/ScheduleTimer/ScheduleTimer.tsx index 52cc1457..e9fbf430 100644 --- a/apps/site/src/app/schedule/ScheduleTimer.tsx +++ b/apps/site/src/app/schedule/ScheduleTimer/ScheduleTimer.tsx @@ -1,11 +1,13 @@ "use client"; - -import Header from "./Header/Header"; -import DayOne from "./DayOne/DayOne"; -import DayTwo from "./DayTwo/DayTwo"; -import DayThree from "./DayThree/DayThree"; import { useEffect, useState } from "react"; +import Header from "../Header/Header"; +import DayOne from "../DayOne/DayOne"; +import DayTwo from "../DayTwo/DayTwo"; +import DayThree from "../DayThree/DayThree"; + +import styles from "./ScheduleTimer.module.scss"; + interface ScheduleProps { schedule: Array; } @@ -38,12 +40,12 @@ const ScheduleTimer: React.FC = ({ schedule }) => { ); return ( - <> +
- +
); }; diff --git a/apps/site/src/assets/images/schedule-background.svg b/apps/site/src/assets/images/schedule-background.svg new file mode 100644 index 00000000..94ce0775 --- /dev/null +++ b/apps/site/src/assets/images/schedule-background.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/src/assets/images/schedule-chest.png b/apps/site/src/assets/images/schedule-chest.png deleted file mode 100644 index bbc4f775..00000000 Binary files a/apps/site/src/assets/images/schedule-chest.png and /dev/null differ diff --git a/apps/site/src/assets/images/schedule-chest.svg b/apps/site/src/assets/images/schedule-chest.svg new file mode 100644 index 00000000..1f3bebde --- /dev/null +++ b/apps/site/src/assets/images/schedule-chest.svg @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/src/assets/images/schedule-title.png b/apps/site/src/assets/images/schedule-title.png deleted file mode 100644 index 75fee73f..00000000 Binary files a/apps/site/src/assets/images/schedule-title.png and /dev/null differ diff --git a/apps/site/src/assets/images/schedule-title.svg b/apps/site/src/assets/images/schedule-title.svg new file mode 100644 index 00000000..3191c429 --- /dev/null +++ b/apps/site/src/assets/images/schedule-title.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + +