feat: add calendar contact section to dashboard with enhanced layout and button for team growth engagement

Author: zcesur

lib/algora_web/constants.ex

@@ -9,6 +9,7 @@ defmodule AlgoraWeb.Constants do
       youtube_url: "https://www.youtube.com/@algora-io",
       discord_url: ~p"/discord",
       github_url: "https://github.com/algora-io",
+      calendar_url: "https://cal.com/ioannisflo",
       # TODO: update this to the new repo
       github_repo_url: "https://github.com/algora-io/tv",
       github_repo_api_url: "https://api.github.com/repos/algora-io/tv",

lib/algora_web/live/org/dashboard_live.ex

@@ -429,11 +429,74 @@ defmodule AlgoraWeb.Org.DashboardLive do
           title={"#{@current_org.name} Ecosystem"}
           subtitle="Help maintain and grow your ecosystem by creating bounties and tips in your dependencies"
         >
-          <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
+          <div class="pt-8 grid grid-cols-1 gap-8 md:grid-cols-2">
             {create_bounty(assigns)}
             {create_tip(assigns)}
           </div>
         </.section>
+
+        <.section>
+          <div class="group border ring-1 ring-transparent rounded-xl overflow-hidden">
+            <div class={[
+              "bg-card/75 flex justify-between rounded-xl border-l-4 border-purple-400 transition-all",
+              "divide-x divide-default"
+            ]}>
+              <div class="w-1/4 px-8 py-8 xl:px-4 2xl:px-8">
+                <div class="flex items-center gap-2">
+                  <div class="flex items-center gap-2 pb-2">
+                    <h3 class="flex items-center gap-4 text-2xl font-semibold text-foreground">
+                      Growing your team?
+                    </h3>
+                  </div>
+                </div>
+                <p class="text-foreground-light mb-4 text-sm 2xl:pr-4">
+                  You're in the right place.
+                </p>
+                <div class="pt-4 flex gap-2">
+                  <.button
+                    navigate={AlgoraWeb.Constants.get(:calendar_url)}
+                    variant="purple"
+                    size="xl"
+                    class="drop-shadow-[0_1px_5px_#c084fc80]"
+                  >
+                    Contact us
+                  </.button>
+                </div>
+              </div>
+              <div class="w-3/4 my-auto">
+                <ul class="py-8 border-default text-base text-foreground-lighter flex-1 grid grid-cols-3 gap-4 divide-x divide-default">
+                  <li class="py-2 flex flex-col items-center justify-center text-center">
+                    <div class="flex items-center justify-center size-16 bg-purple-400/10 drop-shadow-[0_1px_5px_#c084fc80] rounded-full">
+                      <.icon name="tabler-world" class="size-8 text-purple-400" />
+                    </div>
+                    <div class="pt-4 text-3xl font-semibold font-display">Publish</div>
+                    <div class="pt-2 text-base font-medium text-muted-foreground">
+                      Bounties and contracts on Algora
+                    </div>
+                  </li>
+                  <li class="py-2 flex flex-col items-center justify-center text-center">
+                    <div class="flex items-center justify-center size-16 bg-purple-400/10 drop-shadow-[0_1px_5px_#c084fc80] rounded-full">
+                      <.icon name="tabler-bolt" class="size-8 text-purple-400" />
+                    </div>
+                    <div class="pt-4 text-3xl font-semibold font-display">Match</div>
+                    <div class="pt-2 text-base font-medium text-muted-foreground">
+                      Proven Algora experts
+                    </div>
+                  </li>
+                  <li class="py-2 flex flex-col items-center justify-center text-center">
+                    <div class="flex items-center justify-center size-16 bg-purple-400/10 drop-shadow-[0_1px_5px_#c084fc80] rounded-full">
+                      <.icon name="tabler-briefcase" class="size-8 text-purple-400" />
+                    </div>
+                    <div class="pt-4 text-3xl font-semibold font-display">Hire</div>
+                    <div class="pt-2 text-base font-medium text-muted-foreground">
+                      Top 1% OSS engineers
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </.section>
       </div>
     </div>
     {sidebar(assigns)}