Skip to content

Commit 3146c70

Browse files
zcesurzcesur
committed
feat: add special hire section and update regular hire cards
- Introduced a new section to prominently feature a special hire with enhanced styling and layout. - Updated the rendering logic for regular hire cards to conditionally display based on the hire's status. - Added a new data structure for the special hire, including details such as name, title, and hire date.
1 parent b7d36ca commit 3146c70

File tree

1 file changed

+73
-24
lines changed

1 file changed

+73
-24
lines changed

‎lib/algora_web/live/home_live.ex‎

Lines changed: 73 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -119,34 +119,73 @@ defmodule AlgoraWeb.HomeLive do
119119
120120
<section class="relative isolate py-16 sm:pb-40">
121121
<div class="mx-auto max-w-7xl px-6 lg:px-8">
122+
<!-- Special 7th hire - centered on its own row -->
123+
<%= for example <- @company_people_examples do %>
124+
<%= if Map.get(example, :special) do %>
125+
<div class="flex justify-center mb-12">
126+
<div class="relative flex items-center gap-3 p-6 bg-gradient-to-br from-emerald-900/30 to-emerald-800/20 rounded-xl border-2 border-emerald-400/30 shadow-xl shadow-emerald-400/10 max-w-md w-full">
127+
<img
128+
src={example.person_avatar}
129+
alt={example.person_name}
130+
class="size-12 rounded-full ring-2 ring-emerald-400/50"
131+
/>
132+
<.icon name="tabler-arrow-right" class="size-4 text-emerald-400 shrink-0" />
133+
<img
134+
src={example.company_avatar}
135+
alt={example.company_name}
136+
class="size-12 rounded-full ring-2 ring-emerald-400/50"
137+
/>
138+
<div class="flex-1">
139+
<div class="text-sm font-medium whitespace-nowrap text-emerald-100">
140+
{example.person_name}
141+
<.icon name="tabler-arrow-right" class="size-3 text-emerald-400" /> {example.company_name}
142+
</div>
143+
<div class="text-xs text-emerald-200/80 mt-1">{example.person_title}</div>
144+
<div class="text-xs text-emerald-300/70 mt-1">{example.hire_date}</div>
145+
</div>
146+
<.badge
147+
variant="secondary"
148+
class="absolute -top-2 -left-2 text-xs px-3 py-1 text-black bg-gradient-to-r from-emerald-400 to-emerald-500 font-semibold shadow-lg"
149+
>
150+
<.icon name="tabler-star-filled" class="size-4 text-black mr-1 -ml-0.5" />
151+
Latest hire!
152+
</.badge>
153+
</div>
154+
</div>
155+
<% end %>
156+
<% end %>
157+
158+
<!-- Regular hire cards grid -->
122159
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
123160
<%= for example <- @company_people_examples do %>
124-
<div class="relative flex items-center gap-3 p-6 bg-card rounded-xl border shrink-0">
125-
<img
126-
src={example.person_avatar}
127-
alt={example.person_name}
128-
class="size-8 sm:size-12 rounded-full"
129-
/>
130-
<.icon name="tabler-arrow-right" class="size-4 text-muted-foreground shrink-0" />
131-
<img
132-
src={example.company_avatar}
133-
alt={example.company_name}
134-
class="size-8 sm:size-12 rounded-full"
135-
/>
136-
<div class="flex-1">
137-
<div class="text-sm font-medium whitespace-nowrap">
138-
{example.person_name}
139-
<.icon name="tabler-arrow-right" class="size-3 text-foreground" /> {example.company_name}
161+
<%= unless Map.get(example, :special) do %>
162+
<div class="relative flex items-center gap-3 p-6 bg-card rounded-xl border shrink-0">
163+
<img
164+
src={example.person_avatar}
165+
alt={example.person_name}
166+
class="size-8 sm:size-12 rounded-full"
167+
/>
168+
<.icon name="tabler-arrow-right" class="size-4 text-muted-foreground shrink-0" />
169+
<img
170+
src={example.company_avatar}
171+
alt={example.company_name}
172+
class="size-8 sm:size-12 rounded-full"
173+
/>
174+
<div class="flex-1">
175+
<div class="text-sm font-medium whitespace-nowrap">
176+
{example.person_name}
177+
<.icon name="tabler-arrow-right" class="size-3 text-foreground" /> {example.company_name}
178+
</div>
179+
<div class="text-xs text-muted-foreground mt-1">{example.person_title}</div>
140180
</div>
141-
<div class="text-xs text-muted-foreground mt-1">{example.person_title}</div>
181+
<.badge
182+
variant="secondary"
183+
class="absolute -top-2 -left-2 text-xs px-2 py-1 text-emerald-400 bg-emerald-950"
184+
>
185+
Full-time hire!
186+
</.badge>
142187
</div>
143-
<.badge
144-
variant="secondary"
145-
class="absolute -top-2 -left-2 text-xs px-2 py-1 text-emerald-400 bg-emerald-950"
146-
>
147-
Full-time hire!
148-
</.badge>
149-
</div>
188+
<% end %>
150189
<% end %>
151190
</div>
152191
</div>
@@ -889,6 +928,16 @@ defmodule AlgoraWeb.HomeLive do
889928

890929
defp get_company_people_examples do
891930
[
931+
# Special 7th hire - prominently featured
932+
%{
933+
company_name: "TraceMachina",
934+
company_avatar: "https://avatars.githubusercontent.com/u/144973251?s=200&v=4",
935+
person_name: "Tom",
936+
person_avatar: "https://avatars.githubusercontent.com/u/38532?v=4",
937+
person_title: "Staff Engineer",
938+
hire_date: "June 2025",
939+
special: true
940+
},
892941
%{
893942
company_name: "Golem Cloud",
894943
company_avatar: "https://github.com/golemcloud.png",

0 commit comments

Comments
 (0)