resources/views/login2.blade.php

@@ -43,7 +43,7 @@
                             class="w-full mt-4 bg-[#f9f9f9] border-b-2 border-primary pl-1 pr-4 py-2 focus:outline-none"
                             placeholder="" value="{{ old('email') ?? 'nbdev@netbay.co.th' }}" name="email">
                         <div class="absolute inset-y-0 right-0 flex items-center pr-3">
-                            <i class="fa fa-user text-primary text-lg" aria-hidden="true"></i>
+                            <i aria-hidden="true" class="fa fa-user text-primary text-lg" aria-hidden="true"></i>
                         </div>
                         @error('email')
                             <span class="text-tiny+ text-error">{{ $message }}</span>
@@ -56,7 +56,7 @@
                             class="w-full mt-4 bg-[#f9f9f9] border-b-2 border-primary pl-1 pr-4 py-2 focus:outline-none"
                             placeholder="" value="{{ old('password') ?? 'password' }}" name="password">
                         <div class="absolute inset-y-0 right-0 flex items-center pr-3">
-                            <i class="fa fa-unlock-alt text-primary text-lg" aria-hidden="true"></i>
+                            <i aria-hidden="true" class="fa fa-unlock-alt text-primary text-lg" aria-hidden="true"></i>
                         </div>
                         @error('password')
                             <span class="text-tiny+ text-error">{{ $message }}</span>

resources/views/login3.blade.php

+<!-- resources/views/auth/login.blade.php -->
+@extends('layouts.guest')
+
+@section('content')
+<div class="flex items-center justify-center min-h-screen bg-gray-100">
+    <div class="w-full max-w-md">
+        <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+            <h2 class="text-center text-2xl font-bold mb-6">Login</h2>
+            <form method="POST" action="{{ route('login') }}">
+                @csrf
+
+                <div class="mb-4">
+                    <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email Address</label>
+                    <input id="email" type="email" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus
+                           class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                    @error('email')
+                    <span class="text-red-500 text-sm mt-2">{{ $message }}</span>
+                    @enderror
+                </div>
+
+                <div class="mb-4">
+                    <label for="password" class="block text-gray-700 text-sm font-bold mb-2">Password</label>
+                    <input id="password" type="password" name="password" required autocomplete="current-password"
+                           class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                    @error('password')
+                    <span class="text-red-500 text-sm mt-2">{{ $message }}</span>
+                    @enderror
+                </div>
+
+                <div class="mb-6">
+                    <label class="block text-gray-500 font-bold">
+                        <input class="mr-2 leading-tight" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
+                        <span class="text-sm">Remember Me</span>
+                    </label>
+                </div>
+
+                <div class="flex items-center justify-between">
+                    <button type="submit"
+                            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
+                        Login
+                    </button>
+                    @if (Route::has('password.request'))
+                        <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
+                           href="{{ route('password.request') }}">
+                            Forgot Password?
+                        </a>
+                    @endif
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+@endsection

resources/views/manual-response/index.blade.php

+<x-app-layout title="Starter Sideblock" is-sidebar-open="true" is-header-blur="true">
+     <style> [x-cloak] {
+        display: none;
+    }</style>
+    <!-- Main Content Wrapper -->
+    <main class="main-content w-full pb-8">
+        <livewire:pages.manual-response.manual-response/>
+        <x-modals.alert-modal name="send-response"></x-modals.alert-modal>
+    </main>
+</x-app-layout>
\ No newline at end of file

resources/views/pages/apps-chat.blade.php

-<x-base-layout title="Chat App" is-sidebar-open="true" has-min-sidebar="true">
-    <!-- Sidebar -->
-    <div class="sidebar print:hidden">
-        <!-- Main Sidebar -->
-        <x-app-partials.main-sidebar></x-app-partials.main-sidebar>
-
-        <!-- Sidebar Panel -->
-        <div class="sidebar-panel">
-            <div class="flex h-full grow flex-col bg-white pl-[var(--main-sidebar-width)] dark:bg-navy-750">
-                <!-- Sidebar Panel Header -->
-                <div class="flex h-18 w-full items-center justify-between pl-4 pr-1">
-                    <div class="flex items-center">
-                        <div class="avatar mr-3 hidden h-9 w-9 lg:flex">
-                            <div
-                                class="is-initial rounded-full bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                                    stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-                                </svg>
-                            </div>
-                        </div>
-                        <p class="text-lg font-medium tracking-wider text-slate-800 line-clamp-1 dark:text-navy-100">
-                            Chat
-                        </p>
-                    </div>
-
-                    <button @click="$store.global.isSidebarExpanded = false"
-                        class="btn h-7 w-7 rounded-full p-0 text-primary hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-accent-light/80 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 xl:hidden">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-                        </svg>
-                    </button>
-
-                </div>
-
-                <!-- Sidebar Panel Body -->
-                <div class="flex h-[calc(100%-4.5rem)] grow flex-col">
-                    <div>
-                        <div class="flex items-center justify-between px-4">
-                            <span class="text-xs+ font-medium uppercase">History</span>
-                            <div class="-mr-1.5 flex">
-                                <button
-                                    class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                        <div class="swiper px-4" x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { slidesPerView: 'auto', spaceBetween: 10, slidesPerGroup: 3 }))">
-                            <div class="swiper-wrapper mt-1">
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Konnor
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Travis
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Fuller
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Alfredo
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Elliott
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Derrick
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Simmons
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Katrina
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Henry
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Curtis
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Bradley
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Samantha
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Corey
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Lance
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Tucker
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Jensen
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Perkins
-                                    </p>
-                                </div>
-                                <div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
-                                    <div
-                                        class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
-                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
-                                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                    </div>
-                                    <p
-                                        class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Evans
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="mt-4 flex px-4">
-                        <label class="relative mr-1.5 flex">
-                            <input
-                                class="form-input peer h-8 w-full rounded-lg bg-slate-150 px-3 py-2 pl-9 text-xs+ ring-primary/50 placeholder:text-slate-400 hover:bg-slate-200 focus:ring dark:bg-navy-900/90 dark:ring-accent/50 dark:placeholder:text-navy-300 dark:hover:bg-navy-900 dark:focus:bg-navy-900"
-                                placeholder="Search chats" type="text" />
-                            <span
-                                class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-colors duration-200"
-                                    fill="currentColor" viewBox="0 0 24 24">
-                                    <path
-                                        d="M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z" />
-                                </svg>
-                            </span>
-                        </label>
-
-                        <button
-                            class="btn -mr-2 h-8 w-8 shrink-0 rounded-full p-0 text-slate-500 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:text-navy-200 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
-                                    d="M22 6.5h-9.5M6 6.5H2M9 9a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM22 17.5h-6M9.5 17.5H2M13 20a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" />
-                            </svg>
-                        </button>
-                    </div>
-
-                    <div class="is-scrollbar-hidden mt-3 flex grow flex-col overflow-y-auto">
-                        <div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Alfredo Elliott'})"
-                            class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
-                            <div class="avatar h-10 w-10">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                <div
-                                    class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-slate-300 dark:border-navy-700">
-                                </div>
-                            </div>
-                            <div class="flex flex-1 flex-col">
-                                <div class="flex items-baseline justify-between space-x-1.5">
-                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                        Alfredo Elliott
-                                    </p>
-                                    <span class="text-tiny+ text-slate-400 dark:text-navy-300">11:03</span>
-                                </div>
-                                <div class="mt-1 flex items-center justify-between space-x-1">
-                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
-                                        😂 Lorem ipsum dolor
-                                    </p>
-                                    <div
-                                        class="flex h-4.5 min-w-[1.125rem] items-center justify-center rounded-full bg-slate-200 px-1.5 text-tiny+ font-medium leading-none text-slate-800 dark:bg-navy-450 dark:text-white">
-                                        5
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Konnor Guzman'})"
-                            class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
-                            <div class="avatar h-10 w-10">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                            </div>
-                            <div class="flex flex-1 flex-col">
-                                <div class="flex items-baseline justify-between space-x-1.5">
-                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                        Konnor Guzman
-                                    </p>
-                                    <span class="text-tiny+ text-slate-400 dark:text-navy-300">09:16</span>
-                                </div>
-                                <div class="mt-1 flex items-center justify-between space-x-1">
-                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
-                                        💣 Adipisicing elit. Prov ident?
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                        <div @click="$dispatch('change-active-chat',{chatId:'chat-3',avatar_url:'/images/200x200.png',name:'Travis Fuller'})"
-                            class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
-                            <div class="avatar h-10 w-10">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                <div
-                                    class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent">
-                                    <span
-                                        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-80 dark:bg-accent"></span>
-                                </div>
-                            </div>
-                            <div class="flex flex-1 flex-col">
-                                <div class="flex items-baseline justify-between space-x-1.5">
-                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                        Travis Fuller
-                                    </p>
-                                    <span class="text-tiny+ text-slate-400 dark:text-navy-300">08:05</span>
-                                </div>
-                                <div class="mt-1 flex items-center justify-between space-x-1">
-                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
-                                        Dolor set. Prov ident?
-                                    </p>
-                                    <div
-                                        class="flex h-4.5 min-w-[1.125rem] items-center justify-center rounded-full bg-primary px-1.5 text-tiny+ font-medium leading-none text-white dark:bg-accent">
-                                        4
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Derrick Simmons'})"
-                            class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
-                            <div class="avatar h-10 w-10">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                <div
-                                    class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-slate-300 dark:border-navy-700">
-                                </div>
-                            </div>
-                            <div class="flex flex-1 flex-col">
-                                <div class="flex items-baseline justify-between space-x-1.5">
-                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                        Derrick Simmons
-                                    </p>
-                                    <span class="text-tiny+ text-slate-400 dark:text-navy-300">06:21</span>
-                                </div>
-                                <div class="mt-1 flex items-center justify-between space-x-1">
-                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
-                                        And that’s why a 15th century
-                                    </p>
-                                    <div
-                                        class="flex h-4.5 min-w-[1.125rem] items-center justify-center rounded-full bg-slate-200 px-1.5 text-tiny+ font-medium leading-none text-slate-800 dark:bg-navy-450 dark:text-white">
-                                        2
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Katrina West'})"
-                            class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
-                            <div class="avatar h-10 w-10">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                <div
-                                    class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-slate-300 dark:border-navy-700">
-                                </div>
-                            </div>
-                            <div class="flex flex-1 flex-col">
-                                <div class="flex items-baseline justify-between space-x-1.5">
-                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                        Katrina West
-                                    </p>
-                                    <span class="text-tiny+ text-slate-400 dark:text-navy-300">06:21</span>
-                                </div>
-                                <div class="mt-1 flex items-center justify-between space-x-1">
-                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
-                                        he wanted people to focus
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                        <div @click="$dispatch('change-active-chat',{chatId:'chat-3',avatar_url:'/images/200x200.png',name:'Corey Evans'})"
-                            class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
-                            <div class="avatar h-10 w-10">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                            </div>
-                            <div class="flex flex-1 flex-col">
-                                <div class="flex items-baseline justify-between space-x-1.5">
-                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                        Corey Evans
-                                    </p>
-                                    <span class="text-tiny+ text-slate-400 dark:text-navy-300">Tue</span>
-                                </div>
-                                <div class="mt-1 flex items-center justify-between space-x-1">
-                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
-                                        Ut enim ad minim veniam
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                        <div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Anthony Jensen'})"
-                            class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
-                            <div class="avatar h-10 w-10">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                            </div>
-                            <div class="flex flex-1 flex-col">
-                                <div class="flex items-baseline justify-between space-x-1.5">
-                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                        Anthony Jensen
-                                    </p>
-                                    <span class="text-tiny+ text-slate-400 dark:text-navy-300">Tue</span>
-                                </div>
-                                <div class="mt-1 flex items-center justify-between space-x-1">
-                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
-                                        Excepteur sint occaecat cupidatat
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                        <div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Lance Tucker'})"
-                            class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
-                            <div class="avatar h-10 w-10">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                            </div>
-                            <div class="flex flex-1 flex-col">
-                                <div class="flex items-baseline justify-between space-x-1.5">
-                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                        Lance Tucker
-                                    </p>
-                                    <span class="text-tiny+ text-slate-400 dark:text-navy-300">Tue</span>
-                                </div>
-                                <div class="mt-1 flex items-center justify-between space-x-1">
-                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
-                                        Duis aute irure dolor in
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Alfredo Elliott'})"
-                            class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
-                            <div class="avatar h-10 w-10">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                <div
-                                    class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-slate-300 dark:border-navy-700">
-                                </div>
-                            </div>
-                            <div class="flex flex-1 flex-col">
-                                <div class="flex items-baseline justify-between space-x-1.5">
-                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                        Alfredo Elliott
-                                    </p>
-                                    <span class="text-tiny+ text-slate-400 dark:text-navy-300">11:03</span>
-                                </div>
-                                <div class="mt-1 flex items-center justify-between space-x-1">
-                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
-                                        😂 Lorem ipsum dolor
-                                    </p>
-                                    <div
-                                        class="flex h-4.5 min-w-[1.125rem] items-center justify-center rounded-full bg-slate-200 px-1.5 text-tiny+ font-medium leading-none text-slate-800 dark:bg-navy-450 dark:text-white">
-                                        5
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Konnor Guzman'})"
-                            class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
-                            <div class="avatar h-10 w-10">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                            </div>
-                            <div class="flex flex-1 flex-col">
-                                <div class="flex items-baseline justify-between space-x-1.5">
-                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                        Konnor Guzman
-                                    </p>
-                                    <span class="text-tiny+ text-slate-400 dark:text-navy-300">09:16</span>
-                                </div>
-                                <div class="mt-1 flex items-center justify-between space-x-1">
-                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
-                                        💣 Adipisicing elit. Prov ident?
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                        <div @click="$dispatch('change-active-chat',{chatId:'chat-3',avatar_url:'/images/200x200.png',name:'Travis Fuller'})"
-                            class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
-                            <div class="avatar h-10 w-10">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                <div
-                                    class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent">
-                                    <span
-                                        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-80 dark:bg-accent"></span>
-                                </div>
-                            </div>
-                            <div class="flex flex-1 flex-col">
-                                <div class="flex items-baseline justify-between space-x-1.5">
-                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                        Travis Fuller
-                                    </p>
-                                    <span class="text-tiny+ text-slate-400 dark:text-navy-300">08:05</span>
-                                </div>
-                                <div class="mt-1 flex items-center justify-between space-x-1">
-                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
-                                        Dolor set. Prov ident?
-                                    </p>
-                                    <div
-                                        class="flex h-4.5 min-w-[1.125rem] items-center justify-center rounded-full bg-primary px-1.5 text-tiny+ font-medium leading-none text-white dark:bg-accent">
-                                        4
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Derrick Simmons'})"
-                            class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
-                            <div class="avatar h-10 w-10">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                <div
-                                    class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-slate-300 dark:border-navy-700">
-                                </div>
-                            </div>
-                            <div class="flex flex-1 flex-col">
-                                <div class="flex items-baseline justify-between space-x-1.5">
-                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                        Derrick Simmons
-                                    </p>
-                                    <span class="text-tiny+ text-slate-400 dark:text-navy-300">06:21</span>
-                                </div>
-                                <div class="mt-1 flex items-center justify-between space-x-1">
-                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
-                                        And that’s why a 15th century
-                                    </p>
-                                    <div
-                                        class="flex h-4.5 min-w-[1.125rem] items-center justify-center rounded-full bg-slate-200 px-1.5 text-tiny+ font-medium leading-none text-slate-800 dark:bg-navy-450 dark:text-white">
-                                        2
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Katrina West'})"
-                            class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
-                            <div class="avatar h-10 w-10">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                <div
-                                    class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-slate-300 dark:border-navy-700">
-                                </div>
-                            </div>
-                            <div class="flex flex-1 flex-col">
-                                <div class="flex items-baseline justify-between space-x-1.5">
-                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                        Katrina West
-                                    </p>
-                                    <span class="text-tiny+ text-slate-400 dark:text-navy-300">06:21</span>
-                                </div>
-                                <div class="mt-1 flex items-center justify-between space-x-1">
-                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
-                                        he wanted people to focus
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                        <div @click="$dispatch('change-active-chat',{chatId:'chat-3',avatar_url:'/images/200x200.png',name:'Corey Evans'})"
-                            class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
-                            <div class="avatar h-10 w-10">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                            </div>
-                            <div class="flex flex-1 flex-col">
-                                <div class="flex items-baseline justify-between space-x-1.5">
-                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                        Corey Evans
-                                    </p>
-                                    <span class="text-tiny+ text-slate-400 dark:text-navy-300">Tue</span>
-                                </div>
-                                <div class="mt-1 flex items-center justify-between space-x-1">
-                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
-                                        Ut enim ad minim veniam
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                        <div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Anthony Jensen'})"
-                            class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
-                            <div class="avatar h-10 w-10">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                            </div>
-                            <div class="flex flex-1 flex-col">
-                                <div class="flex items-baseline justify-between space-x-1.5">
-                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                        Anthony Jensen
-                                    </p>
-                                    <span class="text-tiny+ text-slate-400 dark:text-navy-300">Tue</span>
-                                </div>
-                                <div class="mt-1 flex items-center justify-between space-x-1">
-                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
-                                        Excepteur sint occaecat cupidatat
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                        <div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Lance Tucker'})"
-                            class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
-                            <div class="avatar h-10 w-10">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                            </div>
-                            <div class="flex flex-1 flex-col">
-                                <div class="flex items-baseline justify-between space-x-1.5">
-                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                        Lance Tucker
-                                    </p>
-                                    <span class="text-tiny+ text-slate-400 dark:text-navy-300">Tue</span>
-                                </div>
-                                <div class="mt-1 flex items-center justify-between space-x-1">
-                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
-                                        Duis aute irure dolor in
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div
-                        class="flex h-12 shrink-0 justify-between border-t border-slate-150 px-1.5 py-1 dark:border-navy-600">
-                        <a href="#" x-tooltip="'All Chats'"
-                            class="btn h-9 w-9 rounded-full p-0 text-primary hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-accent dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
-                                fill="currentColor">
-                                <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
-                                <path
-                                    d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
-                            </svg>
-                        </a>
-                        <a href="#" x-tooltip="'Users'"
-                            class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-                            </svg>
-                        </a>
-
-                        <a href="#" x-tooltip="'Groups'"
-                            class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-                            </svg>
-                        </a>
-                        <a href="#" x-tooltip="'Channels'"
-                            class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" />
-                            </svg>
-                        </a>
-
-                        <a href="#" x-tooltip="'More'"
-                            class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Minimized Sidebar Panel -->
-        <div class="sidebar-panel-min">
-            <div class="flex h-full flex-col bg-white dark:bg-navy-750">
-                <div class="flex h-18 shrink-0 items-center justify-center">
-                    <div class="avatar flex h-10 w-10">
-                        <div
-                            class="is-initial is-initial rounded-full bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light">
-                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                xmlns="http://www.w3.org/2000/svg" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-                            </svg>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="flex h-[calc(100%-4.5rem)] grow flex-col">
-                    <div class="is-scrollbar-hidden flex grow flex-col overflow-y-auto">
-                        <ul class="mt-2 flex flex-col items-center justify-center space-y-1">
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                                    </svg>
-                                </a>
-                            </li>
-                        </ul>
-                        <div class="my-4 mx-4 h-px shrink-0 bg-slate-200 dark:bg-navy-500"></div>
-                        <div class="flex flex-col">
-                            <div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Alfredo Elliott'})"
-                                class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                    <div
-                                        class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-slate-300 dark:border-navy-700">
-                                    </div>
-                                </div>
-                            </div>
-                            <div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Konnor Guzman'})"
-                                class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                            </div>
-                            <div @click="$dispatch('change-active-chat',{chatId:'chat-3',avatar_url:'/images/200x200.png',name:'Travis Fuller'})"
-                                class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-
-                                    <div
-                                        class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent">
-                                        <span
-                                            class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-80 dark:bg-accent"></span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Derrick Simmons'})"
-                                class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                    <div
-                                        class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-slate-300 dark:border-navy-700">
-                                    </div>
-                                </div>
-                            </div>
-                            <div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Katrina West'})"
-                                class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                    <div
-                                        class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-slate-300 dark:border-navy-700">
-                                    </div>
-                                </div>
-                            </div>
-                            <div @click="$dispatch('change-active-chat',{chatId:'chat-3',avatar_url:'/images/200x200.png',name:'Corey Evans'})"
-                                class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                            </div>
-                            <div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Anthony Jensen'})"
-                                class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                            </div>
-                            <div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Lance Tucker'})"
-                                class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                            </div>
-                            <div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Alfredo Elliott'})"
-                                class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                    <div
-                                        class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-slate-300 dark:border-navy-700">
-                                    </div>
-                                </div>
-                            </div>
-                            <div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Konnor Guzman'})"
-                                class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                            </div>
-                            <div @click="$dispatch('change-active-chat',{chatId:'chat-3',avatar_url:'/images/200x200.png',name:'Travis Fuller'})"
-                                class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                    <div
-                                        class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent">
-                                        <span
-                                            class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-80 dark:bg-accent"></span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Derrick Simmons'})"
-                                class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                    <div
-                                        class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-slate-300 dark:border-navy-700">
-                                    </div>
-                                </div>
-                            </div>
-                            <div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Katrina West'})"
-                                class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                    <div
-                                        class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-slate-300 dark:border-navy-700">
-                                    </div>
-                                </div>
-                            </div>
-                            <div @click="$dispatch('change-active-chat',{chatId:'chat-3',avatar_url:'/images/200x200.png',name:'Corey Evans'})"
-                                class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                            </div>
-                            <div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Anthony Jensen'})"
-                                class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                            </div>
-                            <div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Lance Tucker'})"
-                                class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="flex flex-col items-center justify-center py-3">
-                        <div x-data="usePopper({ placement: 'right-start', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn h-10 w-10 rounded-full border border-slate-200 p-0 font-medium hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-500 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-
-                            <template x-teleport="#x-teleport-target">
-                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                    <div
-                                        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                    Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                    else</a>
-                                            </li>
-                                        </ul>
-                                        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                    Link</a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-    </div>
-
-    <!-- Right Sidebar -->
-    <x-app-partials.right-sidebar></x-app-partials.right-sidebar>
-
-    <!-- Main Content Wrapper -->
-    <main x-data="{ isShowChatInfo: !$store.breakpoints.mdAndDown, activeChat: { chatId: 'chat-1', name: 'Alfredo Elliott', avatar_url: '/images/200x200.png' } }" x-effect="$store.breakpoints.mdAndDown === true && (isShowChatInfo = false)"
-        class="main-content h-100vh chat-app mt-0 flex w-full flex-col" :class="isShowChatInfo && 'lg:mr-80'"
-        @change-active-chat.window="activeChat=$event.detail">
-        <div
-            class="chat-header h-[61px] border-b border-slate-150 dark:border-navy-700 relative z-10 flex w-full shrink-0 items-center justify-between bg-white px-[calc(var(--margin-x)-.5rem)] shadow-sm transition-[padding,width] duration-[.25s] dark:bg-navy-800">
-            <div class="flex items-center space-x-5">
-                <div class="ml-1 h-7 w-7">
-                    <button
-                        class="menu-toggle ml-0.5 flex h-7 w-7 flex-col justify-center space-y-1.5 text-primary outline-none focus:outline-none dark:text-accent-light/80"
-                        :class="$store.global.isSidebarExpanded && 'active'"
-                        @click="$store.global.isSidebarExpanded = !$store.global.isSidebarExpanded">
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                    </button>
-                </div>
-                <div @click="isShowChatInfo = true" class="flex cursor-pointer items-center space-x-4 font-inter">
-                    <div class="avatar">
-                        <img class="rounded-full" :src="activeChat.avatar_url" alt="avatar" />
-                    </div>
-                    <div>
-                        <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
-                            x-text="activeChat.name"></p>
-                        <p class="mt-0.5 text-xs">Last seen recently</p>
-                    </div>
-                </div>
-            </div>
-            <div class="-mr-1 flex items-center">
-                <button
-                    class="btn hidden h-9 w-9 rounded-full p-0 text-slate-500 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-200 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:flex">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor" stroke-width="1.5">
-                        <path stroke-linecap="round" stroke-linejoin="round"
-                            d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
-                    </svg>
-                </button>
-                <button
-                    class="btn h-9 w-9 rounded-full p-0 text-slate-500 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-200 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor" stroke-width="1.5">
-                        <path stroke-linecap="round" stroke-linejoin="round"
-                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                    </svg>
-                </button>
-                <button @click="isShowChatInfo = !isShowChatInfo"
-                    :class="isShowChatInfo ? 'text-primary dark:text-accent-light' : 'text-slate-500 dark:text-navy-200'"
-                    class="btn hidden h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:flex">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none" stroke="currentColor"
-                        stroke-width="1.5" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round"
-                            d="M9.25 21.167h5.5c4.584 0 6.417-1.834 6.417-6.417v-5.5c0-4.583-1.834-6.417-6.417-6.417h-5.5c-4.583 0-6.417 1.834-6.417 6.417v5.5c0 4.583 1.834 6.417 6.417 6.417ZM13.834 2.833v18.334" />
-                    </svg>
-                </button>
-                <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                    class="inline-flex">
-                    <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                        class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                        </svg>
-                    </button>
-
-                    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                        <div
-                            class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                            <ul>
-                                <li>
-                                    <a href="#"
-                                        class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="mt-px h-5 w-5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
-                                                clip-rule="evenodd" />
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" />
-                                        </svg>
-                                        <span>Unmute</span></a>
-                                </li>
-                                <li>
-                                    <a href="#"
-                                        class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="mt-px h-5 w-5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                                        </svg>
-                                        <span>Chat Setting</span></a>
-                                </li>
-                                <li>
-                                    <a href="#"
-                                        class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="mt-px h-5 w-5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
-                                        </svg>
-                                        <span>Block User</span></a>
-                                </li>
-                                <li>
-                                    <a href="#"
-                                        class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                                        </svg>
-                                        <span> Delete chat</span></a>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div :class="$store.breakpoints.smAndUp && 'scrollbar-sm'"
-            class="grow overflow-y-auto px-[calc(var(--margin-x)-.5rem)] py-5 transition-all duration-[.25s]">
-            <div x-show="activeChat.chatId === 'chat-1'" x-transition:enter="transition-all duration-500 easy-in-out"
-                x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
-                x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]" class="space-y-5">
-                <div class="mx-4 flex items-center space-x-3">
-                    <div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
-                    <p>Sunday</p>
-                    <div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
-                </div>
-
-                <div class="flex items-start space-x-2.5 sm:space-x-5">
-                    <div class="avatar">
-                        <img class="rounded-full" :src="activeChat.avatar_url" alt="avatar" />
-                    </div>
-
-                    <div class="flex flex-col items-start space-y-3.5">
-                        <div class="mr-4 max-w-lg sm:mr-10">
-                            <div
-                                class="rounded-2xl rounded-tl-none bg-white p-3 text-slate-700 shadow-sm dark:bg-navy-700 dark:text-navy-100">
-                                Hello My Dear. Lorem ipsum dolor sit amet, consectetur.
-                            </div>
-                            <p class="mt-1 ml-auto text-right text-xs text-slate-400 dark:text-navy-300">
-                                08:16
-                            </p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="flex items-start justify-end space-x-2.5 sm:space-x-5">
-                    <div class="flex flex-col items-end space-y-3.5">
-                        <div class="ml-4 max-w-lg md:ml-10">
-                            <div
-                                class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                                Assumenda necessitatibus, ratione. Voluptatum.
-                            </div>
-                        </div>
-                        <div class="ml-4 max-w-lg md:ml-10">
-                            <div
-                                class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
-                                And that’s why a 15th century
-                            </div>
-                            <p class="mt-1 ml-auto text-left text-xs text-slate-400 dark:text-navy-300">
-                                08:16
-                            </p>
-                        </div>
-                    </div>
-                    <div class="avatar">
-                        <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                    </div>
-                </div>
-
-                <div class="flex items-start space-x-2.5 sm:space-x-5">
-                    <div class="avatar">
-                        <img class="rounded-full" :src="activeChat.avatar_url" alt="avatar" />
-                    </div>
-
-                    <div class="flex flex-col items-start space-y-3.5">
-                        <div class="mr-4 max-w-lg sm:mr-10">
-                            <div
-                                class="rounded-2xl rounded-tl-none bg-white p-3 text-slate-700 shadow-sm dark:bg-navy-700 dark:text-navy-100">
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                                Eius.
-                            </div>
-                            <p class="mt-1 ml-auto text-right text-xs text-slate-400 dark:text-navy-300">
-                                08:16
-                            </p>
-                        </div>
-                        <div class="mr-4 max-w-lg sm:mr-10">
-                            <div class="grid grid-cols-12 gap-2">
-                                <div class="group relative col-span-12 sm:col-span-4">
-                                    <img class="h-full rounded-lg object-cover"
-                                        src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    <div
-                                        class="absolute top-0 flex h-full w-full items-center justify-center rounded-lg bg-black/30 opacity-0 transition-all duration-300 group-hover:opacity-100">
-                                        <button
-                                            class="btn h-9 w-9 rounded-full bg-info p-0 font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                                viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                </div>
-
-                                <div class="col-span-12 grid grid-cols-2 gap-2 sm:col-span-8">
-                                    <div class="group relative">
-                                        <img class="h-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <div
-                                            class="absolute top-0 flex h-full w-full items-center justify-center rounded-lg bg-black/30 opacity-0 transition-all duration-300 group-hover:opacity-100">
-                                            <button
-                                                class="btn h-9 w-9 rounded-full bg-info p-0 font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                                                </svg>
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="group relative">
-                                        <img class="h-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <div
-                                            class="absolute top-0 flex h-full w-full items-center justify-center rounded-lg bg-black/30 opacity-0 transition-all duration-300 group-hover:opacity-100">
-                                            <button
-                                                class="btn h-9 w-9 rounded-full bg-info p-0 font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                                                </svg>
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="group relative">
-                                        <img class="h-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <div
-                                            class="absolute top-0 flex h-full w-full items-center justify-center rounded-lg bg-black/30 opacity-0 transition-all duration-300 group-hover:opacity-100">
-                                            <button
-                                                class="btn h-9 w-9 rounded-full bg-info p-0 font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                                                </svg>
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="group relative">
-                                        <img class="h-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <div
-                                            class="absolute top-0 flex h-full w-full items-center justify-center rounded-lg bg-black/30 opacity-0 transition-all duration-300 group-hover:opacity-100">
-                                            <button
-                                                class="btn h-9 w-9 rounded-full bg-info p-0 font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                                                </svg>
-                                            </button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <p class="mt-1 ml-auto text-right text-xs text-slate-400 dark:text-navy-300">
-                                08:21
-                            </p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="mx-4 flex items-center space-x-3">
-                    <div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
-                    <p>Monday</p>
-                    <div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
-                </div>
-
-                <div class="flex items-start justify-end space-x-2.5 sm:space-x-5">
-                    <div class="flex flex-col items-end space-y-3.5">
-                        <div class="ml-4 max-w-lg md:ml-10">
-                            <div class="group relative">
-                                <img class="h-48 rounded-lg object-cover" src="{{ asset('images/800x600.png') }}"
-                                    alt="image" />
-                                <div
-                                    class="absolute top-0 flex h-full w-full items-center justify-center rounded-lg bg-black/30 opacity-0 transition-all duration-300 group-hover:opacity-100">
-                                    <button
-                                        class="btn h-9 w-9 rounded-full bg-info p-0 font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                                        </svg>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="ml-4 max-w-lg md:ml-10">
-                            <div
-                                class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
-                                Please Download This File
-                            </div>
-                            <p class="mt-1 ml-auto text-left text-xs text-slate-400 dark:text-navy-300">
-                                08:16
-                            </p>
-                        </div>
-                    </div>
-                    <div class="avatar">
-                        <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                    </div>
-                </div>
-            </div>
-            <div x-show="activeChat.chatId === 'chat-2'" x-transition:enter="transition-all duration-500 easy-in-out"
-                x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
-                x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]" class="space-y-5">
-                <div class="mx-4 flex items-center space-x-3">
-                    <div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
-                    <p>Yesterday</p>
-                    <div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
-                </div>
-
-                <div class="flex items-start space-x-2.5 sm:space-x-5">
-                    <div class="avatar">
-                        <img class="rounded-full" :src="activeChat.avatar_url" alt="avatar" />
-                    </div>
-
-                    <div class="flex flex-col items-start space-y-3.5">
-                        <div class="mr-4 max-w-lg sm:mr-10">
-                            <div
-                                class="rounded-2xl rounded-tl-none bg-white p-3 text-slate-700 shadow-sm dark:bg-navy-700 dark:text-navy-100">
-                                Hello My Dear. Lorem ipsum dolor sit amet, consectetur.
-                            </div>
-                            <p class="mt-1 ml-auto text-right text-xs text-slate-400 dark:text-navy-300">
-                                08:16
-                            </p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="flex items-start justify-end space-x-2.5 sm:space-x-5">
-                    <div class="flex flex-col items-end space-y-3.5">
-                        <div class="ml-4 max-w-lg md:ml-10">
-                            <div
-                                class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                                Assumenda necessitatibus, ratione. Voluptatum.
-                            </div>
-                        </div>
-                        <div class="ml-4 max-w-lg md:ml-10">
-                            <div
-                                class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
-                                And that’s why a 15th century
-                            </div>
-                            <p class="mt-1 ml-auto text-left text-xs text-slate-400 dark:text-navy-300">
-                                08:16
-                            </p>
-                        </div>
-                    </div>
-                    <div class="avatar">
-                        <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                    </div>
-                </div>
-            </div>
-            <div x-show="activeChat.chatId === 'chat-3'" x-transition:enter="transition-all duration-500 easy-in-out"
-                x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
-                x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]" class="space-y-5">
-                <div class="mx-4 flex items-center space-x-3">
-                    <div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
-                    <p>Sunday</p>
-                    <div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
-                </div>
-
-                <div class="flex items-start space-x-2.5 sm:space-x-5">
-                    <div class="avatar">
-                        <img class="rounded-full" :src="activeChat.avatar_url" alt="avatar" />
-                    </div>
-
-                    <div class="flex flex-col items-start space-y-3.5">
-                        <div class="mr-4 max-w-lg sm:mr-10">
-                            <div
-                                class="rounded-2xl rounded-tl-none bg-white p-3 text-slate-700 shadow-sm dark:bg-navy-700 dark:text-navy-100">
-                                Hello My Dear. Lorem ipsum dolor sit amet, consectetur.
-                            </div>
-                            <p class="mt-1 ml-auto text-right text-xs text-slate-400 dark:text-navy-300">
-                                08:16
-                            </p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="flex items-start justify-end space-x-2.5 sm:space-x-5">
-                    <div class="flex flex-col items-end space-y-3.5">
-                        <div class="ml-4 max-w-lg md:ml-10">
-                            <div
-                                class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                                Assumenda necessitatibus, ratione. Voluptatum.
-                            </div>
-                        </div>
-                        <div class="ml-4 max-w-lg md:ml-10">
-                            <div
-                                class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
-                                And that’s why a 15th century
-                            </div>
-                            <p class="mt-1 ml-auto text-left text-xs text-slate-400 dark:text-navy-300">
-                                08:16
-                            </p>
-                        </div>
-                    </div>
-                    <div class="avatar">
-                        <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                    </div>
-                </div>
-
-                <div class="flex items-start space-x-2.5 sm:space-x-5">
-                    <div class="avatar">
-                        <img class="rounded-full" :src="activeChat.avatar_url" alt="avatar" />
-                    </div>
-
-                    <div class="flex flex-col items-start space-y-3.5">
-                        <div class="mr-4 max-w-lg sm:mr-10">
-                            <div
-                                class="rounded-2xl rounded-tl-none bg-white p-3 text-slate-700 shadow-sm dark:bg-navy-700 dark:text-navy-100">
-                                Ei eum populo dictas, ad sed tempor minimum voluptatibus,
-                            </div>
-                            <p class="mt-1 ml-auto text-right text-xs text-slate-400 dark:text-navy-300">
-                                08:16
-                            </p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="flex items-start justify-end space-x-2.5 sm:space-x-5">
-                    <div class="flex flex-col items-end space-y-3.5">
-                        <div class="ml-4 max-w-lg md:ml-10">
-                            <div
-                                class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
-                                No mei stet periculis consequat, agam nostro
-                            </div>
-                        </div>
-                        <div class="ml-4 max-w-lg md:ml-10">
-                            <div
-                                class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
-                                at has eius harum
-                            </div>
-                            <p class="mt-1 ml-auto text-left text-xs text-slate-400 dark:text-navy-300">
-                                08:16
-                            </p>
-                        </div>
-                    </div>
-                    <div class="avatar">
-                        <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                    </div>
-                </div>
-
-                <div class="mx-4 flex items-center space-x-3">
-                    <div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
-                    <p>Today</p>
-                    <div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
-                </div>
-
-                <div class="flex items-start space-x-2.5 sm:space-x-5">
-                    <div class="avatar">
-                        <img class="rounded-full" :src="activeChat.avatar_url" alt="avatar" />
-                    </div>
-
-                    <div class="flex flex-col items-start space-y-3.5">
-                        <div class="mr-4 max-w-lg sm:mr-10">
-                            <div
-                                class="rounded-2xl rounded-tl-none bg-white p-3 text-slate-700 shadow-sm dark:bg-navy-700 dark:text-navy-100">
-                                Recusabo mandamus cum ex, ius unum nibh an, usu liber oratio
-                                liberavisse ea.
-                            </div>
-                            <p class="mt-1 ml-auto text-right text-xs text-slate-400 dark:text-navy-300">
-                                08:16
-                            </p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="flex items-start justify-end space-x-2.5 sm:space-x-5">
-                    <div class="flex flex-col items-end space-y-3.5">
-                        <div class="ml-4 max-w-lg md:ml-10">
-                            <div
-                                class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
-                                Ocurreret rationibus intellegebat eu eos,
-                            </div>
-                        </div>
-                        <div class="ml-4 max-w-lg md:ml-10">
-                            <div
-                                class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
-                                Veri dolorum cu ius. Vim id nullam putent invidunt.
-                            </div>
-                            <p class="mt-1 ml-auto text-left text-xs text-slate-400 dark:text-navy-300">
-                                08:16
-                            </p>
-                        </div>
-                    </div>
-                    <div class="avatar">
-                        <img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div
-            class="chat-footer relative flex h-12 w-full shrink-0 items-center justify-between border-t border-slate-150 bg-white px-[calc(var(--margin-x)-.25rem)] transition-[padding,width] duration-[.25s] dark:border-navy-600 dark:bg-navy-800">
-            <div class="-ml-1.5 flex flex-1 space-x-2">
-                <button
-                    class="btn h-9 w-9 shrink-0 rounded-full p-0 text-slate-500 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-200 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor" stroke-width="1.5">
-                        <path stroke-linecap="round" stroke-linejoin="round"
-                            d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
-                    </svg>
-                </button>
-
-                <input type="text" class="form-input h-9 w-full bg-transparent placeholder:text-slate-400/70"
-                    placeholder="Write the message" />
-            </div>
-
-            <div class="-mr-1.5 flex">
-                <button
-                    class="btn h-9 w-9 shrink-0 rounded-full p-0 text-slate-500 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-200 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor" stroke-width="1.5">
-                        <path stroke-linecap="round" stroke-linejoin="round"
-                            d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                </button>
-                <button
-                    class="btn h-9 w-9 shrink-0 rounded-full p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                        <path stroke-linecap="round" stroke-linejoin="round"
-                            d="m9.813 5.146 9.027 3.99c4.05 1.79 4.05 4.718 0 6.508l-9.027 3.99c-6.074 2.686-8.553.485-5.515-4.876l.917-1.613c.232-.41.232-1.09 0-1.5l-.917-1.623C1.26 4.66 3.749 2.46 9.813 5.146ZM6.094 12.389h7.341" />
-                    </svg>
-                </button>
-            </div>
-        </div>
-
-        <template x-teleport="#x-teleport-target">
-            <div x-data="{
-                get showDrawer() { return $data.isShowChatInfo; },
-                set showDrawer(val) { $data.isShowChatInfo = val; },
-            }" x-show="showDrawer" @keydown.window.escape="showDrawer = false">
-                <div class="fixed inset-0 z-[100] bg-slate-900/60 transition-opacity duration-200"
-                    @click="showDrawer = false" x-show="showDrawer && $store.breakpoints.mdAndDown"
-                    x-transition:enter="ease-out" x-transition:enter-start="opacity-0"
-                    x-transition:enter-end="opacity-100" x-transition:leave="ease-in"
-                    x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"></div>
-                <div class="fixed right-0 top-0 z-[101] h-full w-full sm:w-80">
-                    <div class="flex h-full w-full flex-col border-l border-slate-150 bg-white transition-transform duration-200 dark:border-navy-600 dark:bg-navy-750"
-                        x-show="showDrawer" x-transition:enter="ease-out transform-gpu"
-                        x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
-                        x-transition:leave="ease-in transform-gpu" x-transition:leave-start="translate-x-0"
-                        x-transition:leave-end="translate-x-full">
-                        <div class="flex h-[60px] items-center justify-between p-4">
-                            <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
-                                Chat Info
-                            </h3>
-                            <div class="-mr-1.5 flex space-x-1">
-                                <button @click="$store.global.isRightSidebarExpanded = true"
-                                    class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                            d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
-                                    </svg>
-                                </button>
-
-                                <button @click="$store.global.isDarkModeEnabled = !$store.global.isDarkModeEnabled"
-                                    class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg x-show="$store.global.isDarkModeEnabled"
-                                        x-transition:enter="transition-transform duration-200 ease-out absolute origin-top"
-                                        x-transition:enter-start="scale-75"
-                                        x-transition:enter-end="scale-100 static" class="h-6 w-6 text-amber-400"
-                                        fill="currentColor" viewBox="0 0 24 24">
-                                        <path
-                                            d="M11.75 3.412a.818.818 0 01-.07.917 6.332 6.332 0 00-1.4 3.971c0 3.564 2.98 6.494 6.706 6.494a6.86 6.86 0 002.856-.617.818.818 0 011.1 1.047C19.593 18.614 16.218 21 12.283 21 7.18 21 3 16.973 3 11.956c0-4.563 3.46-8.31 7.925-8.948a.818.818 0 01.826.404z" />
-                                    </svg>
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        x-show="!$store.global.isDarkModeEnabled"
-                                        x-transition:enter="transition-transform duration-200 ease-out absolute origin-top"
-                                        x-transition:enter-start="scale-75"
-                                        x-transition:enter-end="scale-100 static" class="h-6 w-6 text-amber-400"
-                                        viewBox="0 0 20 20" fill="currentColor">
-                                        <path fill-rule="evenodd"
-                                            d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-                                            clip-rule="evenodd" />
-                                    </svg>
-                                </button>
-
-                                <button @click="showDrawer=false"
-                                    class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                        <div class="mt-5 flex flex-col items-center">
-                            <div class="avatar h-20 w-20">
-                                <img class="rounded-full" :src="activeChat.avatar_url" alt="avatar" />
-                            </div>
-                            <h3 x-text="activeChat.name"
-                                class="mt-2 text-lg font-medium text-slate-700 dark:text-navy-100"></h3>
-                            <p>Frontend Developer</p>
-                            <div class="mt-2 flex space-x-1.5">
-                                <button
-                                    class="btn h-10 w-10 rounded-full p-0 text-slate-600 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
-                                    </svg>
-                                </button>
-                                <button
-                                    class="btn h-10 w-10 rounded-full p-0 text-slate-600 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
-                                    </svg>
-                                </button>
-                                <button
-                                    class="btn h-10 w-10 rounded-full p-0 text-slate-600 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                        <div x-data="{ activeTab: 'tabImages' }" class="tabs mt-6 flex flex-col">
-                            <div class="is-scrollbar-hidden overflow-x-auto px-4">
-                                <div class="tabs-list flex">
-                                    <button @click="activeTab = 'tabImages'"
-                                        :class="activeTab === 'tabImages' ?
-                                            'border-primary dark:border-accent text-primary dark:text-accent-light' :
-                                            'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
-                                        class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium">
-                                        Images
-                                    </button>
-                                    <button @click="activeTab = 'tabFiles'"
-                                        :class="activeTab === 'tabFiles' ?
-                                            'border-primary dark:border-accent text-primary dark:text-accent-light' :
-                                            'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
-                                        class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium">
-                                        Files
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="tab-content px-4 pt-4">
-                                <div x-show="activeTab === 'tabImages'"
-                                    x-transition:enter="transition-all duration-500 easy-in-out"
-                                    x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
-                                    x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
-                                    <div class="grid grid-cols-4 gap-2">
-                                        <img class="aspect-square rounded-lg object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-
-                                        <img class="aspect-square rounded-lg object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <img class="aspect-square rounded-lg object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <img class="aspect-square rounded-lg object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <img class="aspect-square rounded-lg object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <img class="aspect-square rounded-lg object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <img class="aspect-square rounded-lg object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <img class="aspect-square rounded-lg object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <img class="aspect-square rounded-lg object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <img class="aspect-square rounded-lg object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-
-                                        <img class="aspect-square rounded-lg object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <img class="aspect-square rounded-lg object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                </div>
-                                <div x-show="activeTab === 'tabFiles'"
-                                    x-transition:enter="transition-all duration-500 easy-in-out"
-                                    x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
-                                    x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
-                                    <div class="flex flex-col space-y-3.5">
-                                        <div class="flex items-center space-x-3">
-                                            <div
-                                                class="mask is-squircle flex h-11 w-11 items-center justify-center bg-secondary text-white">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
-                                                </svg>
-                                            </div>
-                                            <div>
-                                                <p class="font-medium text-slate-700 dark:text-navy-100">
-                                                    Slow Music
-                                                </p>
-                                                <div class="flex text-xs text-slate-400 dark:text-navy-300">
-                                                    <span>03:12</span>
-                                                    <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
-
-                                                    <span>8.32 MB</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="flex items-center space-x-3">
-                                            <div
-                                                class="mask is-squircle flex h-11 w-11 items-center justify-center bg-info text-white">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                                                </svg>
-                                            </div>
-                                            <div>
-                                                <p class="font-medium text-slate-700 dark:text-navy-100">
-                                                    Final.fig
-                                                </p>
-                                                <div class="flex text-xs text-slate-400 dark:text-navy-300">
-                                                    <span>45 MB</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="flex items-center space-x-3">
-                                            <div
-                                                class="mask is-squircle flex h-11 w-11 items-center justify-center bg-warning text-white">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                                                </svg>
-                                            </div>
-                                            <div>
-                                                <p class="font-medium text-slate-700 dark:text-navy-100">
-                                                    Report.docx
-                                                </p>
-                                                <div class="flex text-xs text-slate-400 dark:text-navy-300">
-                                                    <span>3.5 MB</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="flex items-center space-x-3">
-                                            <div
-                                                class="mask is-squircle flex h-11 w-11 items-center justify-center bg-success text-white">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                                                </svg>
-                                            </div>
-                                            <div>
-                                                <p class="font-medium text-slate-700 dark:text-navy-100">
-                                                    TheBook.pdf
-                                                </p>
-                                                <div class="flex text-xs text-slate-400 dark:text-navy-300">
-                                                    <span>14 MB</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </template>
-    </main>
-
-</x-base-layout>

resources/views/pages/apps-filemanager.blade.php

-<x-base-layout title="File Manager" is-sidebar-open="true" is-header-blur="true" has-min-sidebar="true">
-    <!-- Sidebar -->
-    <div class="sidebar print:hidden">
-        <!-- Main Sidebar -->
-        <x-app-partials.main-sidebar></x-app-partials.main-sidebar>
-
-        <!-- Sidebar Panel -->
-        <div class="sidebar-panel">
-            <div class="flex h-full grow flex-col bg-white pl-[var(--main-sidebar-width)] dark:bg-navy-750">
-                <!-- Sidebar Panel Header -->
-                <div class="flex h-18 w-full items-center justify-between pl-4 pr-1">
-                    <div class="flex items-center">
-                        <div class="avatar mr-3 hidden h-9 w-9 lg:flex">
-                            <div
-                                class="is-initial rounded-full bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                                    stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
-                                </svg>
-                            </div>
-                        </div>
-                        <p class="text-lg font-medium tracking-wider text-slate-800 line-clamp-1 dark:text-navy-100">
-                            My Cloud
-                        </p>
-                    </div>
-                    <button @click="$store.global.isSidebarExpanded = false"
-                        class="btn h-7 w-7 rounded-full p-0 text-primary hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-accent-light/80 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 xl:hidden">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-                        </svg>
-                    </button>
-                </div>
-
-                <!-- Sidebar Panel Body -->
-                <div class="flex h-[calc(100%-4.5rem)] grow flex-col">
-                    <div class="is-scrollbar-hidden grow overflow-y-auto">
-                        <div class="mt-2 px-4">
-                            <button
-                                class="btn w-full space-x-2 rounded-full border border-slate-200 py-2 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-500 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
-                                </svg>
-                                <span> Create New </span>
-                            </button>
-                        </div>
-
-                        <div x-data="{ expanded: true }">
-                            <div class="mt-4 flex items-center justify-between px-4">
-                                <span class="text-xs font-medium uppercase">MY FILES </span>
-                                <div class="-mr-1.5 flex">
-                                    <button
-                                        class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                                        </svg>
-                                    </button>
-                                    <button @click="expanded =! expanded"
-                                        class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                            :class="expanded && 'rotate-180'" fill="none" viewBox="0 0 24 24"
-                                            stroke="currentColor" stroke-width="2">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M19 9l-7 7-7-7" />
-                                        </svg>
-                                    </button>
-                                </div>
-                            </div>
-                            <div x-show="expanded" x-collapse>
-                                <ul class="mt-1 space-y-1 px-2 font-inter text-xs+ font-medium">
-                                    <li x-data="{ expanded: false }">
-                                        <div tabindex="0"
-                                            class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                            <button @click="expanded = !expanded"
-                                                class="btn mr-1 h-5 w-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                                <svg xmlns="http://www.w3.org/2000/svg"
-                                                    class="h-4.5 w-4.5 transition-transform"
-                                                    :class="expanded && 'rotate-90'" viewBox="0 0 20 20"
-                                                    fill="currentColor">
-                                                    <path fill-rule="evenodd"
-                                                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                                                        clip-rule="evenodd" />
-                                                </svg>
-                                            </button>
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6 text-warning"
-                                                viewBox="0 0 20 20" fill="currentColor">
-                                                <path
-                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                            </svg>
-                                            <span>Design</span>
-                                        </div>
-                                        <ul x-show="expanded" x-collapse class="pl-4">
-                                            <li>
-                                                <div tabindex="0"
-                                                    class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                    <div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
-                                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                                        class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                        fill="currentColor">
-                                                        <path
-                                                            d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                    </svg>
-                                                    <span>Web Apps</span>
-                                                </div>
-                                            </li>
-                                            <li x-data="{ expanded: false }">
-                                                <div tabindex="0"
-                                                    class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                    <button @click="expanded = !expanded"
-                                                        class="btn mr-1 h-5 w-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                                            class="h-4.5 w-4.5 transition-transform"
-                                                            :class="expanded && 'rotate-90'" viewBox="0 0 20 20"
-                                                            fill="currentColor">
-                                                            <path fill-rule="evenodd"
-                                                                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                                                                clip-rule="evenodd" />
-                                                        </svg>
-                                                    </button>
-                                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                                        class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                        fill="currentColor">
-                                                        <path
-                                                            d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                    </svg>
-                                                    <span>CRM Apps</span>
-                                                </div>
-                                                <ul x-show="expanded" x-collapse class="pl-4">
-                                                    <li>
-                                                        <div tabindex="0"
-                                                            class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                            <div class="mr-1 flex h-5 w-5 items-center justify-center">
-                                                            </div>
-                                                            <svg xmlns="http://www.w3.org/2000/svg"
-                                                                class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                                fill="currentColor">
-                                                                <path
-                                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                            </svg>
-                                                            <span>LMS App</span>
-                                                        </div>
-                                                    </li>
-                                                    <li>
-                                                        <div tabindex="0"
-                                                            class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                            <div class="mr-1 flex h-5 w-5 items-center justify-center">
-                                                            </div>
-                                                            <svg xmlns="http://www.w3.org/2000/svg"
-                                                                class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                                fill="currentColor">
-                                                                <path
-                                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                            </svg>
-                                                            <span>Ecommerce</span>
-                                                        </div>
-                                                    </li>
-                                                    <li>
-                                                        <div tabindex="0"
-                                                            class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                            <div class="mr-1 flex h-5 w-5 items-center justify-center">
-                                                            </div>
-                                                            <svg xmlns="http://www.w3.org/2000/svg"
-                                                                class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                                fill="currentColor">
-                                                                <path
-                                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                            </svg>
-                                                            <span>Dashboard</span>
-                                                        </div>
-                                                    </li>
-                                                </ul>
-                                            </li>
-                                            <li>
-                                                <div tabindex="0"
-                                                    class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                    <div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
-                                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                                        class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                        fill="currentColor">
-                                                        <path
-                                                            d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                    </svg>
-                                                    <span>Desktop Apps</span>
-                                                </div>
-                                            </li>
-                                            <li>
-                                                <div tabindex="0"
-                                                    class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                    <div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
-                                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                                        class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                        fill="currentColor">
-                                                        <path
-                                                            d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                    </svg>
-                                                    <span>Mobile Apps</span>
-                                                </div>
-                                            </li>
-                                        </ul>
-                                    </li>
-                                    <li>
-                                        <div tabindex="0"
-                                            class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                            <div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6 text-warning"
-                                                viewBox="0 0 20 20" fill="currentColor">
-                                                <path
-                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                            </svg>
-                                            <span>Backup Files</span>
-                                        </div>
-                                    </li>
-                                    <li x-data="{ expanded: false }">
-                                        <div tabindex="0"
-                                            class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                            <button @click="expanded = !expanded"
-                                                class="btn mr-1 h-5 w-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                                <svg xmlns="http://www.w3.org/2000/svg"
-                                                    class="h-4.5 w-4.5 transition-transform"
-                                                    :class="expanded && 'rotate-90'" viewBox="0 0 20 20"
-                                                    fill="currentColor">
-                                                    <path fill-rule="evenodd"
-                                                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                                                        clip-rule="evenodd" />
-                                                </svg>
-                                            </button>
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6 text-warning"
-                                                viewBox="0 0 20 20" fill="currentColor">
-                                                <path
-                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                            </svg>
-                                            <span>Documents</span>
-                                        </div>
-                                        <ul x-show="expanded" x-collapse class="pl-4">
-                                            <li>
-                                                <div tabindex="0"
-                                                    class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                    <div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
-                                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                                        class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                        fill="currentColor">
-                                                        <path
-                                                            d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                    </svg>
-                                                    <span>Sheets</span>
-                                                </div>
-                                            </li>
-                                            <li>
-                                                <div tabindex="0"
-                                                    class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                    <div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
-                                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                                        class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                        fill="currentColor">
-                                                        <path
-                                                            d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                    </svg>
-                                                    <span>Slides</span>
-                                                </div>
-                                            </li>
-                                            <li>
-                                                <div tabindex="0"
-                                                    class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                    <div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
-                                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                                        class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                        fill="currentColor">
-                                                        <path
-                                                            d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                    </svg>
-                                                    <span>Words</span>
-                                                </div>
-                                            </li>
-                                        </ul>
-                                    </li>
-                                    <li x-data="{ expanded: false }">
-                                        <div tabindex="0"
-                                            class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                            <button @click="expanded = !expanded"
-                                                class="btn mr-1 h-5 w-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                                <svg xmlns="http://www.w3.org/2000/svg"
-                                                    class="h-4.5 w-4.5 transition-transform"
-                                                    :class="expanded && 'rotate-90'" viewBox="0 0 20 20"
-                                                    fill="currentColor">
-                                                    <path fill-rule="evenodd"
-                                                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                                                        clip-rule="evenodd" />
-                                                </svg>
-                                            </button>
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6 text-warning"
-                                                viewBox="0 0 20 20" fill="currentColor">
-                                                <path
-                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                            </svg>
-                                            <span>Application</span>
-                                        </div>
-                                        <ul x-show="expanded" x-collapse class="pl-4">
-                                            <li>
-                                                <div tabindex="0"
-                                                    class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                    <div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
-                                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                                        class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                        fill="currentColor">
-                                                        <path
-                                                            d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                    </svg>
-                                                    <span>Web Apps</span>
-                                                </div>
-                                            </li>
-                                            <li x-data="{ expanded: false }">
-                                                <div tabindex="0"
-                                                    class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                    <button @click="expanded = !expanded"
-                                                        class="btn mr-1 h-5 w-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                                            class="h-4.5 w-4.5 transition-transform"
-                                                            :class="expanded && 'rotate-90'" viewBox="0 0 20 20"
-                                                            fill="currentColor">
-                                                            <path fill-rule="evenodd"
-                                                                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                                                                clip-rule="evenodd" />
-                                                        </svg>
-                                                    </button>
-                                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                                        class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                        fill="currentColor">
-                                                        <path
-                                                            d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                    </svg>
-                                                    <span>CRM Apps</span>
-                                                </div>
-                                                <ul x-show="expanded" x-collapse class="pl-4">
-                                                    <li>
-                                                        <div tabindex="0"
-                                                            class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                            <div class="mr-1 flex h-5 w-5 items-center justify-center">
-                                                            </div>
-                                                            <svg xmlns="http://www.w3.org/2000/svg"
-                                                                class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                                fill="currentColor">
-                                                                <path
-                                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                            </svg>
-                                                            <span>LMS App</span>
-                                                        </div>
-                                                    </li>
-                                                    <li>
-                                                        <div tabindex="0"
-                                                            class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                            <div class="mr-1 flex h-5 w-5 items-center justify-center">
-                                                            </div>
-                                                            <svg xmlns="http://www.w3.org/2000/svg"
-                                                                class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                                fill="currentColor">
-                                                                <path
-                                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                            </svg>
-                                                            <span>Ecommerce</span>
-                                                        </div>
-                                                    </li>
-                                                    <li>
-                                                        <div tabindex="0"
-                                                            class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                            <div class="mr-1 flex h-5 w-5 items-center justify-center">
-                                                            </div>
-                                                            <svg xmlns="http://www.w3.org/2000/svg"
-                                                                class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                                fill="currentColor">
-                                                                <path
-                                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                            </svg>
-                                                            <span>Dashboard</span>
-                                                        </div>
-                                                    </li>
-                                                </ul>
-                                            </li>
-                                            <li>
-                                                <div tabindex="0"
-                                                    class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                    <div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
-                                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                                        class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                        fill="currentColor">
-                                                        <path
-                                                            d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                    </svg>
-                                                    <span>Desktop Apps</span>
-                                                </div>
-                                            </li>
-                                            <li>
-                                                <div tabindex="0"
-                                                    class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                                    <div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
-                                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                                        class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
-                                                        fill="currentColor">
-                                                        <path
-                                                            d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                                    </svg>
-                                                    <span>Mobile Apps</span>
-                                                </div>
-                                            </li>
-                                        </ul>
-                                    </li>
-                                    <li>
-                                        <div tabindex="0"
-                                            class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                            <div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
-
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6 text-warning"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="1.5"
-                                                    d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
-                                            </svg>
-                                            <span>Archives</span>
-                                        </div>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-
-                        <div class="my-3 mx-4 h-px bg-slate-200 dark:bg-navy-500"></div>
-
-                        <ul class="space-y-1.5 px-2 font-inter text-xs+ font-medium">
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                            d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">Shared Folders</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                            d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">Important</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">Recent</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                            d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">Tags</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                                    </svg>
-                                    <span>Trash</span>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <div class="flex flex-col p-4">
-                        <div class="flex items-center justify-between">
-                            <p>
-                                <span class="font-medium text-slate-600 dark:text-navy-100">35GB</span>
-                                of 1TB
-                            </p>
-                            <a href="#"
-                                class="text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">Upgrade</a>
-                        </div>
-
-                        <div class="progress mt-2 h-2 bg-slate-150 dark:bg-navy-500">
-                            <div class="w-7/12 rounded-full bg-info"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Minimized Sidebar Panel -->
-        <div class="sidebar-panel-min">
-            <div class="flex h-full flex-col items-center bg-white dark:bg-navy-750">
-                <div class="flex h-18 shrink-0 items-center justify-center">
-                    <div
-                        class="avatar flex h-10 w-10 rounded-full bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light">
-                        <div class="is-initial">
-                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                xmlns="http://www.w3.org/2000/svg" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
-                            </svg>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="flex h-[calc(100%-4.5rem)] grow flex-col">
-                    <div class="is-scrollbar-hidden flex grow flex-col overflow-y-auto">
-                        <ul class="mt-4 space-y-1">
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                            d="M12 4v16m8-8H4" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                            d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
-                                    </svg>
-                                </a>
-                            </li>
-                        </ul>
-                        <div class="my-4 h-px bg-slate-200 dark:bg-navy-500"></div>
-                        <ul class="space-y-1">
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                                    </svg>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <div class="py-3">
-                        <div x-data="usePopper({ placement: 'right-start', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn h-10 w-10 rounded-full border border-slate-200 p-0 font-medium hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-500 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-
-                            <template x-teleport="#x-teleport-target">
-                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                    <div
-                                        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                    Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                    else</a>
-                                            </li>
-                                        </ul>
-                                        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                    Link</a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- App Header -->
-    <x-app-partials.header></x-app-partials.header>
-
-    <!-- Mobile Searchbar -->
-    <x-app-partials.mobile-searchbar></x-app-partials.mobile-searchbar>
-
-    <!-- Right Sidebar -->
-    <x-app-partials.right-sidebar></x-app-partials.right-sidebar>
-
-    <!-- Main Content Wrapper -->
-    <main class="main-content filemanager-app w-full pb-6">
-        <div
-            class="flex items-center justify-between space-x-2 px-[var(--margin-x)] pb-4 pt-5 transition-all duration-[.25s]">
-            <div class="flex items-center space-x-1">
-                <h3 class="text-lg font-medium text-slate-700 line-clamp-1 dark:text-navy-50">
-                    Home
-                </h3>
-                <div x-data="usePopper({ placement: 'bottom-start', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                    class="inline-flex">
-                    <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                        class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                        <i class="fas fa-chevron-down"></i>
-                    </button>
-
-                    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                        <div
-                            class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                            <ul>
-                                <li>
-                                    <a href="#"
-                                        class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="mt-px h-4.5 w-4.5"
-                                            fill="none" viewBox="0 0 24 24" stroke="currentColor"
-                                            stroke-width="2">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
-                                        </svg>
-
-                                        <span> New Folder</span></a>
-                                </li>
-                                <li>
-                                    <a href="#"
-                                        class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="mt-px h-4.5 w-4.5"
-                                            fill="none" viewBox="0 0 24 24" stroke="currentColor"
-                                            stroke-width="2">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
-                                        </svg>
-
-                                        <span>Upload Folder</span></a>
-                                </li>
-                                <li>
-                                    <a href="#"
-                                        class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="mt-px h-4.5 w-4.5"
-                                            fill="none" viewBox="0 0 24 24" stroke="currentColor"
-                                            stroke-width="2">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                                        </svg>
-
-                                        <span>Download Folder</span></a>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="flex">
-                <button @click="$dispatch('show-drawer', { drawerId: 'filemanager-activity-drawer' })"
-                    class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:active:bg-navy-300/25">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                </button>
-                <a href="{{ route('layouts/help-1') }}"
-                    class="btn h-8 w-8 rounded-full p-0 text-slate-500 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-200 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor" stroke-width="1.5">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                            d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                </a>
-            </div>
-        </div>
-        <div class="flex flex-col" x-data="{ activeTab: 'tab-recent' }">
-            <div class="flex space-x-2 px-[var(--margin-x)] transition-all duration-[.25s]">
-                <button @click="activeTab = 'tab-recent'" class="btn h-8 rounded-full text-xs+ font-medium"
-                    :class="activeTab === 'tab-recent' ? 'bg-slate-150 text-slate-800 dark:bg-navy-600 dark:text-navy-50' :
-                        'hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 hover:text-slate-800 focus:text-slate-800 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 dark:hover:text-navy-100 dark:focus:text-navy-100'">
-                    Recent
-                </button>
-                <button @click="activeTab = 'tab-pinned'" class="btn h-8 rounded-full text-xs+ font-medium"
-                    :class="activeTab === 'tab-pinned' ? 'bg-slate-150 text-slate-800 dark:bg-navy-600 dark:text-navy-50' :
-                        'hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 hover:text-slate-800 focus:text-slate-800 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 dark:hover:text-navy-100 dark:focus:text-navy-100'">
-                    Pinned
-                </button>
-            </div>
-            <div>
-                <div x-show="activeTab === 'tab-recent'" x-transition:enter="transition-all duration-500 easy-in-out"
-                    x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
-                    x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]" x-init="$nextTick(() => new Swiper($el, { slidesPerView: 'auto', spaceBetween: 20 }))"
-                    class="swiper px-[var(--margin-x)] pt-4 transition-all duration-[.25s]">
-                    <div class="swiper-wrapper">
-                        <div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
-                            <div class="flex items-center justify-between">
-                                <img class="w-14" src="{{ asset('images/folders/folder-primary.svg') }}"
-                                    alt="folder" />
-                                <button
-                                    class="btn -mr-2 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div class="pt-5 text-base font-medium tracking-wide text-primary dark:text-accent-light">
-                                Dribble Shots
-                            </div>
-                            <div class="mt-1.5 flex items-center justify-between">
-                                <p class="text-salte-400 text-xs+ dark:text-navy-300">
-                                    22 files
-                                </p>
-                                <p class="font-medium text-slate-600 dark:text-navy-100">
-                                    455 MB
-                                </p>
-                            </div>
-                        </div>
-                        <div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
-                            <div class="flex items-center justify-between">
-                                <img class="w-14" src="{{ asset('images/folders/folder-warning.svg') }}"
-                                    alt="folder" />
-                                <button
-                                    class="btn -mr-2 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div class="pt-5 text-base font-medium tracking-wide text-warning">
-                                Design
-                            </div>
-                            <div class="mt-1.5 flex items-center justify-between">
-                                <p class="text-salte-400 text-xs+ dark:text-navy-300">
-                                    135 files
-                                </p>
-                                <p class="font-medium text-slate-600 dark:text-navy-100">
-                                    3.5 GB
-                                </p>
-                            </div>
-                        </div>
-                        <div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
-                            <div class="flex items-center justify-between">
-                                <img class="w-14" src="{{ asset('images/folders/folder-info.svg') }}"
-                                    alt="folder" />
-                                <button
-                                    class="btn -mr-2 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div class="pt-5 text-base font-medium tracking-wide text-info">
-                                My Portfolio
-                            </div>
-                            <div class="mt-1.5 flex items-center justify-between">
-                                <p class="text-salte-400 text-xs+ dark:text-navy-300">
-                                    14 files
-                                </p>
-                                <p class="font-medium text-slate-600 dark:text-navy-100">
-                                    984 MB
-                                </p>
-                            </div>
-                        </div>
-                        <div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
-                            <div class="flex items-center justify-between">
-                                <img class="w-14" src="{{ asset('images/folders/folder-secondary.svg') }}"
-                                    alt="folder" />
-                                <button
-                                    class="btn -mr-2 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div
-                                class="pt-5 text-base font-medium tracking-wide text-secondary dark:text-secondary-light">
-                                Behance Files
-                            </div>
-                            <div class="mt-1.5 flex items-center justify-between">
-                                <p class="text-salte-400 text-xs+ dark:text-navy-300">
-                                    14 files
-                                </p>
-                                <p class="font-medium text-slate-600 dark:text-navy-100">
-                                    984 MB
-                                </p>
-                            </div>
-                        </div>
-                        <div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
-                            <div class="flex items-center justify-between">
-                                <img class="w-14" src="{{ asset('images/folders/folder-success.svg') }}"
-                                    alt="folder" />
-                                <button
-                                    class="btn -mr-2 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div class="pt-5 text-base font-medium tracking-wide text-success">
-                                Backup Files
-                            </div>
-                            <div class="mt-1.5 flex items-center justify-between">
-                                <p class="text-salte-400 text-xs+ dark:text-navy-300">
-                                    65 files
-                                </p>
-                                <p class="font-medium text-slate-600 dark:text-navy-100">
-                                    12 GB
-                                </p>
-                            </div>
-                        </div>
-                        <div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
-                            <div class="flex items-center justify-between">
-                                <img class="w-14" src="{{ asset('images/folders/folder-error.svg') }}"
-                                    alt="folder" />
-                                <button
-                                    class="btn -mr-2 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div class="pt-5 text-base font-medium tracking-wide text-error">
-                                Vue Apps
-                            </div>
-                            <div class="mt-1.5 flex items-center justify-between">
-                                <p class="text-salte-400 text-xs+ dark:text-navy-300">
-                                    34 files
-                                </p>
-                                <p class="font-medium text-slate-600 dark:text-navy-100">
-                                    146 MB
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div x-show="activeTab === 'tab-pinned'" x-transition:enter="transition-all duration-500 easy-in-out"
-                    x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
-                    x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]" x-init="$nextTick(() => new Swiper($el, { slidesPerView: 'auto', spaceBetween: 20 }))"
-                    class="swiper px-[var(--margin-x)] pt-4 transition-all duration-[.25s]">
-                    <div class="swiper-wrapper">
-                        <div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
-                            <div class="flex items-center justify-between">
-                                <img class="w-14" src="{{ asset('images/folders/folder-error.svg') }}"
-                                    alt="folder" />
-                                <button
-                                    class="btn -mr-2 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div class="pt-5 text-base font-medium tracking-wide text-error">
-                                Vue Apps
-                            </div>
-                            <div class="mt-1.5 flex items-center justify-between">
-                                <p class="text-salte-400 text-xs+ dark:text-navy-300">
-                                    34 files
-                                </p>
-                                <p class="font-medium text-slate-600 dark:text-navy-100">
-                                    146 MB
-                                </p>
-                            </div>
-                        </div>
-                        <div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
-                            <div class="flex items-center justify-between">
-                                <img class="w-14" src="{{ asset('images/folders/folder-warning.svg') }}"
-                                    alt="folder" />
-                                <button
-                                    class="btn -mr-2 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div class="pt-5 text-base font-medium tracking-wide text-warning">
-                                Design
-                            </div>
-                            <div class="mt-1.5 flex items-center justify-between">
-                                <p class="text-salte-400 text-xs+ dark:text-navy-300">
-                                    135 files
-                                </p>
-                                <p class="font-medium text-slate-600 dark:text-navy-100">
-                                    3.5 GB
-                                </p>
-                            </div>
-                        </div>
-                        <div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
-                            <div class="flex items-center justify-between">
-                                <img class="w-14" src="{{ asset('images/folders/folder-primary.svg') }}"
-                                    alt="folder" />
-                                <button
-                                    class="btn -mr-2 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div class="pt-5 text-base font-medium tracking-wide text-primary dark:text-accent-light">
-                                Dribble Shots
-                            </div>
-                            <div class="mt-1.5 flex items-center justify-between">
-                                <p class="text-salte-400 text-xs+ dark:text-navy-300">
-                                    22 files
-                                </p>
-                                <p class="font-medium text-slate-600 dark:text-navy-100">
-                                    455 MB
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div
-            class="mt-4 grid grid-cols-12 gap-4 px-[var(--margin-x)] transition-all duration-[.25s] sm:mt-5 sm:gap-5 lg:gap-6">
-            <div class="col-span-12 lg:col-span-8">
-                <div class="flex items-center justify-between">
-                    <h2 class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
-                        Folders
-                    </h2>
-                    <div class="flex">
-                        <div class="flex items-center" x-data="{ isInputActive: false }">
-                            <label class="block">
-                                <input x-effect="isInputActive === true && $nextTick(() => { $el.focus()});"
-                                    :class="isInputActive ? 'w-32 lg:w-48' : 'w-0'"
-                                    class="form-input bg-transparent px-1 text-right transition-all duration-100 placeholder:text-slate-500 dark:placeholder:text-navy-200"
-                                    placeholder="Search here..." type="text" />
-                            </label>
-                            <button @click="isInputActive = !isInputActive"
-                                class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                                </svg>
-                            </button>
-                            <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                <div
-                                    class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                Action</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                else</a>
-                                        </li>
-                                    </ul>
-                                    <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                Link</a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="card mt-3">
-                    <div class="is-scrollbar-hidden min-w-full overflow-x-auto">
-                        <table class="is-hoverable w-full text-left">
-                            <thead>
-                                <tr>
-                                    <th
-                                        class="whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
-                                        Name
-                                    </th>
-                                    <th
-                                        class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
-                                        Last edit
-                                    </th>
-                                    <th
-                                        class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
-                                        Size
-                                    </th>
-                                    <th
-                                        class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
-                                        Members
-                                    </th>
-
-                                    <th
-                                        class="whitespace-nowrap rounded-tr-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <div class="flex items-center space-x-4">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500"
-                                                viewBox="0 0 20 20" fill="currentColor">
-                                                <path
-                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                            </svg>
-                                            <span class="font-medium text-slate-700 dark:text-navy-100">Designs</span>
-                                        </div>
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        2 day ago
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
-                                        14.3GB
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <div class="flex -space-x-2">
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <div
-                                                    class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
-                                                    jd
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <button
-                                            class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                            </svg>
-                                        </button>
-                                    </td>
-                                </tr>
-                                <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <div class="flex items-center space-x-4">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500"
-                                                viewBox="0 0 20 20" fill="currentColor">
-                                                <path
-                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                            </svg>
-                                            <span class="font-medium text-slate-700 dark:text-navy-100">Movies</span>
-                                        </div>
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        a month ago
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
-                                        31 GB
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <div class="flex -space-x-2">
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <div
-                                                    class="is-initial rounded-full bg-warning text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
-                                                    sm
-                                                </div>
-                                            </div>
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <button
-                                            class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                            </svg>
-                                        </button>
-                                    </td>
-                                </tr>
-                                <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <div class="flex items-center space-x-4">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-secondary"
-                                                viewBox="0 0 20 20" fill="currentColor">
-                                                <path
-                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                            </svg>
-                                            <span class="font-medium text-slate-700 dark:text-navy-100">Media</span>
-                                        </div>
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        2 hour ago
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
-                                        17.2 GB
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <div class="flex -space-x-2">
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <div
-                                                    class="is-initial rounded-full bg-success text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
-                                                    uh
-                                                </div>
-                                            </div>
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <button
-                                            class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                            </svg>
-                                        </button>
-                                    </td>
-                                </tr>
-                                <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <div class="flex items-center space-x-4">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500"
-                                                viewBox="0 0 20 20" fill="currentColor">
-                                                <path
-                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                            </svg>
-                                            <span class="font-medium text-slate-700 dark:text-navy-100">Web
-                                                Applications
-                                            </span>
-                                        </div>
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        42 minute ago
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
-                                        12.4 GB
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <div class="flex -space-x-2">
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <div
-                                                    class="is-initial rounded-full bg-error text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
-                                                    nd
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <button
-                                            class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                            </svg>
-                                        </button>
-                                    </td>
-                                </tr>
-                                <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <div class="flex items-center space-x-4">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500"
-                                                viewBox="0 0 20 20" fill="currentColor">
-                                                <path
-                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                            </svg>
-                                            <span class="font-medium text-slate-700 dark:text-navy-100">Designs
-                                            </span>
-                                        </div>
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        2 day ago
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
-                                        4.33 GB
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <div class="flex -space-x-2">
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                            </div>
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <button
-                                            class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                            </svg>
-                                        </button>
-                                    </td>
-                                </tr>
-                                <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <div class="flex items-center space-x-4">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500"
-                                                viewBox="0 0 20 20" fill="currentColor">
-                                                <path
-                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                            </svg>
-                                            <span class="font-medium text-slate-700 dark:text-navy-100">Archives
-                                            </span>
-                                        </div>
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        12 days ago
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
-                                        1.2 TB
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <div class="flex -space-x-2">
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                            </div>
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <button
-                                            class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                            </svg>
-                                        </button>
-                                    </td>
-                                </tr>
-                                <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <div class="flex items-center space-x-4">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500"
-                                                viewBox="0 0 20 20" fill="currentColor">
-                                                <path
-                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                            </svg>
-                                            <span class="font-medium text-slate-700 dark:text-navy-100">Movies</span>
-                                        </div>
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        a month ago
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
-                                        31 GB
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <div class="flex -space-x-2">
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <div
-                                                    class="is-initial rounded-full bg-warning text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
-                                                    sm
-                                                </div>
-                                            </div>
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <button
-                                            class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                            </svg>
-                                        </button>
-                                    </td>
-                                </tr>
-                                <tr class="border-y border-transparent">
-                                    <td class="whitespace-nowrap rounded-bl-lg px-4 py-3 sm:px-5">
-                                        <div class="flex items-center space-x-4">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500"
-                                                viewBox="0 0 20 20" fill="currentColor">
-                                                <path
-                                                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
-                                            </svg>
-                                            <span class="font-medium text-slate-700 dark:text-navy-100">Documents
-                                            </span>
-                                        </div>
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        a day ago
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
-                                        602 MB
-                                    </td>
-                                    <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                        <div class="flex -space-x-2">
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <div
-                                                    class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
-                                                    gh
-                                                </div>
-                                            </div>
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td class="whitespace-nowrap rounded-br-lg px-4 py-3 sm:px-5">
-                                        <button
-                                            class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                            </svg>
-                                        </button>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-            <div class="col-span-12 lg:col-span-4">
-                <div class="flex items-center justify-between">
-                    <h2 class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
-                        Tags
-                    </h2>
-
-                    <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                        class="inline-flex">
-                        <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                            class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                        <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                            <div
-                                class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                <ul>
-                                    <li>
-                                        <a href="#"
-                                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                    </li>
-                                    <li>
-                                        <a href="#"
-                                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                            Action</a>
-                                    </li>
-                                    <li>
-                                        <a href="#"
-                                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                            else</a>
-                                    </li>
-                                </ul>
-                                <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                <ul>
-                                    <li>
-                                        <a href="#"
-                                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                            Link</a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="card mt-3 space-y-3.5 p-4 text-xs+">
-                    <div class="group flex items-center justify-between">
-                        <div class="flex space-x-3">
-                            <div
-                                class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white dark:bg-accent">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path fill-rule="evenodd"
-                                        d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
-                                        clip-rule="evenodd" />
-                                </svg>
-                            </div>
-                            <div>
-                                <a href="#" class="text-slate-600 dark:text-navy-100">#Image</a>
-                                <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
-                                    <p>654 Files</p>
-                                    <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
-                                    <p>1.5 GB</p>
-                                </div>
-                            </div>
-                        </div>
-                        <button
-                            class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="group flex items-center justify-between">
-                        <div class="flex space-x-3">
-                            <div
-                                class="flex h-10 w-10 items-center justify-center rounded-full bg-secondary text-white">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path
-                                        d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
-                                </svg>
-                            </div>
-                            <div>
-                                <a href="#" class="text-slate-600 dark:text-navy-100">#Video</a>
-                                <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
-                                    <p>135 Files</p>
-                                    <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
-                                    <p>14 GB</p>
-                                </div>
-                            </div>
-                        </div>
-                        <button
-                            class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="group flex items-center justify-between">
-                        <div class="flex space-x-3">
-                            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-info text-white">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path
-                                        d="M9 2a2 2 0 00-2 2v8a2 2 0 002 2h6a2 2 0 002-2V6.414A2 2 0 0016.414 5L14 2.586A2 2 0 0012.586 2H9z" />
-                                    <path d="M3 8a2 2 0 012-2v10h8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" />
-                                </svg>
-                            </div>
-                            <div>
-                                <a href="#" class="text-slate-600 dark:text-navy-100">#Documents</a>
-                                <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
-                                    <p>5477 Files</p>
-                                    <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
-                                    <p>1.2 GB</p>
-                                </div>
-                            </div>
-                        </div>
-                        <button
-                            class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="group flex items-center justify-between">
-                        <div class="flex space-x-3">
-                            <div
-                                class="flex h-10 w-10 items-center justify-center rounded-full bg-success text-white">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path fill-rule="evenodd"
-                                        d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z"
-                                        clip-rule="evenodd" />
-                                </svg>
-                            </div>
-                            <div>
-                                <a href="#" class="text-slate-600 dark:text-navy-100">#adminui</a>
-                                <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
-                                    <p>120 Files</p>
-                                    <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
-                                    <p>166 MB</p>
-                                </div>
-                            </div>
-                        </div>
-                        <button
-                            class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="group flex items-center justify-between">
-                        <div class="flex space-x-3">
-                            <div
-                                class="flex h-10 w-10 items-center justify-center rounded-full bg-warning text-white">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path fill-rule="evenodd"
-                                        d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z"
-                                        clip-rule="evenodd" />
-                                </svg>
-                            </div>
-                            <div>
-                                <a href="#" class="text-slate-600 dark:text-navy-100">#chatUI</a>
-                                <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
-                                    <p>54 Files</p>
-                                    <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
-                                    <p>121 MB</p>
-                                </div>
-                            </div>
-                        </div>
-                        <button
-                            class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="group flex items-center justify-between">
-                        <div class="flex space-x-3">
-                            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-error text-white">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path
-                                        d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
-                                </svg>
-                            </div>
-                            <div>
-                                <a href="#" class="text-slate-600 dark:text-navy-100">#uiux</a>
-                                <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
-                                    <p>565 Files</p>
-                                    <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
-                                    <p>756 MB</p>
-                                </div>
-                            </div>
-                        </div>
-                        <button
-                            class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="group flex items-center justify-between">
-                        <div class="flex space-x-3">
-                            <div
-                                class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white dark:bg-accent">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path fill-rule="evenodd"
-                                        d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
-                                        clip-rule="evenodd" />
-                                </svg>
-                            </div>
-                            <div>
-                                <a href="#" class="text-slate-600 dark:text-navy-100">#Image</a>
-                                <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
-                                    <p>654 Files</p>
-                                    <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
-                                    <p>1.5 GB</p>
-                                </div>
-                            </div>
-                        </div>
-                        <button
-                            class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="group flex items-center justify-between">
-                        <div class="flex space-x-3">
-                            <div
-                                class="flex h-10 w-10 items-center justify-center rounded-full bg-secondary text-white">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path
-                                        d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
-                                </svg>
-                            </div>
-                            <div>
-                                <a href="#" class="text-slate-600 dark:text-navy-100">#Video</a>
-                                <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
-                                    <p>135 Files</p>
-                                    <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
-                                    <p>14 GB</p>
-                                </div>
-                            </div>
-                        </div>
-                        <button
-                            class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="group flex items-center justify-between">
-                        <div class="flex space-x-3">
-                            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-info text-white">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path
-                                        d="M9 2a2 2 0 00-2 2v8a2 2 0 002 2h6a2 2 0 002-2V6.414A2 2 0 0016.414 5L14 2.586A2 2 0 0012.586 2H9z" />
-                                    <path d="M3 8a2 2 0 012-2v10h8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" />
-                                </svg>
-                            </div>
-                            <div>
-                                <a href="#" class="text-slate-600 dark:text-navy-100">#Documents</a>
-                                <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
-                                    <p>5477 Files</p>
-                                    <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
-                                    <p>1.2 GB</p>
-                                </div>
-                            </div>
-                        </div>
-                        <button
-                            class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-
-    <div x-show="showDrawer" x-data="{ showDrawer: false }"
-        x-on:show-drawer.window="($event.detail.drawerId === 'filemanager-activity-drawer') && (showDrawer = true)"
-        @keydown.window.escape="showDrawer = false">
-        <div class="fixed inset-0 z-[100] bg-slate-900/60 transition-opacity duration-200"
-            @click="showDrawer = false" x-show="showDrawer" x-transition:enter="ease-out"
-            x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in"
-            x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"></div>
-        <div class="fixed right-0 top-0 z-[101] h-full w-full sm:w-80">
-            <div class="flex h-full w-full transform-gpu flex-col bg-white transition-transform duration-200 dark:bg-navy-700"
-                x-show="showDrawer" x-transition:enter="ease-out" x-transition:enter-start="translate-x-full"
-                x-transition:enter-end="translate-x-0" x-transition:leave="ease-in"
-                x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
-                <div class="flex h-14 items-center justify-between bg-slate-150 p-4 dark:bg-navy-800">
-                    <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
-                        Activity
-                    </h3>
-                    <div class="-mr-1.5 flex">
-                        <button @click="showDrawer=false"
-                            class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div x-init="$el._x_simplebar = new SimpleBar($el)" class="flex grow flex-col overflow-y-auto overscroll-contain p-4"
-                    x-data="{ activeTab: 'tab-recent' }">
-                    <div class="flex space-x-2">
-                        <button @click="activeTab = 'tab-recent'" class="btn h-8 rounded-full text-xs+ font-medium"
-                            :class="activeTab === 'tab-recent' ?
-                                'bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light' :
-                                'hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 hover:text-slate-800 focus:text-slate-800 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 dark:hover:text-navy-100 dark:focus:text-navy-100'">
-                            Recent
-                        </button>
-                        <button @click="activeTab = 'tab-activity'"
-                            class="btn h-8 rounded-full text-xs+ font-medium"
-                            :class="activeTab === 'tab-activity' ?
-                                'bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light' :
-                                'hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 hover:text-slate-800 focus:text-slate-800 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 dark:hover:text-navy-100 dark:focus:text-navy-100'">
-                            Activity
-                        </button>
-                    </div>
-                    <div class="tab-content mt-5">
-                        <div x-show="activeTab === 'tab-recent'"
-                            x-transition:enter="transition-all duration-500 easy-in-out"
-                            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
-                            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
-                            <ol class="timeline line-space">
-                                <li class="timeline-item">
-                                    <div
-                                        class="timeline-item-point rounded-full border-2 border-slate-300 dark:border-navy-400">
-                                    </div>
-                                    <div class="timeline-item-content flex-1 pl-4">
-                                        <div class="flex flex-col justify-between sm:flex-row">
-                                            <p class="font-medium leading-none text-slate-600 dark:text-navy-100">
-                                                2 minute ago
-                                            </p>
-                                        </div>
-                                        <div class="mt-4 grid grid-cols-3 gap-2">
-                                            <img src="{{ asset('images/800x600.png') }}"
-                                                class="rounded-lg object-cover object-center" alt="image" />
-                                            <img src="{{ asset('images/800x600.png') }}"
-                                                class="rounded-lg object-cover object-center" alt="image" />
-                                            <img src="{{ asset('images/800x600.png') }}"
-                                                class="rounded-lg object-cover object-center" alt="image" />
-                                        </div>
-                                        <div class="mt-3 flex items-center space-x-2">
-                                            <div class="avatar h-6 w-6">
-                                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                                    alt="avatar" />
-                                            </div>
-                                            <p class="text-xs+">
-                                                <span class="font-medium">Mores Clarke</span>
-                                                <span class="text-slate-400 dark:text-navy-300">added 3 new
-                                                    Photo</span>
-                                            </p>
-                                        </div>
-                                    </div>
-                                </li>
-
-                                <li class="timeline-item">
-                                    <div
-                                        class="timeline-item-point rounded-full border-2 border-secondary dark:border-secondary-light">
-                                    </div>
-                                    <div class="timeline-item-content flex-1 pl-4">
-                                        <div class="flex flex-col justify-between sm:flex-row">
-                                            <p class="font-medium leading-none text-slate-600 dark:text-navy-100">
-                                                a hour ago
-                                            </p>
-                                        </div>
-                                        <div class="mt-4 flex items-center space-x-3">
-                                            <div
-                                                class="mask is-squircle flex h-11 w-11 items-center justify-center bg-secondary text-white">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
-                                                </svg>
-                                            </div>
-                                            <div>
-                                                <p class="font-medium text-slate-700 dark:text-navy-100">
-                                                    Slow Music
-                                                </p>
-                                                <div class="flex text-xs text-slate-400 dark:text-navy-300">
-                                                    <span>03:12</span>
-                                                    <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
-
-                                                    <span>8.32 MB</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="mt-3 flex items-center space-x-2">
-                                            <div class="avatar h-6 w-6">
-                                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                                    alt="avatar" />
-                                            </div>
-                                            <p class="text-xs+">
-                                                <span class="font-medium">Bill Musk </span>
-                                                <span class="text-slate-400 dark:text-navy-300">
-                                                    added a new Music</span>
-                                            </p>
-                                        </div>
-                                    </div>
-                                </li>
-
-                                <li class="timeline-item">
-                                    <div class="timeline-item-point rounded-full border-2 border-info"></div>
-                                    <div class="timeline-item-content flex-1 pl-4">
-                                        <div class="flex flex-col justify-between sm:flex-row">
-                                            <p class="font-medium leading-none text-slate-600 dark:text-navy-100">
-                                                a day ago
-                                            </p>
-                                        </div>
-                                        <div class="mt-4 flex items-center space-x-3">
-                                            <div
-                                                class="mask is-squircle flex h-11 w-11 items-center justify-center bg-info text-white">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                                                </svg>
-                                            </div>
-                                            <div>
-                                                <p class="font-medium text-slate-700 dark:text-navy-100">
-                                                    Final.fig
-                                                </p>
-                                                <div class="flex text-xs text-slate-400 dark:text-navy-300">
-                                                    <span>45 MB</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="mt-3 flex items-center space-x-2">
-                                            <div class="avatar h-6 w-6">
-                                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                                    alt="avatar" />
-                                            </div>
-                                            <p class="text-xs+">
-                                                <span class="font-medium">John Doe </span>
-                                                <span class="text-slate-400 dark:text-navy-300">
-                                                    added a new file</span>
-                                            </p>
-                                        </div>
-                                    </div>
-                                </li>
-
-                                <li class="timeline-item">
-                                    <div
-                                        class="timeline-item-point rounded-full border-2 border-slate-300 dark:border-navy-400">
-                                    </div>
-                                    <div class="timeline-item-content flex-1 pl-4">
-                                        <div class="flex flex-col justify-between sm:flex-row">
-                                            <p class="font-medium leading-none text-slate-600 dark:text-navy-100">
-                                                2 day ago
-                                            </p>
-                                        </div>
-                                        <div class="mt-4 grid grid-cols-3 gap-2">
-                                            <img src="{{ asset('images/800x600.png') }}"
-                                                class="rounded-lg object-cover object-center" alt="image" />
-                                            <img src="{{ asset('images/800x600.png') }}"
-                                                class="rounded-lg object-cover object-center" alt="image" />
-                                            <img src="{{ asset('images/800x600.png') }}"
-                                                class="rounded-lg object-cover object-center" alt="image" />
-                                        </div>
-                                        <div class="mt-3 flex items-center space-x-2">
-                                            <div class="avatar h-6 w-6">
-                                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                                    alt="avatar" />
-                                            </div>
-                                            <p class="text-xs+">
-                                                <span class="font-medium">Mores Clarke</span>
-                                                <span class="text-slate-400 dark:text-navy-300">added 3 new
-                                                    Photo</span>
-                                            </p>
-                                        </div>
-                                    </div>
-                                </li>
-
-                                <li class="timeline-item">
-                                    <div
-                                        class="timeline-item-point rounded-full border-2 border-secondary dark:border-secondary-light">
-                                    </div>
-                                    <div class="timeline-item-content flex-1 pl-4">
-                                        <div class="flex flex-col justify-between sm:flex-row">
-                                            <p class="font-medium leading-none text-slate-600 dark:text-navy-100">
-                                                a month ago
-                                            </p>
-                                        </div>
-                                        <div class="mt-4 flex items-center space-x-3">
-                                            <div
-                                                class="mask is-squircle flex h-11 w-11 items-center justify-center bg-secondary text-white">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
-                                                </svg>
-                                            </div>
-                                            <div>
-                                                <p class="font-medium text-slate-700 dark:text-navy-100">
-                                                    Slow Music
-                                                </p>
-                                                <div class="flex text-xs text-slate-400 dark:text-navy-300">
-                                                    <span>03:12</span>
-                                                    <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
-
-                                                    <span>8.32 MB</span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="mt-3 flex items-center space-x-2">
-                                            <div class="avatar h-6 w-6">
-                                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                                    alt="avatar" />
-                                            </div>
-                                            <p class="text-xs+">
-                                                <span class="font-medium">Bill Musk </span>
-                                                <span class="text-slate-400 dark:text-navy-300">
-                                                    added a new Music</span>
-                                            </p>
-                                        </div>
-                                    </div>
-                                </li>
-                            </ol>
-                        </div>
-                        <div x-show="activeTab === 'tab-activity'"
-                            x-transition:enter="transition-all duration-500 easy-in-out"
-                            x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
-                            x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
-                            <div class="mt-20 text-center">
-                                <img class="mx-auto w-40"
-                                    src="{{ asset('images/illustrations/empty-girl-box.svg') }}" alt="image" />
-                                <div class="mt-5">
-                                    <p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
-                                        No any activity
-                                    </p>
-                                    <p class="text-slate-400 dark:text-navy-300">
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit.
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="fixed right-3 bottom-3 rounded-full bg-white dark:bg-navy-700">
-        <button
-            class="btn h-14 w-14 rounded-full bg-primary p-0 font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent-focus/90 sm:hidden">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
-                stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
-            </svg>
-        </button>
-    </div>
-
-</x-base-layout>

resources/views/pages/apps-kanban.blade.php

-<x-base-layout title="Kanban Board" is-sidebar-open="true" has-min-sidebar="true">
-    <!-- Sidebar -->
-    <div class="sidebar print:hidden">
-        <!-- Main Sidebar -->
-        <x-app-partials.main-sidebar></x-app-partials.main-sidebar>
-
-        <!-- Sidebar Panel -->
-        <div class="sidebar-panel">
-            <div class="flex h-full grow flex-col bg-white pl-[var(--main-sidebar-width)] dark:bg-navy-750">
-                <!-- Sidebar Panel Header -->
-                <div class="flex h-18 w-full items-center justify-between pl-4 pr-1">
-                    <div class="flex items-center">
-                        <div class="avatar mr-3 hidden h-9 w-9 lg:flex">
-                            <div class="is-initial rounded-full bg-success/10 text-success">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                                    stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
-                                </svg>
-                            </div>
-                        </div>
-                        <p class="text-lg font-medium tracking-wider text-slate-800 line-clamp-1 dark:text-navy-100">
-                            Kanban Board
-                        </p>
-                    </div>
-                    <button @click="$store.global.isSidebarExpanded = false"
-                        class="btn h-7 w-7 rounded-full p-0 text-primary hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-accent-light/80 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 xl:hidden">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-                        </svg>
-                    </button>
-                </div>
-
-                <!-- Sidebar Panel Body -->
-                <div class="flex h-[calc(100%-4.5rem)] grow flex-col">
-                    <div class="is-scrollbar-hidden grow overflow-y-auto">
-                        <div class="mt-2 px-4">
-                            <button
-                                class="btn w-full space-x-2 rounded-full border border-slate-200 py-2 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-500 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
-                                </svg>
-                                <span> My Plan </span>
-                            </button>
-                        </div>
-                        <div class="mt-4 flex items-center justify-between px-4">
-                            <span class="text-xs font-medium uppercase">BOARDS</span>
-                            <div class="-mr-1.5 flex">
-                                <button
-                                    class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
-                                    </svg>
-                                </button>
-                                <button
-                                    class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                        <ul class="mt-1 space-y-1.5 px-2 font-inter text-xs+ font-medium">
-                            <li>
-                                <a class="group flex justify-between space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <span class="text-slate-800 dark:text-navy-100">Ecommerce App</span>
-
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-error"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex justify-between space-x-2 rounded-lg bg-primary/10 p-2 tracking-wide text-primary outline-none transition-all dark:bg-accent-light/10 dark:text-accent-light"
-                                    href="#">
-                                    <span>Banking App</span>
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-error"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex justify-between space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <span class="text-slate-800 dark:text-navy-100">LMS App</span>
-                                </a>
-                            </li>
-                        </ul>
-                        <div class="my-4 mx-4 h-px bg-slate-200 dark:bg-navy-500"></div>
-                        <div x-data="{ expanded: true }">
-                            <div class="flex items-center justify-between px-4">
-                                <span class="text-xs font-medium uppercase">Workspace</span>
-                                <div class="-mr-1.5 flex">
-                                    <button
-                                        class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M12 4v16m8-8H4" />
-                                        </svg>
-                                    </button>
-                                    <button @click="expanded =! expanded"
-                                        class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="h-3.5 w-3.5 transition-transform" :class="expanded && 'rotate-180'"
-                                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M19 9l-7 7-7-7" />
-                                        </svg>
-                                    </button>
-                                </div>
-                            </div>
-                            <div x-show="expanded" x-collapse>
-                                <ul class="space-y-1.5 px-2 pt-1 font-inter text-xs+ font-medium">
-                                    <li>
-                                        <a class="group flex justify-between space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                            href="#">
-                                            <div class="flex items-center space-x-2">
-                                                <svg xmlns="http://www.w3.org/2000/svg"
-                                                    class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="1.5"
-                                                        d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
-                                                </svg>
-                                                <span class="text-slate-800 dark:text-navy-100">Inbox</span>
-                                            </div>
-                                            <span class="text-primary dark:text-accent-light">2</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="group flex justify-between space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                            href="#">
-                                            <div class="flex items-center space-x-2">
-                                                <svg xmlns="http://www.w3.org/2000/svg"
-                                                    class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="1.5"
-                                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                                </svg>
-                                                <span class="text-slate-800 dark:text-navy-100">Important</span>
-                                            </div>
-                                            <span class="text-primary dark:text-accent-light">1</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="group flex justify-between space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                            href="#">
-                                            <div class="flex items-center space-x-2">
-                                                <svg xmlns="http://www.w3.org/2000/svg"
-                                                    class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="1.5"
-                                                        d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-                                                </svg>
-                                                <span class="text-slate-800 dark:text-navy-100">Members</span>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="group flex justify-between space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                            href="#">
-                                            <div class="flex items-center space-x-2">
-                                                <svg xmlns="http://www.w3.org/2000/svg"
-                                                    class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="1.5"
-                                                        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                                                </svg>
-                                                <span class="text-slate-800 dark:text-navy-100">Setting</span>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="group flex justify-between space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                            href="#">
-                                            <div class="flex items-center space-x-2">
-                                                <svg xmlns="http://www.w3.org/2000/svg"
-                                                    class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="1.5"
-                                                        d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                                                </svg>
-                                                <span class="text-slate-800 dark:text-navy-100">Timetable</span>
-                                            </div>
-                                        </a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="flex justify-between p-4">
-                        <button
-                            class="btn h-11 w-full justify-between bg-gradient-to-r from-purple-500 to-indigo-600 text-white">
-                            <span> Upgrade to Pro </span>
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M13 5l7 7-7 7M5 5l7 7-7 7" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Minimized Sidebar Panel -->
-        <div class="sidebar-panel-min">
-            <div class="flex h-full flex-col items-center bg-white dark:bg-navy-750">
-                <div class="flex h-18 shrink-0 items-center justify-center">
-                    <div class="avatar flex h-10 w-10 rounded-full bg-success/10 text-success">
-                        <div class="is-initial">
-                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                xmlns="http://www.w3.org/2000/svg" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
-                            </svg>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="flex h-[calc(100%-4.5rem)] grow flex-col">
-                    <div class="is-scrollbar-hidden flex grow flex-col overflow-y-auto">
-                        <ul class="mt-4 space-y-1">
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                            d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
-                                    </svg>
-                                </a>
-                            </li>
-                        </ul>
-                        <div class="my-4 h-px bg-slate-200 dark:bg-navy-500"></div>
-                        <ul class="space-y-1">
-                            <li>
-                                <a href="#"
-                                    class="btn relative h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <div
-                                        class="absolute top-0 right-0 flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-primary px-1 text-tiny font-medium leading-none text-white dark:bg-accent">
-                                        2
-                                    </div>
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn relative h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <div
-                                        class="absolute top-0 right-0 flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-primary px-1 text-tiny font-medium leading-none text-white dark:bg-accent">
-                                        1
-                                    </div>
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                            d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
-                                    </svg>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <div class="py-3">
-                        <div x-data="usePopper({ placement: 'right-start', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn h-10 w-10 rounded-full border border-slate-200 p-0 font-medium hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-500 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-
-                            <template x-teleport="#x-teleport-target">
-                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                    <div
-                                        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                    Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                    else</a>
-                                            </li>
-                                        </ul>
-                                        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                    Link</a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-    </div>
-
-    <!-- App Header -->
-    <x-app-partials.header></x-app-partials.header>
-
-    <!-- Mobile Searchbar -->
-    <x-app-partials.mobile-searchbar></x-app-partials.mobile-searchbar>
-
-    <!-- Right Sidebar -->
-    <x-app-partials.right-sidebar></x-app-partials.right-sidebar>
-
-    <!-- Main Content Wrapper -->
-    <main class="main-content kanban-app w-full">
-        <div
-            class="flex items-center justify-between space-x-2 px-[var(--margin-x)] py-5 transition-all duration-[.25s]">
-            <div class="flex items-center space-x-1">
-                <h3 class="text-lg font-medium text-slate-700 line-clamp-1 dark:text-navy-50">
-                    Banking App
-                </h3>
-                <button
-                    class="btn hidden h-8 w-8 rounded-full p-0 font-medium text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25 sm:inline-flex">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor" stroke-width="2">
-                        <path stroke-linecap="round" stroke-linejoin="round"
-                            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                    </svg>
-                </button>
-            </div>
-            <label class="relative hidden w-full max-w-[16rem] sm:flex">
-                <input
-                    class="form-input peer h-8 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 text-xs+ placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
-                    placeholder="Search on boards" type="text" />
-                <span
-                    class="pointer-events-none absolute flex h-full w-9 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-colors duration-200"
-                        fill="currentColor" viewBox="0 0 24 24">
-                        <path
-                            d="M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z" />
-                    </svg>
-                </span>
-            </label>
-            <div class="flex space-x-1">
-                <div class="flex -space-x-2">
-                    <div class="avatar h-6 w-6 hover:z-10 sm:h-8 sm:w-8">
-                        <img class="rounded-full border-2 border-slate-50 dark:border-navy-900"
-                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                    </div>
-                    <div class="avatar h-6 w-6 hover:z-10 sm:h-8 sm:w-8">
-                        <img class="rounded-full border-2 border-slate-50 dark:border-navy-900"
-                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                    </div>
-                    <div class="avatar h-6 w-6 hover:z-10 sm:h-8 sm:w-8">
-                        <img class="rounded-full border-2 border-slate-50 dark:border-navy-900"
-                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                    </div>
-                    <div class="avatar hidden h-6 w-6 hover:z-10 sm:inline-flex sm:h-8 sm:w-8">
-                        <img class="rounded-full border-2 border-slate-50 dark:border-navy-900"
-                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                    </div>
-                    <div class="avatar h-6 w-6 sm:h-8 sm:w-8">
-                        <div
-                            class="is-initial rounded-full border-2 border-slate-50 bg-info text-xs uppercase text-white dark:border-navy-900">
-                            +5
-                        </div>
-                    </div>
-                </div>
-                <button
-                    class="btn h-6 w-6 rounded-full p-0 font-medium text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25 sm:h-8 sm:w-8">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5" viewBox="0 0 20 20"
-                        fill="currentColor">
-                        <path
-                            d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z" />
-                    </svg>
-                </button>
-                <div class="my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
-                <div class="flex">
-                    <button
-                        class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:hidden sm:h-8 sm:w-8">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5" fill="none"
-                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                        </svg>
-                    </button>
-
-                    <button
-                        class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:h-8 sm:w-8">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5" fill="none"
-                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
-                        </svg>
-                    </button>
-
-                    <button x-data="{ isImportant: true }" @click="isImportant =! isImportant"
-                        class="btn hidden h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex sm:h-8 sm:w-8">
-                        <svg x-show="!isImportant" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5"
-                            fill="none" viewBox="0 0 24 24" stroke="currentColor" style="display: none">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                        </svg>
-                        <svg x-show="isImportant" xmlns="http://www.w3.org/2000/svg"
-                            class="h-5.5 w-5.5 text-primary dark:text-accent" viewBox="0 0 20 20"
-                            fill="currentColor">
-                            <path
-                                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                        </svg>
-                    </button>
-
-                    <button @click="$dispatch('show-drawer', { drawerId: 'kanban-setting-drawer' })"
-                        class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:h-8 sm:w-8">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5" fill="none"
-                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                        </svg>
-                    </button>
-                </div>
-            </div>
-        </div>
-
-        <div class="flex h-[calc(100vh-8.5rem)] flex-grow flex-col">
-            <div x-init="Sortable.create($el, {
-                animation: 200,
-                easing: 'cubic-bezier(0, 0, 0.2, 1)',
-                delay: 150,
-                delayOnTouchOnly: true,
-                draggable: '.board-draggable',
-                handle: '.board-draggable-handler'
-            })"
-                class="kanban-scrollbar flex w-full items-start space-x-4 overflow-x-auto overflow-y-hidden px-[var(--margin-x)] transition-all duration-[.25s]">
-                <div class="board-draggable relative flex max-h-full w-72 shrink-0 flex-col">
-                    <div class="board-draggable-handler flex items-center justify-between px-0.5 pb-3">
-                        <div class="flex items-center space-x-2">
-                            <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-info/10 text-info">
-                                <i class="fa fa-spinner text-base"></i>
-                            </div>
-                            <h3 class="text-base text-slate-700 dark:text-navy-100">
-                                In Progress
-                            </h3>
-                        </div>
-
-                        <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-
-                            <template x-teleport="#x-teleport-target">
-                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                    <div
-                                        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                    Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                    else</a>
-                                            </li>
-                                        </ul>
-                                        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                    Link</a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-                    </div>
-                    <div class="is-scrollbar-hidden relative space-y-2.5 overflow-y-auto p-0.5"
-                        x-init="Sortable.create($el, {
-                            animation: 200,
-                            group: 'board-cards',
-                            easing: 'cubic-bezier(0, 0, 0.2, 1)',
-                            direction: 'vertical',
-                            delay: 150,
-                            delayOnTouchOnly: true,
-                        })">
-                        <div class="card cursor-pointer shadow-sm">
-                            <div class="flex space-x-3 px-2.5 pb-2 pt-1.5">
-                                <div class="w-10 shrink-0 py-1">
-                                    <img class="w-full"
-                                        src="{{ asset('images/illustrations/creativedesign-char.svg') }}"
-                                        alt="image" />
-                                </div>
-                                <div class="flex-1 space-y-2">
-                                    <p class="font-medium tracking-wide text-slate-600 dark:text-navy-100">
-                                        Update Design
-                                    </p>
-                                    <div class="flex flex-wrap space-x-1">
-                                        <div
-                                            class="badge space-x-1 bg-slate-150 py-1 px-1.5 text-slate-800 dark:bg-navy-500 dark:text-navy-100">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                            </svg>
-                                            <span> Sep 12</span>
-                                        </div>
-                                        <div
-                                            class="badge bg-secondary/10 py-1 px-1.5 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light">
-                                            Update
-                                        </div>
-                                        <div class="badge space-x-1 bg-info/10 py-1 px-1.5 text-info dark:bg-info/15">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M5 13l4 4L19 7" />
-                                            </svg>
-                                            <span>4/5</span>
-                                        </div>
-                                    </div>
-                                    <div class="flex items-end justify-between pt-1">
-                                        <div class="flex flex-wrap -space-x-1.5">
-                                            <div class="avatar h-5 w-5 hover:z-10">
-                                                <div
-                                                    class="is-initial rounded-full bg-info text-tiny+ uppercase text-white ring-1 ring-white dark:ring-navy-700">
-                                                    jd
-                                                </div>
-                                            </div>
-
-                                            <div class="avatar h-5 w-5 hover:z-10">
-                                                <img class="rounded-full ring-1 ring-white dark:ring-navy-700"
-                                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-5 w-5 hover:z-10">
-                                                <img class="rounded-full ring-1 ring-white dark:ring-navy-700"
-                                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                            </div>
-                                        </div>
-                                        <div
-                                            class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">
-                                            <div class="flex items-center space-x-0.5">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-                                                </svg>
-                                                <span>3</span>
-                                            </div>
-                                            <div class="flex items-center space-x-0.5">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-                                                </svg>
-                                                <span>1</span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="card cursor-pointer shadow-sm">
-                            <div class="space-y-3 px-2.5 pb-2 pt-1.5">
-                                <div>
-                                    <div class="flex justify-between">
-                                        <p
-                                            class="font-medium tracking-wide text-slate-600 line-clamp-2 dark:text-navy-100">
-                                            Sync With Google Analytics
-                                        </p>
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="-mr-1.5 h-3.5 w-3.5 shrink-0 text-error" viewBox="0 0 20 20"
-                                            fill="currentColor">
-                                            <path fill-rule="evenodd"
-                                                d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z"
-                                                clip-rule="evenodd" />
-                                        </svg>
-                                    </div>
-
-                                    <p class="mt-px text-xs text-slate-400 dark:text-navy-300">
-                                        Google Workspace
-                                    </p>
-                                </div>
-                                <div class="flex items-end justify-between">
-                                    <div class="flex items-center space-x-2">
-                                        <div class="avatar h-6 w-6">
-                                            <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                                alt="avatar" />
-                                        </div>
-                                        <p>Travis F.</p>
-                                    </div>
-                                    <div class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">
-                                        <div class="flex items-center space-x-0.5">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-                                            </svg>
-                                            <span>4</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="card cursor-pointer shadow-sm">
-                            <div class="space-y-2 px-2.5 pb-2 pt-1.5">
-                                <div>
-                                    <div class="flex justify-between">
-                                        <p
-                                            class="font-medium tracking-wide text-slate-600 line-clamp-2 dark:text-navy-100">
-                                            Add New Products
-                                        </p>
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="-mr-1.5 h-3.5 w-3.5 shrink-0 text-info" viewBox="0 0 20 20"
-                                            fill="currentColor">
-                                            <path fill-rule="evenodd"
-                                                d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z"
-                                                clip-rule="evenodd" />
-                                        </svg>
-                                    </div>
-                                </div>
-                                <div class="flex flex-wrap space-x-1">
-                                    <div
-                                        class="badge space-x-1 bg-slate-150 py-1 px-1.5 text-slate-800 dark:bg-navy-500 dark:text-navy-100">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                        </svg>
-                                        <span> May 14</span>
-                                    </div>
-                                    <div class="badge bg-info/10 py-1 px-1.5 text-info dark:bg-info/15">
-                                        Create
-                                    </div>
-                                    <div class="badge space-x-1 bg-error/10 py-1 px-1.5 text-error dark:bg-error/15">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M5 13l4 4L19 7" />
-                                        </svg>
-                                        <span>4/5</span>
-                                    </div>
-                                </div>
-                                <div class="grid grid-cols-3 gap-2">
-                                    <img src="{{ asset('images/800x600.png') }}"
-                                        class="rounded-lg object-cover object-center" alt="image" />
-                                    <img src="{{ asset('images/800x600.png') }}"
-                                        class="rounded-lg object-cover object-center" alt="image" />
-                                    <img src="{{ asset('images/800x600.png') }}"
-                                        class="rounded-lg object-cover object-center" alt="image" />
-                                </div>
-                                <div class="flex items-end justify-between pt-1">
-                                    <div class="flex flex-wrap -space-x-1.5">
-                                        <div class="avatar h-5 w-5 hover:z-10">
-                                            <div
-                                                class="is-initial rounded-full bg-info text-tiny+ uppercase text-white ring-1 ring-white dark:ring-navy-700">
-                                                jd
-                                            </div>
-                                        </div>
-
-                                        <div class="avatar h-5 w-5 hover:z-10">
-                                            <img class="rounded-full ring-1 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-
-                                        <div class="avatar h-5 w-5 hover:z-10">
-                                            <img class="rounded-full ring-1 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-                                    </div>
-                                    <div class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">
-                                        <div class="flex items-center space-x-0.5">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-                                            </svg>
-                                            <span>3</span>
-                                        </div>
-                                        <div class="flex items-center space-x-0.5">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-                                            </svg>
-                                            <span>1</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="card cursor-pointer shadow-sm">
-                            <div class="space-y-3 rounded-lg bg-success/10 px-2.5 pb-2 pt-1.5">
-                                <div>
-                                    <div class="flex justify-between">
-                                        <p class="font-medium tracking-wide text-success line-clamp-2">
-                                            Improve animation loader
-                                        </p>
-                                    </div>
-                                </div>
-                                <div class="flex flex-wrap space-x-1">
-                                    <div
-                                        class="badge space-x-1 bg-success/10 py-1 px-1.5 text-success dark:bg-success/15">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                        </svg>
-                                        <span> Sep 12</span>
-                                    </div>
-                                    <div class="badge bg-warning/10 py-1 px-1.5 text-warning dark:bg-warning/15">
-                                        Performance
-                                    </div>
-                                </div>
-                                <div class="flex items-end justify-between">
-                                    <div class="flex items-center space-x-2">
-                                        <div class="avatar h-6 w-6">
-                                            <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                                alt="avatar" />
-                                        </div>
-                                        <p>Travis F.</p>
-                                    </div>
-
-                                    <div class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">
-                                        <div class="flex items-center space-x-0.5">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-                                            </svg>
-                                            <span>4</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="flex justify-center py-2">
-                        <button
-                            class="flex items-center justify-center space-x-2 font-medium text-slate-600 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-                            </svg>
-                            <span>New Task</span>
-                        </button>
-                    </div>
-                </div>
-
-                <div class="board-draggable relative flex max-h-full w-72 shrink-0 flex-col">
-                    <div class="board-draggable-handler flex items-center justify-between px-0.5 pb-3">
-                        <div class="flex items-center space-x-2">
-                            <div
-                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-warning/10 text-warning">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                </svg>
-                            </div>
-                            <h3 class="text-base text-slate-700 dark:text-navy-100">
-                                Pending
-                            </h3>
-                        </div>
-
-                        <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-
-                            <template x-teleport="#x-teleport-target">
-                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                    <div
-                                        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                    Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                    else</a>
-                                            </li>
-                                        </ul>
-                                        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                    Link</a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-                    </div>
-                    <div class="is-scrollbar-hidden relative space-y-2.5 overflow-y-auto p-0.5"
-                        x-init="Sortable.create($el, {
-                            animation: 200,
-                            group: 'board-cards',
-                            easing: 'cubic-bezier(0, 0, 0.2, 1)',
-                            direction: 'vertical',
-                            delay: 150,
-                            delayOnTouchOnly: true,
-                        })">
-                        <div class="card cursor-pointer shadow-sm">
-                            <div class="px-2.5 pb-2 pt-1.5">
-                                <div>
-                                    <div class="flex justify-between">
-                                        <p
-                                            class="font-medium tracking-wide text-slate-600 line-clamp-2 dark:text-navy-100">
-                                            Create Students Module
-                                        </p>
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="-mr-1.5 h-3.5 w-3.5 shrink-0 text-secondary dark:text-secondary-light"
-                                            viewBox="0 0 20 20" fill="currentColor">
-                                            <path fill-rule="evenodd"
-                                                d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z"
-                                                clip-rule="evenodd" />
-                                        </svg>
-                                    </div>
-
-                                    <p class="mt-px text-xs text-slate-400 dark:text-navy-300">
-                                        Online LMS
-                                    </p>
-                                </div>
-
-                                <div class="mt-2 flex flex-wrap space-x-1">
-                                    <div
-                                        class="badge space-x-1 bg-slate-150 py-1 px-1.5 text-slate-800 dark:bg-navy-500 dark:text-navy-100">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                        </svg>
-                                        <span> Jun 05</span>
-                                    </div>
-                                </div>
-
-                                <div class="mt-3 flex items-end justify-between">
-                                    <div class="flex items-center space-x-2">
-                                        <div class="avatar h-6 w-6">
-                                            <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                                alt="avatar" />
-                                        </div>
-                                        <p>Katrina W.</p>
-                                    </div>
-                                    <div class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">
-                                        <div class="flex items-center space-x-0.5">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-                                            </svg>
-                                            <span>2</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="card cursor-pointer shadow-sm">
-                            <div class="rounded-lg bg-warning/10 px-2.5 pb-2 pt-1.5">
-                                <div>
-                                    <div class="flex justify-between">
-                                        <p class="font-medium tracking-wide text-warning line-clamp-2">
-                                            Pay App Wages [1200$]
-                                        </p>
-                                    </div>
-                                </div>
-                                <div class="mt-2 flex flex-wrap space-x-1">
-                                    <div
-                                        class="badge space-x-1 bg-warning/10 py-1 px-1.5 text-warning dark:bg-warning/15">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                        </svg>
-                                        <span> Sep 12</span>
-                                    </div>
-                                    <div
-                                        class="badge bg-secondary/10 py-1 px-1.5 text-secondary dark:bg-secondary/15 dark:text-secondary-light">
-                                        Performance
-                                    </div>
-                                </div>
-                                <div class="mt-3 flex items-end justify-between">
-                                    <div class="flex flex-wrap -space-x-1.5">
-                                        <div class="avatar h-5 w-5 hover:z-10">
-                                            <div
-                                                class="is-initial rounded-full bg-success text-tiny+ uppercase text-white ring-1 ring-white dark:ring-navy-700">
-                                                jd
-                                            </div>
-                                        </div>
-
-                                        <div class="avatar h-5 w-5 hover:z-10">
-                                            <img class="rounded-full ring-1 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-
-                                        <div class="avatar h-5 w-5 hover:z-10">
-                                            <img class="rounded-full ring-1 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-                                    </div>
-                                    <div class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">
-                                        <div class="flex items-center space-x-0.5">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-                                            </svg>
-                                            <span>2</span>
-                                        </div>
-                                        <div class="flex items-center space-x-0.5">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-                                            </svg>
-                                            <span>4</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="card cursor-pointer shadow-sm">
-                            <div class="flex space-x-3 px-2.5 pb-2 pt-1.5">
-                                <div class="w-10 shrink-0 py-1">
-                                    <img class="w-full" src="{{ asset('images/illustrations/invite-user.svg') }}"
-                                        alt="image" />
-                                </div>
-                                <div class="flex-1 space-y-2">
-                                    <div>
-                                        <div class="flex justify-between">
-                                            <p
-                                                class="font-medium tracking-wide text-slate-600 line-clamp-2 dark:text-navy-100">
-                                                Invite New Users
-                                            </p>
-                                            <svg xmlns="http://www.w3.org/2000/svg"
-                                                class="-mr-1.5 h-3.5 w-3.5 shrink-0 text-success" viewBox="0 0 20 20"
-                                                fill="currentColor">
-                                                <path fill-rule="evenodd"
-                                                    d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z"
-                                                    clip-rule="evenodd" />
-                                            </svg>
-                                        </div>
-
-                                        <p class="mt-px text-xs text-slate-400 dark:text-navy-300">
-                                            Invite new users to chatroom
-                                        </p>
-                                    </div>
-                                    <div class="flex flex-wrap space-x-1">
-                                        <div
-                                            class="badge space-x-1 bg-slate-150 py-1 px-1.5 text-slate-800 dark:bg-navy-500 dark:text-navy-100">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                            </svg>
-                                            <span> Daily</span>
-                                        </div>
-
-                                        <div
-                                            class="badge space-x-1 bg-warning/10 py-1 px-1.5 text-warning dark:bg-warning/15">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M5 13l4 4L19 7" />
-                                            </svg>
-                                            <span>7/10</span>
-                                        </div>
-                                    </div>
-                                    <div class="flex items-end justify-between pt-1">
-                                        <div class="flex items-center space-x-2">
-                                            <div class="avatar h-6 w-6">
-                                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                                    alt="avatar" />
-                                            </div>
-                                            <p>Raul B.</p>
-                                        </div>
-
-                                        <div
-                                            class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">
-                                            <div class="flex items-center space-x-0.5">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-                                                </svg>
-                                                <span>2</span>
-                                            </div>
-                                            <div class="flex items-center space-x-0.5">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-                                                </svg>
-                                                <span>4</span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="card cursor-pointer shadow-sm">
-                            <div class="px-2.5 pb-2 pt-1.5">
-                                <div>
-                                    <div class="flex justify-between">
-                                        <p
-                                            class="font-medium tracking-wide text-slate-600 line-clamp-2 dark:text-navy-100">
-                                            Daily New Post
-                                        </p>
-                                    </div>
-                                </div>
-
-                                <div class="mt-2 flex flex-wrap space-x-1">
-                                    <div
-                                        class="badge space-x-1 bg-slate-150 py-1 px-1.5 text-slate-800 dark:bg-navy-500 dark:text-navy-100">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                        </svg>
-                                        <span> Apr 12</span>
-                                    </div>
-                                    <div class="badge space-x-1 bg-info/10 py-1 px-1.5 text-info dark:bg-info/15">
-                                        <span>Blog</span>
-                                    </div>
-                                </div>
-
-                                <div class="mt-3 flex flex-col space-y-2">
-                                    <label class="inline-flex items-center space-x-2">
-                                        <input checked
-                                            class="form-checkbox is-basic h-5 w-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
-                                            type="checkbox" />
-                                        <span>Write Article</span>
-                                    </label>
-                                    <label class="inline-flex items-center space-x-2">
-                                        <input
-                                            class="form-checkbox is-basic h-5 w-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
-                                            type="checkbox" />
-                                        <span>Review</span>
-                                    </label>
-                                    <label class="inline-flex items-center space-x-2">
-                                        <input
-                                            class="form-checkbox is-basic h-5 w-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
-                                            type="checkbox" />
-                                        <span>Publish</span>
-                                    </label>
-                                </div>
-
-                                <div class="mt-3 flex items-end justify-between">
-                                    <div class="flex flex-wrap -space-x-1.5">
-                                        <div class="avatar h-5 w-5 hover:z-10">
-                                            <div
-                                                class="is-initial rounded-full bg-success text-tiny+ uppercase text-white ring-1 ring-white dark:ring-navy-700">
-                                                jd
-                                            </div>
-                                        </div>
-
-                                        <div class="avatar h-5 w-5 hover:z-10">
-                                            <img class="rounded-full ring-1 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar"
-                                                draggable="false" />
-                                        </div>
-
-                                        <div class="avatar h-5 w-5 hover:z-10">
-                                            <img class="rounded-full ring-1 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar"
-                                                draggable="false" />
-                                        </div>
-                                    </div>
-                                    <div class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">
-                                        <div class="flex items-center space-x-0.5">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-                                            </svg>
-                                            <span>2</span>
-                                        </div>
-                                        <div class="flex items-center space-x-0.5">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-                                            </svg>
-                                            <span>4</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="flex justify-center py-2">
-                        <button
-                            class="flex items-center justify-center space-x-2 font-medium text-slate-600 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-                            </svg>
-                            <span>New Task</span>
-                        </button>
-                    </div>
-                </div>
-
-                <div class="board-draggable relative flex max-h-full w-72 shrink-0 flex-col">
-                    <div class="board-draggable-handler flex items-center justify-between px-0.5 pb-3">
-                        <div class="flex items-center space-x-2">
-                            <div
-                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-secondary/10 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M10 21h7a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v11m0 5l4.879-4.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242z" />
-                                </svg>
-                            </div>
-                            <h3 class="text-base text-slate-700 dark:text-navy-100">
-                                In Review
-                            </h3>
-                        </div>
-
-                        <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-
-                            <template x-teleport="#x-teleport-target">
-                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                    <div
-                                        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                    Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                    else</a>
-                                            </li>
-                                        </ul>
-                                        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                    Link</a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-                    </div>
-                    <div class="is-scrollbar-hidden relative space-y-2.5 overflow-y-auto p-0.5"
-                        x-init="Sortable.create($el, {
-                            animation: 200,
-                            group: 'board-cards',
-                            easing: 'cubic-bezier(0, 0, 0.2, 1)',
-                            direction: 'vertical',
-                            delay: 150,
-                            delayOnTouchOnly: true,
-                        })">
-                        <div class="card cursor-pointer shadow-sm">
-                            <div class="rounded-lg bg-info/10 px-2.5 pb-2 pt-1.5">
-                                <div>
-                                    <div class="flex justify-between">
-                                        <p class="font-medium tracking-wide text-info line-clamp-2">
-                                            Join To Discussion
-                                        </p>
-                                    </div>
-                                </div>
-                                <div class="mt-2 flex flex-wrap space-x-1">
-                                    <div class="badge space-x-1 bg-info/10 py-1 px-1.5 text-info dark:bg-info/15">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                        </svg>
-                                        <span> Jun 12</span>
-                                    </div>
-                                    <div
-                                        class="badge bg-primary/10 py-1 px-1.5 text-primary dark:bg-accent-light/15 dark:text-accent-light">
-                                        Support
-                                    </div>
-                                </div>
-                                <div class="mt-3 flex items-end justify-between">
-                                    <div class="flex flex-wrap -space-x-1.5">
-                                        <div class="avatar h-5 w-5 hover:z-10">
-                                            <div
-                                                class="is-initial rounded-full bg-secondary text-tiny+ uppercase text-white ring-1 ring-white dark:bg-secondary-light dark:ring-navy-700">
-                                                jd
-                                            </div>
-                                        </div>
-
-                                        <div class="avatar h-5 w-5 hover:z-10">
-                                            <img class="rounded-full ring-1 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-
-                                        <div class="avatar h-5 w-5 hover:z-10">
-                                            <img class="rounded-full ring-1 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-                                    </div>
-                                    <div
-                                        class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">
-                                        <div class="flex items-center space-x-0.5">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="2"
-                                                    d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-                                            </svg>
-                                            <span>6</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="card cursor-pointer shadow-sm">
-                            <div class="px-2.5 pb-2 pt-1.5">
-                                <div>
-                                    <div class="flex justify-between">
-                                        <p
-                                            class="font-medium tracking-wide text-slate-600 line-clamp-2 dark:text-navy-100">
-                                            Daily New Post
-                                        </p>
-                                    </div>
-                                </div>
-
-                                <div class="mt-2 flex flex-wrap space-x-1">
-                                    <div
-                                        class="badge space-x-1 bg-slate-150 py-1 px-1.5 text-slate-800 dark:bg-navy-500 dark:text-navy-100">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                        </svg>
-                                        <span> Apr 12</span>
-                                    </div>
-                                    <div class="badge space-x-1 bg-info/10 py-1 px-1.5 text-info dark:bg-info/15">
-                                        <span>Blog</span>
-                                    </div>
-                                </div>
-
-                                <div class="mt-3 flex flex-col space-y-2">
-                                    <label class="inline-flex items-center space-x-2">
-                                        <input checked
-                                            class="form-checkbox is-basic h-5 w-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
-                                            type="checkbox" />
-                                        <span>Review Article</span>
-                                    </label>
-                                    <label class="inline-flex items-center space-x-2">
-                                        <input
-                                            class="form-checkbox is-basic h-5 w-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
-                                            type="checkbox" />
-                                        <span>Article Correction</span>
-                                    </label>
-                                    <label class="inline-flex items-center space-x-2">
-                                        <input
-                                            class="form-checkbox is-basic h-5 w-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
-                                            type="checkbox" />
-                                        <span>Allow Publication</span>
-                                    </label>
-                                </div>
-
-                                <div class="mt-3 flex items-end justify-between">
-                                    <div class="flex items-center space-x-2">
-                                        <div class="avatar h-6 w-6">
-                                            <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                                alt="avatar" />
-                                        </div>
-                                        <p>Robin S.</p>
-                                    </div>
-                                    <div
-                                        class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">
-                                        <div class="flex items-center space-x-0.5">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="2"
-                                                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-                                            </svg>
-                                            <span>2</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="card cursor-pointer shadow-sm">
-                            <div class="px-2.5 pb-2 pt-1.5">
-                                <div>
-                                    <div class="flex justify-between">
-                                        <p
-                                            class="font-medium tracking-wide text-slate-600 line-clamp-2 dark:text-navy-100">
-                                            Convert Figma To HTML
-                                        </p>
-                                    </div>
-                                </div>
-
-                                <div class="mt-2 flex flex-wrap space-x-1">
-                                    <div
-                                        class="badge space-x-1 bg-slate-150 py-1 px-1.5 text-slate-800 dark:bg-navy-500 dark:text-navy-100">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                        </svg>
-                                        <span> May 25</span>
-                                    </div>
-                                    <div
-                                        class="badge space-x-1 bg-success/10 py-1 px-1.5 text-success dark:bg-success/15">
-                                        <span>Design</span>
-                                    </div>
-                                </div>
-
-                                <div class="p-1">
-                                    <img src="{{ asset('images/illustrations/dashboard-meet-dark.svg') }}"
-                                        alt="image" />
-                                </div>
-
-                                <div class="mt-3 flex items-end justify-between">
-                                    <div class="flex items-center space-x-2">
-                                        <div class="avatar h-6 w-6">
-                                            <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                                alt="avatar" />
-                                        </div>
-                                        <p>Samantha S.</p>
-                                    </div>
-                                    <div
-                                        class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">
-                                        <div class="flex items-center space-x-0.5">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="2"
-                                                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-                                            </svg>
-                                            <span>2</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="flex justify-center py-2">
-                        <button
-                            class="flex items-center justify-center space-x-2 font-medium text-slate-600 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-                            </svg>
-                            <span>New Task</span>
-                        </button>
-                    </div>
-                </div>
-
-                <div class="board-draggable relative flex max-h-full w-72 shrink-0 flex-col">
-                    <div class="board-draggable-handler flex items-center justify-between px-0.5 pb-3">
-                        <div class="flex items-center space-x-2">
-                            <div
-                                class="flex h-8 w-8 items-center justify-center rounded-lg bg-success/10 text-success dark:bg-success/15">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                    <path d="M12.5293 18L20.9999 8.40002" stroke-linecap="round"
-                                        stroke-linejoin="round" />
-                                    <path d="M3 13.2L7.23529 18L17.8235 6" stroke-linecap="round"
-                                        stroke-linejoin="round" />
-                                </svg>
-                            </div>
-                            <h3 class="text-base text-slate-700 dark:text-navy-100">
-                                Success
-                            </h3>
-                        </div>
-
-                        <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-
-                            <template x-teleport="#x-teleport-target">
-                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                    <div
-                                        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                    Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                    else</a>
-                                            </li>
-                                        </ul>
-                                        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                    Link</a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-                    </div>
-                    <div class="is-scrollbar-hidden relative space-y-2.5 overflow-y-auto p-0.5"
-                        x-init="Sortable.create($el, {
-                            animation: 200,
-                            group: 'board-cards',
-                            easing: 'cubic-bezier(0, 0, 0.2, 1)',
-                            direction: 'vertical',
-                            delay: 150,
-                            delayOnTouchOnly: true,
-                        })">
-                        <div class="card cursor-pointer shadow-sm">
-                            <div class="px-2.5 pb-2 pt-1.5">
-                                <div>
-                                    <div class="flex justify-between">
-                                        <p
-                                            class="font-medium tracking-wide text-slate-600 line-clamp-2 dark:text-navy-100">
-                                            Tracking Bugs
-                                        </p>
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="-mr-1.5 h-3.5 w-3.5 shrink-0 text-warning" viewBox="0 0 20 20"
-                                            fill="currentColor">
-                                            <path fill-rule="evenodd"
-                                                d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z"
-                                                clip-rule="evenodd" />
-                                        </svg>
-                                    </div>
-
-                                    <p class="mt-px text-xs text-slate-400 dark:text-navy-300">
-                                        Tracking app bugs
-                                    </p>
-                                </div>
-
-                                <div class="mt-2 flex flex-wrap space-x-1">
-                                    <div
-                                        class="badge space-x-1 bg-slate-150 py-1 px-1.5 text-slate-800 dark:bg-navy-500 dark:text-navy-100">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                        </svg>
-                                        <span> Jun 05</span>
-                                    </div>
-                                </div>
-
-                                <div class="mt-3 flex items-end justify-between">
-                                    <div class="flex items-center space-x-2">
-                                        <div class="avatar h-6 w-6">
-                                            <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                                alt="avatar" />
-                                        </div>
-                                        <p>Lance T.</p>
-                                    </div>
-                                    <div
-                                        class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">
-                                        <div class="flex items-center space-x-0.5">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="2"
-                                                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-                                            </svg>
-                                            <span>2</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="card cursor-pointer shadow-sm">
-                            <div class="flex space-x-3 rounded-lg bg-error/10 px-2.5 pb-2 pt-1.5">
-                                <div class="w-10 shrink-0 py-1">
-                                    <img class="w-full" src="{{ asset('images/illustrations/upload-cloud.svg') }}"
-                                        alt="image" />
-                                </div>
-                                <div class="flex-1">
-                                    <div>
-                                        <div class="flex justify-between">
-                                            <p class="font-medium tracking-wide text-error line-clamp-2">
-                                                Backup System
-                                            </p>
-                                        </div>
-                                        <p class="mt-px text-xs text-slate-400 dark:text-navy-300">
-                                            Backup Chats, videos and all datas
-                                        </p>
-                                    </div>
-                                    <div class="mt-2 flex flex-wrap space-x-1">
-                                        <div
-                                            class="badge space-x-1 bg-error/10 py-1 px-1.5 text-error dark:bg-error/15">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="2"
-                                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                            </svg>
-                                            <span> Jun 17</span>
-                                        </div>
-                                        <div class="badge bg-warning/10 py-1 px-1.5 text-warning dark:bg-warning/15">
-                                            Backup
-                                        </div>
-                                    </div>
-                                    <div class="mt-3 flex items-end justify-between">
-                                        <div class="flex flex-wrap -space-x-1.5">
-                                            <div class="avatar h-5 w-5 hover:z-10">
-                                                <div
-                                                    class="is-initial rounded-full bg-secondary text-tiny+ uppercase text-white ring-1 ring-white dark:bg-secondary-light dark:ring-navy-700">
-                                                    jd
-                                                </div>
-                                            </div>
-
-                                            <div class="avatar h-5 w-5 hover:z-10">
-                                                <img class="rounded-full ring-1 ring-white dark:ring-navy-700"
-                                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-5 w-5 hover:z-10">
-                                                <img class="rounded-full ring-1 ring-white dark:ring-navy-700"
-                                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                            </div>
-                                        </div>
-                                        <div
-                                            class="flex items-center space-x-2 text-xs text-slate-400 dark:text-navy-300">
-                                            <div class="flex items-center space-x-0.5">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="2"
-                                                        d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-                                                </svg>
-                                                <span>6</span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="flex justify-center py-2">
-                        <button
-                            class="flex items-center justify-center space-x-2 font-medium text-slate-600 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-                            </svg>
-                            <span>New Task</span>
-                        </button>
-                    </div>
-                </div>
-
-                <div class="w-72 shrink-0">
-                    <button
-                        class="btn w-full bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                        New Board
-                    </button>
-                </div>
-            </div>
-        </div>
-    </main>
-
-    <div x-show="showDrawer" x-data="{ showDrawer: false }"
-        x-on:show-drawer.window="($event.detail.drawerId === 'kanban-setting-drawer') && (showDrawer = true)"
-        @keydown.window.escape="showDrawer = false">
-        <div class="fixed inset-0 z-[100] bg-slate-900/60 transition-opacity duration-200"
-            @click="showDrawer = false" x-show="showDrawer" x-transition:enter="ease-out"
-            x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in"
-            x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"></div>
-        <div class="fixed right-0 top-0 z-[101] h-full w-full sm:w-80">
-            <div class="flex h-full w-full transform-gpu flex-col bg-white transition-transform duration-200 dark:bg-navy-700"
-                x-show="showDrawer" x-transition:enter="ease-out" x-transition:enter-start="translate-x-full"
-                x-transition:enter-end="translate-x-0" x-transition:leave="ease-in"
-                x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
-                <div class="flex h-14 items-center justify-between bg-slate-150 p-4 dark:bg-navy-800">
-                    <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
-                        Banking App
-                    </h3>
-                    <div class="-mr-1.5 flex">
-                        <button x-data="{ isImportant: false }" @click.stop="isImportant =! isImportant"
-                            class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg x-show="!isImportant" xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                            <svg x-show="isImportant" xmlns="http://www.w3.org/2000/svg"
-                                class="h-5.5 w-5.5 text-primary dark:text-accent" viewBox="0 0 20 20"
-                                fill="currentColor" style="display: none">
-                                <path
-                                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                            </svg>
-                        </button>
-                        <button @click="showDrawer=false"
-                            class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div x-init="$el._x_simplebar = new SimpleBar($el)" class="flex grow flex-col overflow-y-auto">
-                    <div x-data="{ expanded: true }">
-                        <div class="mt-3 flex items-center justify-between px-4">
-                            <span class="text-xs+ font-medium uppercase">Actions</span>
-                            <div class="-mr-1.5 flex">
-                                <button @click="expanded =! expanded"
-                                    class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 transition-transform"
-                                        :class="expanded && 'rotate-180'" fill="none" viewBox="0 0 24 24"
-                                        stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M19 9l-7 7-7-7" />
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                        <div x-show="expanded" x-collapse>
-                            <ul class="mt-2 space-y-3 px-4 font-inter font-medium">
-                                <li>
-                                    <a class="group inline-flex items-center space-x-2 tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-navy-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
-                                        href="#">
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                stroke-width="1.5"
-                                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                                        </svg>
-                                        <span>Edit Board</span>
-                                    </a>
-                                </li>
-                                <li>
-                                    <a class="group inline-flex items-center space-x-2 tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-navy-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
-                                        href="#">
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                stroke-width="1.5"
-                                                d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
-                                        </svg>
-                                        <span>Archive</span>
-                                    </a>
-                                </li>
-                                <li>
-                                    <a class="group inline-flex items-center space-x-2 tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-navy-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
-                                        href="#">
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                stroke-width="1.5"
-                                                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-                                        </svg>
-                                        <span>Clone</span>
-                                    </a>
-                                </li>
-                                <li>
-                                    <a class="group inline-flex items-center space-x-2 tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-navy-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
-                                        href="#">
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                stroke-width="1.5"
-                                                d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
-                                        </svg>
-                                        <span>About Board</span>
-                                    </a>
-                                </li>
-                                <li>
-                                    <a class="group inline-flex items-center space-x-2 tracking-wide outline-none transition-colors hover:text-slate-800 focus:text-navy-800 dark:hover:text-navy-100 dark:focus:text-navy-100"
-                                        href="#">
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="h-5 w-5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                            fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                stroke-width="1.5"
-                                                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                                        </svg>
-                                        <span>Visibility</span>
-                                    </a>
-                                </li>
-                                <li>
-                                    <a class="group inline-flex items-center space-x-2 tracking-wide text-error outline-none"
-                                        href="#">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                stroke-width="1.5"
-                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                                        </svg>
-                                        <span>Delete</span>
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div class="my-4 mx-4 h-px shrink-0 bg-slate-200 dark:bg-navy-500"></div>
-                    <div x-data="{ expanded: true }">
-                        <div class="flex items-center justify-between px-4">
-                            <span class="text-xs+ font-medium uppercase">Activities</span>
-                            <div class="-mr-1.5 flex">
-                                <button
-                                    class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                                    </svg>
-                                </button>
-                                <button @click="expanded =! expanded"
-                                    class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 transition-transform"
-                                        :class="expanded && 'rotate-180'" fill="none" viewBox="0 0 24 24"
-                                        stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M19 9l-7 7-7-7" />
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                        <div x-show="expanded" x-collapse>
-                            <ol class="timeline line-space max-w-sm p-4 [--size:1.5rem]">
-                                <li class="timeline-item">
-                                    <div
-                                        class="timeline-item-point rounded-full border border-current bg-white text-secondary dark:bg-navy-700 dark:text-secondary-light">
-                                        <i class="fa fa-user-edit text-tiny"></i>
-                                    </div>
-                                    <div class="timeline-item-content flex-1 pl-4">
-                                        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
-                                            <p
-                                                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0">
-                                                User Photo Changed
-                                            </p>
-                                            <span class="text-xs text-slate-400 dark:text-navy-300">12 minute
-                                                ago</span>
-                                        </div>
-                                        <p class="py-1">John Doe changed his avatar photo</p>
-                                        <div class="avatar mt-2 h-20 w-20">
-                                            <img class="mask is-squircle" src="{{ asset('images/200x200.png') }}"
-                                                alt="avatar" />
-                                        </div>
-                                    </div>
-                                </li>
-                                <li class="timeline-item">
-                                    <div
-                                        class="timeline-item-point rounded-full border border-current bg-white text-primary dark:bg-navy-700 dark:text-accent">
-                                        <i class="fa-solid fa-image text-tiny"></i>
-                                    </div>
-                                    <div class="timeline-item-content flex-1 pl-4">
-                                        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
-                                            <p
-                                                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0">
-                                                Images Added
-                                            </p>
-                                            <span class="text-xs text-slate-400 dark:text-navy-300">1 hour ago</span>
-                                        </div>
-                                        <p class="py-1">Mores Clarke added new image gallery</p>
-                                        <div class="mt-4 grid grid-cols-3 gap-3">
-                                            <img class="rounded-lg" src="{{ asset('images/800x600.png') }}"
-                                                alt="image" />
-                                            <img class="rounded-lg" src="{{ asset('images/800x600.png') }}"
-                                                alt="image" />
-                                            <img class="rounded-lg" src="{{ asset('images/800x600.png') }}"
-                                                alt="image" />
-                                            <img class="rounded-lg" src="{{ asset('images/800x600.png') }}"
-                                                alt="image" />
-                                            <img class="rounded-lg" src="{{ asset('images/800x600.png') }}"
-                                                alt="image" />
-                                            <img class="rounded-lg" src="{{ asset('images/800x600.png') }}"
-                                                alt="image" />
-                                        </div>
-                                        <div class="mt-4">
-                                            <span class="font-medium text-slate-600 dark:text-navy-100">
-                                                Category:
-                                            </span>
-
-                                            <a href="#"
-                                                class="text-xs text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">
-                                                #Tag
-                                            </a>
-
-                                            <a href="#"
-                                                class="text-xs text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">
-                                                #Category
-                                            </a>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li class="timeline-item">
-                                    <div
-                                        class="timeline-item-point rounded-full border border-current bg-white text-success dark:bg-navy-700">
-                                        <i class="fa fa-leaf text-tiny"></i>
-                                    </div>
-                                    <div class="timeline-item-content flex-1 pl-4">
-                                        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
-                                            <p
-                                                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0">
-                                                Design Completed
-                                            </p>
-                                            <span class="text-xs text-slate-400 dark:text-navy-300">3 hours ago</span>
-                                        </div>
-                                        <p class="py-1">
-                                            Robert Nolan completed the design of the CRM
-                                            application
-                                        </p>
-                                        <a href="#"
-                                            class="inline-flex items-center space-x-1 pt-2 text-slate-600 transition-colors hover:text-primary dark:text-navy-100 dark:hover:text-accent">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                                            </svg>
-                                            <span>File_final.fig</span>
-                                        </a>
-                                        <div class="pt-2">
-                                            <a href="#"
-                                                class="tag rounded-full border border-secondary/30 bg-secondary/10 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:border-secondary-light/30 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25">
-                                                UI/UX
-                                            </a>
-
-                                            <a href="#"
-                                                class="tag rounded-full border border-info/30 bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
-                                                CRM
-                                            </a>
-
-                                            <a href="#"
-                                                class="tag rounded-full border border-success/30 bg-success/10 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
-                                                Dashboard
-                                            </a>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li class="timeline-item">
-                                    <div
-                                        class="timeline-item-point rounded-full border border-current bg-white text-warning dark:bg-navy-700">
-                                        <i class="fa fa-project-diagram text-tiny"></i>
-                                    </div>
-                                    <div class="timeline-item-content flex-1 pl-4">
-                                        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
-                                            <p
-                                                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0">
-                                                ER Diagram
-                                            </p>
-                                            <span class="text-xs text-slate-400 dark:text-navy-300">a day ago</span>
-                                        </div>
-                                        <p class="py-1">Team completed the ER diagram app</p>
-                                        <div>
-                                            <p class="text-xs text-slate-400 dark:text-navy-300">
-                                                Members:
-                                            </p>
-                                            <div class="mt-2 flex justify-between">
-                                                <div class="flex flex-wrap -space-x-2">
-                                                    <div class="avatar h-7 w-7 hover:z-10">
-                                                        <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                            src="{{ asset('images/200x200.png') }}"
-                                                            alt="avatar" />
-                                                    </div>
-
-                                                    <div class="avatar h-7 w-7 hover:z-10">
-                                                        <div
-                                                            class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
-                                                            jd
-                                                        </div>
-                                                    </div>
-
-                                                    <div class="avatar h-7 w-7 hover:z-10">
-                                                        <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                            src="{{ asset('images/200x200.png') }}"
-                                                            alt="avatar" />
-                                                    </div>
-
-                                                    <div class="avatar h-7 w-7 hover:z-10">
-                                                        <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                            src="{{ asset('images/200x200.png') }}"
-                                                            alt="avatar" />
-                                                    </div>
-
-                                                    <div class="avatar h-7 w-7 hover:z-10">
-                                                        <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                            src="{{ asset('images/200x200.png') }}"
-                                                            alt="avatar" />
-                                                    </div>
-                                                </div>
-                                                <button
-                                                    class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                                        class="h-5 w-5 rotate-45" fill="none"
-                                                        viewBox="0 0 24 24" stroke="currentColor">
-                                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                                            stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12" />
-                                                    </svg>
-                                                </button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li class="timeline-item">
-                                    <div
-                                        class="timeline-item-point rounded-full border border-current bg-white text-error dark:bg-navy-700">
-                                        <i class="fa fa-history text-tiny"></i>
-                                    </div>
-                                    <div class="timeline-item-content flex-1 pl-4">
-                                        <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
-                                            <p
-                                                class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0">
-                                                Weekly Report
-                                            </p>
-                                            <span class="text-xs text-slate-400 dark:text-navy-300">a day ago</span>
-                                        </div>
-                                        <p class="py-1">The weekly report was uploaded</p>
-                                    </div>
-                                </li>
-                            </ol>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div @click="$dispatch('show-drawer', { drawerId: 'kanban-setting-drawer' })"
-        class="fixed right-3 bottom-3 rounded-full bg-white dark:bg-navy-700">
-        <button
-            class="btn h-14 w-14 rounded-full bg-success p-0 font-medium text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90 sm:hidden">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
-                stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
-            </svg>
-        </button>
-    </div>
-
-</x-base-layout>

resources/views/pages/apps-list.blade.php

-<x-app-layout title="Application List" is-header-blur="true">
-    <!-- Main Content Wrapper -->
-    <main class="main-content w-full px-[var(--margin-x)] pb-8">
-        <div class="mt-12 text-center">
-            <div class="avatar h-16 w-16">
-                <div class="is-initial rounded-full bg-gradient-to-br from-pink-500 to-rose-500 text-white">
-                    <i class="fa-solid fa-shapes text-2xl"></i>
-                </div>
-            </div>
-            <h3 class="mt-3 text-xl font-semibold text-slate-600 dark:text-navy-100">
-                Lineone Applications
-            </h3>
-            <p class="mt-0.5 text-base">
-                List of prebuilt applications of Lineone
-            </p>
-        </div>
-        <div class="mx-auto mt-8 grid w-full max-w-4xl grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:gap-6">
-            <div class="card p-4 sm:p-5">
-                <div class="avatar h-12 w-12">
-                    <div class="is-initial rounded-full bg-info text-white">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor" stroke-width="2">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-                        </svg>
-                    </div>
-                </div>
-                <h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
-                    Chat App
-                </h2>
-                <p class="mt-1">
-                    Lineone prebuilt Messaging UI kit includes designs for social
-                    chat.
-                </p>
-                <div class="mt-5 pb-1">
-                    <a href="{{ route('apps/chat') }}"
-                        class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
-                        Application</a>
-                </div>
-            </div>
-            <div class="card p-4 sm:p-5">
-                <div class="avatar h-12 w-12">
-                    <div class="is-initial rounded-full bg-warning text-white">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor" stroke-width="2">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
-                        </svg>
-                    </div>
-                </div>
-                <h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
-                    Kanban Board
-                </h2>
-                <p class="mt-1">
-                    The Kanban Board to keep track of your personal and work tasks.
-                </p>
-                <div class="mt-5 pb-1">
-                    <a href="{{ route('apps/kanban') }}"
-                        class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
-                        Application</a>
-                </div>
-            </div>
-            <div class="card p-4 sm:p-5">
-                <div class="avatar h-12 w-12">
-                    <div class="is-initial rounded-full bg-secondary text-white">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor" stroke-width="2">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
-                        </svg>
-                    </div>
-                </div>
-                <h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
-                    File Manager
-                </h2>
-                <p class="mt-1">
-                    Lineone File Manager UI Kit is designed with modern design trends.
-                </p>
-                <div class="mt-5 pb-1">
-                    <a href="{{ route('apps/filemanager') }}"
-                        class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
-                        Application</a>
-                </div>
-            </div>
-            <div class="card p-4 sm:p-5">
-                <div class="avatar h-12 w-12">
-                    <div class="is-initial rounded-full bg-primary text-white dark:bg-accent">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor" stroke-width="2">
-                            <path d="M12.5293 18L20.9999 8.40002" stroke-linecap="round" stroke-linejoin="round" />
-                            <path d="M3 13.2L7.23529 18L17.8235 6" stroke-linecap="round" stroke-linejoin="round" />
-                        </svg>
-                    </div>
-                </div>
-                <h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
-                    Todo App
-                </h2>
-                <p class="mt-1">
-                    Lineone Todo UI kit is a simple to-do list and an task management
-                    app.
-                </p>
-                <div class="mt-5 pb-1">
-                    <a href="{{ route('apps/todo') }}"
-                        class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
-                        Application</a>
-                </div>
-            </div>
-            <div class="card p-4 sm:p-5">
-                <div class="avatar h-12 w-12">
-                    <div class="is-initial rounded-full bg-error text-white">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor" stroke-width="2">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                        </svg>
-                    </div>
-                </div>
-                <h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
-                    Mail App
-                </h2>
-                <p class="mt-1">
-                    Lineone prebuilt Mail UI kit includes designs for email system.
-                </p>
-                <div class="mt-5 pb-1">
-                    <a href="{{ route('apps/mail') }}"
-                        class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
-                        Application</a>
-                </div>
-            </div>
-            <div class="card p-4 sm:p-5">
-                <div class="avatar h-12 w-12">
-                    <div class="is-initial rounded-full bg-success text-white">
-                        <i class="fa-solid fa-n text-xl"></i>
-                    </div>
-                </div>
-                <h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
-                    NFT Marketplace V1
-                </h2>
-                <p class="mt-1">
-                    Lineone NFT Store UI Kit is responsive and high-quality UI design
-                    kit for the NFT marketplace.
-                </p>
-                <div class="mt-5 pb-1">
-                    <a href="{{ route('apps/nft1') }}"
-                        class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
-                        Application</a>
-                </div>
-            </div>
-            <div class="card p-4 sm:p-5">
-                <div class="avatar h-12 w-12">
-                    <div class="is-initial rounded-full bg-info text-white">
-                        <i class="fa-solid fa-n text-xl"></i>
-                    </div>
-                </div>
-                <h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
-                    NFT Marketplace V2
-                </h2>
-                <p class="mt-1">
-                    Lineone NFT Store UI Kit is responsive and high-quality UI design
-                    kit for the NFT marketplace.
-                </p>
-                <div class="mt-5 pb-1">
-                    <a href="{{ route('apps/nft2') }}"
-                        class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
-                        Application</a>
-                </div>
-            </div>
-            <div class="card p-4 sm:p-5">
-                <div class="avatar h-12 w-12">
-                    <div class="is-initial rounded-full bg-warning text-white">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor" stroke-width="2">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
-                        </svg>
-                    </div>
-                </div>
-                <h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
-                    Point of Sale
-                </h2>
-                <p class="mt-1">
-                    Lineone POS UI Kit is responsive and high-quality UI design kit
-                    for the Point of sale system.
-                </p>
-                <div class="mt-5 pb-1">
-                    <a href="{{ route('apps/pos') }}"
-                        class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
-                        Application</a>
-                </div>
-            </div>
-
-            <div class="card p-4 sm:p-5">
-                <div class="avatar h-12 w-12">
-                    <div class="is-initial rounded-full bg-primary text-white dark:bg-accent">
-                        <i class="fa-solid fa-car-rear text-xl"></i>
-                    </div>
-                </div>
-                <h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
-                    Travel
-                </h2>
-                <p class="mt-1">
-                    Lineone Travel UI Kit is responsive and high-quality UI design kit
-                    for the travel agancy wesites.
-                </p>
-                <div class="mt-5 pb-1">
-                    <a href="{{ route('apps/travel') }}"
-                        class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
-                        Application</a>
-                </div>
-            </div>
-        </div>
-    </main>
-</x-app-layout>

resources/views/pages/apps-mail.blade.php

-<x-base-layout title="Mail Application" is-sidebar-open="true" is-header-blur="true" has-min-sidebar="true">
-    <!-- Sidebar -->
-    <div class="sidebar print:hidden">
-        <!-- Main Sidebar -->
-        <x-app-partials.main-sidebar></x-app-partials.main-sidebar>
-
-        <!-- Sidebar Panel -->
-        <div class="sidebar-panel">
-            <div class="flex h-full grow flex-col bg-white pl-[var(--main-sidebar-width)] dark:bg-navy-750">
-                <!-- Sidebar Panel Header -->
-                <div class="flex h-18 w-full items-center justify-between pl-4 pr-1">
-                    <div class="flex items-center">
-                        <div class="avatar mr-3 hidden h-9 w-9 lg:flex">
-                            <div class="is-initial rounded-full bg-warning/10 text-warning">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                                    stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                                </svg>
-                            </div>
-                        </div>
-                        <p class="text-lg font-medium tracking-wider text-slate-800 line-clamp-1 dark:text-navy-100">
-                            Mail
-                        </p>
-                    </div>
-                    <button @click="$store.global.isSidebarExpanded = false"
-                        class="btn h-7 w-7 rounded-full p-0 text-primary hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-accent-light/80 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 xl:hidden">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-                        </svg>
-                    </button>
-                </div>
-
-                <!-- Sidebar Panel Body -->
-                <div class="flex h-[calc(100%-4.5rem)] grow flex-col">
-                    <div class="is-scrollbar-hidden grow overflow-y-auto">
-                        <div class="mt-2 px-4">
-                            <button
-                                class="btn w-full space-x-2 rounded-full border border-slate-200 py-2 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-500 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
-                                </svg>
-                                <span> New Message</span>
-                            </button>
-                        </div>
-                        <ul class="mt-4 space-y-1.5 px-2 font-inter text-xs+ font-medium">
-                            <li>
-                                <a class="group flex justify-between space-x-2 rounded-lg bg-primary/10 p-2 tracking-wide text-primary outline-none transition-all dark:bg-accent-light/10 dark:text-accent-light"
-                                    href="#">
-                                    <div class="flex items-center space-x-2">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M8 4H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-2m-4-1v8m0 0l3-3m-3 3L9 8m-5 5h2.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293h3.172a1 1 0 00.707-.293l2.414-2.414a1 1 0 01.707-.293H20" />
-                                        </svg>
-                                        <span>Inbox</span>
-                                    </div>
-                                    <span class="text-primary dark:text-accent-light">2</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex justify-between space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <div class="flex items-center space-x-2">
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                            fill="none" viewBox="0 0 24 24">
-                                            <path fill="currentColor"
-                                                d="m8.625 3.37.353-.661-.353.661Zm10.49 5.602-.354.662.353-.662Zm-.005 6.082.352.662-.352-.662ZM8.626 20.632l-.352-.662.352.662Zm-4.461-4.08-.718-.216.718.216Zm-.007-9.107-.718.215.718-.215Zm4.713 5.323a.75.75 0 0 0 0-1.5v1.5Zm-.6-8.736 10.49 5.602.707-1.323-10.49-5.602-.707 1.323Zm10.487 10.36L8.274 19.97l.704 1.324 10.484-5.578-.704-1.324ZM4.883 16.768l1.364-4.534-1.437-.432-1.363 4.534 1.436.432Zm1.364-4.965-1.37-4.574-1.437.43 1.37 4.574 1.437-.43Zm-.719.965h3.343v-1.5H5.528v1.5Zm2.746 7.202c-.95.505-1.94.289-2.643-.353-.706-.646-1.091-1.708-.748-2.85l-1.436-.431c-.519 1.724.064 3.374 1.172 4.388 1.113 1.017 2.783 1.409 4.36.57l-.705-1.324ZM18.76 9.634c1.82.972 1.818 3.79-.003 4.758l.704 1.325c2.882-1.534 2.884-5.869.006-7.406l-.707 1.323ZM8.978 2.709c-1.575-.841-3.246-.453-4.36.564C3.507 4.285 2.922 5.935 3.44 7.66l1.437-.43c-.343-1.143.044-2.204.751-2.85.703-.64 1.694-.855 2.643-.348l.707-1.323Z" />
-                                        </svg>
-
-                                        <span class="text-slate-800 dark:text-navy-100">Sent</span>
-                                    </div>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex justify-between space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <div class="flex items-center space-x-2">
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                            fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                                        </svg>
-
-                                        <span class="text-slate-800 dark:text-navy-100">Draft</span>
-                                    </div>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex justify-between space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <div class="flex items-center space-x-2">
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                            fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
-                                        </svg>
-
-                                        <span class="text-slate-800 dark:text-navy-100">Span</span>
-                                    </div>
-                                    <span class="text-primary dark:text-accent-light">4</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex justify-between space-x-2 rounded-lg p-2 tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20"
-                                    href="#">
-                                    <div class="flex items-center space-x-2">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                                        </svg>
-
-                                        <span>Trash</span>
-                                    </div>
-                                </a>
-                            </li>
-                        </ul>
-                        <div class="my-3 mx-4 h-px bg-slate-200 dark:bg-navy-500"></div>
-
-                        <div class="flex items-center justify-between px-4">
-                            <span class="text-xs font-medium uppercase">Labels </span>
-                            <div class="-mr-1.5 flex">
-                                <button
-                                    class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                                    </svg>
-                                </button>
-
-                                <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                                    class="inline-flex">
-                                    <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                        class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                                        </svg>
-                                    </button>
-
-                                    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                        <div
-                                            class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                            <ul>
-                                                <li>
-                                                    <a href="#"
-                                                        class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                                </li>
-                                                <li>
-                                                    <a href="#"
-                                                        class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                        Action</a>
-                                                </li>
-                                                <li>
-                                                    <a href="#"
-                                                        class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                        else</a>
-                                                </li>
-                                            </ul>
-                                            <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                            <ul>
-                                                <li>
-                                                    <a href="#"
-                                                        class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                        Link</a>
-                                                </li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <ul class="mt-1 space-y-1.5 px-2 font-inter text-xs+ font-medium">
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                            d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">Important</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">Saved</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">Archive</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="h-4.5 w-4.5 text-secondary dark:text-secondary-light" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">Work</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-info"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">Personal</span>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <div class="flex flex-col p-4">
-                        <div class="progress h-2 bg-slate-150 dark:bg-navy-500">
-                            <div class="w-7/12 rounded-full bg-info"></div>
-                        </div>
-                        <div class="mt-2 flex items-center justify-between">
-                            <p>
-                                <span class="font-medium text-slate-600 dark:text-navy-100">35GB</span>
-                                of 1TB
-                            </p>
-                            <a href="#"
-                                class="text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">Upgrade</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Minimized Sidebar Panel -->
-        <div class="sidebar-panel-min">
-            <div class="flex h-full flex-col items-center bg-white dark:bg-navy-750">
-                <div class="flex h-18 shrink-0 items-center justify-center">
-                    <div
-                        class="avatar flex h-10 w-10 rounded-full bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light">
-                        <div class="is-initial">
-                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                xmlns="http://www.w3.org/2000/svg" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                    d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
-                            </svg>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="flex h-[calc(100%-4.5rem)] grow flex-col">
-                    <div class="is-scrollbar-hidden flex grow flex-col overflow-y-auto">
-                        <ul class="mt-4 space-y-1">
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 bg-primary/10 p-0 font-medium text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                            d="M8 4H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-2m-4-1v8m0 0l3-3m-3 3L9 8m-5 5h2.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293h3.172a1 1 0 00.707-.293l2.414-2.414a1 1 0 01.707-.293H20" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24">
-                                        <path fill="currentColor"
-                                            d="m8.625 3.37.353-.661-.353.661Zm10.49 5.602-.354.662.353-.662Zm-.005 6.082.352.662-.352-.662ZM8.626 20.632l-.352-.662.352.662Zm-4.461-4.08-.718-.216.718.216Zm-.007-9.107-.718.215.718-.215Zm4.713 5.323a.75.75 0 0 0 0-1.5v1.5Zm-.6-8.736 10.49 5.602.707-1.323-10.49-5.602-.707 1.323Zm10.487 10.36L8.274 19.97l.704 1.324 10.484-5.578-.704-1.324ZM4.883 16.768l1.364-4.534-1.437-.432-1.363 4.534 1.436.432Zm1.364-4.965-1.37-4.574-1.437.43 1.37 4.574 1.437-.43Zm-.719.965h3.343v-1.5H5.528v1.5Zm2.746 7.202c-.95.505-1.94.289-2.643-.353-.706-.646-1.091-1.708-.748-2.85l-1.436-.431c-.519 1.724.064 3.374 1.172 4.388 1.113 1.017 2.783 1.409 4.36.57l-.705-1.324ZM18.76 9.634c1.82.972 1.818 3.79-.003 4.758l.704 1.325c2.882-1.534 2.884-5.869.006-7.406l-.707 1.323ZM8.978 2.709c-1.575-.841-3.246-.453-4.36.564C3.507 4.285 2.922 5.935 3.44 7.66l1.437-.43c-.343-1.143.044-2.204.751-2.85.703-.64 1.694-.855 2.643-.348l.707-1.323Z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                                    </svg>
-                                </a>
-                            </li>
-                        </ul>
-                        <div class="my-4 h-px bg-slate-200 dark:bg-navy-500"></div>
-                        <ul class="space-y-1">
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-                                    </svg>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <div class="py-3">
-                        <div x-data="usePopper({ placement: 'right-start', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn h-10 w-10 rounded-full border border-slate-200 p-0 font-medium hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-500 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-
-                            <template x-teleport="#x-teleport-target">
-                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                    <div
-                                        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                    Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                    else</a>
-                                            </li>
-                                        </ul>
-                                        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                    Link</a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- App Header -->
-    <x-app-partials.header></x-app-partials.header>
-
-    <!-- Mobile Searchbar -->
-    <x-app-partials.mobile-searchbar></x-app-partials.mobile-searchbar>
-
-    <!-- Right Sidebar -->
-    <x-app-partials.right-sidebar></x-app-partials.right-sidebar>
-
-    <!-- Main Content Wrapper -->
-    <main class="main-content mail-app w-full px-[var(--margin-x)] pb-6">
-        <div class="flex flex-col-reverse py-5 sm:flex-row sm:justify-between">
-            <div class="mt-2 flex items-center justify-between space-x-1">
-                <div class="flex items-center px-2.5">
-                    <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select All'">
-                        <input
-                            class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
-                            type="checkbox" />
-                    </label>
-                    <div x-data="usePopper({ placement: 'bottom-start', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                        class="inline-flex">
-                        <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                            class="btn -ml-1 h-5 w-5 rounded p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <i class="fas fa-chevron-down text-tiny+"></i>
-                        </button>
-
-                        <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                            <div
-                                class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                <ul>
-                                    <li>
-                                        <a href="#"
-                                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">All</a>
-                                    </li>
-                                    <li>
-                                        <a href="#"
-                                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">None</a>
-                                    </li>
-                                    <li>
-                                        <a href="#"
-                                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Read</a>
-                                    </li>
-                                    <li>
-                                        <a href="#"
-                                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Starred</a>
-                                    </li>
-                                    <li>
-                                        <a href="#"
-                                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Unread</a>
-                                    </li>
-                                    <li>
-                                        <a href="#"
-                                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Unstarred</a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex">
-                    <button
-                        class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                        </svg>
-                    </button>
-                    <button
-                        class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                        </svg>
-                    </button>
-                </div>
-            </div>
-            <div class="flex justify-between">
-                <div class="text-lg font-medium text-slate-700 dark:text-navy-100 sm:hidden">
-                    Inbox
-                </div>
-                <div class="flex items-center space-x-1">
-                    <div class="flex items-center space-x-2">
-                        <span>1 - 25 of 1234</span>
-                        <div class="flex">
-                            <button
-                                class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M15 19l-7-7 7-7" />
-                                </svg>
-                            </button>
-                            <button
-                                class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M9 5l7 7-7 7" />
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                    <button
-                        class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor" stroke-width="1.5">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                        </svg>
-                    </button>
-                </div>
-            </div>
-        </div>
-        <div class="card">
-            <div
-                class="flex cursor-pointer flex-col rounded-t-lg border-b p-2.5 font-semibold text-slate-700 hover:bg-slate-100 dark:border-navy-500 dark:text-navy-100 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Konnor Guzman</h3>
-                            <span class="h-2 w-2 shrink-0 rounded-full bg-secondary lg:hidden"></span>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Dec 03</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            Nemo enim ipsam voluptatem quia voluptas sit
-                        </span>
-                        <div
-                            class="badge hidden h-6 rounded-full border border-secondary text-secondary dark:border-secondary-light dark:text-secondary-light lg:inline-flex">
-                            Work
-                        </div>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Dec 03</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 font-semibold text-slate-700 hover:bg-slate-100 dark:border-navy-500 dark:text-navy-100 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">John Doe</h3>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 29</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                            Quod.
-                        </span>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 29</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 hover:bg-slate-100 dark:border-navy-500 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Travis Fuller</h3>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 24</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            Excepteur sint occaecat cupidatat non proident, sunt in culpa
-                            qui officia deserunt mollit anim id est laborum
-                        </span>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 29</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 hover:bg-slate-100 dark:border-navy-500 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Alfredo Elliott</h3>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 21</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-                            accusantium doloremque laudantium, totam rem aperiam, eaque
-                            ipsa quae ab illo inventore veritatis et quasi architecto
-                            beatae vitae dicta sunt explicabo.
-                        </span>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 21</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 hover:bg-slate-100 dark:border-navy-500 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Derrick Simmons</h3>
-                            <span class="h-2 w-2 shrink-0 rounded-full bg-info lg:hidden"></span>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 19</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            Ut enim ad minima veniam, quis nostrum exercitationem
-                        </span>
-                        <div class="badge hidden h-6 rounded-full border border-info text-info lg:inline-flex">
-                            Personal
-                        </div>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 19</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 hover:bg-slate-100 dark:border-navy-500 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Katrina West</h3>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 17</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            Qis autem vel eum iure reprehenderit qui in ea voluptate velit
-                            esse quam nihil molestiae consequatur
-                        </span>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 17</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 font-semibold text-slate-700 hover:bg-slate-100 dark:border-navy-500 dark:text-navy-100 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Henry Curtis</h3>
-                            <span class="h-2 w-2 shrink-0 rounded-full bg-secondary lg:hidden"></span>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 16</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            But I must explain to you how all this mistaken idea of
-                            denouncing pleasure
-                        </span>
-                        <div
-                            class="badge hidden h-6 rounded-full border border-secondary text-secondary dark:border-secondary-light dark:text-secondary-light lg:inline-flex">
-                            Work
-                        </div>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 16</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 hover:bg-slate-100 dark:border-navy-500 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Raul Bradley</h3>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 14</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            At vero eos et accusamus et iusto odio dignissimos ducimus qui
-                            blanditiis
-                        </span>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 14</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 hover:bg-slate-100 dark:border-navy-500 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Samantha Shelton</h3>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 12</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            Itaque earum rerum hic tenetur a sapiente delectus, ut aut
-                            reiciendis voluptatibus
-                        </span>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 12</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 hover:bg-slate-100 dark:border-navy-500 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Corey Evans</h3>
-                            <span class="h-2 w-2 shrink-0 rounded-full bg-info lg:hidden"></span>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 10</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            On the other hand, we denounce with
-                        </span>
-                        <div class="badge hidden h-6 rounded-full border border-info text-info lg:inline-flex">
-                            Personal
-                        </div>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 10</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 font-semibold text-slate-700 hover:bg-slate-100 dark:border-navy-500 dark:text-navy-100 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Konnor Guzman</h3>
-                            <span class="h-2 w-2 shrink-0 rounded-full bg-secondary lg:hidden"></span>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Dec 03</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            Nemo enim ipsam voluptatem quia voluptas sit
-                        </span>
-                        <div
-                            class="badge hidden h-6 rounded-full border border-secondary text-secondary dark:border-secondary-light dark:text-secondary-light lg:inline-flex">
-                            Work
-                        </div>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Dec 03</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 font-semibold text-slate-700 hover:bg-slate-100 dark:border-navy-500 dark:text-navy-100 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">John Doe</h3>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 29</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                            Quod.
-                        </span>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 29</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 hover:bg-slate-100 dark:border-navy-500 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Travis Fuller</h3>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 24</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            Excepteur sint occaecat cupidatat non proident, sunt in culpa
-                            qui officia deserunt mollit anim id est laborum
-                        </span>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 29</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 hover:bg-slate-100 dark:border-navy-500 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Alfredo Elliott</h3>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 21</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-                            accusantium doloremque laudantium, totam rem aperiam, eaque
-                            ipsa quae ab illo inventore veritatis et quasi architecto
-                            beatae vitae dicta sunt explicabo.
-                        </span>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 21</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 hover:bg-slate-100 dark:border-navy-500 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Derrick Simmons</h3>
-                            <span class="h-2 w-2 shrink-0 rounded-full bg-info lg:hidden"></span>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 19</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            Ut enim ad minima veniam, quis nostrum exercitationem
-                        </span>
-                        <div class="badge hidden h-6 rounded-full border border-info text-info lg:inline-flex">
-                            Personal
-                        </div>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 19</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 hover:bg-slate-100 dark:border-navy-500 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Katrina West</h3>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 17</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            Qis autem vel eum iure reprehenderit qui in ea voluptate velit
-                            esse quam nihil molestiae consequatur
-                        </span>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 17</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 font-semibold text-slate-700 hover:bg-slate-100 dark:border-navy-500 dark:text-navy-100 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Henry Curtis</h3>
-                            <span class="h-2 w-2 shrink-0 rounded-full bg-secondary lg:hidden"></span>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 16</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            But I must explain to you how all this mistaken idea of
-                            denouncing pleasure
-                        </span>
-                        <div
-                            class="badge hidden h-6 rounded-full border border-secondary text-secondary dark:border-secondary-light dark:text-secondary-light lg:inline-flex">
-                            Work
-                        </div>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 16</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 hover:bg-slate-100 dark:border-navy-500 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Raul Bradley</h3>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 14</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            At vero eos et accusamus et iusto odio dignissimos ducimus qui
-                            blanditiis
-                        </span>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 14</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 hover:bg-slate-100 dark:border-navy-500 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Samantha Shelton</h3>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 12</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            Itaque earum rerum hic tenetur a sapiente delectus, ut aut
-                            reiciendis voluptatibus
-                        </span>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 12</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col border-b p-2.5 hover:bg-slate-100 dark:border-navy-500 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Corey Evans</h3>
-                            <span class="h-2 w-2 shrink-0 rounded-full bg-info lg:hidden"></span>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 10</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            On the other hand, we denounce with
-                        </span>
-                        <div class="badge hidden h-6 rounded-full border border-info text-info lg:inline-flex">
-                            Personal
-                        </div>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 10</div>
-            </div>
-            <div
-                class="flex cursor-pointer flex-col rounded-b-lg p-2.5 hover:bg-slate-100 dark:hover:bg-navy-600 sm:flex-row sm:items-center">
-                <div class="flex items-center justify-between">
-                    <div class="flex space-x-2 sm:w-72">
-                        <div class="flex">
-                            <label class="flex h-8 w-8 items-center justify-center" x-tooltip="'Select'">
-                                <input
-                                    class="form-checkbox is-outline h-4.5 w-4.5 rounded border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
-                                    type="checkbox" />
-                            </label>
-                            <button x-tooltip="'Starred'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                            </button>
-                            <button x-tooltip="'Actions'"
-                                class="btn hidden h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:inline-flex">
-                                <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="flex items-center space-x-2">
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                            <h3 class="line-clamp-1">Joe Perkins</h3>
-                        </div>
-                    </div>
-                    <div class="shrink-0 px-1 text-xs sm:hidden">Nov 10</div>
-                </div>
-                <div class="flex flex-1 items-center justify-between space-x-2">
-                    <div class="flex items-center space-x-2 px-2">
-                        <span class="line-clamp-1">
-                            Hese cases are perfectly simple and easy to distinguish.
-                        </span>
-                    </div>
-                    <div class="flex sm:hidden">
-                        <button x-tooltip="'Starred'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Actions'"
-                            class="btn h-8 w-8 rounded-full p-0 text-slate-400 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-300 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-5 w-5"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="hidden px-2 text-xs+ sm:flex">Nov 10</div>
-            </div>
-        </div>
-        <div class="mt-4 flex flex-col space-y-1 px-5 text-xs sm:flex-row sm:justify-between sm:space-y-0">
-            <a href="#" class="hover:text-slate-700 hover:underline dark:hover:text-navy-100">Term &amp;
-                Privacy</a>
-            <p>Last activity: 3 minute ago</p>
-        </div>
-    </main>
-
-    <div class="fixed right-3 bottom-3 rounded-full bg-white dark:bg-navy-700">
-        <button
-            class="btn h-14 w-14 rounded-full bg-warning p-0 font-medium text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90 sm:hidden">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                    d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-            </svg>
-        </button>
-    </div>
-</x-base-layout>

resources/views/pages/apps-nft-1.blade.php

-<x-app-layout title="NFT Marketplace v1" is-header-blur="true">
-    <!-- Main Content Wrapper -->
-    <main class="main-content w-full px-[var(--margin-x)] pb-8">
-        <div class="grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
-            <div class="col-span-12 lg:col-span-8 xl:col-span-9">
-                <div class="flex items-center justify-between py-5">
-                    <h3 class="text-xl font-medium text-slate-800 dark:text-navy-50">
-                        Trending NFT's
-                    </h3>
-                    <a href="#"
-                        class="border-b border-dotted border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
-                        All</a>
-                </div>
-                <div class="is-scrollbar-hidden overflow-x-auto">
-                    <div class="flex w-max space-x-3">
-                        <a href="#"
-                            class="tag h-7 rounded-full bg-primary text-xs+ text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
-                            🔥 All
-                        </a>
-
-                        <a href="#"
-                            class="tag h-7 rounded-full bg-slate-150 text-xs+ text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-700 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                            🎨 Art
-                        </a>
-                        <a href="#"
-                            class="tag h-7 rounded-full bg-slate-150 text-xs+ text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-700 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                            🎵 Music
-                        </a>
-                        <a href="#"
-                            class="tag h-7 rounded-full bg-slate-150 text-xs+ text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-700 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                            🎯 Game
-                        </a>
-                        <a href="#"
-                            class="tag h-7 rounded-full bg-slate-150 text-xs+ text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-700 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                            👗 Fashion
-                        </a>
-                        <a href="#"
-                            class="tag h-7 rounded-full bg-slate-150 text-xs+ text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-700 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                            📸 Photograpgy
-                        </a>
-                        <a href="#"
-                            class="tag h-7 rounded-full bg-slate-150 text-xs+ text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-700 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                            🤽‍♂️ Sport
-                        </a>
-                    </div>
-                </div>
-                <div class="mt-4 grid grid-cols-1 gap-4 sm:mt-5 sm:grid-cols-3 sm:gap-5 lg:mt-6 lg:gap-6">
-                    <div class="card p-2 pb-3">
-                        <div class="relative w-full">
-                            <img class="h-56 w-full rounded-xl object-cover object-center"
-                                src="{{ asset('images/800x600.png') }}" alt="image" />
-                            <div class="absolute inset-0 flex h-full w-full flex-col justify-between p-3">
-                                <div class="flex justify-end">
-                                    <button
-                                        class="btn h-7 w-7 rounded-full bg-black/20 p-0 hover:bg-black/30 focus:bg-black/30">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white"
-                                            fill="none" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
-                                        </svg>
-                                    </button>
-                                </div>
-                                <div>
-                                    <div
-                                        class="badge rounded-full bg-white text-slate-800 dark:bg-navy-600 dark:text-navy-50">
-                                        2 days left
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="mx-2 mt-3">
-                            <div class="flex justify-between text-xs">
-                                <a href="#" class="text-slate-400 hover:underline dark:text-navy-300">
-                                    Konnor Guzman
-                                </a>
-                                <p>
-                                    <i class="fa-regular fa-heart"></i>
-                                    <span>164</span>
-                                </p>
-                            </div>
-                            <a href="#"
-                                class="mt-1.5 text-base font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                                The Runner #265
-                            </a>
-                            <div class="mt-2 flex items-center justify-between">
-                                <p class="text-xs text-slate-400 dark:text-navy-300">
-                                    Current bid
-                                </p>
-                                <p>
-                                    <span class="font-semibold text-slate-700 dark:text-navy-100">
-                                        <i class="fa-brands fa-ethereum text-sm+"></i>
-                                        5.01
-                                    </span>
-                                    <span class="text-slate-400 dark:text-navy-300">ETH</span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="card p-2 pb-3">
-                        <div class="relative w-full">
-                            <img class="h-56 w-full rounded-xl object-cover object-center"
-                                src="{{ asset('images/800x600.png') }}" alt="image" />
-                            <div class="absolute inset-0 flex h-full w-full flex-col justify-between p-3">
-                                <div class="flex justify-end">
-                                    <button
-                                        class="btn h-7 w-7 rounded-full bg-black/20 p-0 hover:bg-black/30 focus:bg-black/30">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white"
-                                            fill="none" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
-                                        </svg>
-                                    </button>
-                                </div>
-                                <div>
-                                    <div
-                                        class="badge rounded-full bg-white text-slate-800 dark:bg-navy-600 dark:text-navy-50">
-                                        3 days left
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="mx-2 mt-3">
-                            <div class="flex justify-between text-xs">
-                                <a href="#" class="text-slate-400 hover:underline dark:text-navy-300">
-                                    Katrina West
-                                </a>
-                                <p>
-                                    <i class="fa-regular fa-heart"></i>
-                                    <span>614</span>
-                                </p>
-                            </div>
-                            <a href="#"
-                                class="mt-1.5 text-base font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                                Punkiber #015
-                            </a>
-                            <div class="mt-2 flex items-center justify-between">
-                                <p class="text-xs text-slate-400 dark:text-navy-300">
-                                    Current bid
-                                </p>
-                                <p>
-                                    <span class="font-semibold text-slate-700 dark:text-navy-100">
-                                        <i class="fa-brands fa-ethereum text-sm+"></i>
-                                        9.15
-                                    </span>
-                                    <span class="text-slate-400 dark:text-navy-300">ETH</span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="card p-2 pb-3">
-                        <div class="relative w-full">
-                            <img class="h-56 w-full rounded-xl object-cover object-center"
-                                src="{{ asset('images/800x600.png') }}" alt="image" />
-                            <div class="absolute inset-0 flex h-full w-full flex-col justify-between p-3">
-                                <div class="flex justify-end">
-                                    <button
-                                        class="btn h-7 w-7 rounded-full bg-black/20 p-0 hover:bg-black/30 focus:bg-black/30">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white"
-                                            fill="none" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
-                                        </svg>
-                                    </button>
-                                </div>
-                                <div>
-                                    <div
-                                        class="badge rounded-full bg-white text-slate-800 dark:bg-navy-600 dark:text-navy-50">
-                                        5 days left
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="mx-2 mt-3">
-                            <div class="flex justify-between text-xs">
-                                <a href="#" class="text-slate-400 hover:underline dark:text-navy-300">
-                                    Travis Fuller
-                                </a>
-                                <p>
-                                    <i class="fa-regular fa-heart"></i>
-                                    <span>233</span>
-                                </p>
-                            </div>
-                            <a href="#"
-                                class="mt-1.5 text-base font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                                Cube Store #015
-                            </a>
-                            <div class="mt-2 flex items-center justify-between">
-                                <p class="text-xs text-slate-400 dark:text-navy-300">
-                                    Current bid
-                                </p>
-                                <p>
-                                    <span class="font-semibold text-slate-700 dark:text-navy-100">
-                                        <i class="fa-brands fa-ethereum text-sm+"></i>
-                                        4.69
-                                    </span>
-                                    <span class="text-slate-400 dark:text-navy-300">ETH</span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="mt-4 sm:mt-5 lg:mt-6" x-data="{ activeTab: 'tabRecent' }">
-                    <div class="flex items-center justify-between space-x-2">
-                        <h2 class="text-base font-medium tracking-wide text-slate-700 dark:text-navy-100">
-                            Top NFT's
-                        </h2>
-
-                        <div
-                            class="is-scrollbar-hidden overflow-x-auto rounded-lg bg-slate-200 text-slate-600 dark:bg-navy-800 dark:text-navy-200">
-                            <div class="tabs-list flex p-1">
-                                <button @click="activeTab = 'tabRecent'"
-                                    :class="activeTab === 'tabRecent' ? 'bg-white shadow dark:bg-navy-500 dark:text-navy-100' :
-                                        'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
-                                    class="btn shrink-0 px-3 py-1 text-xs+ font-medium">
-                                    Last 7 days
-                                </button>
-                                <button @click="activeTab = 'tabAll'"
-                                    :class="activeTab === 'tabAll' ? 'bg-white shadow dark:bg-navy-500 dark:text-navy-100' :
-                                        'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
-                                    class="btn shrink-0 px-3 py-1 text-xs+ font-medium">
-                                    All Time
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="card mt-4">
-                        <div class="is-scrollbar-hidden min-w-full overflow-x-auto">
-                            <table class="is-hoverable w-full text-left">
-                                <thead>
-                                    <tr>
-                                        <th
-                                            class="whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
-                                            Collection
-                                        </th>
-                                        <th
-                                            class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
-                                            Volume
-                                        </th>
-                                        <th
-                                            class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
-                                            24h%
-                                        </th>
-                                        <th
-                                            class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
-                                            Owners
-                                        </th>
-
-                                        <th
-                                            class="whitespace-nowrap rounded-tr-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
-                                            Items
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
-                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                            <div class="flex items-center space-x-4">
-                                                <div class="avatar">
-                                                    <img class="rounded-full" src="{{ asset('images/800x600.png') }}"
-                                                        alt="avatar" />
-                                                </div>
-
-                                                <span class="font-medium text-slate-700 dark:text-navy-100">Abstrac
-                                                    Point</span>
-                                            </div>
-                                        </td>
-                                        <td
-                                            class="whitespace-nowrap px-4 py-3 font-medium text-slate-700 dark:text-navy-100 sm:px-5">
-                                            $3,225.00
-                                        </td>
-                                        <td class="whitespace-nowrap px-4 py-3 font-medium text-success sm:px-5">
-                                            +13.4%
-                                        </td>
-                                        <td
-                                            class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
-                                            6.7k
-                                        </td>
-                                        <td
-                                            class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
-                                            286
-                                        </td>
-                                    </tr>
-
-                                    <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
-                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                            <div class="flex items-center space-x-4">
-                                                <div class="avatar">
-                                                    <img class="rounded-full" src="{{ asset('images/800x600.png') }}"
-                                                        alt="avatar" />
-                                                </div>
-
-                                                <span class="font-medium text-slate-700 dark:text-navy-100">3D Cube
-                                                    Art</span>
-                                            </div>
-                                        </td>
-                                        <td
-                                            class="whitespace-nowrap px-4 py-3 font-medium text-slate-700 dark:text-navy-100 sm:px-5">
-                                            $6,923.00
-                                        </td>
-                                        <td class="whitespace-nowrap px-4 py-3 font-medium text-error sm:px-5">
-                                            -8.8%
-                                        </td>
-                                        <td
-                                            class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
-                                            2.75k
-                                        </td>
-                                        <td
-                                            class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
-                                            49
-                                        </td>
-                                    </tr>
-
-                                    <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
-                                        <td class="whitespace-nowrap px-4 py-3 sm:px-5">
-                                            <div class="flex items-center space-x-4">
-                                                <div class="avatar">
-                                                    <img class="rounded-full" src="{{ asset('images/800x600.png') }}"
-                                                        alt="avatar" />
-                                                </div>
-
-                                                <span class="font-medium text-slate-700 dark:text-navy-100">The Digital
-                                                    Art</span>
-                                            </div>
-                                        </td>
-                                        <td
-                                            class="whitespace-nowrap px-4 py-3 font-medium text-slate-700 dark:text-navy-100 sm:px-5">
-                                            $8,367.00
-                                        </td>
-                                        <td class="whitespace-nowrap px-4 py-3 font-medium text-success sm:px-5">
-                                            +32.4%
-                                        </td>
-                                        <td
-                                            class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
-                                            8.46k
-                                        </td>
-                                        <td
-                                            class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
-                                            1,856
-                                        </td>
-                                    </tr>
-
-                                    <tr class="border-y border-transparent">
-                                        <td class="whitespace-nowrap rounded-bl-lg px-4 py-3 sm:px-5">
-                                            <div class="flex items-center space-x-4">
-                                                <div class="avatar">
-                                                    <img class="rounded-full" src="{{ asset('images/800x600.png') }}"
-                                                        alt="avatar" />
-                                                </div>
-
-                                                <span class="font-medium text-slate-700 dark:text-navy-100">Geomatro
-                                                    Art</span>
-                                            </div>
-                                        </td>
-                                        <td
-                                            class="whitespace-nowrap px-4 py-3 font-medium text-slate-700 dark:text-navy-100 sm:px-5">
-                                            $35,496.00
-                                        </td>
-                                        <td class="whitespace-nowrap px-4 py-3 font-medium text-success sm:px-5">
-                                            +29.7%
-                                        </td>
-                                        <td
-                                            class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
-                                            16.4k
-                                        </td>
-                                        <td
-                                            class="whitespace-nowrap rounded-br-lg px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
-                                            5,644
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-span-12 space-y-4 sm:space-y-5 lg:col-span-4 lg:mt-6 lg:space-y-6 xl:col-span-3">
-                <div class="card bg-gradient-to-br from-purple-500 to-indigo-600 px-4 pb-4">
-                    <div class="mt-3 flex items-center justify-between text-white">
-                        <h2 class="text-sm+ font-medium tracking-wide">Your Balance</h2>
-                        <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-white/20 focus:bg-white/20 active:bg-white/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-
-                            <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                <div
-                                    class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                Action</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                else</a>
-                                        </li>
-                                    </ul>
-                                    <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                Link</a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="flex w-9/12 items-center space-x-1">
-                        <p class="text-xs text-indigo-100 line-clamp-1">
-                            0x9CDBC28F0A6C13BB42ACBD3A3B366BFCAB07B8B1
-                        </p>
-                        <button
-                            class="btn h-5 w-5 shrink-0 rounded-full p-0 text-white hover:bg-white/20 focus:bg-white/20 active:bg-white/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20"
-                                fill="currentColor">
-                                <path d="M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z" />
-                                <path d="M5 3a2 2 0 00-2 2v6a2 2 0 002 2V5h8a2 2 0 00-2-2H5z" />
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="mt-4 text-3xl font-semibold text-white">
-                        $5,566.00
-                    </div>
-                    <p class="mt-3 text-xs text-indigo-100">Offers</p>
-                    <div class="flex justify-between">
-                        <span class="font-medium text-white">USD 35,000</span>
-                        <span class="text-right text-xs text-indigo-100">(55%) <i
-                                class="fa-solid fa-up-long text-tiny"></i></span>
-                    </div>
-
-                    <button
-                        class="btn mt-6 w-full border border-white/10 bg-white/20 text-white hover:bg-white/30 focus:bg-white/30">
-                        Up Your Balance
-                    </button>
-                </div>
-
-                <div class="card px-4 pb-4">
-                    <div class="my-3 flex h-8 items-center justify-between">
-                        <h2 class="text-sm+ font-medium tracking-wide text-slate-700 dark:text-navy-100">
-                            Top Artists
-                        </h2>
-                        <a href="#"
-                            class="border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
-                            All</a>
-                    </div>
-
-                    <div class="space-y-4">
-                        <div class="flex items-center justify-between space-x-2">
-                            <div class="flex items-center space-x-2">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                                <div>
-                                    <a href="#"
-                                        class="font-medium text-slate-600 line-clamp-1 dark:text-navy-100">Travis
-                                        Fuller</a>
-                                    <p class="text-xs text-slate-400 dark:text-navy-300">
-                                        952 items
-                                    </p>
-                                </div>
-                            </div>
-                            <button
-                                class="btn h-7 rounded-full bg-primary/10 px-2.5 text-xs font-medium text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
-                                Follow
-                            </button>
-                        </div>
-                        <div class="flex items-center justify-between space-x-2">
-                            <div class="flex items-center space-x-2">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                                <div>
-                                    <a href="#"
-                                        class="font-medium text-slate-600 line-clamp-1 dark:text-navy-100">Katrina
-                                        West</a>
-                                    <p class="text-xs text-slate-400 dark:text-navy-300">
-                                        1,588 items
-                                    </p>
-                                </div>
-                            </div>
-                            <button
-                                class="btn h-7 rounded-full bg-primary/10 px-2.5 text-xs font-medium text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
-                                Follow
-                            </button>
-                        </div>
-                        <div class="flex items-center justify-between space-x-2">
-                            <div class="flex items-center space-x-2">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                                <div>
-                                    <a href="#"
-                                        class="font-medium text-slate-600 line-clamp-1 dark:text-navy-100">Henry Curtis
-                                    </a>
-                                    <p class="text-xs text-slate-400 dark:text-navy-300">
-                                        359 items
-                                    </p>
-                                </div>
-                            </div>
-                            <button
-                                class="btn h-7 rounded-full bg-primary/10 px-2.5 text-xs font-medium text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
-                                Follow
-                            </button>
-                        </div>
-                        <div class="flex items-center justify-between space-x-2">
-                            <div class="flex items-center space-x-2">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                                <div>
-                                    <a href="#"
-                                        class="font-medium text-slate-600 line-clamp-1 dark:text-navy-100">Lance Tucker
-                                    </a>
-                                    <p class="text-xs text-slate-400 dark:text-navy-300">
-                                        9,568 items
-                                    </p>
-                                </div>
-                            </div>
-                            <button
-                                class="btn h-7 rounded-full bg-primary/10 px-2.5 text-xs font-medium text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
-                                Follow
-                            </button>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="card pb-4">
-                    <div class="flex items-start justify-between p-4">
-                        <div class="flex items-center space-x-3">
-                            <div x-data="usePopper({
-                                offset: 12,
-                                placement: 'bottom',
-                                modifiers: [
-                                    { name: 'preventOverflow', options: { padding: 10 } }
-                                ]
-                            })" class="flex" @mouseleave="isShowPopper = false"
-                                @mouseenter="isShowPopper = true">
-                                <div x-ref="popperRef" class="avatar h-10 w-10">
-                                    <img class="mask is-squircle" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                    <div class="popper-box">
-                                        <div
-                                            class="flex w-48 flex-col items-center rounded-md border border-slate-150 bg-white p-3 text-center dark:border-navy-600 dark:bg-navy-700">
-                                            <div class="avatar h-16 w-16">
-                                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                                    alt="avatar" />
-                                            </div>
-                                            <p
-                                                class="mt-2 font-medium tracking-wide text-slate-700 dark:text-navy-100">
-                                                Konnor Guzman
-                                            </p>
-                                            <a href="#"
-                                                class="font-inter text-xs tracking-wide hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light">@konnoraccount
-                                            </a>
-                                            <button
-                                                class="btn mt-4 h-6 rounded-full bg-primary px-4 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
-                                                Follow
-                                            </button>
-                                        </div>
-                                        <div class="h-4 w-4" data-popper-arrow>
-                                            <svg viewBox="0 0 16 9" xmlns="http://www.w3.org/2000/svg"
-                                                class="absolute h-4 w-4" fill="currentColor">
-                                                <path class="text-slate-150 dark:text-navy-600"
-                                                    d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z" />
-                                                <path class="text-white dark:text-navy-700"
-                                                    d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z" />
-                                            </svg>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div>
-                                <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
-                                    Konnor Guzman
-                                </p>
-                                <p class="text-xs text-slate-400 dark:text-navy-300">
-                                    15.155 items
-                                </p>
-                            </div>
-                        </div>
-                        <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-
-                            <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                <div
-                                    class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                Action</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                else</a>
-                                        </li>
-                                    </ul>
-                                    <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                Link</a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="is-scrollbar-hidden flex space-x-4 overflow-y-auto px-4">
-                        <div class="w-28 shrink-0 text-xs">
-                            <img class="w-28 rounded-lg object-cover object-center"
-                                src="{{ asset('images/800x600.png') }}" alt="images" />
-                            <a href="#"
-                                class="mt-1.5 font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Cube
-                                Store #025</a>
-                            <p class="mt-1.5">
-                                <span class="font-semibold text-slate-700 dark:text-navy-100">
-                                    <i class="fa-brands fa-ethereum text-sm+"></i>
-                                    5.01
-                                </span>
-                                <span class="text-slate-400 dark:text-navy-300">ETH</span>
-                            </p>
-                        </div>
-
-                        <div class="w-28 shrink-0 text-xs">
-                            <img class="w-28 rounded-lg object-cover object-center"
-                                src="{{ asset('images/800x600.png') }}" alt="images" />
-                            <a href="#"
-                                class="mt-1.5 font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Punkiber
-                                #5764</a>
-                            <p class="mt-1.5">
-                                <span class="font-semibold text-slate-700 dark:text-navy-100">
-                                    <i class="fa-brands fa-ethereum text-sm+"></i>
-                                    7.63
-                                </span>
-                                <span class="text-slate-400 dark:text-navy-300">ETH</span>
-                            </p>
-                        </div>
-
-                        <div class="w-28 shrink-0 text-xs">
-                            <img class="w-28 rounded-lg object-cover object-center"
-                                src="{{ asset('images/800x600.png') }}" alt="images" />
-                            <a href="#"
-                                class="mt-1.5 font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">The
-                                Runner #0456</a>
-                            <p class="mt-1.5">
-                                <span class="font-semibold text-slate-700 dark:text-navy-100">
-                                    <i class="fa-brands fa-ethereum text-sm+"></i>
-                                    19.33
-                                </span>
-                                <span class="text-slate-400 dark:text-navy-300">ETH</span>
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-</x-app-layout>

resources/views/pages/apps-nft-2.blade.php

-<x-app-layout title="NFT Marketplace v2" is-header-blur="true">
-    <!-- Main Content Wrapper -->
-    <main class="main-content w-full px-[var(--margin-x)] pb-8">
-        <div class="mt-5 grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
-            <div class="col-span-12 space-y-4 sm:space-y-5 lg:col-span-8 lg:space-y-6 xl:col-span-9">
-                <div>
-                    <div class="flex items-center justify-between">
-                        <h3 class="text-xl font-medium text-slate-800 dark:text-navy-50">
-                            Featured Artists
-                        </h3>
-                        <a href="#"
-                            class="border-b border-dotted border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
-                            All</a>
-                    </div>
-                    <div class="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-4 sm:gap-5">
-                        <div class="card items-center pb-5 text-center">
-                            <img class="h-24 w-full rounded-t-lg object-cover object-center"
-                                src="{{ asset('images/800x600.png') }}" alt="image" />
-                            <div class="avatar -mt-12 h-20 w-20">
-                                <img class="rounded-full border-2 border-white dark:border-navy-700"
-                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                            </div>
-                            <div class="mt-1.5 px-2">
-                                <a href="#"
-                                    class="text-base font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                                    Travis Fuller
-                                </a>
-                                <p class="text-xs text-slate-400 dark:text-navy-300">
-                                    USA, Washington DC
-                                </p>
-                                <button
-                                    class="btn mt-4 h-8 min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
-                                    Follow
-                                </button>
-                            </div>
-                        </div>
-                        <div class="card items-center pb-5 text-center">
-                            <img class="h-24 w-full rounded-t-lg object-cover object-center"
-                                src="{{ asset('images/800x600.png') }}" alt="image" />
-                            <div class="avatar -mt-12 h-20 w-20">
-                                <img class="rounded-full border-2 border-white dark:border-navy-700"
-                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                            </div>
-                            <div class="mt-1.5 px-2">
-                                <a href="#"
-                                    class="text-base font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                                    Alfredo Elliott
-                                </a>
-                                <p class="text-xs text-slate-400 dark:text-navy-300">
-                                    Australia, Sydney
-                                </p>
-                                <button
-                                    class="btn mt-4 h-8 min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
-                                    Follow
-                                </button>
-                            </div>
-                        </div>
-                        <div class="card items-center pb-5 text-center">
-                            <img class="h-24 w-full rounded-t-lg object-cover object-center"
-                                src="{{ asset('images/800x600.png') }}" alt="image" />
-                            <div class="avatar -mt-12 h-20 w-20">
-                                <img class="rounded-full border-2 border-white dark:border-navy-700"
-                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                            </div>
-                            <div class="mt-1.5 px-2">
-                                <a href="#"
-                                    class="text-base font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                                    Raul Bradley
-                                </a>
-                                <p class="text-xs text-slate-400 dark:text-navy-300">
-                                    Germany, Berlin
-                                </p>
-                                <button
-                                    class="btn mt-4 h-8 min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
-                                    Follow
-                                </button>
-                            </div>
-                        </div>
-                        <div class="card items-center pb-5 text-center">
-                            <img class="h-24 w-full rounded-t-lg object-cover object-center"
-                                src="{{ asset('images/800x600.png') }}" alt="image" />
-                            <div class="avatar -mt-12 h-20 w-20">
-                                <img class="rounded-full border-2 border-white dark:border-navy-700"
-                                    src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                            </div>
-                            <div class="mt-1.5 px-2">
-                                <a href="#"
-                                    class="text-base font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                                    Henry Curtis
-                                </a>
-                                <p class="text-xs text-slate-400 dark:text-navy-300">
-                                    Switzerland, Zurich
-                                </p>
-                                <button
-                                    class="btn mt-4 h-8 min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
-                                    Follow
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div>
-                    <div class="flex items-center justify-between">
-                        <h3 class="text-xl font-medium text-slate-800 dark:text-navy-50">
-                            Feed
-                        </h3>
-
-                        <div class="hidden w-full max-w-xs justify-between space-x-4 text-slate-700 dark:text-navy-100 sm:flex"
-                            x-data="{ activeTab: 'tabAll' }">
-                            <button @click="activeTab = 'tabAll'" class="font-medium tracking-wide"
-                                :class="activeTab === 'tabAll' && 'text-primary dark:text-accent-light'">
-                                All
-                            </button>
-                            <button @click="activeTab = 'tabArt'" class="font-medium tracking-wide"
-                                :class="activeTab === 'tabArt' && 'text-primary dark:text-accent-light'">
-                                Art
-                            </button>
-                            <button @click="activeTab = 'tabSport'" class="font-medium tracking-wide"
-                                :class="activeTab === 'tabSport' && 'text-primary dark:text-accent-light'">
-                                Sport
-                            </button>
-                            <button @click="activeTab = 'tabMusic'" class="font-medium tracking-wide"
-                                :class="activeTab === 'tabMusic' && 'text-primary dark:text-accent-light'">
-                                Music
-                            </button>
-                            <button @click="activeTab = 'tabMore'" class="font-medium tracking-wide"
-                                :class="activeTab === 'tabMore' && 'text-primary dark:text-accent-light'">
-                                More
-                            </button>
-                        </div>
-
-                        <div class="flex space-x-1 sm:hidden">
-                            <button
-                                class="btn h-7 w-7 shrink-0 rounded-full p-0 text-slate-700 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-                                    <path
-                                        d="M3 2.5h-.5v4H6.501V6L6.5 3v-.5H3zM3 10h-.5v4H6.501v-.5l-.001-3V10H3zm0 7.5h-.5v4H6.501V21L6.5 18v-.5H3zM6 7H3c-.551 0-1-.45-1-1V3c0-.55.449-1 1-1h3c.551 0 1 .45 1 1v3c0 .55-.449 1-1 1zm15.75-2.75a.25.25 0 110 .5h-12a.25.25 0 110-.5h12zM6 14.5H3c-.551 0-1-.45-1-1v-3c0-.55.449-1 1-1h3c.551 0 1 .45 1 1v3c0 .55-.449 1-1 1zm15.75-2.75a.25.25 0 110 .5h-12a.25.25 0 110-.5h12zM6 22H3c-.551 0-1-.45-1-1v-3c0-.55.449-1 1-1h3c.551 0 1 .45 1 1v3c0 .55-.449 1-1 1zm15.75-2.75a.25.25 0 110 .5h-12a.25.25 0 110-.5h12z" />
-                                </svg>
-                            </button>
-
-                            <button
-                                class="btn h-7 w-7 shrink-0 rounded-full p-0 text-slate-700 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
-                                        d="M22 6.5h-9.5M6 6.5H2M9 9a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM22 17.5h-6M9.5 17.5H2M13 20a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" />
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-
-                    <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6">
-                        <div class="card group p-3">
-                            <div class="flex items-center justify-between space-x-2 px-1">
-                                <div class="flex items-center space-x-2">
-                                    <div class="avatar h-9 w-9">
-                                        <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                            alt="avatar" />
-                                    </div>
-                                    <div>
-                                        <a href="#"
-                                            class="font-medium text-slate-600 line-clamp-1 dark:text-navy-100">Travis
-                                            Fuller</a>
-                                        <p class="text-xs text-primary dark:text-accent-light">
-                                            952 items
-                                        </p>
-                                    </div>
-                                </div>
-                                <button x-data="{ isLiked: false }" @click="isLiked = !isLiked"
-                                    class="btn h-9 w-9 bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                                    <i x-show="!isLiked" class="fa-regular fa-heart text-lg"></i>
-                                    <i x-show="isLiked" class="fa-solid fa-heart text-lg text-error"></i>
-                                </button>
-                            </div>
-                            <div class="relative mt-4">
-                                <img class="h-56 w-full rounded-lg object-cover object-center"
-                                    src="{{ asset('images/800x600.png') }}" alt="image" />
-                                <div
-                                    class="absolute top-0 h-full w-full rounded-lg bg-black/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                </div>
-                                <div
-                                    class="absolute top-0 flex h-full w-full items-center justify-center opacity-0 group-hover:opacity-100">
-                                    <button
-                                        class="btn min-w-[7rem] border border-white/10 bg-white/20 text-white backdrop-blur hover:bg-white/30 focus:bg-white/30">
-                                        Place a Bid
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="mt-3 px-1">
-                                <a href="#"
-                                    class="text-base font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                                    The Runner #265
-                                </a>
-                                <div class="my-3 h-px bg-slate-200 dark:bg-navy-500"></div>
-                                <div class="flex justify-between">
-                                    <div>
-                                        <p class="text-xs text-slate-400 dark:text-navy-300">
-                                            Ending in
-                                        </p>
-                                        <p class="text-base font-medium text-slate-700 dark:text-navy-100">
-                                            9h 12m 33s
-                                        </p>
-                                    </div>
-                                    <div class="text-right">
-                                        <p class="text-xs text-slate-400 dark:text-navy-300">
-                                            Highest bid
-                                        </p>
-                                        <p class="text-base font-medium text-primary dark:text-accent-light">
-                                            4.56 ETH
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="card group p-3">
-                            <div class="flex items-center justify-between space-x-2 px-1">
-                                <div class="flex items-center space-x-2">
-                                    <div class="avatar h-9 w-9">
-                                        <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                            alt="avatar" />
-                                    </div>
-                                    <div>
-                                        <a href="#"
-                                            class="font-medium text-slate-600 line-clamp-1 dark:text-navy-100">Katrina
-                                            West</a>
-                                        <p class="text-xs text-primary dark:text-accent-light">
-                                            896 items
-                                        </p>
-                                    </div>
-                                </div>
-                                <button x-data="{ isLiked: false }" @click="isLiked = !isLiked"
-                                    class="btn h-9 w-9 bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                                    <i x-show="!isLiked" class="fa-regular fa-heart text-lg"></i>
-                                    <i x-show="isLiked" class="fa-solid fa-heart text-lg text-error"></i>
-                                </button>
-                            </div>
-                            <div class="relative mt-4">
-                                <img class="h-56 w-full rounded-lg object-cover object-center"
-                                    src="{{ asset('images/800x600.png') }}" alt="image" />
-                                <div
-                                    class="absolute top-0 h-full w-full rounded-lg bg-black/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                </div>
-                                <div
-                                    class="absolute top-0 flex h-full w-full items-center justify-center opacity-0 group-hover:opacity-100">
-                                    <button
-                                        class="btn min-w-[7rem] border border-white/10 bg-white/20 text-white backdrop-blur hover:bg-white/30 focus:bg-white/30">
-                                        Place a Bid
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="mt-3 px-1">
-                                <a href="#"
-                                    class="text-base font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                                    Punkiber #015
-                                </a>
-                                <div class="my-3 h-px bg-slate-200 dark:bg-navy-500"></div>
-                                <div class="flex justify-between">
-                                    <div>
-                                        <p class="text-xs text-slate-400 dark:text-navy-300">
-                                            Ending in
-                                        </p>
-                                        <p class="text-base font-medium text-slate-700 dark:text-navy-100">
-                                            2h 48m 18s
-                                        </p>
-                                    </div>
-                                    <div class="text-right">
-                                        <p class="text-xs text-slate-400 dark:text-navy-300">
-                                            Highest bid
-                                        </p>
-                                        <p class="text-base font-medium text-primary dark:text-accent-light">
-                                            11.06 ETH
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="card group p-3">
-                            <div class="flex items-center justify-between space-x-2 px-1">
-                                <div class="flex items-center space-x-2">
-                                    <div class="avatar h-9 w-9">
-                                        <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                            alt="avatar" />
-                                    </div>
-                                    <div>
-                                        <a href="#"
-                                            class="font-medium text-slate-600 line-clamp-1 dark:text-navy-100">Raul
-                                            Bradley</a>
-                                        <p class="text-xs text-primary dark:text-accent-light">
-                                            1,643 items
-                                        </p>
-                                    </div>
-                                </div>
-                                <button x-data="{ isLiked: true }" @click="isLiked = !isLiked"
-                                    class="btn h-9 w-9 bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                                    <i x-show="!isLiked" class="fa-regular fa-heart text-lg"></i>
-                                    <i x-show="isLiked" class="fa-solid fa-heart text-lg text-error"></i>
-                                </button>
-                            </div>
-                            <div class="relative mt-4">
-                                <img class="h-56 w-full rounded-lg object-cover object-center"
-                                    src="{{ asset('images/800x600.png') }}" alt="image" />
-                                <div
-                                    class="absolute top-0 h-full w-full rounded-lg bg-black/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                </div>
-                                <div
-                                    class="absolute top-0 flex h-full w-full items-center justify-center opacity-0 group-hover:opacity-100">
-                                    <button
-                                        class="btn min-w-[7rem] border border-white/10 bg-white/20 text-white backdrop-blur hover:bg-white/30 focus:bg-white/30">
-                                        Place a Bid
-                                    </button>
-                                </div>
-                            </div>
-
-                            <div class="mt-3 px-1">
-                                <a href="#"
-                                    class="text-base font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                                    Cube Store #015
-                                </a>
-                                <div class="my-3 h-px bg-slate-200 dark:bg-navy-500"></div>
-                                <div class="flex justify-between">
-                                    <div>
-                                        <p class="text-xs text-slate-400 dark:text-navy-300">
-                                            Ending in
-                                        </p>
-                                        <p class="text-base font-medium text-slate-700 dark:text-navy-100">
-                                            1d 6s 16m
-                                        </p>
-                                    </div>
-                                    <div class="text-right">
-                                        <p class="text-xs text-slate-400 dark:text-navy-300">
-                                            Highest bid
-                                        </p>
-                                        <p class="text-base font-medium text-primary dark:text-accent-light">
-                                            7.23 ETH
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="card group p-3">
-                            <div class="flex items-center justify-between space-x-2 px-1">
-                                <div class="flex items-center space-x-2">
-                                    <div class="avatar h-9 w-9">
-                                        <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                            alt="avatar" />
-                                    </div>
-                                    <div>
-                                        <a href="#"
-                                            class="font-medium text-slate-600 line-clamp-1 dark:text-navy-100">Henry
-                                            Curtis</a>
-                                        <p class="text-xs text-primary dark:text-accent-light">
-                                            163 items
-                                        </p>
-                                    </div>
-                                </div>
-                                <button x-data="{ isLiked: false }" @click="isLiked = !isLiked"
-                                    class="btn h-9 w-9 bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                                    <i x-show="!isLiked" class="fa-regular fa-heart text-lg"></i>
-                                    <i x-show="isLiked" class="fa-solid fa-heart text-lg text-error"></i>
-                                </button>
-                            </div>
-                            <div class="relative mt-4">
-                                <img class="h-56 w-full rounded-lg object-cover object-center"
-                                    src="{{ asset('images/800x600.png') }}" alt="image" />
-                                <div
-                                    class="absolute top-0 h-full w-full rounded-lg bg-black/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                </div>
-                                <div
-                                    class="absolute top-0 flex h-full w-full items-center justify-center opacity-0 group-hover:opacity-100">
-                                    <button
-                                        class="btn min-w-[7rem] border border-white/10 bg-white/20 text-white backdrop-blur hover:bg-white/30 focus:bg-white/30">
-                                        Place a Bid
-                                    </button>
-                                </div>
-                            </div>
-
-                            <div class="mt-3 px-1">
-                                <a href="#"
-                                    class="text-base font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                                    Abstraktio #699
-                                </a>
-                                <div class="my-3 h-px bg-slate-200 dark:bg-navy-500"></div>
-                                <div class="flex justify-between">
-                                    <div>
-                                        <p class="text-xs text-slate-400 dark:text-navy-300">
-                                            Ending in
-                                        </p>
-                                        <p class="text-base font-medium text-slate-700 dark:text-navy-100">
-                                            2d 4s 52m
-                                        </p>
-                                    </div>
-                                    <div class="text-right">
-                                        <p class="text-xs text-slate-400 dark:text-navy-300">
-                                            Highest bid
-                                        </p>
-                                        <p class="text-base font-medium text-primary dark:text-accent-light">
-                                            3.09 ETH
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="card group p-3">
-                            <div class="flex items-center justify-between space-x-2 px-1">
-                                <div class="flex items-center space-x-2">
-                                    <div class="avatar h-9 w-9">
-                                        <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                            alt="avatar" />
-                                    </div>
-                                    <div>
-                                        <a href="#"
-                                            class="font-medium text-slate-600 line-clamp-1 dark:text-navy-100">Lance
-                                            Tucker
-                                        </a>
-                                        <p class="text-xs text-primary dark:text-accent-light">
-                                            533 items
-                                        </p>
-                                    </div>
-                                </div>
-                                <button x-data="{ isLiked: true }" @click="isLiked = !isLiked"
-                                    class="btn h-9 w-9 bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                                    <i x-show="!isLiked" class="fa-regular fa-heart text-lg"></i>
-                                    <i x-show="isLiked" class="fa-solid fa-heart text-lg text-error"></i>
-                                </button>
-                            </div>
-                            <div class="relative mt-4">
-                                <img class="h-56 w-full rounded-lg object-cover object-center"
-                                    src="{{ asset('images/800x600.png') }}" alt="image" />
-                                <div
-                                    class="absolute top-0 h-full w-full rounded-lg bg-black/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                </div>
-                                <div
-                                    class="absolute top-0 flex h-full w-full items-center justify-center opacity-0 group-hover:opacity-100">
-                                    <button
-                                        class="btn min-w-[7rem] border border-white/10 bg-white/20 text-white backdrop-blur hover:bg-white/30 focus:bg-white/30">
-                                        Place a Bid
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="mt-3 px-1">
-                                <a href="#"
-                                    class="text-base font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                                    Galaxy #236
-                                </a>
-                                <div class="my-3 h-px bg-slate-200 dark:bg-navy-500"></div>
-                                <div class="flex justify-between">
-                                    <div>
-                                        <p class="text-xs text-slate-400 dark:text-navy-300">
-                                            Ending in
-                                        </p>
-                                        <p class="text-base font-medium text-slate-700 dark:text-navy-100">
-                                            4d 5s 3m
-                                        </p>
-                                    </div>
-                                    <div class="text-right">
-                                        <p class="text-xs text-slate-400 dark:text-navy-300">
-                                            Highest bid
-                                        </p>
-                                        <p class="text-base font-medium text-primary dark:text-accent-light">
-                                            1.49 ETH
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="card group p-3">
-                            <div class="flex items-center justify-between space-x-2 px-1">
-                                <div class="flex items-center space-x-2">
-                                    <div class="avatar h-9 w-9">
-                                        <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                            alt="avatar" />
-                                    </div>
-                                    <div>
-                                        <a href="#"
-                                            class="font-medium text-slate-600 line-clamp-1 dark:text-navy-100">Henry
-                                            Curtis
-                                        </a>
-                                        <p class="text-xs text-primary dark:text-accent-light">
-                                            669 items
-                                        </p>
-                                    </div>
-                                </div>
-                                <button x-data="{ isLiked: false }" @click="isLiked = !isLiked"
-                                    class="btn h-9 w-9 bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                                    <i x-show="!isLiked" class="fa-regular fa-heart text-lg"></i>
-                                    <i x-show="isLiked" class="fa-solid fa-heart text-lg text-error"></i>
-                                </button>
-                            </div>
-                            <div class="relative mt-4">
-                                <img class="h-56 w-full rounded-lg object-cover object-center"
-                                    src="{{ asset('images/800x600.png') }}" alt="image" />
-                                <div
-                                    class="absolute top-0 h-full w-full rounded-lg bg-black/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                                </div>
-                                <div
-                                    class="absolute top-0 flex h-full w-full items-center justify-center opacity-0 group-hover:opacity-100">
-                                    <button
-                                        class="btn min-w-[7rem] border border-white/10 bg-white/20 text-white backdrop-blur hover:bg-white/30 focus:bg-white/30">
-                                        Place a Bid
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="mt-3 px-1">
-                                <a href="#"
-                                    class="text-base font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                                    Avrang #965
-                                </a>
-                                <div class="my-3 h-px bg-slate-200 dark:bg-navy-500"></div>
-                                <div class="flex justify-between">
-                                    <div>
-                                        <p class="text-xs text-slate-400 dark:text-navy-300">
-                                            Ending in
-                                        </p>
-                                        <p class="text-base font-medium text-slate-700 dark:text-navy-100">
-                                            6d 2s 11m
-                                        </p>
-                                    </div>
-                                    <div class="text-right">
-                                        <p class="text-xs text-slate-400 dark:text-navy-300">
-                                            Highest bid
-                                        </p>
-                                        <p class="text-base font-medium text-primary dark:text-accent-light">
-                                            3.63 ETH
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-span-12 space-y-4 sm:space-y-5 lg:col-span-4 lg:space-y-6 xl:col-span-3">
-                <div class="card bg-gradient-to-br from-info to-info-focus p-4">
-                    <div class="flex justify-between text-white">
-                        <i class="fa-brands fa-bitcoin text-2xl"></i>
-                        <p>**** **** 4995</p>
-                    </div>
-                    <div class="mt-10">
-                        <p class="text-sky-100">Bitcoin</p>
-                        <div class="flex justify-between">
-                            <p class="text-2xl font-semibold text-white">2.656651</p>
-                            <img src="{{ asset('images/payments/cc-visa-white.svg') }}" class="w-10 rounded-lg"
-                                alt="creditcard" />
-                        </div>
-                    </div>
-                </div>
-
-                <div class="card p-3">
-                    <img class="h-56 w-full rounded-lg object-cover object-center"
-                        src="{{ asset('images/800x600.png') }}" alt="image" />
-                    <div class="mt-3 p-1">
-                        <div class="flex items-center justify-between space-x-1">
-                            <a href="#"
-                                class="text-base font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
-                                The Runner #033
-                            </a>
-                            <button x-data="{ isLiked: true }" @click="isLiked = !isLiked"
-                                class="btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                                <i x-show="!isLiked" class="fa-regular fa-heart"></i>
-                                <i x-show="isLiked" class="fa-solid fa-heart text-error"></i>
-                            </button>
-                        </div>
-                        <p class="mt-2 text-xs+">
-                            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-                            Perferendis optio laudantium
-                        </p>
-                        <div class="mt-5 flex items-center justify-between space-x-2">
-                            <div class="flex items-center space-x-2">
-                                <div class="avatar h-10 w-10">
-                                    <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                                <div>
-                                    <a href="#"
-                                        class="font-medium text-slate-600 line-clamp-1 dark:text-navy-100">Travis
-                                        Fuller</a>
-                                    <p class="text-xs text-slate-400 dark:text-navy-300">
-                                        952 items
-                                    </p>
-                                </div>
-                            </div>
-                            <button
-                                class="btn h-7 rounded-full bg-primary/10 px-2.5 text-xs font-medium text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
-                                Follow
-                            </button>
-                        </div>
-                        <p class="mt-6 font-medium">Action End in</p>
-                        <div
-                            class="mt-3 grid grid-cols-3 gap-3 text-center font-inter text-4xl font-semibold text-primary dark:text-accent-light">
-                            <div class="grid grid-cols-2 gap-1">
-                                <div class="rounded-lg bg-primary/10 py-3 dark:bg-accent-light/10">
-                                    1
-                                </div>
-                                <div class="rounded-lg bg-primary/10 py-3 dark:bg-accent-light/10">
-                                    4
-                                </div>
-                            </div>
-                            <div class="grid grid-cols-2 gap-1">
-                                <div class="rounded-lg bg-primary/10 py-3 dark:bg-accent-light/10">
-                                    3
-                                </div>
-                                <div class="rounded-lg bg-primary/10 py-3 dark:bg-accent-light/10">
-                                    5
-                                </div>
-                            </div>
-                            <div class="grid grid-cols-2 gap-1">
-                                <div class="rounded-lg bg-primary/10 py-3 dark:bg-accent-light/10">
-                                    4
-                                </div>
-                                <div class="rounded-lg bg-primary/10 py-3 dark:bg-accent-light/10">
-                                    5
-                                </div>
-                            </div>
-                        </div>
-                        <div class="mt-2 grid grid-cols-3 gap-3 text-center text-xs+">
-                            <p>hours</p>
-                            <p>minutes</p>
-                            <p>seconds</p>
-                        </div>
-                        <div class="my-5 h-px bg-slate-200 dark:bg-navy-500"></div>
-                        <div class="flex items-center justify-between">
-                            <p class="text-lg font-medium text-slate-700 dark:text-navy-100">
-                                156 ETH
-                            </p>
-                            <button
-                                class="btn h-9 min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
-                                Place a Bid
-                            </button>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="card px-4 pb-4">
-                    <div class="my-3 flex h-8 items-center justify-between">
-                        <h2 class="text-sm+ font-medium tracking-wide text-slate-700 dark:text-navy-100">
-                            History
-                        </h2>
-                        <a href="#"
-                            class="border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
-                            All</a>
-                    </div>
-
-                    <div class="space-y-4">
-                        <div class="flex items-center justify-between space-x-2">
-                            <div class="flex items-center space-x-2">
-                                <div class="avatar h-10 w-10">
-                                    <img class="mask is-hexagon" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                                <div>
-                                    <p class="font-medium text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        You Followed
-                                    </p>
-                                    <p></p>
-                                    <p class="text-xs text-slate-400 dark:text-navy-300">
-                                        Travis Fuller
-                                    </p>
-                                </div>
-                            </div>
-                            <p class="text-xs">Just Now</p>
-                        </div>
-                        <div class="flex items-center justify-between space-x-2">
-                            <div class="flex items-center space-x-2">
-                                <div class="avatar h-10 w-10">
-                                    <img class="mask is-hexagon" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                                <div>
-                                    <p class="font-medium text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        New NFT
-                                    </p>
-                                    <p></p>
-                                    <p class="text-xs text-slate-400 dark:text-navy-300">
-                                        by Alfredo Elliott
-                                    </p>
-                                </div>
-                            </div>
-                            <p class="text-xs">1 hr ago</p>
-                        </div>
-                        <div class="flex items-center justify-between space-x-2">
-                            <div class="flex items-center space-x-2">
-                                <div class="avatar h-10 w-10">
-                                    <img class="mask is-hexagon" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                                <div>
-                                    <p class="font-medium text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        You liked NFT
-                                    </p>
-                                    <p></p>
-                                    <p class="text-xs text-slate-400 dark:text-navy-300">
-                                        by Henry Curtis
-                                    </p>
-                                </div>
-                            </div>
-                            <p class="text-xs">3 hr ago</p>
-                        </div>
-                        <div class="flex items-center justify-between space-x-2">
-                            <div class="flex items-center space-x-2">
-                                <div class="avatar h-10 w-10">
-                                    <img class="mask is-hexagon" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                                <div>
-                                    <p class="font-medium text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        New NFT
-                                    </p>
-                                    <p></p>
-                                    <p class="text-xs text-slate-400 dark:text-navy-300">
-                                        by Kartina West
-                                    </p>
-                                </div>
-                            </div>
-                            <p class="text-xs">5 hr ago</p>
-                        </div>
-                        <div class="flex items-center justify-between space-x-2">
-                            <div class="flex items-center space-x-2">
-                                <div class="avatar h-10 w-10">
-                                    <img class="mask is-hexagon" src="{{ asset('images/200x200.png') }}"
-                                        alt="avatar" />
-                                </div>
-                                <div>
-                                    <p class="font-medium text-slate-600 line-clamp-1 dark:text-navy-100">
-                                        Followed
-                                    </p>
-                                    <p></p>
-                                    <p class="text-xs text-slate-400 dark:text-navy-300">
-                                        by Lance Tucker
-                                    </p>
-                                </div>
-                            </div>
-                            <p class="text-xs">a day ago</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-</x-app-layout>

resources/views/pages/apps-pos.blade.php

-<x-base-layout title="POS System" is-header-blur="true">
-    <!-- Sidebar -->
-    <div class="sidebar print:hidden">
-        <!-- Main Sidebar -->
-        <x-app-partials.main-sidebar></x-app-partials.main-sidebar>
-
-        <!-- Sidebar Panel -->
-        <div class="sidebar-panel">
-            <div class="flex h-full grow flex-col bg-white pl-[var(--main-sidebar-width)] dark:bg-navy-750">
-                <!-- Sidebar Panel Header -->
-                <div class="flex h-18 w-full items-center justify-between pl-4 pr-1">
-                    <div class="flex items-center">
-                        <div class="avatar mr-3 hidden h-9 w-9 lg:flex">
-                            <div
-                                class="is-initial rounded-full bg-secondary/10 text-secondary dark:bg-secondary-light/10 dark:text-secondary-light">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                                    stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
-                                </svg>
-                            </div>
-                        </div>
-                        <p class="text-lg font-medium tracking-wider text-slate-800 line-clamp-1 dark:text-navy-100">
-                            POS
-                        </p>
-                    </div>
-                    <button @click="$store.global.isSidebarExpanded = false"
-                        class="btn h-7 w-7 rounded-full p-0 text-primary hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-accent-light/80 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 xl:hidden">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-                        </svg>
-                    </button>
-                </div>
-
-                <!-- Sidebar Panel Body -->
-                <div class="flex h-[calc(100%-4.5rem)] grow flex-col">
-                    <div class="is-scrollbar-hidden grow overflow-y-auto">
-                        <div class="mt-2 px-4">
-                            <button
-                                class="btn w-full space-x-2 rounded-full border border-slate-200 py-2 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-500 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-error" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-                                </svg>
-                                <span> Lock Screen</span>
-                            </button>
-                        </div>
-
-                        <div x-data="{ expanded: true }">
-                            <div class="mt-4 flex items-center justify-between px-4">
-                                <span class="text-xs font-medium uppercase">channels </span>
-                                <div class="-mr-1.5 flex">
-                                    <button
-                                        class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                                        </svg>
-                                    </button>
-                                    <button @click="expanded =! expanded"
-                                        class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                            :class="expanded && 'rotate-180'" fill="none" viewBox="0 0 24 24"
-                                            stroke="currentColor" stroke-width="2">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M19 9l-7 7-7-7" />
-                                        </svg>
-                                    </button>
-                                </div>
-                            </div>
-                            <div x-show="expanded" x-collapse>
-                                <ul class="mt-1 space-y-1.5 px-2 font-inter text-xs+ font-medium">
-                                    <li>
-                                        <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                            href="#">
-                                            <svg xmlns="http://www.w3.org/2000/svg"
-                                                class="h-4.5 w-4.5 text-secondary dark:text-secondary-light"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor"
-                                                stroke-width="1.5">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-                                            </svg>
-                                            <span>Office</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                            href="#">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-warning"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor"
-                                                stroke-width="1.5">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-                                            </svg>
-                                            <span>Main Warehouse</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                            href="#">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-info"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor"
-                                                stroke-width="1.5">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-                                            </svg>
-                                            <span>Warehouse East</span>
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                            href="#">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-success"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor"
-                                                stroke-width="1.5">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-                                            </svg>
-                                            <span>Warehouse #12</span>
-                                        </a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-
-                        <div class="my-3 mx-4 h-px bg-slate-200 dark:bg-navy-500"></div>
-
-                        <ul class="space-y-1.5 px-2 font-inter text-xs+ font-medium">
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2zM10 8.5a.5.5 0 11-1 0 .5.5 0 011 0zm5 5a.5.5 0 11-1 0 .5.5 0 011 0z" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">Top Deals</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">Setting</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">History</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">Reports</span>
-                                </a>
-                            </li>
-                        </ul>
-
-                        <div class="p-4">
-                            <p>Sales Today</p>
-                            <p class="mt-1 text-base font-medium text-slate-700 dark:text-navy-100">
-                                134.55$
-                            </p>
-                        </div>
-                    </div>
-
-                    <div class="flex items-center space-x-3 p-4">
-                        <div
-                            class="flex h-11 w-7 shrink-0 items-center justify-center rounded-full bg-primary dark:bg-accent">
-                            <i class="fa-brands fa-bluetooth-b text-2xl text-white"></i>
-                        </div>
-                        <div>
-                            <div class="flex items-center space-x-2">
-                                <p class="font-medium text-slate-700 dark:text-navy-100">
-                                    Card reader
-                                </p>
-                                <div
-                                    class="flex h-4.5 w-4.5 shrink-0 items-center justify-center rounded-full bg-success text-white">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
-                                            d="M5 13l4 4L19 7" />
-                                    </svg>
-                                </div>
-                            </div>
-                            <p class="text-xs text-slate-400 dark:text-navy-300">
-                                Device are connected
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- App Header -->
-    <x-app-partials.header></x-app-partials.header>
-
-    <!-- Mobile Searchbar -->
-    <x-app-partials.mobile-searchbar></x-app-partials.mobile-searchbar>
-
-    <!-- Right Sidebar -->
-    <x-app-partials.right-sidebar></x-app-partials.right-sidebar>
-
-    <!-- Main Content Wrapper -->
-    <main class="main-content pos-app w-full px-[var(--margin-x)] pb-6 transition-all duration-[.25s]">
-        <div class="mt-3 grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
-            <div class="col-span-12 sm:col-span-6 lg:col-span-8">
-                <div class="swiper" x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { slidesPerView: 'auto', spaceBetween: 14, navigation: { nextEl: '.next-btn', prevEl: '.prev-btn' } }))">
-                    <div class="flex items-center justify-between">
-                        <p class="text-base font-medium text-slate-700 dark:text-navy-100">
-                            Categories
-                        </p>
-                        <div class="flex">
-                            <button
-                                class="btn prev-btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 disabled:pointer-events-none disabled:select-none disabled:opacity-60 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M15 19l-7-7 7-7" />
-                                </svg>
-                            </button>
-                            <button
-                                class="btn next-btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 disabled:pointer-events-none disabled:select-none disabled:opacity-60 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M9 5l7 7-7 7" />
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                    <div class="swiper-wrapper mt-5" x-data="{ selected: 'slide-1' }">
-                        <div class="card swiper-slide w-24 shrink-0 cursor-pointer" @click="selected = 'slide-1'">
-                            <div class="flex flex-col items-center rounded-lg px-2 py-4"
-                                :class="selected === 'slide-1' ?
-                                    'text-secondary bg-secondary/10  dark:bg-secondary-light/10 dark:text-secondary-light' :
-                                    'text-slate-600 dark:text-navy-100'">
-                                <img class="w-12" src="{{ asset('images/200x200.png') }}" alt="image" />
-                                <h3 class="pt-2 font-medium tracking-wide line-clamp-1">
-                                    Burger
-                                </h3>
-                            </div>
-                        </div>
-                        <div class="card swiper-slide w-24 shrink-0 cursor-pointer" @click="selected = 'slide-2'">
-                            <div class="flex flex-col items-center rounded-lg px-2 py-4"
-                                :class="selected === 'slide-2' ?
-                                    'text-secondary bg-secondary/10  dark:bg-secondary-light/10 dark:text-secondary-light' :
-                                    'text-slate-600 dark:text-navy-100'">
-                                <img class="w-12" src="{{ asset('images/200x200.png') }}" alt="image" />
-                                <h3 class="pt-2 font-medium tracking-wide line-clamp-1">
-                                    Hot Dog
-                                </h3>
-                            </div>
-                        </div>
-                        <div class="card swiper-slide w-24 shrink-0 cursor-pointer" @click="selected = 'slide-3'">
-                            <div class="flex flex-col items-center rounded-lg px-2 py-4"
-                                :class="selected === 'slide-3' ?
-                                    'text-secondary bg-secondary/10  dark:bg-secondary-light/10 dark:text-secondary-light' :
-                                    'text-slate-600 dark:text-navy-100'">
-                                <img class="w-12" src="{{ asset('images/200x200.png') }}" alt="image" />
-                                <h3 class="pt-2 font-medium tracking-wide line-clamp-1">
-                                    Pizza
-                                </h3>
-                            </div>
-                        </div>
-                        <div class="card swiper-slide w-24 shrink-0 cursor-pointer" @click="selected = 'slide-4'">
-                            <div class="flex flex-col items-center rounded-lg px-2 py-4"
-                                :class="selected === 'slide-4' ?
-                                    'text-secondary bg-secondary/10  dark:bg-secondary-light/10 dark:text-secondary-light' :
-                                    'text-slate-600 dark:text-navy-100'">
-                                <img class="w-12" src="{{ asset('images/200x200.png') }}" alt="image" />
-                                <h3 class="pt-2 font-medium tracking-wide line-clamp-1">
-                                    Sandwich
-                                </h3>
-                            </div>
-                        </div>
-                        <div class="card swiper-slide w-24 shrink-0 cursor-pointer" @click="selected = 'slide-5'">
-                            <div class="flex flex-col items-center rounded-lg px-2 py-4"
-                                :class="selected === 'slide-5' ?
-                                    'text-secondary bg-secondary/10  dark:bg-secondary-light/10 dark:text-secondary-light' :
-                                    'text-slate-600 dark:text-navy-100'">
-                                <img class="w-12" src="{{ asset('images/200x200.png') }}" alt="image" />
-                                <h3 class="pt-2 font-medium tracking-wide line-clamp-1">
-                                    Popcorn
-                                </h3>
-                            </div>
-                        </div>
-                        <div class="card swiper-slide w-24 shrink-0 cursor-pointer" @click="selected = 'slide-6'">
-                            <div class="flex flex-col items-center rounded-lg px-2 py-4"
-                                :class="selected === 'slide-6' ?
-                                    'text-secondary bg-secondary/10  dark:bg-secondary-light/10 dark:text-secondary-light' :
-                                    'text-slate-600 dark:text-navy-100'">
-                                <img class="w-12" src="{{ asset('images/200x200.png') }}" alt="image" />
-                                <h3 class="pt-2 font-medium tracking-wide line-clamp-1">
-                                    Taco
-                                </h3>
-                            </div>
-                        </div>
-                        <div class="card swiper-slide w-24 shrink-0 cursor-pointer" @click="selected = 'slide-7'">
-                            <div class="flex flex-col items-center rounded-lg px-2 py-4"
-                                :class="selected === 'slide-7' ?
-                                    'text-secondary bg-secondary/10  dark:bg-secondary-light/10 dark:text-secondary-light' :
-                                    'text-slate-600 dark:text-navy-100'">
-                                <img class="w-12" src="{{ asset('images/200x200.png') }}" alt="image" />
-                                <h3 class="pt-2 font-medium tracking-wide line-clamp-1">
-                                    Burrito
-                                </h3>
-                            </div>
-                        </div>
-                        <div class="card swiper-slide w-24 shrink-0 cursor-pointer" @click="selected = 'slide-8'">
-                            <div class="flex flex-col items-center rounded-lg px-2 py-4"
-                                :class="selected === 'slide-8' ?
-                                    'text-secondary bg-secondary/10  dark:bg-secondary-light/10 dark:text-secondary-light' :
-                                    'text-slate-600 dark:text-navy-100'">
-                                <img class="w-12" src="{{ asset('images/200x200.png') }}" alt="image" />
-                                <h3 class="pt-2 font-medium tracking-wide line-clamp-1">
-                                    Pizza
-                                </h3>
-                            </div>
-                        </div>
-                        <div class="card swiper-slide w-24 shrink-0 cursor-pointer" @click="selected = 'slide-9'">
-                            <div class="flex flex-col items-center rounded-lg px-2 py-4"
-                                :class="selected === 'slide-9' ?
-                                    'text-secondary bg-secondary/10  dark:bg-secondary-light/10 dark:text-secondary-light' :
-                                    'text-slate-600 dark:text-navy-100'">
-                                <img class="w-12" src="{{ asset('images/200x200.png') }}" alt="image" />
-                                <h3 class="pt-2 font-medium tracking-wide line-clamp-1">
-                                    Burrito
-                                </h3>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    class="mt-4 grid grid-cols-2 gap-4 sm:mt-5 sm:grid-cols-2 sm:gap-5 lg:mt-6 lg:grid-cols-3 xl:grid-cols-4">
-                    <div class="card p-2">
-                        <img class="rounded-lg" src="{{ asset('images/800x600.png') }}" alt="image" />
-                        <div class="pt-2">
-                            <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                Duck Salad
-                            </p>
-                            <p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
-                                Description
-                            </p>
-                            <p class="text-right font-medium text-primary dark:text-accent-light">
-                                35.00 $
-                            </p>
-                        </div>
-                    </div>
-                    <div class="card p-2">
-                        <img class="rounded-lg" src="{{ asset('images/800x600.png') }}" alt="image" />
-                        <div class="pt-2">
-                            <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                Breakfast board
-                            </p>
-                            <p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
-                                Description
-                            </p>
-                            <p class="text-right font-medium text-primary dark:text-accent-light">
-                                14.00 $
-                            </p>
-                        </div>
-                    </div>
-                    <div class="card p-2">
-                        <img class="rounded-lg" src="{{ asset('images/800x600.png') }}" alt="image" />
-                        <div class="pt-2">
-                            <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                Hummus
-                            </p>
-                            <p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
-                                Description
-                            </p>
-                            <p class="text-right font-medium text-primary dark:text-accent-light">
-                                24.00 $
-                            </p>
-                        </div>
-                    </div>
-                    <div class="card p-2">
-                        <img class="rounded-lg" src="{{ asset('images/800x600.png') }}" alt="image" />
-                        <div class="pt-2">
-                            <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                Roast beef
-                            </p>
-                            <p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
-                                Description
-                            </p>
-                            <p class="text-right font-medium text-primary dark:text-accent-light">
-                                17.50 $
-                            </p>
-                        </div>
-                    </div>
-                    <div class="card p-2">
-                        <img class="rounded-lg" src="{{ asset('images/800x600.png') }}" alt="image" />
-                        <div class="pt-2">
-                            <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                Tuna salad
-                            </p>
-                            <p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
-                                Description
-                            </p>
-                            <p class="text-right font-medium text-primary dark:text-accent-light">
-                                35.00 $
-                            </p>
-                        </div>
-                    </div>
-                    <div class="card p-2">
-                        <img class="rounded-lg" src="{{ asset('images/800x600.png') }}" alt="image" />
-                        <div class="pt-2">
-                            <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                Salmon
-                            </p>
-                            <p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
-                                Description
-                            </p>
-                            <p class="text-right font-medium text-primary dark:text-accent-light">
-                                48.00 $
-                            </p>
-                        </div>
-                    </div>
-                    <div class="card p-2">
-                        <img class="rounded-lg" src="{{ asset('images/800x600.png') }}" alt="image" />
-                        <div class="pt-2">
-                            <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                California roll
-                            </p>
-                            <p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
-                                Description
-                            </p>
-                            <p class="text-right font-medium text-primary dark:text-accent-light">
-                                74.00 $
-                            </p>
-                        </div>
-                    </div>
-                    <div class="card p-2">
-                        <img class="rounded-lg" src="{{ asset('images/800x600.png') }}" alt="image" />
-                        <div class="pt-2">
-                            <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                Sashimi
-                            </p>
-                            <p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
-                                Description
-                            </p>
-                            <p class="text-right font-medium text-primary dark:text-accent-light">
-                                75.00 $
-                            </p>
-                        </div>
-                    </div>
-                    <div class="card p-2">
-                        <img class="rounded-lg" src="{{ asset('images/800x600.png') }}" alt="image" />
-                        <div class="pt-2">
-                            <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                Pub salad
-                            </p>
-                            <p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
-                                Description
-                            </p>
-                            <p class="text-right font-medium text-primary dark:text-accent-light">
-                                64.00 $
-                            </p>
-                        </div>
-                    </div>
-                    <div class="card p-2">
-                        <img class="rounded-lg" src="{{ asset('images/800x600.png') }}" alt="image" />
-                        <div class="pt-2">
-                            <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                Duck carpaccio
-                            </p>
-                            <p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
-                                Description
-                            </p>
-                            <p class="text-right font-medium text-primary dark:text-accent-light">
-                                72.00 $
-                            </p>
-                        </div>
-                    </div>
-                    <div class="card p-2">
-                        <img class="rounded-lg" src="{{ asset('images/800x600.png') }}" alt="image" />
-                        <div class="pt-2">
-                            <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                Maui food
-                            </p>
-                            <p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
-                                Description
-                            </p>
-                            <p class="text-right font-medium text-primary dark:text-accent-light">
-                                42.00 $
-                            </p>
-                        </div>
-                    </div>
-                    <div class="card p-2">
-                        <img class="rounded-lg" src="{{ asset('images/800x600.png') }}" alt="image" />
-                        <div class="pt-2">
-                            <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                Scottish salmon
-                            </p>
-                            <p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
-                                Description
-                            </p>
-                            <p class="text-right font-medium text-primary dark:text-accent-light">
-                                86.00 $
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="hidden sm:col-span-6 sm:block lg:col-span-4">
-                <div class="flex items-center justify-between">
-                    <div class="flex items-center space-x-1">
-                        <p>
-                            <span class="text-base font-medium text-slate-700 dark:text-navy-100">Draft</span>
-                            <span>#001</span>
-                        </p>
-
-                        <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-                                </svg>
-                            </button>
-
-                            <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                <div
-                                    class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Draft
-                                                #001</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Draft
-                                                #002</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Draft
-                                                #005</a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="flex space-x-1">
-                        <button
-                            class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                    d="M12 4v16m8-8H4" />
-                            </svg>
-                        </button>
-                        <button
-                            class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 hover:text-error focus:bg-slate-300/20 focus:text-error active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                            </svg>
-                        </button>
-                        <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                                </svg>
-                            </button>
-
-                            <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                <div
-                                    class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                Action</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                else</a>
-                                        </li>
-                                    </ul>
-                                    <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                Link</a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="card mt-5 p-4 sm:p-5">
-                    <div class="flex flex-col space-y-3.5">
-                        <div class="group flex items-center justify-between space-x-3">
-                            <div class="flex items-center space-x-4">
-                                <div class="relative flex">
-                                    <img src="{{ asset('images/800x600.png') }}"
-                                        class="mask is-star h-11 w-11 origin-center object-cover" alt="image" />
-
-                                    <div
-                                        class="absolute top-0 right-0 -m-1 flex h-5 min-w-[1.25rem] items-center justify-center rounded-full border border-white bg-slate-200 px-1 text-tiny+ font-medium leading-none text-slate-800 dark:border-navy-700 dark:bg-navy-450 dark:text-white">
-                                        2
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="flex items-center space-x-1">
-                                        <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                            Roast beef
-                                        </p>
-                                        <button
-                                            class="btn h-6 w-6 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                    <p class="text-xs+ text-slate-400 dark:text-navy-300">
-                                        Lorem ipsum dolor sit.
-                                    </p>
-                                </div>
-                            </div>
-                            <p class="font-inter font-semibold">$12.00</p>
-                        </div>
-                        <div class="group flex items-center justify-between space-x-3">
-                            <div class="flex items-center space-x-4">
-                                <div class="relative flex">
-                                    <img src="{{ asset('images/800x600.png') }}"
-                                        class="mask is-star h-11 w-11 origin-center object-cover" alt="image" />
-
-                                    <div
-                                        class="absolute top-0 right-0 -m-1 flex h-5 min-w-[1.25rem] items-center justify-center rounded-full border border-white bg-slate-200 px-1 text-tiny+ font-medium leading-none text-slate-800 dark:border-navy-700 dark:bg-navy-450 dark:text-white">
-                                        1
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="flex items-center space-x-1">
-                                        <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                            Tuna salad
-                                        </p>
-                                        <button
-                                            class="btn h-6 w-6 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                    <p class="text-xs+ text-slate-400 dark:text-navy-300">
-                                        Amet consectetur adip.
-                                    </p>
-                                </div>
-                            </div>
-                            <p class="font-inter font-semibold">$14.00</p>
-                        </div>
-                        <div class="group flex items-center justify-between space-x-3">
-                            <div class="flex items-center space-x-4">
-                                <div class="relative flex">
-                                    <img src="{{ asset('images/800x600.png') }}"
-                                        class="mask is-star h-11 w-11 origin-center object-cover" alt="image" />
-
-                                    <div
-                                        class="absolute top-0 right-0 -m-1 flex h-5 min-w-[1.25rem] items-center justify-center rounded-full border border-white bg-slate-200 px-1 text-tiny+ font-medium leading-none text-slate-800 dark:border-navy-700 dark:bg-navy-450 dark:text-white">
-                                        3
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="flex items-center space-x-1">
-                                        <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                            Salmon
-                                        </p>
-                                        <button
-                                            class="btn h-6 w-6 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                    <p class="text-xs+ text-slate-400 dark:text-navy-300">
-                                        Adipisicing elit. Quos?
-                                    </p>
-                                </div>
-                            </div>
-                            <p class="font-inter font-semibold">$45.00</p>
-                        </div>
-                        <div class="group flex items-center justify-between space-x-3">
-                            <div class="flex items-center space-x-4">
-                                <div class="relative flex">
-                                    <img src="{{ asset('images/800x600.png') }}"
-                                        class="mask is-star h-11 w-11 origin-center object-cover" alt="image" />
-
-                                    <div
-                                        class="absolute top-0 right-0 -m-1 flex h-5 min-w-[1.25rem] items-center justify-center rounded-full border border-white bg-slate-200 px-1 text-tiny+ font-medium leading-none text-slate-800 dark:border-navy-700 dark:bg-navy-450 dark:text-white">
-                                        1
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="flex items-center space-x-1">
-                                        <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                            California roll
-                                        </p>
-                                        <button
-                                            class="btn h-6 w-6 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                    <p class="text-xs+ text-slate-400 dark:text-navy-300">
-                                        Lorem, ipsum dolor.
-                                    </p>
-                                </div>
-                            </div>
-                            <p class="font-inter font-semibold">$22.00</p>
-                        </div>
-                        <div class="group flex items-center justify-between space-x-3">
-                            <div class="flex items-center space-x-4">
-                                <div class="relative flex">
-                                    <img src="{{ asset('images/800x600.png') }}"
-                                        class="mask is-star h-11 w-11 origin-center object-cover" alt="image" />
-
-                                    <div
-                                        class="absolute top-0 right-0 -m-1 flex h-5 min-w-[1.25rem] items-center justify-center rounded-full border border-white bg-slate-200 px-1 text-tiny+ font-medium leading-none text-slate-800 dark:border-navy-700 dark:bg-navy-450 dark:text-white">
-                                        2
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="flex items-center space-x-1">
-                                        <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                            Duck carpaccio
-                                        </p>
-                                        <button
-                                            class="btn h-6 w-6 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                    <p class="text-xs+ text-slate-400 dark:text-navy-300">
-                                        Amet consectetur adip.
-                                    </p>
-                                </div>
-                            </div>
-                            <p class="font-inter font-semibold">$18.00</p>
-                        </div>
-                    </div>
-                    <div class="my-4 h-px bg-slate-200 dark:bg-navy-500"></div>
-                    <div class="space-y-2 font-inter">
-                        <div class="flex justify-between text-slate-600 dark:text-navy-100">
-                            <p>Subtotal</p>
-                            <p class="font-medium tracking-wide">55.00$</p>
-                        </div>
-                        <div class="flex justify-between text-xs+">
-                            <p>Tax</p>
-                            <p class="font-medium tracking-wide">5.00$</p>
-                        </div>
-                        <div class="flex justify-between text-base font-medium text-primary dark:text-accent-light">
-                            <p>Total</p>
-                            <p>60.00$</p>
-                        </div>
-                    </div>
-                    <div class="mt-5 grid grid-cols-3 gap-4 text-center">
-                        <button class="rounded-lg border border-slate-200 p-3 dark:border-navy-500">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="inline h-9 w-9" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
-                            </svg>
-                            <span class="mt-1 font-medium text-primary dark:text-accent-light">
-                                Cash
-                            </span>
-                        </button>
-                        <button class="rounded-lg border border-slate-200 p-3 dark:border-navy-500">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="inline h-9 w-9" fill="none"
-                                viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
-                            </svg>
-                            <span class="mt-1 font-medium text-primary dark:text-accent-light">
-                                Debit
-                            </span>
-                        </button>
-                        <button class="rounded-lg border border-slate-200 p-3 dark:border-navy-500">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="inline h-9 w-9" fill="none"
-                                viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
-                            </svg>
-                            <span class="mt-1 font-medium text-primary dark:text-accent-light">
-                                Scan
-                            </span>
-                        </button>
-                    </div>
-                    <button
-                        class="btn mt-5 h-11 justify-between bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
-                        <span>Checkout</span>
-                        <span>$88.00</span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </main>
-
-    <div x-data="{ showDrawer: false }" x-show="showDrawer" x-effect="$store.breakpoints.smAndUp && (showDrawer = false)"
-        x-on:show-drawer.window="($event.detail.drawerId === 'pos-card-drawer') && (showDrawer = true)"
-        @keydown.window.escape="showDrawer = false">
-        <div class="fixed inset-0 z-[100] bg-slate-900/60 transition-opacity duration-200" @click="showDrawer = false"
-            x-show="showDrawer" x-transition:enter="ease-out" x-transition:enter-start="opacity-0"
-            x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
-            x-transition:leave-end="opacity-0"></div>
-        <div class="fixed right-0 bottom-0 z-[101] h-[calc(100%-2.5rem)] w-full">
-            <div class="flex h-full w-full flex-col rounded-t-2xl bg-white px-4 py-3 transition-transform duration-200 dark:bg-navy-700"
-                x-show="showDrawer" x-transition:enter="ease-out transform-gpu"
-                x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0"
-                x-transition:leave="ease-in transform-gpu" x-transition:leave-start="translate-y-0"
-                x-transition:leave-end="translate-y-full">
-                <div class="flex items-center justify-between">
-                    <div class="-ml-1 flex items-center space-x-1.5">
-                        <button @click="showDrawer=false"
-                            class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                        <div class="flex items-center space-x-1">
-                            <p>
-                                <span class="text-base font-medium text-slate-700 dark:text-navy-100">Draft</span>
-                                <span>#001</span>
-                            </p>
-
-                            <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                                class="inline-flex">
-                                <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                    class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-                                    </svg>
-                                </button>
-
-                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                    <div
-                                        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Draft
-                                                    #001</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Draft
-                                                    #002</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Draft
-                                                    #005</a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="-mr-1.5 flex space-x-1">
-                        <button
-                            class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                    d="M12 4v16m8-8H4" />
-                            </svg>
-                        </button>
-                        <button
-                            class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 hover:text-error focus:bg-slate-300/20 focus:text-error active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                            </svg>
-                        </button>
-                        <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                                </svg>
-                            </button>
-
-                            <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                <div
-                                    class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                Action</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                else</a>
-                                        </li>
-                                    </ul>
-                                    <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                Link</a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="flex grow flex-col overflow-y-auto">
-                    <div class="mt-4 flex grow flex-col space-y-3.5">
-                        <div class="group flex items-center justify-between space-x-3">
-                            <div class="flex items-center space-x-4">
-                                <div class="relative flex">
-                                    <img src="{{ asset('images/800x600.png') }}"
-                                        class="mask is-star h-11 w-11 origin-center object-cover" alt="image" />
-
-                                    <div
-                                        class="absolute top-0 right-0 -m-1 flex h-5 min-w-[1.25rem] items-center justify-center rounded-full border border-white bg-slate-200 px-1 text-tiny+ font-medium leading-none text-slate-800 dark:border-navy-700 dark:bg-navy-450 dark:text-white">
-                                        2
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="flex items-center space-x-1">
-                                        <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                            Roast beef
-                                        </p>
-                                        <button
-                                            class="btn h-6 w-6 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                    <p class="text-xs+ text-slate-400 dark:text-navy-300">
-                                        Lorem ipsum dolor sit.
-                                    </p>
-                                </div>
-                            </div>
-                            <p class="font-inter font-semibold">$12.00</p>
-                        </div>
-                        <div class="group flex items-center justify-between space-x-3">
-                            <div class="flex items-center space-x-4">
-                                <div class="relative flex">
-                                    <img src="{{ asset('images/800x600.png') }}"
-                                        class="mask is-star h-11 w-11 origin-center object-cover" alt="image" />
-
-                                    <div
-                                        class="absolute top-0 right-0 -m-1 flex h-5 min-w-[1.25rem] items-center justify-center rounded-full border border-white bg-slate-200 px-1 text-tiny+ font-medium leading-none text-slate-800 dark:border-navy-700 dark:bg-navy-450 dark:text-white">
-                                        1
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="flex items-center space-x-1">
-                                        <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                            Tuna salad
-                                        </p>
-                                        <button
-                                            class="btn h-6 w-6 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                    <p class="text-xs+ text-slate-400 dark:text-navy-300">
-                                        Amet consectetur adip.
-                                    </p>
-                                </div>
-                            </div>
-                            <p class="font-inter font-semibold">$14.00</p>
-                        </div>
-                        <div class="group flex items-center justify-between space-x-3">
-                            <div class="flex items-center space-x-4">
-                                <div class="relative flex">
-                                    <img src="{{ asset('images/800x600.png') }}"
-                                        class="mask is-star h-11 w-11 origin-center object-cover" alt="image" />
-
-                                    <div
-                                        class="absolute top-0 right-0 -m-1 flex h-5 min-w-[1.25rem] items-center justify-center rounded-full border border-white bg-slate-200 px-1 text-tiny+ font-medium leading-none text-slate-800 dark:border-navy-700 dark:bg-navy-450 dark:text-white">
-                                        3
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="flex items-center space-x-1">
-                                        <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                            Salmon
-                                        </p>
-                                        <button
-                                            class="btn h-6 w-6 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                    <p class="text-xs+ text-slate-400 dark:text-navy-300">
-                                        Adipisicing elit. Quos?
-                                    </p>
-                                </div>
-                            </div>
-                            <p class="font-inter font-semibold">$45.00</p>
-                        </div>
-                        <div class="group flex items-center justify-between space-x-3">
-                            <div class="flex items-center space-x-4">
-                                <div class="relative flex">
-                                    <img src="{{ asset('images/800x600.png') }}"
-                                        class="mask is-star h-11 w-11 origin-center object-cover" alt="image" />
-
-                                    <div
-                                        class="absolute top-0 right-0 -m-1 flex h-5 min-w-[1.25rem] items-center justify-center rounded-full border border-white bg-slate-200 px-1 text-tiny+ font-medium leading-none text-slate-800 dark:border-navy-700 dark:bg-navy-450 dark:text-white">
-                                        1
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="flex items-center space-x-1">
-                                        <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                            California roll
-                                        </p>
-                                        <button
-                                            class="btn h-6 w-6 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                    <p class="text-xs+ text-slate-400 dark:text-navy-300">
-                                        Lorem, ipsum dolor.
-                                    </p>
-                                </div>
-                            </div>
-                            <p class="font-inter font-semibold">$22.00</p>
-                        </div>
-                        <div class="group flex items-center justify-between space-x-3">
-                            <div class="flex items-center space-x-4">
-                                <div class="relative flex">
-                                    <img src="{{ asset('images/800x600.png') }}"
-                                        class="mask is-star h-11 w-11 origin-center object-cover" alt="image" />
-
-                                    <div
-                                        class="absolute top-0 right-0 -m-1 flex h-5 min-w-[1.25rem] items-center justify-center rounded-full border border-white bg-slate-200 px-1 text-tiny+ font-medium leading-none text-slate-800 dark:border-navy-700 dark:bg-navy-450 dark:text-white">
-                                        2
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="flex items-center space-x-1">
-                                        <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
-                                            Duck carpaccio
-                                        </p>
-                                        <button
-                                            class="btn h-6 w-6 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                    <p class="text-xs+ text-slate-400 dark:text-navy-300">
-                                        Amet consectetur adip.
-                                    </p>
-                                </div>
-                            </div>
-                            <p class="font-inter font-semibold">$18.00</p>
-                        </div>
-                    </div>
-                    <div class="my-4 h-px bg-slate-200 dark:bg-navy-500"></div>
-                    <div class="space-y-2 font-inter">
-                        <div class="flex justify-between text-slate-600 dark:text-navy-100">
-                            <p>Subtotal</p>
-                            <p class="font-medium tracking-wide">55.00$</p>
-                        </div>
-                        <div class="flex justify-between text-xs+">
-                            <p>Tax</p>
-                            <p class="font-medium tracking-wide">5.00$</p>
-                        </div>
-                        <div class="flex justify-between text-base font-medium text-primary dark:text-accent-light">
-                            <p>Total</p>
-                            <p>60.00$</p>
-                        </div>
-                    </div>
-                    <div class="mt-5 grid grid-cols-3 gap-4 text-center">
-                        <button class="rounded-lg border border-slate-200 p-3 dark:border-navy-500">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="inline h-9 w-9" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
-                            </svg>
-                            <span class="mt-1 font-medium text-primary dark:text-accent-light">
-                                Cash
-                            </span>
-                        </button>
-                        <button class="rounded-lg border border-slate-200 p-3 dark:border-navy-500">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="inline h-9 w-9" fill="none"
-                                viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
-                            </svg>
-                            <span class="mt-1 font-medium text-primary dark:text-accent-light">
-                                Debit
-                            </span>
-                        </button>
-                        <button class="rounded-lg border border-slate-200 p-3 dark:border-navy-500">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="inline h-9 w-9" fill="none"
-                                viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
-                            </svg>
-                            <span class="mt-1 font-medium text-primary dark:text-accent-light">
-                                Scan
-                            </span>
-                        </button>
-                    </div>
-                    <button
-                        class="btn mt-5 h-11 w-full justify-between bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
-                        <span>Checkout</span>
-                        <span>$88.00</span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="fixed right-3 bottom-3 rounded-full bg-white dark:bg-navy-700">
-        <button @click="$dispatch('show-drawer', { drawerId: 'pos-card-drawer' })"
-            class="btn h-14 w-14 rounded-full bg-warning p-0 font-medium text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90 sm:hidden">
-            $60
-        </button>
-    </div>
-
-</x-base-layout>

resources/views/pages/apps-todo.blade.php

-<x-base-layout title="Todo Application" is-sidebar-open="true" is-header-blur="true" has-min-sidebar="true">
-    <!-- Sidebar -->
-    <div class="sidebar print:hidden">
-        <!-- Main Sidebar -->
-        <x-app-partials.main-sidebar></x-app-partials.main-sidebar>
-
-        <!-- Sidebar Panel -->
-        <div class="sidebar-panel">
-            <div class="flex h-full grow flex-col bg-white pl-[var(--main-sidebar-width)] dark:bg-navy-750">
-                <!-- Sidebar Panel Header -->
-                <div class="flex h-18 w-full items-center justify-between pl-4 pr-1">
-                    <div class="flex items-center">
-                        <div class="avatar mr-3 hidden h-9 w-9 lg:flex">
-                            <div class="is-initial rounded-full bg-info/10 text-info">
-                                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                    xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M12.5293 18L20.9999 8.40002" stroke-width="2" stroke-linecap="round"
-                                        stroke-linejoin="round" />
-                                    <path d="M3 13.2L7.23529 18L17.8235 6" stroke-width="2" stroke-linecap="round"
-                                        stroke-linejoin="round" />
-                                </svg>
-                            </div>
-                        </div>
-                        <p class="text-lg font-medium tracking-wider text-slate-800 dark:text-navy-100">
-                            Todo
-                        </p>
-                    </div>
-                    <button @click="$store.global.isSidebarExpanded = false"
-                        class="btn h-7 w-7 rounded-full p-0 text-primary hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-accent-light/80 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 xl:hidden">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-                        </svg>
-                    </button>
-                </div>
-
-                <!-- Sidebar Panel Body -->
-                <div class="flex h-[calc(100%-4.5rem)] grow flex-col">
-                    <div class="is-scrollbar-hidden grow overflow-y-auto">
-                        <div class="mt-2 px-4">
-                            <button
-                                class="btn w-full space-x-2 rounded-full border border-slate-200 py-2 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-500 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
-                                </svg>
-                                <span> New Task </span>
-                            </button>
-                        </div>
-                        <ul class="mt-5 space-y-1.5 px-2 font-inter text-xs+ font-medium">
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg bg-primary/10 p-2 tracking-wide text-primary outline-none transition-all dark:bg-accent-light/10 dark:text-accent-light"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                                    </svg>
-                                    <span>My Day</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                    </svg>
-                                    <span>Important</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-                                    </svg>
-                                    <span>Task</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg"
-                                        class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-                                    </svg>
-                                    <span>Assigned</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20"
-                                    href="#">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                                    </svg>
-                                    <span>Deleted</span>
-                                </a>
-                            </li>
-                        </ul>
-                        <div class="my-4 mx-4 h-px bg-slate-200 dark:bg-navy-500"></div>
-                        <div class="flex items-center justify-between px-4">
-                            <span class="text-xs font-medium uppercase">Labels</span>
-                            <div class="-mr-1.5 flex">
-                                <button
-                                    class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                                    </svg>
-                                </button>
-
-                                <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                                    class="inline-flex">
-                                    <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                        class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-                                        </svg>
-                                    </button>
-
-                                    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                        <div
-                                            class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                            <ul>
-                                                <li>
-                                                    <a href="#"
-                                                        class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                                </li>
-                                                <li>
-                                                    <a href="#"
-                                                        class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                        Action</a>
-                                                </li>
-                                                <li>
-                                                    <a href="#"
-                                                        class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                        else</a>
-                                                </li>
-                                            </ul>
-                                            <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                            <ul>
-                                                <li>
-                                                    <a href="#"
-                                                        class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                        Link</a>
-                                                </li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <ul class="mt-1 space-y-1.5 px-2 font-inter text-xs+ font-medium">
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide outline-none transition-all hover:bg-success/20 focus:bg-success/20"
-                                    href="#">
-                                    <svg class="h-4.5 w-4.5 text-success" stroke="currentColor" viewBox="0 0 24 24"
-                                        stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M7 6H21M7 12H21M7 18H21" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                        <path d="M3 6H4M3 12H4M3 18H4" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">Low</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide outline-none transition-all hover:bg-warning/20 focus:bg-warning/20"
-                                    href="#">
-                                    <svg class="h-4.5 w-4.5 text-warning" stroke="currentColor" viewBox="0 0 24 24"
-                                        stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M7 6H21M7 12H21M7 18H21" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                        <path d="M3 6H4M3 12H4M3 18H4" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">Medium</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide outline-none transition-all hover:bg-error/20 focus:bg-error/20"
-                                    href="#">
-                                    <svg class="h-4.5 w-4.5 text-error" stroke="currentColor" viewBox="0 0 24 24"
-                                        stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M7 6H21M7 12H21M7 18H21" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                        <path d="M3 6H4M3 12H4M3 18H4" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">High</span>
-                                </a>
-                            </li>
-                            <li>
-                                <a class="group flex space-x-2 rounded-lg p-2 tracking-wide outline-none transition-all hover:bg-info/20 focus:bg-info/20"
-                                    href="#">
-                                    <svg class="h-4.5 w-4.5 text-info" stroke="currentColor" viewBox="0 0 24 24"
-                                        stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M7 6H21M7 12H21M7 18H21" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                        <path d="M3 6H4M3 12H4M3 18H4" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                    </svg>
-                                    <span class="text-slate-800 dark:text-navy-100">Update</span>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <div class="flex shrink-0 justify-between px-1.5 py-1">
-                        <a href="{{route('apps/mail')}}" x-tooltip="'Mail App'"
-                            class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                            </svg>
-                        </a>
-                        <a href="{{route('apps/kanban')}}" x-tooltip="'Kanban App'"
-                            class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
-                            </svg>
-                        </a>
-                        <a href="{{route('apps/chat')}}" x-tooltip="'Chat App'"
-                            class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-                            </svg>
-                        </a>
-                        <a href="{{route('apps/pos')}}" x-tooltip="'POS App'"
-                            class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
-                            </svg>
-                        </a>
-                        <a href="{{route('apps/filemanager')}}" x-tooltip="'File Manager App'"
-                            class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
-                            </svg>
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Minimized Sidebar Panel -->
-        <div class="sidebar-panel-min">
-            <div class="flex h-full flex-col items-center bg-white dark:bg-navy-750">
-                <div class="flex h-18 shrink-0 items-center justify-center">
-                    <div class="avatar flex h-10 w-10 rounded-full bg-info/10 text-info">
-                        <div class="is-initial">
-                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                xmlns="http://www.w3.org/2000/svg">
-                                <path d="M12.5293 18L20.9999 8.40002" stroke-width="2" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                                <path d="M3 13.2L7.23529 18L17.8235 6" stroke-width="2" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                            </svg>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex h-[calc(100%-4.5rem)] grow flex-col">
-                    <div class="is-scrollbar-hidden flex grow flex-col overflow-y-auto">
-                        <ul class="mt-4 space-y-1">
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 bg-primary/10 p-0 font-medium text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                                    </svg>
-                                </a>
-                            </li>
-                        </ul>
-                        <div class="my-4 h-px bg-slate-200 dark:bg-navy-500"></div>
-                        <ul class="space-y-1">
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
-                                    <svg class="h-5.5 w-5.5" stroke="currentColor" viewBox="0 0 24 24"
-                                        stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M7 6H21M7 12H21M7 18H21" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                        <path d="M3 6H4M3 12H4M3 18H4" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
-                                    <svg class="h-5.5 w-5.5" stroke="currentColor" viewBox="0 0 24 24"
-                                        stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M7 6H21M7 12H21M7 18H21" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                        <path d="M3 6H4M3 12H4M3 18H4" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25">
-                                    <svg class="h-5.5 w-5.5" stroke="currentColor" viewBox="0 0 24 24"
-                                        stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M7 6H21M7 12H21M7 18H21" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                        <path d="M3 6H4M3 12H4M3 18H4" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="#"
-                                    class="btn h-10 w-10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
-                                    <svg class="h-5.5 w-5.5" stroke="currentColor" viewBox="0 0 24 24"
-                                        stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M7 6H21M7 12H21M7 18H21" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                        <path d="M3 6H4M3 12H4M3 18H4" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                    </svg>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <div class="py-3">
-                        <div x-data="usePopper({ placement: 'right-start', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn h-10 w-10 rounded-full border border-slate-300 p-0 font-medium hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-
-                            <template x-teleport="#x-teleport-target">
-                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                    <div
-                                        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                    Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                    else</a>
-                                            </li>
-                                        </ul>
-                                        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                    Link</a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-    </div>
-
-    <!-- App Header -->
-    <x-app-partials.header></x-app-partials.header>
-
-    <!-- Mobile Searchbar -->
-    <x-app-partials.mobile-searchbar></x-app-partials.mobile-searchbar>
-
-    <!-- Right Sidebar -->
-    <x-app-partials.right-sidebar></x-app-partials.right-sidebar>
-
-    <!-- Main Content Wrapper -->
-    <main class="main-content todo-app w-full px-[var(--margin-x)] pb-8">
-        <div class="py-5" x-data="{ isSearchbarActive: false }"
-            x-effect="$store.breakpoints.smAndUp && (isSearchbarActive = false)">
-            <div x-show="!isSearchbarActive" class="flex items-center justify-between">
-                <div>
-                    <div class="flex space-x-2">
-                        <p class="text-xl font-medium text-slate-800 dark:text-navy-50">
-                            My Day
-                        </p>
-
-                        <div x-data="usePopper({ placement: 'bottom-start', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-
-                            <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                <div
-                                    class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                Action</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                else</a>
-                                        </li>
-                                    </ul>
-                                    <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                Link</a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <p class="mt-1 text-xs">Sunday, Sep. 14</p>
-                </div>
-                <div class="flex items-center space-x-2">
-                    <label class="relative hidden sm:flex">
-                        <input
-                            class="form-input peer h-9 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
-                            placeholder="Search todos..." type="text" />
-                        <span
-                            class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 transition-colors duration-200"
-                                fill="currentColor" viewBox="0 0 24 24">
-                                <path
-                                    d="M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z" />
-                            </svg>
-                        </span>
-                    </label>
-                    <div class="flex">
-                        <button @click="isSearchbarActive = true" x-tooltip="'Search'"
-                            class="btn h-9 w-9 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:hidden">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Filter'"
-                            class="btn h-9 w-9 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                    d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
-                            </svg>
-                        </button>
-                        <button x-tooltip="'Sort'"
-                            class="btn h-9 w-9 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                    d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            <div x-show="isSearchbarActive">
-                <div class="flex space-x-2">
-                    <label class="relative flex w-full">
-                        <input
-                            class="form-input peer h-9 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
-                            placeholder="Search todos..." type="text" />
-                        <span
-                            class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 transition-colors duration-200"
-                                fill="currentColor" viewBox="0 0 24 24">
-                                <path
-                                    d="M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z" />
-                            </svg>
-                        </span>
-                    </label>
-                    <button @click="isSearchbarActive = false" x-tooltip="'Search'"
-                        class="btn h-9 w-9 shrink-0 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:hidden">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor" stroke-width="2">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                    </button>
-                </div>
-            </div>
-        </div>
-        <div class="card px-4 pt-2 pb-4">
-            <div x-init="Sortable.create($el, {
-                animation: 200,
-                easing: 'cubic-bezier(0, 0, 0.2, 1)',
-                direction: 'vertical',
-                delay: 150,
-                delayOnTouchOnly: true,
-            })">
-                <div class="border-b border-slate-150 py-3 dark:border-navy-500"
-                    @click="$dispatch('show-drawer', { drawerId: 'edit-todo-drawer' })">
-                    <div class="flex items-center space-x-2 sm:space-x-3">
-                        <label class="flex">
-                            <input type="checkbox" checked @click.stop
-                                class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent" />
-                        </label>
-                        <h2 class="cursor-pointer text-slate-600 line-clamp-1 dark:text-navy-100">
-                            Design UI
-                        </h2>
-                    </div>
-                    <div class="mt-1 flex items-end justify-between">
-                        <div class="flex flex-wrap items-center font-inter text-xs">
-                            <p>Today</p>
-                            <div class="m-1.5 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
-                            <span class="flex items-center space-x-1">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-                                </svg>
-                                <span>06:00</span>
-                            </span>
-                            <div class="m-1.5 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
-                            <div class="badge space-x-2.5 px-1 text-success">
-                                <div class="h-2 w-2 rounded-full bg-current"></div>
-                                <span>Low</span>
-                            </div>
-                        </div>
-                        <div class="flex items-center space-x-1">
-                            <button x-data="{ isImportant: false }" @click.stop="isImportant =! isImportant"
-                                class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg x-show="!isImportant" xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                                <svg x-show="isImportant" xmlns="http://www.w3.org/2000/svg"
-                                    class="h-5.5 w-5.5 text-primary dark:text-accent" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path
-                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                                </svg>
-                            </button>
-
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="border-b border-slate-150 py-3 dark:border-navy-500"
-                    @click="$dispatch('show-drawer', { drawerId: 'edit-todo-drawer' })">
-                    <div class="flex items-center space-x-2 sm:space-x-3">
-                        <label class="flex">
-                            <input type="checkbox" @click.stop
-                                class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent" />
-                        </label>
-                        <h2 class="cursor-pointer text-slate-600 line-clamp-1 dark:text-navy-100">
-                            Lorem ipsum dolor.
-                        </h2>
-                    </div>
-                    <div class="mt-1 flex items-end justify-between">
-                        <div class="flex flex-wrap items-center font-inter text-xs">
-                            <p>Today</p>
-                            <div class="m-1.5 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
-                            <span class="flex items-center space-x-1">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-                                </svg>
-                                <span>10:00</span>
-                            </span>
-                            <div class="m-1.5 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
-                            <div class="badge space-x-2.5 px-1 text-warning">
-                                <div class="h-2 w-2 rounded-full bg-current"></div>
-                                <span>Medium</span>
-                            </div>
-                            <div class="m-1.5 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
-                            <div class="badge space-x-2.5 px-1 text-info">
-                                <div class="h-2 w-2 rounded-full bg-current"></div>
-                                <span>Update</span>
-                            </div>
-                        </div>
-                        <div class="flex items-center space-x-1">
-                            <button x-data="{ isImportant: false }" @click.stop="isImportant =! isImportant"
-                                class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg x-show="!isImportant" xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                                <svg x-show="isImportant" xmlns="http://www.w3.org/2000/svg"
-                                    class="h-5.5 w-5.5 text-primary dark:text-accent" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path
-                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="border-b border-slate-150 py-3 dark:border-navy-500"
-                    @click="$dispatch('show-drawer', { drawerId: 'edit-todo-drawer' })">
-                    <div class="flex items-center space-x-2 sm:space-x-3">
-                        <label class="flex">
-                            <input type="checkbox" @click.stop
-                                class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent" />
-                        </label>
-                        <h2 class="cursor-pointer text-slate-600 line-clamp-1 dark:text-navy-100">
-                            Chat App fragment.
-                        </h2>
-                    </div>
-                    <div class="mt-1 flex items-end justify-between">
-                        <div class="flex flex-wrap items-center font-inter text-xs">
-                            <p>Today</p>
-                            <div class="m-1.5 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
-                            <span class="flex items-center space-x-1">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-                                </svg>
-                                <span>11:00</span>
-                            </span>
-                            <div class="m-1.5 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
-                            <div class="badge space-x-2.5 px-1 text-error">
-                                <div class="h-2 w-2 rounded-full bg-current"></div>
-                                <span>High</span>
-                            </div>
-                        </div>
-                        <div class="flex items-center space-x-1">
-                            <button x-data="{ isImportant: true }" @click.stop="isImportant =! isImportant"
-                                class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg x-show="!isImportant" xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                                <svg x-show="isImportant" xmlns="http://www.w3.org/2000/svg"
-                                    class="h-5.5 w-5.5 text-primary dark:text-accent" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path
-                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                                </svg>
-                            </button>
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="border-b border-slate-150 py-3 dark:border-navy-500"
-                    @click="$dispatch('show-drawer', { drawerId: 'edit-todo-drawer' })">
-                    <div class="flex items-center space-x-2 sm:space-x-3">
-                        <label class="flex">
-                            <input checked type="checkbox" @click.stop
-                                class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent" />
-                        </label>
-                        <h2 class="cursor-pointer text-slate-600 line-clamp-1 dark:text-navy-100">
-                            Unit Testing
-                        </h2>
-                    </div>
-                    <div class="mt-1 flex items-end justify-between">
-                        <div class="flex flex-wrap items-center font-inter text-xs">
-                            <p>Tomorrow</p>
-                            <div class="m-1.5 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
-                            <span class="flex items-center space-x-1">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-                                </svg>
-                                <span>14:00</span>
-                            </span>
-                            <div class="m-1.5 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
-                            <div class="badge space-x-2.5 px-1 text-info">
-                                <div class="h-2 w-2 rounded-full bg-current"></div>
-                                <span>Update</span>
-                            </div>
-                        </div>
-                        <div class="flex items-center space-x-1">
-                            <button x-data="{ isImportant: false }" @click.stop="isImportant =! isImportant"
-                                class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg x-show="!isImportant" xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                                <svg x-show="isImportant" xmlns="http://www.w3.org/2000/svg"
-                                    class="h-5.5 w-5.5 text-primary dark:text-accent" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path
-                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                                </svg>
-                            </button>
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="border-b border-slate-150 py-3 dark:border-navy-500"
-                    @click="$dispatch('show-drawer', { drawerId: 'edit-todo-drawer' })">
-                    <div class="flex items-center space-x-2 sm:space-x-3">
-                        <label class="flex">
-                            <input type="checkbox" @click.stop
-                                class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent" />
-                        </label>
-                        <h2 class="cursor-pointer text-slate-600 line-clamp-1 dark:text-navy-100">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                            Aliquid minus numquam vero.
-                        </h2>
-                    </div>
-                    <div class="mt-1 flex items-end justify-between">
-                        <div class="flex flex-wrap items-center font-inter text-xs">
-                            <p>Tomorrow</p>
-                            <div class="m-1.5 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
-                            <span class="flex items-center space-x-1">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-                                </svg>
-                                <span>08:00</span>
-                            </span>
-                            <div class="m-1.5 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
-                            <div class="badge space-x-2.5 px-1 text-error">
-                                <div class="h-2 w-2 rounded-full bg-current"></div>
-                                <span>High</span>
-                            </div>
-                        </div>
-                        <div class="flex items-center space-x-1">
-                            <button x-data="{ isImportant: false }" @click.stop="isImportant =! isImportant"
-                                class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg x-show="!isImportant" xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                                <svg x-show="isImportant" xmlns="http://www.w3.org/2000/svg"
-                                    class="h-5.5 w-5.5 text-primary dark:text-accent" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path
-                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                                </svg>
-                            </button>
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="border-b border-slate-150 py-3 dark:border-navy-500"
-                    @click="$dispatch('show-drawer', { drawerId: 'edit-todo-drawer' })">
-                    <div class="flex items-center space-x-2 sm:space-x-3">
-                        <label class="flex">
-                            <input type="checkbox" @click.stop
-                                class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent" />
-                        </label>
-                        <h2 class="cursor-pointer text-slate-600 line-clamp-1 dark:text-navy-100">
-                            Launch new home page
-                        </h2>
-                    </div>
-                    <div class="mt-1 flex items-end justify-between">
-                        <div class="flex flex-wrap items-center font-inter text-xs">
-                            <p>Tomorrow</p>
-                            <div class="m-1.5 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
-                            <span class="flex items-center space-x-1">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-                                </svg>
-                                <span>10:30</span>
-                            </span>
-                            <div class="m-1.5 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
-                            <div class="badge space-x-2.5 px-1 text-warning">
-                                <div class="h-2 w-2 rounded-full bg-current"></div>
-                                <span>Medium</span>
-                            </div>
-                        </div>
-                        <div class="flex items-center space-x-1">
-                            <button x-data="{ isImportant: true }" @click.stop="isImportant =! isImportant"
-                                class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg x-show="!isImportant" xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                                <svg x-show="isImportant" xmlns="http://www.w3.org/2000/svg"
-                                    class="h-5.5 w-5.5 text-primary dark:text-accent" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path
-                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                                </svg>
-                            </button>
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="border-b border-slate-150 py-3 dark:border-navy-500"
-                    @click="$dispatch('show-drawer', { drawerId: 'edit-todo-drawer' })">
-                    <div class="flex items-center space-x-2 sm:space-x-3">
-                        <label class="flex">
-                            <input type="checkbox" @click.stop
-                                class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent" />
-                        </label>
-                        <h2 class="cursor-pointer text-slate-600 line-clamp-1 dark:text-navy-100">
-                            Review Announcement Blog
-                        </h2>
-                    </div>
-                    <div class="mt-1 flex items-end justify-between">
-                        <div class="flex flex-wrap items-center font-inter text-xs">
-                            <p>Tomorrow</p>
-                            <div class="m-1.5 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
-                            <span class="flex items-center space-x-1">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-                                </svg>
-                                <span>12:00</span>
-                            </span>
-                            <div class="m-1.5 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
-                            <div class="badge space-x-2.5 px-1 text-success">
-                                <div class="h-2 w-2 rounded-full bg-current"></div>
-                                <span>Low</span>
-                            </div>
-                        </div>
-                        <div class="flex items-center space-x-1">
-                            <button x-data="{ isImportant: false }" @click.stop="isImportant =! isImportant"
-                                class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg x-show="!isImportant" xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                                <svg x-show="isImportant" xmlns="http://www.w3.org/2000/svg"
-                                    class="h-5.5 w-5.5 text-primary dark:text-accent" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path
-                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                                </svg>
-                            </button>
-                            <div class="avatar h-6 w-6">
-                                <img class="rounded-full" src="{{ asset('images/200x200.png') }}"
-                                    alt="avatar" />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="border-b border-slate-150 py-3 dark:border-navy-500"
-                    @click="$dispatch('show-drawer', { drawerId: 'edit-todo-drawer' })">
-                    <div class="flex items-center space-x-2 sm:space-x-3">
-                        <label class="flex">
-                            <input checked type="checkbox" @click.stop
-                                class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent" />
-                        </label>
-                        <h2 class="cursor-pointer text-slate-600 line-clamp-1 dark:text-navy-100">
-                            Check Email
-                        </h2>
-                    </div>
-                    <div class="mt-1 flex items-end justify-between">
-                        <div class="flex flex-wrap items-center font-inter text-xs">
-                            <p>Every Day</p>
-                            <div class="m-1.5 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
-                            <span class="flex items-center space-x-1">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-                                </svg>
-                                <span>07:00</span>
-                            </span>
-                        </div>
-                        <div class="flex items-center space-x-1">
-                            <button x-data="{ isImportant: false }" @click.stop="isImportant =! isImportant"
-                                class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg x-show="!isImportant" xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                                <svg x-show="isImportant" xmlns="http://www.w3.org/2000/svg"
-                                    class="h-5.5 w-5.5 text-primary dark:text-accent" viewBox="0 0 20 20"
-                                    fill="currentColor">
-                                    <path
-                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-
-    <div x-show="showDrawer" x-data="{ showDrawer: false }"
-        x-on:show-drawer.window="($event.detail.drawerId === 'edit-todo-drawer') && (showDrawer = true)"
-        @keydown.window.escape="showDrawer = false">
-        <div class="fixed inset-0 z-[100] bg-slate-900/60 transition-opacity duration-200" @click="showDrawer = false"
-            x-show="showDrawer" x-transition:enter="ease-out" x-transition:enter-start="opacity-0"
-            x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
-            x-transition:leave-end="opacity-0"></div>
-        <div class="fixed right-0 top-0 z-[101] h-full w-80">
-            <div class="flex h-full w-full transform-gpu flex-col bg-white transition-transform duration-200 dark:bg-navy-700"
-                x-show="showDrawer" x-transition:enter="ease-out" x-transition:enter-start="translate-x-full"
-                x-transition:enter-end="translate-x-0" x-transition:leave="ease-in"
-                x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
-                <div class="flex h-14 items-center justify-between bg-slate-150 p-4 dark:bg-navy-800">
-                    <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
-                        Edit Todo
-                    </h3>
-                    <div class="-mr-1.5 flex items-center space-x-2.5">
-                        <input x-tooltip.primary="'Mark as Completed'"
-                            x-effect="showDrawer && setTimeout(() => showDrawer && $el.__x_tippy.show(), 500)"
-                            class="form-checkbox is-basic h-5 w-5 rounded-full border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
-                            type="checkbox" />
-                        <div class="flex">
-                            <button x-data="{ isImportant: false }" @click.stop="isImportant =! isImportant"
-                                class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg x-show="!isImportant" xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                </svg>
-                                <svg x-show="isImportant" xmlns="http://www.w3.org/2000/svg"
-                                    class="h-5.5 w-5.5 text-primary dark:text-accent" viewBox="0 0 20 20"
-                                    fill="currentColor" style="display: none">
-                                    <path
-                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                                </svg>
-                            </button>
-                            <button @click="showDrawer=false"
-                                class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <div class="is-scrollbar-hidden flex grow flex-col space-y-4 overflow-y-auto p-4">
-                    <label class="block">
-                        <span>Todo Title</span>
-
-                        <input
-                            class="form-input mt-1.5 h-9 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
-                            placeholder="Enter todo title" type="text" value="Design UI" />
-                    </label>
-
-                    <label class="block">
-                        <span>Tags:</span>
-                        <select x-init="$el._x_tom = new Tom($el)" class="mt-1.5 w-full" multiple placeholder="Select the tags"
-                            autocomplete="off">
-                            <option value="Low">Low</option>
-                            <option value="Medium">Medium</option>
-                            <option value="High">High</option>
-                            <option value="Update" selected>Update</option>
-                        </select>
-                    </label>
-
-                    <div>
-                        <span>Due date:</span>
-                        <label class="relative mt-1.5 flex">
-                            <input x-init="$el._x_flatpickr = flatpickr($el, { defaultDate: '2020-01-05' })"
-                                class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
-                                placeholder="Choose date..." type="text" />
-                            <span
-                                class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-colors duration-200"
-                                    fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                </svg>
-                            </span>
-                        </label>
-                    </div>
-
-                    <label class="block">
-                        <span>Assigned to:</span>
-                        <select class="mt-1.5 w-full" x-init="$el._x_tom = new Tom($el, pages.tomSelect.assignedTodo)"
-                            placeholder="Pick some links..."></select>
-                    </label>
-
-                    <div>
-                        <span>Description</span>
-                        <div class="mt-1.5 w-full">
-                            <div class="h-36" x-init="$el._x_quill = new Quill($el, {
-                                modules: {
-                                    toolbar: [
-                                        ['bold', 'italic', 'underline'],
-                                        [
-                                            { list: 'ordered' },
-                                            { list: 'bullet' },
-                                            { header: 1 },
-                                            { background: [] },
-                                        ],
-                                    ],
-                                },
-                                placeholder: 'Enter your content...',
-                                theme: 'snow',
-                            })">
-                                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                                Corporis incidunt nostrum repellat.
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    class="flex items-center justify-between border-t border-slate-150 py-3 px-4 dark:border-navy-600">
-                    <div class="flex space-x-1">
-                        <button
-                            class="btn h-8 w-8 rounded-full p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                            </svg>
-                        </button>
-                        <button
-                            class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                            </svg>
-                        </button>
-                    </div>
-                    <button @click="showDrawer=false"
-                        class="btn min-w-[7rem] bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
-                        Save
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="fixed right-3 bottom-3 rounded-full bg-white dark:bg-navy-700">
-        <button
-            class="btn h-14 w-14 rounded-full bg-info p-0 font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90 sm:hidden">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
-                stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
-            </svg>
-        </button>
-    </div>
-
-</x-base-layout>

resources/views/pages/apps-travel.blade.php

-<x-app-layout title="Travel Application" is-header-blur="true">
-    <!-- Main Content Wrapper -->
-    <main class="main-content w-full px-[var(--margin-x)] pb-8">
-        <div class="flex items-center justify-between space-x-2 py-5">
-            <h3 class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl">
-                Travel
-            </h3>
-
-            <div>
-                <a href="#"
-                    class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">Explore
-                    the world</a>
-            </div>
-        </div>
-        <div class="grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
-            <div class="col-span-12 lg:col-span-8">
-                <div class="flex items-center justify-between space-x-3 sm:space-x-5">
-                    <div class="flex w-full max-w-lg">
-                        <label class="relative flex w-full">
-                            <input
-                                class="form-input peer h-9 w-full rounded-l-lg bg-white px-3 py-2 shadow-soft ring-primary/50 placeholder:text-slate-400 focus:ring dark:bg-navy-700 dark:shadow-none dark:ring-accent/50 dark:placeholder:text-navy-300 lg:pl-9"
-                                placeholder="Location, Country or Destination..." type="text" />
-                            <span
-                                class="pointer-events-none absolute hidden h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent lg:flex">
-                                <svg xmlns="http://www.w3.org/2000/svg"
-                                    class="h-4.5 w-4.5 transition-colors duration-200" fill="currentColor"
-                                    viewBox="0 0 24 24">
-                                    <path
-                                        d="M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z" />
-                                </svg>
-                            </span>
-                        </label>
-                        <button
-                            class="btn h-9 rounded-l-none bg-primary px-3 font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90 lg:px-5">
-                            <span class="hidden lg:inline-flex">Search</span>
-                            <svg class="h-4.5 w-4.5 lg:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="flex">
-                        <button
-                            class="btn h-8 w-8 shrink-0 rounded-full p-0 text-slate-700 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                                stroke="currentColor" stroke-width="1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
-                                    d="M22 6.5h-9.5M6 6.5H2M9 9a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM22 17.5h-6M9.5 17.5H2M13 20a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" />
-                            </svg>
-                        </button>
-                        <button
-                            class="btn h-8 w-8 shrink-0 rounded-full p-0 text-slate-700 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                                stroke="currentColor" stroke-width="1">
-                                <path
-                                    d="M3 2.5h-.5v4H6.501V6L6.5 3v-.5H3zM3 10h-.5v4H6.501v-.5l-.001-3V10H3zm0 7.5h-.5v4H6.501V21L6.5 18v-.5H3zM6 7H3c-.551 0-1-.45-1-1V3c0-.55.449-1 1-1h3c.551 0 1 .45 1 1v3c0 .55-.449 1-1 1zm15.75-2.75a.25.25 0 110 .5h-12a.25.25 0 110-.5h12zM6 14.5H3c-.551 0-1-.45-1-1v-3c0-.55.449-1 1-1h3c.551 0 1 .45 1 1v3c0 .55-.449 1-1 1zm15.75-2.75a.25.25 0 110 .5h-12a.25.25 0 110-.5h12zM6 22H3c-.551 0-1-.45-1-1v-3c0-.55.449-1 1-1h3c.551 0 1 .45 1 1v3c0 .55-.449 1-1 1zm15.75-2.75a.25.25 0 110 .5h-12a.25.25 0 110-.5h12z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div
-                    class="mt-4 grid grid-cols-1 gap-4 sm:mt-5 sm:grid-cols-2 sm:gap-5 lg:mt-6 lg:gap-6 xl:grid-cols-3">
-                    <div class="card">
-                        <img class="h-80 w-full rounded-lg object-cover" src="{{ asset('images/800x800.png') }}"
-                            alt="image" />
-                        <div class="absolute inset-0 flex h-full w-full flex-col justify-between">
-                            <div class="flex justify-end p-3">
-                                <button
-                                    class="btn h-7 w-7 rounded-full bg-black/20 p-0 hover:bg-black/30 focus:bg-black/30">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-white"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div
-                                class="rounded-lg bg-gradient-to-t from-[#19213299] via-[#19213266] to-transparent px-4 py-3 pt-14">
-                                <div>
-                                    <a href="#" class="text-base font-semibold text-white line-clamp-2">
-                                        South Island
-                                    </a>
-                                </div>
-                                <div class="mt-1 flex items-center space-x-3 text-slate-200">
-                                    <p class="flex items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                        </svg>
-                                        <span class="text-xs+ line-clamp-1">New Zealand</span>
-                                    </p>
-                                    <p class="flex shrink-0 items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
-                                            class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
-                                        </svg>
-                                        <span class="text-xs+">5.0</span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="card">
-                        <img class="h-80 w-full rounded-lg object-cover" src="{{ asset('images/800x800.png') }}"
-                            alt="image" />
-                        <div class="absolute inset-0 flex h-full w-full flex-col justify-between">
-                            <div class="flex justify-end p-3">
-                                <button
-                                    class="btn h-7 w-7 rounded-full bg-black/20 p-0 hover:bg-black/30 focus:bg-black/30">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-white"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div
-                                class="rounded-lg bg-gradient-to-t from-[#19213299] via-[#19213266] to-transparent px-4 py-3 pt-14">
-                                <div>
-                                    <a href="#" class="text-base font-semibold text-white line-clamp-2">
-                                        Bora Bora
-                                    </a>
-                                </div>
-                                <div class="mt-1 flex items-center space-x-3 text-slate-200">
-                                    <p class="flex items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                        </svg>
-                                        <span class="text-xs+ line-clamp-1">French</span>
-                                    </p>
-                                    <p class="flex shrink-0 items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
-                                            class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
-                                        </svg>
-                                        <span class="text-xs+">4.9</span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="card">
-                        <img class="h-80 w-full rounded-lg object-cover" src="{{ asset('images/800x800.png') }}"
-                            alt="image" />
-                        <div class="absolute inset-0 flex h-full w-full flex-col justify-between">
-                            <div class="flex justify-end p-3">
-                                <button
-                                    class="btn h-7 w-7 rounded-full bg-black/20 p-0 hover:bg-black/30 focus:bg-black/30">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-white"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div
-                                class="rounded-lg bg-gradient-to-t from-[#19213299] via-[#19213266] to-transparent px-4 py-3 pt-14">
-                                <div>
-                                    <a href="#" class="text-base font-semibold text-white line-clamp-2">
-                                        Maui
-                                    </a>
-                                </div>
-                                <div class="mt-1 flex items-center space-x-3 text-slate-200">
-                                    <p class="flex items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                        </svg>
-                                        <span class="text-xs+ line-clamp-1">Hana </span>
-                                    </p>
-                                    <p class="flex shrink-0 items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
-                                            class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
-                                        </svg>
-                                        <span class="text-xs+">4.8</span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="card">
-                        <img class="h-80 w-full rounded-lg object-cover" src="{{ asset('images/800x800.png') }}"
-                            alt="image" />
-                        <div class="absolute inset-0 flex h-full w-full flex-col justify-between">
-                            <div class="flex justify-end p-3">
-                                <button
-                                    class="btn h-7 w-7 rounded-full bg-black/20 p-0 hover:bg-black/30 focus:bg-black/30">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-white"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div
-                                class="rounded-lg bg-gradient-to-t from-[#19213299] via-[#19213266] to-transparent px-4 py-3 pt-14">
-                                <div>
-                                    <a href="#" class="text-base font-semibold text-white line-clamp-2">
-                                        Tahiti
-                                    </a>
-                                </div>
-                                <div class="mt-1 flex items-center space-x-3 text-slate-200">
-                                    <p class="flex items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                        </svg>
-                                        <span class="text-xs+ line-clamp-1">French </span>
-                                    </p>
-                                    <p class="flex shrink-0 items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
-                                            class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
-                                        </svg>
-                                        <span class="text-xs+">4.7</span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="card">
-                        <img class="h-80 w-full rounded-lg object-cover" src="{{ asset('images/800x800.png') }}"
-                            alt="image" />
-                        <div class="absolute inset-0 flex h-full w-full flex-col justify-between">
-                            <div class="flex justify-end p-3">
-                                <button
-                                    class="btn h-7 w-7 rounded-full bg-black/20 p-0 hover:bg-black/30 focus:bg-black/30">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-white"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div
-                                class="rounded-lg bg-gradient-to-t from-[#19213299] via-[#19213266] to-transparent px-4 py-3 pt-14">
-                                <div>
-                                    <a href="#" class="text-base font-semibold text-white line-clamp-2">
-                                        Glacier National Park
-                                    </a>
-                                </div>
-                                <div class="mt-1 flex items-center space-x-3 text-slate-200">
-                                    <p class="flex items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                        </svg>
-                                        <span class="text-xs+ line-clamp-1">Unated States
-                                        </span>
-                                    </p>
-                                    <p class="flex shrink-0 items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
-                                            class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
-                                        </svg>
-                                        <span class="text-xs+">4.5</span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="card">
-                        <img class="h-80 w-full rounded-lg object-cover" src="{{ asset('images/800x800.png') }}"
-                            alt="image" />
-                        <div class="absolute inset-0 flex h-full w-full flex-col justify-between">
-                            <div class="flex justify-end p-3">
-                                <button
-                                    class="btn h-7 w-7 rounded-full bg-black/20 p-0 hover:bg-black/30 focus:bg-black/30">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-white"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div
-                                class="rounded-lg bg-gradient-to-t from-[#19213299] via-[#19213266] to-transparent px-4 py-3 pt-14">
-                                <div>
-                                    <a href="#" class="text-base font-semibold text-white line-clamp-2">
-                                        Argentine Patagonia
-                                    </a>
-                                </div>
-                                <div class="mt-1 flex items-center space-x-3 text-slate-200">
-                                    <p class="flex items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                        </svg>
-                                        <span class="text-xs+ line-clamp-1">Argentine </span>
-                                    </p>
-                                    <p class="flex shrink-0 items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
-                                            class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
-                                        </svg>
-                                        <span class="text-xs+">4.4</span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="card">
-                        <img class="h-80 w-full rounded-lg object-cover" src="{{ asset('images/800x800.png') }}"
-                            alt="image" />
-                        <div class="absolute inset-0 flex h-full w-full flex-col justify-between">
-                            <div class="flex justify-end p-3">
-                                <button
-                                    class="btn h-7 w-7 rounded-full bg-black/20 p-0 hover:bg-black/30 focus:bg-black/30">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-white"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div
-                                class="rounded-lg bg-gradient-to-t from-[#19213299] via-[#19213266] to-transparent px-4 py-3 pt-14">
-                                <div>
-                                    <a href="#" class="text-base font-semibold text-white line-clamp-2">
-                                        Amalfi Coast
-                                    </a>
-                                </div>
-                                <div class="mt-1 flex items-center space-x-3 text-slate-200">
-                                    <p class="flex items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                        </svg>
-                                        <span class="text-xs+ line-clamp-1">Italy </span>
-                                    </p>
-                                    <p class="flex shrink-0 items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
-                                            class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
-                                        </svg>
-                                        <span class="text-xs+">4.3</span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="card">
-                        <img class="h-80 w-full rounded-lg object-cover" src="{{ asset('images/800x800.png') }}"
-                            alt="image" />
-                        <div class="absolute inset-0 flex h-full w-full flex-col justify-between">
-                            <div class="flex justify-end p-3">
-                                <button
-                                    class="btn h-7 w-7 rounded-full bg-black/20 p-0 hover:bg-black/30 focus:bg-black/30">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-white"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div
-                                class="rounded-lg bg-gradient-to-t from-[#19213299] via-[#19213266] to-transparent px-4 py-3 pt-14">
-                                <div>
-                                    <a href="#" class="text-base font-semibold text-white line-clamp-2">
-                                        Niagara Falls
-                                    </a>
-                                </div>
-                                <div class="mt-1 flex items-center space-x-3 text-slate-200">
-                                    <p class="flex items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                        </svg>
-                                        <span class="text-xs+ line-clamp-1">Niagara </span>
-                                    </p>
-                                    <p class="flex shrink-0 items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
-                                            class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
-                                        </svg>
-                                        <span class="text-xs+">4.1</span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="card">
-                        <img class="h-80 w-full rounded-lg object-cover" src="{{ asset('images/800x800.png') }}"
-                            alt="image" />
-                        <div class="absolute inset-0 flex h-full w-full flex-col justify-between">
-                            <div class="flex justify-end p-3">
-                                <button
-                                    class="btn h-7 w-7 rounded-full bg-black/20 p-0 hover:bg-black/30 focus:bg-black/30">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-white"
-                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
-                                    </svg>
-                                </button>
-                            </div>
-                            <div
-                                class="rounded-lg bg-gradient-to-t from-[#19213299] via-[#19213266] to-transparent px-4 py-3 pt-14">
-                                <div>
-                                    <a href="#" class="text-base font-semibold text-white line-clamp-2">
-                                        Great Barrier Reef
-                                    </a>
-                                </div>
-                                <div class="mt-1 flex items-center space-x-3 text-slate-200">
-                                    <p class="flex items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                        </svg>
-                                        <span class="text-xs+ line-clamp-1">Australia </span>
-                                    </p>
-                                    <p class="flex shrink-0 items-center space-x-1">
-                                        <svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
-                                            class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                                d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
-                                        </svg>
-                                        <span class="text-xs+">4.0</span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-span-12 lg:col-span-4">
-                <div class="card px-4 pb-5 sm:px-5">
-                    <div class="flex items-center justify-between py-3">
-                        <h2 class="text-sm+ font-medium tracking-wide text-slate-700 dark:text-navy-100">
-                            Top Hotels
-                        </h2>
-                        <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-
-                            <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                <div
-                                    class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                Action</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                else</a>
-                                        </li>
-                                    </ul>
-                                    <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                Link</a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="space-y-4">
-                        <div class="flex items-center justify-between space-x-2">
-                            <div class="flex items-center space-x-4">
-                                <img class="mask is-squircle h-12 w-12 object-cover object-center"
-                                    src="{{ asset('images/800x600.png') }}" alt="image" />
-                                <div class="space-y-1">
-                                    <a href="#"
-                                        class="font-medium text-slate-600 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Crowne
-                                        Plaza</a>
-                                    <div class="flex items-center space-x-3 text-xs">
-                                        <p class="flex items-center space-x-1">
-                                            <svg xmlns="http://www.w3.org/2000/svg"
-                                                class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
-                                                viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="1.5"
-                                                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                            </svg>
-                                            <span class="line-clamp-1">French</span>
-                                        </p>
-                                        <p class="flex shrink-0 items-center space-x-1">
-                                            <svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
-                                                class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
-                                                viewBox="0 0 24 24">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="1.5"
-                                                    d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
-                                            </svg>
-                                            <span>4.9</span>
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                            <p class="shrink-0">
-                                <span class="text-base font-medium text-slate-700 dark:text-navy-100">$100</span>
-                                <span class="text-xs text-slate-400 dark:text-navy-300">/day</span>
-                            </p>
-                        </div>
-                        <div class="flex items-center justify-between space-x-2">
-                            <div class="flex items-center space-x-4">
-                                <img class="mask is-squircle h-12 w-12 object-cover object-center"
-                                    src="{{ asset('images/800x600.png') }}" alt="image" />
-                                <div class="space-y-1">
-                                    <a href="#"
-                                        class="font-medium text-slate-600 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Emerald
-                                        Bay Inn.</a>
-                                    <div class="flex items-center space-x-3 text-xs">
-                                        <p class="flex items-center space-x-1">
-                                            <svg xmlns="http://www.w3.org/2000/svg"
-                                                class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
-                                                viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="1.5"
-                                                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                            </svg>
-                                            <span class="line-clamp-1">Italy</span>
-                                        </p>
-                                        <p class="flex shrink-0 items-center space-x-1">
-                                            <svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
-                                                class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
-                                                viewBox="0 0 24 24">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="1.5"
-                                                    d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
-                                            </svg>
-                                            <span>4.6</span>
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                            <p class="shrink-0">
-                                <span class="text-base font-medium text-slate-700 dark:text-navy-100">$80</span>
-                                <span class="text-xs text-slate-400 dark:text-navy-300">/day</span>
-                            </p>
-                        </div>
-                        <div class="flex items-center justify-between space-x-2">
-                            <div class="flex items-center space-x-4">
-                                <img class="mask is-squircle h-12 w-12 object-cover object-center"
-                                    src="{{ asset('images/800x600.png') }}" alt="image" />
-                                <div class="space-y-1">
-                                    <a href="#"
-                                        class="font-medium text-slate-600 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Hotel
-                                        Bliss.</a>
-                                    <div class="flex items-center space-x-3 text-xs">
-                                        <p class="flex items-center space-x-1">
-                                            <svg xmlns="http://www.w3.org/2000/svg"
-                                                class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
-                                                viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="1.5"
-                                                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                            </svg>
-                                            <span class="line-clamp-1">Room</span>
-                                        </p>
-                                        <p class="flex shrink-0 items-center space-x-1">
-                                            <svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
-                                                class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
-                                                viewBox="0 0 24 24">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="1.5"
-                                                    d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
-                                            </svg>
-                                            <span>4.4</span>
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                            <p class="shrink-0">
-                                <span class="text-base font-medium text-slate-700 dark:text-navy-100">$110</span>
-                                <span class="text-xs text-slate-400 dark:text-navy-300">/day</span>
-                            </p>
-                        </div>
-                        <div class="flex items-center justify-between space-x-2">
-                            <div class="flex items-center space-x-4">
-                                <img class="mask is-squircle h-12 w-12 object-cover object-center"
-                                    src="{{ asset('images/800x600.png') }}" alt="image" />
-                                <div class="space-y-1">
-                                    <a href="#"
-                                        class="font-medium text-slate-600 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Sunset
-                                        Lodge.</a>
-                                    <div class="flex items-center space-x-3 text-xs">
-                                        <p class="flex items-center space-x-1">
-                                            <svg xmlns="http://www.w3.org/2000/svg"
-                                                class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
-                                                viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="1.5"
-                                                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                            </svg>
-                                            <span class="line-clamp-1">Sydney</span>
-                                        </p>
-                                        <p class="flex shrink-0 items-center space-x-1">
-                                            <svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
-                                                class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
-                                                viewBox="0 0 24 24">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="1.5"
-                                                    d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
-                                            </svg>
-                                            <span>4.7</span>
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                            <p class="shrink-0">
-                                <span class="text-base font-medium text-slate-700 dark:text-navy-100">$180</span>
-                                <span class="text-xs text-slate-400 dark:text-navy-300">/day</span>
-                            </p>
-                        </div>
-                        <div class="flex items-center justify-between space-x-2">
-                            <div class="flex items-center space-x-4">
-                                <img class="mask is-squircle h-12 w-12 object-cover object-center"
-                                    src="{{ asset('images/800x600.png') }}" alt="image" />
-                                <div class="space-y-1">
-                                    <a href="#"
-                                        class="font-medium text-slate-600 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Hotel
-                                        Elite.</a>
-                                    <div class="flex items-center space-x-3 text-xs">
-                                        <p class="flex items-center space-x-1">
-                                            <svg xmlns="http://www.w3.org/2000/svg"
-                                                class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
-                                                viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="1.5"
-                                                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
-                                            </svg>
-                                            <span class="line-clamp-1">New York</span>
-                                        </p>
-                                        <p class="flex shrink-0 items-center space-x-1">
-                                            <svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
-                                                class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
-                                                viewBox="0 0 24 24">
-                                                <path stroke-linecap="round" stroke-linejoin="round"
-                                                    stroke-width="1.5"
-                                                    d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
-                                            </svg>
-                                            <span>4.6</span>
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                            <p class="shrink-0">
-                                <span class="text-base font-medium text-slate-700 dark:text-navy-100">$220</span>
-                                <span class="text-xs text-slate-400 dark:text-navy-300">/day</span>
-                            </p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="mt-4 sm:mt-5">
-                    <div class="flex items-center justify-between">
-                        <h2 class="text-base font-medium tracking-wide text-slate-700 dark:text-navy-100">
-                            My Plan
-                        </h2>
-                        <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                            class="inline-flex">
-                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                </svg>
-                            </button>
-
-                            <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                <div
-                                    class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                Action</a>
-                                        </li>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                else</a>
-                                        </li>
-                                    </ul>
-                                    <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                    <ul>
-                                        <li>
-                                            <a href="#"
-                                                class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                Link</a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mt-3 space-y-4">
-                        <div class="card p-2">
-                            <div class="flex space-x-4">
-                                <img class="h-18 w-18 rounded-lg object-cover object-center"
-                                    src="{{ asset('images/600x400.png') }}" alt="image" />
-                                <div>
-                                    <a href="#"
-                                        class="font-medium text-slate-700 outline-none transition-colors hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Picnic
-                                        on forest</a>
-                                    <p class="flex items-center space-x-1.5 text-xs">
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                        </svg>
-                                        <span class="line-clamp-1">22 May - 28 May</span>
-                                    </p>
-                                    <div class="mt-2 flex -space-x-2">
-                                        <div class="avatar h-6 w-6 hover:z-10">
-                                            <img class="rounded-full ring-2 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-                                        <div class="avatar h-6 w-6 hover:z-10">
-                                            <img class="rounded-full ring-2 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-                                        <div class="avatar h-6 w-6 hover:z-10">
-                                            <img class="rounded-full ring-2 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="card p-2">
-                            <div class="flex space-x-4">
-                                <img class="h-18 w-18 rounded-lg object-cover object-center"
-                                    src="{{ asset('images/600x400.png') }}" alt="image" />
-                                <div>
-                                    <a href="#"
-                                        class="font-medium text-slate-700 outline-none transition-colors hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Picnic
-                                        with Family</a>
-                                    <p class="flex items-center space-x-1.5 text-xs">
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                        </svg>
-                                        <span class="line-clamp-1">12 Jun - 16 Jun </span>
-                                    </p>
-                                    <div class="mt-2 flex -space-x-2">
-                                        <div class="avatar h-6 w-6 hover:z-10">
-                                            <img class="rounded-full ring-2 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-                                        <div class="avatar h-6 w-6 hover:z-10">
-                                            <img class="rounded-full ring-2 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-                                        <div class="avatar h-6 w-6 hover:z-10">
-                                            <img class="rounded-full ring-2 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="card p-2">
-                            <div class="flex space-x-4">
-                                <img class="h-18 w-18 rounded-lg object-cover object-center"
-                                    src="{{ asset('images/600x400.png') }}" alt="image" />
-                                <div>
-                                    <a href="#"
-                                        class="font-medium text-slate-700 outline-none transition-colors hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Turtaruga
-                                        campy</a>
-                                    <p class="flex items-center space-x-1.5 text-xs">
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                        </svg>
-                                        <span class="line-clamp-1">03 Mar - 05 Mar </span>
-                                    </p>
-                                    <div class="mt-2 flex -space-x-2">
-                                        <div class="avatar h-6 w-6 hover:z-10">
-                                            <img class="rounded-full ring-2 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-                                        <div class="avatar h-6 w-6 hover:z-10">
-                                            <img class="rounded-full ring-2 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-                                        <div class="avatar h-6 w-6 hover:z-10">
-                                            <img class="rounded-full ring-2 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="card p-2">
-                            <div class="flex space-x-4">
-                                <img class="h-18 w-18 rounded-lg object-cover object-center"
-                                    src="{{ asset('images/600x400.png') }}" alt="image" />
-                                <div>
-                                    <a href="#"
-                                        class="font-medium text-slate-700 outline-none transition-colors hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Gioc
-                                        waterfall</a>
-                                    <p class="flex items-center space-x-1.5 text-xs">
-                                        <svg xmlns="http://www.w3.org/2000/svg"
-                                            class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
-                                            viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                        </svg>
-                                        <span class="line-clamp-1">08 Aug - 12 Aug </span>
-                                    </p>
-                                    <div class="mt-2 flex -space-x-2">
-                                        <div class="avatar h-6 w-6 hover:z-10">
-                                            <img class="rounded-full ring-2 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-                                        <div class="avatar h-6 w-6 hover:z-10">
-                                            <img class="rounded-full ring-2 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-                                        <div class="avatar h-6 w-6 hover:z-10">
-                                            <img class="rounded-full ring-2 ring-white dark:ring-navy-700"
-                                                src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-</x-app-layout>

resources/views/pages/components-accordion.blade.php

-<x-app-layout title="Accordion Component" is-sidebar-open="true" is-header-blur="true">
-    <!-- Main Content Wrapper -->
-    <main class="main-content w-full px-[var(--margin-x)] pb-8">
-        <div class="flex items-center space-x-4 py-5 lg:py-6">
-            <h2 class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl">
-                Accordion
-            </h2>
-            <div class="hidden h-full py-1 sm:flex">
-                <div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
-            </div>
-            <ul class="hidden flex-wrap items-center space-x-2 sm:flex">
-                <li class="flex items-center space-x-2">
-                    <a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-                        href="#">Components</a>
-                    <svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                    </svg>
-                </li>
-                <li>Accordion</li>
-            </ul>
-        </div>
-        <div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
-            <!-- Basic Accordion -->
-            <div class="card px-4 pb-4 sm:px-5">
-                <div class="my-3 flex h-8 items-center justify-between">
-                    <h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                        Basic Accordion
-                    </h2>
-                    <label class="inline-flex items-center space-x-2">
-                        <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                        <input @change="helpers.toggleCode"
-                            class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                            type="checkbox" />
-                    </label>
-                </div>
-                <div class="max-w-xl">
-                    <p>
-                        The accordion component allows the user to show and hide
-                        sections of related content on a page. Check out code for detail
-                        of usage.
-                    </p>
-                    <div x-data="{ expandedItem: null }" class="mt-5 flex flex-col">
-                        <div x-data="accordionItem('item-1')">
-                            <div @click="expanded = !expanded"
-                                class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100">
-                                <p>Accordion Item 1</p>
-                                <div :class="expanded && '-rotate-180'"
-                                    class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300">
-                                    <i class="fas fa-chevron-down"></i>
-                                </div>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div>
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="flex space-x-2 pt-3">
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 1
-                                        </a>
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 2
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div x-data="accordionItem('item-2')">
-                            <div @click="expanded = !expanded"
-                                class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100">
-                                <p>Accordion Item 2</p>
-                                <div :class="expanded && '-rotate-180'"
-                                    class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300">
-                                    <i class="fas fa-chevron-down"></i>
-                                </div>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div>
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="flex space-x-2 pt-3">
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 1
-                                        </a>
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 2
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div x-data="accordionItem('item-3')">
-                            <div @click="expanded = !expanded"
-                                class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100">
-                                <p>Accordion Item 3</p>
-                                <div :class="expanded && '-rotate-180'"
-                                    class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300">
-                                    <i class="fas fa-chevron-down"></i>
-                                </div>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div>
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="flex space-x-2 pt-3">
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 1
-                                        </a>
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 2
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="code-wrapper hidden pt-4">
-                    <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-                <code class="language-html" x-ignore>
-  &lt;div x-data=&quot;{expandedItem:null}&quot; class=&quot;flex flex-col&quot;&gt;&#13;&#10;    &lt;div x-data=&quot;accordionItem(&apos;item-1&apos;)&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Accordion Item 1&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div x-data=&quot;accordionItem(&apos;item-2&apos;)&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Accordion Item 2&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div x-data=&quot;accordionItem(&apos;item-3&apos;)&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Accordion Item 3&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;
-                </code>
-              </pre>
-                </div>
-            </div>
-
-            <!-- Border Bottom -->
-            <div class="card px-4 pb-4 sm:px-5">
-                <div class="my-3 flex h-8 items-center justify-between">
-                    <h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                        Border Bottom
-                    </h2>
-                    <label class="inline-flex items-center space-x-2">
-                        <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                        <input @change="helpers.toggleCode"
-                            class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                            type="checkbox" />
-                    </label>
-                </div>
-                <div class="max-w-xl">
-                    <p>
-                        The accordion component allows the user to show and hide
-                        sections of related content on a page. Check out code for detail
-                        of usage.
-                    </p>
-                    <div x-data="{ expandedItem: null }"
-                        class="mt-5 flex flex-col divide-y divide-slate-150 dark:divide-navy-500">
-                        <div x-data="accordionItem('item-1')">
-                            <div @click="expanded = !expanded"
-                                class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100">
-                                <p>Accordion Item 1</p>
-                                <div :class="expanded && '-rotate-180'"
-                                    class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300">
-                                    <i class="fas fa-chevron-down"></i>
-                                </div>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div class="pb-4">
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="flex space-x-2 pt-3">
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 1
-                                        </a>
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 2
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div x-data="accordionItem('item-2')">
-                            <div @click="expanded = !expanded"
-                                class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100">
-                                <p>Accordion Item 2</p>
-                                <div :class="expanded && '-rotate-180'"
-                                    class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300">
-                                    <i class="fas fa-chevron-down"></i>
-                                </div>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div class="pb-4">
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="flex space-x-2 pt-3">
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 1
-                                        </a>
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 2
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div x-data="accordionItem('item-3')">
-                            <div @click="expanded = !expanded"
-                                class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100">
-                                <p>Accordion Item 3</p>
-                                <div :class="expanded && '-rotate-180'"
-                                    class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300">
-                                    <i class="fas fa-chevron-down"></i>
-                                </div>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div class="pb-4">
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="flex space-x-2 pt-3">
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 1
-                                        </a>
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 2
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="code-wrapper hidden pt-4">
-                    <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-                <code class="language-html" x-ignore>
-  &lt;div&#13;&#10;    x-data=&quot;{expandedItem:null}&quot;&#13;&#10;    class=&quot;flex flex-col divide-y divide-slate-150 dark:divide-navy-500&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div x-data=&quot;accordionItem(&apos;item-1&apos;)&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Accordion Item 1&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;pb-4&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div x-data=&quot;accordionItem(&apos;item-2&apos;)&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Accordion Item 2&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;pb-4&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div x-data=&quot;accordionItem(&apos;item-3&apos;)&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Accordion Item 3&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;pb-4&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;
-                </code>
-              </pre>
-                </div>
-            </div>
-
-            <!-- Full Bordered -->
-            <div class="card px-4 pb-4 sm:px-5">
-                <div class="my-3 flex h-8 items-center justify-between">
-                    <h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                        Full Bordered
-                    </h2>
-                    <label class="inline-flex items-center space-x-2">
-                        <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                        <input @change="helpers.toggleCode"
-                            class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                            type="checkbox" />
-                    </label>
-                </div>
-                <div class="max-w-xl">
-                    <p>
-                        The accordion component allows the user to show and hide
-                        sections of related content on a page. Check out code for detail
-                        of usage.
-                    </p>
-                    <div x-data="{ expandedItem: null }"
-                        class="mt-5 flex flex-col divide-y divide-slate-150 rounded-lg border border-slate-150 dark:divide-navy-500 dark:border-navy-500">
-                        <div x-data="accordionItem('item-1')">
-                            <div @click="expanded = !expanded"
-                                class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5">
-                                <p>Accordion Item 1</p>
-                                <div :class="expanded && '-rotate-180'"
-                                    class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300">
-                                    <i class="fas fa-chevron-down"></i>
-                                </div>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div class="px-4 pb-4 sm:px-5">
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="flex space-x-2 pt-3">
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 1
-                                        </a>
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 2
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div x-data="accordionItem('item-2')">
-                            <div @click="expanded = !expanded"
-                                class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5">
-                                <p>Accordion Item 2</p>
-                                <div :class="expanded && '-rotate-180'"
-                                    class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300">
-                                    <i class="fas fa-chevron-down"></i>
-                                </div>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div class="px-4 pb-4 sm:px-5">
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="flex space-x-2 pt-3">
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 1
-                                        </a>
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 2
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div x-data="accordionItem('item-3')">
-                            <div @click="expanded = !expanded"
-                                class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5">
-                                <p>Accordion Item 3</p>
-                                <div :class="expanded && '-rotate-180'"
-                                    class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300">
-                                    <i class="fas fa-chevron-down"></i>
-                                </div>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div class="px-4 pb-4 sm:px-5">
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="flex space-x-2 pt-3">
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 1
-                                        </a>
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 2
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="code-wrapper hidden pt-4">
-                    <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-                <code class="language-html" x-ignore>
-  &lt;div&#13;&#10;    x-data=&quot;{expandedItem:null}&quot;&#13;&#10;    class=&quot;flex flex-col divide-y divide-slate-150 rounded-lg border border-slate-150 dark:divide-navy-500 dark:border-navy-500&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div x-data=&quot;accordionItem(&apos;item-1&apos;)&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Accordion Item 1&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 pb-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div x-data=&quot;accordionItem(&apos;item-2&apos;)&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Accordion Item 2&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 pb-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div x-data=&quot;accordionItem(&apos;item-3&apos;)&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Accordion Item 3&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 pb-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                </code>
-              </pre>
-                </div>
-            </div>
-
-            <!-- Divided Items -->
-            <div class="card px-4 pb-4 sm:px-5">
-                <div class="my-3 flex h-8 items-center justify-between">
-                    <h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                        Divided Items
-                    </h2>
-                    <label class="inline-flex items-center space-x-2">
-                        <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                        <input @change="helpers.toggleCode"
-                            class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                            type="checkbox" />
-                    </label>
-                </div>
-                <div class="max-w-xl">
-                    <p>
-                        The accordion component allows the user to show and hide
-                        sections of related content on a page. Check out code for detail
-                        of usage.
-                    </p>
-                    <div x-data="{ expandedItem: null }"
-                        class="mt-5 flex flex-col space-y-4 rounded-lg sm:space-y-5 lg:space-y-6">
-                        <div x-data="accordionItem('item-1')" class="rounded-lg border border-slate-150 dark:border-navy-500">
-                            <div @click="expanded = !expanded"
-                                class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5">
-                                <p>Accordion Item 1</p>
-                                <div :class="expanded && '-rotate-180'"
-                                    class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300">
-                                    <i class="fas fa-chevron-down"></i>
-                                </div>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div class="px-4 pb-4 sm:px-5">
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="mt-4 flex justify-between">
-                                        <div class="flex flex-wrap -space-x-2">
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <div
-                                                    class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
-                                                    jd
-                                                </div>
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-                                        </div>
-                                        <button
-                                            class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M7 11l5-5m0 0l5 5m-5-5v12" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div x-data="accordionItem('item-2')" class="rounded-lg border border-slate-150 dark:border-navy-500">
-                            <div @click="expanded = !expanded"
-                                class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5">
-                                <p>Accordion Item 2</p>
-                                <div :class="expanded && '-rotate-180'"
-                                    class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300">
-                                    <i class="fas fa-chevron-down"></i>
-                                </div>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div class="px-4 pb-4 sm:px-5">
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="mt-4 flex justify-between">
-                                        <div class="flex flex-wrap -space-x-2">
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <div
-                                                    class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
-                                                    jd
-                                                </div>
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-                                        </div>
-                                        <button
-                                            class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M7 11l5-5m0 0l5 5m-5-5v12" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div x-data="accordionItem('item-3')" class="rounded-lg border border-slate-150 dark:border-navy-500">
-                            <div @click="expanded = !expanded"
-                                class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5">
-                                <p>Accordion Item 3</p>
-                                <div :class="expanded && '-rotate-180'"
-                                    class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300">
-                                    <i class="fas fa-chevron-down"></i>
-                                </div>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div class="px-4 pb-4 sm:px-5">
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="mt-4 flex justify-between">
-                                        <div class="flex flex-wrap -space-x-2">
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <div
-                                                    class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
-                                                    jd
-                                                </div>
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-                                        </div>
-                                        <button
-                                            class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M7 11l5-5m0 0l5 5m-5-5v12" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="code-wrapper hidden pt-4">
-                    <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-                <code class="language-html" x-ignore>
-  &lt;div&#13;&#10;    x-data=&quot;{expandedItem:null}&quot;&#13;&#10;    class=&quot;flex flex-col space-y-4 rounded-lg sm:space-y-5 lg:space-y-6&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div&#13;&#10;      x-data=&quot;accordionItem(&apos;item-1&apos;)&quot;&#13;&#10;      class=&quot;rounded-lg border border-slate-150 dark:border-navy-500&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Accordion Item 1&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 pb-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;mt-4 flex justify-between&quot;&gt;&#13;&#10;            &lt;div class=&quot;flex flex-wrap -space-x-2&quot;&gt;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;div&#13;&#10;                  class=&quot;is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700&quot;&#13;&#10;                &gt;&#13;&#10;                  jd&#13;&#10;                &lt;/div&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;            &lt;button&#13;&#10;              class=&quot;btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;svg&#13;&#10;                xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;                class=&quot;h-5 w-5 rotate-45&quot;&#13;&#10;                fill=&quot;none&quot;&#13;&#10;                viewBox=&quot;0 0 24 24&quot;&#13;&#10;                stroke=&quot;currentColor&quot;&#13;&#10;              &gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  stroke-width=&quot;2&quot;&#13;&#10;                  d=&quot;M7 11l5-5m0 0l5 5m-5-5v12&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/svg&gt;&#13;&#10;            &lt;/button&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div&#13;&#10;      x-data=&quot;accordionItem(&apos;item-2&apos;)&quot;&#13;&#10;      class=&quot;rounded-lg border border-slate-150 dark:border-navy-500&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Accordion Item 2&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 pb-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;mt-4 flex justify-between&quot;&gt;&#13;&#10;            &lt;div class=&quot;flex flex-wrap -space-x-2&quot;&gt;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;div&#13;&#10;                  class=&quot;is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700&quot;&#13;&#10;                &gt;&#13;&#10;                  jd&#13;&#10;                &lt;/div&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;            &lt;button&#13;&#10;              class=&quot;btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;svg&#13;&#10;                xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;                class=&quot;h-5 w-5 rotate-45&quot;&#13;&#10;                fill=&quot;none&quot;&#13;&#10;                viewBox=&quot;0 0 24 24&quot;&#13;&#10;                stroke=&quot;currentColor&quot;&#13;&#10;              &gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  stroke-width=&quot;2&quot;&#13;&#10;                  d=&quot;M7 11l5-5m0 0l5 5m-5-5v12&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/svg&gt;&#13;&#10;            &lt;/button&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div&#13;&#10;      x-data=&quot;accordionItem(&apos;item-3&apos;)&quot;&#13;&#10;      class=&quot;rounded-lg border border-slate-150 dark:border-navy-500&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Accordion Item 3&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 pb-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;mt-4 flex justify-between&quot;&gt;&#13;&#10;            &lt;div class=&quot;flex flex-wrap -space-x-2&quot;&gt;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;div&#13;&#10;                  class=&quot;is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700&quot;&#13;&#10;                &gt;&#13;&#10;                  jd&#13;&#10;                &lt;/div&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;            &lt;button&#13;&#10;              class=&quot;btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;svg&#13;&#10;                xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;                class=&quot;h-5 w-5 rotate-45&quot;&#13;&#10;                fill=&quot;none&quot;&#13;&#10;                viewBox=&quot;0 0 24 24&quot;&#13;&#10;                stroke=&quot;currentColor&quot;&#13;&#10;              &gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  stroke-width=&quot;2&quot;&#13;&#10;                  d=&quot;M7 11l5-5m0 0l5 5m-5-5v12&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/svg&gt;&#13;&#10;            &lt;/button&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                </code>
-              </pre>
-                </div>
-            </div>
-
-            <!-- Primary Accordion -->
-            <div class="card px-4 pb-4 sm:px-5">
-                <div class="my-3 flex h-8 items-center justify-between">
-                    <h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                        Primary Accordion
-                    </h2>
-                    <label class="inline-flex items-center space-x-2">
-                        <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                        <input @change="helpers.toggleCode"
-                            class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                            type="checkbox" />
-                    </label>
-                </div>
-                <div class="max-w-xl">
-                    <p>
-                        The accordion component allows the user to show and hide
-                        sections of related content on a page. Check out code for detail
-                        of usage.
-                    </p>
-                    <div x-data="{ expandedItem: null }"
-                        class="mt-5 flex flex-col divide-y divide-indigo-400 overflow-hidden rounded-lg border border-primary dark:border-accent">
-                        <div x-data="accordionItem('item-1')">
-                            <div @click="expanded = !expanded"
-                                class="flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5">
-                                <p>Accordion Item 1</p>
-                                <div :class="expanded && '-rotate-180'"
-                                    class="text-sm font-normal leading-none text-indigo-100 transition-transform duration-300">
-                                    <i class="fas fa-chevron-down"></i>
-                                </div>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div class="px-4 py-4 sm:px-5">
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="flex space-x-2 pt-3">
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 1
-                                        </a>
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 2
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div x-data="accordionItem('item-2')">
-                            <div @click="expanded = !expanded"
-                                class="flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5">
-                                <p>Accordion Item 2</p>
-                                <div :class="expanded && '-rotate-180'"
-                                    class="text-sm font-normal leading-none text-indigo-100 transition-transform duration-300">
-                                    <i class="fas fa-chevron-down"></i>
-                                </div>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div class="px-4 py-4 sm:px-5">
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="flex space-x-2 pt-3">
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 1
-                                        </a>
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 2
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div x-data="accordionItem('item-3')">
-                            <div @click="expanded = !expanded"
-                                class="flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5">
-                                <p>Accordion Item 3</p>
-                                <div :class="expanded && '-rotate-180'"
-                                    class="text-sm font-normal leading-none text-indigo-100 transition-transform duration-300">
-                                    <i class="fas fa-chevron-down"></i>
-                                </div>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div class="px-4 py-4 sm:px-5">
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="flex space-x-2 pt-3">
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 1
-                                        </a>
-                                        <a href="#"
-                                            class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light">
-                                            Tag 2
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="code-wrapper hidden pt-4">
-                    <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-                <code class="language-html" x-ignore>
-  &lt;div&#13;&#10;    x-data=&quot;{expandedItem:null}&quot;&#13;&#10;    class=&quot;flex flex-col divide-y divide-indigo-400 overflow-hidden rounded-lg border border-primary dark:border-accent&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div x-data=&quot;accordionItem(&apos;item-1&apos;)&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Accordion Item 1&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-indigo-100 transition-transform duration-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 py-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div x-data=&quot;accordionItem(&apos;item-2&apos;)&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Accordion Item 2&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-indigo-100 transition-transform duration-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 py-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div x-data=&quot;accordionItem(&apos;item-3&apos;)&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Accordion Item 3&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-indigo-100 transition-transform duration-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 py-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                </code>
-              </pre>
-                </div>
-            </div>
-
-            <!-- Advanced Accordion -->
-            <div class="card px-4 pb-4 sm:px-5">
-                <div class="my-3 flex h-8 items-center justify-between">
-                    <h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                        Advanced Accordion
-                    </h2>
-                    <label class="inline-flex items-center space-x-2">
-                        <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                        <input @change="helpers.toggleCode"
-                            class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                            type="checkbox" />
-                    </label>
-                </div>
-                <div class="max-w-xl">
-                    <p>
-                        The accordion component allows the user to show and hide
-                        sections of related content on a page. Check out code for detail
-                        of usage.
-                    </p>
-                    <div x-data="{ expandedItem: null }" class="mt-5 flex flex-col space-y-4 sm:space-y-5 lg:space-y-6">
-                        <div x-data="accordionItem('item-1')"
-                            class="overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500">
-                            <div
-                                class="flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5">
-                                <div class="flex items-center space-x-3.5 tracking-wide outline-none transition-all">
-                                    <div class="avatar h-10 w-10">
-                                        <img class="rounded-full" src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                    </div>
-                                    <div>
-                                        <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
-                                            Simon Tods
-                                        </p>
-                                        <p class="text-xs text-slate-500 dark:text-navy-300">
-                                            Web Developer
-                                        </p>
-                                    </div>
-                                </div>
-                                <button @click="expanded = !expanded"
-                                    class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <i :class="expanded && '-rotate-180'"
-                                        class="fas fa-chevron-down text-sm transition-transform"></i>
-                                </button>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div class="px-4 py-4 sm:px-5">
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="mt-4 flex justify-between">
-                                        <div class="flex flex-wrap -space-x-2">
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <div
-                                                    class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
-                                                    jd
-                                                </div>
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-                                        </div>
-                                        <button
-                                            class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M7 11l5-5m0 0l5 5m-5-5v12" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div x-data="accordionItem('item-2')"
-                            class="overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500">
-                            <div
-                                class="flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5">
-                                <div class="flex items-center space-x-3.5 tracking-wide outline-none transition-all">
-                                    <div class="avatar h-10 w-10">
-                                        <div class="is-initial rounded-full bg-warning uppercase text-white">
-                                            KG
-                                        </div>
-                                    </div>
-                                    <div>
-                                        <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
-                                            Konnor Guzman
-                                        </p>
-                                        <p class="text-xs text-slate-500 dark:text-navy-300">
-                                            Frontend Developer
-                                        </p>
-                                    </div>
-                                </div>
-                                <button @click="expanded = !expanded"
-                                    class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <i :class="expanded && '-rotate-180'"
-                                        class="fas fa-chevron-down text-sm transition-transform"></i>
-                                </button>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div class="px-4 py-4 sm:px-5">
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="mt-4 flex justify-between">
-                                        <div class="flex flex-wrap -space-x-2">
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <div
-                                                    class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
-                                                    jd
-                                                </div>
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-                                        </div>
-                                        <button
-                                            class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M7 11l5-5m0 0l5 5m-5-5v12" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div x-data="accordionItem('item-3')"
-                            class="overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500">
-                            <div
-                                class="flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5">
-                                <div class="flex items-center space-x-3.5 tracking-wide outline-none transition-all">
-                                    <div class="avatar h-10 w-10">
-                                        <img class="rounded-full" src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                    </div>
-                                    <div>
-                                        <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
-                                            Derrick Simmons
-                                        </p>
-                                        <p class="text-xs text-slate-500 dark:text-navy-300">
-                                            UI/UX Designer
-                                        </p>
-                                    </div>
-                                </div>
-                                <button @click="expanded = !expanded"
-                                    class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <i :class="expanded && '-rotate-180'"
-                                        class="fas fa-chevron-down text-sm transition-transform"></i>
-                                </button>
-                            </div>
-                            <div x-collapse x-show="expanded">
-                                <div class="px-4 py-4 sm:px-5">
-                                    <p>
-                                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                                        elit. Commodi earum magni officiis possimus repellendus.
-                                        Accusantium adipisci aliquid praesentium quaerat
-                                        voluptate.
-                                    </p>
-                                    <div class="mt-4 flex justify-between">
-                                        <div class="flex flex-wrap -space-x-2">
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <div
-                                                    class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
-                                                    jd
-                                                </div>
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-
-                                            <div class="avatar h-7 w-7 hover:z-10">
-                                                <img class="rounded-full ring ring-white dark:ring-navy-700"
-                                                    src="{{asset('images/200x200.png')}}" alt="avatar" />
-                                            </div>
-                                        </div>
-                                        <button
-                                            class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45"
-                                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                                    d="M7 11l5-5m0 0l5 5m-5-5v12" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="code-wrapper hidden pt-4">
-                    <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-                <code class="language-html" x-ignore>
-  &lt;div&#13;&#10;    x-data=&quot;{expandedItem:null}&quot;&#13;&#10;    class=&quot;flex flex-col space-y-4 sm:space-y-5 lg:space-y-6&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div&#13;&#10;      x-data=&quot;accordionItem(&apos;item-1&apos;)&quot;&#13;&#10;      class=&quot;overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;div&#13;&#10;        class=&quot;flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;div&#13;&#10;          class=&quot;flex items-center space-x-3.5 tracking-wide outline-none transition-all&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;div class=&quot;avatar h-10 w-10&quot;&gt;&#13;&#10;            &lt;img&#13;&#10;              class=&quot;rounded-full&quot;&#13;&#10;              src=&quot;images/200x200.png&quot;&#13;&#10;              alt=&quot;avatar&quot;&#13;&#10;            /&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;          &lt;div&gt;&#13;&#10;            &lt;p class=&quot;text-slate-700 line-clamp-1 dark:text-navy-100&quot;&gt;&#13;&#10;              Simon Tods&#13;&#10;            &lt;/p&gt;&#13;&#10;            &lt;p class=&quot;text-xs text-slate-500 dark:text-navy-300&quot;&gt;&#13;&#10;              Web Developer&#13;&#10;            &lt;/p&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;        &lt;button&#13;&#10;          @click=&quot;expanded = !expanded&quot;&#13;&#10;          class=&quot;btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i&#13;&#10;            :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;            class=&quot;fas fa-chevron-down text-sm transition-transform&quot;&#13;&#10;          &gt;&lt;/i&gt;&#13;&#10;        &lt;/button&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 py-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;mt-4 flex justify-between&quot;&gt;&#13;&#10;            &lt;div class=&quot;flex flex-wrap -space-x-2&quot;&gt;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;div&#13;&#10;                  class=&quot;is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700&quot;&#13;&#10;                &gt;&#13;&#10;                  jd&#13;&#10;                &lt;/div&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;            &lt;button&#13;&#10;              class=&quot;btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;svg&#13;&#10;                xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;                class=&quot;h-5 w-5 rotate-45&quot;&#13;&#10;                fill=&quot;none&quot;&#13;&#10;                viewBox=&quot;0 0 24 24&quot;&#13;&#10;                stroke=&quot;currentColor&quot;&#13;&#10;              &gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  stroke-width=&quot;2&quot;&#13;&#10;                  d=&quot;M7 11l5-5m0 0l5 5m-5-5v12&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/svg&gt;&#13;&#10;            &lt;/button&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div&#13;&#10;      x-data=&quot;accordionItem(&apos;item-2&apos;)&quot;&#13;&#10;      class=&quot;overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;div&#13;&#10;        class=&quot;flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;div&#13;&#10;          class=&quot;flex items-center space-x-3.5 tracking-wide outline-none transition-all&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;div class=&quot;avatar h-10 w-10&quot;&gt;&#13;&#10;            &lt;div&#13;&#10;              class=&quot;is-initial rounded-full bg-warning uppercase text-white&quot;&#13;&#10;            &gt;&#13;&#10;              KG&#13;&#10;            &lt;/div&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;          &lt;div&gt;&#13;&#10;            &lt;p class=&quot;text-slate-700 line-clamp-1 dark:text-navy-100&quot;&gt;&#13;&#10;              Konnor Guzman&#13;&#10;            &lt;/p&gt;&#13;&#10;            &lt;p class=&quot;text-xs text-slate-500 dark:text-navy-300&quot;&gt;&#13;&#10;              Frontend Developer&#13;&#10;            &lt;/p&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;        &lt;button&#13;&#10;          @click=&quot;expanded = !expanded&quot;&#13;&#10;          class=&quot;btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i&#13;&#10;            :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;            class=&quot;fas fa-chevron-down text-sm transition-transform&quot;&#13;&#10;          &gt;&lt;/i&gt;&#13;&#10;        &lt;/button&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 py-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;mt-4 flex justify-between&quot;&gt;&#13;&#10;            &lt;div class=&quot;flex flex-wrap -space-x-2&quot;&gt;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;div&#13;&#10;                  class=&quot;is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700&quot;&#13;&#10;                &gt;&#13;&#10;                  jd&#13;&#10;                &lt;/div&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;            &lt;button&#13;&#10;              class=&quot;btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;svg&#13;&#10;                xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;                class=&quot;h-5 w-5 rotate-45&quot;&#13;&#10;                fill=&quot;none&quot;&#13;&#10;                viewBox=&quot;0 0 24 24&quot;&#13;&#10;                stroke=&quot;currentColor&quot;&#13;&#10;              &gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  stroke-width=&quot;2&quot;&#13;&#10;                  d=&quot;M7 11l5-5m0 0l5 5m-5-5v12&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/svg&gt;&#13;&#10;            &lt;/button&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div&#13;&#10;      x-data=&quot;accordionItem(&apos;item-3&apos;)&quot;&#13;&#10;      class=&quot;overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;div&#13;&#10;        class=&quot;flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;div&#13;&#10;          class=&quot;flex items-center space-x-3.5 tracking-wide outline-none transition-all&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;div class=&quot;avatar h-10 w-10&quot;&gt;&#13;&#10;            &lt;img&#13;&#10;              class=&quot;rounded-full&quot;&#13;&#10;              src=&quot;images/200x200.png&quot;&#13;&#10;              alt=&quot;avatar&quot;&#13;&#10;            /&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;          &lt;div&gt;&#13;&#10;            &lt;p class=&quot;text-slate-700 line-clamp-1 dark:text-navy-100&quot;&gt;&#13;&#10;              Derrick Simmons&#13;&#10;            &lt;/p&gt;&#13;&#10;            &lt;p class=&quot;text-xs text-slate-500 dark:text-navy-300&quot;&gt;&#13;&#10;              UI/UX Designer&#13;&#10;            &lt;/p&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;        &lt;button&#13;&#10;          @click=&quot;expanded = !expanded&quot;&#13;&#10;          class=&quot;btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i&#13;&#10;            :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;            class=&quot;fas fa-chevron-down text-sm transition-transform&quot;&#13;&#10;          &gt;&lt;/i&gt;&#13;&#10;        &lt;/button&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 py-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;mt-4 flex justify-between&quot;&gt;&#13;&#10;            &lt;div class=&quot;flex flex-wrap -space-x-2&quot;&gt;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;div&#13;&#10;                  class=&quot;is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700&quot;&#13;&#10;                &gt;&#13;&#10;                  jd&#13;&#10;                &lt;/div&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;            &lt;button&#13;&#10;              class=&quot;btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;svg&#13;&#10;                xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;                class=&quot;h-5 w-5 rotate-45&quot;&#13;&#10;                fill=&quot;none&quot;&#13;&#10;                viewBox=&quot;0 0 24 24&quot;&#13;&#10;                stroke=&quot;currentColor&quot;&#13;&#10;              &gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  stroke-width=&quot;2&quot;&#13;&#10;                  d=&quot;M7 11l5-5m0 0l5 5m-5-5v12&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/svg&gt;&#13;&#10;            &lt;/button&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                </code>
-              </pre>
-                </div>
-            </div>
-        </div>
-    </main>
-</x-app-layout>

resources/views/pages/components-apexchart.blade.php

-<x-app-layout title="Apexchart Component" is-sidebar-open="true" is-header-blur="true">
-    <main class="main-content w-full px-[var(--margin-x)] pb-8">
-        <div class="flex items-center space-x-4 py-5 lg:py-6">
-          <h2
-            class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
-          >
-            Apexcharts
-          </h2>
-          <div class="hidden h-full py-1 sm:flex">
-            <div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
-          </div>
-          <ul class="hidden flex-wrap items-center space-x-2 sm:flex">
-            <li class="flex items-center space-x-2">
-              <a
-                class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-                href="#"
-                >Components</a
-              >
-              <svg
-                x-ignore
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-            </li>
-            <li>Apexcharts</li>
-          </ul>
-        </div>
-        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:gap-6">
-          <div class="space-y-4 sm:space-y-5 lg:space-y-6">
-            <!-- Area Chart -->
-            <div class="card px-4 pb-4 sm:px-5">
-              <div class="my-3 flex h-8 items-center justify-between">
-                <h2
-                  class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-                >
-                  Area Chart
-                </h2>
-              </div>
-              <div class="max-w-xl">
-                <p>
-                  <a
-                    href="https://github.com/apexcharts/apexcharts.js"
-                    class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-                    >Apexcharts</a
-                  >
-                  a modern JavaScript charting library that allows you to build
-                  interactive data visualizations with simple API and many
-                  samples. Check out code for detail of usage.
-                </p>
-                <div class="mt-5">
-                  <div>
-                    <div
-                      x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart1); $el._x_chart.render() });"
-                    ></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Bar Chart -->
-            <div class="card px-4 pb-4 sm:px-5">
-              <div class="my-3 flex h-8 items-center justify-between">
-                <h2
-                  class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-                >
-                  Bar Chart
-                </h2>
-              </div>
-              <div class="max-w-xl">
-                <p>
-                  <a
-                    href="https://github.com/apexcharts/apexcharts.js"
-                    class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-                    >Apexcharts</a
-                  >
-                  a modern JavaScript charting library that allows you to build
-                  interactive data visualizations with simple API and many
-                  samples. Check out code for detail of usage.
-                </p>
-                <div class="mt-5">
-                  <div>
-                    <div
-                      x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart3); $el._x_chart.render() });"
-                    ></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Candlestick Chart -->
-            <div class="card px-4 pb-4 sm:px-5">
-              <div class="my-3 flex h-8 items-center justify-between">
-                <h2
-                  class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-                >
-                  Candlestick
-                </h2>
-              </div>
-              <div class="max-w-xl">
-                <p>
-                  <a
-                    href="https://github.com/apexcharts/apexcharts.js"
-                    class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-                    >Apexcharts</a
-                  >
-                  a modern JavaScript charting library that allows you to build
-                  interactive data visualizations with simple API and many
-                  samples. Check out code for detail of usage.
-                </p>
-                <div class="mt-5">
-                  <div>
-                    <div
-                      x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart5); $el._x_chart.render() });"
-                    ></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Bubble Chart -->
-            <div class="card px-4 pb-4 sm:px-5">
-              <div class="my-3 flex h-8 items-center justify-between">
-                <h2
-                  class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-                >
-                  Bubble Chart
-                </h2>
-              </div>
-              <div class="max-w-xl">
-                <p>
-                  <a
-                    href="https://github.com/apexcharts/apexcharts.js"
-                    class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-                    >Apexcharts</a
-                  >
-                  a modern JavaScript charting library that allows you to build
-                  interactive data visualizations with simple API and many
-                  samples. Check out code for detail of usage.
-                </p>
-                <div class="mt-5">
-                  <div>
-                    <div
-                      x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart7); $el._x_chart.render() });"
-                    ></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Radar Chart -->
-            <div class="card px-4 pb-4 sm:px-5">
-              <div class="my-3 flex h-8 items-center justify-between">
-                <h2
-                  class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-                >
-                  Radar Chart
-                </h2>
-              </div>
-              <div class="max-w-xl">
-                <p>
-                  <a
-                    href="https://github.com/apexcharts/apexcharts.js"
-                    class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-                    >Apexcharts</a
-                  >
-                  a modern JavaScript charting library that allows you to build
-                  interactive data visualizations with simple API and many
-                  samples. Check out code for detail of usage.
-                </p>
-                <div class="mt-5">
-                  <div>
-                    <div
-                      x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart9); $el._x_chart.render() });"
-                    ></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="space-y-4 sm:space-y-5 lg:space-y-6">
-            <!-- Area Chart -->
-            <div class="card px-4 pb-4 sm:px-5">
-              <div class="my-3 flex h-8 items-center justify-between">
-                <h2
-                  class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-                >
-                  Area Chart
-                </h2>
-              </div>
-              <div class="max-w-xl">
-                <p>
-                  <a
-                    href="https://github.com/apexcharts/apexcharts.js"
-                    class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-                    >Apexcharts</a
-                  >
-                  a modern JavaScript charting library that allows you to build
-                  interactive data visualizations with simple API and many
-                  samples. Check out code for detail of usage.
-                </p>
-                <div class="mt-5">
-                  <div>
-                    <div
-                      x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart2); $el._x_chart.render() });"
-                    ></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Line Chart -->
-            <div class="card px-4 pb-4 sm:px-5">
-              <div class="my-3 flex h-8 items-center justify-between">
-                <h2
-                  class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-                >
-                  Line Chart
-                </h2>
-              </div>
-              <div class="max-w-xl">
-                <p>
-                  <a
-                    href="https://github.com/apexcharts/apexcharts.js"
-                    class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-                    >Apexcharts</a
-                  >
-                  a modern JavaScript charting library that allows you to build
-                  interactive data visualizations with simple API and many
-                  samples. Check out code for detail of usage.
-                </p>
-                <div class="mt-5">
-                  <div>
-                    <div
-                      x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart4); $el._x_chart.render() });"
-                    ></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Column Chart -->
-            <div class="card px-4 pb-4 sm:px-5">
-              <div class="my-3 flex h-8 items-center justify-between">
-                <h2
-                  class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-                >
-                  Column Chart
-                </h2>
-              </div>
-              <div class="max-w-xl">
-                <p>
-                  <a
-                    href="https://github.com/apexcharts/apexcharts.js"
-                    class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-                    >Apexcharts</a
-                  >
-                  a modern JavaScript charting library that allows you to build
-                  interactive data visualizations with simple API and many
-                  samples. Check out code for detail of usage.
-                </p>
-                <div class="mt-5">
-                  <div>
-                    <div
-                      x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart6); $el._x_chart.render() });"
-                    ></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Radialbar Chart -->
-            <div class="card px-4 pb-4 sm:px-5">
-              <div class="my-3 flex h-8 items-center justify-between">
-                <h2
-                  class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-                >
-                  Radialbar Chart
-                </h2>
-              </div>
-              <div class="max-w-xl">
-                <p>
-                  <a
-                    href="https://github.com/apexcharts/apexcharts.js"
-                    class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-                    >Apexcharts</a
-                  >
-                  a modern JavaScript charting library that allows you to build
-                  interactive data visualizations with simple API and many
-                  samples. Check out code for detail of usage.
-                </p>
-                <div class="mt-5">
-                  <div>
-                    <div
-                      x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart8); $el._x_chart.render() });"
-                    ></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Polar Area Chart -->
-            <div class="card px-4 pb-4 sm:px-5">
-              <div class="my-3 flex h-8 items-center justify-between">
-                <h2
-                  class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-                >
-                  Polar Area Chart
-                </h2>
-              </div>
-              <div class="max-w-xl">
-                <p>
-                  <a
-                    href="https://github.com/apexcharts/apexcharts.js"
-                    class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-                    >Apexcharts</a
-                  >
-                  a modern JavaScript charting library that allows you to build
-                  interactive data visualizations with simple API and many
-                  samples. Check out code for detail of usage.
-                </p>
-                <div class="mt-5">
-                  <div>
-                    <div
-                      x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart10); $el._x_chart.render() });"
-                    ></div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-</x-app-layout>

resources/views/pages/components-carousel.blade.php

-<x-app-layout title="Swiper Component" is-sidebar-open="true" is-header-blur="true">
-    <main class="main-content w-full px-[var(--margin-x)] pb-8">
-        <div class="flex items-center space-x-4 py-5 lg:py-6">
-            <h2 class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl">
-                Swiper
-            </h2>
-            <div class="hidden h-full py-1 sm:flex">
-                <div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
-            </div>
-            <ul class="hidden flex-wrap items-center space-x-2 sm:flex">
-                <li class="flex items-center space-x-2">
-                    <a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-                        href="#">
-                        Components
-                    </a>
-                    <svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                    </svg>
-                </li>
-                <li>Swiper</li>
-            </ul>
-        </div>
-        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:gap-6">
-            <div class="space-y-4 sm:space-y-5 lg:space-y-6">
-                <!-- Default Carousel -->
-                <div class="card px-4 pb-4 sm:px-5">
-                    <div class="my-3 flex h-8 items-center justify-between">
-                        <h2
-                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                            Default Carousel
-                        </h2>
-                        <label class="inline-flex items-center space-x-2">
-                            <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                            <input @change="helpers.toggleCode"
-                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                                type="checkbox" />
-                        </label>
-                    </div>
-                    <div class="max-w-xl">
-                        <p>
-                            <a href="https://github.com/nolimits4web/swiper"
-                                class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">Swiper</a>
-                            is the free and most modern mobile touch slider with hardware
-                            accelerated transitions and amazing native behavior. Check out
-                            code for detail of usage.
-                        </p>
-                        <div class="mt-5">
-                            <div x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' } }))" class="swiper rounded-lg">
-                                <div class="swiper-wrapper">
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover" src="{{ asset('images/800x600.png') }}"
-                                            alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover object-top"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                </div>
-                                <div class="swiper-button-next"></div>
-                                <div class="swiper-button-prev"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="code-wrapper hidden pt-4">
-                        <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-              <code class="language-html" x-ignore>  
-&lt;div&#13;&#10;    x-init=&quot;$nextTick(()=&gt;$el._x_swiper = new Swiper($el,{navigation: {prevEl: &apos;.swiper-button-prev&apos;,nextEl: &apos;.swiper-button-next&apos;}}))&quot;&#13;&#10;    class=&quot;swiper rounded-lg&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div class=&quot;swiper-wrapper&quot;&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover object-top&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover object-center&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover object-center&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-button-next&quot;&gt;&lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;/div&gt;&#13;&#10;  &lt;/div&gt;
-              </code>
-            </pre>
-                    </div>
-                </div>
-
-                <!-- Lazy Loading Images -->
-                <div class="card px-4 pb-4 sm:px-5">
-                    <div class="my-3 flex h-8 items-center justify-between">
-                        <h2
-                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                            Lazy Loading Images
-                        </h2>
-                        <label class="inline-flex items-center space-x-2">
-                            <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                            <input @change="helpers.toggleCode"
-                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                                type="checkbox" />
-                        </label>
-                    </div>
-                    <div class="max-w-xl">
-                        <p>
-                            <a href="https://github.com/nolimits4web/swiper"
-                                class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">Swiper</a>
-                            is the free and most modern mobile touch slider with hardware
-                            accelerated transitions and amazing native behavior. Check out
-                            code for detail of usage.
-                        </p>
-                        <div class="mt-5">
-                            <div x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' }, pagination: { el: '.swiper-pagination', type: 'progressbar' }, lazy: true, }))" class="swiper rounded-lg">
-                                <div class="swiper-wrapper">
-                                    <div class="swiper-slide h-full">
-                                        <img class="swiper-lazy h-full w-full object-cover"
-                                            data-src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <div class="swiper-lazy-preloader"></div>
-                                    </div>
-                                    <div class="swiper-slide h-full">
-                                        <img class="swiper-lazy h-full w-full object-cover"
-                                            data-src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <div class="swiper-lazy-preloader"></div>
-                                    </div>
-                                    <div class="swiper-slide h-full">
-                                        <img class="swiper-lazy h-full w-full object-cover"
-                                            data-src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <div class="swiper-lazy-preloader"></div>
-                                    </div>
-                                    <div class="swiper-slide h-full">
-                                        <img class="swiper-lazy h-full w-full object-cover"
-                                            data-src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        <div class="swiper-lazy-preloader"></div>
-                                    </div>
-                                </div>
-                                <div class="swiper-pagination"></div>
-                                <div class="swiper-button-next"></div>
-                                <div class="swiper-button-prev"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="code-wrapper hidden pt-4">
-                        <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-              <code class="language-html" x-ignore>  
-&lt;div&#13;&#10;    x-init=&quot;$nextTick(()=&gt;$el._x_swiper = new Swiper($el,{ navigation: {prevEl: &apos;.swiper-button-prev&apos;, nextEl: &apos;.swiper-button-next&apos;}, pagination: { el: &apos;.swiper-pagination&apos;,type: &apos;progressbar&apos;},lazy: true,}))&quot;&#13;&#10;    class=&quot;swiper rounded-lg&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div class=&quot;swiper-wrapper&quot;&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide h-full&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;swiper-lazy h-full w-full object-cover&quot;&#13;&#10;          data-src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;        &lt;div class=&quot;swiper-lazy-preloader&quot;&gt;&lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide h-full&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;swiper-lazy h-full w-full object-cover&quot;&#13;&#10;          data-src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;        &lt;div class=&quot;swiper-lazy-preloader&quot;&gt;&lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide h-full&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;swiper-lazy h-full w-full object-cover&quot;&#13;&#10;          data-src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;        &lt;div class=&quot;swiper-lazy-preloader&quot;&gt;&lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide h-full&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;swiper-lazy h-full w-full object-cover&quot;&#13;&#10;          data-src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;        &lt;div class=&quot;swiper-lazy-preloader&quot;&gt;&lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-button-next&quot;&gt;&lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                  </code>
-            </pre>
-                    </div>
-                </div>
-
-                <!-- Space Between -->
-                <div class="card px-4 pb-4 sm:px-5">
-                    <div class="my-3 flex h-8 items-center justify-between">
-                        <h2
-                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                            Space Between
-                        </h2>
-                        <label class="inline-flex items-center space-x-2">
-                            <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                            <input @change="helpers.toggleCode"
-                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                                type="checkbox" />
-                        </label>
-                    </div>
-                    <div class="max-w-xl">
-                        <p>
-                            <a href="https://github.com/nolimits4web/swiper"
-                                class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">Swiper</a>
-                            is the free and most modern mobile touch slider with hardware
-                            accelerated transitions and amazing native behavior. Check out
-                            code for detail of usage.
-                        </p>
-                        <div class="mt-5">
-                            <div x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { slidesPerView: 'auto', spaceBetween: 30, pagination: { el: '.swiper-pagination', clickable: true, } }))" class="swiper">
-                                <div class="swiper-wrapper">
-                                    <div class="swiper-slide !w-10/12">
-                                        <img class="h-full w-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide !w-10/12">
-                                        <img class="h-full w-full rounded-lg object-cover object-top"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide !w-10/12">
-                                        <img class="h-full w-full rounded-lg object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide !w-10/12">
-                                        <img class="h-full w-full rounded-lg object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                </div>
-                                <div class="swiper-pagination"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="code-wrapper hidden pt-4">
-                        <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-                <code class="language-html" x-ignore>  
-&lt;div&#13;&#10;    x-init=&quot;$nextTick(() =&gt; $el._x_swiper = new Swiper($el,{slidesPerView: &apos;auto&apos;,spaceBetween: 30,pagination: {el: &apos;.swiper-pagination&apos;,clickable: true,}}))&quot;&#13;&#10;    class=&quot;swiper&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div class=&quot;swiper-wrapper&quot;&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide !w-10/12&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full rounded-lg object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide !w-10/12&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full rounded-lg object-cover object-top&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide !w-10/12&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full rounded-lg object-cover object-center&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide !w-10/12&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full rounded-lg object-cover object-center&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                    </code>
-              </pre>
-                    </div>
-                </div>
-
-                <!-- Zoom -->
-                <div class="card px-4 pb-4 sm:px-5">
-                    <div class="my-3 flex h-8 items-center justify-between">
-                        <h2
-                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                            Zoom
-                        </h2>
-                        <label class="inline-flex items-center space-x-2">
-                            <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                            <input @change="helpers.toggleCode"
-                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                                type="checkbox" />
-                        </label>
-                    </div>
-                    <div class="max-w-xl">
-                        <p>
-                            <a href="https://github.com/nolimits4web/swiper"
-                                class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">Swiper</a>
-                            is the free and most modern mobile touch slider with hardware
-                            accelerated transitions and amazing native behavior. Check out
-                            code for detail of usage.
-                        </p>
-                        <div class="mt-5">
-                            <div x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' }, pagination: { el: '.swiper-pagination', clickable: true, }, zoom: { maxRatio: 4 } }))" class="swiper">
-                                <div class="swiper-wrapper">
-                                    <div class="swiper-slide">
-                                        <div class="swiper-zoom-container">
-                                            <img class="h-full w-full object-cover"
-                                                src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        </div>
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <div class="swiper-zoom-container">
-                                            <img class="h-full w-full object-cover"
-                                                src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        </div>
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <div class="swiper-zoom-container">
-                                            <img class="h-full w-full object-cover"
-                                                src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        </div>
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <div class="swiper-zoom-container">
-                                            <img class="h-full w-full object-cover"
-                                                src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="swiper-pagination"></div>
-                                <div class="swiper-button-next"></div>
-                                <div class="swiper-button-prev"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="code-wrapper hidden pt-4">
-                        <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-              <code class="language-html" x-ignore>  
-&lt;div&#13;&#10;    x-init=&quot;$nextTick(() =&gt; $el._x_swiper = new Swiper($el,{navigation: {prevEl: &apos;.swiper-button-prev&apos;, nextEl: &apos;.swiper-button-next&apos;}, pagination: {el: &apos;.swiper-pagination&apos;,clickable: true,}, zoom: {maxRatio: 4}}))&quot;&#13;&#10;    class=&quot;swiper&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div class=&quot;swiper-wrapper&quot;&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;div class=&quot;swiper-zoom-container&quot;&gt;&#13;&#10;          &lt;img&#13;&#10;            class=&quot;h-full w-full object-cover&quot;&#13;&#10;            src=&quot;images/800x600.png&quot;&#13;&#10;            alt=&quot;&quot;&#13;&#10;          /&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;div class=&quot;swiper-zoom-container&quot;&gt;&#13;&#10;          &lt;img&#13;&#10;            class=&quot;h-full w-full object-cover&quot;&#13;&#10;            src=&quot;images/800x600.png&quot;&#13;&#10;            alt=&quot;&quot;&#13;&#10;          /&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;div class=&quot;swiper-zoom-container&quot;&gt;&#13;&#10;          &lt;img&#13;&#10;            class=&quot;h-full w-full object-cover&quot;&#13;&#10;            src=&quot;images/800x600.png&quot;&#13;&#10;            alt=&quot;&quot;&#13;&#10;          /&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;div class=&quot;swiper-zoom-container&quot;&gt;&#13;&#10;          &lt;img&#13;&#10;            class=&quot;h-full w-full object-cover&quot;&#13;&#10;            src=&quot;images/800x600.png&quot;&#13;&#10;            alt=&quot;&quot;&#13;&#10;          /&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-button-next&quot;&gt;&lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                  </code>
-            </pre>
-                    </div>
-                </div>
-
-                <!-- Flip Effect -->
-                <div class="card px-4 pb-4 sm:px-5">
-                    <div class="my-3 flex h-8 items-center justify-between">
-                        <h2
-                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                            Flip Effect
-                        </h2>
-                        <label class="inline-flex items-center space-x-2">
-                            <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                            <input @change="helpers.toggleCode"
-                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                                type="checkbox" />
-                        </label>
-                    </div>
-                    <div class="max-w-xl">
-                        <p>
-                            <a href="https://github.com/nolimits4web/swiper"
-                                class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">Swiper</a>
-                            is the free and most modern mobile touch slider with hardware
-                            accelerated transitions and amazing native behavior. Check out
-                            code for detail of usage.
-                        </p>
-                        <div class="mt-5">
-                            <div x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { effect: 'flip', flipEffect: { slideShadows: false, }, navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' }, pagination: { el: '.swiper-pagination', clickable: true } }))" class="swiper">
-                                <div class="swiper-wrapper">
-                                    <div class="swiper-slide">
-                                        <div class="swiper-zoom-container">
-                                            <img class="h-full w-full object-cover"
-                                                src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        </div>
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <div class="swiper-zoom-container">
-                                            <img class="h-full w-full object-cover"
-                                                src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        </div>
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <div class="swiper-zoom-container">
-                                            <img class="h-full w-full object-cover"
-                                                src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        </div>
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <div class="swiper-zoom-container">
-                                            <img class="h-full w-full object-cover"
-                                                src="{{ asset('images/800x600.png') }}" alt="image" />
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="swiper-pagination"></div>
-                                <div class="swiper-button-next"></div>
-                                <div class="swiper-button-prev"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="code-wrapper hidden pt-4">
-                        <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-              <code class="language-html" x-ignore>
-&lt;div&#13;&#10;    x-init=&quot;$nextTick(() =&gt; $el._x_swiper = new Swiper($el,{effect: &apos;flip&apos;,flipEffect: {slideShadows: false,}, navigation: { prevEl: &apos;.swiper-button-prev&apos;,nextEl: &apos;.swiper-button-next&apos;}, pagination: { el: &apos;.swiper-pagination&apos;, clickable: true}}))&quot;&#13;&#10;    class=&quot;swiper&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div class=&quot;swiper-wrapper&quot;&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;div class=&quot;swiper-zoom-container&quot;&gt;&#13;&#10;          &lt;img&#13;&#10;            class=&quot;h-full w-full object-cover&quot;&#13;&#10;            src=&quot;images/800x600.png&quot;&#13;&#10;            alt=&quot;&quot;&#13;&#10;          /&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;div class=&quot;swiper-zoom-container&quot;&gt;&#13;&#10;          &lt;img&#13;&#10;            class=&quot;h-full w-full object-cover&quot;&#13;&#10;            src=&quot;images/800x600.png&quot;&#13;&#10;            alt=&quot;&quot;&#13;&#10;          /&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;div class=&quot;swiper-zoom-container&quot;&gt;&#13;&#10;          &lt;img&#13;&#10;            class=&quot;h-full w-full object-cover&quot;&#13;&#10;            src=&quot;images/800x600.png&quot;&#13;&#10;            alt=&quot;&quot;&#13;&#10;          /&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;div class=&quot;swiper-zoom-container&quot;&gt;&#13;&#10;          &lt;img&#13;&#10;            class=&quot;h-full w-full object-cover&quot;&#13;&#10;            src=&quot;images/800x600.png&quot;&#13;&#10;            alt=&quot;&quot;&#13;&#10;          /&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-button-next&quot;&gt;&lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                  </code>
-            </pre>
-                    </div>
-                </div>
-
-                <!-- Cube Effect -->
-                <div class="card px-4 pb-4 sm:px-5">
-                    <div class="my-3 flex h-8 items-center justify-between">
-                        <h2
-                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                            Cube Effect
-                        </h2>
-                        <label class="inline-flex items-center space-x-2">
-                            <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                            <input @change="helpers.toggleCode"
-                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                                type="checkbox" />
-                        </label>
-                    </div>
-                    <div class="max-w-xl">
-                        <p>
-                            <a href="https://github.com/nolimits4web/swiper"
-                                class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">Swiper</a>
-                            is the free and most modern mobile touch slider with hardware
-                            accelerated transitions and amazing native behavior. Check out
-                            code for detail of usage.
-                        </p>
-                        <div class="mt-5">
-                            <div x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { effect: 'cube', cubeEffect: { shadow: false }, pagination: { el: '.swiper-pagination', clickable: true } }))" class="swiper">
-                                <div class="swiper-wrapper">
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                </div>
-                                <div class="swiper-pagination"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="code-wrapper hidden pt-4">
-                        <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-              <code class="language-html" x-ignore>  
-&lt;div&#13;&#10;    x-init=&quot;$nextTick(() =&gt; $el._x_swiper = new Swiper($el,{effect: &apos;cube&apos;, cubeEffect: { shadow: false}, pagination: { el: &apos;.swiper-pagination&apos;, clickable: true}}))&quot;&#13;&#10;    class=&quot;swiper&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div class=&quot;swiper-wrapper&quot;&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full rounded-lg object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full rounded-lg object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full rounded-lg object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full rounded-lg object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                  </code>
-            </pre>
-                    </div>
-                </div>
-
-                <!-- Card Effect -->
-                <div class="card px-4 pb-4 sm:px-5">
-                    <div class="my-3 flex h-8 items-center justify-between">
-                        <h2
-                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                            Card Effect
-                        </h2>
-                        <label class="inline-flex items-center space-x-2">
-                            <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                            <input @change="helpers.toggleCode"
-                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                                type="checkbox" />
-                        </label>
-                    </div>
-                    <div class="max-w-xl">
-                        <p>
-                            <a href="https://github.com/nolimits4web/swiper"
-                                class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">Swiper</a>
-                            is the free and most modern mobile touch slider with hardware
-                            accelerated transitions and amazing native behavior. Check out
-                            code for detail of usage.
-                        </p>
-                        <div class="mx-auto mt-5 w-10/12">
-                            <div x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { effect: 'cards', grabCursor: true }))" class="swiper">
-                                <div class="swiper-wrapper">
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="code-wrapper hidden pt-4">
-                        <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-              <code class="language-html" x-ignore>
-&lt;div&#13;&#10;    x-init=&quot;$nextTick(() =&gt; $el._x_swiper = new Swiper($el,{effect: &apos;cards&apos;, grabCursor: true}))&quot;&#13;&#10;    class=&quot;swiper&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div class=&quot;swiper-wrapper&quot;&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full rounded-lg object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full rounded-lg object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full rounded-lg object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full rounded-lg object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                  </code>
-            </pre>
-                    </div>
-                </div>
-            </div>
-
-            <div class="space-y-4 sm:space-y-5 lg:space-y-6">
-                <!-- Pagination -->
-                <div class="card px-4 pb-4 sm:px-5">
-                    <div class="my-3 flex h-8 items-center justify-between">
-                        <h2
-                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                            Pagination
-                        </h2>
-                        <label class="inline-flex items-center space-x-2">
-                            <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                            <input @change="helpers.toggleCode"
-                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                                type="checkbox" />
-                        </label>
-                    </div>
-                    <div class="max-w-xl">
-                        <p>
-                            <a href="https://github.com/nolimits4web/swiper"
-                                class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">Swiper</a>
-                            is the free and most modern mobile touch slider with hardware
-                            accelerated transitions and amazing native behavior. Check out
-                            code for detail of usage.
-                        </p>
-                        <div class="mt-5">
-                            <div x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { pagination: { el: '.swiper-pagination', clickable: true, } }))" class="swiper rounded-lg">
-                                <div class="swiper-wrapper">
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover object-top"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                </div>
-                                <div class="swiper-pagination"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="code-wrapper hidden pt-4">
-                        <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-              <code class="language-html" x-ignore>
-&lt;div&#13;&#10;    x-init=&quot;$nextTick(()=&gt;$el._x_swiper = new Swiper($el,{ pagination: { el: &apos;.swiper-pagination&apos;, clickable: true,}}))&quot;&#13;&#10;    class=&quot;swiper rounded-lg&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div class=&quot;swiper-wrapper&quot;&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover object-top&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover object-center&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover object-center&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                  </code>
-            </pre>
-                    </div>
-                </div>
-
-                <!-- Vertical Slider -->
-                <div class="card px-4 pb-4 sm:px-5">
-                    <div class="my-3 flex h-8 items-center justify-between">
-                        <h2
-                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                            Vertical Slider
-                        </h2>
-                        <label class="inline-flex items-center space-x-2">
-                            <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                            <input @change="helpers.toggleCode"
-                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                                type="checkbox" />
-                        </label>
-                    </div>
-                    <div class="max-w-xl">
-                        <p>
-                            <a href="https://github.com/nolimits4web/swiper"
-                                class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">Swiper</a>
-                            is the free and most modern mobile touch slider with hardware
-                            accelerated transitions and amazing native behavior. Check out
-                            code for detail of usage.
-                        </p>
-                        <div class="mt-5">
-                            <div x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { direction: 'vertical', pagination: { el: '.swiper-pagination', clickable: true } }))" class="swiper h-64 rounded-lg">
-                                <div class="swiper-wrapper">
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                </div>
-                                <div class="swiper-pagination"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="code-wrapper hidden pt-4">
-                        <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-              <code class="language-html" x-ignore>  
-&lt;div&#13;&#10;    x-init=&quot;$nextTick(()=&gt;$el._x_swiper = new Swiper($el, {direction: &apos;vertical&apos;,pagination: { el: &apos;.swiper-pagination&apos;,clickable: true}}))&quot;&#13;&#10;    class=&quot;swiper h-64 rounded-lg&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div class=&quot;swiper-wrapper&quot;&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover object-center&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                  </code>
-            </pre>
-                    </div>
-                </div>
-
-                <!-- With Scrollbar -->
-                <div class="card px-4 pb-4 sm:px-5">
-                    <div class="my-3 flex h-8 items-center justify-between">
-                        <h2
-                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                            With Scrollbar
-                        </h2>
-                        <label class="inline-flex items-center space-x-2">
-                            <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                            <input @change="helpers.toggleCode"
-                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                                type="checkbox" />
-                        </label>
-                    </div>
-                    <div class="max-w-xl">
-                        <p>
-                            <a href="https://github.com/nolimits4web/swiper"
-                                class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">Swiper</a>
-                            is the free and most modern mobile touch slider with hardware
-                            accelerated transitions and amazing native behavior. Check out
-                            code for detail of usage.
-                        </p>
-                        <div class="mt-5">
-                            <div x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { scrollbar: { el: '.swiper-scrollbar', draggable: true }, navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' }, autoplay: { delay: 2000 } }))" class="swiper rounded-lg">
-                                <div class="swiper-wrapper">
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover object-top"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                </div>
-                                <div class="swiper-scrollbar"></div>
-                                <div class="swiper-button-next"></div>
-                                <div class="swiper-button-prev"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="code-wrapper hidden pt-4">
-                        <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-              <code class="language-html" x-ignore>  
-&lt;div&#13;&#10;    x-init=&quot;$nextTick(()=&gt;$el._x_swiper = new Swiper($el, {scrollbar: {el: &apos;.swiper-scrollbar&apos;,draggable: true}, navigation: {prevEl: &apos;.swiper-button-prev&apos;,nextEl: &apos;.swiper-button-next&apos;},autoplay: {delay: 2000}}))&quot;&#13;&#10;    class=&quot;swiper rounded-lg&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div class=&quot;swiper-wrapper&quot;&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover object-top&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover object-center&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover object-center&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-scrollbar&quot;&gt;&lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-button-next&quot;&gt;&lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                  </code>
-            </pre>
-                    </div>
-                </div>
-
-                <!-- Fade Effect -->
-                <div class="card px-4 pb-4 sm:px-5">
-                    <div class="my-3 flex h-8 items-center justify-between">
-                        <h2
-                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                            Fade Effect
-                        </h2>
-                        <label class="inline-flex items-center space-x-2">
-                            <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                            <input @change="helpers.toggleCode"
-                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                                type="checkbox" />
-                        </label>
-                    </div>
-                    <div class="max-w-xl">
-                        <p>
-                            <a href="https://github.com/nolimits4web/swiper"
-                                class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">Swiper</a>
-                            is the free and most modern mobile touch slider with hardware
-                            accelerated transitions and amazing native behavior. Check out
-                            code for detail of usage.
-                        </p>
-                        <div class="mt-5">
-                            <div x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { effect: 'fade', pagination: { el: '.swiper-pagination', clickable: true }, navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' } }))" class="swiper rounded-lg">
-                                <div class="swiper-wrapper">
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover object-top"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                </div>
-                                <div class="swiper-button-next"></div>
-                                <div class="swiper-button-prev"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="code-wrapper hidden pt-4">
-                        <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-              <code class="language-html" x-ignore>  
-&lt;div&#13;&#10;    x-init=&quot;$nextTick(()=&gt;$el._x_swiper = new Swiper($el, {effect: &apos;fade&apos;, pagination: { el: &apos;.swiper-pagination&apos;,clickable: true},navigation: {prevEl: &apos;.swiper-button-prev&apos;,nextEl: &apos;.swiper-button-next&apos;}}))&quot;&#13;&#10;    class=&quot;swiper rounded-lg&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div class=&quot;swiper-wrapper&quot;&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover object-top&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover object-center&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover object-center&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-button-next&quot;&gt;&lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                  </code>
-            </pre>
-                    </div>
-                </div>
-
-                <!-- Coverflow Effect -->
-                <div class="card px-4 pb-4 sm:px-5">
-                    <div class="my-3 flex h-8 items-center justify-between">
-                        <h2
-                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                            Coverflow Effect
-                        </h2>
-                        <label class="inline-flex items-center space-x-2">
-                            <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                            <input @change="helpers.toggleCode"
-                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                                type="checkbox" />
-                        </label>
-                    </div>
-                    <div class="max-w-xl">
-                        <p>
-                            <a href="https://github.com/nolimits4web/swiper"
-                                class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">Swiper</a>
-                            is the free and most modern mobile touch slider with hardware
-                            accelerated transitions and amazing native behavior. Check out
-                            code for detail of usage.
-                        </p>
-                        <div class="mt-5">
-                            <div x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { effect: 'coverflow', coverflowEffect: { rotate: 35, slideShadows: false, }, navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' } }))" class="swiper rounded-lg">
-                                <div class="swiper-wrapper">
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover object-top"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full object-cover object-center"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                </div>
-                                <div class="swiper-button-next"></div>
-                                <div class="swiper-button-prev"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="code-wrapper hidden pt-4">
-                        <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-              <code class="language-html" x-ignore>  
-&lt;div&#13;&#10;    x-init=&quot;$nextTick(()=&gt;$el._x_swiper = new Swiper($el, { effect: &apos;coverflow&apos;, coverflowEffect: {rotate: 35, slideShadows: false,}, navigation: {prevEl: &apos;.swiper-button-prev&apos;,nextEl: &apos;.swiper-button-next&apos;}}))&quot;&#13;&#10;    class=&quot;swiper rounded-lg&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div class=&quot;swiper-wrapper&quot;&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover object-top&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover object-center&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full object-cover object-center&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-button-next&quot;&gt;&lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                  </code>
-            </pre>
-                    </div>
-                </div>
-
-                <!-- Parallax -->
-                <div class="card px-4 pb-4 sm:px-5">
-                    <div class="my-3 flex h-8 items-center justify-between">
-                        <h2
-                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                            Parallax
-                        </h2>
-                        <label class="inline-flex items-center space-x-2">
-                            <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                            <input @change="helpers.toggleCode"
-                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                                type="checkbox" />
-                        </label>
-                    </div>
-                    <div class="max-w-xl">
-                        <p>
-                            <a href="https://github.com/nolimits4web/swiper"
-                                class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">Swiper</a>
-                            is the free and most modern mobile touch slider with hardware
-                            accelerated transitions and amazing native behavior. Check out
-                            code for detail of usage.
-                        </p>
-                        <div class="mt-5">
-                            <div x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { parallax: true, navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' } }))" class="swiper swiper-parallax h-64 rounded-lg">
-                                <div class="parallax-bg" style="background-image: url('/images/800x600.png');"
-                                    data-swiper-parallax="-23%"></div>
-                                <div class="swiper-wrapper">
-                                    <div class="swiper-slide p-6">
-                                        <div class="title text-3xl font-light text-white" data-swiper-parallax="-300">
-                                            Slide 1
-                                        </div>
-                                        <div class="subtitle mt-2 text-2xl text-white" data-swiper-parallax="-200">
-                                            Subtitle
-                                        </div>
-                                        <div class="text mt-4 text-white" data-swiper-parallax="-100">
-                                            <p>
-                                                Lorem ipsum dolor sit amet, consectetur adipisicing
-                                                elit. Ab at, consectetur cupiditate debitis expedita
-                                                fugit, modi nemo nobis odit perferendis quaerat quia
-                                                reiciendis repudiandae rerum sed?
-                                            </p>
-                                        </div>
-                                    </div>
-                                    <div class="swiper-slide p-6">
-                                        <div class="title text-3xl font-light text-white" data-swiper-parallax="-300">
-                                            Slide 2
-                                        </div>
-                                        <div class="subtitle mt-2 text-2xl text-white" data-swiper-parallax="-200">
-                                            Subtitle
-                                        </div>
-                                        <div class="text mt-4 text-white" data-swiper-parallax="-100">
-                                            <p>
-                                                Lorem ipsum dolor sit amet, consectetur adipisicing
-                                                elit. Ab at, consectetur cupiditate debitis expedita
-                                                fugit, modi nemo nobis odit perferendis quaerat quia
-                                                reiciendis repudiandae rerum sed?
-                                            </p>
-                                        </div>
-                                    </div>
-                                    <div class="swiper-slide p-6">
-                                        <div class="title text-3xl font-light text-white" data-swiper-parallax="-300">
-                                            Slide 3
-                                        </div>
-                                        <div class="subtitle mt-2 text-2xl text-white" data-swiper-parallax="-200">
-                                            Subtitle
-                                        </div>
-                                        <div class="text mt-4 text-white" data-swiper-parallax="-100">
-                                            <p>
-                                                Lorem ipsum dolor sit amet, consectetur adipisicing
-                                                elit. Ab at, consectetur cupiditate debitis expedita
-                                                fugit, modi nemo nobis odit perferendis quaerat quia
-                                                reiciendis repudiandae rerum sed?
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="swiper-button-next"></div>
-                                <div class="swiper-button-prev"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="code-wrapper hidden pt-4">
-                        <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-              <code class="language-html" x-ignore>  
-&lt;div&#13;&#10;    x-init=&quot;$nextTick(()=&gt;$el._x_swiper = new Swiper($el, {parallax: true,navigation: { prevEl: &apos;.swiper-button-prev&apos;, nextEl: &apos;.swiper-button-next&apos;}}))&quot;&#13;&#10;    class=&quot;swiper swiper-parallax h-64 rounded-lg&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div&#13;&#10;      class=&quot;parallax-bg&quot;&#13;&#10;      style=&quot;background-image: url(&apos;images/800x600.png&apos;)&quot;&#13;&#10;      data-swiper-parallax=&quot;-23%&quot;&#13;&#10;    &gt;&lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-wrapper&quot;&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide p-6&quot;&gt;&#13;&#10;        &lt;div&#13;&#10;          class=&quot;title text-3xl font-light text-white&quot;&#13;&#10;          data-swiper-parallax=&quot;-300&quot;&#13;&#10;        &gt;&#13;&#10;          Slide 1&#13;&#10;        &lt;/div&gt;&#13;&#10;        &lt;div&#13;&#10;          class=&quot;subtitle mt-2 text-2xl text-white&quot;&#13;&#10;          data-swiper-parallax=&quot;-200&quot;&#13;&#10;        &gt;&#13;&#10;          Subtitle&#13;&#10;        &lt;/div&gt;&#13;&#10;        &lt;div class=&quot;text mt-4 text-white&quot; data-swiper-parallax=&quot;-100&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab at,&#13;&#10;            consectetur cupiditate debitis expedita fugit, modi nemo nobis odit&#13;&#10;            perferendis quaerat quia reiciendis repudiandae rerum sed?&#13;&#10;          &lt;/p&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide p-6&quot;&gt;&#13;&#10;        &lt;div&#13;&#10;          class=&quot;title text-3xl font-light text-white&quot;&#13;&#10;          data-swiper-parallax=&quot;-300&quot;&#13;&#10;        &gt;&#13;&#10;          Slide 2&#13;&#10;        &lt;/div&gt;&#13;&#10;        &lt;div&#13;&#10;          class=&quot;subtitle mt-2 text-2xl text-white&quot;&#13;&#10;          data-swiper-parallax=&quot;-200&quot;&#13;&#10;        &gt;&#13;&#10;          Subtitle&#13;&#10;        &lt;/div&gt;&#13;&#10;        &lt;div class=&quot;text mt-4 text-white&quot; data-swiper-parallax=&quot;-100&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab at,&#13;&#10;            consectetur cupiditate debitis expedita fugit, modi nemo nobis odit&#13;&#10;            perferendis quaerat quia reiciendis repudiandae rerum sed?&#13;&#10;          &lt;/p&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide p-6&quot;&gt;&#13;&#10;        &lt;div&#13;&#10;          class=&quot;title text-3xl font-light text-white&quot;&#13;&#10;          data-swiper-parallax=&quot;-300&quot;&#13;&#10;        &gt;&#13;&#10;          Slide 3&#13;&#10;        &lt;/div&gt;&#13;&#10;        &lt;div&#13;&#10;          class=&quot;subtitle mt-2 text-2xl text-white&quot;&#13;&#10;          data-swiper-parallax=&quot;-200&quot;&#13;&#10;        &gt;&#13;&#10;          Subtitle&#13;&#10;        &lt;/div&gt;&#13;&#10;        &lt;div class=&quot;text mt-4 text-white&quot; data-swiper-parallax=&quot;-100&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab at,&#13;&#10;            consectetur cupiditate debitis expedita fugit, modi nemo nobis odit&#13;&#10;            perferendis quaerat quia reiciendis repudiandae rerum sed?&#13;&#10;          &lt;/p&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-button-next&quot;&gt;&lt;/div&gt;&#13;&#10;    &lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                  </code>
-            </pre>
-                    </div>
-                </div>
-
-                <!-- Creative Effect -->
-                <div class="card px-4 pb-4 sm:px-5">
-                    <div class="my-3 flex h-8 items-center justify-between">
-                        <h2
-                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                            Creative Effect
-                        </h2>
-                        <label class="inline-flex items-center space-x-2">
-                            <span class="text-xs text-slate-400 dark:text-navy-300">Code</span>
-                            <input @change="helpers.toggleCode"
-                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                                type="checkbox" />
-                        </label>
-                    </div>
-                    <div class="max-w-xl">
-                        <p>
-                            <a href="https://github.com/nolimits4web/swiper"
-                                class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">Swiper</a>
-                            is the free and most modern mobile touch slider with hardware
-                            accelerated transitions and amazing native behavior. Check out
-                            code for detail of usage.
-                        </p>
-                        <div class="mt-5">
-                            <div x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { grabCursor: true, effect: 'creative', creativeEffect: { prev: { shadow: true, translate: ['-125%', 0, -800], rotate: [0, 0, -90] }, next: { shadow: true, translate: ['125%', 0, -800], rotate: [0, 0, 90] } } }))" class="swiper rounded-lg">
-                                <div class="swiper-wrapper">
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                    <div class="swiper-slide">
-                                        <img class="h-full w-full rounded-lg object-cover"
-                                            src="{{ asset('images/800x600.png') }}" alt="image" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="code-wrapper hidden pt-4">
-                        <pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg" x-init="hljs.highlightElement($el)">
-              <code class="language-html" x-ignore>  
-&lt;div&#13;&#10;    x-init=&quot;$nextTick(()=&gt;$el._x_swiper = new Swiper($el, { grabCursor: true, effect: &apos;creative&apos;, creativeEffect: { prev: { shadow: true, translate: [&apos;-125%&apos;, 0, -800], rotate: [0, 0, -90]}, next: { shadow: true,translate: [&apos;125%&apos;, 0, -800], rotate: [0, 0, 90]} }}))&quot;&#13;&#10;    class=&quot;swiper rounded-lg&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div class=&quot;swiper-wrapper&quot;&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full rounded-lg object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full rounded-lg object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full rounded-lg object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div class=&quot;swiper-slide&quot;&gt;&#13;&#10;        &lt;img&#13;&#10;          class=&quot;h-full w-full rounded-lg object-cover&quot;&#13;&#10;          src=&quot;images/800x600.png&quot;&#13;&#10;          alt=&quot;&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;
-              </code>
-            </pre>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-
-</x-app-layout>

resources/views/pages/components-collapse.blade.php

-<x-app-layout title="Collapse Component" is-sidebar-open="true" is-header-blur="true">
-  <!-- Main Content Wrapper -->
-  <main class="main-content w-full px-[var(--margin-x)] pb-8">
-    <div class="flex items-center space-x-4 py-5 lg:py-6">
-      <h2
-        class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
-      >
-        Collapse
-      </h2>
-      <div class="hidden h-full py-1 sm:flex">
-        <div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
-      </div>
-      <ul class="hidden flex-wrap items-center space-x-2 sm:flex">
-        <li class="flex items-center space-x-2">
-          <a
-            class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-            href="#"
-            >Components</a
-          >
-          <svg
-            x-ignore
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 5l7 7-7 7"
-            />
-          </svg>
-        </li>
-        <li>Collapse</li>
-      </ul>
-    </div>
-    <div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
-      <!-- Basic Collapse -->
-      <div class="card px-4 pb-4 sm:px-5">
-        <div class="my-3 flex h-8 items-center justify-between">
-          <h2
-            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-          >
-            Basic Collapse
-          </h2>
-          <label class="inline-flex items-center space-x-2">
-            <span class="text-xs text-slate-400 dark:text-navy-300"
-              >Code</span
-            >
-            <input
-              @change="helpers.toggleCode"
-              class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-              type="checkbox"
-            />
-          </label>
-        </div>
-        <div class="max-w-xl">
-          <p>
-            The Collapse component is used to create regions of content that
-            can expand/collapse with a simple animation. It helps to hide
-            content that's not immediately relevant to the user. Check out
-            code for detail of usage.
-          </p>
-          <div class="mt-5 flex flex-col">
-            <div x-data="{expanded:false}">
-              <div
-                @click="expanded = !expanded"
-                class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
-              >
-                <p>Collapse Item 1</p>
-                <div
-                  :class="expanded && '-rotate-180'"
-                  class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
-                >
-                  <i class="fas fa-chevron-down"></i>
-                </div>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="flex space-x-2 pt-3">
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 1
-                    </a>
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 2
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div x-data="{expanded:false}">
-              <div
-                @click="expanded = !expanded"
-                class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
-              >
-                <p>Collapse Item 2</p>
-                <div
-                  :class="expanded && '-rotate-180'"
-                  class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
-                >
-                  <i class="fas fa-chevron-down"></i>
-                </div>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="flex space-x-2 pt-3">
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 1
-                    </a>
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 2
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div x-data="{expanded:false}">
-              <div
-                @click="expanded = !expanded"
-                class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
-              >
-                <p>Collapse Item 3</p>
-                <div
-                  :class="expanded && '-rotate-180'"
-                  class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
-                >
-                  <i class="fas fa-chevron-down"></i>
-                </div>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="flex space-x-2 pt-3">
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 1
-                    </a>
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 2
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="code-wrapper hidden pt-4">
-          <pre
-            class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
-            x-init="hljs.highlightElement($el)"
-          >
-            <code class="language-html" x-ignore>
-&lt;div class=&quot;flex flex-col&quot;&gt;&#13;&#10;    &lt;div x-data=&quot;{expanded:false}&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Collapse Item 1&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div x-data=&quot;{expanded:false}&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Collapse Item 2&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div x-data=&quot;{expanded:false}&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Collapse Item 3&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                </code>
-          </pre>
-        </div>
-      </div>
-
-      <!-- Border Bottom -->
-      <div class="card px-4 pb-4 sm:px-5">
-        <div class="my-3 flex h-8 items-center justify-between">
-          <h2
-            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-          >
-            Border Bottom
-          </h2>
-          <label class="inline-flex items-center space-x-2">
-            <span class="text-xs text-slate-400 dark:text-navy-300"
-              >Code</span
-            >
-            <input
-              @change="helpers.toggleCode"
-              class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-              type="checkbox"
-            />
-          </label>
-        </div>
-        <div class="max-w-xl">
-          <p>
-            The Collapse component is used to create regions of content that
-            can expand/collapse with a simple animation. It helps to hide
-            content that's not immediately relevant to the user. Check out
-            code for detail of usage.
-          </p>
-          <div
-            class="mt-5 flex flex-col divide-y divide-slate-150 dark:divide-navy-500"
-          >
-            <div x-data="{expanded:false}">
-              <div
-                @click="expanded = !expanded"
-                class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
-              >
-                <p>Collapse Item 1</p>
-                <div
-                  :class="expanded && '-rotate-180'"
-                  class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
-                >
-                  <i class="fas fa-chevron-down"></i>
-                </div>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div class="pb-4">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="flex space-x-2 pt-3">
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 1
-                    </a>
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 2
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div x-data="{expanded:false}">
-              <div
-                @click="expanded = !expanded"
-                class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
-              >
-                <p>Collapse Item 2</p>
-                <div
-                  :class="expanded && '-rotate-180'"
-                  class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
-                >
-                  <i class="fas fa-chevron-down"></i>
-                </div>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div class="pb-4">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="flex space-x-2 pt-3">
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 1
-                    </a>
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 2
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div x-data="{expanded:false}">
-              <div
-                @click="expanded = !expanded"
-                class="flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
-              >
-                <p>Collapse Item 3</p>
-                <div
-                  :class="expanded && '-rotate-180'"
-                  class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
-                >
-                  <i class="fas fa-chevron-down"></i>
-                </div>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div class="pb-4">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="flex space-x-2 pt-3">
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 1
-                    </a>
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 2
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="code-wrapper hidden pt-4">
-          <pre
-            class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
-            x-init="hljs.highlightElement($el)"
-          >
-            <code class="language-html" x-ignore>
-&lt;div&#13;&#10;    class=&quot;flex flex-col divide-y divide-slate-150 dark:divide-navy-500&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div x-data=&quot;{expanded:false}&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Collapse Item 1&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;pb-4&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div x-data=&quot;{expanded:false}&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Collapse Item 2&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;pb-4&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div x-data=&quot;{expanded:false}&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Collapse Item 3&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;pb-4&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                </code>
-          </pre>
-        </div>
-      </div>
-
-      <!-- Full Bordered -->
-      <div class="card px-4 pb-4 sm:px-5">
-        <div class="my-3 flex h-8 items-center justify-between">
-          <h2
-            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-          >
-            Full Bordered
-          </h2>
-          <label class="inline-flex items-center space-x-2">
-            <span class="text-xs text-slate-400 dark:text-navy-300"
-              >Code</span
-            >
-            <input
-              @change="helpers.toggleCode"
-              class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-              type="checkbox"
-            />
-          </label>
-        </div>
-        <div class="max-w-xl">
-          <p>
-            The Collapse component is used to create regions of content that
-            can expand/collapse with a simple animation. It helps to hide
-            content that's not immediately relevant to the user. Check out
-            code for detail of usage.
-          </p>
-          <div
-            class="mt-5 flex flex-col divide-y divide-slate-150 rounded-lg border border-slate-150 dark:divide-navy-500 dark:border-navy-500"
-          >
-            <div x-data="{expanded:false}">
-              <div
-                @click="expanded = !expanded"
-                class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
-              >
-                <p>Collapse Item 1</p>
-                <div
-                  :class="expanded && '-rotate-180'"
-                  class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
-                >
-                  <i class="fas fa-chevron-down"></i>
-                </div>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div class="px-4 pb-4 sm:px-5">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="flex space-x-2 pt-3">
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 1
-                    </a>
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 2
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div x-data="{expanded:false}">
-              <div
-                @click="expanded = !expanded"
-                class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
-              >
-                <p>Collapse Item 2</p>
-                <div
-                  :class="expanded && '-rotate-180'"
-                  class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
-                >
-                  <i class="fas fa-chevron-down"></i>
-                </div>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div class="px-4 pb-4 sm:px-5">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="flex space-x-2 pt-3">
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 1
-                    </a>
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 2
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div x-data="{expanded:false}">
-              <div
-                @click="expanded = !expanded"
-                class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
-              >
-                <p>Collapse Item 3</p>
-                <div
-                  :class="expanded && '-rotate-180'"
-                  class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
-                >
-                  <i class="fas fa-chevron-down"></i>
-                </div>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div class="px-4 pb-4 sm:px-5">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="flex space-x-2 pt-3">
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 1
-                    </a>
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 2
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="code-wrapper hidden pt-4">
-          <pre
-            class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
-            x-init="hljs.highlightElement($el)"
-          >
-            <code class="language-html" x-ignore>
-&lt;div&#13;&#10;    class=&quot;flex flex-col divide-y divide-slate-150 rounded-lg border border-slate-150 dark:divide-navy-500 dark:border-navy-500&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div x-data=&quot;{expanded:false}&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Collapse Item 1&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 pb-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div x-data=&quot;{expanded:false}&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Collapse Item 2&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 pb-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div x-data=&quot;{expanded:false}&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Collapse Item 3&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 pb-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                </code>
-          </pre>
-        </div>
-      </div>
-
-      <!-- Divided Items -->
-      <div class="card px-4 pb-4 sm:px-5">
-        <div class="my-3 flex h-8 items-center justify-between">
-          <h2
-            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-          >
-            Divided Items
-          </h2>
-          <label class="inline-flex items-center space-x-2">
-            <span class="text-xs text-slate-400 dark:text-navy-300"
-              >Code</span
-            >
-            <input
-              @change="helpers.toggleCode"
-              class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-              type="checkbox"
-            />
-          </label>
-        </div>
-        <div class="max-w-xl">
-          <p>
-            The Collapse component is used to create regions of content that
-            can expand/collapse with a simple animation. It helps to hide
-            content that's not immediately relevant to the user. Check out
-            code for detail of usage.
-          </p>
-          <div
-            class="mt-5 flex flex-col space-y-4 rounded-lg sm:space-y-5 lg:space-y-6"
-          >
-            <div
-              x-data="{expanded:false}"
-              class="rounded-lg border border-slate-150 dark:border-navy-500"
-            >
-              <div
-                @click="expanded = !expanded"
-                class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
-              >
-                <p>Collapse Item 1</p>
-                <div
-                  :class="expanded && '-rotate-180'"
-                  class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
-                >
-                  <i class="fas fa-chevron-down"></i>
-                </div>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div class="px-4 pb-4 sm:px-5">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="mt-4 flex justify-between">
-                    <div class="flex flex-wrap -space-x-2">
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <div
-                          class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
-                        >
-                          jd
-                        </div>
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-                    </div>
-                    <button
-                      class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-5 w-5 rotate-45"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M7 11l5-5m0 0l5 5m-5-5v12"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              x-data="{expanded:false}"
-              class="rounded-lg border border-slate-150 dark:border-navy-500"
-            >
-              <div
-                @click="expanded = !expanded"
-                class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
-              >
-                <p>Collapse Item 2</p>
-                <div
-                  :class="expanded && '-rotate-180'"
-                  class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
-                >
-                  <i class="fas fa-chevron-down"></i>
-                </div>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div class="px-4 pb-4 sm:px-5">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="mt-4 flex justify-between">
-                    <div class="flex flex-wrap -space-x-2">
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <div
-                          class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
-                        >
-                          jd
-                        </div>
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-                    </div>
-                    <button
-                      class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-5 w-5 rotate-45"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M7 11l5-5m0 0l5 5m-5-5v12"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              x-data="{expanded:false}"
-              class="rounded-lg border border-slate-150 dark:border-navy-500"
-            >
-              <div
-                @click="expanded = !expanded"
-                class="flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
-              >
-                <p>Collapse Item 3</p>
-                <div
-                  :class="expanded && '-rotate-180'"
-                  class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
-                >
-                  <i class="fas fa-chevron-down"></i>
-                </div>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div class="px-4 pb-4 sm:px-5">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="mt-4 flex justify-between">
-                    <div class="flex flex-wrap -space-x-2">
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <div
-                          class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
-                        >
-                          jd
-                        </div>
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-                    </div>
-                    <button
-                      class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-5 w-5 rotate-45"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M7 11l5-5m0 0l5 5m-5-5v12"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="code-wrapper hidden pt-4">
-          <pre
-            class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
-            x-init="hljs.highlightElement($el)"
-          >
-            <code class="language-html" x-ignore>
-&lt;div&#13;&#10;    class=&quot;flex flex-col space-y-4 rounded-lg sm:space-y-5 lg:space-y-6&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div&#13;&#10;      x-data=&quot;{expanded:false}&quot;&#13;&#10;      class=&quot;rounded-lg border border-slate-150 dark:border-navy-500&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Collapse Item 1&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 pb-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;mt-4 flex justify-between&quot;&gt;&#13;&#10;            &lt;div class=&quot;flex flex-wrap -space-x-2&quot;&gt;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;div&#13;&#10;                  class=&quot;is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700&quot;&#13;&#10;                &gt;&#13;&#10;                  jd&#13;&#10;                &lt;/div&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;            &lt;button&#13;&#10;              class=&quot;btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;svg&#13;&#10;                xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;                class=&quot;h-5 w-5 rotate-45&quot;&#13;&#10;                fill=&quot;none&quot;&#13;&#10;                viewBox=&quot;0 0 24 24&quot;&#13;&#10;                stroke=&quot;currentColor&quot;&#13;&#10;              &gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  stroke-width=&quot;2&quot;&#13;&#10;                  d=&quot;M7 11l5-5m0 0l5 5m-5-5v12&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/svg&gt;&#13;&#10;            &lt;/button&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div&#13;&#10;      x-data=&quot;{expanded:false}&quot;&#13;&#10;      class=&quot;rounded-lg border border-slate-150 dark:border-navy-500&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Collapse Item 2&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 pb-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;mt-4 flex justify-between&quot;&gt;&#13;&#10;            &lt;div class=&quot;flex flex-wrap -space-x-2&quot;&gt;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;div&#13;&#10;                  class=&quot;is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700&quot;&#13;&#10;                &gt;&#13;&#10;                  jd&#13;&#10;                &lt;/div&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;            &lt;button&#13;&#10;              class=&quot;btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;svg&#13;&#10;                xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;                class=&quot;h-5 w-5 rotate-45&quot;&#13;&#10;                fill=&quot;none&quot;&#13;&#10;                viewBox=&quot;0 0 24 24&quot;&#13;&#10;                stroke=&quot;currentColor&quot;&#13;&#10;              &gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  stroke-width=&quot;2&quot;&#13;&#10;                  d=&quot;M7 11l5-5m0 0l5 5m-5-5v12&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/svg&gt;&#13;&#10;            &lt;/button&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div&#13;&#10;      x-data=&quot;{expanded:false}&quot;&#13;&#10;      class=&quot;rounded-lg border border-slate-150 dark:border-navy-500&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Collapse Item 3&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 pb-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;mt-4 flex justify-between&quot;&gt;&#13;&#10;            &lt;div class=&quot;flex flex-wrap -space-x-2&quot;&gt;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;div&#13;&#10;                  class=&quot;is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700&quot;&#13;&#10;                &gt;&#13;&#10;                  jd&#13;&#10;                &lt;/div&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;            &lt;button&#13;&#10;              class=&quot;btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;svg&#13;&#10;                xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;                class=&quot;h-5 w-5 rotate-45&quot;&#13;&#10;                fill=&quot;none&quot;&#13;&#10;                viewBox=&quot;0 0 24 24&quot;&#13;&#10;                stroke=&quot;currentColor&quot;&#13;&#10;              &gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  stroke-width=&quot;2&quot;&#13;&#10;                  d=&quot;M7 11l5-5m0 0l5 5m-5-5v12&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/svg&gt;&#13;&#10;            &lt;/button&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                </code>
-          </pre>
-        </div>
-      </div>
-
-      <!-- Primary Collapse -->
-      <div class="card px-4 pb-4 sm:px-5">
-        <div class="my-3 flex h-8 items-center justify-between">
-          <h2
-            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-          >
-            Primary Collapse
-          </h2>
-          <label class="inline-flex items-center space-x-2">
-            <span class="text-xs text-slate-400 dark:text-navy-300"
-              >Code</span
-            >
-            <input
-              @change="helpers.toggleCode"
-              class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-              type="checkbox"
-            />
-          </label>
-        </div>
-        <div class="max-w-xl">
-          <p>
-            The Collapse component is used to create regions of content that
-            can expand/collapse with a simple animation. It helps to hide
-            content that's not immediately relevant to the user. Check out
-            code for detail of usage.
-          </p>
-          <div
-            class="mt-5 flex flex-col divide-y divide-indigo-400 overflow-hidden rounded-lg border border-primary dark:border-accent"
-          >
-            <div x-data="{expanded:false}">
-              <div
-                @click="expanded = !expanded"
-                class="flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5"
-              >
-                <p>Collapse Item 1</p>
-                <div
-                  :class="expanded && '-rotate-180'"
-                  class="text-sm font-normal leading-none text-indigo-100 transition-transform duration-300"
-                >
-                  <i class="fas fa-chevron-down"></i>
-                </div>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div class="px-4 py-4 sm:px-5">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="flex space-x-2 pt-3">
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 1
-                    </a>
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 2
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div x-data="{expanded:false}">
-              <div
-                @click="expanded = !expanded"
-                class="flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5"
-              >
-                <p>Collapse Item 2</p>
-                <div
-                  :class="expanded && '-rotate-180'"
-                  class="text-sm font-normal leading-none text-indigo-100 transition-transform duration-300"
-                >
-                  <i class="fas fa-chevron-down"></i>
-                </div>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div class="px-4 py-4 sm:px-5">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="flex space-x-2 pt-3">
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 1
-                    </a>
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 2
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div x-data="{expanded:false}">
-              <div
-                @click="expanded = !expanded"
-                class="flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5"
-              >
-                <p>Collapse Item 3</p>
-                <div
-                  :class="expanded && '-rotate-180'"
-                  class="text-sm font-normal leading-none text-indigo-100 transition-transform duration-300"
-                >
-                  <i class="fas fa-chevron-down"></i>
-                </div>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div class="px-4 py-4 sm:px-5">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="flex space-x-2 pt-3">
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 1
-                    </a>
-                    <a
-                      href="#"
-                      class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
-                    >
-                      Tag 2
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="code-wrapper hidden pt-4">
-          <pre
-            class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
-            x-init="hljs.highlightElement($el)"
-          >
-            <code class="language-html" x-ignore>
-&lt;div&#13;&#10;    class=&quot;flex flex-col divide-y divide-indigo-400 overflow-hidden rounded-lg border border-primary dark:border-accent&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;div x-data=&quot;{expanded:false}&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Collapse Item 1&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-indigo-100 transition-transform duration-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 py-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div x-data=&quot;{expanded:false}&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Collapse Item 2&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-indigo-100 transition-transform duration-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 py-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div x-data=&quot;{expanded:false}&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        @click=&quot;expanded = !expanded&quot;&#13;&#10;        class=&quot;flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;p&gt;Collapse Item 3&lt;/p&gt;&#13;&#10;        &lt;div&#13;&#10;          :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;          class=&quot;text-sm font-normal leading-none text-indigo-100 transition-transform duration-300&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i class=&quot;fas fa-chevron-down&quot;&gt;&lt;/i&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 py-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;flex space-x-2 pt-3&quot;&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 1&#13;&#10;            &lt;/a&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light&quot;&#13;&#10;            &gt;&#13;&#10;              Tag 2&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                </code>
-          </pre>
-        </div>
-      </div>
-
-      <!-- Advanced Collapse -->
-      <div class="card px-4 pb-4 sm:px-5">
-        <div class="my-3 flex h-8 items-center justify-between">
-          <h2
-            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-          >
-            Advanced Collapse
-          </h2>
-          <label class="inline-flex items-center space-x-2">
-            <span class="text-xs text-slate-400 dark:text-navy-300"
-              >Code</span
-            >
-            <input
-              @change="helpers.toggleCode"
-              class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-              type="checkbox"
-            />
-          </label>
-        </div>
-        <div class="max-w-xl">
-          <p>
-            The Collapse component is used to create regions of content that
-            can expand/collapse with a simple animation. It helps to hide
-            content that's not immediately relevant to the user. Check out
-            code for detail of usage.
-          </p>
-          <div
-            class="mt-5 flex flex-col space-y-4 sm:space-y-5 lg:space-y-6"
-          >
-            <div
-              x-data="{expanded:false}"
-              class="overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500"
-            >
-              <div
-                class="flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5"
-              >
-                <div
-                  class="flex items-center space-x-3.5 tracking-wide outline-none transition-all"
-                >
-                  <div class="avatar h-10 w-10">
-                    <img
-                      class="rounded-full"
-                      src="{{asset('images/200x200.png')}}"
-                      alt="avatar"
-                    />
-                  </div>
-                  <div>
-                    <p
-                      class="text-slate-700 line-clamp-1 dark:text-navy-100"
-                    >
-                      Simon Tods
-                    </p>
-                    <p class="text-xs text-slate-500 dark:text-navy-300">
-                      Web Developer
-                    </p>
-                  </div>
-                </div>
-                <button
-                  @click="expanded = !expanded"
-                  class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
-                >
-                  <i
-                    :class="expanded && '-rotate-180'"
-                    class="fas fa-chevron-down text-sm transition-transform"
-                  ></i>
-                </button>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div class="px-4 py-4 sm:px-5">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="mt-4 flex justify-between">
-                    <div class="flex flex-wrap -space-x-2">
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <div
-                          class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
-                        >
-                          jd
-                        </div>
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-                    </div>
-                    <button
-                      class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-5 w-5 rotate-45"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M7 11l5-5m0 0l5 5m-5-5v12"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              x-data="{expanded:false}"
-              class="overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500"
-            >
-              <div
-                class="flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5"
-              >
-                <div
-                  class="flex items-center space-x-3.5 tracking-wide outline-none transition-all"
-                >
-                  <div class="avatar h-10 w-10">
-                    <div
-                      class="is-initial rounded-full bg-warning uppercase text-white"
-                    >
-                      KG
-                    </div>
-                  </div>
-                  <div>
-                    <p
-                      class="text-slate-700 line-clamp-1 dark:text-navy-100"
-                    >
-                      Konnor Guzman
-                    </p>
-                    <p class="text-xs text-slate-500 dark:text-navy-300">
-                      Frontend Developer
-                    </p>
-                  </div>
-                </div>
-                <button
-                  @click="expanded = !expanded"
-                  class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
-                >
-                  <i
-                    :class="expanded && '-rotate-180'"
-                    class="fas fa-chevron-down text-sm transition-transform"
-                  ></i>
-                </button>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div class="px-4 py-4 sm:px-5">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="mt-4 flex justify-between">
-                    <div class="flex flex-wrap -space-x-2">
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <div
-                          class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
-                        >
-                          jd
-                        </div>
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-                    </div>
-                    <button
-                      class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-5 w-5 rotate-45"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M7 11l5-5m0 0l5 5m-5-5v12"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              x-data="{expanded:false}"
-              class="overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500"
-            >
-              <div
-                class="flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5"
-              >
-                <div
-                  class="flex items-center space-x-3.5 tracking-wide outline-none transition-all"
-                >
-                  <div class="avatar h-10 w-10">
-                    <img
-                      class="rounded-full"
-                      src="{{asset('images/200x200.png')}}"
-                      alt="avatar"
-                    />
-                  </div>
-                  <div>
-                    <p
-                      class="text-slate-700 line-clamp-1 dark:text-navy-100"
-                    >
-                      Derrick Simmons
-                    </p>
-                    <p class="text-xs text-slate-500 dark:text-navy-300">
-                      UI/UX Designer
-                    </p>
-                  </div>
-                </div>
-                <button
-                  @click="expanded = !expanded"
-                  class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
-                >
-                  <i
-                    :class="expanded && '-rotate-180'"
-                    class="fas fa-chevron-down text-sm transition-transform"
-                  ></i>
-                </button>
-              </div>
-              <div x-collapse x-show="expanded">
-                <div class="px-4 py-4 sm:px-5">
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing
-                    elit. Commodi earum magni officiis possimus repellendus.
-                    Accusantium adipisci aliquid praesentium quaerat
-                    voluptate.
-                  </p>
-                  <div class="mt-4 flex justify-between">
-                    <div class="flex flex-wrap -space-x-2">
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <div
-                          class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
-                        >
-                          jd
-                        </div>
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-
-                      <div class="avatar h-7 w-7 hover:z-10">
-                        <img
-                          class="rounded-full ring ring-white dark:ring-navy-700"
-                          src="{{asset('images/200x200.png')}}"
-                          alt="avatar"
-                        />
-                      </div>
-                    </div>
-                    <button
-                      class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-5 w-5 rotate-45"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M7 11l5-5m0 0l5 5m-5-5v12"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="code-wrapper hidden pt-4">
-          <pre
-            class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
-            x-init="hljs.highlightElement($el)"
-          >
-            <code class="language-html" x-ignore>
-&lt;div class=&quot;flex flex-col space-y-4 sm:space-y-5 lg:space-y-6&quot;&gt;&#13;&#10;    &lt;div&#13;&#10;      x-data=&quot;{expanded:false}&quot;&#13;&#10;      class=&quot;overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;div&#13;&#10;        class=&quot;flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;div&#13;&#10;          class=&quot;flex items-center space-x-3.5 tracking-wide outline-none transition-all&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;div class=&quot;avatar h-10 w-10&quot;&gt;&#13;&#10;            &lt;img&#13;&#10;              class=&quot;rounded-full&quot;&#13;&#10;              src=&quot;images/200x200.png&quot;&#13;&#10;              alt=&quot;avatar&quot;&#13;&#10;            /&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;          &lt;div&gt;&#13;&#10;            &lt;p class=&quot;text-slate-700 line-clamp-1 dark:text-navy-100&quot;&gt;&#13;&#10;              Simon Tods&#13;&#10;            &lt;/p&gt;&#13;&#10;            &lt;p class=&quot;text-xs text-slate-500 dark:text-navy-300&quot;&gt;&#13;&#10;              Web Developer&#13;&#10;            &lt;/p&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;        &lt;button&#13;&#10;          @click=&quot;expanded = !expanded&quot;&#13;&#10;          class=&quot;btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i&#13;&#10;            :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;            class=&quot;fas fa-chevron-down text-sm transition-transform&quot;&#13;&#10;          &gt;&lt;/i&gt;&#13;&#10;        &lt;/button&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 py-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;mt-4 flex justify-between&quot;&gt;&#13;&#10;            &lt;div class=&quot;flex flex-wrap -space-x-2&quot;&gt;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;div&#13;&#10;                  class=&quot;is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700&quot;&#13;&#10;                &gt;&#13;&#10;                  jd&#13;&#10;                &lt;/div&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;            &lt;button&#13;&#10;              class=&quot;btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;svg&#13;&#10;                xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;                class=&quot;h-5 w-5 rotate-45&quot;&#13;&#10;                fill=&quot;none&quot;&#13;&#10;                viewBox=&quot;0 0 24 24&quot;&#13;&#10;                stroke=&quot;currentColor&quot;&#13;&#10;              &gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  stroke-width=&quot;2&quot;&#13;&#10;                  d=&quot;M7 11l5-5m0 0l5 5m-5-5v12&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/svg&gt;&#13;&#10;            &lt;/button&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div&#13;&#10;      x-data=&quot;{expanded:false}&quot;&#13;&#10;      class=&quot;overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;div&#13;&#10;        class=&quot;flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;div&#13;&#10;          class=&quot;flex items-center space-x-3.5 tracking-wide outline-none transition-all&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;div class=&quot;avatar h-10 w-10&quot;&gt;&#13;&#10;            &lt;div&#13;&#10;              class=&quot;is-initial rounded-full bg-warning uppercase text-white&quot;&#13;&#10;            &gt;&#13;&#10;              KG&#13;&#10;            &lt;/div&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;          &lt;div&gt;&#13;&#10;            &lt;p class=&quot;text-slate-700 line-clamp-1 dark:text-navy-100&quot;&gt;&#13;&#10;              Konnor Guzman&#13;&#10;            &lt;/p&gt;&#13;&#10;            &lt;p class=&quot;text-xs text-slate-500 dark:text-navy-300&quot;&gt;&#13;&#10;              Frontend Developer&#13;&#10;            &lt;/p&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;        &lt;button&#13;&#10;          @click=&quot;expanded = !expanded&quot;&#13;&#10;          class=&quot;btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i&#13;&#10;            :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;            class=&quot;fas fa-chevron-down text-sm transition-transform&quot;&#13;&#10;          &gt;&lt;/i&gt;&#13;&#10;        &lt;/button&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 py-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;mt-4 flex justify-between&quot;&gt;&#13;&#10;            &lt;div class=&quot;flex flex-wrap -space-x-2&quot;&gt;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;div&#13;&#10;                  class=&quot;is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700&quot;&#13;&#10;                &gt;&#13;&#10;                  jd&#13;&#10;                &lt;/div&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;            &lt;button&#13;&#10;              class=&quot;btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;svg&#13;&#10;                xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;                class=&quot;h-5 w-5 rotate-45&quot;&#13;&#10;                fill=&quot;none&quot;&#13;&#10;                viewBox=&quot;0 0 24 24&quot;&#13;&#10;                stroke=&quot;currentColor&quot;&#13;&#10;              &gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  stroke-width=&quot;2&quot;&#13;&#10;                  d=&quot;M7 11l5-5m0 0l5 5m-5-5v12&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/svg&gt;&#13;&#10;            &lt;/button&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;    &lt;div&#13;&#10;      x-data=&quot;{expanded:false}&quot;&#13;&#10;      class=&quot;overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;div&#13;&#10;        class=&quot;flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;div&#13;&#10;          class=&quot;flex items-center space-x-3.5 tracking-wide outline-none transition-all&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;div class=&quot;avatar h-10 w-10&quot;&gt;&#13;&#10;            &lt;img&#13;&#10;              class=&quot;rounded-full&quot;&#13;&#10;              src=&quot;images/200x200.png&quot;&#13;&#10;              alt=&quot;avatar&quot;&#13;&#10;            /&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;          &lt;div&gt;&#13;&#10;            &lt;p class=&quot;text-slate-700 line-clamp-1 dark:text-navy-100&quot;&gt;&#13;&#10;              Derrick Simmons&#13;&#10;            &lt;/p&gt;&#13;&#10;            &lt;p class=&quot;text-xs text-slate-500 dark:text-navy-300&quot;&gt;&#13;&#10;              UI/UX Designer&#13;&#10;            &lt;/p&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;        &lt;button&#13;&#10;          @click=&quot;expanded = !expanded&quot;&#13;&#10;          class=&quot;btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10;        &gt;&#13;&#10;          &lt;i&#13;&#10;            :class=&quot;expanded &amp;&amp; &apos;-rotate-180&apos;&quot;&#13;&#10;            class=&quot;fas fa-chevron-down text-sm transition-transform&quot;&#13;&#10;          &gt;&lt;/i&gt;&#13;&#10;        &lt;/button&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;      &lt;div x-collapse x-show=&quot;expanded&quot;&gt;&#13;&#10;        &lt;div class=&quot;px-4 py-4 sm:px-5&quot;&gt;&#13;&#10;          &lt;p&gt;&#13;&#10;            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi&#13;&#10;            earum magni officiis possimus repellendus. Accusantium adipisci&#13;&#10;            aliquid praesentium quaerat voluptate.&#13;&#10;          &lt;/p&gt;&#13;&#10;          &lt;div class=&quot;mt-4 flex justify-between&quot;&gt;&#13;&#10;            &lt;div class=&quot;flex flex-wrap -space-x-2&quot;&gt;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;div&#13;&#10;                  class=&quot;is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700&quot;&#13;&#10;                &gt;&#13;&#10;                  jd&#13;&#10;                &lt;/div&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div class=&quot;avatar h-7 w-7 hover:z-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full ring ring-white dark:ring-navy-700&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/div&gt;&#13;&#10;            &lt;button&#13;&#10;              class=&quot;btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;svg&#13;&#10;                xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;                class=&quot;h-5 w-5 rotate-45&quot;&#13;&#10;                fill=&quot;none&quot;&#13;&#10;                viewBox=&quot;0 0 24 24&quot;&#13;&#10;                stroke=&quot;currentColor&quot;&#13;&#10;              &gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  stroke-width=&quot;2&quot;&#13;&#10;                  d=&quot;M7 11l5-5m0 0l5 5m-5-5v12&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/svg&gt;&#13;&#10;            &lt;/button&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/div&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;                </code>
-          </pre>
-        </div>
-      </div>
-    </div>
-  </main>
-</x-app-layout>

resources/views/pages/components-drawer.blade.php

-<x-app-layout title="Drawer Component" is-sidebar-open="true" is-header-blur="true">
-    <main class="main-content w-full px-[var(--margin-x)] pb-8">
-        <div class="flex items-center space-x-4 py-5 lg:py-6">
-            <h2 class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl">
-                Drawer
-            </h2>
-            <div class="hidden h-full py-1 sm:flex">
-                <div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
-            </div>
-            <ul class="hidden flex-wrap items-center space-x-2 sm:flex">
-                <li class="flex items-center space-x-2">
-                    <a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-                        href="#">Components</a>
-                    <svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                    </svg>
-                </li>
-                <li>Drawer</li>
-            </ul>
-        </div>
-        <div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
-            <!-- Left Drawer -->
-            <div class="card px-4 pb-4 sm:px-5">
-                <div class="my-3 flex h-8 items-center justify-between">
-                    <h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                        Left Drawer
-                    </h2>
-                </div>
-                <div>
-                    <p class="max-w-xl">
-                        Drawer is similar to modal, with a bit difference on placement.
-                        Check out code for detail of usage.
-                    </p>
-                    <div class="mt-5">
-                        <button @click="$dispatch('show-drawer', { drawerId: 'left-drawer' })"
-                            class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                            Left Drawer
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Right Drawer -->
-            <div class="card px-4 pb-4 sm:px-5">
-                <div class="my-3 flex h-8 items-center justify-between">
-                    <h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
-                        Right Drawer
-                    </h2>
-                </div>
-                <div>
-                    <p class="max-w-xl">
-                        Drawer is similar to modal, with a bit difference on placement.
-                        Check out code for detail of usage.
-                    </p>
-                    <div class="mt-5">
-                        <button @click="$dispatch('show-drawer', { drawerId: 'right-drawer' })"
-                            class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
-                            Right Drawer
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-    <div x-show="showDrawer" x-data="{ showDrawer: false }"
-        x-on:show-drawer.window="($event.detail.drawerId === 'left-drawer') && (showDrawer = true)"
-        @keydown.window.escape="showDrawer = false">
-        <div class="fixed inset-0 z-[100] bg-slate-900/60 transition-opacity duration-200" @click="showDrawer = false"
-            x-show="showDrawer" x-transition:enter="ease-out" x-transition:enter-start="opacity-0"
-            x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
-            x-transition:leave-end="opacity-0"></div>
-        <div class="fixed left-0 top-0 z-[101] h-full w-72">
-            <div class="flex h-full w-full transform-gpu flex-col bg-white transition-transform duration-200 dark:bg-navy-700"
-                x-show="showDrawer" x-transition:enter="ease-out" x-transition:enter-start="-translate-x-full"
-                x-transition:enter-end="translate-x-0" x-transition:leave="ease-in"
-                x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full">
-                <div class="h-24">
-                    <img class="h-full w-full object-cover object-center" src="{{ asset('images/800x600.png') }}"
-                        alt="image" />
-                </div>
-                <div class="flex space-x-5 px-5">
-                    <div class="avatar -mt-5 h-20 w-20">
-                        <img class="rounded-full border-2 border-white dark:border-navy-700"
-                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                    </div>
-                    <div class="mt-2 w-full">
-                        <div class="flex justify-between space-x-3">
-                            <h4 class="text-base font-medium text-slate-700 line-clamp-1 dark:text-navy-50">
-                                John Doe
-                            </h4>
-                            <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                                class="inline-flex">
-                                <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                    class="btn -mr-1.5 h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                    </svg>
-                                </button>
-
-                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                    <div
-                                        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                    Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                    else</a>
-                                            </li>
-                                        </ul>
-                                        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                    Link</a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <a href="#"
-                            class="cursor-pointer text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">@johndoe</a>
-                    </div>
-                </div>
-                <div class="my-4 mx-5 h-px bg-slate-200 dark:bg-navy-500"></div>
-                <ul class="grow space-y-1.5 px-5 font-inter font-medium">
-                    <li>
-                        <a class="flex items-center space-x-2 rounded-full bg-primary px-5 py-2.5 tracking-wide text-white outline-none transition-all dark:bg-accent"
-                            href="#">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                    d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
-                            </svg>
-                            <span>Getting start</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a class="group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
-                            href="#">
-                            <svg xmlns="http://www.w3.org/2000/svg"
-                                class="h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                    d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" />
-                            </svg>
-
-                            <span>Shipping</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a class="group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
-                            href="#">
-                            <svg xmlns="http://www.w3.org/2000/svg"
-                                class="h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
-                                viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                    d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
-                            </svg>
-                            <span>Payments</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a class="group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
-                            href="#">
-                            <svg xmlns="http://www.w3.org/2000/svg"
-                                class="h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                    d="M16 15v-1a4 4 0 00-4-4H8m0 0l3 3m-3-3l3-3m9 14V5a2 2 0 00-2-2H6a2 2 0 00-2 2v16l4-2 4 2 4-2 4 2z" />
-                            </svg>
-                            <span>Returns</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a class="group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
-                            href="#">
-                            <svg xmlns="http://www.w3.org/2000/svg"
-                                class="h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-                            </svg>
-                            <span>My Account</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a class="group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
-                            href="#">
-                            <svg xmlns="http://www.w3.org/2000/svg"
-                                class="h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
-                                viewBox="0 0 24 24" fill="none">
-                                <path
-                                    d="M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z"
-                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                                <path
-                                    d="M12.0449 15.8486C12.625 15.8486 13.1318 15.6729 13.5654 15.3213C13.999 14.9697 14.2393 14.5303 14.2861 14.0029H15.8242C15.7949 14.5479 15.6074 15.0664 15.2617 15.5586C14.916 16.0508 14.4531 16.4434 13.873 16.7363C13.2988 17.0293 12.6895 17.1758 12.0449 17.1758C10.75 17.1758 9.71875 16.7451 8.95117 15.8838C8.18945 15.0166 7.80859 13.833 7.80859 12.333V12.0605C7.80859 11.1348 7.97852 10.3115 8.31836 9.59082C8.6582 8.87012 9.14453 8.31055 9.77734 7.91211C10.416 7.51367 11.1689 7.31445 12.0361 7.31445C13.1025 7.31445 13.9873 7.63379 14.6904 8.27246C15.3994 8.91113 15.7773 9.74023 15.8242 10.7598H14.2861C14.2393 10.1445 14.0049 9.64062 13.583 9.24805C13.167 8.84961 12.6514 8.65039 12.0361 8.65039C11.21 8.65039 10.5684 8.94922 10.1113 9.54688C9.66016 10.1387 9.43457 10.9971 9.43457 12.1221V12.4297C9.43457 13.5254 9.66016 14.3691 10.1113 14.9609C10.5625 15.5527 11.207 15.8486 12.0449 15.8486Z"
-                                    fill="currentColor" />
-                            </svg>
-                            <span>Copyright &amp; Legal</span>
-                        </a>
-                    </li>
-                </ul>
-                <div class="p-5">
-                    <button @click="showDrawer = false"
-                        class="btn w-full space-x-2 bg-warning/10 font-medium text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
-                        </svg>
-                        <span>Logout</span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div x-show="showDrawer" x-data="{ showDrawer: false }"
-        x-on:show-drawer.window="($event.detail.drawerId === 'right-drawer') && (showDrawer = true)"
-        @keydown.window.escape="showDrawer = false">
-        <div class="fixed inset-0 z-[100] bg-slate-900/60 transition-opacity duration-200" @click="showDrawer = false"
-            x-show="showDrawer" x-transition:enter="ease-out" x-transition:enter-start="opacity-0"
-            x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
-            x-transition:leave-end="opacity-0"></div>
-        <div class="fixed right-0 top-0 z-[101] h-full w-72">
-            <div class="flex h-full w-full transform-gpu flex-col bg-white transition-transform duration-200 dark:bg-navy-700"
-                x-show="showDrawer" x-transition:enter="ease-out" x-transition:enter-start="translate-x-full"
-                x-transition:enter-end="translate-x-0" x-transition:leave="ease-in"
-                x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
-                <div class="h-24">
-                    <img class="h-full w-full object-cover object-center" src="{{ asset('images/800x600.png') }}"
-                        alt="image" />
-                </div>
-                <div class="flex space-x-5 px-5">
-                    <div class="avatar -mt-5 h-20 w-20">
-                        <img class="rounded-full border-2 border-white dark:border-navy-700"
-                            src="{{ asset('images/200x200.png') }}" alt="avatar" />
-                    </div>
-                    <div class="mt-2 w-full">
-                        <div class="flex justify-between space-x-3">
-                            <h4 class="text-base font-medium text-slate-700 line-clamp-1 dark:text-navy-50">
-                                John Doe
-                            </h4>
-                            <div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
-                                class="inline-flex">
-                                <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
-                                    class="btn -mr-1.5 h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
-                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round"
-                                            d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
-                                    </svg>
-                                </button>
-
-                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
-                                    <div
-                                        class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
-                                                    Action</a>
-                                            </li>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
-                                                    else</a>
-                                            </li>
-                                        </ul>
-                                        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
-                                        <ul>
-                                            <li>
-                                                <a href="#"
-                                                    class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
-                                                    Link</a>
-                                            </li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <a href="#"
-                            class="cursor-pointer text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">@johndoe</a>
-                    </div>
-                </div>
-                <div class="my-4 mx-5 h-px bg-slate-200 dark:bg-navy-500"></div>
-                <ul class="grow space-y-1.5 px-5 font-inter font-medium">
-                    <li>
-                        <a class="flex items-center space-x-2 rounded-full bg-primary px-5 py-2.5 tracking-wide text-white outline-none transition-all dark:bg-accent"
-                            href="#">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
-                                viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                    d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
-                            </svg>
-                            <span>Getting start</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a class="group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
-                            href="#">
-                            <svg xmlns="http://www.w3.org/2000/svg"
-                                class="h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                    d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" />
-                            </svg>
-
-                            <span>Shipping</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a class="group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
-                            href="#">
-                            <svg xmlns="http://www.w3.org/2000/svg"
-                                class="h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
-                                viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                    d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
-                            </svg>
-                            <span>Payments</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a class="group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
-                            href="#">
-                            <svg xmlns="http://www.w3.org/2000/svg"
-                                class="h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                    d="M16 15v-1a4 4 0 00-4-4H8m0 0l3 3m-3-3l3-3m9 14V5a2 2 0 00-2-2H6a2 2 0 00-2 2v16l4-2 4 2 4-2 4 2z" />
-                            </svg>
-                            <span>Returns</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a class="group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
-                            href="#">
-                            <svg xmlns="http://www.w3.org/2000/svg"
-                                class="h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
-                                fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-                            </svg>
-                            <span>My Account</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a class="group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
-                            href="#">
-                            <svg xmlns="http://www.w3.org/2000/svg"
-                                class="h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
-                                viewBox="0 0 24 24" fill="none">
-                                <path
-                                    d="M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z"
-                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                                <path
-                                    d="M12.0449 15.8486C12.625 15.8486 13.1318 15.6729 13.5654 15.3213C13.999 14.9697 14.2393 14.5303 14.2861 14.0029H15.8242C15.7949 14.5479 15.6074 15.0664 15.2617 15.5586C14.916 16.0508 14.4531 16.4434 13.873 16.7363C13.2988 17.0293 12.6895 17.1758 12.0449 17.1758C10.75 17.1758 9.71875 16.7451 8.95117 15.8838C8.18945 15.0166 7.80859 13.833 7.80859 12.333V12.0605C7.80859 11.1348 7.97852 10.3115 8.31836 9.59082C8.6582 8.87012 9.14453 8.31055 9.77734 7.91211C10.416 7.51367 11.1689 7.31445 12.0361 7.31445C13.1025 7.31445 13.9873 7.63379 14.6904 8.27246C15.3994 8.91113 15.7773 9.74023 15.8242 10.7598H14.2861C14.2393 10.1445 14.0049 9.64062 13.583 9.24805C13.167 8.84961 12.6514 8.65039 12.0361 8.65039C11.21 8.65039 10.5684 8.94922 10.1113 9.54688C9.66016 10.1387 9.43457 10.9971 9.43457 12.1221V12.4297C9.43457 13.5254 9.66016 14.3691 10.1113 14.9609C10.5625 15.5527 11.207 15.8486 12.0449 15.8486Z"
-                                    fill="currentColor" />
-                            </svg>
-                            <span>Copyright &amp; Legal</span>
-                        </a>
-                    </li>
-                </ul>
-                <div class="p-5">
-                    <button @click="showDrawer = false"
-                        class="btn w-full space-x-2 bg-warning/10 font-medium text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
-                        </svg>
-                        <span>Logout</span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</x-app-layout>

resources/views/pages/components-dropdown.blade.php

-<x-app-layout title="Dropdown Component" is-sidebar-open="true" is-header-blur="true">
-    <main class="main-content w-full px-[var(--margin-x)] pb-8">
-        <div class="flex items-center space-x-4 py-5 lg:py-6">
-          <h2
-            class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
-          >
-            Dropdown
-          </h2>
-          <div class="hidden h-full py-1 sm:flex">
-            <div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
-          </div>
-          <ul class="hidden flex-wrap items-center space-x-2 sm:flex">
-            <li class="flex items-center space-x-2">
-              <a
-                class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-                href="#"
-                >Components</a
-              >
-              <svg
-                x-ignore
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-            </li>
-            <li>Dropdown</li>
-          </ul>
-        </div>
-        <div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
-          <!-- Basic Dropdown -->
-          <div class="card px-4 pb-4 sm:px-5">
-            <div class="my-3 flex h-8 items-center justify-between">
-              <h2
-                class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-              >
-                Basic Dropdown
-              </h2>
-              <label class="inline-flex items-center space-x-2">
-                <span class="text-xs text-slate-400 dark:text-navy-300"
-                  >Code</span
-                >
-                <input
-                  @change="helpers.toggleCode"
-                  class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                  type="checkbox"
-                />
-              </label>
-            </div>
-            <div class="max-w-xl">
-              <p>
-                Dropdowns are lightweight context menus for housing navigation
-                and actions. Check out code for detail of usage.
-              </p>
-              <div class="inline-space mt-5 flex flex-wrap items-end">
-                <div
-                  x-data="usePopper({placement:'bottom-start',offset:4})"
-                  @click.outside="if(isShowPopper) isShowPopper = false"
-                  class="inline-flex"
-                >
-                  <button
-                    class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
-                    x-ref="popperRef"
-                    @click="isShowPopper = !isShowPopper"
-                  >
-                    <span>Dropdown</span>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-4 w-4 transition-transform duration-200"
-                      :class="isShowPopper && 'rotate-180'"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      stroke-width="2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button>
-                  <div
-                    x-ref="popperRoot"
-                    class="popper-root"
-                    :class="isShowPopper && 'show'"
-                  >
-                    <div
-                      class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
-                    >
-                      <ul>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Action</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Another Action</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                      </ul>
-                      <div
-                        class="my-1 h-px bg-slate-150 dark:bg-navy-500"
-                      ></div>
-                      <ul>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Separated Link</a
-                          >
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  x-data="usePopper({placement:'bottom-start',offset:4})"
-                  @click.outside="if(isShowPopper) isShowPopper = false"
-                  class="inline-flex"
-                >
-                  <button
-                    class="btn space-x-2 rounded-full bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
-                    x-ref="popperRef"
-                    @click="isShowPopper = !isShowPopper"
-                  >
-                    <span>Dropdown</span>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-4 w-4 transition-transform duration-200"
-                      :class="isShowPopper && 'rotate-180'"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      stroke-width="2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button>
-                  <div
-                    x-ref="popperRoot"
-                    class="popper-root"
-                    :class="isShowPopper && 'show'"
-                  >
-                    <div
-                      class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
-                    >
-                      <ul>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Action</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Another Action</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                      </ul>
-                      <div
-                        class="my-1 h-px bg-slate-150 dark:bg-navy-500"
-                      ></div>
-                      <ul>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Separated Link</a
-                          >
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  x-data="usePopper({placement:'bottom-end',offset:4})"
-                  @click.outside="if(isShowPopper) isShowPopper = false"
-                  class="inline-flex"
-                >
-                  <button
-                    x-ref="popperRef"
-                    @click="isShowPopper = !isShowPopper"
-                    class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-5 w-5"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      stroke-width="2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-                      />
-                    </svg>
-                  </button>
-
-                  <div
-                    x-ref="popperRoot"
-                    class="popper-root"
-                    :class="isShowPopper && 'show'"
-                  >
-                    <div
-                      class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
-                    >
-                      <ul>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Action</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Another Action</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                      </ul>
-                      <div
-                        class="my-1 h-px bg-slate-150 dark:bg-navy-500"
-                      ></div>
-                      <ul>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Separated Link</a
-                          >
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  x-data="usePopper({placement:'bottom-end',offset:4})"
-                  @click.outside="if(isShowPopper) isShowPopper = false"
-                  class="inline-flex"
-                >
-                  <button
-                    x-ref="popperRef"
-                    @click="isShowPopper = !isShowPopper"
-                    class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-5 w-5"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      stroke-width="2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
-                      />
-                    </svg>
-                  </button>
-
-                  <div
-                    x-ref="popperRoot"
-                    class="popper-root"
-                    :class="isShowPopper && 'show'"
-                  >
-                    <div
-                      class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
-                    >
-                      <ul>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Action</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Another Action</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                      </ul>
-                      <div
-                        class="my-1 h-px bg-slate-150 dark:bg-navy-500"
-                      ></div>
-                      <ul>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Separated Link</a
-                          >
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="code-wrapper hidden pt-4">
-              <pre
-                class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
-                x-init="hljs.highlightElement($el)"
-              >
-                <code class="language-html" x-ignore>
-  &lt;!-- First --&gt;&#13;&#10;  &lt;div&#13;&#10;    x-data=&quot;usePopper({placement:&apos;bottom-start&apos;,offset:4})&quot;&#13;&#10;    @click.outside=&quot;if(isShowPopper) isShowPopper = false&quot;&#13;&#10;    class=&quot;inline-flex&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;button&#13;&#10;      class=&quot;btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;      x-ref=&quot;popperRef&quot;&#13;&#10;      @click=&quot;isShowPopper = !isShowPopper&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;span&gt;Dropdown&lt;/span&gt;&#13;&#10;      &lt;svg&#13;&#10;        xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;        class=&quot;h-4 w-4 transition-transform duration-200&quot;&#13;&#10;        :class=&quot;isShowPopper &amp;&amp; &apos;rotate-180&apos;&quot;&#13;&#10;        fill=&quot;none&quot;&#13;&#10;        viewBox=&quot;0 0 24 24&quot;&#13;&#10;        stroke=&quot;currentColor&quot;&#13;&#10;        stroke-width=&quot;2&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;path&#13;&#10;          stroke-linecap=&quot;round&quot;&#13;&#10;          stroke-linejoin=&quot;round&quot;&#13;&#10;          d=&quot;M19 9l-7 7-7-7&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/svg&gt;&#13;&#10;    &lt;/button&gt;&#13;&#10;    &lt;div x-ref=&quot;popperRoot&quot; class=&quot;popper-root&quot; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        class=&quot;popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;ul&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Action&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Another Action&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;        &lt;/ul&gt;&#13;&#10;        &lt;div class=&quot;my-1 h-px bg-slate-150 dark:bg-navy-500&quot;&gt;&lt;/div&gt;&#13;&#10;        &lt;ul&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Separated Link&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;        &lt;/ul&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;&#13;&#10;  &lt;!-- Second --&gt;&#13;&#10;  &lt;div&#13;&#10;    x-data=&quot;usePopper({placement:&apos;bottom-start&apos;,offset:4})&quot;&#13;&#10;    @click.outside=&quot;if(isShowPopper) isShowPopper = false&quot;&#13;&#10;    class=&quot;inline-flex&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;button&#13;&#10;      class=&quot;btn space-x-2 rounded-full bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;      x-ref=&quot;popperRef&quot;&#13;&#10;      @click=&quot;isShowPopper = !isShowPopper&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;span&gt;Dropdown&lt;/span&gt;&#13;&#10;      &lt;svg&#13;&#10;        xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;        class=&quot;h-4 w-4 transition-transform duration-200&quot;&#13;&#10;        :class=&quot;isShowPopper &amp;&amp; &apos;rotate-180&apos;&quot;&#13;&#10;        fill=&quot;none&quot;&#13;&#10;        viewBox=&quot;0 0 24 24&quot;&#13;&#10;        stroke=&quot;currentColor&quot;&#13;&#10;        stroke-width=&quot;2&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;path&#13;&#10;          stroke-linecap=&quot;round&quot;&#13;&#10;          stroke-linejoin=&quot;round&quot;&#13;&#10;          d=&quot;M19 9l-7 7-7-7&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/svg&gt;&#13;&#10;    &lt;/button&gt;&#13;&#10;    &lt;div x-ref=&quot;popperRoot&quot; class=&quot;popper-root&quot; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        class=&quot;popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;ul&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Action&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Another Action&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;        &lt;/ul&gt;&#13;&#10;        &lt;div class=&quot;my-1 h-px bg-slate-150 dark:bg-navy-500&quot;&gt;&lt;/div&gt;&#13;&#10;        &lt;ul&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Separated Link&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;        &lt;/ul&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;&#13;&#10;  &lt;!-- Third --&gt;&#13;&#10;  &lt;div&#13;&#10;    x-data=&quot;usePopper({placement:&apos;bottom-end&apos;,offset:4})&quot;&#13;&#10;    @click.outside=&quot;if(isShowPopper) isShowPopper = false&quot;&#13;&#10;    class=&quot;inline-flex&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;button&#13;&#10;      x-ref=&quot;popperRef&quot;&#13;&#10;      @click=&quot;isShowPopper = !isShowPopper&quot;&#13;&#10;      class=&quot;btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;svg&#13;&#10;        xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;        class=&quot;h-5 w-5&quot;&#13;&#10;        fill=&quot;none&quot;&#13;&#10;        viewBox=&quot;0 0 24 24&quot;&#13;&#10;        stroke=&quot;currentColor&quot;&#13;&#10;        stroke-width=&quot;2&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;path&#13;&#10;          stroke-linecap=&quot;round&quot;&#13;&#10;          stroke-linejoin=&quot;round&quot;&#13;&#10;          d=&quot;M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/svg&gt;&#13;&#10;    &lt;/button&gt;&#13;&#10;&#13;&#10;    &lt;div x-ref=&quot;popperRoot&quot; class=&quot;popper-root&quot; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        class=&quot;popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;ul&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Action&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Another Action&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;        &lt;/ul&gt;&#13;&#10;        &lt;div class=&quot;my-1 h-px bg-slate-150 dark:bg-navy-500&quot;&gt;&lt;/div&gt;&#13;&#10;        &lt;ul&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Separated Link&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;        &lt;/ul&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;&#13;&#10;  &lt;!-- Fourth --&gt;&#13;&#10;  &lt;div&#13;&#10;    x-data=&quot;usePopper({placement:&apos;bottom-end&apos;,offset:4})&quot;&#13;&#10;    @click.outside=&quot;if(isShowPopper) isShowPopper = false&quot;&#13;&#10;    class=&quot;inline-flex&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;button&#13;&#10;      x-ref=&quot;popperRef&quot;&#13;&#10;      @click=&quot;isShowPopper = !isShowPopper&quot;&#13;&#10;      class=&quot;btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;svg&#13;&#10;        xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;        class=&quot;h-5 w-5&quot;&#13;&#10;        fill=&quot;none&quot;&#13;&#10;        viewBox=&quot;0 0 24 24&quot;&#13;&#10;        stroke=&quot;currentColor&quot;&#13;&#10;        stroke-width=&quot;2&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;path&#13;&#10;          stroke-linecap=&quot;round&quot;&#13;&#10;          stroke-linejoin=&quot;round&quot;&#13;&#10;          d=&quot;M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z&quot;&#13;&#10;        &gt;&lt;/path&gt;&#13;&#10;      &lt;/svg&gt;&#13;&#10;    &lt;/button&gt;&#13;&#10;&#13;&#10;    &lt;div x-ref=&quot;popperRoot&quot; class=&quot;popper-root&quot; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        class=&quot;popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;ul&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Action&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Another Action&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;        &lt;/ul&gt;&#13;&#10;        &lt;div class=&quot;my-1 h-px bg-slate-150 dark:bg-navy-500&quot;&gt;&lt;/div&gt;&#13;&#10;        &lt;ul&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex  items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Separated Link&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;        &lt;/ul&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;</code>
-              </pre>
-            </div>
-          </div>
-
-          <!-- Primary Actions -->
-          <div class="card px-4 pb-4 sm:px-5">
-            <div class="my-3 flex h-8 items-center justify-between">
-              <h2
-                class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-              >
-                Primary Actions
-              </h2>
-              <label class="inline-flex items-center space-x-2">
-                <span class="text-xs text-slate-400 dark:text-navy-300"
-                  >Code</span
-                >
-                <input
-                  @change="helpers.toggleCode"
-                  class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                  type="checkbox"
-                />
-              </label>
-            </div>
-            <div class="max-w-xl">
-              <p>
-                Dropdowns are lightweight context menus for housing navigation
-                and actions. Check out code for detail of usage.
-              </p>
-              <div class="mt-5">
-                <div
-                  x-data="usePopper({placement:'bottom-start',offset:4})"
-                  @click.outside="if(isShowPopper) isShowPopper = false"
-                  class="inline-flex"
-                >
-                  <button
-                    class="btn space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
-                    x-ref="popperRef"
-                    @click="isShowPopper = !isShowPopper"
-                  >
-                    <span>Dropdown</span>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-4 w-4 transition-transform duration-200"
-                      :class="isShowPopper && 'rotate-180'"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      stroke-width="2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button>
-                  <div
-                    x-ref="popperRoot"
-                    class="popper-root"
-                    :class="isShowPopper && 'show'"
-                  >
-                    <div
-                      class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
-                    >
-                      <ul>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
-                            >Action</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
-                            >Another Action</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
-                            >Something Else</a
-                          >
-                        </li>
-                      </ul>
-                      <div
-                        class="my-1 h-px bg-slate-150 dark:bg-navy-500"
-                      ></div>
-                      <ul>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
-                            >Separated Link</a
-                          >
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="code-wrapper hidden pt-4">
-              <pre
-                class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
-                x-init="hljs.highlightElement($el)"
-              >
-                <code class="language-html" x-ignore>
-  &lt;div&#13;&#10;    x-data=&quot;usePopper({placement:&apos;bottom-start&apos;,offset:4})&quot;&#13;&#10;    @click.outside=&quot;if(isShowPopper) isShowPopper = false&quot;&#13;&#10;    class=&quot;inline-flex&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;button&#13;&#10;      class=&quot;btn space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10;      x-ref=&quot;popperRef&quot;&#13;&#10;      @click=&quot;isShowPopper = !isShowPopper&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;span&gt;Dropdown&lt;/span&gt;&#13;&#10;      &lt;svg&#13;&#10;        xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;        class=&quot;h-4 w-4 transition-transform duration-200&quot;&#13;&#10;        :class=&quot;isShowPopper &amp;&amp; &apos;rotate-180&apos;&quot;&#13;&#10;        fill=&quot;none&quot;&#13;&#10;        viewBox=&quot;0 0 24 24&quot;&#13;&#10;        stroke=&quot;currentColor&quot;&#13;&#10;        stroke-width=&quot;2&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;path&#13;&#10;          stroke-linecap=&quot;round&quot;&#13;&#10;          stroke-linejoin=&quot;round&quot;&#13;&#10;          d=&quot;M19 9l-7 7-7-7&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/svg&gt;&#13;&#10;    &lt;/button&gt;&#13;&#10;    &lt;div x-ref=&quot;popperRoot&quot; class=&quot;popper-root&quot; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        class=&quot;popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;ul&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent&quot;&#13;&#10;              &gt;Action&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent&quot;&#13;&#10;              &gt;Another Action&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent&quot;&#13;&#10;              &gt;Something Else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;        &lt;/ul&gt;&#13;&#10;        &lt;div class=&quot;my-1 h-px bg-slate-150 dark:bg-navy-500&quot;&gt;&lt;/div&gt;&#13;&#10;        &lt;ul&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent&quot;&#13;&#10;              &gt;Separated Link&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;        &lt;/ul&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;</code>
-              </pre>
-            </div>
-          </div>
-
-          <!-- Dropdown Icons -->
-          <div class="card px-4 pb-4 sm:px-5">
-            <div class="my-3 flex h-8 items-center justify-between">
-              <h2
-                class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-              >
-                Dropdown Icons
-              </h2>
-              <label class="inline-flex items-center space-x-2">
-                <span class="text-xs text-slate-400 dark:text-navy-300"
-                  >Code</span
-                >
-                <input
-                  @change="helpers.toggleCode"
-                  class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                  type="checkbox"
-                />
-              </label>
-            </div>
-            <div class="max-w-xl">
-              <p>
-                Dropdowns are lightweight context menus for housing navigation
-                and actions. Check out code for detail of usage.
-              </p>
-              <div class="mt-5">
-                <div
-                  x-data="usePopper({placement:'bottom-start',offset:4})"
-                  @click.outside="if(isShowPopper) isShowPopper = false"
-                  class="inline-flex"
-                >
-                  <button
-                    class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
-                    x-ref="popperRef"
-                    @click="isShowPopper = !isShowPopper"
-                  >
-                    <span>Dropdown</span>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-4 w-4 transition-transform duration-200"
-                      :class="isShowPopper && 'rotate-180'"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      stroke-width="2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button>
-                  <div
-                    x-ref="popperRoot"
-                    class="popper-root"
-                    :class="isShowPopper && 'show'"
-                  >
-                    <div
-                      class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
-                    >
-                      <ul>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              class="mt-px h-4.5 w-4.5"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                              stroke-width="1.5"
-                            >
-                              <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                              />
-                              <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                              />
-                            </svg>
-                            <span> View</span></a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              class="h-4.5 w-4.5"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                              stroke-width="1.5"
-                            >
-                              <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-                              />
-                            </svg>
-                            <span> Edit</span></a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              class="h-4.5 w-4.5"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                              stroke-width="1.5"
-                            >
-                              <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                              />
-                            </svg>
-                            <span> Update</span></a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20"
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              class="h-4.5 w-4.5"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                              stroke-width="1.5"
-                            >
-                              <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                              />
-                            </svg>
-                            <span> Delete item</span></a
-                          >
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="code-wrapper hidden pt-4">
-              <pre
-                class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
-                x-init="hljs.highlightElement($el)"
-              >
-                <code class="language-html" x-ignore>
-  &lt;div&#13;&#10;    x-data=&quot;usePopper({placement:&apos;bottom-start&apos;,offset:4})&quot;&#13;&#10;    @click.outside=&quot;if(isShowPopper) isShowPopper = false&quot;&#13;&#10;    class=&quot;inline-flex&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;button&#13;&#10;      class=&quot;btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;      x-ref=&quot;popperRef&quot;&#13;&#10;      @click=&quot;isShowPopper = !isShowPopper&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;span&gt;Dropdown&lt;/span&gt;&#13;&#10;      &lt;svg&#13;&#10;        xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;        class=&quot;h-4 w-4 transition-transform duration-200&quot;&#13;&#10;        :class=&quot;isShowPopper &amp;&amp; &apos;rotate-180&apos;&quot;&#13;&#10;        fill=&quot;none&quot;&#13;&#10;        viewBox=&quot;0 0 24 24&quot;&#13;&#10;        stroke=&quot;currentColor&quot;&#13;&#10;        stroke-width=&quot;2&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;path&#13;&#10;          stroke-linecap=&quot;round&quot;&#13;&#10;          stroke-linejoin=&quot;round&quot;&#13;&#10;          d=&quot;M19 9l-7 7-7-7&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/svg&gt;&#13;&#10;    &lt;/button&gt;&#13;&#10;    &lt;div x-ref=&quot;popperRoot&quot; class=&quot;popper-root&quot; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        class=&quot;popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;ul&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;svg&#13;&#10;                xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;                class=&quot;mt-px h-4.5 w-4.5&quot;&#13;&#10;                fill=&quot;none&quot;&#13;&#10;                viewBox=&quot;0 0 24 24&quot;&#13;&#10;                stroke=&quot;currentColor&quot;&#13;&#10;                stroke-width=&quot;1.5&quot;&#13;&#10;              &gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  d=&quot;M15 12a3 3 0 11-6 0 3 3 0 016 0z&quot;&#13;&#10;                /&gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  d=&quot;M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/svg&gt;&#13;&#10;              &lt;span&gt; View&lt;/span&gt;&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;svg&#13;&#10;                xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;                class=&quot;h-4.5 w-4.5&quot;&#13;&#10;                fill=&quot;none&quot;&#13;&#10;                viewBox=&quot;0 0 24 24&quot;&#13;&#10;                stroke=&quot;currentColor&quot;&#13;&#10;                stroke-width=&quot;1.5&quot;&#13;&#10;              &gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  d=&quot;M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/svg&gt;&#13;&#10;              &lt;span&gt; Edit&lt;/span&gt;&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;svg&#13;&#10;                xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;                class=&quot;h-4.5 w-4.5&quot;&#13;&#10;                fill=&quot;none&quot;&#13;&#10;                viewBox=&quot;0 0 24 24&quot;&#13;&#10;                stroke=&quot;currentColor&quot;&#13;&#10;                stroke-width=&quot;1.5&quot;&#13;&#10;              &gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  d=&quot;M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/svg&gt;&#13;&#10;              &lt;span&gt; Update&lt;/span&gt;&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;svg&#13;&#10;                xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;                class=&quot;h-4.5 w-4.5&quot;&#13;&#10;                fill=&quot;none&quot;&#13;&#10;                viewBox=&quot;0 0 24 24&quot;&#13;&#10;                stroke=&quot;currentColor&quot;&#13;&#10;                stroke-width=&quot;1.5&quot;&#13;&#10;              &gt;&#13;&#10;                &lt;path&#13;&#10;                  stroke-linecap=&quot;round&quot;&#13;&#10;                  stroke-linejoin=&quot;round&quot;&#13;&#10;                  d=&quot;M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/svg&gt;&#13;&#10;              &lt;span&gt; Delete item&lt;/span&gt;&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;        &lt;/ul&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;</code>
-              </pre>
-            </div>
-          </div>
-
-          <!-- Scrolled Dropdown -->
-          <div class="card px-4 pb-4 sm:px-5">
-            <div class="my-3 flex h-8 items-center justify-between">
-              <h2
-                class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-              >
-                Scrolled Dropdown
-              </h2>
-              <label class="inline-flex items-center space-x-2">
-                <span class="text-xs text-slate-400 dark:text-navy-300"
-                  >Code</span
-                >
-                <input
-                  @change="helpers.toggleCode"
-                  class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                  type="checkbox"
-                />
-              </label>
-            </div>
-            <div class="max-w-xl">
-              <p>
-                Dropdowns are lightweight context menus for housing navigation
-                and actions. Check out code for detail of usage.
-              </p>
-              <div class="mt-5">
-                <div
-                  x-data="usePopper({placement:'bottom-start',offset:4})"
-                  @click.outside="if(isShowPopper) isShowPopper = false"
-                  class="inline-flex"
-                >
-                  <button
-                    class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
-                    x-ref="popperRef"
-                    @click="isShowPopper = !isShowPopper"
-                  >
-                    <span>Dropdown</span>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-4 w-4 transition-transform duration-200"
-                      :class="isShowPopper && 'rotate-180'"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      stroke-width="2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button>
-                  <div
-                    x-ref="popperRoot"
-                    class="popper-root"
-                    :class="isShowPopper && 'show'"
-                  >
-                    <div
-                      class="popper-box h-36 overflow-y-auto rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-600 dark:bg-navy-700"
-                    >
-                      <ul>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Action</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Another Action</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
-                            >Something else</a
-                          >
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="code-wrapper hidden pt-4">
-              <pre
-                class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
-                x-init="hljs.highlightElement($el)"
-              >
-                <code class="language-html" x-ignore>
-  &lt;div&#13;&#10;    x-data=&quot;usePopper({placement:&apos;bottom-start&apos;,offset:4})&quot;&#13;&#10;    @click.outside=&quot;if(isShowPopper) isShowPopper = false&quot;&#13;&#10;    class=&quot;inline-flex&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;button&#13;&#10;      class=&quot;btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;      x-ref=&quot;popperRef&quot;&#13;&#10;      @click=&quot;isShowPopper = !isShowPopper&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;span&gt;Dropdown&lt;/span&gt;&#13;&#10;      &lt;svg&#13;&#10;        xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;        class=&quot;h-4 w-4 transition-transform duration-200&quot;&#13;&#10;        :class=&quot;isShowPopper &amp;&amp; &apos;rotate-180&apos;&quot;&#13;&#10;        fill=&quot;none&quot;&#13;&#10;        viewBox=&quot;0 0 24 24&quot;&#13;&#10;        stroke=&quot;currentColor&quot;&#13;&#10;        stroke-width=&quot;2&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;path&#13;&#10;          stroke-linecap=&quot;round&quot;&#13;&#10;          stroke-linejoin=&quot;round&quot;&#13;&#10;          d=&quot;M19 9l-7 7-7-7&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/svg&gt;&#13;&#10;    &lt;/button&gt;&#13;&#10;    &lt;div x-ref=&quot;popperRoot&quot; class=&quot;popper-root&quot; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        class=&quot;popper-box h-36 overflow-y-auto rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-600 dark:bg-navy-700&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;ul&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Action&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Another Action&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10;              &gt;Something else&lt;/a&#13;&#10;            &gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;        &lt;/ul&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;
-                </code>
-              </pre>
-            </div>
-          </div>
-
-          <!-- HTML Content Dropdown -->
-          <div class="card px-4 pb-4 sm:px-5">
-            <div class="my-3 flex h-8 items-center justify-between">
-              <h2
-                class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-              >
-                HTML Content
-              </h2>
-              <label class="inline-flex items-center space-x-2">
-                <span class="text-xs text-slate-400 dark:text-navy-300"
-                  >Code</span
-                >
-                <input
-                  @change="helpers.toggleCode"
-                  class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                  type="checkbox"
-                />
-              </label>
-            </div>
-            <div class="max-w-xl">
-              <p>
-                Dropdowns are lightweight context menus for housing navigation
-                and actions. Check out code for detail of usage.
-              </p>
-              <div class="mt-5">
-                <div
-                  x-data="usePopper({placement:'bottom-start',offset:4})"
-                  @click.outside="if(isShowPopper) isShowPopper = false"
-                  class="inline-flex"
-                >
-                  <button
-                    class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
-                    x-ref="popperRef"
-                    @click="isShowPopper = !isShowPopper"
-                  >
-                    <span>Dropdown</span>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-4 w-4 transition-transform duration-200"
-                      :class="isShowPopper && 'rotate-180'"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      stroke-width="2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button>
-                  <div
-                    x-ref="popperRoot"
-                    class="popper-root"
-                    :class="isShowPopper && 'show'"
-                  >
-                    <div
-                      class="popper-box w-72 rounded-md border border-slate-150 bg-white dark:border-navy-600 dark:bg-navy-700"
-                    >
-                      <h3
-                        class="px-4 py-3 font-medium tracking-wide text-slate-700 dark:text-navy-100"
-                      >
-                        Only Selected People
-                      </h3>
-                      <label class="relative flex">
-                        <input
-                          type="text"
-                          class="form-input peer w-full border-y border-slate-150 bg-transparent px-4 py-2 pl-9 text-xs+ placeholder:text-slate-400/70 dark:border-navy-600"
-                          placeholder="Type username..."
-                        />
-                        <span
-                          class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
-                        >
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="h-4.5 w-4.5 transition-colors duration-200"
-                            fill="currentColor"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z"
-                            />
-                          </svg>
-                        </span>
-                      </label>
-                      <ul class="my-2">
-                        <li>
-                          <a
-                            href="#"
-                            class="flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                          >
-                            <div class="avatar h-10 w-10">
-                              <img
-                                class="rounded-full"
-                                src="{{asset('images/200x200.png')}}"
-                                alt="avatar"
-                              />
-                            </div>
-                            <div>
-                              <p
-                                class="text-slate-700 line-clamp-1 dark:text-navy-100"
-                              >
-                                Simon Tods
-                              </p>
-                              <p
-                                class="text-xs text-slate-500 dark:text-navy-300"
-                              >
-                                Web Developer
-                              </p>
-                            </div>
-                          </a>
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                          >
-                            <div class="avatar h-10 w-10">
-                              <div
-                                class="is-initial rounded-full border border-success/30 bg-success/10 uppercase text-success"
-                              >
-                                jd
-                              </div>
-                            </div>
-
-                            <div>
-                              <p
-                                class="text-slate-700 line-clamp-1 dark:text-navy-100"
-                              >
-                                John Doe
-                              </p>
-                              <p
-                                class="text-xs text-slate-500 dark:text-navy-300"
-                              >
-                                Web Developer
-                              </p>
-                            </div>
-                          </a>
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                          >
-                            <div class="avatar h-10 w-10">
-                              <div
-                                class="is-initial rounded-full bg-warning uppercase text-white"
-                              >
-                                KG
-                              </div>
-                            </div>
-                            <div>
-                              <p
-                                class="text-slate-700 line-clamp-1 dark:text-navy-100"
-                              >
-                                Konnor Guzman
-                              </p>
-                              <p
-                                class="text-xs text-slate-500 dark:text-navy-300"
-                              >
-                                Frontend Developer
-                              </p>
-                            </div>
-                          </a>
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                          >
-                            <div class="avatar h-10 w-10">
-                              <img
-                                class="rounded-full"
-                                src="{{asset('images/200x200.png')}}"
-                                alt="avatar"
-                              />
-                            </div>
-                            <div>
-                              <p
-                                class="text-slate-700 line-clamp-1 dark:text-navy-100"
-                              >
-                                Samantha Shelton
-                              </p>
-                              <p
-                                class="text-xs text-slate-500 dark:text-navy-300"
-                              >
-                                Web Developer
-                              </p>
-                            </div>
-                          </a>
-                        </li>
-                        <li>
-                          <a
-                            href="#"
-                            class="flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
-                          >
-                            <div class="avatar h-10 w-10">
-                              <img
-                                class="rounded-full"
-                                src="{{asset('images/200x200.png')}}"
-                                alt="avatar"
-                              />
-                            </div>
-                            <div>
-                              <p
-                                class="text-slate-700 line-clamp-1 dark:text-navy-100"
-                              >
-                                Derrick Simmons
-                              </p>
-                              <p
-                                class="text-xs text-slate-500 dark:text-navy-300"
-                              >
-                                UI/UX Designer
-                              </p>
-                            </div>
-                          </a>
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="code-wrapper hidden pt-4">
-              <pre
-                class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
-                x-init="hljs.highlightElement($el)"
-              >
-                <code class="language-html" x-ignore>
-  &lt;div&#13;&#10;    x-data=&quot;usePopper({placement:&apos;bottom-start&apos;,offset:4})&quot;&#13;&#10;    @click.outside=&quot;if(isShowPopper) isShowPopper = false&quot;&#13;&#10;    class=&quot;inline-flex&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;button&#13;&#10;      class=&quot;btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10;      x-ref=&quot;popperRef&quot;&#13;&#10;      @click=&quot;isShowPopper = !isShowPopper&quot;&#13;&#10;    &gt;&#13;&#10;      &lt;span&gt;Dropdown&lt;/span&gt;&#13;&#10;      &lt;svg&#13;&#10;        xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;        class=&quot;h-4 w-4 transition-transform duration-200&quot;&#13;&#10;        :class=&quot;isShowPopper &amp;&amp; &apos;rotate-180&apos;&quot;&#13;&#10;        fill=&quot;none&quot;&#13;&#10;        viewBox=&quot;0 0 24 24&quot;&#13;&#10;        stroke=&quot;currentColor&quot;&#13;&#10;        stroke-width=&quot;2&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;path&#13;&#10;          stroke-linecap=&quot;round&quot;&#13;&#10;          stroke-linejoin=&quot;round&quot;&#13;&#10;          d=&quot;M19 9l-7 7-7-7&quot;&#13;&#10;        /&gt;&#13;&#10;      &lt;/svg&gt;&#13;&#10;    &lt;/button&gt;&#13;&#10;    &lt;div x-ref=&quot;popperRoot&quot; class=&quot;popper-root&quot; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&gt;&#13;&#10;      &lt;div&#13;&#10;        class=&quot;popper-box w-72 rounded-md border border-slate-150 bg-white dark:border-navy-600 dark:bg-navy-700&quot;&#13;&#10;      &gt;&#13;&#10;        &lt;h3&#13;&#10;          class=&quot;px-4 py-3 font-medium tracking-wide text-slate-700 dark:text-navy-100&quot;&#13;&#10;        &gt;&#13;&#10;          Only Selected People&#13;&#10;        &lt;/h3&gt;&#13;&#10;        &lt;label class=&quot;relative flex&quot;&gt;&#13;&#10;          &lt;input&#13;&#10;            type=&quot;text&quot;&#13;&#10;            class=&quot;form-input peer w-full border-y border-slate-150 bg-transparent px-4 py-2 pl-9 text-xs+ placeholder:text-slate-400/70 dark:border-navy-600&quot;&#13;&#10;            placeholder=&quot;Type username...&quot;&#13;&#10;          /&gt;&#13;&#10;          &lt;div&#13;&#10;            class=&quot;pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent&quot;&#13;&#10;          &gt;&#13;&#10;            &lt;svg&#13;&#10;              xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10;              class=&quot;h-4.5 w-4.5 transition-colors duration-200&quot;&#13;&#10;              fill=&quot;currentColor&quot;&#13;&#10;              viewBox=&quot;0 0 24 24&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;path&#13;&#10;                d=&quot;M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z&quot;&#13;&#10;              &gt;&lt;/path&gt;&#13;&#10;            &lt;/svg&gt;&#13;&#10;          &lt;/div&gt;&#13;&#10;        &lt;/label&gt;&#13;&#10;        &lt;ul class=&quot;my-2&quot;&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;div class=&quot;avatar h-10 w-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;              &lt;div&gt;&#13;&#10;                &lt;p class=&quot;text-slate-700 line-clamp-1 dark:text-navy-100&quot;&gt;&#13;&#10;                  Simon Tods&#13;&#10;                &lt;/p&gt;&#13;&#10;                &lt;p class=&quot;text-xs text-slate-500 dark:text-navy-300&quot;&gt;&#13;&#10;                  Web Developer&#13;&#10;                &lt;/p&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;div class=&quot;avatar h-10 w-10&quot;&gt;&#13;&#10;                &lt;div&#13;&#10;                  class=&quot;is-initial rounded-full border border-success/30 bg-success/10 uppercase text-success&quot;&#13;&#10;                &gt;&#13;&#10;                  jd&#13;&#10;                &lt;/div&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;&#13;&#10;              &lt;div&gt;&#13;&#10;                &lt;p class=&quot;text-slate-700 line-clamp-1 dark:text-navy-100&quot;&gt;&#13;&#10;                  John Doe&#13;&#10;                &lt;/p&gt;&#13;&#10;                &lt;p class=&quot;text-xs text-slate-500 dark:text-navy-300&quot;&gt;&#13;&#10;                  Web Developer&#13;&#10;                &lt;/p&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;div class=&quot;avatar h-10 w-10&quot;&gt;&#13;&#10;                &lt;div&#13;&#10;                  class=&quot;is-initial rounded-full bg-warning uppercase text-white&quot;&#13;&#10;                &gt;&#13;&#10;                  KG&#13;&#10;                &lt;/div&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;              &lt;div&gt;&#13;&#10;                &lt;p class=&quot;text-slate-700 line-clamp-1 dark:text-navy-100&quot;&gt;&#13;&#10;                  Konnor Guzman&#13;&#10;                &lt;/p&gt;&#13;&#10;                &lt;p class=&quot;text-xs text-slate-500 dark:text-navy-300&quot;&gt;&#13;&#10;                  Frontend Developer&#13;&#10;                &lt;/p&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;div class=&quot;avatar h-10 w-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;              &lt;div&gt;&#13;&#10;                &lt;p class=&quot;text-slate-700 line-clamp-1 dark:text-navy-100&quot;&gt;&#13;&#10;                  Samantha Shelton&#13;&#10;                &lt;/p&gt;&#13;&#10;                &lt;p class=&quot;text-xs text-slate-500 dark:text-navy-300&quot;&gt;&#13;&#10;                  Web Developer&#13;&#10;                &lt;/p&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;          &lt;li&gt;&#13;&#10;            &lt;a&#13;&#10;              href=&quot;#&quot;&#13;&#10;              class=&quot;flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600&quot;&#13;&#10;            &gt;&#13;&#10;              &lt;div class=&quot;avatar h-10 w-10&quot;&gt;&#13;&#10;                &lt;img&#13;&#10;                  class=&quot;rounded-full&quot;&#13;&#10;                  src=&quot;images/200x200.png&quot;&#13;&#10;                  alt=&quot;avatar&quot;&#13;&#10;                /&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;              &lt;div&gt;&#13;&#10;                &lt;p class=&quot;text-slate-700 line-clamp-1 dark:text-navy-100&quot;&gt;&#13;&#10;                  Derrick Simmons&#13;&#10;                &lt;/p&gt;&#13;&#10;                &lt;p class=&quot;text-xs text-slate-500 dark:text-navy-300&quot;&gt;&#13;&#10;                  UI/UX Designer&#13;&#10;                &lt;/p&gt;&#13;&#10;              &lt;/div&gt;&#13;&#10;            &lt;/a&gt;&#13;&#10;          &lt;/li&gt;&#13;&#10;        &lt;/ul&gt;&#13;&#10;      &lt;/div&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;
-                </code>
-              </pre>
-            </div>
-          </div>
-        </div>
-      </main>
-</x-app-layout>

resources/views/pages/components-extension-clipboard.blade.php

-<x-app-layout title="Clipboard Extension" is-sidebar-open="true" is-header-blur="true">
-    <main class="main-content w-full px-[var(--margin-x)] pb-8">
-        <div class="flex items-center space-x-4 py-5 lg:py-6">
-          <h2
-            class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
-          >
-            Clipboard
-          </h2>
-          <div class="hidden h-full py-1 sm:flex">
-            <div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
-          </div>
-          <ul class="hidden flex-wrap items-center space-x-2 sm:flex">
-            <li class="flex items-center space-x-2">
-              <a
-                class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
-                href="#"
-                >Components</a
-              >
-              <svg
-                x-ignore
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-            </li>
-            <li>Clipboard</li>
-          </ul>
-        </div>
-        <div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
-          <!-- Basic Usage -->
-          <div class="card px-4 pb-4 sm:px-5">
-            <div class="my-3 flex h-8 items-center justify-between">
-              <h2
-                class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-              >
-                Basic Usage
-              </h2>
-              <label class="inline-flex items-center space-x-2">
-                <span class="text-xs text-slate-400 dark:text-navy-300"
-                  >Code</span
-                >
-                <input
-                  @change="helpers.toggleCode"
-                  class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                  type="checkbox"
-                />
-              </label>
-            </div>
-            <div class="max-w-xl">
-              <p>
-                <code class="inline-code">$clipboard</code> magic property to
-                all of your Alpine components that can be used to copy data to
-                the user's clipboard. Check out code for detail of usage.
-              </p>
-              <div class="mt-5">
-                <div
-                  class="alert flex items-center justify-between rounded-lg bg-primary px-4 py-3 text-white dark:bg-accent sm:px-5"
-                >
-                  <p id="clipboardContent1">
-                    Lorem ipsum dolor sit amet consectetur.
-                  </p>
-                  <button
-                    class="btn h-6 shrink-0 rounded bg-white/20 px-2 text-xs text-white active:bg-white/25"
-                    @click="$clipboard({
-                        content:document.querySelector('#clipboardContent1').innerText,
-                        success:()=>$notification({text:'Text Copied',variant:'success'}),
-                        error:()=>$notification({text:'Error',variant:'error'})
-                    })"
-                  >
-                    Copy
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div class="code-wrapper hidden pt-4">
-              <pre
-                class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
-                x-init="hljs.highlightElement($el)"
-              >
-                <code class="language-html" x-ignore>
-  &lt;div&#13;&#10;    class=&quot;alert flex items-center justify-between rounded-lg bg-primary px-4 py-3 text-white dark:bg-accent sm:px-5&quot;&#13;&#10;  &gt;&#13;&#10;    &lt;p id=&quot;clipboardContent1&quot;&gt;Lorem ipsum dolor sit amet consectetur.&lt;/p&gt;&#13;&#10;    &lt;button&#13;&#10;      class=&quot;btn h-6 shrink-0 rounded bg-white/20 px-2 text-xs text-white active:bg-white/25&quot;&#13;&#10;      @click=&quot;$clipboard({&#13;&#10;        content:document.querySelector(&apos;#clipboardContent1&apos;).innerText,&#13;&#10;        success:()=&gt;$notification({text:&apos;Text Copied&apos;,variant:&apos;success&apos;}),&#13;&#10;        error:()=&gt;$notification({text:&apos;Error&apos;,variant:&apos;error&apos;})&#13;&#10;      })&quot;&#13;&#10;    &gt;&#13;&#10;      Copy&#13;&#10;    &lt;/button&gt;&#13;&#10;  &lt;/div&gt;&#13;&#10;</code>
-              </pre>
-            </div>
-          </div>
-
-          <!-- Advanced Usage -->
-          <div class="card px-4 pb-4 sm:px-5">
-            <div class="my-3 flex h-8 items-center justify-between">
-              <h2
-                class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
-              >
-                Advanced Usage
-              </h2>
-              <label class="inline-flex items-center space-x-2">
-                <span class="text-xs text-slate-400 dark:text-navy-300"
-                  >Code</span
-                >
-                <input
-                  @change="helpers.toggleCode"
-                  class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
-                  type="checkbox"
-                />
-              </label>
-            </div>
-            <div class="max-w-xl">
-              <p>
-                <code class="inline-code">$clipboard</code> magic property to
-                all of your Alpine components that can be used to copy data to
-                the user's clipboard. Check out code for detail of usage.
-              </p>
-              <div x-data="{text:''}" class="mt-5">
-                <div class="flex -space-x-px">
-                  <input
-                    x-model="text"
-                    class="form-input w-full rounded-l-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
-                    placeholder="Enter text"
-                    type="text"
-                  />
-
-                  <button
-                    @click="$clipboard({
-                        content:text,
-                        success:()=>$notification({text:'Text Copied',variant:'success'}),
-                        error:()=>$notification({text:'Error',variant:'error'})
-                    })"
-                    class="btn z-2 rounded-l-none bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
-                  >
-                    Copy
-                  </button>
-                </div>
-              </div>
-            </div>
-            <div class="code-wrapper hidden pt-4">
-              <pre
-                class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
-                x-init="hljs.highlightElement($el)"
-              >
-                <code class="language-html" x-ignore>
-  &lt;div x-data=&quot;{text:&apos;&apos;}&quot;&gt;&#13;&#10;    &lt;div class=&quot;flex -space-x-px&quot;&gt;&#13;&#10;      &lt;input&#13;&#10;        x-model=&quot;text&quot;&#13;&#10;        class=&quot;form-input w-full rounded-l-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent&quot;&#13;&#10;        placeholder=&quot;Enter text&quot;&#13;&#10;        type=&quot;text&quot;&#13;&#10;      /&gt;&#13;&#10;&#13;&#10;      &lt;button&#13;&#10;        @click=&quot;$clipboard({&#13;&#10;            content:text,&#13;&#10;            success:()=&gt;$notification({text:&apos;Text Copied&apos;,variant:&apos;success&apos;}),&#13;&#10;            error:()=&gt;$notification({text:&apos;Error&apos;,variant:&apos;error&apos;})&#13;&#10;        })&quot;&#13;&#10;        class=&quot;btn rounded-l-none bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90&quot;&#13;&#10;      &gt;&#13;&#10;        Copy&#13;&#10;      &lt;/button&gt;&#13;&#10;    &lt;/div&gt;&#13;&#10;  &lt;/div&gt;</code>
-              </pre>
-            </div>
-          </div>
-        </div>
-      </main>
-</x-app-layout>