Init

resources/views/home/index.blade.php

@@ -0,0 +1,32 @@
+<x-app-layout>
+    @include('home.partials.branding')
+
+    @include('admin.home.alert')
+
+    <!-- Recently Released -->
+    <div class="mx-auto pt-2 sm:px-6 lg:px-8 space-y-6 max-w-[100%] xl:max-w-[95%] 2xl:max-w-[85%] z-10">
+        @include('home.partials.tabs-top')
+    </div>
+    <br><br>
+
+    <!-- Recently Uploaded -->
+    <div class="mx-auto sm:px-6 lg:px-8 space-y-6 max-w-[100%] xl:max-w-[95%] 2xl:max-w-[85%]">
+        @include('home.partials.tabs-middle')
+    </div>
+
+    <!-- Categories  -->
+    <div class="mx-auto pt-6 sm:px-6 lg:px-8 space-y-6 max-w-[100%] xl:max-w-[95%] 2xl:max-w-[85%]">
+        @include('home.partials.categories')
+    </div>
+
+    <!-- Random  -->
+    <div class="mx-auto pt-6 sm:px-6 lg:px-8 space-y-6 max-w-[100%] xl:max-w-[95%] 2xl:max-w-[85%]">
+        @include('home.partials.random')
+    </div>
+
+
+    <!-- Comments  -->
+    <div class="mx-auto pt-6 sm:px-6 lg:px-8 space-y-6 max-w-[100%] xl:max-w-[95%] 2xl:max-w-[85%]">
+        @include('home.partials.comments')
+    </div>
+</x-app-layout>

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>

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

@@ -0,0 +1,61 @@
+<p class="leading-normal font-bold text-lg text-neutral-800 dark:text-white">
+    {{ __('home.categories') }}
+</p>
+
+@php
+    $categories = [
+        'Uncensored' => 'uncensored',
+        'Milf' => 'milf',
+        'Maid' => 'maid',
+        'School Girl' => 'school-girl',
+        'Succubus' => 'succubus',
+        'Tentacle' => 'tentacle',
+        'Big Boobs' => 'big-boobs',
+        'BDSM' => 'bdsm',
+        'Elf' => 'elf',
+        '4k 48fps' => '4k-48fps',
+    ];
+@endphp
+
+<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-5 2xl:grid-cols-5 gap-2">
+    @foreach ($categories as $name => $slug)
+        @php
+            $cacheKey = 'category_' . $slug;
+
+            $collection = \cache()->remember(
+                $cacheKey,
+                900,
+                fn() => \App\Models\Episode::withAllTags([$slug])
+                    ->inRandomOrder()
+                    ->limit(3)
+                    ->get(),
+            );
+
+            $count = $collection->count();
+
+        @endphp
+        <a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $slug]) }}"
+            class="relative mx-auto w-96 sm:w-full h-56 bg-white dark:bg-neutral-800 text-black dark:text-white rounded-lg overflow-hidden shadow-lg mt-4 transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300">
+            <h2 class="text-lg font-semibold text-center pt-2">{{ $name }}</h2>
+            <div class="relative w-full h-full flex justify-center">
+                <!-- Left Image -->
+                @if ($count > 0)
+                    <img src="{{ $collection->first()->cover_url }}"
+                        class="absolute w-32 h-44 rounded-lg object-cover shadow-md left-4 top-4 rotate-[-15deg] z-0">
+                @endif
+
+                <!-- Center Image -->
+                @if ($count > 1)
+                    <img src="{{ $collection->skip(1)->first()->cover_url }}"
+                        class="absolute w-32 h-44 rounded-lg object-cover shadow-lg top-4 z-10">
+                @endif
+
+                <!-- Right Image -->
+                @if ($count > 2)
+                    <img src="{{ $collection->skip(2)->first()->cover_url }}"
+                        class="absolute w-32 h-44 rounded-lg object-cover shadow-lg right-4 top-14 z-20 rotate-[15deg]">
+                @endif
+            </div>
+        </a>
+    @endforeach
+</div>

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

@@ -0,0 +1,61 @@
+<p class="text-lg font-bold leading-normal text-neutral-800 dark:text-white">
+    {{ __('home.latest-comments') }}
+</p>
+
+<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
+    @foreach ($latestComments as $comment)
+        @if ($comment->commentable_type == 'App\Models\Episode')
+            @php $episode = cache()->rememberForever('commentEpisode'.$comment->commentable_id, fn () => App\Models\Episode::with('gallery')->where('id', $comment->commentable_id)->first()); @endphp
+            <div id="comments" class="flex p-4 bg-white rounded-lg dark:bg-neutral-950">
+                <div
+                    class="w-[20vw] mr-5 p-1 md:p-2 mb-8 relative transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300">
+                    <a class="hidden hover:text-blue-600 xl:block"
+                        href="{{ route('hentai.index', ['title' => $episode->slug]) }}">
+                        <img alt="{{ $episode->title }} - {{ $episode->episode }}" loading="lazy" width="1000"
+                            class="block object-cover object-center relative z-20 rounded-lg aspect-video"
+                            src="{{ $episode->gallery->first()->thumbnail_url }}"></img>
+                        <p
+                            class="absolute right-2 top-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
+                            {{ $episode->getResolution() }}</p>
+                        <div class="absolute w-[95%] grid grid-cols-1 text-center">
+                            <p class="text-sm text-center text-black dark:text-white">{{ $episode->title }} -
+                                {{ $episode->episode }}</p>
+                        </div>
+                    </a>
+
+                    <a class="block hover:text-blue-600 xl:hidden"
+                        href="{{ route('hentai.index', ['title' => $episode->slug]) }}">
+                        <img alt="{{ $episode->title }} - {{ $episode->episode }}" loading="lazy" width="1000"
+                            class="block object-cover object-center relative z-20 rounded-lg"
+                            src="{{ $episode->cover_url }}"></img>
+                    </a>
+                </div>
+                <div class="w-[60vw]">
+                    @include('partials.comment', ['comment' => $comment])
+                </div>
+            </div>
+        @elseif($comment->commentable_type == 'App\Models\Hentai')
+            @php $hentai = cache()->rememberForever('commentHentai'.$comment->commentable_id, fn () => App\Models\Hentai::with('gallery', 'episodes')->where('id', $comment->commentable_id)->first()); @endphp
+            <div id="comments" class="flex p-4 bg-white rounded-lg dark:bg-neutral-950">
+                <div
+                    class="w-[20vw] mr-5 p-1 md:p-2 mb-8 relative transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300">
+                    <a class="hover:text-blue-600" href="{{ route('hentai.index', ['title' => $hentai->slug]) }}">
+                        <img alt="{{ $hentai->episodes->first()->title }}" loading="lazy" width="1000"
+                            class="block object-cover object-center relative z-20 rounded-lg aspect-video"
+                            src="{{ $hentai->gallery->first()->thumbnail_url }}"></img>
+                        <p
+                            class="absolute  right-2 top-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
+                            {{ $hentai->episodes->first()->getResolution() }}</p>
+                        <div class="absolute  w-[95%] grid grid-cols-1 text-center">
+                            <p class="text-sm text-center text-black dark:text-white">
+                                {{ $hentai->episodes->first()->title }}</p>
+                        </div>
+                    </a>
+                </div>
+                <div class="w-[60vw]">
+                    @include('partials.comment', ['comment' => $comment])
+                </div>
+            </div>
+        @endif
+    @endforeach
+</div>

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

@@ -0,0 +1,9 @@
+<p class="leading-normal font-bold text-lg text-neutral-800 dark:text-white">
+    Random
+</p>
+
+@php $random = \App\Models\Episode::inRandomOrder()->limit(8)->get(); @endphp
+
+<div class="mb-6">
+    @include('home.partials.tab.template', ['episodes' => $random, 'showThumbnails' => false])
+</div>

resources/views/home/partials/tab/template.blade.php

@@ -0,0 +1,9 @@
+@if ($showThumbnails)
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2">
+    @include('partials.episode-thumbnail', ['limit' => 15])
+</div>
+@else
+<div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8 gap-2">
+    @include('partials.episode-cover', ['limit' => 16])
+</div>
+@endif

resources/views/home/partials/tabs-middle.blade.php

@@ -0,0 +1,101 @@
+<!--Tabs navigation-->
+<ul class="-mb-6 flex list-none flex-row flex-wrap border-b-0 pl-0 relative z-10" role="tablist" data-te-nav-ref>
+    <li role="presentation" class="flex-auto text-center">
+        <a href="#tabs-most-views"
+            class="rounded-l-lg my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:data-[te-nav-active]:text-white"
+            data-te-toggle="pill" data-te-target="#tabs-most-views" data-te-nav-active role="tab"
+            aria-controls="tabs-most-views" aria-selected="true">
+            {{ __('home.most-views') }}
+        </a>
+    </li>
+    <li role="presentation" class="flex-auto text-center">
+        <a href="#tabs-most-likes"
+            class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:data-[te-nav-active]:text-white"
+            data-te-toggle="pill" data-te-target="#tabs-most-likes" role="tab" aria-controls="tabs-most-likes"
+            aria-selected="false">
+            {{ __('home.most-likes') }}
+        </a>
+    </li>
+    <li role="presentation" class="flex-auto text-center">
+        <a href="#tabs-popular-weekly"
+            class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:data-[te-nav-active]:text-white"
+            data-te-toggle="pill" data-te-target="#tabs-popular-weekly" role="tab"
+            aria-controls="tabs-popular-weekly" aria-selected="false">
+            {{ __('home.popular-weekly') }}
+        </a>
+    </li>
+    <li role="presentation" class="flex-auto text-center">
+        <a href="#tabs-popular-monthly"
+            class="rounded-r-lg my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:data-[te-nav-active]:text-white"
+            data-te-toggle="pill" data-te-target="#tabs-popular-monthly" role="tab"
+            aria-controls="tabs-popular-monthly" aria-selected="false">
+            {{ __('home.popular-monthly') }}
+        </a>
+    </li>
+</ul>
+
+@php $showThumbnails = true; @endphp
+
+@auth
+    @if (!Auth::user()->home_middle_design)
+        @php $showThumbnails = false; @endphp
+    @endif
+@endauth
+
+<!--Tabs content-->
+<div class="mb-6">
+    <div class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
+        id="tabs-most-views" role="tabpanel" aria-labelledby="tabs-most-views-tab" data-te-tab-active>
+        @include('home.partials.tab.template', [
+            'episodes' => $popularAllTime,
+            'showThumbnails' => $showThumbnails,
+        ])
+        <div class="grid text-center pt-5 ">
+            <a href="{{ route('hentai.search', ['order' => 'view-count']) }}"
+                class="rounded bg-rose-600 p-1 mr-2 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
+                <i class="fa-solid fa-magnifying-glass"></i> {{ __('home.show-more-with-most-views') }}
+            </a>
+        </div>
+    </div>
+    <div class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
+        id="tabs-most-likes" role="tabpanel" aria-labelledby="tabs-most-likes-tab">
+        @include('home.partials.tab.template', [
+            'episodes' => $mostLikes,
+            'showThumbnails' => $showThumbnails,
+        ])
+        <div class="grid text-center pt-5 ">
+            <a href="{{ route('hentai.search', ['order' => 'view-count']) }}"
+                class="rounded invisible bg-rose-600 p-1 mr-2 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
+                <i class="fa-solid fa-magnifying-glass"></i> {{ __('home.show-more') }}
+            </a>
+        </div>
+    </div>
+    <div class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
+        id="tabs-popular-weekly" role="tabpanel" aria-labelledby="tabs-popular-weekly-tab">
+        @include('home.partials.tab.template', [
+            'episodes' => $popularWeekly,
+            'showThumbnails' => $showThumbnails,
+            'popularView' => true,
+        ])
+        <div class="grid text-center pt-5 ">
+            <a href="{{ route('hentai.search', ['order' => 'recently-released']) }}"
+                class="rounded invisible bg-rose-600 p-1 mr-2 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
+                <i class="fa-solid fa-magnifying-glass"></i> {{ __('home.show-more') }}
+            </a>
+        </div>
+    </div>
+    <div class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block"
+        id="tabs-popular-monthly" role="tabpanel" aria-labelledby="tabs-popular-monthly-tab">
+        @include('home.partials.tab.template', [
+            'episodes' => $popularMonthly,
+            'showThumbnails' => $showThumbnails,
+            'popularView' => true,
+        ])
+        <div class="grid text-center pt-5 ">
+            <a href="{{ route('hentai.search', ['order' => 'recently-released']) }}"
+                class="rounded invisible bg-rose-600 p-1 mr-2 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
+                <i class="fa-solid fa-magnifying-glass"></i> {{ __('home.show-more') }}
+            </a>
+        </div>
+    </div>
+</div>

resources/views/home/partials/tabs-top.blade.php

@@ -0,0 +1,61 @@
+<!--Tabs navigation-->
+<ul class="-mb-6 flex list-none flex-row flex-wrap border-b-0 pl-0 relative z-10" role="tablist" data-te-nav-ref>
+    <li role="presentation" class="flex-auto text-center">
+        <a href="#tabs-recently-uploaded" class="rounded-l-lg my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-950/50 backdrop-blur-sm dark:hover:bg-neutral-800 dark:data-[te-nav-active]:text-white"
+            data-te-toggle="pill" data-te-target="#tabs-recently-uploaded" data-te-nav-active role="tab" aria-controls="tabs-recently-uploaded" aria-selected="true">
+            {{ __('home.recently-uploaded') }} ({{ Carbon\Carbon::parse($recentlyUploaded[0]->created_at)->diffForHumans([ 'parts' => 2 ]) }})
+        </a>
+    </li>
+    <li role="presentation" class="flex-auto text-center">
+        <a href="#tabs-recently-released" class="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-950/50 backdrop-blur-sm dark:hover:bg-neutral-800 dark:data-[te-nav-active]:text-white"
+            data-te-toggle="pill" data-te-target="#tabs-recently-released" role="tab" aria-controls="tabs-recently-released" aria-selected="false">
+            {{ __('home.recently-released') }}
+        </a>
+    </li>
+    <li role="presentation" class="flex-auto text-center">
+        <a href="#tabs-trending" class="rounded-r-lg my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-950/50 backdrop-blur-sm dark:hover:bg-neutral-800 dark:data-[te-nav-active]:text-white"
+            data-te-toggle="pill" data-te-target="#tabs-trending" role="tab" aria-controls="tabs-trending" aria-selected="false">
+            {{ __('home.trending') }}
+        </a>
+    </li>
+
+</ul>
+
+@php $showThumbnails = false; @endphp
+
+@auth
+@if(Auth::user()->home_top_design)
+    @php $showThumbnails = true; @endphp
+@endif
+@endauth
+
+<!--Tabs content-->
+<div class="mb-6">
+    <div class="hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block" id="tabs-recently-uploaded" role="tabpanel" aria-labelledby="tabs-recently-uploaded-tab" data-te-tab-active>
+        @include('home.partials.tab.template', ['episodes' => $recentlyUploaded, 'showThumbnails' => $showThumbnails])
+        <div class="grid text-center pt-5 ">
+            <a href="{{ route('hentai.search', ['order' => 'recently-uploaded']) }}"
+                class="rounded bg-rose-600 p-1 mr-2 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
+                <i class="fa-solid fa-magnifying-glass"></i> {{ __('home.show-more-recently-uploaded') }}
+            </a>
+        </div>
+    </div>
+    <div class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block" id="tabs-recently-released" role="tabpanel"aria-labelledby="tabs-recently-released-tab">
+        @include('home.partials.tab.template', ['episodes' => $recentlyReleased, 'showThumbnails' => $showThumbnails])
+        <div class="grid text-center pt-5 ">
+            <a href="{{ route('hentai.search', ['order' => 'recently-released']) }}"
+                class="rounded bg-rose-600 p-1 mr-2 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
+                <i class="fa-solid fa-magnifying-glass"></i> {{ __('home.show-more-recently-released') }}
+            </a>
+        </div>
+    </div>
+    <div class="hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block" id="tabs-trending" role="tabpanel"aria-labelledby="tabs-trending-tab">
+        @include('home.partials.tab.template', ['episodes' => $popularDaily, 'showThumbnails' => $showThumbnails, 'popularView' => true])
+        <div class="grid text-center pt-5 ">
+            <a href="{{ route('hentai.search', ['order' => 'recently-released']) }}"
+                class="rounded invisible bg-rose-600 p-1 mr-2 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
+                <i class="fa-solid fa-magnifying-glass"></i> {{ __('home.show-more') }}
+            </a>
+        </div>
+    </div>
+</div>

resources/views/home/stats.blade.php

@@ -0,0 +1,52 @@
+<x-app-layout>
+    <div class="container my-24 mx-auto md:px-6 z-10 relative">
+        <section class="mb-32 text-center">
+            <div class="flex justify-center pb-10">
+                <img src="/images/cropped-HS-1-270x270.webp" class="max-w-[150px]" alt="hstream.moe Logo" />
+            </div>
+            <div class="grid md:grid-cols-5 lg:gap-x-12">
+                <div class="mb-12 md:mb-0">
+                    <div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-sky-500">
+                        <i class="fa-solid fa-eye text-3xl"> {{ number_format($viewCount) }}</i>
+                    </div>
+                    <h5 class="text-lg font-medium  dark:text-neutral-300">
+                        total views
+                    </h5>
+                </div>
+                <div class="mb-12 md:mb-0">
+                    <div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-sky-500">
+                        <i class="fa-solid fa-calendar-days text-3xl"> {{ number_format($monthlyCount) }}</i>
+                    </div>
+                    <h5 class="text-lg font-medium  dark:text-neutral-300">
+                        views the last 30 days
+                    </h5>
+                </div>
+                <div class="mb-12 md:mb-0">
+                    <div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-rose-600">
+                        <i class="fa-solid fa-video text-3xl"> {{ $episodeCount }}</i>
+                    </div>
+                    <h5 class="text-lg font-medium  dark:text-neutral-300">
+                        episodes on this site
+                    </h5>
+                </div>
+                <div class="mb-12 md:mb-0">
+                    <div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-rose-600">
+                        <i class="fa-solid fa-list text-3xl"> {{ $hentaiCount }}</i>
+                    </div>
+                    <h5 class="text-lg font-medium  dark:text-neutral-300">
+                        hentais on this site
+                    </h5>
+                </div>
+                <div class="mb-12 md:mb-0">
+                    <div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-rose-600">
+                        <i class="fa-solid fa-clock text-3xl"> {{ number_format($viewCount * 6) }}</i>
+                    </div>
+                    <h5 class="text-lg font-medium  dark:text-neutral-300">
+                    estimated minutes of watch time
+                    </h5>
+                </div>
+            </div>
+        </section>
+        <p class="text-center text-black/40 dark:text-white/40">Cached for 60 Minutes</p>
+    </div>
+</x-app-layout>