wip

lib/elixir_blonk/firehose/consumer.ex

···
     end
   end
 
-  defp broadcast_to_gif_scan(full_msg, state) do
+  defp broadcast_to_gif_scan(full_msg, _state) do
     try do
       # Extract post data for GIF scan
       author_did = get_in(full_msg, ["did"])
···
       external_url = extract_external_url(embed)
       created_at = get_in(full_msg, ["commit", "record", "createdAt"])
 
-      # Only include tenor GIFs, sample 1 in 10
-      if external_url && String.contains?(external_url, "media.tenor.com") && 
-         rem(state.link_count, 10) == 0 do
+      # Include all tenor GIFs
+      if external_url && String.contains?(external_url, "media.tenor.com") do
+        Logger.info("Broadcasting tenor GIF: #{external_url}")
+        
         gif_data = %{
           post_uri: post_uri,
           author_did: author_did,

lib/elixir_blonk_web/live/gif_scan_live/index.ex

···
   use ElixirBlonkWeb, :live_view
   require Logger
 
-  # Top 30 most common emojis for the picker
-  @common_emojis [
-    "😀", "😂", "🤣", "😊", "😍", "🥰", "😘", "😎", "🤔", "😢",
-    "😭", "😡", "🤬", "😱", "🤯", "😴", "🤤", "😋", "🤗", "🙄",
-    "👍", "👎", "👏", "🙌", "🤝", "💪", "🔥", "💯", "❤️", "💔"
-  ]
-
   def mount(_params, _session, socket) do
     if connected?(socket) do
       # Subscribe to GIF updates
···
 
     socket =
       socket
-      |> assign(:gifs, [])
-      |> assign(:search_terms, "")
-      |> assign(:selected_emojis, [])
-      |> assign(:common_emojis, @common_emojis)
-      |> assign(:paused, false)
-      |> assign(:pending_gifs, [])
-      |> assign(:has_active_filters, false)
+      |> assign(:grid_slots, %{})  # Map of slot_index -> gif_data
+      |> assign(:available_slots, Enum.to_list(0..23))  # List of empty slot indices
+      |> assign(:gif_queue, [])  # Queue of GIFs waiting to be placed
+      |> assign(:recently_updated_slots, %{})  # Map of slot_index -> timestamp for yellow highlight
 
     {:ok, socket}
   end
 
-  def handle_event("search", %{"search" => %{"terms" => terms}}, socket) do
-    trimmed_terms = String.trim(terms)
-    has_filters = trimmed_terms != "" || socket.assigns.selected_emojis != []
-    
-    socket =
-      socket
-      |> assign(:search_terms, trimmed_terms)
-      |> assign(:has_active_filters, has_filters)
-      |> maybe_clear_results_if_no_filters(has_filters)
-
+  def handle_info({:new_gif_post, gif}, socket) do
+    Logger.info("Received new GIF: #{gif.gif_url}")
+    socket = place_gif_in_grid(socket, gif)
     {:noreply, socket}
   end
 
-  def handle_event("toggle_emoji", %{"emoji" => emoji}, socket) do
-    selected_emojis = socket.assigns.selected_emojis
+  defp place_gif_in_grid(socket, gif) do
+    available_slots = socket.assigns.available_slots
+    grid_slots = socket.assigns.grid_slots
+    recently_updated_slots = socket.assigns.recently_updated_slots
+    current_time = System.system_time(:millisecond)
     
-    new_selected = 
-      if emoji in selected_emojis do
-        List.delete(selected_emojis, emoji)
-      else
-        [emoji | selected_emojis]
-      end
-
-    has_filters = socket.assigns.search_terms != "" || new_selected != []
-
-    socket =
-      socket
-      |> assign(:selected_emojis, new_selected)
-      |> assign(:has_active_filters, has_filters)
-      |> maybe_clear_results_if_no_filters(has_filters)
-
-    {:noreply, socket}
-  end
-
-  def handle_event("toggle_pause", _params, socket) do
-    paused = socket.assigns.paused
+    Logger.info("Available slots: #{length(available_slots)}, Total slots: #{map_size(grid_slots)}")
     
-    socket = 
-      if paused do
-        # Resume - add pending GIFs to the feed
-        gifs = socket.assigns.pending_gifs ++ socket.assigns.gifs
-        socket
-        |> assign(:paused, false)
-        |> assign(:pending_gifs, [])
-        |> assign(:gifs, Enum.take(gifs, 50))  # Limit to 50 GIFs
-      else
-        # Pause
-        assign(socket, :paused, true)
-      end
-
-    {:noreply, socket}
-  end
-
-  def handle_event("load_new", _params, socket) do
-    # Load pending GIFs into the main feed
-    gifs = socket.assigns.pending_gifs ++ socket.assigns.gifs
-    
-    socket =
+    if length(available_slots) > 0 do
+      # If we have empty slots, place the GIF randomly
+      slot_index = Enum.random(available_slots)
+      Logger.info("Placing GIF in empty slot: #{slot_index}")
+      
+      # Place the GIF in that slot and mark as recently updated
+      new_grid_slots = Map.put(grid_slots, slot_index, gif)
+      new_available_slots = List.delete(available_slots, slot_index)
+      new_recently_updated = Map.put(recently_updated_slots, slot_index, current_time)
+      
       socket
-      |> assign(:pending_gifs, [])
-      |> assign(:gifs, Enum.take(gifs, 50))  # Limit to 50 GIFs
-
-    {:noreply, socket}
-  end
-
-  def handle_info({:new_gif_post, gif}, socket) do
-    # Always process GIFs, but filter if we have active filters
-    should_include = 
-      if socket.assigns.has_active_filters do
-        matches_filters?(gif, socket.assigns.search_terms, socket.assigns.selected_emojis)
-      else
-        true  # Show all GIFs when no filters are active
-      end
-
-    if should_include do
-      socket = 
-        if socket.assigns.paused do
-          # Add to pending GIFs when paused
-          pending_gifs = [gif | socket.assigns.pending_gifs]
-          assign(socket, :pending_gifs, Enum.take(pending_gifs, 25))
-        else
-          # Add directly to GIFs when not paused
-          gifs = [gif | socket.assigns.gifs]
-          assign(socket, :gifs, Enum.take(gifs, 50))
-        end
-
-      {:noreply, socket}
+      |> assign(:grid_slots, new_grid_slots)
+      |> assign(:available_slots, new_available_slots)
+      |> assign(:recently_updated_slots, new_recently_updated)
+      |> schedule_highlight_removal(slot_index)
     else
-      {:noreply, socket}
+      # If all slots are filled, replace a random existing GIF
+      slot_index = Enum.random(0..23)
+      Logger.info("Replacing GIF in slot: #{slot_index}")
+      
+      # Replace the GIF in that slot and mark as recently updated
+      new_grid_slots = Map.put(grid_slots, slot_index, gif)
+      new_recently_updated = Map.put(recently_updated_slots, slot_index, current_time)
+      
+      socket
+      |> assign(:grid_slots, new_grid_slots)
+      |> assign(:available_slots, [])  # Keep available_slots empty since all are filled
+      |> assign(:recently_updated_slots, new_recently_updated)
+      |> schedule_highlight_removal(slot_index)
     end
   end
 
-  defp maybe_clear_results_if_no_filters(socket, has_filters) do
-    # Don't clear results when filters are removed - let GIFs keep flowing
+  defp schedule_highlight_removal(socket, slot_index) do
+    # Schedule removal of highlight after 3 seconds
+    Process.send_after(self(), {:remove_highlight, slot_index}, 3000)
     socket
   end
 
-  defp matches_filters?(gif, search_terms, selected_emojis) do
-    text = gif.text || ""
-    
-    # Check search terms
-    search_match = 
-      if search_terms == "" do
-        true
-      else
-        terms = String.split(search_terms, " ") |> Enum.map(&String.trim/1) |> Enum.reject(&(&1 == ""))
-        Enum.any?(terms, fn term ->
-          String.contains?(String.downcase(text), String.downcase(term))
-        end)
-      end
-
-    # Check emojis
-    emoji_match = 
-      if selected_emojis == [] do
-        true
-      else
-        Enum.any?(selected_emojis, fn emoji ->
-          String.contains?(text, emoji)
-        end)
-      end
-
-    search_match and emoji_match
+  def handle_info({:remove_highlight, slot_index}, socket) do
+    new_recently_updated = Map.delete(socket.assigns.recently_updated_slots, slot_index)
+    socket = assign(socket, :recently_updated_slots, new_recently_updated)
+    {:noreply, socket}
   end
 
   defp format_time(datetime) do

lib/elixir_blonk_web/live/gif_scan_live/index.html.heex

···
-<div class="w-full min-h-screen bg-gray-50">
-  <!-- Controls Section - Fixed width for usability -->
-  <div class="max-w-4xl mx-auto p-6 bg-white border-b shadow-sm">
-  <div class="mb-6">
-    <h1 class="text-3xl font-bold mb-4">GIF Scan</h1>
-    <p class="text-gray-600 mb-6">
-      Search real-time GIFs from Bluesky. Enter a search term or select emojis to start scanning.
-    </p>
-    
-    <!-- Search Controls -->
-    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
-      <div class="space-y-4">
-        <!-- Word Search -->
-        <div>
-          <label class="block text-sm font-medium text-gray-700 mb-2">
-            Search Words
-          </label>
-          <.form for={%{}} phx-submit="search">
-            <div class="flex gap-2">
-              <input 
-                type="text" 
-                name="search[terms]" 
-                value={@search_terms}
-                placeholder="Enter words to search for in GIF posts..."
-                class="flex-1 border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"
-              />
-              <button 
-                type="submit"
-                class="px-4 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500"
-              >
-                Search
-              </button>
-            </div>
-          </.form>
-        </div>
+<div class="w-full h-screen bg-gradient-to-br from-gray-900 via-black to-gray-900 overflow-hidden relative">
+  <!-- Ambient Background Effects -->
+  <div class="absolute inset-0 opacity-20">
+    <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-purple-500 rounded-full blur-3xl animate-pulse"></div>
+    <div class="absolute bottom-1/4 right-1/4 w-48 h-48 bg-blue-500 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
+    <div class="absolute top-3/4 left-1/2 w-32 h-32 bg-pink-500 rounded-full blur-3xl animate-pulse" style="animation-delay: 4s;"></div>
+  </div>
 
-        <!-- Emoji Picker -->
-        <div>
-          <label class="block text-sm font-medium text-gray-700 mb-2">
-            Search Emojis (click to toggle)
-          </label>
-          <div class="flex flex-wrap gap-2">
-            <%= for emoji <- @common_emojis do %>
-              <button
-                phx-click="toggle_emoji"
-                phx-value-emoji={emoji}
-                class={[
-                  "text-2xl p-2 rounded-md border-2 transition-colors",
-                  if(emoji in @selected_emojis, 
-                    do: "border-purple-500 bg-purple-50", 
-                    else: "border-gray-200 hover:border-gray-300"
-                  )
-                ]}
-              >
-                <%= emoji %>
-              </button>
-            <% end %>
-          </div>
-          <%= if @selected_emojis != [] do %>
-            <div class="mt-2 text-sm text-gray-600">
-              Selected: <%= Enum.join(@selected_emojis, " ") %>
-            </div>
-          <% end %>
+  <!-- Top Status Bar -->
+  <div class="absolute top-0 left-0 right-0 z-10 bg-black bg-opacity-50 backdrop-blur-sm border-b border-gray-700">
+    <div class="flex items-center justify-between px-6 py-3">
+      <div class="flex items-center gap-4">
+        <div class="flex items-center gap-2">
+          <div class="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
+          <span class="text-green-400 text-sm font-mono">LIVE</span>
         </div>
-
-        <!-- Controls -->
-        <%= if @has_active_filters do %>
-          <div class="flex gap-4 items-center pt-4 border-t">
-            <button
-              phx-click="toggle_pause"
-              class={[
-                "px-4 py-2 rounded-md focus:outline-none focus:ring-2",
-                if(@paused, 
-                  do: "bg-green-500 text-white hover:bg-green-600 focus:ring-green-500", 
-                  else: "bg-red-500 text-white hover:bg-red-600 focus:ring-red-500"
-                )
-              ]}
-            >
-              <%= if @paused, do: "Resume Scan", else: "Pause Scan" %>
-            </button>
-
-            <%= if @paused and length(@pending_gifs) > 0 do %>
-              <button
-                phx-click="load_new"
-                class="px-4 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500"
-              >
-                Load <%= length(@pending_gifs) %> New GIFs
-              </button>
-            <% end %>
-
-            <div class="text-sm text-gray-500">
-              Showing <%= length(@gifs) %> GIFs
-              <%= if @pending_gifs != [] do %>
-                (<%= length(@pending_gifs) %> pending)
-              <% end %>
-            </div>
-          </div>
-        <% end %>
+        <span class="text-gray-400 text-sm">GIF Wall</span>
+      </div>
+      <div class="text-gray-400 text-sm font-mono">
+        <%= map_size(@grid_slots) %>/24 ACTIVE
       </div>
     </div>
-
-    <!-- Active Filters -->
-    <%= if @search_terms != "" or @selected_emojis != [] do %>
-      <div class="bg-purple-50 rounded-lg p-4 mb-6">
-        <h3 class="font-medium text-purple-900 mb-2">Active Filters:</h3>
-        <div class="space-y-1 text-sm">
-          <%= if @search_terms != "" do %>
-            <div class="text-purple-800">Words: <span class="font-mono"><%= @search_terms %></span></div>
-          <% end %>
-          <%= if @selected_emojis != [] do %>
-            <div class="text-purple-800">Emojis: <%= Enum.join(@selected_emojis, " ") %></div>
-          <% end %>
-        </div>
-      </div>
-    <% end %>
-  </div>
   </div>
 
-  <!-- GIFs Feed - Full Width Tiled Layout -->
-  <div class="w-full">
-    <%= if @gifs == [] and not @has_active_filters do %>
-      <div class="text-center py-16 text-gray-500 bg-white">
-        <div class="text-6xl mb-4">🎭</div>
-        <h3 class="text-xl font-medium mb-2">GIF Scanner Active</h3>
-        <p>Sampling 1 in 10 GIFs from Bluesky. Add filters above to narrow down results.</p>
-      </div>
-    <% else %>
-      <%= if @gifs == [] do %>
-        <div class="text-center py-16 text-gray-500 bg-white">
-          <div class="text-6xl mb-4">🔍</div>
-          <h3 class="text-xl font-medium mb-2">Scanning for GIFs...</h3>
-          <p>Looking for GIFs that match your filters. Results will appear here as they're found.</p>
-        </div>
-      <% else %>
-        <!-- Masonry/Tile Grid Layout -->
-        <div class="columns-2 md:columns-3 lg:columns-4 xl:columns-5 2xl:columns-6 gap-0">
-          <%= for gif <- @gifs do %>
-            <div class="break-inside-avoid relative group">
-              <%= if gif.gif_url do %>
+  <!-- 6x4 Grid Layout -->
+  <div class="grid grid-cols-6 grid-rows-4 h-full gap-2 p-6 pt-20">
+    <%= for slot <- 0..23 do %>
+      <div class={[
+        "relative bg-gray-900 rounded-lg overflow-hidden group shadow-2xl transition-all duration-300",
+        if(Map.has_key?(@recently_updated_slots, slot),
+          do: "border-2 border-yellow-400 shadow-yellow-400/50 shadow-2xl",
+          else: "border border-gray-800 hover:border-gray-600"
+        )
+      ]}>
+        <%= if Map.has_key?(@grid_slots, slot) do %>
+          <%= case Map.get(@grid_slots, slot) do %>
+            <% %{gif_url: gif_url, text: text} when gif_url != nil -> %>
+              <!-- Active GIF Slot -->
+              <div class="relative w-full h-full">
                 <img 
-                  src={gif.gif_url} 
+                  src={gif_url} 
                   alt="GIF"
-                  class="w-full h-auto block"
+                  class="w-full h-full object-cover transition-all duration-700 group-hover:scale-105"
                   loading="lazy"
                 />
-                <%= if gif.text && String.trim(gif.text) != "" do %>
-                  <div class="absolute inset-x-0 bottom-0 bg-black bg-opacity-75 text-white p-2 text-sm opacity-0 group-hover:opacity-100 transition-opacity">
-                    <%= gif.text %>
+                <!-- TV Scanlines Effect -->
+                <div class="absolute inset-0 bg-gradient-to-b from-transparent via-black to-transparent opacity-10 pointer-events-none" 
+                     style="background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px);"></div>
+                
+                <!-- Corner Indicators -->
+                <div class="absolute top-2 right-2 w-2 h-2 bg-green-400 rounded-full opacity-75"></div>
+                
+                <!-- Text Overlay -->
+                <%= if text && String.trim(text) != "" do %>
+                  <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black via-black to-transparent text-white p-3 text-xs opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
+                    <%= text %>
                   </div>
                 <% end %>
-              <% end %>
-            </div>
+              </div>
+            <% _ -> %>
+              <!-- Empty/Loading Slot -->
+              <div class="w-full h-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center">
+                <div class="relative">
+                  <div class="w-4 h-4 bg-gray-600 rounded-full animate-ping"></div>
+                  <div class="absolute inset-0 w-4 h-4 bg-gray-500 rounded-full animate-pulse"></div>
+                </div>
+              </div>
           <% end %>
-        </div>
-      <% end %>
+        <% else %>
+          <!-- Empty/Loading Slot -->
+          <div class="w-full h-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center">
+            <div class="relative">
+              <div class="w-4 h-4 bg-gray-600 rounded-full animate-ping"></div>
+              <div class="absolute inset-0 w-4 h-4 bg-gray-500 rounded-full animate-pulse"></div>
+            </div>
+          </div>
+        <% end %>
+      </div>
     <% end %>
+  </div>
+
+  <!-- Bottom Info Bar -->
+  <div class="absolute bottom-0 left-0 right-0 z-10 bg-black bg-opacity-50 backdrop-blur-sm border-t border-gray-700">
+    <div class="flex items-center justify-center px-6 py-2">
+      <span class="text-gray-400 text-xs font-mono">
+        BLUESKY FIREHOSE • REAL-TIME GIF STREAM • MEDIA.TENOR.COM
+      </span>
+    </div>
   </div>
 </div>

priv/static/assets/app.css

···
   border-width: 0;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .static {
   position: static;
 }
···
   bottom: 0px;
 }
 
+.bottom-1\/4 {
+  bottom: 25%;
+}
+
 .left-0 {
   left: 0px;
+}
+
+.left-1\/2 {
+  left: 50%;
+}
+
+.left-1\/4 {
+  left: 25%;
 }
 
 .left-\[40rem\] {
···
   right: 0.25rem;
 }
 
+.right-1\/4 {
+  right: 25%;
+}
+
 .right-2 {
   right: 0.5rem;
 }
 
 .right-5 {
   right: 1.25rem;
+}
+
+.top-0 {
+  top: 0px;
 }
 
 .top-1 {
   top: 0.25rem;
 }
 
+.top-1\/4 {
+  top: 25%;
+}
+
 .top-2 {
   top: 0.5rem;
 }
 
 .top-20 {
   top: 5rem;
+}
+
+.top-3\/4 {
+  top: 75%;
 }
 
 .top-6 {
···
   height: 0.75rem;
 }
 
+.h-32 {
+  height: 8rem;
+}
+
 .h-4 {
   height: 1rem;
 }
 
+.h-48 {
+  height: 12rem;
+}
+
 .h-5 {
   height: 1.25rem;
 }
···
   height: 1.5rem;
 }
 
-.h-auto {
-  height: auto;
+.h-64 {
+  height: 16rem;
 }
 
 .h-full {
   height: 100%;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
 .min-h-\[200px\] {
   min-height: 200px;
 }
···
 
 .min-h-full {
   min-height: 100%;
-}
-
-.min-h-screen {
-  min-height: 100vh;
 }
 
 .w-1\/4 {
···
 
 .w-14 {
   width: 3.5rem;
+}
+
+.w-2 {
+  width: 0.5rem;
 }
 
 .w-3 {
···
   width: 1rem;
 }
 
+.w-48 {
+  width: 12rem;
+}
+
 .w-5 {
   width: 1.25rem;
 }
 
 .w-6 {
   width: 1.5rem;
+}
+
+.w-64 {
+  width: 16rem;
 }
 
 .w-8 {
···
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-y-2 {
+  --tw-translate-y: 0.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-y-4 {
   --tw-translate-y: 1rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
···
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+.animate-ping {
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
···
   resize: none;
 }
 
-.columns-2 {
-  -moz-columns: 2;
-       columns: 2;
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
-.break-inside-avoid {
-  -moz-column-break-inside: avoid;
-       break-inside: avoid;
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
 }
 
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+.grid-rows-4 {
+  grid-template-rows: repeat(4, minmax(0, 1fr));
 }
 
 .flex-col {
···
   justify-content: space-between;
 }
 
-.gap-0 {
-  gap: 0px;
-}
-
 .gap-1 {
   gap: 0.25rem;
 }
···
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-gray-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+}
+
+.border-gray-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(31 41 55 / var(--tw-border-opacity));
+}
+
 .border-green-400 {
   --tw-border-opacity: 1;
   border-color: rgb(74 222 128 / var(--tw-border-opacity));
···
 .border-pink-400 {
   --tw-border-opacity: 1;
   border-color: rgb(244 114 182 / var(--tw-border-opacity));
-}
-
-.border-purple-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(168 85 247 / var(--tw-border-opacity));
 }
 
 .border-red-200 {
···
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
 .bg-gray-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+.bg-green-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
+}
+
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
-.bg-purple-50 {
+.bg-pink-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(250 245 255 / var(--tw-bg-opacity));
+  background-color: rgb(236 72 153 / var(--tw-bg-opacity));
 }
 
 .bg-purple-500 {
···
   --tw-bg-opacity: 0.5;
 }
 
-.bg-opacity-75 {
-  --tw-bg-opacity: 0.75;
+.bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-br {
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+
+.from-black {
+  --tw-gradient-from: #000 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-gray-800 {
+  --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-gray-900 {
+  --tw-gradient-from: #111827 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-transparent {
+  --tw-gradient-from: transparent var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.via-black {
+  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #000 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.to-gray-900 {
+  --tw-gradient-to: #111827 var(--tw-gradient-to-position);
+}
+
+.to-transparent {
+  --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
 
 .fill-cyan-900 {
···
 
 .fill-zinc-400 {
   fill: #a1a1aa;
+}
+
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 .p-0 {
···
   padding-right: 1.5rem;
 }
 
+.pt-20 {
+  padding-top: 5rem;
+}
+
 .pt-4 {
   padding-top: 1rem;
 }
···
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.text-purple-800 {
+.text-green-400 {
   --tw-text-opacity: 1;
-  color: rgb(107 33 168 / var(--tw-text-opacity));
-}
-
-.text-purple-900 {
-  --tw-text-opacity: 1;
-  color: rgb(88 28 135 / var(--tw-text-opacity));
+  color: rgb(74 222 128 / var(--tw-text-opacity));
 }
 
 .text-red-700 {
···
   opacity: 0;
 }
 
+.opacity-10 {
+  opacity: 0.1;
+}
+
 .opacity-100 {
   opacity: 1;
 }
···
   opacity: 0.4;
 }
 
+.opacity-75 {
+  opacity: 0.75;
+}
+
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
···
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.shadow-yellow-400\/50 {
+  --tw-shadow-color: rgb(250 204 21 / 0.5);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .outline {
   outline-style: solid;
 }
···
   --tw-ring-color: rgb(63 63 70 / 0.1);
 }
 
-.filter {
+.blur-3xl {
+  --tw-blur: blur(64px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.backdrop-blur-sm {
+  --tw-backdrop-blur: blur(4px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
···
   transition-duration: 300ms;
 }
 
+.duration-700 {
+  transition-duration: 700ms;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
···
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.hover\:border-gray-600:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
 .hover\:bg-blue-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
···
 .hover\:bg-green-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-purple-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-red-600:hover {
···
   --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-purple-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));
-}
-
 .focus\:ring-red-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
···
 
 .active\:text-white\/80:active {
   color: rgb(255 255 255 / 0.8);
+}
+
+.group:hover .group-hover\:translate-y-0 {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:hover .group-hover\:scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .group:hover .group-hover\:bg-zinc-100 {
···
     width: 75%;
   }
 
-  .md\:columns-3 {
-    -moz-columns: 3;
-         columns: 3;
-  }
-
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
···
     width: 50%;
   }
 
-  .lg\:columns-4 {
-    -moz-columns: 4;
-         columns: 4;
-  }
-
   .lg\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
···
     left: 50rem;
   }
 
-  .xl\:columns-5 {
-    -moz-columns: 5;
-         columns: 5;
-  }
-
   .xl\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
···
     padding-bottom: 8rem;
   }
 }
-
-@media (min-width: 1536px) {
-  .\32xl\:columns-6 {
-    -moz-columns: 6;
-         columns: 6;
-  }
-}