in midst of updating matches section

Author: zcesur

lib/algora_web/live/org/dashboard_live.ex

@@ -364,6 +364,23 @@ defmodule AlgoraWeb.Org.DashboardLive do
           subtitle="Top 1% Algora developers in your tech stack available to hire now"
         >
           <div class="relative w-full flex flex-col gap-4">
+            <div class="lg:pb-2 lg:pt-4 flex flex-col lg:flex-row gap-4 lg:gap-8">
+              <h3 class="text-xl font-semibold whitespace-nowrap">How it works</h3>
+              <ul class="lg:mx-auto grid grid-cols-1 lg:grid-cols-3 gap-4 text-sm font-medium">
+                <li class="flex items-start">
+                  <.icon name="tabler-circle-number-1 mr-2" class="size-6 text-success-400 shrink-0" />
+                  Authorize payment to offer contract
+                </li>
+                <li class="flex items-start">
+                  <.icon name="tabler-circle-number-2 mr-2" class="size-6 text-success-400 shrink-0" />
+                  Escrowed when developer accepts
+                </li>
+                <li class="flex items-start">
+                  <.icon name="tabler-circle-number-3 mr-2" class="size-6 text-success-400 shrink-0" />
+                  Release or withhold escrow end of week
+                </li>
+              </ul>
+            </div>
             <%= for match <- @matches do %>
               <.match_card
                 match={match}
@@ -1290,8 +1307,8 @@ defmodule AlgoraWeb.Org.DashboardLive do
 
   defp match_card(assigns) do
     ~H"""
-    <div class="relative flex flex-col xl:flex-row xl:items-center xl:justify-between gap-4 sm:gap-8 xl:gap-4 2xl:gap-8 border bg-card rounded-xl text-card-foreground shadow p-6">
-      <div class="xl:basis-[45%] w-full truncate">
+    <div class="relative flex flex-col xl:flex-row xl:items-center xl:justify-between gap-4 sm:gap-8 xl:gap-4 2xl:gap-6 border bg-card rounded-xl text-card-foreground shadow p-6">
+      <div class="xl:basis-[51%] w-full truncate">
         <div class="flex items-center justify-between gap-4">
           <div class="flex items-center gap-4">
             <.link navigate={User.url(@match.user)}>
@@ -1356,45 +1373,10 @@ defmodule AlgoraWeb.Org.DashboardLive do
               </div> --%>
             </div>
           </div>
-          <.button
-            phx-click="share_opportunity"
-            phx-value-user_id={@match.user.id}
-            phx-value-type="contract"
-            phx-value-marketplace="true"
-            variant="none"
-            class="group bg-emerald-900/10 text-emerald-300 transition-colors duration-75 hover:bg-emerald-800/10 hover:text-emerald-300 hover:drop-shadow-[0_1px_5px_#34d39980] focus:bg-emerald-800/10 focus:text-emerald-300 focus:outline-none focus:drop-shadow-[0_1px_5px_#34d39980] border border-emerald-400/40 hover:border-emerald-400/50 focus:border-emerald-400/50"
-          >
-            <.icon name="tabler-contract" class="size-4 text-current mr-2 -ml-1" /> Contract
-          </.button>
         </div>
-        <dl :if={@match[:hourly_rate]} class="pt-4">
-          <div class="flex justify-between">
-            <dt class="text-foreground">
-              Total payment for <span class="font-semibold">{@match.user.hours_per_week || 30}</span>
-              hours
-              <span class="text-xs text-muted-foreground">
-                ({@match.user.name}'s availability)
-              </span>
-              <div class="text-xs text-muted-foreground">
-                (includes all platform and payment processing fees)
-              </div>
-            </dt>
-            <dd class="font-display font-semibold tabular-nums text-lg text-emerald-400">
-              {Money.to_string!(
-                Money.mult!(
-                  @match[:hourly_rate] |> Money.mult!(@match.user.hours_per_week || 30),
-                  Decimal.new("1.13")
-                )
-              )}
-            </dd>
-          </div>
-        </dl>
-      </div>
-
-      <div class="pt-2 xl:pt-0 xl:pl-4 2xl:pl-8 xl:basis-[55%] xl:border-l xl:border-border">
-        <div class="text-sm sm:text-base text-foreground font-medium">
+        <div class="pt-4 text-sm sm:text-base text-muted-foreground font-medium">
           Completed
-          <span class="font-semibold font-display text-emerald-400">
+          <span class="font-semibold font-display text-foreground/80">
             {@match.user.transactions_count}
             {ngettext(
               "bounty",
@@ -1403,7 +1385,7 @@ defmodule AlgoraWeb.Org.DashboardLive do
             )}
           </span>
           across
-          <span class="font-semibold font-display text-emerald-400">
+          <span class="font-semibold font-display text-foreground/80">
             {ngettext(
               "%{count} project",
               "%{count} projects",
@@ -1424,7 +1406,7 @@ defmodule AlgoraWeb.Org.DashboardLive do
                 </.avatar_fallback>
               </.avatar>
               <div class="flex flex-col">
-                <div class="text-base font-medium text-muted-foreground">
+                <div class="text-base font-medium text-foreground/80">
                   {project.name}
                 </div>
 
@@ -1435,7 +1417,7 @@ defmodule AlgoraWeb.Org.DashboardLive do
                     )}
                   </div>
                   <div class="text-sm text-muted-foreground">
-                    <span class="text-foreground font-display font-semibold">
+                    <span class="text-foreground/80 font-display font-semibold">
                       {total_earned}
                     </span>
                     awarded
@@ -1446,6 +1428,44 @@ defmodule AlgoraWeb.Org.DashboardLive do
           <% end %>
         </div>
       </div>
+
+      <div class="pt-2 xl:pt-0 xl:pl-4 2xl:pl-6 xl:basis-[49%] w-full xl:border-l xl:border-border">
+        <dl :if={@match[:hourly_rate]} class="pt-4">
+          <div class="flex flex-col-reverse 3xl:flex-row justify-between items-center gap-2">
+            <dt class="text-foreground text-center">
+              Total payment for <span class="font-semibold">{@match.user.hours_per_week || 30}</span>
+              hours
+              <div class="text-[12px] text-muted-foreground">
+                (includes all platform and payment processing fees)
+              </div>
+            </dt>
+            <div class="flex flex-col items-center gap-2">
+              <.button
+                phx-click="share_opportunity"
+                phx-value-user_id={@match.user.id}
+                phx-value-type="contract"
+                phx-value-marketplace="true"
+                variant="none"
+                class="group bg-emerald-900/10 text-emerald-300 transition-colors duration-75 hover:bg-emerald-800/10 hover:text-emerald-300 hover:drop-shadow-[0_1px_5px_#34d39980] focus:bg-emerald-800/10 focus:text-emerald-300 focus:outline-none focus:drop-shadow-[0_1px_5px_#34d39980] border border-emerald-400/40 hover:border-emerald-400/50 focus:border-emerald-400/50 h-full py-4"
+                size="xl"
+              >
+                <div class="flex flex-col items-center gap-1 font-semibold">
+                  <span>Offer contract</span>
+                  <dd class="font-display font-semibold tabular-nums text-lg text-emerald-400">
+                    {Money.to_string!(
+                      Money.mult!(
+                        @match[:hourly_rate] |> Money.mult!(@match.user.hours_per_week || 30),
+                        Decimal.new("1.13")
+                      ),
+                      no_fraction_if_integer: false
+                    )} / week
+                  </dd>
+                </div>
+              </.button>
+            </div>
+          </div>
+        </dl>
+      </div>
     </div>
     """
   end