Skip to content

Commit fb4622d

Browse files
HassanZahirniaHassanZahirnia
committed
✨ Replace SVG play button with reusable component and improve layout in video section
1 parent 4f846b5 commit fb4622d

File tree

2 files changed

+19
-36
lines changed

2 files changed

+19
-36
lines changed

‎resources/views/components/icons/play-button.blade.php

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<svg
2+
{{ $attributes }}
3+
xmlns="http://www.w3.org/2000/svg"
4+
viewBox="0 0 17 22"
5+
fill="none"
6+
>
7+
<path
8+
fill-rule="evenodd"
9+
clip-rule="evenodd"
10+
d="M3.69143 0.285087C2.05005 -0.569218 0 0.584286 0 2.57588V19.4241C0 21.4158 2.05005 22.5692 3.69143 21.7149C5.89832 20.5663 9.15122 18.7792 11.8609 16.9047C13.2129 15.9695 14.4582 14.9932 15.3743 14.0457C15.8326 13.5718 16.228 13.0853 16.5129 12.5954C16.7949 12.1104 17 11.5686 17 11C17 10.4314 16.7949 9.88956 16.5129 9.40462C16.228 8.91473 15.8326 8.42821 15.3743 7.95433C14.4582 7.00681 13.2129 6.03045 11.8609 5.09525C9.15122 3.22087 5.89832 1.43373 3.69143 0.285087Z"
11+
fill="currentColor"
12+
/>
13+
</svg>

‎resources/views/welcome.blade.php

Lines changed: 6 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ class="-mb-1.5 size-1 rounded-full bg-white ring-[3px] ring-black dark:bg-black/
210210
class="relative -top-5 grid size-10 place-items-center rounded-full bg-black/30 text-white ring-1 ring-white/10 backdrop-blur transition duration-300 ease-in-out will-change-transform group-hover:scale-110 group-hover:text-[#d4fd7d] dark:group-hover:text-[#9c90f0]"
211211
aria-label="Watch NativePHP introduction video on YouTube"
212212
>
213-
<svg
213+
<x-icons.play-button
214214
x-init="
215215
() => {
216216
motion.animate(
@@ -227,19 +227,9 @@ class="relative -top-5 grid size-10 place-items-center rounded-full bg-black/30
227227
)
228228
}
229229
"
230-
xmlns="http://www.w3.org/2000/svg"
231230
class="size-4"
232-
viewBox="0 0 17 22"
233-
fill="none"
234231
aria-hidden="true"
235-
>
236-
<path
237-
fill-rule="evenodd"
238-
clip-rule="evenodd"
239-
d="M3.69143 0.285087C2.05005 -0.569218 0 0.584286 0 2.57588V19.4241C0 21.4158 2.05005 22.5692 3.69143 21.7149C5.89832 20.5663 9.15122 18.7792 11.8609 16.9047C13.2129 15.9695 14.4582 14.9932 15.3743 14.0457C15.8326 13.5718 16.228 13.0853 16.5129 12.5954C16.7949 12.1104 17 11.5686 17 11C17 10.4314 16.7949 9.88956 16.5129 9.40462C16.228 8.91473 15.8326 8.42821 15.3743 7.95433C14.4582 7.00681 13.2129 6.03045 11.8609 5.09525C9.15122 3.22087 5.89832 1.43373 3.69143 0.285087Z"
240-
fill="currentColor"
241-
/>
242-
</svg>
232+
/>
243233
<span class="sr-only">Play introduction video</span>
244234
</a>
245235
</div>
@@ -332,7 +322,7 @@ class="group relative"
332322
class="absolute right-1/2 top-1/2 grid size-16 -translate-y-1/2 translate-x-1/2 place-items-center rounded-full bg-white/10 text-white ring-1 ring-white/10 backdrop-blur transition duration-300 ease-in-out will-change-transform group-hover:scale-110 group-hover:text-[#d4fd7d]"
333323
aria-hidden="true"
334324
>
335-
<svg
325+
<x-icons.play-button
336326
x-init="
337327
() => {
338328
motion.animate(
@@ -349,19 +339,9 @@ class="absolute right-1/2 top-1/2 grid size-16 -translate-y-1/2 translate-x-1/2
349339
)
350340
}
351341
"
352-
xmlns="http://www.w3.org/2000/svg"
353342
class="size-7"
354-
viewBox="0 0 17 22"
355-
fill="none"
356343
aria-hidden="true"
357-
>
358-
<path
359-
fill-rule="evenodd"
360-
clip-rule="evenodd"
361-
d="M3.69143 0.285087C2.05005 -0.569218 0 0.584286 0 2.57588V19.4241C0 21.4158 2.05005 22.5692 3.69143 21.7149C5.89832 20.5663 9.15122 18.7792 11.8609 16.9047C13.2129 15.9695 14.4582 14.9932 15.3743 14.0457C15.8326 13.5718 16.228 13.0853 16.5129 12.5954C16.7949 12.1104 17 11.5686 17 11C17 10.4314 16.7949 9.88956 16.5129 9.40462C16.228 8.91473 15.8326 8.42821 15.3743 7.95433C14.4582 7.00681 13.2129 6.03045 11.8609 5.09525C9.15122 3.22087 5.89832 1.43373 3.69143 0.285087Z"
362-
fill="currentColor"
363-
/>
364-
</svg>
344+
/>
365345
<span class="sr-only">Play video</span>
366346
</div>
367347
{{-- Image --}}
@@ -1106,7 +1086,7 @@ class="group relative"
11061086
class="absolute right-1/2 top-1/2 grid size-16 -translate-y-1/2 translate-x-1/2 place-items-center rounded-full bg-white/10 text-white ring-1 ring-white/10 backdrop-blur transition duration-300 ease-in-out will-change-transform group-hover:scale-110 group-hover:text-[#d4fd7d]"
11071087
aria-hidden="true"
11081088
>
1109-
<svg
1089+
<x-icons.play-button
11101090
x-init="
11111091
() => {
11121092
motion.animate(
@@ -1123,19 +1103,9 @@ class="absolute right-1/2 top-1/2 grid size-16 -translate-y-1/2 translate-x-1/2
11231103
)
11241104
}
11251105
"
1126-
xmlns="http://www.w3.org/2000/svg"
11271106
class="size-7"
1128-
viewBox="0 0 17 22"
1129-
fill="none"
11301107
aria-hidden="true"
1131-
>
1132-
<path
1133-
fill-rule="evenodd"
1134-
clip-rule="evenodd"
1135-
d="M3.69143 0.285087C2.05005 -0.569218 0 0.584286 0 2.57588V19.4241C0 21.4158 2.05005 22.5692 3.69143 21.7149C5.89832 20.5663 9.15122 18.7792 11.8609 16.9047C13.2129 15.9695 14.4582 14.9932 15.3743 14.0457C15.8326 13.5718 16.228 13.0853 16.5129 12.5954C16.7949 12.1104 17 11.5686 17 11C17 10.4314 16.7949 9.88956 16.5129 9.40462C16.228 8.91473 15.8326 8.42821 15.3743 7.95433C14.4582 7.00681 13.2129 6.03045 11.8609 5.09525C9.15122 3.22087 5.89832 1.43373 3.69143 0.285087Z"
1136-
fill="currentColor"
1137-
/>
1138-
</svg>
1108+
/>
11391109
<span class="sr-only">Play video</span>
11401110
</div>
11411111
{{-- Image --}}

0 commit comments

Comments
 (0)