Init

resources/views/home/partials/branding.blade.php

@@ -0,0 +1,50 @@
+<div class="mx-auto space-y-6 z-10 absolute">
+    <div class="flex !m-0 justify-center pt-[5vh] md:pt-[15vh] w-[99vw]">
+        <img src="/images/cropped-HS-1-270x270.webp" loading="lazy" height="133px" width="133px">
+    </div>
+    <div class="flex !m-0 justify-center h-[4vh] md:h-[7vh] w-[99vw]">
+        <h1 class="font-bold text-2xl md:text-4xl whitespace-nowrap dark:text-white">hstream.moe</h1>
+    </div>
+    <div class="flex !m-0 justify-center h-[4vh] md:h-[7vh] w-[99vw]">
+        <h2 class="text-1xl md:text-3xl font-extralight dark:text-white">{{ __('home.branding') }}</h2>
+    </div>
+</div>
+
+<div class="mx-auto space-y-6 h-[30vh] sm:h-[40vh] md:h-[60vh] z-10 overflow-hidden">
+
+    <div class="!m-0">
+        @php 
+            $array = \cache()->remember('background', 300, function () {
+                $bg = new \App\Models\SiteBackground();
+                return $bg->getImages();
+            });
+        @endphp
+
+        @if ($array->isNotEmpty())
+        @php
+            $imageId = $array->random();
+        @endphp
+        <img
+            class="fade-img sm:relative md:absolute top-0 w-screen"
+            src="/images/background/{{ $imageId }}-1080p.webp"
+            srcset="/images/background/{{ $imageId }}-640p.webp 640w,
+                    /images/background/{{ $imageId }}-720p.webp 720w,
+                    /images/background/{{ $imageId }}-1080p.webp 1080w,
+                    /images/background/{{ $imageId }}-1440p.webp 1440w"
+            sizes="(max-width: 640px) 640px,
+                (max-width: 1080px) 720px,
+                (max-width: 1440px) 1080px,
+                1440px"
+            loading="lazy"
+            height="640px"
+        >
+        @else
+        <img
+            class="fade-img sm:relative md:absolute top-0 w-screen"
+            src="/images/hs_branding_1.webp"
+            loading="lazy"
+        >
+        @endif
+    </div>
+
+</div>