vela veci

src/components/atoms/Container.astro

@@ -1,6 +1,7 @@
 ---
+const { class: className } = Astro.props;
 ---
 
-<div class="container mx-auto">
+<div class={"max-w-[90rem] mx-auto " + className}>
     <slot />
 </div>

src/components/widgets/Navbar.astro

@@ -1,5 +1,11 @@
 ---
+import Container from "../atoms/Container.astro";
+
 const navItems = [
+    {
+        name: "Home",
+        link: "/",
+    },
     {
         name: "Projects",
         link: "/projects",
@@ -11,17 +17,17 @@ const navItems = [
 ];
 ---
 
-<header>
-    <nav
-        class="text-white font-light text-2xl flex items-center justify-center"
-    >
-        <ul class="flex w-96 justify-evenly py-3">
+<header class="text-white text-xl h-16 border-b-[1px] border-neutral-800">
+    <Container class="flex justify-between items-center h-full">
+        <a class="font-extrabold text-2xl" href="/">xHyroM</a>
+        <nav>
+            <ul class="flex gap-10">
                 {
                     navItems.map((item) => (
-                    <li>
+                        <li class=" hover:-translate-y-[2px] transition-all">
                             <a
                                 href={item.link}
-                            class="hover:text-[#fbc119] hover:underline hover:drop-shadow-yellowalt"
+                                class="hover:text-[#fbc119] text-neutral-300"
                             >
                                 {item.name}
                             </a>
@@ -30,4 +36,5 @@ const navItems = [
                 }
             </ul>
         </nav>
+    </Container>
 </header>

src/pages/projects.astro

@@ -13,9 +13,11 @@ import Container from "../components/atoms/Container.astro";
     </h1>
 
     <main class="flex gap-14 justify-center flex-wrap">
-        <section class="w-96 bg-neutral-900 p-6 rounded-md">
+        <section
+            class="w-96 border-[1px] border-neutral-800 bg-gray p-6 rounded-md"
+        >
             <h2 class="text-3xl font-bold text-white mb-4">Projects</h2>
-            <p class="text-white">
+            <p class="text-neutral-300">
                 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

tailwind.config.cjs

@@ -5,6 +5,7 @@ module.exports = {
         extend: {
             colors: {
                 dark: "#0D0D0D",
+                gray: "#131313",
             },
             dropShadow: {
                 yellow: ["0 35px 35px rgba(250, 193, 25, 0.5)"],