6 files changed, 62 insertions, 11 deletions
diff --git a/web/src/components/Hero.astro b/web/src/components/Hero.astro
index e69de29..94c7e34 100644
--- a/web/src/components/Hero.astro
+++ b/web/src/components/Hero.astro
@@ -0,0 +1,19 @@
+---
+import {type ImageMetadata} from "astro";
+import {Picture} from "astro:assets";
+
+export type Props = {
+	image: ImageMetadata,
+	alt: string
+}
+---
+<div class="relative text-white overflow-hidden h-80">
+	<div class="inset-0 absolute pointer-events-none">
+		<Picture src={Astro.props.image} alt={Astro.props.alt}
+				 class="object-cover object-center w-full h-full"></Picture>
+		<div class="absolute inset-0 bg-black opacity-30"></div>
+	</div>
+	<div class="relative z-10 flex flex-col justify-center items-center h-full text-center">
+		<slot/>
+	</div>
+</div>
diff --git a/web/src/components/NavBar.astro b/web/src/components/NavBar.astro
new file mode 100644
index 0000000..5cecbb4
--- /dev/null
+++ b/web/src/components/NavBar.astro
@@ -0,0 +1,26 @@
+---
+export type Props = {
+	navStyle?: 'transparent' | 'full'
+}
+
+const navbar = Astro.props.navStyle ?? 'full';
+---
+
+<nav
+	class={`max-w-screen-xl bg-gray-800 flex flex-wrap items-center justify-between mx-auto px-2 py-1 leading-tight ${navbar == 'transparent' ? 'bg-opacity-50 backdrop-blur-lg absolute z-10 w-full top-0' : ''}`}>
+	<a href="/" class="flex items-center space-x-3">
+		<!--<img src=""/> TODO: add logo -->
+		<span class="self-center font-semibold whitespace-nowrap">Firmament</span>
+	</a>
+	<div class="block w-auto">
+		<ul class="font-medium flex-row mt-0 flex border-0">
+			<li>
+				<a class="px-1"
+				   href="https://github.com/nea89o/Firmament/blob/master/docs/Texture%20Pack%20Format.md">Docs</a>
+			</li>
+			<li>
+				<a class="px-1" href="/texture-packs">Texture Packs</a>
+			</li>
+		</ul>
+	</div>
+</nav>
diff --git a/web/src/components/Base.astro b/web/src/layouts/Base.astro
index 73ce48c..da71f41 100644
--- a/web/src/components/Base.astro
+++ b/web/src/layouts/Base.astro
@@ -1,12 +1,13 @@
 ---
 import Head, {type Props as HeadProps} from "./Head.astro";
-
-type Props = {} & HeadProps;
+type Props = {
+} & HeadProps;
 ---
 
 <html>
 <Head {...Astro.props}></Head>
-<body>
-
+<body class="bg-gray-800 text-white">
+<slot/>
+<footer></footer>
 </body>
 </html>
diff --git a/web/src/components/Head.astro b/web/src/layouts/Head.astro
index 2732105..2732105 100644
--- a/web/src/components/Head.astro
+++ b/web/src/layouts/Head.astro
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index 3797b42..139b515 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -1,10 +1,15 @@
 ---
-import Head from "../components/Head.astro";
+import Hero from "../components/Hero.astro"
+import Base from "../layouts/Base.astro";
+import Image from "../panorama.png";
+import NavBar from "../components/NavBar.astro";
 ---
 
-<html lang="en">
-<Head title="Firmament"></Head>
-<body>
-<h1>Astro</h1>
-</body>
-</html>
+<Base title="Firmament">
+	<Hero image={Image} alt="A panorama shot of the HyPixel SkyBlock hub">
+		<h1 class="text-4xl font-bold leading-tight mb-4">Firmament</h1>
+		<p class="text-lg text-gray-300 mb-8">Hypixel SkyBlock Utility Mod</p>
+		<a href="https://modrinth.com/mod/firmament" class="bg-amber-300 hover:bg-yellow-400 rounded-full text-black text-lg transition duration-300 hover:scale-110 hover:shadow-lg py-1 px-5">Download now</a>
+	</Hero>
+	<NavBar navStyle="transparent"></NavBar>
+</Base>
diff --git a/web/src/panorama.png b/web/src/panorama.png
new file mode 100644
index 0000000..d1ef600
--- /dev/null
+++ b/web/src/panorama.png