Skip to content

Commit 17614dc

Browse files
HassanZahirniaHassanZahirnia
authored
💄 Update the "Get Started" button on the home page (#159)
* ✨ Update call to action buttons for desktop and mobile documentation * ✨ Enhance call to action buttons with animations for desktop and mobile documentation * ✨ Improve call to action buttons with hover effects and animations for desktop and mobile
1 parent 744b0b2 commit 17614dc

File tree

1 file changed

+137
-81
lines changed

1 file changed

+137
-81
lines changed

‎resources/views/welcome.blade.php

Lines changed: 137 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -407,110 +407,166 @@ class="inline-block font-medium text-[#F53003] transition duration-200 will-chan
407407
</p>
408408

409409
{{-- Call to Action Button --}}
410-
<div class="grid place-items-center pt-5">
411-
<a
410+
<div
411+
class="mt-10 flex flex-wrap-reverse items-center justify-center gap-4 sm:flex-nowrap"
412+
x-data="{ desktopHover: false, mobileHover: false }"
413+
>
414+
{{-- Desktop --}}
415+
<div
412416
x-init="
413417
() => {
414418
motion.animate(
415419
$el,
416420
{
417-
scale: [0, 1],
418421
opacity: [0, 1],
422+
x: [10, 0],
419423
},
420424
{
421-
duration: 0.8,
422-
ease: motion.backOut,
425+
duration: 1,
426+
ease: motion.easeOut,
423427
},
424428
)
425429
}
426430
"
427-
href="/docs/"
428-
class="group isolate z-0 grid place-items-center leading-snug text-white will-change-transform"
429-
aria-label="Get started with NativePHP documentation"
431+
class="w-full max-w-64"
430432
>
431-
{{-- Label --}}
432433
<div
433-
class="z-10 grid place-items-center gap-1.5 self-center justify-self-center [grid-area:1/-1]"
434+
class="transition duration-300"
435+
:class="{ 'opacity-60 grayscale': mobileHover }"
434436
>
435-
<div>Get</div>
436-
<div>Started</div>
437-
438-
{{-- Arrow --}}
439-
<div
440-
x-init="
441-
() => {
442-
motion.animate(
443-
$el,
444-
{
445-
x: [0, 5],
446-
},
447-
{
448-
duration: 0.8,
449-
repeat: Infinity,
450-
repeatType: 'mirror',
451-
ease: motion.easeInOut,
452-
},
453-
)
454-
}
455-
"
456-
aria-hidden="true"
437+
<a
438+
href="/docs/desktop/1"
439+
class="group relative isolate z-0 flex h-16 items-center justify-between gap-3 overflow-hidden rounded-2xl bg-[#EBEDF2] pl-5 pr-6 leading-snug transition duration-200 ease-in-out will-change-transform hover:bg-[#e5d6ff] dark:bg-haiti dark:hover:bg-indigo-900/60"
440+
aria-label="Get started with NativePHP documentation for desktop apps"
441+
x-on:mouseenter="desktopHover = true"
442+
x-on:mouseleave="desktopHover = false"
457443
>
458-
<svg
459-
xmlns="http://www.w3.org/2000/svg"
460-
viewBox="0 0 15 11"
461-
fill="none"
462-
class="mt-1 w-5 text-[#DBDAE8] transition duration-300 ease-out group-hover:text-violet-400"
463-
aria-hidden="true"
444+
{{-- Arrow --}}
445+
<div class="flex items-center gap-1">
446+
<div
447+
class="size-1 rounded-full bg-current transition duration-500 ease-in-out will-change-transform group-hover:translate-x-2 group-hover:translate-y-1.5 group-hover:opacity-50"
448+
></div>
449+
<div class="flex flex-col gap-2">
450+
<div
451+
class="size-1 rounded-full bg-current opacity-50 transition duration-500 ease-in-out will-change-transform group-hover:-translate-x-2 group-hover:translate-y-1.5 group-hover:opacity-100"
452+
></div>
453+
<div
454+
class="size-1 rounded-full bg-current opacity-50 transition duration-500 ease-in-out will-change-transform group-hover:-translate-y-3"
455+
></div>
456+
</div>
457+
</div>
458+
{{-- Label --}}
459+
<div
460+
class="flex items-center gap-3 duration-500 ease-in-out will-change-transform group-hover:-translate-x-1"
464461
>
465-
<path
466-
d="M1 4.8C0.613401 4.8 0.3 5.1134 0.3 5.5C0.3 5.8866 0.613401 6.2 1 6.2L1 4.8ZM14.495 5.99498C14.7683 5.72161 14.7683 5.27839 14.495 5.00503L10.0402 0.550253C9.76684 0.276886 9.32362 0.276886 9.05025 0.550253C8.77689 0.823621 8.77689 1.26684 9.05025 1.5402L13.0101 5.5L9.05025 9.4598C8.77689 9.73317 8.77689 10.1764 9.05025 10.4497C9.32362 10.7231 9.76683 10.7231 10.0402 10.4497L14.495 5.99498ZM1 6.2L14 6.2L14 4.8L1 4.8L1 6.2Z"
467-
fill="currentColor"
468-
/>
469-
</svg>
470-
</div>
462+
<div>Desktop</div>
463+
<x-icons.pc class="size-7 shrink-0" />
464+
</div>
465+
</a>
471466
</div>
467+
</div>
472468

473-
{{-- Shape --}}
469+
{{-- Mobile --}}
470+
<div
471+
x-init="
472+
() => {
473+
motion.animate(
474+
$el,
475+
{
476+
opacity: [0, 1],
477+
x: [-10, 0],
478+
},
479+
{
480+
duration: 1,
481+
ease: motion.easeOut,
482+
},
483+
)
484+
}
485+
"
486+
class="w-full max-w-64"
487+
>
474488
<div
475-
x-init="
476-
() => {
477-
motion.animate(
478-
$el,
479-
{
480-
rotate: [0, 180],
481-
},
482-
{
483-
duration: 6,
484-
repeat: Infinity,
485-
repeatType: 'loop',
486-
ease: 'linear',
487-
},
488-
)
489-
}
490-
"
491-
class="self-center justify-self-center [grid-area:1/-1]"
492-
aria-hidden="true"
489+
class="transition duration-300"
490+
:class="{ 'opacity-60 grayscale': desktopHover }"
493491
>
494-
<svg
495-
xmlns="http://www.w3.org/2000/svg"
496-
class="size-32 text-black transition duration-500 ease-out will-change-transform group-hover:scale-110 group-hover:text-zinc-900 dark:text-[#181a25] dark:group-hover:text-black"
497-
viewBox="0 0 133 133"
498-
fill="none"
499-
aria-hidden="true"
492+
<a
493+
href="/docs/mobile/1"
494+
class="group relative isolate z-0 flex h-16 items-center justify-between gap-3 overflow-hidden rounded-2xl bg-[#EBEDF2] pl-6 pr-5 leading-snug transition duration-200 ease-in-out will-change-transform hover:bg-[#e5d6ff] dark:bg-haiti dark:hover:bg-indigo-900/50"
495+
aria-label="Get started with NativePHP documentation for mobile apps"
496+
x-on:mouseenter="mobileHover = true"
497+
x-on:mouseleave="mobileHover = false"
500498
>
501-
<path
502-
d="M133 66.5028C133 58.2246 128.093 50.5844 119.798 44.4237C121.305 34.2085 119.374 25.3317 113.518 19.4759C107.663 13.6202 98.7915 11.689 88.5707 13.1967C82.4213 4.9071 74.7811 0 66.5028 0C58.2246 0 50.5844 4.9071 44.4237 13.2023C34.2085 11.6946 25.3317 13.6258 19.4759 19.4816C13.6202 25.3374 11.689 34.2086 13.1967 44.4293C4.9071 50.5787 0 58.2246 0 66.5028C0 74.7811 4.9071 82.4213 13.2023 88.582C11.6946 98.7971 13.6258 107.674 19.4816 113.53C25.3374 119.385 34.2086 121.317 44.4293 119.809C50.5844 128.099 58.2302 133.011 66.5085 133.011C74.7867 133.011 82.4269 128.104 88.5876 119.809C98.8027 121.317 107.68 119.385 113.535 113.53C119.391 107.674 121.322 98.8027 119.815 88.582C128.104 82.4269 133.017 74.7811 133.017 66.5028H133Z"
503-
fill="currentColor"
504-
/>
505-
</svg>
499+
{{-- Label --}}
500+
<div
501+
class="flex items-center gap-3 duration-500 ease-in-out will-change-transform group-hover:translate-x-1"
502+
>
503+
<x-icons.device-mobile-phone
504+
class="size-6 shrink-0"
505+
/>
506+
<div>Mobile</div>
507+
</div>
508+
{{-- Arrow --}}
509+
<div class="flex items-center gap-1">
510+
<div class="flex flex-col gap-2">
511+
<div
512+
class="size-1 rounded-full bg-current opacity-50 transition duration-500 ease-in-out will-change-transform group-hover:translate-x-2 group-hover:translate-y-1.5 group-hover:opacity-100"
513+
></div>
514+
<div
515+
class="size-1 rounded-full bg-current opacity-50 transition duration-500 ease-in-out will-change-transform group-hover:-translate-y-3"
516+
></div>
517+
</div>
518+
<div
519+
class="size-1 rounded-full bg-current transition duration-500 ease-in-out will-change-transform group-hover:-translate-x-2 group-hover:translate-y-1.5 group-hover:opacity-50"
520+
></div>
521+
</div>
522+
{{-- Blue blur --}}
523+
<div
524+
x-init="
525+
() => {
526+
motion.animate(
527+
$el,
528+
{
529+
x: [0, 20, -100, 0],
530+
y: [0, 5, 0],
531+
scale: [1, 0.7, 1],
532+
rotate: [0, 10, 0],
533+
},
534+
{
535+
duration: 10,
536+
repeat: Infinity,
537+
repeatType: 'loop',
538+
ease: motion.easeInOut,
539+
},
540+
)
541+
}
542+
"
543+
class="absolute -bottom-12 left-14 -z-10 h-20 w-44 rounded-full bg-[#D3D3FF] blur-xl will-change-transform dark:bg-blue-500/30"
544+
></div>
545+
{{-- Orange blur --}}
546+
<div
547+
x-init="
548+
() => {
549+
motion.animate(
550+
$el,
551+
{
552+
x: [0, -10, 0],
553+
y: [0, 10, 0],
554+
scale: [1, 1.2, 1],
555+
},
556+
{
557+
duration: 5,
558+
repeat: Infinity,
559+
repeatType: 'loop',
560+
ease: motion.easeInOut,
561+
},
562+
)
563+
}
564+
"
565+
class="absolute -bottom-12 -left-5 -z-20 h-20 w-44 rounded-full bg-[#FFE7D3] blur-xl will-change-transform dark:bg-indigo-500/30"
566+
></div>
567+
</a>
506568
</div>
507-
508-
{{-- Blur --}}
509-
<div
510-
class="hidden size-20 self-center justify-self-center bg-indigo-400/70 blur-3xl [grid-area:1/-1] dark:block"
511-
aria-hidden="true"
512-
></div>
513-
</a>
569+
</div>
514570
</div>
515571
</section>
516572

0 commit comments

Comments
 (0)