Skip to content

Commit 6133c9b

Browse files
HassanZahirniaHassanZahirnia
committed
💄 Enhance explainer section with new layout and content; add category pills and improve SVG icons for better visual appeal
1 parent 2a158f0 commit 6133c9b

File tree

6 files changed

+217
-0
lines changed

6 files changed

+217
-0
lines changed

‎resources/views/components/home/category-pill.blade.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@props([
2+
'name' => '',
3+
])
4+
<div
5+
class="dark:bg-cloud/30 inline-flex items-center gap-2 rounded-xl bg-white/50 py-2.5 pr-5 pl-4 text-slate-600 transition duration-200 will-change-transform dark:text-gray-400"
6+
>
7+
<div class="*:size-5.5">{{ $slot }}</div>
8+
9+
<div>{{ $name }}</div>
10+
</div>

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,7 @@ class="h-px w-full [background-image:linear-gradient(to_right,currentColor_0_8px
231231
</div>
232232
</div>
233233

234+
{{-- Right side --}}
234235
<div class="flex flex-col gap-5 lg:max-w-sm xl:max-w-max">
235236
{{-- Performance --}}
236237
<div class="xs:grid-cols-2 grid items-stretch gap-5">
@@ -391,5 +392,57 @@ class="grid size-10 place-items-center rounded-xl bg-cyan-100 dark:bg-cyan-500/2
391392
</div>
392393
</div>
393394
</div>
395+
396+
{{-- Right side --}}
397+
<div
398+
class="dark:bg-mirage relative z-0 flex flex-col justify-center gap-4 overflow-hidden rounded-2xl bg-[#F0F2E7] p-7 2xl:p-8"
399+
>
400+
<div
401+
class="2xs:items-start 2xs:text-left flex flex-col items-center gap-1 text-center text-pretty"
402+
>
403+
<h3
404+
class="text-lg text-[#9FA382] lg:text-xl dark:text-zinc-400"
405+
>
406+
Your next app starts here
407+
</h3>
408+
<h2
409+
class="text-xl font-bold text-gray-800 lg:text-2xl dark:text-white"
410+
>
411+
What can I build?
412+
</h2>
413+
</div>
414+
415+
{{-- Description --}}
416+
<p class="text-pretty text-gray-600 dark:text-zinc-400">
417+
Whether you're building tools for your team, apps for your
418+
customers, or your next big idea —
419+
<span class="font-medium text-gray-700 dark:text-zinc-300">
420+
NativePHP
421+
</span>
422+
gives you the flexibility and performance to bring it to life.
423+
</p>
424+
425+
<div
426+
class="flex flex-wrap items-start gap-x-2.5 gap-y-3 2xl:gap-x-3"
427+
>
428+
@php
429+
$categories = [
430+
['name' => 'SaaS clients', 'icon' => 'icons.home.web'],
431+
['name' => 'Games', 'icon' => 'icons.home.game'],
432+
];
433+
@endphp
434+
435+
@foreach ($categories as $category)
436+
<x-home.category-pill :name="$category['name']">
437+
<x-dynamic-component :component="$category['icon']" />
438+
</x-home.category-pill>
439+
@endforeach
440+
</div>
441+
442+
{{-- Decorative circle --}}
443+
<div
444+
class="absolute -top-20 -right-20 -z-10 size-60 rounded-full bg-gradient-to-r from-[#C1D2AF]/25 to-[#E8F9EE]/0 dark:hidden"
445+
></div>
446+
</div>
394447
</div>
395448
</section>

‎resources/views/components/home/skill-pill.blade.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
])
55
<a
66
href="{{ $link }}"
7+
target="_blank"
78
class="dark:bg-cloud/30 dark:hover:bg-cloud/50 inline-flex items-center gap-2 rounded-full bg-white/50 py-2 pr-4 pl-3.5 text-sm text-slate-500 ring-1 ring-slate-200 transition duration-200 will-change-transform hover:scale-105 hover:bg-white/70 hover:text-black hover:ring-slate-200 2xl:py-2.5 2xl:pr-5 2xl:pl-4 2xl:text-base dark:text-gray-400 dark:ring-slate-700/80 dark:hover:text-white dark:hover:ring-slate-700"
89
>
910
<div class="*:size-5 2xl:*:size-6">{{ $slot }}</div>

‎resources/views/components/icons/home/game.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 20 20"
5+
fill="none"
6+
>
7+
<path
8+
fill-rule="evenodd"
9+
clip-rule="evenodd"
10+
d="M8.20998 6.50671C6.39922 6.59141 4.75729 6.87931 4.09433 7.37039C3.41774 7.87158 1.89725 11.3878 1.56339 13.3845C1.08522 16.2442 1.39089 18.6218 4.24169 18.6218C5.50465 17.5994 6.10982 16.5786 6.42478 15.7901H12.2886C12.6036 16.5786 13.2087 17.5994 14.4717 18.6218C17.3225 18.6218 17.5336 16.2584 17.15 13.3845C17.0497 12.6338 16.8086 11.7674 16.5068 10.9283C16.1265 11.4384 15.4799 11.9897 14.4773 11.9897C13.0823 11.9897 12.3763 10.9224 12.1185 10.3837C11.9995 10.1351 11.8805 9.81347 11.8037 9.60591C11.7763 9.53166 11.7514 9.45039 11.7257 9.36669C11.6382 9.08097 11.5421 8.76696 11.3049 8.60715C11.2705 8.58401 11.2198 8.55392 11.147 8.51761C10.9945 8.44152 10.7995 8.36434 10.532 8.2684C10.5042 8.25851 10.4726 8.24748 10.4377 8.2353C10.2266 8.16162 9.89682 8.04651 9.59155 7.89615C9.16324 7.68515 8.52918 7.24292 8.20998 6.50671Z"
11+
fill="#F9FBF0"
12+
/>
13+
<path
14+
d="M16.7199 11.5581C16.92 12.1918 17.0747 12.8207 17.15 13.3844C17.5336 16.2584 17.3225 18.6217 14.4717 18.6217C13.2087 17.5993 12.6036 16.5786 12.2886 15.79H6.42478C6.10982 16.5786 5.50465 17.5993 4.24169 18.6217C1.39089 18.6217 1.08522 16.2441 1.56339 13.3844C1.89725 11.3878 3.41774 7.87152 4.09433 7.37033C4.66964 6.94416 5.98218 6.67102 7.50252 6.5509"
15+
stroke="#717838"
16+
stroke-width="1.43"
17+
stroke-linecap="round"
18+
stroke-linejoin="round"
19+
/>
20+
<path
21+
d="M6.9668 12.9844V9.66833"
22+
stroke="#717838"
23+
stroke-width="1.43"
24+
stroke-linecap="round"
25+
stroke-linejoin="round"
26+
/>
27+
<path
28+
d="M5.30853 11.3264H8.6246"
29+
stroke="#717838"
30+
stroke-width="1.43"
31+
stroke-linecap="round"
32+
stroke-linejoin="round"
33+
/>
34+
<path
35+
d="M12.99 4.04765C13.9165 3.12113 14.0907 1.37817 14.477 1.37817C14.8634 1.37817 15.0377 3.12113 15.9642 4.04765C16.8907 4.97417 18.6221 5.0723 18.6221 5.52326C18.6221 5.97422 16.8907 6.07235 15.9642 6.99888C15.0377 7.9254 14.8634 9.66835 14.477 9.66835C14.0907 9.66835 13.9165 7.9254 12.99 6.99888C12.0635 6.07235 10.332 5.97422 10.332 5.52326C10.332 5.0723 12.0635 4.97417 12.99 4.04765Z"
36+
fill="white"
37+
/>
38+
<path
39+
d="M12.99 4.04765C13.9165 3.12113 14.0907 1.37817 14.477 1.37817C14.8634 1.37817 15.0377 3.12113 15.9642 4.04765C16.8907 4.97417 18.6221 5.0723 18.6221 5.52326C18.6221 5.97422 16.8907 6.07235 15.9642 6.99888C15.0377 7.9254 14.8634 9.66835 14.477 9.66835C14.0907 9.66835 13.9165 7.9254 12.99 6.99888C12.0635 6.07235 10.332 5.97422 10.332 5.52326C10.332 5.0723 12.0635 4.97417 12.99 4.04765Z"
40+
stroke="#717838"
41+
stroke-width="1.43"
42+
stroke-linecap="round"
43+
stroke-linejoin="round"
44+
/>
45+
</svg>

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<svg
2+
{{ $attributes }}
3+
xmlns="http://www.w3.org/2000/svg"
4+
viewBox="0 0 20 20"
5+
fill="none"
6+
>
7+
<path
8+
d="M1.37891 1.37817H2.47277C3.70372 1.37817 4.77298 2.22494 5.05505 3.42314L5.87632 6.91187"
9+
stroke="#717838"
10+
stroke-width="1.43"
11+
stroke-linecap="round"
12+
stroke-linejoin="round"
13+
/>
14+
<path
15+
d="M18.6168 6.01896C18.4274 8.11747 17.8375 11.4146 17.353 12.5512C17.1313 13.0713 16.7115 13.467 16.1622 13.6091C15.4758 13.7867 14.2855 13.9792 12.3502 13.9792C10.415 13.9792 9.2246 13.7867 8.53818 13.6091C7.98892 13.467 7.57162 13.0694 7.36175 12.5444C6.80262 11.1458 5.76017 7.16698 5.35742 4.69421H17.3461C18.0819 4.69421 18.6826 5.28933 18.6168 6.01896Z"
16+
fill="#F9FBF0"
17+
/>
18+
<path
19+
d="M18.6168 6.01896C18.4274 8.11747 17.8375 11.4146 17.353 12.5512C17.1313 13.0713 16.7115 13.467 16.1622 13.6091C15.4758 13.7867 14.2855 13.9792 12.3502 13.9792C10.415 13.9792 9.2246 13.7867 8.53818 13.6091C7.98892 13.467 7.57162 13.0694 7.36175 12.5444C6.80262 11.1458 5.76017 7.16698 5.35742 4.69421H17.3461C18.0819 4.69421 18.6826 5.28933 18.6168 6.01896Z"
20+
stroke="#717838"
21+
stroke-width="1.43"
22+
stroke-linecap="round"
23+
stroke-linejoin="round"
24+
/>
25+
<path
26+
d="M8.17782 18.6218C8.99767 18.6218 9.66229 17.9571 9.66229 17.1374C9.66229 16.3175 8.99767 15.6528 8.17782 15.6528C7.35798 15.6528 6.69336 16.3175 6.69336 17.1374C6.69336 17.9571 7.35798 18.6218 8.17782 18.6218Z"
27+
fill="white"
28+
/>
29+
<path
30+
d="M8.17782 18.6218C8.99767 18.6218 9.66229 17.9571 9.66229 17.1374C9.66229 16.3175 8.99767 15.6528 8.17782 15.6528C7.35798 15.6528 6.69336 16.3175 6.69336 17.1374C6.69336 17.9571 7.35798 18.6218 8.17782 18.6218Z"
31+
stroke="#717838"
32+
stroke-width="1.43"
33+
stroke-linecap="round"
34+
stroke-linejoin="round"
35+
/>
36+
<path
37+
d="M16.467 18.6218C17.2869 18.6218 17.9514 17.9571 17.9514 17.1374C17.9514 16.3175 17.2869 15.6528 16.467 15.6528C15.6471 15.6528 14.9826 16.3175 14.9826 17.1374C14.9826 17.9571 15.6471 18.6218 16.467 18.6218Z"
38+
fill="white"
39+
/>
40+
<path
41+
d="M16.467 18.6218C17.2869 18.6218 17.9514 17.9571 17.9514 17.1374C17.9514 16.3175 17.2869 15.6528 16.467 15.6528C15.6471 15.6528 14.9826 16.3175 14.9826 17.1374C14.9826 17.9571 15.6471 18.6218 16.467 18.6218Z"
42+
stroke="#717838"
43+
stroke-width="1.43"
44+
stroke-linecap="round"
45+
stroke-linejoin="round"
46+
/>
47+
<path
48+
d="M10.3401 9.86006L12.0283 11.43C12.8227 9.37218 13.4843 8.4692 14.9826 7.24353"
49+
stroke="#717838"
50+
stroke-width="1.43"
51+
stroke-linecap="round"
52+
stroke-linejoin="round"
53+
/>
54+
</svg>

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<svg
2+
{{ $attributes }}
3+
xmlns="http://www.w3.org/2000/svg"
4+
viewBox="0 0 20 20"
5+
fill="none"
6+
>
7+
<g clip-path="url(#clip0_1_773)">
8+
<path
9+
d="M1.94403 14.361C2.14958 16.2833 3.69483 17.8294 5.61516 18.0435C8.56482 18.3724 11.4335 18.3724 14.3831 18.0435C16.3035 17.8294 17.8487 16.2833 18.0543 14.361C18.3677 11.4304 18.3677 8.56965 18.0543 5.63893C17.8487 3.71672 16.3035 2.17071 14.3831 1.95655C11.4335 1.6276 8.56482 1.6276 5.61516 1.95655C3.69483 2.17071 2.14958 3.71672 1.94403 5.63893C1.63064 8.56965 1.63064 11.4304 1.94403 14.361Z"
10+
fill="white"
11+
/>
12+
<path
13+
d="M18.0918 5.99723H1.90625C1.9186 5.87753 1.93117 5.7581 1.94392 5.63893C2.14947 3.71672 3.69472 2.17071 5.61504 1.95655C8.5647 1.6276 11.4334 1.6276 14.383 1.95655C16.3034 2.17071 17.8487 3.71672 18.0542 5.63893C18.0669 5.7581 18.0795 5.87753 18.0918 5.99723Z"
14+
fill="#F9FBF0"
15+
/>
16+
<path
17+
d="M1.94403 14.361C2.14958 16.2833 3.69483 17.8294 5.61516 18.0435C8.56482 18.3724 11.4335 18.3724 14.3831 18.0435C16.3035 17.8294 17.8487 16.2833 18.0543 14.361C18.3677 11.4304 18.3677 8.56965 18.0543 5.63893C17.8487 3.71672 16.3035 2.17071 14.3831 1.95655C11.4335 1.6276 8.56482 1.6276 5.61516 1.95655C3.69483 2.17071 2.14958 3.71672 1.94403 5.63893C1.63064 8.56965 1.63064 11.4304 1.94403 14.361Z"
18+
stroke="#717838"
19+
stroke-width="1.43"
20+
stroke-linecap="round"
21+
stroke-linejoin="round"
22+
/>
23+
<path
24+
d="M11.0818 13.4819H5.97852"
25+
stroke="#717838"
26+
stroke-width="1.43"
27+
stroke-linecap="round"
28+
stroke-linejoin="round"
29+
/>
30+
<path
31+
d="M5.97845 10H14.0199"
32+
stroke="#717838"
33+
stroke-width="1.43"
34+
stroke-linecap="round"
35+
stroke-linejoin="round"
36+
/>
37+
<path
38+
d="M18.0918 5.99723H1.90625C1.9186 5.87753 1.93117 5.7581 1.94392 5.63893C2.14947 3.71672 3.69472 2.17071 5.61504 1.95655C8.5647 1.6276 11.4334 1.6276 14.383 1.95655C16.3034 2.17071 17.8487 3.71672 18.0542 5.63893C18.0669 5.7581 18.0795 5.87753 18.0918 5.99723Z"
39+
stroke="#717838"
40+
stroke-width="1.43"
41+
stroke-linecap="round"
42+
stroke-linejoin="round"
43+
/>
44+
</g>
45+
<defs>
46+
<clipPath id="clip0_1_773">
47+
<rect
48+
width="20"
49+
height="20"
50+
fill="white"
51+
/>
52+
</clipPath>
53+
</defs>
54+
</svg>

0 commit comments

Comments
 (0)