feat: pricing (#101)

Author: zcesur

lib/algora_web/components/ui/button.ex

@@ -64,6 +64,8 @@ defmodule AlgoraWeb.Components.UI.Button do
         "bg-primary/50 hover:bg-primary/30 text-foreground border-primary/80 hover:border-primary focus-visible:outline-primary-600 data-[state=open]:bg-primary-500/80 data-[state=open]:outline-primary-600 shadow border",
       "blue" =>
         "bg-blue-500/50 hover:bg-blue-500/30 text-foreground border-blue-500/80 hover:border-blue-500 focus-visible:outline-blue-600 data-[state=open]:bg-blue-500/80 data-[state=open]:outline-blue-600 shadow border",
+      "purple" =>
+        "bg-purple-500/50 hover:bg-purple-500/30 text-foreground border-purple-500/80 hover:border-purple-500 focus-visible:outline-purple-600 data-[state=open]:bg-purple-500/80 data-[state=open]:outline-purple-600 shadow border",
       "destructive" =>
         "bg-destructive/50 hover:bg-destructive/30 text-destructive-foreground border-destructive/80 hover:border-destructive focus-visible:outline-destructive-600 data-[state=open]:bg-destructive-500/80 data-[state=open]:outline-destructive-600 shadow border",
       "hover:destructive" =>

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)}