add welcome page

src/modules/Main/Main.jsx

@@ -1,3 +1,4 @@
+import { Welcome } from './Welcome';
 import { Background } from './Background';
 import { PlayfieldsContainer } from './Playfield/PlayfieldsContainer';
 import "./Main.scss";
@@ -7,6 +8,7 @@ export function Main() {
 		<div className="main">
 			<Background />
 			<PlayfieldsContainer />
+			<Welcome />
 		</div>
 	)
 }

src/modules/Main/Welcome.jsx

@@ -0,0 +1,21 @@
+import { useState, useContext, useEffect, useRef } from 'react';
+import { MapPackContext } from '../../contexts/MapPackContext';
+import { BeatmapsContext } from '../../contexts/BeatmapsContext';
+import clsx from 'clsx';
+import WelcomePng from '../../assets/welcome.png';
+import './Welcome.scss';
+
+export function Welcome() {
+	const { mapPack } = useContext(MapPackContext);
+
+	if (!mapPack) return (
+		<div className="welcome">
+			<img src={WelcomePng} className="welcome-image" onDragStart={e => e.preventDefault()} />
+			<div className="welcome-text">Catch Map Visualizer</div>
+			<div className="welcome-instructions">Select or drag a beatmap to start</div>
+			<a href="https://github.com/osu-ctb-vis/Catch-Map-Visualizer" target="_blank" className="welcome-link">GitHub</a>
+		</div>
+	);
+
+	return null;	
+}

src/modules/Main/Welcome.scss

@@ -0,0 +1,40 @@
+.welcome {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	user-select: none;
+	.welcome-image {
+		height: 300px;
+		max-height: 40vh;
+		object-fit: cover;
+		aspect-ratio: 1;
+		opacity: 0.55;
+		transition: transform 0.5s, opacity 0.5s;
+		&:hover {
+			transform: scale(1.02);
+			opacity: 0.6;
+		}
+	}
+	.welcome-text {
+		font-size: 2.25rem;
+		text-align: center;
+		margin-top: 1.5rem;
+		font-weight: 400;
+	}
+	.welcome-instructions {
+		font-size: 1.25rem;
+		text-align: center;
+		margin-top: 0.5rem;
+		opacity: 0.8;
+	}
+	.welcome-link {
+		transform: translateY(2rem);
+		font-size: 1.1rem;
+		text-decoration: none;
+		color: var(--accent-color);
+		filter: contrast(0.6);
+	}
+}