From 14e862b61e26ceb0c1b72e4d24df0322f39d2296 Mon Sep 17 00:00:00 2001
From: Asaf Korem <asaf.korem@gmail.com>
Date: Sun, 3 Nov 2024 21:41:15 +0200
Subject: [PATCH] feat: add animations

---
 src/app/globals.css | 26 ++++++++++++++++++++++++++
 src/app/page.tsx    |  6 ++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index db0b822..cfaccb0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -33,3 +33,29 @@
     --ring: 212.7 26.8% 83.9%;
   }
 }
+
+@keyframes shine {
+  0% {
+    filter: drop-shadow(0 0 2px #eab308) brightness(1);
+  }
+  50% {
+    filter: drop-shadow(0 0 10px #eab308) brightness(1.2);
+  }
+  100% {
+    filter: drop-shadow(0 0 2px #eab308) brightness(1);
+  }
+}
+
+.animate-shine {
+  animation: shine 5s ease-in-out infinite;
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-glow {
+    text-shadow: 0 0 10px rgb(234 179 8 / 0.3);
+  }
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 361069c..0497e8e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,8 +10,10 @@ export default function Home() {
         <div className="max-w-5xl mx-auto space-y-6">
           <header className="text-center py-8">
             <div className="flex items-center justify-center gap-3 mb-4">
-              <Flashlight className="w-8 h-8 text-yellow-500 transform rotate-[145deg]" />
-              <h1 className="text-3xl font-bold">Git Spotlight</h1>
+              <Flashlight
+                  className="w-8 h-8 text-yellow-500 transform rotate-[145deg] animate-shine"
+              />
+              <h1 className="text-3xl font-bold text-glow">Git Spotlight</h1>
             </div>
             <p className="text-[#8b949e] max-w-2xl mx-auto mb-6">
               Discover insights in your git history with these carefully crafted command patterns.