Skip to content

Commit 2a158f0

Browse files
HassanZahirniaHassanZahirnia
committed
💄 Add new SVG icons for document, browser, and startup components; enhance explainer section with step-by-step guide for better user engagement
1 parent eaa2baf commit 2a158f0

File tree

4 files changed

+210
-0
lines changed

4 files changed

+210
-0
lines changed

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
class="mt-5"
33
aria-labelledby="sponsors-title"
44
>
5+
{{-- Part 1 --}}
56
<div class="flex flex-col gap-5 lg:flex-row">
67
{{-- How does it work --}}
78
<div
@@ -328,4 +329,67 @@ class="flex flex-wrap items-start gap-x-2.5 gap-y-3 2xl:gap-x-3"
328329
</div>
329330
</div>
330331
</div>
332+
333+
{{-- Part 2 --}}
334+
<div class="mt-5 flex gap-5">
335+
{{-- Left side --}}
336+
<div
337+
class="dark:bg-mirage w-full max-w-md rounded-2xl bg-gray-200/60 p-8 md:p-10"
338+
>
339+
{{-- Header --}}
340+
<div
341+
class="2xs:items-start 2xs:text-left flex flex-col items-center gap-1 text-center text-pretty"
342+
>
343+
<h3 class="text-lg text-gray-600 lg:text-xl dark:text-zinc-400">
344+
Step by step
345+
</h3>
346+
<h2
347+
class="text-xl font-bold text-gray-800 lg:text-2xl dark:text-white"
348+
>
349+
How do I get it?
350+
</h2>
351+
</div>
352+
353+
{{-- Steps --}}
354+
<div class="mt-5 flex flex-col gap-3">
355+
<div
356+
class="flex items-center gap-3 rounded-2xl bg-white/50 p-3 font-medium dark:bg-slate-950/30"
357+
>
358+
<div
359+
class="grid size-10 place-items-center rounded-xl bg-blue-100 dark:bg-blue-500/20"
360+
>
361+
<x-icons.home.document class="size-5" />
362+
</div>
363+
<h6 class="text-gray-400 dark:text-zinc-400">1.</h6>
364+
<h5 class="text-gray-800 dark:text-white">Read the docs</h5>
365+
</div>
366+
<div
367+
class="flex items-center gap-3 rounded-2xl bg-white/50 p-3 font-medium dark:bg-slate-950/30"
368+
>
369+
<div
370+
class="grid size-10 place-items-center rounded-xl bg-violet-100 dark:bg-violet-500/20"
371+
>
372+
<x-icons.home.browser class="size-5" />
373+
</div>
374+
<h6 class="text-gray-400 dark:text-zinc-400">2.</h6>
375+
<h5 class="text-gray-800 dark:text-white">
376+
Install the package.
377+
</h5>
378+
</div>
379+
<div
380+
class="flex items-center gap-3 rounded-2xl bg-white/50 p-3 font-medium dark:bg-slate-950/30"
381+
>
382+
<div
383+
class="grid size-10 place-items-center rounded-xl bg-cyan-100 dark:bg-cyan-500/20"
384+
>
385+
<x-icons.home.startup class="size-5" />
386+
</div>
387+
<h6 class="text-gray-400 dark:text-zinc-400">3.</h6>
388+
<h5 class="text-gray-800 dark:text-white">
389+
Build your app.
390+
</h5>
391+
</div>
392+
</div>
393+
</div>
394+
</div>
331395
</section>

‎resources/views/components/icons/home/browser.blade.php‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<svg
2+
{{ $attributes }}
3+
xmlns="http://www.w3.org/2000/svg"
4+
viewBox="0 0 21 21"
5+
fill="none"
6+
>
7+
<path
8+
d="M2.44403 14.861C2.64958 16.7833 4.19483 18.3294 6.11516 18.5435C9.06482 18.8724 11.9335 18.8724 14.8831 18.5435C16.8035 18.3294 18.3487 16.7833 18.5543 14.861C18.8677 11.9304 18.8677 9.06965 18.5543 6.13893C18.3487 4.21672 16.8035 2.67071 14.8831 2.45655C11.9335 2.1276 9.06482 2.1276 6.11516 2.45655C4.19483 2.67071 2.64958 4.21672 2.44403 6.13893C2.13064 9.06965 2.13064 11.9304 2.44403 14.861Z"
9+
fill="white"
10+
/>
11+
<path
12+
d="M2.44403 14.861C2.64958 16.7833 4.19483 18.3294 6.11516 18.5435C9.06482 18.8724 11.9335 18.8724 14.8831 18.5435C16.8035 18.3294 18.3487 16.7833 18.5543 14.861C18.8677 11.9304 18.8677 9.06965 18.5543 6.13893C18.3487 4.21672 16.8035 2.67071 14.8831 2.45655C11.9335 2.1276 9.06482 2.1276 6.11516 2.45655C4.19483 2.67071 2.64958 4.21672 2.44403 6.13893C2.13064 9.06965 2.13064 11.9304 2.44403 14.861Z"
13+
stroke="#7F22FE"
14+
stroke-width="1.43"
15+
stroke-linecap="round"
16+
stroke-linejoin="round"
17+
/>
18+
<path
19+
d="M18.5918 6.49723H2.40625C2.4186 6.37753 2.43117 6.2581 2.44392 6.13893C2.64947 4.21672 4.19472 2.67071 6.11504 2.45655C9.0647 2.1276 11.9334 2.1276 14.883 2.45655C16.8034 2.67071 18.3487 4.21672 18.5542 6.13893C18.5669 6.2581 18.5795 6.37753 18.5918 6.49723Z"
20+
fill="#DDD6FF"
21+
/>
22+
<path
23+
d="M18.5918 6.49723H2.40625C2.4186 6.37753 2.43117 6.2581 2.44392 6.13893C2.64947 4.21672 4.19472 2.67071 6.11504 2.45655C9.0647 2.1276 11.9334 2.1276 14.883 2.45655C16.8034 2.67071 18.3487 4.21672 18.5542 6.13893C18.5669 6.2581 18.5795 6.37753 18.5918 6.49723Z"
24+
stroke="#7F22FE"
25+
stroke-width="1.43"
26+
stroke-linecap="round"
27+
stroke-linejoin="round"
28+
/>
29+
<path
30+
d="M11.9315 12.3135H15.4749"
31+
stroke="#7F22FE"
32+
stroke-width="1.43"
33+
stroke-linecap="round"
34+
stroke-linejoin="round"
35+
/>
36+
<path
37+
d="M6.29297 14.9968C7.36629 14.4602 8.43961 13.3869 8.97627 12.3136C8.43961 11.2402 7.36629 10.1669 6.29297 9.63025"
38+
stroke="#7F22FE"
39+
stroke-width="1.43"
40+
stroke-linecap="round"
41+
stroke-linejoin="round"
42+
/>
43+
</svg>

‎resources/views/components/icons/home/document.blade.php‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<svg
2+
{{ $attributes }}
3+
xmlns="http://www.w3.org/2000/svg"
4+
viewBox="0 0 21 21"
5+
fill="none"
6+
>
7+
<path
8+
fill-rule="evenodd"
9+
clip-rule="evenodd"
10+
d="M17.4125 2.39445C14.357 2.15444 10.2704 2.14265 7.2276 2.39325C6.60573 2.44447 6.11779 2.93951 6.0675 3.56146C5.80814 6.7693 5.84035 9.93441 6.16412 13.1529V13.6738C8.62109 13.6062 11.2628 13.6843 13.2927 13.9083C12.3444 16.1322 13.3767 18.7236 15.8563 18.7889H16.0375C17.4352 18.7889 18.5962 17.7048 18.6601 16.3087C18.8546 12.0708 18.8311 7.85195 18.59 3.60947C18.5533 2.96602 18.055 2.44492 17.4125 2.39445Z"
11+
fill="white"
12+
/>
13+
<path
14+
d="M2.49515 13.9083C2.08213 15.4289 1.59128 18.7902 5.14725 18.7902H15.9531C13.4041 18.7902 12.3328 16.1608 13.2933 13.9083C10.1752 13.5643 5.61329 13.5643 2.49515 13.9083Z"
15+
fill="#BEDBFF"
16+
/>
17+
<path
18+
d="M2.49515 13.9083C2.08213 15.4289 1.59128 18.7902 5.14725 18.7902H15.9531C13.4041 18.7902 12.3328 16.1608 13.2933 13.9083C10.1752 13.5643 5.61329 13.5643 2.49515 13.9083Z"
19+
stroke="#155DFC"
20+
stroke-width="1.43"
21+
stroke-linecap="round"
22+
stroke-linejoin="round"
23+
/>
24+
<path
25+
d="M9.63275 6.40674H15.0519"
26+
stroke="#155DFC"
27+
stroke-width="1.43"
28+
stroke-linecap="round"
29+
stroke-linejoin="round"
30+
/>
31+
<path
32+
d="M9.63275 9.93005H15.0519"
33+
stroke="#155DFC"
34+
stroke-width="1.43"
35+
stroke-linecap="round"
36+
stroke-linejoin="round"
37+
/>
38+
<path
39+
d="M14.3498 18.7889H16.0375C17.4352 18.7889 18.5962 17.7048 18.6601 16.3087C18.8546 12.0708 18.8311 7.85195 18.59 3.60947C18.5533 2.96602 18.055 2.44492 17.4125 2.39445C14.357 2.15444 10.2704 2.14265 7.2276 2.39325C6.60573 2.44447 6.11779 2.93951 6.0675 3.56146C5.80814 6.7693 5.84035 9.93441 6.16412 13.1529"
40+
stroke="#155DFC"
41+
stroke-width="1.43"
42+
stroke-linecap="round"
43+
stroke-linejoin="round"
44+
/>
45+
</svg>

‎resources/views/components/icons/home/startup.blade.php‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<svg
2+
{{ $attributes }}
3+
xmlns="http://www.w3.org/2000/svg"
4+
viewBox="0 0 21 21"
5+
fill="none"
6+
>
7+
<path
8+
d="M6.16893 18.0078C5.75859 18.404 4.67333 18.78 3.64212 19.0668C2.58061 19.3619 1.63867 18.4199 1.93378 17.3583C2.22046 16.3272 2.5966 15.2419 2.99281 14.8316C3.19855 14.6108 3.44665 14.4337 3.7223 14.3109C3.99796 14.1881 4.29555 14.122 4.59728 14.1167C4.89902 14.1114 5.19875 14.1669 5.47858 14.2799C5.7584 14.3929 6.01258 14.5612 6.22598 14.7746C6.43937 14.9879 6.6076 15.2422 6.72063 15.5219C6.83366 15.8018 6.88917 16.1016 6.88383 16.4032C6.87852 16.7049 6.81247 17.0026 6.68964 17.2782C6.56682 17.5539 6.38973 17.802 6.16893 18.0078Z"
9+
fill="white"
10+
/>
11+
<path
12+
d="M6.01172 11.3994L6.04533 11.4202C7.4944 12.3146 8.71272 13.5373 9.60188 14.9895C12.474 13.269 15.739 11.6026 17.2293 10.0582C20.4537 6.83382 18.5841 2.41724 18.5841 2.41724C18.5841 2.41724 14.1675 0.547643 10.9431 3.77201C9.39866 5.26227 7.71874 8.54084 6.01172 11.3994Z"
13+
fill="#CEFAFE"
14+
/>
15+
<path
16+
d="M9.59375 14.9947L11.8052 18.9945C14.8518 17.3982 15.5942 14.2674 14.928 11.8473L9.59375 14.9947Z"
17+
fill="white"
18+
/>
19+
<path
20+
d="M6.01152 11.4129L2.01172 9.20144C3.60574 6.1446 6.74458 5.40485 9.1664 6.07704L6.01152 11.4129Z"
21+
fill="white"
22+
/>
23+
<path
24+
d="M6.01152 11.4129L2.01172 9.20144C3.60574 6.1446 6.74458 5.40485 9.1664 6.07704"
25+
stroke="#0092B8"
26+
stroke-width="1.43"
27+
stroke-linecap="round"
28+
stroke-linejoin="round"
29+
/>
30+
<path
31+
d="M9.59375 14.9947L11.8052 18.9945C14.8518 17.3982 15.5942 14.2674 14.928 11.8473"
32+
stroke="#0092B8"
33+
stroke-width="1.43"
34+
stroke-linecap="round"
35+
stroke-linejoin="round"
36+
/>
37+
<path
38+
d="M6.01172 11.3994L6.04533 11.4202C7.4944 12.3146 8.71272 13.5373 9.60188 14.9895C12.474 13.269 15.739 11.6026 17.2293 10.0582C20.4537 6.83382 18.5841 2.41724 18.5841 2.41724C18.5841 2.41724 14.1675 0.547643 10.9431 3.77201C9.39866 5.26227 7.71874 8.54084 6.01172 11.3994Z"
39+
stroke="#0092B8"
40+
stroke-width="1.43"
41+
stroke-linecap="round"
42+
stroke-linejoin="round"
43+
/>
44+
<path
45+
d="M6.16893 18.0078C5.75859 18.404 4.67333 18.78 3.64212 19.0668C2.58061 19.3619 1.63867 18.4199 1.93378 17.3583C2.22046 16.3272 2.5966 15.2419 2.99281 14.8316C3.19855 14.6108 3.44665 14.4337 3.7223 14.3109C3.99796 14.1881 4.29555 14.122 4.59728 14.1167C4.89902 14.1114 5.19875 14.1669 5.47858 14.2799C5.7584 14.3929 6.01258 14.5612 6.22598 14.7746C6.43937 14.9879 6.60761 15.2422 6.72063 15.5219C6.83366 15.8018 6.88917 16.1016 6.88383 16.4032C6.87852 16.7049 6.81247 17.0026 6.68964 17.2782C6.56682 17.5539 6.38973 17.802 6.16893 18.0078Z"
46+
stroke="#0092B8"
47+
stroke-width="1.43"
48+
stroke-linecap="round"
49+
stroke-linejoin="round"
50+
/>
51+
<path
52+
d="M14.2949 6.70558L14.793 6.20752"
53+
stroke="#0092B8"
54+
stroke-width="1.43"
55+
stroke-linecap="round"
56+
stroke-linejoin="round"
57+
/>
58+
</svg>

0 commit comments

Comments
 (0)