Redesign landing page

assets/css/app.css

@@ -1,2 +1,44 @@
 @import "tailwindcss";
 /* This file is for your main application CSS */
+
+@theme {
+    --color-gold-100: #fff8e1;
+    --color-gold-200: #ffecb3;
+    --color-gold-300: #ffe082;
+    --color-gold-400: #ffd54f;
+    --color-gold-500: #ffca28;
+    --color-gold-600: #ffc107;
+    --color-gold-700: #ffb300;
+    --color-gold-800: #ffa000;
+    --color-gold-900: #ff8f00;
+
+    --color-silver-100: #f4f4f5;
+    --color-silver-200: #e4e4e7;
+    --color-silver-300: #d4d4d8;
+    --color-silver-400: #a1a1aa;
+    --color-silver-500: #9ca3af;
+    --color-silver-600: #71717a;
+    --color-silver-700: #52525b;
+    --color-silver-800: #3f3f46;
+    --color-silver-900: #27272a;
+
+    --color-bronze-100: #fef1e8;
+    --color-bronze-200: #f9dbc5;
+    --color-bronze-300: #f4c4a2;
+    --color-bronze-400: #efae80;
+    --color-bronze-500: #cd7f32;
+    --color-bronze-600: #b87333;
+    --color-bronze-700: #a65e2e;
+    --color-bronze-800: #8c4c25;
+    --color-bronze-900: #703b1c;
+
+    --color-broken-100: #fee2e2;
+    --color-broken-200: #fecaca;
+    --color-broken-300: #fca5a5;
+    --color-broken-400: #f87171;
+    --color-broken-500: #ef4444;
+    --color-broken-600: #dc2626;
+    --color-broken-700: #b91c1c;
+    --color-broken-800: #991b1b;
+    --color-broken-900: #7f1d1d;
+}

lib/plexus/apps.ex

@@ -165,6 +165,18 @@ defmodule Plexus.Apps do
     end)
   end
 
+  @spec apps_available_count :: pos_integer()
+  def apps_available_count do
+    Repo.aggregate(App, :count)
+  end
+
+  @spec apps_count_since(DateTime.t()) :: pos_integer()
+  def apps_count_since(datetime) do
+    App
+    |> where([app], app.inserted_at >= ^datetime)
+    |> Repo.aggregate(:count)
+  end
+
   @spec subscribe :: :ok
   def subscribe do
     Phoenix.PubSub.subscribe(Plexus.PubSub, "apps")

lib/plexus/ratings.ex

@@ -74,6 +74,74 @@ defmodule Plexus.Ratings do
     |> broadcast(:rating_deleted)
   end
 
+  @spec ratings_submitted_count :: pos_integer()
+  def ratings_submitted_count do
+    Repo.aggregate(Rating, :count)
+  end
+
+  @spec ratings_count_since(DateTime.t()) :: pos_integer()
+  def ratings_count_since(datetime) do
+    Rating
+    |> where([rating], rating.inserted_at >= ^datetime)
+    |> Repo.aggregate(:count)
+  end
+
+  def gold_de_googled_count do
+    Rating
+    |> where([rating], rating.score >= 4)
+    |> where([rating], rating.rating_type == :native)
+    |> Repo.aggregate(:count)
+  end
+
+  def gold_micro_g_count do
+    Rating
+    |> where([rating], rating.score >= 4)
+    |> where([rating], rating.rating_type == :micro_g)
+    |> Repo.aggregate(:count)
+  end
+
+  def silver_de_googled_count do
+    Rating
+    |> where([rating], rating.score >= 3 and rating.score < 4)
+    |> where([rating], rating.rating_type == :native)
+    |> Repo.aggregate(:count)
+  end
+
+  def silver_micro_g_count do
+    Rating
+    |> where([rating], rating.score >= 3 and rating.score < 4)
+    |> where([rating], rating.rating_type == :micro_g)
+    |> Repo.aggregate(:count)
+  end
+
+  def bronze_de_googled_count do
+    Rating
+    |> where([rating], rating.score >= 2 and rating.score < 3)
+    |> where([rating], rating.rating_type == :native)
+    |> Repo.aggregate(:count)
+  end
+
+  def bronze_micro_g_count do
+    Rating
+    |> where([rating], rating.score >= 2 and rating.score < 3)
+    |> where([rating], rating.rating_type == :micro_g)
+    |> Repo.aggregate(:count)
+  end
+
+  def broken_de_googled_count do
+    Rating
+    |> where([rating], rating.score < 2)
+    |> where([rating], rating.rating_type == :native)
+    |> Repo.aggregate(:count)
+  end
+
+  def broken_micro_g_count do
+    Rating
+    |> where([rating], rating.score < 2)
+    |> where([rating], rating.rating_type == :micro_g)
+    |> Repo.aggregate(:count)
+  end
+
   defp broadcast({:error, _reason} = error, _event), do: error
 
   defp broadcast({:ok, rating}, event) do

lib/plexus_web/components/core_components.ex

@@ -15,6 +15,12 @@ defmodule PlexusWeb.CoreComponents do
   Icons are provided by [heroicons](https://heroicons.com). See `icon/1` for usage.
   """
   use Phoenix.Component
+
+  use Phoenix.VerifiedRoutes,
+    endpoint: PlexusWeb.Endpoint,
+    router: PlexusWeb.Router,
+    statics: PlexusWeb.static_paths()
+
   use Gettext, backend: PlexusWeb.Gettext
 
   alias Phoenix.LiveView.JS
@@ -642,15 +648,16 @@ defmodule PlexusWeb.CoreComponents do
       )
 
     ~H"""
-    <div class="flex">
-      <div class="aspect-h-1 aspect-w-1 w-24 h-24 bg-white overflow-hidden">
+    <div class="flex bg-gray-100">
+      <div class="aspect-h-1 aspect-w-1 w-24 h-24 overflow-hidden">
         <img
           src={icon_url(@app)}
           alt={@app.name <> " Icon"}
+          loading="lazy"
           class="h-full w-full object-cover object-center"
         />
       </div>
-      <div class="flex-1 flex items-center justify-between bg-white truncate">
+      <div class="flex-1 flex items-center justify-between truncate">
         <div class="flex-1 px-4 py-2 text-md leading-5 truncate">
           <div class="truncate text-gray-900 font-semibold transition ease-in-out duration-150">
             {@app.name}
@@ -663,32 +670,32 @@ defmodule PlexusWeb.CoreComponents do
           </p>
         </div>
       </div>
-      <div class="flex flex-col justify-between bg-white">
+      <div class="flex flex-col justify-between bg-gray-900">
         <div
           title="DeGoogled Score"
           class={[
             "flex flex-1 items-center justify-center w-24 text-white text-sm leading-5 font-medium",
-            @native_level == :unrated && "bg-gray-700",
-            @native_level == :borked && "bg-red-800",
-            @native_level == :bronze && "bg-amber-800",
-            @native_level == :silver && "bg-slate-300 text-black",
-            @native_level == :gold && "bg-amber-200 black"
+            @native_level == :unrated && "bg-linear-45 from-indigo-500 to-indigo-900",
+            @native_level == :borked && "bg-linear-45 from-broken-500 to-broken-900",
+            @native_level == :bronze && "bg-linear-45 from-bronze-400 to-bronze-800",
+            @native_level == :silver && "bg-linear-45 from-silver-300 to-silver-700",
+            @native_level == :gold && "bg-linear-45 from-gold-500 to-gold-900"
           ]}
         >
-          {@app.scores.native.numerator}
+          <img src={~p"/images/de_googled.svg"} width="24" />
         </div>
         <div
           title="MicroG Score"
           class={[
             "flex flex-1 items-center justify-center w-24 text-white text-sm leading-5 font-medium",
-            @micro_g_level == :unrated && "bg-gray-700",
-            @micro_g_level == :borked && "bg-red-800",
-            @micro_g_level == :bronze && "bg-amber-800",
-            @micro_g_level == :silver && "bg-slate-300 text-black",
-            @micro_g_level == :gold && "bg-amber-200 text-black"
+            @micro_g_level == :unrated && "bg-linear-45 from-indigo-500 to-indigo-900",
+            @micro_g_level == :borked && "bg-linear-45 from-broken-500 to-broken-900",
+            @micro_g_level == :bronze && "bg-linear-45 from-bronze-400 to-bronze-800",
+            @micro_g_level == :silver && "bg-linear-45 from-silver-300 to-silver-700",
+            @micro_g_level == :gold && "bg-linear-45 from-gold-500 to-gold-900"
           ]}
         >
-          &mu;{@app.scores.micro_g.numerator}
+          <img src={~p"/images/micro_g.svg"} width="24" />
         </div>
       </div>
     </div>

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

@@ -1,29 +1,80 @@
-<header class="bg-white px-4 sm:px-6 lg:px-8">
-  <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
+<header class="bg-white py-2 px-4 sm:px-6 lg:px-8">
+  <div class="flex items-center justify-between py-4 text-sm">
     <div class="flex items-center gap-4">
       <a href="/" class="flex items-center">
-        <img src={~p"/images/logo.svg"} class="bg-zinc-900 p-2" width="48" />
-        <p class="text-zink-900 px-2 font-semibold leading-10 text-xl">
+        <img src={~p"/images/logo.svg"} class="bg-gray-900 p-2" width="48" />
+        <p class="text-gray-900 px-2 font-semibold leading-10 text-xl">
           Plexus
         </p>
       </a>
     </div>
-    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
-      <a href="https://github.com/techlore/plexus" class="hover:text-zinc-700">
+    <div class="flex items-center gap-4 font-semibold leading-6 text-gray-900">
+      <a href="https://github.com/techlore/plexus" class="hover:text-gray-700">
         GitHub
       </a>
       <a
         href="https://github.com/techlore/Plexus-app?tab=readme-ov-file#download"
-        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
+        class="text-gray-100 bg-gray-900 rounded-md p-2 hover:bg-gray-900/90"
       >
-        Download App
+        Download
       </a>
     </div>
   </div>
 </header>
-<main class="bg-slate-100 px-4 py-20 sm:px-6 lg:px-8">
+<main class="bg-white px-4 py-20 sm:px-6 lg:px-8">
   <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
     <.flash_group flash={@flash} />
     {@inner_content}
   </div>
 </main>
+<footer class="bg-gray-900">
+  <div class="mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8">
+    <nav
+      class="-mb-6 flex flex-wrap justify-center gap-x-12 gap-y-3 text-sm/6"
+      aria-label="Footer"
+    >
+      <a href={~p"/apps"} class="text-gray-400 hover:text-white">Apps</a>
+      <a
+        href="https://github.com/techlore/Plexus-app?tab=readme-ov-file#download"
+        class="text-gray-400 hover:text-white"
+      >
+        Download
+      </a>
+      <a href="https://plexus.techlore.tech/swaggerui" class="text-gray-400 hover:text-white">
+        API
+      </a>
+      <a href="https://techlore.tech/" class="text-gray-400 hover:text-white">Techlore</a>
+    </nav>
+    <div class="mt-16 flex justify-center gap-x-10">
+      <a href="https://twitter.com/TechloreInc" class="text-gray-400 hover:text-gray-300">
+        <span class="sr-only">X</span>
+        <svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
+        </svg>
+      </a>
+      <a href="https://github.com/techlore/plexus" class="text-gray-400 hover:text-gray-300">
+        <span class="sr-only">GitHub</span>
+        <svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path
+            fill-rule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </a>
+      <a href="https://www.youtube.com/@techlore" class="text-gray-400 hover:text-gray-300">
+        <span class="sr-only">YouTube</span>
+        <svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path
+            fill-rule="evenodd"
+            d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </a>
+    </div>
+    <p class="mt-10 text-center text-sm/6 text-gray-400">
+      {Date.utc_today().year} &copy; Techlore
+    </p>
+  </div>
+</footer>

lib/plexus_web/components/layouts/root.html.heex

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
-    <.live_title suffix=" · Plexus">
+    <.live_title suffix=" | Plexus">
       {assigns[:page_title] || "Plexus"}
     </.live_title>
 
@@ -43,7 +43,7 @@
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
-  <body class="bg-slate-100 antialiased">
+  <body class="bg-white antialiased">
     {@inner_content}
   </body>
 </html>

lib/plexus_web/controllers/sitemap_controller.ex

@@ -57,7 +57,7 @@ defmodule PlexusWeb.SitemapController do
   defp change_freq("/swaggerui"), do: "yearly"
   defp change_freq(_), do: "weekly"
 
-  defp last_mod("/") do
+  defp last_mod(path) when path in ["/", "/apps"] do
     Plexus.Apps.fetch_most_recently_added_app!()
     |> Map.fetch!(:inserted_at)
     |> DateTime.to_date()

lib/plexus_web/live/app_live/index.ex

@@ -73,7 +73,7 @@ defmodule PlexusWeb.AppLive.Index do
         term -> %{q: term}
       end
 
-    {:noreply, push_patch(socket, to: ~p"/?#{params}")}
+    {:noreply, push_patch(socket, to: ~p"/apps?#{params}")}
   end
 
   def handle_event("next-page", _, socket) do