projects page prototype

src/components/atoms/Container.astro

@@ -0,0 +1,6 @@
+---
+---
+
+<div class="container mx-auto">
+    <slot />
+</div>

src/components/widgets/Navbar.astro

@@ -1,16 +1,8 @@
 ---
 const navItems = [
     {
-        name: "Docs",
-        link: "/docs",
-    },
-    {
-        name: "Docs",
-        link: "/docs",
-    },
-    {
-        name: "Docs",
-        link: "/docs",
+        name: "Projects",
+        link: "/projects",
     },
     {
         name: "Docs",

src/pages/index.astro

@@ -5,7 +5,7 @@ import Hero from "../components/widgets/Hero.astro";
 import Navbar from "../components/widgets/Navbar.astro";
 ---
 
-<Layout title="Welcome to Astro.">
+<Layout>
     <Navbar />
     <Hero />
 </Layout>

src/pages/projects.astro

@@ -0,0 +1,27 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Hero from "../components/widgets/Hero.astro";
+
+import Navbar from "../components/widgets/Navbar.astro";
+import Container from "../components/atoms/Container.astro";
+---
+
+<Layout>
+    <Navbar />
+    <h1 class="text-white text-5xl w-full text-center py-32 font-extrabold">
+        Projects
+    </h1>
+
+    <main class="flex gap-14 justify-center flex-wrap">
+        <section class="w-96 bg-neutral-900 p-6 rounded-md">
+            <h2 class="text-3xl font-bold text-white mb-4">Projects</h2>
+            <p class="text-white">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+                tincidunt, nisl eget aliquam tincidunt, nisl elit aliquam
+                tortor, eget aliquam nisl elit non nisl. Sed tincidunt, nisl
+                eget aliquam tincidunt, nisl elit aliquam tortor, eget aliquam
+                nisl elit non nisl.
+            </p>
+        </section>
+    </main>
+</Layout>