Skip to content

Commit 56b1a4e

Browse files
HassanZahirniaHassanZahirnia
committed
🎨 Enhance prize section layout and add medal images for better presentation
1 parent 358a644 commit 56b1a4e

File tree

4 files changed

+129
-61
lines changed

4 files changed

+129
-61
lines changed

‎resources/images/prizes/bronze_medal.webp

3.18 KB
Binary file not shown.

‎resources/images/prizes/gold_medal.webp

3.18 KB
Binary file not shown.

‎resources/images/prizes/silver_medal.webp

2.72 KB
Binary file not shown.

‎resources/views/laracon-us-2025-competition.blade.php

Lines changed: 129 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -270,75 +270,143 @@ class="text-center text-3xl font-extrabold sm:text-4xl"
270270
</h2>
271271

272272
{{-- List --}}
273-
<div class="mt-5 flex flex-wrap items-center justify-center gap-5">
274-
<div
275-
class="group relative isolate flex w-full max-w-75 items-center gap-5 overflow-hidden rounded-2xl bg-gradient-to-br from-violet-50 to-violet-300 p-8 dark:bg-gradient-to-bl dark:from-white/10 dark:to-white/2"
276-
>
277-
{{-- Title --}}
278-
<h5
279-
class="text-2xl leading-relaxed font-semibold text-violet-900 transition duration-300 ease-in-out will-change-transform group-hover:translate-x-0.5 dark:text-violet-400"
273+
<div class="mt-5 flex flex-wrap items-start justify-center gap-5">
274+
<div class="flex flex-col items-center gap-4">
275+
{{-- Card --}}
276+
<div
277+
class="group relative isolate flex w-full max-w-75 items-center gap-5 overflow-hidden rounded-2xl bg-gradient-to-br from-violet-50 to-violet-300 p-8 dark:bg-gradient-to-bl dark:from-white/10 dark:to-white/2"
280278
>
281-
Laracon Ticket
282-
</h5>
283-
284-
{{-- Illustration --}}
285-
<img
286-
src="{{ Vite::asset('resources/images/prizes/3d_purple_tickets.webp') }}"
287-
alt=""
288-
loading="lazy"
289-
class="pointer-events-none h-16 transition duration-300 ease-in-out will-change-transform select-none group-hover:-translate-x-0.5"
290-
/>
279+
{{-- Title --}}
280+
<h5
281+
class="text-2xl leading-relaxed font-semibold text-violet-900 transition duration-300 ease-in-out will-change-transform group-hover:translate-x-0.5 dark:text-violet-400"
282+
>
283+
Laracon Ticket
284+
</h5>
285+
{{-- Illustration --}}
286+
<img
287+
src="{{ Vite::asset('resources/images/prizes/3d_purple_tickets.webp') }}"
288+
alt=""
289+
loading="lazy"
290+
class="pointer-events-none h-16 transition duration-300 ease-in-out will-change-transform select-none group-hover:-translate-x-0.5"
291+
/>
292+
{{-- Shiny circle --}}
293+
<div
294+
class="absolute -top-40 -right-40 -z-10 size-80 rounded-full bg-gradient-to-t from-white/5 to-white/50 dark:from-transparent dark:to-violet-500/65 dark:blur-2xl"
295+
></div>
296+
</div>
291297

292-
{{-- Shiny circle --}}
293-
<div
294-
class="absolute -top-40 -right-40 -z-10 size-80 rounded-full bg-gradient-to-t from-white/5 to-white/50 dark:from-transparent dark:to-violet-500/65 dark:blur-2xl"
295-
></div>
298+
{{-- Description --}}
299+
<div class="flex flex-col gap-5">
300+
<div class="flex items-center gap-2.5">
301+
<img
302+
src="{{ Vite::asset('resources/images/prizes/gold_medal.webp') }}"
303+
alt=""
304+
class="h-9"
305+
/>
306+
{{-- Title --}}
307+
<h6 class="text-xl font-medium">1st Place</h6>
308+
</div>
309+
</div>
296310
</div>
297-
<div
298-
class="group relative isolate flex w-full max-w-75 items-center gap-5 overflow-hidden rounded-2xl bg-gradient-to-br from-sky-50 to-sky-300 p-8 dark:bg-gradient-to-bl dark:from-white/10 dark:to-white/2"
299-
>
300-
{{-- Title --}}
301-
<h5
302-
class="text-2xl leading-relaxed font-semibold text-sky-900 transition duration-300 ease-in-out will-change-transform group-hover:translate-x-0.5 dark:text-sky-300"
311+
<div class="flex flex-col items-center gap-4">
312+
{{-- Card --}}
313+
<div
314+
class="group relative isolate flex w-full max-w-75 items-center gap-5 overflow-hidden rounded-2xl bg-gradient-to-br from-sky-50 to-sky-300 p-8 dark:bg-gradient-to-bl dark:from-white/10 dark:to-white/2"
303315
>
304-
NativePHP T-Shirt
305-
</h5>
306-
307-
{{-- Illustration --}}
308-
<img
309-
src="{{ Vite::asset('resources/images/prizes/nativephp_black_shirt.webp') }}"
310-
alt=""
311-
loading="lazy"
312-
class="pointer-events-none -mb-20 h-40 transition duration-300 ease-in-out will-change-transform select-none group-hover:-translate-x-0.5 dark:contrast-120"
313-
/>
316+
{{-- Title --}}
317+
<h5
318+
class="text-2xl leading-relaxed font-semibold text-sky-900 transition duration-300 ease-in-out will-change-transform group-hover:translate-x-0.5 dark:text-sky-300"
319+
>
320+
NativePHP T-Shirt
321+
</h5>
322+
{{-- Illustration --}}
323+
<img
324+
src="{{ Vite::asset('resources/images/prizes/nativephp_black_shirt.webp') }}"
325+
alt=""
326+
loading="lazy"
327+
class="pointer-events-none -mb-20 h-40 transition duration-300 ease-in-out will-change-transform select-none group-hover:-translate-x-0.5 dark:contrast-120"
328+
/>
329+
{{-- Shiny circle --}}
330+
<div
331+
class="absolute -top-40 -right-40 -z-10 size-80 rounded-full bg-gradient-to-t from-white/5 to-white/50 dark:from-transparent dark:to-sky-500/65 dark:blur-2xl"
332+
></div>
333+
</div>
314334

315-
{{-- Shiny circle --}}
316-
<div
317-
class="absolute -top-40 -right-40 -z-10 size-80 rounded-full bg-gradient-to-t from-white/5 to-white/50 dark:from-transparent dark:to-sky-500/65 dark:blur-2xl"
318-
></div>
335+
{{-- Description --}}
336+
<div class="flex flex-col gap-5">
337+
<div class="flex items-center gap-2.5">
338+
<img
339+
src="{{ Vite::asset('resources/images/prizes/gold_medal.webp') }}"
340+
alt=""
341+
class="h-9"
342+
/>
343+
{{-- Title --}}
344+
<h6 class="text-xl font-medium">1st Place</h6>
345+
</div>
346+
<div class="flex items-center gap-2.5">
347+
<img
348+
src="{{ Vite::asset('resources/images/prizes/silver_medal.webp') }}"
349+
alt=""
350+
class="h-9"
351+
/>
352+
{{-- Title --}}
353+
<h6 class="text-xl font-medium">2nd Place</h6>
354+
</div>
355+
</div>
319356
</div>
320-
<div
321-
class="group relative isolate flex w-full max-w-75 items-center gap-5 overflow-hidden rounded-2xl bg-gradient-to-br from-orange-50 to-orange-300 p-8 dark:bg-gradient-to-bl dark:from-white/10 dark:to-white/2"
322-
>
323-
{{-- Title --}}
324-
<h5
325-
class="text-2xl leading-relaxed font-semibold text-orange-900 transition duration-300 ease-in-out will-change-transform group-hover:translate-x-0.5 dark:text-orange-400"
357+
<div class="flex flex-col items-center gap-4">
358+
<div
359+
class="group relative isolate flex w-full max-w-75 items-center gap-5 overflow-hidden rounded-2xl bg-gradient-to-br from-orange-50 to-orange-300 p-8 dark:bg-gradient-to-bl dark:from-white/10 dark:to-white/2"
326360
>
327-
NativePHP License
328-
</h5>
329-
330-
{{-- Illustration --}}
331-
<img
332-
src="{{ Vite::asset('resources/images/prizes/3d_license_document.webp') }}"
333-
alt=""
334-
loading="lazy"
335-
class="pointer-events-none h-22 transition duration-300 ease-in-out will-change-transform select-none group-hover:-translate-x-0.5"
336-
/>
361+
{{-- Title --}}
362+
<h5
363+
class="text-2xl leading-relaxed font-semibold text-orange-900 transition duration-300 ease-in-out will-change-transform group-hover:translate-x-0.5 dark:text-orange-400"
364+
>
365+
NativePHP License
366+
</h5>
367+
{{-- Illustration --}}
368+
<img
369+
src="{{ Vite::asset('resources/images/prizes/3d_license_document.webp') }}"
370+
alt=""
371+
loading="lazy"
372+
class="pointer-events-none h-22 transition duration-300 ease-in-out will-change-transform select-none group-hover:-translate-x-0.5"
373+
/>
374+
{{-- Shiny circle --}}
375+
<div
376+
class="absolute -top-40 -right-40 -z-10 size-80 rounded-full bg-gradient-to-t from-white/5 to-white/50 dark:from-transparent dark:to-orange-500/65 dark:blur-2xl"
377+
></div>
378+
</div>
337379

338-
{{-- Shiny circle --}}
339-
<div
340-
class="absolute -top-40 -right-40 -z-10 size-80 rounded-full bg-gradient-to-t from-white/5 to-white/50 dark:from-transparent dark:to-orange-500/65 dark:blur-2xl"
341-
></div>
380+
{{-- Description --}}
381+
<div class="flex flex-col gap-5">
382+
<div class="flex items-center gap-2.5">
383+
<img
384+
src="{{ Vite::asset('resources/images/prizes/gold_medal.webp') }}"
385+
alt=""
386+
class="h-9"
387+
/>
388+
{{-- Title --}}
389+
<h6 class="text-xl font-medium">1st Place</h6>
390+
</div>
391+
<div class="flex items-center gap-2.5">
392+
<img
393+
src="{{ Vite::asset('resources/images/prizes/silver_medal.webp') }}"
394+
alt=""
395+
class="h-9"
396+
/>
397+
{{-- Title --}}
398+
<h6 class="text-xl font-medium">2nd Place</h6>
399+
</div>
400+
<div class="flex items-center gap-2.5">
401+
<img
402+
src="{{ Vite::asset('resources/images/prizes/bronze_medal.webp') }}"
403+
alt=""
404+
class="h-9"
405+
/>
406+
{{-- Title --}}
407+
<h6 class="text-xl font-medium">3rd Place</h6>
408+
</div>
409+
</div>
342410
</div>
343411
</div>
344412
</section>

0 commit comments

Comments
 (0)