chore: (re)init

src/pages/Home/index.tsx

@@ -0,0 +1,39 @@
+import preactLogo from '../../assets/preact.svg';
+import './style.css';
+
+export function Home() {
+	return (
+		<div class="home">
+			<a href="https://preactjs.com" target="_blank">
+				<img src={preactLogo} alt="Preact logo" height="160" width="160" />
+			</a>
+			<h1>Get Started building Vite-powered Preact Apps </h1>
+			<section>
+				<Resource
+					title="Learn Preact"
+					description="If you're new to Preact, try the interactive tutorial to learn important concepts"
+					href="https://preactjs.com/tutorial"
+				/>
+				<Resource
+					title="Differences to React"
+					description="If you're coming from React, you may want to check out our docs to see where Preact differs"
+					href="https://preactjs.com/guide/v10/differences-to-react"
+				/>
+				<Resource
+					title="Learn Vite"
+					description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
+					href="https://vitejs.dev"
+				/>
+			</section>
+		</div>
+	);
+}
+
+function Resource(props) {
+	return (
+		<a href={props.href} target="_blank" class="resource">
+			<h2>{props.title}</h2>
+			<p>{props.description}</p>
+		</a>
+	);
+}

src/pages/Home/style.css

@@ -0,0 +1,47 @@
+img {
+	margin-bottom: 1.5rem;
+}
+
+img:hover {
+	filter: drop-shadow(0 0 2em #673ab8aa);
+}
+
+.home section {
+	margin-top: 5rem;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	column-gap: 1.5rem;
+}
+
+.resource {
+	padding: 0.75rem 1.5rem;
+	border-radius: 0.5rem;
+	text-align: left;
+	text-decoration: none;
+	color: #222;
+	background-color: #f1f1f1;
+	border: 1px solid transparent;
+}
+
+.resource:hover {
+	border: 1px solid #000;
+	box-shadow: 0 25px 50px -12px #673ab888;
+}
+
+@media (max-width: 639px) {
+	.home section {
+		margin-top: 5rem;
+		grid-template-columns: 1fr;
+		row-gap: 1rem;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.resource {
+		color: #ccc;
+		background-color: #161616;
+	}
+	.resource:hover {
+		border: 1px solid #bbb;
+	}
+}

src/pages/_404.tsx

@@ -0,0 +1,8 @@
+export function NotFound() {
+	return (
+		<section>
+			<h1>404: Not Found</h1>
+			<p>It's gone :(</p>
+		</section>
+	);
+}