Merge pull request #93 from HassanZahirnia/improvements-to-new-design

🎨 Improve the new design further and optimize the UX

Author: simonhamp

app/Providers/AppServiceProvider.php

@@ -26,7 +26,10 @@ public function boot(): void
 
     private function registerSharedViewVariables(): void
     {
-        View::share('electronGitHubVersion', GitHub::electron()->latestVersion());
+        View::share('electronGitHubVersion', app()->environment('production')
+            ? GitHub::electron()->latestVersion()
+            : 'dev'
+        );
         View::share('discordLink', 'https://discord.gg/X62tWNStZK');
         View::share('bskyLink', 'https://bsky.app/profile/nativephp.bsky.social');
         View::share('openCollectiveLink', 'https://opencollective.com/nativephp');

resources/css/app.css

@@ -8,9 +8,50 @@
     }
 }
 
+/* Scrollbar width */
+::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+}
+
+/* Scrollbar track */
+::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: transparent;
+}
+
+/* Scrollbar thumb (the draggable part) */
+::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+}
+
+/* Light Theme */
+::-webkit-scrollbar-thumb {
+    @apply bg-gray-300/80;
+}
+
+/* Scrollbar thumb on hover */
+::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-300;
+}
+
+/* Dark Theme */
+.dark ::-webkit-scrollbar-thumb {
+    @apply bg-cloud/60;
+}
+
+/* Scrollbar thumb on hover */
+.dark ::-webkit-scrollbar-thumb:hover {
+    @apply bg-cloud;
+}
+
 /* Whole menu */
 nav ul {
-    @apply list-none text-xl md:text-sm;
+    @apply list-none text-sm;
 }
 
 /* Categories */
@@ -139,7 +180,7 @@ nav > ul > li > ul {
 
 :root {
     --docsearch-container-background: rgba(0, 0, 0, 0.5);
-    --docsearch-primary-color: #a78bfa;
+    --docsearch-primary-color: #987af1;
 }
 
 [id='docsearch'] {
@@ -202,3 +243,7 @@ nav > ul > li > ul {
 .DocSearch-Input {
     @apply focus-visible:outline-none;
 }
+
+.DocSearch-Form {
+    @apply rounded-lg;
+}

resources/images/marcel2023laraconus.webp

@@ -1,11 +1,11 @@
 <div
-    class="relative z-0 mt-5 flex items-center gap-6 overflow-hidden rounded-2xl bg-yellow-50/50 px-6 py-5 ring-1 ring-black/5 dark:bg-gray-900/40"
+    class="relative z-0 mt-5 flex items-center gap-6 overflow-hidden rounded-2xl bg-yellow-50/50 px-6 py-5 ring-1 ring-black/5 dark:bg-mirage"
     role="alert"
     aria-labelledby="beta-alert-title"
     aria-describedby="beta-alert-description"
 >
     <div
-        class="absolute left-0 top-1/2 -z-10 size-16 -translate-y-1/2 rounded-full bg-yellow-400/50 blur-2xl dark:block"
+        class="absolute left-0 top-1/2 -z-10 size-16 -translate-y-1/2 rounded-full bg-yellow-400/60 blur-2xl dark:block"
         aria-hidden="true"
     ></div>
 

resources/views/components/alert-beta.blade.php

@@ -15,23 +15,27 @@ class="group relative z-30 flex items-center justify-center gap-2 bg-gradient-to
     </style>
     {{-- Text --}}
     <div
-        class="bg-clip-text tracking-tight text-transparent"
-        style="
-            background-image: linear-gradient(
-                90deg,
-                #8d89b5 0%,
-                white 35%,
-                #8d89b5 70%
-            );
-            background-size: 200% 100%;
-            animation: shine 2s linear infinite;
-        "
+        class="transition duration-200 ease-in-out will-change-transform group-hover:-translate-x-1"
     >
-        Join our Mobile Early Access Program
+        <div
+            class="bg-clip-text tracking-tight text-transparent"
+            style="
+                background-image: linear-gradient(
+                    90deg,
+                    #8d89b5 0%,
+                    white 35%,
+                    #8d89b5 70%
+                );
+                background-size: 200% 100%;
+                animation: shine 2s linear infinite;
+            "
+        >
+            Join our Mobile Early Access Program
+        </div>
     </div>
 
     {{-- Arrow --}}
     <x-icons.right-arrow
-        class="size-3 shrink-0 text-white transition duration-300 ease-in-out will-change-transform group-hover:translate-x-1"
+        class="size-3 shrink-0 text-white transition duration-200 ease-in-out will-change-transform group-hover:translate-x-1"
     />
 </a>

resources/views/components/eap-banner.blade.php

@@ -8,9 +8,11 @@ class="sr-only"
     >
         Footer
     </h2>
-    <div class="flex flex-wrap items-center justify-between gap-x-6 gap-y-4">
+    <div
+        class="flex flex-col flex-wrap items-center gap-x-6 gap-y-4 md:flex-row md:justify-between"
+    >
         {{-- Left side --}}
-        <div class="flex flex-col gap-6">
+        <div class="flex flex-col items-center gap-6 md:items-start">
             {{-- Logo --}}
             <div
                 x-init="
@@ -94,7 +96,7 @@ class="flex flex-wrap items-center justify-center gap-2.5 *:opacity-0"
         >
             <a
                 href="/newsletter"
-                class="group relative z-0 flex items-center gap-6 overflow-hidden rounded-2xl bg-cyan-50/50 py-5 pl-6 pr-7 ring-1 ring-black/5 transition duration-300 ease-in-out hover:bg-cyan-50 hover:ring-black/10 md:max-w-lg dark:bg-gray-900/40 dark:hover:bg-gray-900"
+                class="group relative z-0 flex items-center gap-6 overflow-hidden rounded-2xl bg-cyan-50/50 py-5 pl-6 pr-7 ring-1 ring-black/5 transition duration-300 ease-in-out hover:bg-cyan-50 hover:ring-black/10 md:max-w-lg dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
             >
                 {{-- Decorative circle --}}
                 <div
@@ -162,7 +164,7 @@ class="flex items-center pb-3 pt-3"
 
     {{-- Copyright --}}
     <section
-        class="flex flex-wrap items-center justify-between gap-x-5 gap-y-3 text-sm text-gray-500 dark:text-gray-400/80"
+        class="flex flex-col flex-wrap items-center gap-x-5 gap-y-3 text-center text-sm text-gray-500 md:flex-row md:justify-between md:text-left dark:text-gray-400/80"
         aria-label="Credits and copyright information"
     >
         <div
@@ -183,29 +185,29 @@ class="flex flex-wrap items-center justify-between gap-x-5 gap-y-3 text-sm text-
                     })
                 }
             "
-            class="flex flex-wrap items-center gap-2 opacity-0"
+            class="flex flex-col flex-wrap items-center gap-2 opacity-0 md:flex-row"
         >
             <div class="flex gap-1">
                 <div>Website designed by</div>
                 <a
                     href="https://twitter.com/HassanZahirnia"
                     target="_blank"
-                    class="transition duration-200 hover:text-black dark:hover:text-white"
+                    class="font-medium text-black/80 transition duration-200 hover:text-black dark:text-white/80 dark:hover:text-white"
                     aria-label="Hassan's Twitter profile"
                     rel="noopener noreferrer"
                 >
                     Hassan Zahirnia
                 </a>
             </div>
             <div
-                class="hidden h-3 w-0.5 bg-gray-300 min-[438px]:block dark:bg-[#242734]"
+                class="hidden h-3 w-0.5 bg-gray-300 md:block dark:bg-[#242734]"
             ></div>
             <div class="flex gap-1">
                 <div>Logo by</div>
                 <a
                     href="https://twitter.com/caneco"
                     target="_blank"
-                    class="transition duration-200 hover:text-black dark:hover:text-white"
+                    class="font-medium text-black/80 transition duration-200 hover:text-black dark:text-white/80 dark:hover:text-white"
                     aria-label="Caneco's Twitter profile"
                     rel="noopener noreferrer"
                 >
@@ -237,7 +239,7 @@ class="opacity-0"
             <a
                 href="https://twitter.com/marcelpociot"
                 target="_blank"
-                class="transition duration-200 hover:text-black dark:hover:text-white"
+                class="font-medium text-black/80 transition duration-200 hover:text-black dark:text-white/80 dark:hover:text-white"
                 aria-label="Marcel Pociot's Twitter profile"
                 rel="noopener noreferrer"
             >
@@ -247,13 +249,12 @@ class="transition duration-200 hover:text-black dark:hover:text-white"
             <a
                 href="https://twitter.com/simonhamp"
                 target="_blank"
-                class="transition duration-200 hover:text-black dark:hover:text-white"
+                class="font-medium text-black/80 transition duration-200 hover:text-black dark:text-white/80 dark:hover:text-white"
                 aria-label="Simon Hamp's Twitter profile"
                 rel="noopener noreferrer"
             >
                 Simon Hamp
             </a>
-            <span>.</span>
         </div>
     </section>
 </footer>

resources/views/components/footer.blade.php

@@ -1,7 +1,16 @@
 <svg
     {{ $attributes }}
-    viewBox="0 0 1024 1024" fill="none">
-    <circle cx="512" cy="512" r="512" fill="currentColor"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M375.022 782.938H385.585L388.504 772.787C398.2 739.062 408.734 701.557 420.107 660.277L420.117 660.242C430.551 621.984 441.163 583.726 451.952 545.468C459.439 545.219 468.939 544.603 480.341 543.653C496.01 542.347 513.484 539.967 532.73 536.546C552.862 533.044 572.949 527.799 592.987 520.829C613.395 513.731 632.329 504.389 649.748 492.785C668.139 480.818 683.061 465.944 694.293 448.16C706.045 429.552 711.61 407.7 711.61 383.228C711.61 360.057 705.43 339.287 692.671 321.539C680.899 304.178 665.246 290.011 646.011 278.988C627.549 267.755 607.365 259.479 585.534 254.119C563.876 248.384 542.511 245.479 521.468 245.479C501.989 245.479 482.531 247.471 463.109 251.444C444.074 255.338 426.237 260.117 409.618 265.802L409.563 265.821L409.509 265.84C393.722 271.387 379.742 276.759 367.603 281.962L359.101 285.605V294.855C359.101 302.344 362.725 308.746 366.475 313.567C370.135 318.273 374.328 322.466 379.035 326.127L379.314 326.344L379.603 326.546C382.092 328.289 384.664 329.879 387.238 331.08C389.608 332.186 393.095 333.5 397.115 333.5C401.138 333.5 405.052 332.434 408.337 331.251C411.797 330.005 415.532 328.268 419.459 326.189L419.737 326.042L420.008 325.883C426.54 322.04 435.277 317.652 446.368 312.723L446.563 312.636L446.756 312.544C449.831 311.063 453.133 309.652 456.668 308.316C445.353 334.018 434.841 358.926 425.133 383.039L425.104 383.112L425.075 383.185C412.412 415.687 400.171 448.189 388.351 480.694L388.333 480.742L388.316 480.791C376.911 512.894 365.511 546.462 354.116 581.491C342.751 616.005 330.546 653.252 317.501 693.23L317.464 693.343L317.429 693.456C315.782 698.808 313.922 704.595 311.847 710.82L311.712 711.227L311.601 711.642C309.662 718.912 308.603 726.031 308.603 732.931C308.603 749.453 317.664 762.126 331.69 770.758L331.79 770.819L331.891 770.879C345.313 778.833 359.763 782.938 375.022 782.938ZM615.889 423.985C605.825 438.893 592.099 451.594 574.375 462.004C556.626 472.253 536.548 480.43 514.052 486.456C498.109 490.726 482.19 493.892 466.291 495.961C477.084 459.602 488.321 424.611 500.001 390.987L500.016 390.944C512.485 354.67 525.4 323.063 538.731 296.052C553.277 297.171 567.056 300.298 580.123 305.398L580.176 305.418L580.229 305.438C595.921 311.416 608.16 319.997 617.399 331.012L617.483 331.112L617.569 331.211C626.251 341.179 631.163 354.709 631.163 373.128C631.163 392.812 626.014 409.517 616.024 423.788L615.955 423.886L615.889 423.985Z" fill="white"/>
-    <path d="M560.932 743.369C560.932 766.565 542.128 785.369 518.932 785.369C495.736 785.369 476.932 766.565 476.932 743.369C476.932 720.173 495.736 701.369 518.932 701.369C542.128 701.369 560.932 720.173 560.932 743.369Z" fill="white"/>
+    viewBox="0 0 1024 1024"
+    fill="none"
+>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M375.022 782.938H385.585L388.504 772.787C398.2 739.062 408.734 701.557 420.107 660.277L420.117 660.242C430.551 621.984 441.163 583.726 451.952 545.468C459.439 545.219 468.939 544.603 480.341 543.653C496.01 542.347 513.484 539.967 532.73 536.546C552.862 533.044 572.949 527.799 592.987 520.829C613.395 513.731 632.329 504.389 649.748 492.785C668.139 480.818 683.061 465.944 694.293 448.16C706.045 429.552 711.61 407.7 711.61 383.228C711.61 360.057 705.43 339.287 692.671 321.539C680.899 304.178 665.246 290.011 646.011 278.988C627.549 267.755 607.365 259.479 585.534 254.119C563.876 248.384 542.511 245.479 521.468 245.479C501.989 245.479 482.531 247.471 463.109 251.444C444.074 255.338 426.237 260.117 409.618 265.802L409.563 265.821L409.509 265.84C393.722 271.387 379.742 276.759 367.603 281.962L359.101 285.605V294.855C359.101 302.344 362.725 308.746 366.475 313.567C370.135 318.273 374.328 322.466 379.035 326.127L379.314 326.344L379.603 326.546C382.092 328.289 384.664 329.879 387.238 331.08C389.608 332.186 393.095 333.5 397.115 333.5C401.138 333.5 405.052 332.434 408.337 331.251C411.797 330.005 415.532 328.268 419.459 326.189L419.737 326.042L420.008 325.883C426.54 322.04 435.277 317.652 446.368 312.723L446.563 312.636L446.756 312.544C449.831 311.063 453.133 309.652 456.668 308.316C445.353 334.018 434.841 358.926 425.133 383.039L425.104 383.112L425.075 383.185C412.412 415.687 400.171 448.189 388.351 480.694L388.333 480.742L388.316 480.791C376.911 512.894 365.511 546.462 354.116 581.491C342.751 616.005 330.546 653.252 317.501 693.23L317.464 693.343L317.429 693.456C315.782 698.808 313.922 704.595 311.847 710.82L311.712 711.227L311.601 711.642C309.662 718.912 308.603 726.031 308.603 732.931C308.603 749.453 317.664 762.126 331.69 770.758L331.79 770.819L331.891 770.879C345.313 778.833 359.763 782.938 375.022 782.938ZM615.889 423.985C605.825 438.893 592.099 451.594 574.375 462.004C556.626 472.253 536.548 480.43 514.052 486.456C498.109 490.726 482.19 493.892 466.291 495.961C477.084 459.602 488.321 424.611 500.001 390.987L500.016 390.944C512.485 354.67 525.4 323.063 538.731 296.052C553.277 297.171 567.056 300.298 580.123 305.398L580.176 305.418L580.229 305.438C595.921 311.416 608.16 319.997 617.399 331.012L617.483 331.112L617.569 331.211C626.251 341.179 631.163 354.709 631.163 373.128C631.163 392.812 626.014 409.517 616.024 423.788L615.955 423.886L615.889 423.985Z"
+        fill="currentColor"
+    />
+    <path
+        d="M560.932 743.369C560.932 766.565 542.128 785.369 518.932 785.369C495.736 785.369 476.932 766.565 476.932 743.369C476.932 720.173 495.736 701.369 518.932 701.369C542.128 701.369 560.932 720.173 560.932 743.369Z"
+        fill="currentColor"
+    />
 </svg>

resources/views/components/icons/pinkary.blade.php

@@ -0,0 +1,13 @@
+<svg
+    {{ $attributes }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 17 22"
+    fill="none"
+>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        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"
+        fill="currentColor"
+    />
+</svg>

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

@@ -12,7 +12,7 @@ class="2xl:max-w-8xl mx-auto flex w-full max-w-5xl grow px-4 pt-1 xl:max-w-7xl"
 
         <div class="flex w-full min-w-0 grow px-2 pt-2">
             {{-- Content --}}
-            <article class="flex w-full min-w-0 grow flex-col">
+            <article class="flex w-full min-w-0 grow flex-col px-5">
                 {{ $slot }}
             </article>
 

resources/views/components/layout-three-columns.blade.php

@@ -1,6 +1,6 @@
 <a
     {{ $attributes }}
-    class="grid w-full max-w-72 grid-cols-1 gap-0.5 rounded-xl bg-zinc-100/80 p-5 transition duration-300 ease-in-out hover:bg-zinc-200/60 dark:bg-gray-900/40 dark:hover:bg-gray-900/60"
+    class="grid w-full max-w-72 grid-cols-1 gap-0.5 rounded-xl bg-zinc-100/80 p-5 transition duration-300 ease-in-out hover:bg-zinc-200/60 dark:bg-mirage dark:ring-1 dark:ring-transparent dark:hover:bg-haiti dark:hover:ring-cloud"
 >
     {{ $slot }}
 </a>