Started work on the Hero section.

src/components/Hero.astro

@@ -0,0 +1,11 @@
+<div class="bg-bkg h-full w-full grid grid-cols-6 grid-rows-6">
+    <div class="col-start-1 lg:col-start-2 col-end-5 row-start-2 row-end-4 z-20 bg-bkg/80 p-2 rounded-lg">
+        <h1 class="text-4xl text-accent">Lorem Ipsum</h1>
+        <h2 class="text-primary">Dolor sit amet Et non saepe harum corrupti dicta. Placeat dignissimos quia atque velit distinctio  amet Et non saepe harum corrupti dicta. Placeat dignissimos quia atque velit distinctio consequatur aut. </h2>
+    </div>
+    <div class="bg-teal-200 col-start-1 col-end-7 row-start-1 row-end-7 z-10">
+        <img src="https://loremflickr.com/g/1500/1500/cat,girl/all?lock=132" alt="" class="object-cover h-full w-full">
+    </div>
+
+    <div class="hidden bg-pink-200 col-start-2 col-end-6 row-start-2 row-end-6 z-40"></div>
+</div> 

src/components/Navbar.astro

@@ -3,21 +3,21 @@ import Navlink from "./Navlink.astro";
 const links = [
 	{
 		display: "Home",
-		icon: "H",
 		href: "/"
-	},{
+	}, {
 		display: "Blog",
-		icon: "B",
 		href: "/blog"
 	}, {
 		display: "About",
-		icon: "A",
 		href: "/about"
+	}, {
+		display: "Contact",
+		href: "/contact"
 	}
 ];
 ---
-<nav class="bg-white w-full flex justify-center">
+<nav class="w-full flex justify-center">
 	<div class="justify-around w-full md:w-[767px] flex">
-		{ links.map((item) => (<Navlink href={item.href}, display={item.display}, icon={item.icon} isActive={ (Astro.url.pathname.replace(Astro.currentLocale + "/", "").slice(0,-1) || "/") == item.href}/>)) }
+		{ links.map((item) => (<Navlink href={item.href}, display={item.display}, isActive={ (Astro.url.pathname.replace(Astro.currentLocale + "/", "").slice(0,-1) || "/") == item.href}/>)) }
 	</div>
 </nav>

src/components/Navlink.astro

@@ -1,6 +1,11 @@
 ---
 import { getRelativeLocaleUrl } from "astro:i18n";
 
-const { display, href, icon, isActive } = Astro.props;
+const { display, href, isActive } = Astro.props;
 ---
-<a href={getRelativeLocaleUrl(Astro.currentLocale, href)} class={(isActive ? "bg-yellow-300 " : " ") + "w-full text-center"}><span class="hidden lg:visible">{icon}</span><span>{display}</span></a>
+
+<a
+    href={getRelativeLocaleUrl(Astro.currentLocale, href)}
+    class={(isActive ? "bg-accent " : "bg-content hover:bg-primary ") + " w-full text-center mx-0.5"}
+    ><span>{display}</span></a
+>