Refactor Bifrost diagram layout and adjust component styles for improved responsiveness

Author: HassanZahirnia

resources/views/components/illustrations/bifrost-diagram.blade.php

@@ -1,44 +1,46 @@
 <div class="flex items-center justify-center py-10">
     {{-- NativePHP --}}
-    <div class="flex flex-col items-center gap-2">
-        <x-mini-logo class="h-9" />
+    <div
+        class="hidden flex-col items-center gap-2 pr-2 text-center 2xs:flex sm:pr-0"
+    >
+        <x-mini-logo class="h-7 sm:h-9" />
 
         {{-- NativePHP --}}
-        <div class="text-lg">
+        <div class="hidden whitespace-nowrap sm:block md:text-lg">
             <span class="font-semibold">NativePHP</span>
             app
         </div>
     </div>
 
     {{-- Left line --}}
     <div
-        class="h-0.5 w-20 bg-gradient-to-r from-transparent to-blue-500/50"
+        class="hidden h-0.5 w-10 bg-gradient-to-r from-transparent to-blue-500/50 2xs:block sm:w-20"
     ></div>
 
     {{-- Center --}}
     <div class="relative">
         {{-- Decorative blank box --}}
         <div
-            class="absolute -top-30 left-0 -z-10 grid h-27 w-47 place-items-center rounded-2xl mask-t-from-0% ring-3 ring-gray-200 ring-inset dark:ring-white/3"
+            class="absolute -top-26 left-0 -z-10 grid h-23 w-35 place-items-center rounded-2xl mask-t-from-0% ring-3 ring-gray-200 ring-inset xs:w-40 sm:-top-30 sm:h-27 sm:w-47 dark:ring-white/3"
         >
             <div
                 class="h-1.5 w-15 rounded-full bg-gray-200 dark:bg-white/3"
             ></div>
         </div>
 
         <div
-            class="grid h-27 w-47 place-items-center overflow-hidden rounded-2xl bg-gradient-to-tl from-transparent to-blue-500/50 p-[3px]"
+            class="grid h-23 w-35 place-items-center overflow-hidden rounded-2xl bg-gradient-to-tl from-transparent to-blue-500/50 p-[3px] xs:w-40 sm:h-27 sm:w-47"
         >
             <div
                 class="grid h-full w-full place-items-center rounded-[calc(var(--radius-2xl)-2px)] bg-white dark:bg-slate-950"
             >
-                <x-logos.bifrost class="h-5" />
+                <x-logos.bifrost class="h-3.5 xs:h-4 sm:h-5" />
             </div>
         </div>
 
         {{-- Decorative blank box --}}
         <div
-            class="absolute -bottom-30 left-0 -z-10 grid h-27 w-47 place-items-center rounded-2xl mask-b-from-0% ring-3 ring-gray-200 ring-inset dark:ring-white/3"
+            class="absolute -bottom-26 left-0 -z-10 grid h-23 w-35 place-items-center rounded-2xl mask-b-from-0% ring-3 ring-gray-200 ring-inset xs:w-40 sm:-bottom-30 sm:h-27 sm:w-47 dark:ring-white/3"
         >
             <div
                 class="h-1.5 w-15 rounded-full bg-gray-200 dark:bg-white/3"
@@ -47,7 +49,7 @@ class="h-1.5 w-15 rounded-full bg-gray-200 dark:bg-white/3"
     </div>
 
     {{-- Right --}}
-    <div class="flex items-center pr-24">
+    <div class="flex items-center sm:pr-14 md:pr-24">
         <div>
             <x-icons.home.arc-connector />
             <div