Skip to content

Commit bc3eb6e

Browse files
HassanZahirniaHassanZahirnia
committed
✨ Enhance footer navigation with improved animations and accessibility; update hurricane color in Tailwind config
1 parent 925dfba commit bc3eb6e

File tree

2 files changed

+103
-19
lines changed

2 files changed

+103
-19
lines changed

‎resources/views/components/footer.blade.php‎

Lines changed: 102 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -302,132 +302,216 @@ class="w-[1.6rem]"
302302

303303
{{-- Right side links --}}
304304
<nav
305+
x-init="
306+
() => {
307+
if (reducedMotion) return
308+
motion.inView($el, (element) => {
309+
motion.animate(
310+
$refAll('linkItem'),
311+
{
312+
x: [-10, 0],
313+
opacity: [0, 1],
314+
},
315+
{
316+
duration: 0.7,
317+
ease: motion.backOut,
318+
delay: motion.stagger(0.05),
319+
},
320+
)
321+
})
322+
}
323+
"
305324
class="flex flex-1 flex-wrap justify-center gap-x-10 gap-y-3 lg:justify-around"
306325
aria-label="Footer navigation"
307326
>
327+
{{-- First column --}}
308328
<div class="flex grow flex-col items-start gap-1 sm:grow-0">
309-
<h2 class="font-afacad text-xl font-medium text-midnight">
329+
<h2
330+
x-ref="linkItem"
331+
class="font-afacad text-xl font-medium text-midnight opacity-0 motion-reduce:opacity-100"
332+
>
310333
Explore
311334
</h2>
312335
<ul
313-
class="flex flex-col items-start text-sm *:inline-block *:px-px *:py-1.5 *:text-hurricane *:transition *:duration-300 *:will-change-transform hover:*:translate-x-1 hover:*:text-black motion-reduce:*:transition-none motion-reduce:*:hover:transform-none"
336+
x-ref="linkItem"
337+
class="flex flex-col items-start text-sm opacity-0 motion-reduce:opacity-100"
314338
>
315-
<li>
339+
<li
340+
x-ref="linkItem"
341+
class="opacity-0 motion-reduce:opacity-100"
342+
>
316343
<a
317344
href="{{ route('home') }}"
318345
aria-label="Go to homepage"
346+
class="inline-block px-px py-1.5 text-hurricane transition duration-300 will-change-transform hover:translate-x-1 hover:text-black motion-reduce:transition-none motion-reduce:hover:transform-none"
319347
>
320348
Home
321349
</a>
322350
</li>
323-
<li>
351+
<li
352+
x-ref="linkItem"
353+
class="opacity-0 motion-reduce:opacity-100"
354+
>
324355
<a
325356
href="{{ route('docs') }}"
326357
aria-label="View documentation"
358+
class="inline-block px-px py-1.5 text-hurricane transition duration-300 will-change-transform hover:translate-x-1 hover:text-black motion-reduce:transition-none motion-reduce:hover:transform-none"
327359
>
328360
Documentation
329361
</a>
330362
</li>
331-
<li>
363+
<li
364+
x-ref="linkItem"
365+
class="opacity-0 motion-reduce:opacity-100"
366+
>
332367
<a
333368
href="{{ route('api-docs') }}"
334369
aria-label="View PHP API documentation"
370+
class="inline-block px-px py-1.5 text-hurricane transition duration-300 will-change-transform hover:translate-x-1 hover:text-black motion-reduce:transition-none motion-reduce:hover:transform-none"
335371
>
336372
PHP API Documentation
337373
</a>
338374
</li>
339-
<li>
375+
<li
376+
x-ref="linkItem"
377+
class="opacity-0 motion-reduce:opacity-100"
378+
>
340379
<a
341380
href="{{ route('use-cases.admin-panel') }}"
342381
aria-label="Learn how to build an admin panel"
382+
class="inline-block px-px py-1.5 text-hurricane transition duration-300 will-change-transform hover:translate-x-1 hover:text-black motion-reduce:transition-none motion-reduce:hover:transform-none"
343383
>
344384
Build an Admin Panel
345385
</a>
346386
</li>
347387
</ul>
348388
</div>
389+
390+
{{-- Second column --}}
349391
<div class="flex grow flex-col items-start gap-1 sm:grow-0">
350-
<h2 class="font-afacad text-xl font-medium text-midnight">
392+
<h2
393+
x-ref="linkItem"
394+
class="font-afacad text-xl font-medium text-midnight opacity-0 motion-reduce:opacity-100"
395+
>
351396
Community
352397
</h2>
353398
<ul
354-
class="flex flex-col items-start text-sm *:inline-block *:px-px *:py-1.5 *:text-hurricane *:transition *:duration-300 *:will-change-transform hover:*:translate-x-1 hover:*:text-black motion-reduce:*:transition-none motion-reduce:*:hover:transform-none"
399+
x-ref="linkItem"
400+
class="flex flex-col items-start text-sm opacity-0 motion-reduce:opacity-100"
355401
>
356-
<li>
402+
<li
403+
x-ref="linkItem"
404+
class="opacity-0 motion-reduce:opacity-100"
405+
>
357406
<a
358407
href="{{ route('plugins') }}"
359408
aria-label="Browse available plugins"
409+
class="inline-block px-px py-1.5 text-hurricane transition duration-300 will-change-transform hover:translate-x-1 hover:text-black motion-reduce:transition-none motion-reduce:hover:transform-none"
360410
>
361411
Plugins
362412
</a>
363413
</li>
364-
<li>
414+
<li
415+
x-ref="linkItem"
416+
class="opacity-0 motion-reduce:opacity-100"
417+
>
365418
<a
366419
href="{{ route('articles') }}"
367420
aria-label="Read articles and tutorials"
421+
class="inline-block px-px py-1.5 text-hurricane transition duration-300 will-change-transform hover:translate-x-1 hover:text-black motion-reduce:transition-none motion-reduce:hover:transform-none"
368422
>
369423
Content
370424
</a>
371425
</li>
372-
<li>
426+
<li
427+
x-ref="linkItem"
428+
class="opacity-0 motion-reduce:opacity-100"
429+
>
373430
<a
374431
href="{{ route('team') }}"
375432
aria-label="Learn about the Filament team members"
433+
class="inline-block px-px py-1.5 text-hurricane transition duration-300 will-change-transform hover:translate-x-1 hover:text-black motion-reduce:transition-none motion-reduce:hover:transform-none"
376434
>
377435
Meet Our Team
378436
</a>
379437
</li>
380-
<li>
438+
<li
439+
x-ref="linkItem"
440+
class="opacity-0 motion-reduce:opacity-100"
441+
>
381442
<a
382443
href="https://github.com/filamentphp/filament?sponsor=1"
383444
target="_blank"
384445
rel="noopener"
385446
aria-label="Sponsor Filament on GitHub"
447+
class="inline-block px-px py-1.5 text-hurricane transition duration-300 will-change-transform hover:translate-x-1 hover:text-black motion-reduce:transition-none motion-reduce:hover:transform-none"
386448
>
387449
Sponsor
388450
</a>
389451
</li>
390452
</ul>
391453
</div>
454+
455+
{{-- Third column --}}
392456
<div class="flex grow flex-col items-start gap-1 sm:grow-0">
393-
<h2 class="font-afacad text-xl font-medium text-midnight">
457+
<h2
458+
x-ref="linkItem"
459+
class="font-afacad text-xl font-medium text-midnight opacity-0 motion-reduce:opacity-100"
460+
>
394461
Support
395462
</h2>
396463
<ul
397-
class="flex flex-col items-start text-sm *:inline-block *:px-px *:py-1.5 *:text-hurricane *:transition *:duration-300 *:will-change-transform hover:*:translate-x-1 hover:*:text-black motion-reduce:*:transition-none motion-reduce:*:hover:transform-none"
464+
x-ref="linkItem"
465+
class="flex flex-col items-start text-sm opacity-0 motion-reduce:opacity-100"
398466
>
399-
<li>
467+
<li
468+
x-ref="linkItem"
469+
class="opacity-0 motion-reduce:opacity-100"
470+
>
400471
<a
401472
href="https://shop.filamentphp.com"
402473
aria-label="Visit the Filament shop"
474+
class="inline-block px-px py-1.5 text-hurricane transition duration-300 will-change-transform hover:translate-x-1 hover:text-black motion-reduce:transition-none motion-reduce:hover:transform-none"
403475
>
404476
Shop
405477
</a>
406478
</li>
407-
<li>
479+
<li
480+
x-ref="linkItem"
481+
class="opacity-0 motion-reduce:opacity-100"
482+
>
408483
<a
409484
href="https://status.filamentphp.com"
410485
target="_blank"
411486
rel="noopener"
412487
aria-label="Check Filament service status"
488+
class="inline-block px-px py-1.5 text-hurricane transition duration-300 will-change-transform hover:translate-x-1 hover:text-black motion-reduce:transition-none motion-reduce:hover:transform-none"
413489
>
414490
Status
415491
</a>
416492
</li>
417-
<li>
493+
<li
494+
x-ref="linkItem"
495+
class="opacity-0 motion-reduce:opacity-100"
496+
>
418497
<a
419498
href="https://github.com/filamentphp/filament/discussions/new"
420499
target="_blank"
421500
rel="noopener"
422501
aria-label="Get help with Filament"
502+
class="inline-block px-px py-1.5 text-hurricane transition duration-300 will-change-transform hover:translate-x-1 hover:text-black motion-reduce:transition-none motion-reduce:hover:transform-none"
423503
>
424504
Help
425505
</a>
426506
</li>
427-
<li>
507+
<li
508+
x-ref="linkItem"
509+
class="opacity-0 motion-reduce:opacity-100"
510+
>
428511
<a
429512
href="{{ route('consulting') }}"
430513
aria-label="Learn about consulting services"
514+
class="inline-block px-px py-1.5 text-hurricane transition duration-300 will-change-transform hover:translate-x-1 hover:text-black motion-reduce:transition-none motion-reduce:hover:transform-none"
431515
>
432516
Consulting
433517
</a>

‎tailwind.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default {
2121
midnight: '#0F033A',
2222
evening: '#251A4D',
2323
merino: '#F2E7DD',
24-
hurricane: '#807575',
24+
hurricane: '#7E7474',
2525
dolphin: '#6C6489',
2626
'burnt-dolphin': '#454059',
2727
'peach-orange': '#FFC497',

0 commit comments

Comments
 (0)