From 30b9a15e85f07effe8e7ff80c9e1a55c0f4c88db Mon Sep 17 00:00:00 2001
From: Matt Cali <dev@matthewcali.com>
Date: Wed, 16 Jul 2025 19:12:00 -0400
Subject: [PATCH] feat: Add Animation to logo (#45)

---
 src/pages/index.astro | 20 ++++++++++----------
 src/styles/global.css | 25 +++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 16e3008..a582046 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -53,12 +53,13 @@ Lux     # For Neovim`;
       <!-- Main Headlines -->
       <!-- Logo -->
       <div>
-      <img
-        src={logoImage.src}
-        alt="LuxVim Logo"
-        class="h-60 md:h-80 lg:h-98 mx-auto object-contain"
-      />
-        </div>
+        <img
+          src={logoImage.src}
+          alt="LuxVim Logo"
+          class="h-60 md:h-80 lg:h-98 mx-auto object-contain transition-all duration-500 hover:scale-110 animate-pulse-gentle drop-shadow-lg logo-glow"
+          style="filter: drop-shadow(0 10px 20px rgba(147, 51, 234, 0.3)) drop-shadow(0 0 30px rgba(219, 39, 119, 0.2));"
+        />
+      </div>
       <h2
         class="text-2xl md:text-3xl lg:text-4xl font-semibold mb-8 text-slate-800 dark:text-slate-200"
       >
@@ -112,8 +113,7 @@ Lux     # For Neovim`;
 
       <!-- Features Preview -->
       <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto mb-8 md:mb-12" >
-        <div class="flex items-center justify-center p-4 bg-white/5 dark:bg-slate-800/30 backdrop-blur-sm rounded-xl border border-slate-200/10 dark:border-slate-700/30" 
-        >
+        <div class="flex items-center hover:shadow-md justify-center p-4 bg-white/17 dark:bg-slate-800/30 backdrop-blur-sm rounded-xl border border-slate-200/10 dark:border-slate-700/30" >
           <div class="text-center">
             <div
               class="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center mx-auto mb-3"
@@ -141,7 +141,7 @@ Lux     # For Neovim`;
         </div>
 
         <div
-          class="flex items-center justify-center p-4 bg-white/5 dark:bg-slate-800/30 backdrop-blur-sm rounded-xl border border-slate-200/10 dark:border-slate-700/30"
+          class="flex items-center justify-center p-4 hover:shadow-md bg-white/17 dark:bg-slate-800/30 backdrop-blur-sm rounded-xl border border-slate-200/10 dark:border-slate-700/30"
         >
           <div class="text-center">
             <div
@@ -171,7 +171,7 @@ Lux     # For Neovim`;
         </div>
 
         <div
-          class="flex items-center justify-center p-4 bg-white/5 dark:bg-slate-800/30 backdrop-blur-sm rounded-xl border border-slate-200/10 dark:border-slate-700/30"
+          class="flex items-center justify-center p-4 hover:shadow-md bg-white/17 dark:bg-slate-800/30 backdrop-blur-sm rounded-xl border border-slate-200/10 dark:border-slate-700/30"
         >
           <div class="text-center">
             <div
diff --git a/src/styles/global.css b/src/styles/global.css
index e316967..ed695d7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -121,6 +121,31 @@ nav {
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
+/* Gentle pulse animation for logo */
+@keyframes pulse-gentle {
+  0%, 100% {
+    transform: scale(1);
+    filter: brightness(1);
+  }
+  50% {
+    transform: scale(1.02);
+    filter: brightness(1.1);
+  }
+}
+
+.animate-pulse-gentle {
+  animation: pulse-gentle 4s ease-in-out infinite;
+}
+
+/* Logo hover glow effect */
+.logo-glow:hover {
+  filter: drop-shadow(0 10px 20px rgba(147, 51, 234, 0.3)) 
+          drop-shadow(0 0 30px rgba(219, 39, 119, 0.2))
+          drop-shadow(0 0 50px rgba(147, 51, 234, 0.4))
+          drop-shadow(0 0 80px rgba(219, 39, 119, 0.3)) !important;
+}
+
+
 /* Shiki dual theme support */
 .astro-code,
 .astro-code span {