Make things *pop*

lib/wish_web/components/core_components.ex

@@ -232,7 +232,8 @@ defmodule WishWeb.CoreComponents do
       class={[
         "phx-submit-loading:opacity-75 bg-purple-200 hover:bg-purple-300 py-2 px-3",
         "text-sm font-semibold leading-6 text-zinc-800 active:bg-purple-400 active:text-zinc-800/80",
-        "border-2 border-black hover:shadow-sharp transition-shadow",
+        "border-2 border-black",
+        "hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5 transition",
         @class
       ]}
       {@rest}

lib/wish_web/components/layouts/app.html.heex

@@ -1,10 +1,7 @@
 <header class="px-4 sm:px-6 lg:px-8">
   <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
     <div class="flex items-center gap-4">
-      <a
-        class="font-display text-6xl font-black text-violet-600 drop-shadow-[e_0_15px_violet]"
-        href="/"
-      >
+      <a class="font-display text-6xl font-black text-violet-600" href="/">
         <img src="/images/logo.svg" />
       </a>
     </div>

lib/wish_web/live/home_live/index.html.heex

@@ -15,7 +15,9 @@
     <div
       :for={item <- @items}
       phx-click={JS.navigate(~p"/details/#{item}")}
-      class="p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black hover:shadow-sharp transition cursor-pointer"
+      class="p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black
+            hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5 transition
+            cursor-pointer"
     >
       <div class="aspect-square relative flex flex-col justify-center bg-white border border-black">
         <img
@@ -50,7 +52,9 @@
   <div class="flex flex-col mt-4 space-y-4">
     <div
       :for={item <- @items}
-      class="grid grid-cols-6 grid-rows-4 gap-3 h-56 p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black hover:shadow-sharp transition cursor-pointer"
+      class="grid grid-cols-6 grid-rows-4 gap-3 h-56 p-3 bg-purple-200 hover:bg-purple-300 active:bg-purple-400 border-2 border-black
+            hover:shadow-sharp hover:-translate-x-0.5 hover:-translate-y-0.5 transition
+            cursor-pointer"
       phx-click={JS.navigate(~p"/details/#{item}")}
     >
       <div class="relative col-span-2 flex flex-col justify-center max-h-full h-full row-span-4 bg-white border border-black">