Skip to content

fix: make homepage responsive #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Feb 3, 2025
Merged

fix: make homepage responsive #48

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
962bcd1
fix overflows
zcesur Feb 3, 2025
1572641
implement mobile menu
zcesur Feb 3, 2025
330ee69
fix CTA buttons
zcesur Feb 3, 2025
4788025
improve responsiveness of featured devs section
zcesur Feb 3, 2025
0e519f9
fix responsiveness of logo cloud
zcesur Feb 3, 2025
c7d80fe
more improvements
zcesur Feb 3, 2025
012c9b7
more improvements
zcesur Feb 3, 2025
9f044ee
more improvements
zcesur Feb 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 33 additions & 21 deletions lib/algora_web/live/home_live.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,11 @@ defmodule AlgoraWeb.HomeLive do
</div>
<!-- Mobile menu button -->
<div class="flex lg:hidden">
<button type="button" class="rounded-md p-2.5 text-muted-foreground hover:text-foreground">
<button
type="button"
class="rounded-md p-2.5 text-muted-foreground hover:text-foreground"
phx-click={JS.show(to: "#mobile-menu")}
>
<span class="sr-only">Open main menu</span>
<.icon name="tabler-menu" class="h-6 w-6" />
</button>
Expand Down Expand Up @@ -71,7 +75,7 @@ defmodule AlgoraWeb.HomeLive do
</div>
</nav>
<!-- Mobile menu -->
<div class="lg:hidden" role="dialog" aria-modal="true">
<div id="mobile-menu" class="lg:hidden hidden" role="dialog" aria-modal="true">
<div class="fixed inset-0 z-50"></div>
<div class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-background px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-border">
<!-- Mobile menu content -->
Expand All @@ -80,6 +84,7 @@ defmodule AlgoraWeb.HomeLive do
<button
type="button"
class="rounded-md p-2.5 text-muted-foreground hover:text-foreground"
phx-click={JS.hide(to: "#mobile-menu")}
>
<span class="sr-only">Close menu</span>
<.icon name="tabler-x" class="h-6 w-6" />
Expand Down Expand Up @@ -129,7 +134,7 @@ defmodule AlgoraWeb.HomeLive do
</header>

<main>
<div class="relative isolate">
<div class="relative isolate overflow-hidden min-h-screen">
<!-- Background pattern -->
<div
class="absolute inset-x-0 -top-40 -z-10 transform overflow-hidden blur-3xl sm:-top-80"
Expand Down Expand Up @@ -164,28 +169,25 @@ defmodule AlgoraWeb.HomeLive do
/>
</div>

<div
class="top-[calc(100%-13rem)] absolute inset-x-0 -z-10 transform overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
aria-hidden="true"
>
<div class="absolute inset-x-0 -z-10 transform overflow-hidden blur-3xl" aria-hidden="true">
<div
class="left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] relative -translate-x-1/2 bg-gradient-to-tr from-primary to-secondary opacity-20 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
>
</div>
</div>
<!-- Hero content -->
<div class="mx-auto max-w-7xl px-6 pt-36 pb-24 sm:pt-60 lg:px-8 lg:pt-16">
<div class="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
<div class="relative w-full lg:-mt-12 lg:max-w-xl lg:shrink-0 xl:max-w-3xl">
<div class="mx-auto max-w-7xl px-6 pt-24 pb-12 lg:px-8 xl:pt-16 2xl:pt-28">
<div class="mx-auto gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
<div class="relative w-full lg:max-w-xl lg:shrink-0 xl:max-w-2xl 2xl:max-w-3xl">
<h1 class="font-display text-pretty text-5xl font-semibold tracking-tight text-foreground sm:text-7xl">
The open source UpWork alternative.
</h1>
<p class="mt-8 text-pretty text-lg font-medium text-muted-foreground sm:max-w-md sm:text-xl/8 lg:max-w-none">
GitHub bounties, freelancing and full-time jobs.
</p>
<!-- CTA buttons -->
<div class="mt-10 flex items-center gap-x-6">
<div class="mt-10 flex flex-col sm:flex-row text-center sm:items-center gap-6">
<.link
navigate={~p"/onboarding/org"}
class="rounded-md bg-primary px-12 py-5 text-xl font-semibold text-primary-foreground shadow hover:bg-primary/90"
Expand All @@ -200,10 +202,12 @@ defmodule AlgoraWeb.HomeLive do
</.link>
</div>
<!-- Stats -->
<dl class="mt-16 grid grid-cols-2 gap-8 lg:grid-cols-4">
<dl class="mt-16 grid grid-cols-2 gap-8 sm:grid-cols-4">
<%= for stat <- @stats do %>
<div class="flex flex-col gap-y-2">
<dt class="text-sm leading-6 text-muted-foreground">{stat.label}</dt>
<dt class="text-sm leading-6 text-muted-foreground whitespace-nowrap">
{stat.label}
</dt>
<dd class="font-display text-3xl font-semibold tracking-tight text-foreground">
{stat.value}
</dd>
Expand All @@ -215,25 +219,25 @@ defmodule AlgoraWeb.HomeLive do
<h2 class="text-sm font-semibold leading-8 text-foreground">
Trusted by the world's most innovative teams
</h2>
<div class="mt-6 grid grid-cols-5 gap-x-6 gap-y-4">
<div class="mt-6 grid grid-cols-3 sm:grid-cols-5 gap-6 -ml-[5%] sm:-ml-[2.5%]">
<.logo_cloud />
</div>
</div>
</div>
<!-- Featured devs -->
<div class="mt-14 flex min-h-screen justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0">
<div class="mt-14 flex justify-start sm:justify-center gap-8 lg:justify-start lg:mt-0 lg:pl-0">
<%= if length(@featured_devs) > 0 do %>
<div class="ml-auto w-44 flex-none space-y-8 pt-32 sm:ml-0 sm:pt-80 lg:order-last lg:pt-36 xl:order-none xl:pt-80">
<div class="ml-auto w-32 min-[500px]:w-40 sm:w-56 lg:w-44 flex-none space-y-8 pt-32 sm:ml-0 lg:order-last lg:pt-36 xl:order-none xl:pt-80">
<.dev_card dev={List.first(@featured_devs)} />
</div>
<div class="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36">
<div class="mr-auto w-32 min-[500px]:w-40 sm:w-56 lg:w-44 flex-none space-y-8 sm:mr-0 lg:pt-36">
<%= if length(@featured_devs) >= 3 do %>
<%= for dev <- Enum.slice(@featured_devs, 1..2) do %>
<.dev_card dev={dev} />
<% end %>
<% end %>
</div>
<div class="w-44 flex-none space-y-8 pt-32 sm:pt-0">
<div class="w-32 min-[500px]:w-40 sm:w-56 lg:w-44 flex-none space-y-8 pt-32 lg:pt-0">
<%= for dev <- Enum.slice(@featured_devs, 3..4) do %>
<.dev_card dev={dev} />
<% end %>
Expand Down Expand Up @@ -291,10 +295,10 @@ defmodule AlgoraWeb.HomeLive do
<% end %>
</div>
</div>
<div class="mt-1 text-xs text-muted-foreground">
<div class="mt-3 text-xs text-muted-foreground">
<span class="font-medium">Total Earned:</span>
<span class="text-sm font-bold text-foreground">
{Money.to_string!(@dev.total_earned)}
{Money.to_string!(@dev.total_earned, no_fraction_if_integer: true)}
</span>
</div>
</div>
Expand Down Expand Up @@ -347,7 +351,7 @@ defmodule AlgoraWeb.HomeLive do
%{
name: "ZIO",
url: "https://zio.dev",
args: %{src: ~p"/images/wordmarks/zio.png", class: "mt-4 aspect-[67/20] max-h-10 brightness-0 invert"}
args: %{src: ~p"/images/wordmarks/zio.png", class: "mt-4 max-h-10 brightness-0 invert"}
},
%{
name: "Tailcall",
Expand All @@ -362,6 +366,14 @@ defmodule AlgoraWeb.HomeLive do
url: "https://www.golem.cloud",
component: &Wordmarks.golemcloud/1,
args: %{class: "max-h-9"}
},
%{
name: "Remotion",
url: "https://remotion.dev",
args: %{
src: "https://algora.io/banners/remotion.png",
class: "max-h-10 brightness-0 invert sm:hidden"
}
}
],
fn org ->
Expand Down