Skip to content

Commit 2ad7d49

Browse files
zcesurzcesur
authored
fix: make homepage responsive (#48)
1 parent 3549f86 commit 2ad7d49

File tree

1 file changed

+33
-21
lines changed

1 file changed

+33
-21
lines changed

‎lib/algora_web/live/home_live.ex‎

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,11 @@ defmodule AlgoraWeb.HomeLive do
4343
</div>
4444
<!-- Mobile menu button -->
4545
<div class="flex lg:hidden">
46-
<button type="button" class="rounded-md p-2.5 text-muted-foreground hover:text-foreground">
46+
<button
47+
type="button"
48+
class="rounded-md p-2.5 text-muted-foreground hover:text-foreground"
49+
phx-click={JS.show(to: "#mobile-menu")}
50+
>
4751
<span class="sr-only">Open main menu</span>
4852
<.icon name="tabler-menu" class="h-6 w-6" />
4953
</button>
@@ -71,7 +75,7 @@ defmodule AlgoraWeb.HomeLive do
7175
</div>
7276
</nav>
7377
<!-- Mobile menu -->
74-
<div class="lg:hidden" role="dialog" aria-modal="true">
78+
<div id="mobile-menu" class="lg:hidden hidden" role="dialog" aria-modal="true">
7579
<div class="fixed inset-0 z-50"></div>
7680
<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">
7781
<!-- Mobile menu content -->
@@ -80,6 +84,7 @@ defmodule AlgoraWeb.HomeLive do
8084
<button
8185
type="button"
8286
class="rounded-md p-2.5 text-muted-foreground hover:text-foreground"
87+
phx-click={JS.hide(to: "#mobile-menu")}
8388
>
8489
<span class="sr-only">Close menu</span>
8590
<.icon name="tabler-x" class="h-6 w-6" />
@@ -129,7 +134,7 @@ defmodule AlgoraWeb.HomeLive do
129134
</header>
130135
131136
<main>
132-
<div class="relative isolate">
137+
<div class="relative isolate overflow-hidden min-h-screen">
133138
<!-- Background pattern -->
134139
<div
135140
class="absolute inset-x-0 -top-40 -z-10 transform overflow-hidden blur-3xl sm:-top-80"
@@ -164,28 +169,25 @@ defmodule AlgoraWeb.HomeLive do
164169
/>
165170
</div>
166171
167-
<div
168-
class="top-[calc(100%-13rem)] absolute inset-x-0 -z-10 transform overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
169-
aria-hidden="true"
170-
>
172+
<div class="absolute inset-x-0 -z-10 transform overflow-hidden blur-3xl" aria-hidden="true">
171173
<div
172174
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]"
173175
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%)"
174176
>
175177
</div>
176178
</div>
177179
<!-- Hero content -->
178-
<div class="mx-auto max-w-7xl px-6 pt-36 pb-24 sm:pt-60 lg:px-8 lg:pt-16">
179-
<div class="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
180-
<div class="relative w-full lg:-mt-12 lg:max-w-xl lg:shrink-0 xl:max-w-3xl">
180+
<div class="mx-auto max-w-7xl px-6 pt-24 pb-12 lg:px-8 xl:pt-16 2xl:pt-28">
181+
<div class="mx-auto gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
182+
<div class="relative w-full lg:max-w-xl lg:shrink-0 xl:max-w-2xl 2xl:max-w-3xl">
181183
<h1 class="font-display text-pretty text-5xl font-semibold tracking-tight text-foreground sm:text-7xl">
182184
The open source UpWork alternative.
183185
</h1>
184186
<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">
185187
GitHub bounties, freelancing and full-time jobs.
186188
</p>
187189
<!-- CTA buttons -->
188-
<div class="mt-10 flex items-center gap-x-6">
190+
<div class="mt-10 flex flex-col sm:flex-row text-center sm:items-center gap-6">
189191
<.link
190192
navigate={~p"/onboarding/org"}
191193
class="rounded-md bg-primary px-12 py-5 text-xl font-semibold text-primary-foreground shadow hover:bg-primary/90"
@@ -200,10 +202,12 @@ defmodule AlgoraWeb.HomeLive do
200202
</.link>
201203
</div>
202204
<!-- Stats -->
203-
<dl class="mt-16 grid grid-cols-2 gap-8 lg:grid-cols-4">
205+
<dl class="mt-16 grid grid-cols-2 gap-8 sm:grid-cols-4">
204206
<%= for stat <- @stats do %>
205207
<div class="flex flex-col gap-y-2">
206-
<dt class="text-sm leading-6 text-muted-foreground">{stat.label}</dt>
208+
<dt class="text-sm leading-6 text-muted-foreground whitespace-nowrap">
209+
{stat.label}
210+
</dt>
207211
<dd class="font-display text-3xl font-semibold tracking-tight text-foreground">
208212
{stat.value}
209213
</dd>
@@ -215,25 +219,25 @@ defmodule AlgoraWeb.HomeLive do
215219
<h2 class="text-sm font-semibold leading-8 text-foreground">
216220
Trusted by the world's most innovative teams
217221
</h2>
218-
<div class="mt-6 grid grid-cols-5 gap-x-6 gap-y-4">
222+
<div class="mt-6 grid grid-cols-3 sm:grid-cols-5 gap-6 -ml-[5%] sm:-ml-[2.5%]">
219223
<.logo_cloud />
220224
</div>
221225
</div>
222226
</div>
223227
<!-- Featured devs -->
224-
<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">
228+
<div class="mt-14 flex justify-start sm:justify-center gap-8 lg:justify-start lg:mt-0 lg:pl-0">
225229
<%= if length(@featured_devs) > 0 do %>
226-
<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">
230+
<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">
227231
<.dev_card dev={List.first(@featured_devs)} />
228232
</div>
229-
<div class="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36">
233+
<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">
230234
<%= if length(@featured_devs) >= 3 do %>
231235
<%= for dev <- Enum.slice(@featured_devs, 1..2) do %>
232236
<.dev_card dev={dev} />
233237
<% end %>
234238
<% end %>
235239
</div>
236-
<div class="w-44 flex-none space-y-8 pt-32 sm:pt-0">
240+
<div class="w-32 min-[500px]:w-40 sm:w-56 lg:w-44 flex-none space-y-8 pt-32 lg:pt-0">
237241
<%= for dev <- Enum.slice(@featured_devs, 3..4) do %>
238242
<.dev_card dev={dev} />
239243
<% end %>
@@ -291,10 +295,10 @@ defmodule AlgoraWeb.HomeLive do
291295
<% end %>
292296
</div>
293297
</div>
294-
<div class="mt-1 text-xs text-muted-foreground">
298+
<div class="mt-3 text-xs text-muted-foreground">
295299
<span class="font-medium">Total Earned:</span>
296300
<span class="text-sm font-bold text-foreground">
297-
{Money.to_string!(@dev.total_earned)}
301+
{Money.to_string!(@dev.total_earned, no_fraction_if_integer: true)}
298302
</span>
299303
</div>
300304
</div>
@@ -347,7 +351,7 @@ defmodule AlgoraWeb.HomeLive do
347351
%{
348352
name: "ZIO",
349353
url: "https://zio.dev",
350-
args: %{src: ~p"/images/wordmarks/zio.png", class: "mt-4 aspect-[67/20] max-h-10 brightness-0 invert"}
354+
args: %{src: ~p"/images/wordmarks/zio.png", class: "mt-4 max-h-10 brightness-0 invert"}
351355
},
352356
%{
353357
name: "Tailcall",
@@ -362,6 +366,14 @@ defmodule AlgoraWeb.HomeLive do
362366
url: "https://www.golem.cloud",
363367
component: &Wordmarks.golemcloud/1,
364368
args: %{class: "max-h-9"}
369+
},
370+
%{
371+
name: "Remotion",
372+
url: "https://remotion.dev",
373+
args: %{
374+
src: "https://algora.io/banners/remotion.png",
375+
class: "max-h-10 brightness-0 invert sm:hidden"
376+
}
365377
}
366378
],
367379
fn org ->

0 commit comments

Comments
 (0)