Add 'power-up' animation for discovery documentation

Author: CodeWithDennis

resources/views/livewire/discover-documentation.blade.php

@@ -60,8 +60,8 @@ class="text-[{{ $selectedFramework->color() }}]">{{ $secondsUntilAvailable }}</s
             DISCOVERED DOCUMENTATION
         </h2>
 
-        <div
-            class="transition-all duration-300 border-4 border-[{{ $selectedFramework->color() }}] bg-[#16213e] p-7 mb-9 flex flex-col items-center justify-center [clip-path:polygon(0_10px,10px_0,calc(100%_-_10px)_0,100%_10px,100%_calc(100%_-_10px),calc(100%_-_10px)_100%,10px_100%,0_calc(100%_-_10px))]">
+        <div class="transition-all duration-300 border-4 border-[{{ $selectedFramework->color() }}] bg-[#16213e] p-7 mb-9 flex flex-col items-center justify-center [clip-path:polygon(0_10px,10px_0,calc(100%_-_10px)_0,100%_10px,100%_calc(100%_-_10px),calc(100%_-_10px)_100%,10px_100%,0_calc(100%_-_10px))] animate-power-up"
+            wire:key="discovery-{{ $link?->id }}">
             <div class="p-4 w-full flex flex-col items-center relative">
                 <div class="absolute top-0 right-0 flex items-center">
                     <x-heroicon-s-eye class="h-4 w-4 text-muted" />

tailwind.config.cjs

@@ -10,18 +10,38 @@ module.exports = {
         'border-[#ff2d20]', 'text-[#ff2d20]', 'bg-[#ff2d20]', 'from-[#ff2d20]', 'to-[#ff2d20]', 'hover:bg-[#ff2d20]', 'hover:text-[#ff2d20]',
         'border-[#f47316]', 'text-[#f47316]', 'bg-[#f47316]', 'from-[#f47316]', 'to-[#f47316]', 'hover:bg-[#f47316]', 'hover:text-[#f47316]',
         'border-[#fb70a9]', 'text-[#fb70a9]', 'bg-[#fb70a9]', 'from-[#fb70a9]', 'to-[#fb70a9]', 'hover:bg-[#fb70a9]', 'hover:text-[#fb70a9]',
-        // Blue color for "All Frameworks" option
         'border-[#3b82f6]', 'text-[#3b82f6]', 'bg-[#3b82f6]', 'from-[#3b82f6]', 'to-[#3b82f6]', 'hover:bg-[#3b82f6]', 'hover:text-[#3b82f6]',
     ],
     theme: {
         extend: {
             animation: {
                 'float': 'float 3s ease-in-out infinite',
+                'power-up': 'power-up 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards',
             },
             keyframes: {
                 float: {
                     '0%, 100%': { transform: 'translateY(0px)' },
                     '50%': { transform: 'translateY(-10px)' },
+                },
+                'power-up': {
+                    '0%': {
+                        opacity: '0',
+                        transform: 'scale(0.3) translateY(100px)',
+                        filter: 'brightness(2)',
+                    },
+                    '50%': {
+                        opacity: '1',
+                        transform: 'scale(1.2) translateY(-20px)',
+                        filter: 'brightness(1.5)',
+                    },
+                    '75%': {
+                        transform: 'scale(0.9) translateY(10px)',
+                        filter: 'brightness(1.2)',
+                    },
+                    '100%': {
+                        transform: 'scale(1) translateY(0)',
+                        filter: 'brightness(1)',
+                    }
                 }
             },
             colors: {