ano

src/components/widgets/Hero.astro

@@ -2,14 +2,17 @@
 import Socials from "../widgets/Socials.astro";
 import { Image } from "@astrojs/image/components";
 import logo from "../../assets/logo.png";
+import Name from "../widgets/Name.astro";
 ---
 
 <main
     class="mt-24 md:mt-64 flex flex-col md:flex-row justify-center items-center"
 >
-    <Image src={logo} width={200} height={200} alt="descriptive text" />
+    <div class="flex justify-cener items-center">
+        <Image src={logo} width={200} height={200} alt="descriptive text" />
+    </div>
     <section class="md:ml-6 md:text-left text-center">
-        <h1 class="text-white font-extrabold text-6xl">xHyroM</h1>
+        <Name />
         <Socials />
     </section>
 </main>

src/components/widgets/Name.astro

@@ -0,0 +1,6 @@
+---
+---
+
+<div class="flex drop-shadow-yellow">
+    <h1 class="text-white font-extrabold text-6xl">xHyroM</h1>
+</div>

src/components/widgets/Navbar.astro

@@ -29,7 +29,7 @@ const navItems = [
                     <li>
                         <a
                             href={item.link}
-                            class="hover:text-[#fbc119] hover:underline"
+                            class="hover:text-[#fbc119] hover:underline hover:drop-shadow-yellowalt"
                         >
                             {item.name}
                         </a>

src/components/widgets/Socials.astro

@@ -1,5 +1,4 @@
 ---
-import { Image } from "@astrojs/image/components";
 const socials = [
     {
         name: "GitHub",
@@ -17,9 +16,9 @@ const socials = [
         icon: "twitter",
     },
     {
-        name: "YouTube",
+        name: "Instagram",
         link: "https://www.google.com/",
-        icon: "youtube",
+        icon: "instagram",
     },
 ];
 ---
@@ -28,13 +27,9 @@ const socials = [
     {
         socials.map((social) => (
             <li class="mr-4 ">
-                <a
-                    class="hover:-translate-y-1 transition-all w-10 h-10"
-                    href={social.link}
-                    title={social.name}
-                >
+                <a class="  w-10 h-10" href={social.link} title={social.name}>
                     <img
-                        class="w-8 h-8"
+                        class="w-8 h-8 hover:-translate-y-1 transition-all"
                         src={`/icons/${social.icon}.svg`}
                         alt={`${social.name} icon`}
                     />

tailwind.config.cjs

@@ -6,6 +6,10 @@ module.exports = {
             colors: {
                 dark: "#0D0D0D",
             },
+            dropShadow: {
+                yellow: ["0 35px 35px rgba(250, 193, 25, 0.5)"],
+                yellowalt: ["0 4px 12px rgba(250, 193, 25, 0.8)"],
+            },
         },
     },
     plugins: [],