✨ Update heading styles for consistency and add mini logo component

Author: HassanZahirnia

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

@@ -430,9 +430,7 @@ class="flex flex-col items-center gap-1 text-center text-pretty 2xs:items-start
                 <p class="text-lg text-gray-600 lg:text-xl dark:text-zinc-400">
                     Step by step
                 </p>
-                <h2
-                    class="text-xl font-bold text-gray-800 lg:text-2xl dark:text-white"
-                >
+                <h2 class="text-2xl font-bold text-gray-800 dark:text-white">
                     How do I get it?
                 </h2>
             </div>
@@ -528,9 +526,7 @@ class="flex flex-col items-center gap-1 text-center text-pretty 2xs:items-start
                 <p class="text-lg text-[#9FA382] lg:text-xl dark:text-zinc-400">
                     Your next app starts here
                 </p>
-                <h2
-                    class="text-xl font-bold text-gray-800 lg:text-2xl dark:text-white"
-                >
+                <h2 class="text-2xl font-bold text-gray-800 dark:text-white">
                     What can I build?
                 </h2>
             </div>

resources/views/components/mini-logo.blade.php

@@ -0,0 +1,22 @@
+<svg
+    {{ $attributes }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 25 25"
+    fill="none"
+>
+    <path
+        d="M7.375 24.6H0V0.300003H7.375V24.6Z"
+        class="text-[#505b93] dark:text-[#8696ed]"
+        fill="currentColor"
+    />
+    <path
+        d="M24.175 24.6H16.8V0.300003H24.175V24.6Z"
+        class="text-[#00aaa6] dark:text-[#3edad7]"
+        fill="currentColor"
+    />
+    <path
+        d="M24.175 24.6H7.375V0.300003L24.175 24.6Z"
+        class="text-[#272d48]"
+        fill="currentColor"
+    />
+</svg>

resources/views/components/navigation-bar.blade.php

@@ -22,10 +22,12 @@ class="mx-auto flex w-full max-w-5xl items-center justify-between gap-5 rounded-
             <a
                 href="/"
                 aria-label="NativePHP Homepage"
-                class="hidden min-[500px]:block"
                 x-on:contextmenu.prevent="window.location.href = @js(route('brand'))"
             >
-                <x-logo class="h-4 min-[400px]:h-5 sm:h-6" />
+                <x-logo
+                    class="hidden h-4 min-[400px]:h-5 min-[500px]:block sm:h-6"
+                />
+                <x-mini-logo class="block h-6 min-[500px]:hidden" />
                 <span class="sr-only">NativePHP</span>
             </a>