Skip to content

Commit 3f176b6

Browse files
HassanZahirniaHassanZahirnia
committed
✨ Enhance hero section with animated meteor and rocket effects
1 parent 18369f9 commit 3f176b6

File tree

1 file changed

+143
-2
lines changed

1 file changed

+143
-2
lines changed

‎resources/views/components/home/hero.blade.php‎

Lines changed: 143 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -335,14 +335,151 @@ class="mx-auto max-w-xl pt-5 text-center font-afacad text-2xl leading-normal tex
335335
class="group inline-flex items-center gap-3 rounded-3xl bg-[#F4E7E2] py-2 pl-2 pr-5 text-lg font-medium transition duration-300 ease-in-out hover:bg-[#ffe8ce]"
336336
>
337337
<div
338-
class="grid size-12 place-items-center rounded-2xl bg-[#E6DAD6] transition duration-300 ease-in-out group-hover:bg-[#ffdeb3]"
338+
class="relative isolate grid size-12 place-items-center overflow-hidden rounded-2xl bg-[#E6DAD6] transition duration-300 ease-in-out group-hover:bg-[#ffdeb3]"
339339
>
340+
{{-- Left meteor 1 --}}
341+
<div
342+
x-init="
343+
() => {
344+
gsap.to($el, {
345+
duration: 1.5,
346+
x: -80,
347+
y: 80,
348+
ease: 'power1.in',
349+
repeat: -1,
350+
repeatDelay: 0.5,
351+
})
352+
}
353+
"
354+
class="absolute -right-5 -top-9 -z-10"
355+
>
356+
<svg
357+
xmlns="http://www.w3.org/2000/svg"
358+
width="18"
359+
height="17"
360+
viewBox="0 0 18 17"
361+
fill="none"
362+
>
363+
<path
364+
d="M17.4801 0L0.610057 15.82C0.610057 15.82 0.280057 16.27 0.700057 16.71C1.11006 17.15 1.65006 16.77 1.65006 16.77L17.4801 0Z"
365+
fill="black"
366+
/>
367+
</svg>
368+
</div>
369+
370+
{{-- Left meteor 2 --}}
371+
<div
372+
x-init="
373+
() => {
374+
gsap.to($el, {
375+
duration: 1.5,
376+
x: -80,
377+
y: 80,
378+
ease: 'power1.in',
379+
repeat: -1,
380+
repeatDelay: 0.5,
381+
delay: 1,
382+
})
383+
}
384+
"
385+
class="absolute -right-5 -top-7 -z-10"
386+
>
387+
<svg
388+
xmlns="http://www.w3.org/2000/svg"
389+
width="18"
390+
height="17"
391+
viewBox="0 0 18 17"
392+
fill="none"
393+
class="scale-75 opacity-50"
394+
>
395+
<path
396+
d="M17.4801 0L0.610057 15.82C0.610057 15.82 0.280057 16.27 0.700057 16.71C1.11006 17.15 1.65006 16.77 1.65006 16.77L17.4801 0Z"
397+
fill="black"
398+
/>
399+
</svg>
400+
</div>
401+
{{-- Right meteor 1 --}}
402+
<div
403+
x-init="
404+
() => {
405+
gsap.to($el, {
406+
duration: 1.5,
407+
x: -80,
408+
y: 80,
409+
ease: 'power1.in',
410+
repeat: -1,
411+
repeatDelay: 0.5,
412+
})
413+
}
414+
"
415+
class="absolute -right-5 top-0 -z-10"
416+
>
417+
<svg
418+
xmlns="http://www.w3.org/2000/svg"
419+
width="18"
420+
height="17"
421+
viewBox="0 0 18 17"
422+
fill="none"
423+
>
424+
<path
425+
d="M17.4801 0L0.610057 15.82C0.610057 15.82 0.280057 16.27 0.700057 16.71C1.11006 17.15 1.65006 16.77 1.65006 16.77L17.4801 0Z"
426+
fill="black"
427+
/>
428+
</svg>
429+
</div>
430+
{{-- Right meteor 2 --}}
431+
<div
432+
x-init="
433+
() => {
434+
gsap.to($el, {
435+
duration: 1.5,
436+
x: -80,
437+
y: 80,
438+
ease: 'power1.in',
439+
repeat: -1,
440+
repeatDelay: 0.5,
441+
delay: 1,
442+
})
443+
}
444+
"
445+
class="absolute -right-5 top-3 -z-10"
446+
>
447+
<svg
448+
xmlns="http://www.w3.org/2000/svg"
449+
width="18"
450+
height="17"
451+
viewBox="0 0 18 17"
452+
fill="none"
453+
class="scale-75 opacity-50"
454+
>
455+
<path
456+
d="M17.4801 0L0.610057 15.82C0.610057 15.82 0.280057 16.27 0.700057 16.71C1.11006 17.15 1.65006 16.77 1.65006 16.77L17.4801 0Z"
457+
fill="black"
458+
/>
459+
</svg>
460+
</div>
461+
{{-- Rocket --}}
340462
<svg
463+
x-init="
464+
() => {
465+
gsap.to($el, {
466+
duration: 1.5,
467+
x: 3,
468+
y: 3,
469+
rotate: 2,
470+
scale: 1.02,
471+
ease: 'power1.inOut',
472+
repeat: -1,
473+
yoyo: true,
474+
})
475+
}
476+
"
341477
xmlns="http://www.w3.org/2000/svg"
342478
width="25"
343479
height="25"
344480
viewBox="0 0 25 25"
345481
fill="none"
482+
class="will-change-transform"
346483
>
347484
<path
348485
d="M17.627 11.7676V17.4118C17.6269 17.6058 17.5498 17.7918 17.4127 17.9291L14.2679 21.0739C14.1717 21.17 14.0507 21.2372 13.9183 21.2684C13.786 21.2995 13.6476 21.2932 13.5186 21.2502C13.3897 21.2071 13.2753 21.129 13.1882 21.0247C13.1012 20.9203 13.0448 20.7938 13.0255 20.6592L12.5 16.8945L17.627 11.7676ZM13.2324 7.37305H7.58822C7.39423 7.37314 7.20819 7.45018 7.07095 7.58728L3.92611 10.7321C3.83009 10.8283 3.76275 10.9494 3.73163 11.0818C3.70049 11.2141 3.70681 11.3524 3.74984 11.4814C3.79289 11.6103 3.87097 11.7247 3.97535 11.8118C4.07973 11.899 4.20628 11.9553 4.34084 11.9745L8.10549 12.5L13.2324 7.37305ZM4.44338 20.5566C7.89034 20.5566 9.08419 18.754 9.4385 17.9767L7.02334 15.5615C6.24606 15.9158 4.44338 17.1097 4.44338 20.5566Z"
@@ -354,7 +491,11 @@ class="grid size-12 place-items-center rounded-2xl bg-[#E6DAD6] transition durat
354491
/>
355492
</svg>
356493
</div>
357-
<div>Get Started</div>
494+
<div
495+
class="transition duration-300 ease-in-out will-change-transform group-hover:translate-x-px"
496+
>
497+
Get Started
498+
</div>
358499
</a>
359500
</div>
360501
</section>

0 commit comments

Comments
 (0)