feat: enhance footer and dashboard with updated contact information

- Added support email and formatted phone number to constants.
- Updated footer component to include links for Twitter, phone, and support email.
- Refactored dashboard to utilize new constants for displaying contact information.
- Improved accessibility by adding rel and target attributes to external links.

Author: zcesur

lib/algora_web/components/footer.ex

@@ -167,47 +167,68 @@ defmodule AlgoraWeb.Components.Footer do
             </div>
           </div>
         </div>
-        <div class="mt-16 border-t border-white/10 pt-8 sm:mt-20 md:flex md:justify-between lg:mt-24">
+        <div class="mt-16 border-t border-white/10 pt-8 sm:mt-20 flex flex-col md:flex-row md:justify-between md:items-start lg:mt-24 gap-8">
           <div class="flex gap-4 sm:gap-6 md:order-2">
-            <a
+            <.link
               class="rounded-xl border-2 border-gray-500 p-3 text-gray-400 transition-colors hover:border-gray-400 hover:text-gray-300 sm:p-3"
               href={Constants.get(:discord_url)}
+              rel="noopener"
+              target="_blank"
             >
               <span class="sr-only">Discord</span>
               <.icon name="tabler-brand-discord-filled" class="h-6 w-6 sm:h-8 sm:w-8" />
-            </a>
-            <a
+            </.link>
+            <.link
               class="rounded-xl border-2 border-gray-500 p-3 text-gray-400 transition-colors hover:border-gray-400 hover:text-gray-300 sm:p-3"
               href={Constants.get(:twitter_url)}
+              rel="noopener"
+              target="_blank"
             >
               <span class="sr-only">X (formerly Twitter)</span>
               <.icon name="tabler-brand-x" class="h-6 w-6 sm:h-8 sm:w-8" />
-            </a>
-            <a
+            </.link>
+            <.link
               class="rounded-xl border-2 border-gray-500 p-3 text-gray-400 transition-colors hover:border-gray-400 hover:text-gray-300 sm:p-3"
               href={Constants.get(:github_url)}
+              rel="noopener"
+              target="_blank"
             >
               <span class="sr-only">GitHub</span>
               <Logos.github class="h-6 w-6 sm:h-8 sm:w-8" />
-            </a>
-            <a
+            </.link>
+            <.link
               class="rounded-xl border-2 border-gray-500 p-3 text-gray-400 transition-colors hover:border-gray-400 hover:text-gray-300 sm:p-3"
               href={Constants.get(:youtube_url)}
+              rel="noopener"
+              target="_blank"
             >
               <span class="sr-only">YouTube</span>
               <.icon name="tabler-brand-youtube-filled" class="h-6 w-6 sm:h-8 sm:w-8" />
-            </a>
-            <a
+            </.link>
+            <.link
               class="rounded-xl border-2 border-gray-500 p-3 text-gray-400 transition-colors hover:border-gray-400 hover:text-gray-300 sm:p-3"
               href={"mailto:" <> Constants.get(:email)}
             >
               <span class="sr-only">Email</span>
               <.icon name="tabler-mail-filled" class="h-6 w-6 sm:h-8 sm:w-8" />
-            </a>
+            </.link>
+          </div>
+
+          <div class="flex flex-col gap-4 md:gap-2">
+            <div class="text-sm font-medium leading-5 text-gray-400 md:text-base">
+              © {Date.utc_today().year} Algora, Public Benefit Corporation
+            </div>
+
+            <div class="flex flex-col gap-2">
+              <.link
+                class="flex w-max items-center gap-2 rounded-full border border-gray-700 py-2 pl-2 pr-3.5 text-xs text-muted-foreground hover:text-foreground transition-colors hover:border-gray-600"
+                href={"tel:" <> Constants.get(:tel)}
+              >
+                <.icon name="tabler-phone-filled" class="size-4" /> Call us
+                <span>{Constants.get(:tel_formatted)}</span>
+              </.link>
+            </div>
           </div>
-          <p class="mt-8 text-sm font-medium leading-5 text-gray-400 md:order-1 md:mt-0 md:text-base">
-            © {Date.utc_today().year} Algora, Public Benefit Corporation
-          </p>
         </div>
       </div>
     </footer>

lib/algora_web/constants.ex

@@ -5,7 +5,10 @@ defmodule AlgoraWeb.Constants do
   def constants do
     %{
       email: "[email protected]",
+      # TODO: use [email protected]
+      support_email: "[email protected]",
       twitter_url: "https://x.com/algoraio",
+      twitter_handle: "algoraio",
       youtube_url: "https://www.youtube.com/@algora-io",
       discord_url: ~p"/discord",
       github_url: "https://github.com/algora-io",
@@ -21,7 +24,9 @@ defmodule AlgoraWeb.Constants do
       terms_url: ~p"/legal/terms",
       blog_url: "https://blog.algora.io",
       contact_url: "https://docs.algora.io/contact",
-      algora_tv_url: "https://algora.tv"
+      algora_tv_url: "https://algora.tv",
+      tel_formatted: "+1 (650) 420-2207",
+      tel: "+16504202207"
     }
   end
 

lib/algora_web/live/org/dashboard_live.ex

@@ -23,6 +23,7 @@ defmodule AlgoraWeb.Org.DashboardLive do
   alias Algora.Workspace.Contributor
   alias Algora.Workspace.Ticket
   alias AlgoraWeb.Components.Logos
+  alias AlgoraWeb.Constants
   alias AlgoraWeb.Forms.BountyForm
   alias AlgoraWeb.Forms.ContractForm
   alias AlgoraWeb.Forms.TipForm
@@ -462,7 +463,7 @@ defmodule AlgoraWeb.Org.DashboardLive do
                 </p>
                 <div class="pt-2 flex gap-2">
                   <.button
-                    navigate={AlgoraWeb.Constants.get(:calendar_url)}
+                    navigate={Constants.get(:calendar_url)}
                     variant="purple"
                     size="lg"
                     class="drop-shadow-[0_1px_5px_#c084fc80]"
@@ -1412,15 +1413,23 @@ defmodule AlgoraWeb.Org.DashboardLive do
             Chat with founders
           </button>
         </div>
-        <div class="flex items-center gap-2">
-          <.icon name="tabler-brand-x" class="size-6 text-muted-foreground" /> @algoraio
-        </div>
-        <div class="flex items-center gap-2">
-          <.icon name="tabler-phone" class="size-6 text-muted-foreground" /> +1 (650) 420-2207
-        </div>
-        <div class="flex items-center gap-2">
-          <.icon name="tabler-mail" class="size-6 text-muted-foreground" /> [email protected]
-        </div>
+        <.link
+          href={Constants.get(:twitter_url)}
+          rel="noopener"
+          target="_blank"
+          class="flex items-center gap-2"
+        >
+          <.icon name="tabler-brand-x" class="size-6 text-muted-foreground" />
+          @{Constants.get(:twitter_handle)}
+        </.link>
+        <.link href={"tel:" <> Constants.get(:tel)} class="flex items-center gap-2">
+          <.icon name="tabler-phone" class="size-6 text-muted-foreground" />
+          {Constants.get(:tel_formatted)}
+        </.link>
+        <.link href={"mailto:" <> Constants.get(:support_email)} class="flex items-center gap-2">
+          <.icon name="tabler-mail" class="size-6 text-muted-foreground" />
+          {Constants.get(:support_email)}
+        </.link>
       </div>
 
       <%= if @show_chat do %>