Skip to content

Commit 1186c61

Browse files
zcesurzcesur
committed
feat: add demo on homepage
1 parent e9bde82 commit 1186c61

File tree

2 files changed

+98
-125
lines changed

2 files changed

+98
-125
lines changed

‎lib/algora_web/components/modal_video.ex‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ defmodule AlgoraWeb.Components.ModalVideo do
1111
attr :class, :string, default: nil
1212
attr :autoplay, :boolean, default: true
1313
attr :start, :integer, default: 0
14+
attr :loading, :string, default: "lazy"
1415

1516
def modal_video(assigns) do
1617
~H"""
@@ -30,7 +31,7 @@ defmodule AlgoraWeb.Components.ModalVideo do
3031
|> show_modal("video-modal")
3132
}
3233
>
33-
<img src={@poster} alt={@alt} class="object-cover w-full h-full" loading="lazy" />
34+
<img src={@poster} alt={@alt} class="object-cover w-full h-full" loading={@loading} />
3435
<div class="absolute inset-0 flex items-center justify-center">
3536
<div class="size-10 sm:size-16 rounded-full bg-black/50 flex items-center justify-center group-hover:bg-black/70 transition-colors">
3637
<.icon name="tabler-player-play-filled" class="size-5 sm:size-8 text-white" />

‎lib/algora_web/live/home_live.ex‎

Lines changed: 96 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -103,134 +103,106 @@ defmodule AlgoraWeb.HomeLive do
103103
<% end %>
104104
105105
<main class="bg-black relative overflow-hidden">
106-
<section class="relative isolate lg:min-h-[100svh]k">
107-
<div class="mx-auto max-w-7xl pt-24 pb-12 xl:pt-24">
108-
<div class="mx-auto lg:mx-0 flex lg:max-w-none items-center justify-center min-h-[21rem] lg:min-h-[calc(100svh-10rem)] text-center">
109-
<div class={
110-
classes([
111-
# "px-6 lg:px-8 lg:pr-0 xl:py-20 relative w-full lg:max-w-xl lg:shrink-0 xl:max-w-[52rem]",
112-
"flex flex-col items-center justify-center",
113-
@screenshot? && "pt-24",
114-
"pt-24"
115-
])
116-
}>
117-
<.wordmark :if={@screenshot?} class="h-8 mb-6" />
118-
<%!-- <h1 class="font-display text-4xl sm:text-4xl md:text-5xl xl:text-7xl font-semibold tracking-tight text-foreground">
119-
<span class="text-emerald-400">Bounties, contracts &amp; jobs</span>
120-
<br />for open source engineers
121-
</h1> --%>
122-
<h1 class="font-display text-3xl sm:text-4xl md:text-5xl xl:text-7xl font-semibold tracking-tight text-foreground">
123-
<div class="text-emerald-400">Leverage open source</div>
124-
<div class="md:mt-2">to hire the best engineers</div>
125-
</h1>
126-
<p class="mt-2 sm:mt-4 md:mt-6 text-sm sm:text-lg xl:text-2xl/8 font-medium text-foreground/90 sm:max-w-md lg:max-w-none">
127-
Algora is an open source tech recruiting platform.<br />We use granular GitHub OSS contribution data
128-
to help you<br /> hire the perfect engineer for your role, fast and affordably.
129-
</p>
130-
<div :if={!@screenshot?} class="mt-6 sm:mt-10 flex gap-4">
131-
<.button
132-
navigate={~p"/onboarding/org"}
133-
class="h-10 sm:h-14 rounded-md px-8 sm:px-12 text-sm sm:text-xl"
134-
>
135-
Companies
136-
</.button>
137-
<.button
138-
navigate={~p"/onboarding/dev"}
139-
variant="secondary"
140-
class="h-10 sm:h-14 rounded-md px-8 sm:px-12 text-sm sm:text-xl"
141-
>
142-
Developers
143-
</.button>
144-
</div>
145-
146-
<div class="mt-6 sm:mt-10 px-4 sm:px-6 md:px-8">
147-
<div class="grid w-full grid-cols-5 gap-4 md:gap-8 max-w-2xl mx-auto items-center justify-center">
148-
<a class="relative flex items-center justify-center" href={~p"/cal"}>
149-
<Wordmarks.calcom class="w-[10rem] col-auto mt-3" alt="Cal.com" />
150-
</a>
151-
<a class="relative flex items-center justify-center" href={~p"/qdrant"}>
152-
<Wordmarks.qdrant class="w-[11rem] col-auto" alt="Qdrant" />
153-
</a>
154-
<a class="relative flex items-center justify-center" href={~p"/remotion"}>
155-
<img
156-
src={~p"/images/wordmarks/remotion.png"}
157-
alt="Remotion"
158-
class="col-auto w-full saturate-0"
159-
/>
160-
</a>
161-
<a class="relative flex items-center justify-center" href={~p"/zio"}>
162-
<img
163-
src={~p"/images/wordmarks/zio.png"}
164-
alt="ZIO"
165-
class="w-[6rem] col-auto brightness-0 invert"
166-
/>
167-
</a>
168-
<.link
169-
class="relative flex items-center justify-center"
170-
navigate={~p"/triggerdotdev"}
106+
<section class="relative isolate">
107+
<div class="h-full mx-auto max-w-7xl flex flex-col items-center justify-center pt-48 pb-12">
108+
<div class="h-full mx-auto lg:mx-0 flex lg:max-w-none items-center justify-center text-center">
109+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 items-center">
110+
<div class="flex-1 flex flex-col items-center lg:items-start text-center lg:text-left">
111+
<h1 class="font-display text-3xl sm:text-4xl md:text-5xl xl:text-5xl font-semibold tracking-tight text-foreground">
112+
<div class="text-emerald-400">Leverage open source</div>
113+
<div class="md:mt-2">to hire the best engineers</div>
114+
</h1>
115+
<p class="mt-2 sm:mt-4 md:mt-6 text-sm sm:text-lg xl:text-xl font-medium text-foreground/90 sm:max-w-md lg:max-w-none">
116+
Algora is an open source tech recruiting platform.<br />We use granular GitHub OSS contribution data
117+
to help you<br /> hire the perfect engineer for your role, fast and affordably.
118+
</p>
119+
<div class="mt-6 sm:mt-10 flex gap-4">
120+
<.button
121+
navigate={~p"/onboarding/org"}
122+
class="h-10 sm:h-14 rounded-md px-8 sm:px-12 text-sm sm:text-xl"
171123
>
172-
<img
173-
src={~p"/images/wordmarks/activepieces.svg"}
174-
alt="Activepieces"
175-
class="col-auto w-[12rem] brightness-0 invert"
176-
loading="lazy"
177-
/>
178-
</.link>
179-
<a class="relative flex items-center justify-center" href={~p"/tembo"}>
180-
<img
181-
src={~p"/images/wordmarks/tembo.png"}
182-
alt="Tembo"
183-
class="w-[13rem] col-auto saturate-0"
184-
/>
185-
</a>
186-
<a class="relative flex items-center justify-center" href={~p"/maybe-finance"}>
187-
<img
188-
src={~p"/images/wordmarks/maybe.png"}
189-
alt="Maybe"
190-
class="col-auto w-full saturate-0"
191-
/>
192-
</a>
193-
<a class="relative flex items-center justify-center" href={~p"/golemcloud"}>
194-
<Wordmarks.golemcloud class="col-auto w-full" alt="Golem Cloud" />
195-
</a>
196-
<a class="relative flex items-center justify-center" href={~p"/aidenybai"}>
197-
<img
198-
src={~p"/images/wordmarks/million.png"}
199-
alt="Million"
200-
class="col-auto w-44 saturate-0"
201-
/>
202-
</a>
203-
<a class="relative flex items-center justify-center" href={~p"/tailcallhq"}>
204-
<Wordmarks.tailcall class="w-[10rem] col-auto" fill="white" alt="Tailcall" />
205-
</a>
124+
Companies
125+
</.button>
126+
<.button
127+
navigate={~p"/onboarding/dev"}
128+
variant="secondary"
129+
class="h-10 sm:h-14 rounded-md px-8 sm:px-12 text-sm sm:text-xl"
130+
>
131+
Developers
132+
</.button>
206133
</div>
207134
</div>
135+
136+
<div class="flex-1 relative w-full max-w-2xl lg:max-w-none lg:flex-1 rounded-xl overflow-hidden px-4">
137+
<.modal_video
138+
class="aspect-video rounded-xl border-2 border-border/20"
139+
src="https://www.youtube.com/embed/Jne9mVas9i0"
140+
title="Algora Demo"
141+
poster="https://i.ytimg.com/vi/Jne9mVas9i0/maxresdefault.jpg"
142+
alt="Algora Demo"
143+
loading="eager"
144+
/>
145+
</div>
146+
</div>
147+
</div>
148+
149+
<div class="px-4 sm:px-6 md:px-8 pt-16 sm:pt-40">
150+
<div class="grid w-full grid-cols-5 gap-4 md:gap-8 max-w-2xl mx-auto items-center justify-center">
151+
<a class="relative flex items-center justify-center" href={~p"/cal"}>
152+
<Wordmarks.calcom class="w-[10rem] col-auto mt-3" alt="Cal.com" />
153+
</a>
154+
<a class="relative flex items-center justify-center" href={~p"/qdrant"}>
155+
<Wordmarks.qdrant class="w-[11rem] col-auto" alt="Qdrant" />
156+
</a>
157+
<a class="relative flex items-center justify-center" href={~p"/remotion"}>
158+
<img
159+
src={~p"/images/wordmarks/remotion.png"}
160+
alt="Remotion"
161+
class="col-auto w-full saturate-0"
162+
/>
163+
</a>
164+
<a class="relative flex items-center justify-center" href={~p"/zio"}>
165+
<img
166+
src={~p"/images/wordmarks/zio.png"}
167+
alt="ZIO"
168+
class="w-[6rem] col-auto brightness-0 invert"
169+
/>
170+
</a>
171+
<.link class="relative flex items-center justify-center" navigate={~p"/triggerdotdev"}>
172+
<img
173+
src={~p"/images/wordmarks/activepieces.svg"}
174+
alt="Activepieces"
175+
class="col-auto w-[12rem] brightness-0 invert"
176+
/>
177+
</.link>
178+
<a class="relative flex items-center justify-center" href={~p"/tembo"}>
179+
<img
180+
src={~p"/images/wordmarks/tembo.png"}
181+
alt="Tembo"
182+
class="w-[13rem] col-auto saturate-0"
183+
/>
184+
</a>
185+
<a class="relative flex items-center justify-center" href={~p"/maybe-finance"}>
186+
<img
187+
src={~p"/images/wordmarks/maybe.png"}
188+
alt="Maybe"
189+
class="col-auto w-full saturate-0"
190+
/>
191+
</a>
192+
<a class="relative flex items-center justify-center" href={~p"/golemcloud"}>
193+
<Wordmarks.golemcloud class="col-auto w-full" alt="Golem Cloud" />
194+
</a>
195+
<a class="relative flex items-center justify-center" href={~p"/aidenybai"}>
196+
<img
197+
src={~p"/images/wordmarks/million.png"}
198+
alt="Million"
199+
class="col-auto w-44 saturate-0"
200+
/>
201+
</a>
202+
<a class="relative flex items-center justify-center" href={~p"/tailcallhq"}>
203+
<Wordmarks.tailcall class="w-[10rem] col-auto" fill="white" alt="Tailcall" />
204+
</a>
208205
</div>
209-
<!-- Featured devs -->
210-
<%!-- <div class={
211-
classes([
212-
"mt-8 sm:mt-14 flex justify-start md:justify-center gap-4 sm:gap-8 lg:justify-start lg:mt-0 lg:pl-0",
213-
"overflow-x-auto scrollbar-thin lg:overflow-x-visible px-6 lg:px-8"
214-
])
215-
}>
216-
<%= if length(@featured_devs) > 0 do %>
217-
<div class="ml-auto w-28 min-[500px]:w-40 sm:w-56 lg:w-44 flex-none space-y-6 sm:space-y-8 pt-16 sm:pt-32 sm:ml-0 lg:order-last lg:pt-36 xl:order-none xl:pt-80">
218-
<.dev_card dev={List.first(@featured_devs)} />
219-
</div>
220-
<div class="flex flex-col mr-auto w-28 min-[500px]:w-40 sm:w-56 lg:w-44 flex-none space-y-6 sm:space-y-8 sm:mr-0 lg:pt-36">
221-
<%= if length(@featured_devs) >= 3 do %>
222-
<%= for dev <- Enum.slice(@featured_devs, 1..2) do %>
223-
<.dev_card dev={dev} />
224-
<% end %>
225-
<% end %>
226-
</div>
227-
<div class="flex flex-col w-28 min-[500px]:w-40 sm:w-56 lg:w-44 flex-none space-y-6 sm:space-y-8 pt-16 sm:pt-32 lg:pt-0">
228-
<%= for dev <- Enum.slice(@featured_devs, 3..4) do %>
229-
<.dev_card dev={dev} />
230-
<% end %>
231-
</div>
232-
<% end %>
233-
</div> --%>
234206
</div>
235207
</div>
236208
</section>

0 commit comments

Comments
 (0)