@extends('layouts.app')

@section('content')
{{--
	<div class="py-12">
		<div class="max-w-7xl mx-auto px-4">
			<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
				<div class="p-6 text-gray-900 dark:text-gray-100">
					<h1 class="text-2xl font-bold mb-4">Welcome to your application!</h1>

					<div class="mb-6 p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
						<h2 class="text-xl font-semibold mb-2">Light/Dark Demo</h2>
						<p class="text-gray-700 dark:text-gray-300 mb-4">All elements automatically switch between light and dark modes.</p>

						<button
							class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg dark:bg-indigo-500 dark:hover:bg-indigo-600">
							Sample Button
						</button>

						<div class="mt-4 p-3 bg-gray-100 dark:bg-gray-700 rounded">
							<p class="text-gray-600 dark:text-gray-300">This is a container with different background in each theme.</p>
						</div>
					</div>

					<div class="grid md:grid-cols-2 gap-4">
						<div class="p-4 bg-white dark:bg-gray-700 shadow rounded-lg">
							<h3 class="font-medium text-lg text-gray-800 dark:text-gray-200">Card 1</h3>
							<p class="text-gray-600 dark:text-gray-400">Content for first card</p>
						</div>
						<div class="p-4 bg-white dark:bg-gray-700 shadow rounded-lg">
							<h3 class="font-medium text-lg text-gray-800 dark:text-gray-200">Card 2</h3>
							<p class="text-gray-600 dark:text-gray-400">Content for second card</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
--}}
{{-- 
	<div class="py-12">
		<div class="mx-auto max-w-7xl mb-2 px-4">
			<div class="grid grid-cols-12 gap-4 sm:grid-rows-4 md:grid-rows-3 lg:grid-rows-3">
				<div
					class="bg-white dark:bg-gray-800 shadow col-span-12 sm:col-span-6 sm:row-span-2 md:col-span-4 lg:col-span-6 lg:row-span-3">
					1</div>
				<div
					class="bg-white dark:bg-gray-800 shadow col-span-12 row-start-2 sm:col-span-6 sm:row-span-2 sm:col-start-7 md:col-span-4 md:col-start-5 lg:col-span-3 lg:row-span-2 lg:col-start-7">
					2</div>
				<div
					class="bg-white dark:bg-gray-800 shadow col-span-12 row-start-3 sm:col-span-6 sm:row-start-3 md:col-span-6 md:col-start-1 lg:col-span-3 lg:col-start-7 lg:row-start-3">
					3</div>
				<div
					class="bg-white dark:bg-gray-800 shadow col-span-12 row-start-4 sm:col-span-6 sm:row-span-2 sm:col-start-7 md:col-span-4 md:row-span-2 md:col-start-9 lg:col-span-3 lg:row-span-2 lg:col-start-10 lg:row-start-1">
					4</div>
				<div
					class="bg-white dark:bg-gray-800 shadow col-span-12 row-start-5 sm:col-span-6 sm:row-start-4 md:col-span-6 md:col-start-7 md:row-start-3 lg:col-span-3 lg:col-start-10 lg:row-start-3">
					5</div>
			</div>

			<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-4">
				<div class="bg-white dark:bg-gray-800 shadow relative flex h-full flex-col">1</div>
				<div class="bg-white dark:bg-gray-800 shadow relative flex h-full flex-col">2</div>
				<div class="bg-white dark:bg-gray-800 shadow relative flex h-full flex-col">3</div>
				<div class="bg-white dark:bg-gray-800 shadow relative flex h-full flex-col">4</div>
			</div>

		</div>
	</div>

	<div class="py-12">
		<div class="mx-auto max-w-7xl mb-2 px-4">

			<div class="border-b border-gray-200 pb-1 mb-2">
				<h3 class="text-base font-semibold leading-6 text-gray-900">Category title</h3>
			</div>

			<div class="grid grid-cols-12 gap-4 sm:grid-rows-4 md:grid-rows-3 lg:grid-rows-3">
				<div
					class="bg-white dark:bg-gray-800 shadow col-span-12 sm:col-span-6 sm:row-span-2 md:col-span-4 lg:col-span-6 lg:row-span-3">
					<article
						class="relative isolate flex flex-col justify-end overflow-hidden bg-gray-900 px-8 pb-8 pt-48 sm:pt-32 md:pt-48 lg:pt-[246px]">
						<img src="https://picsum.photos/628/372?random=1" alt=""
							class="absolute inset-0 -z-10 h-full w-full object-cover">
						<div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
						<div class="absolute inset-0 -z-10 ring-1 ring-inset ring-gray-900/10"></div>
						<div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
							<time datetime="2020-03-16" class="mr-8">Mar 16, 2020</time>
						</div>
						<h3 class="mt-3 text-lg sm:truncate sm:text-base font-semibold leading-6 text-white">
							<a href="#">
								<span class="absolute inset-0"></span>
								01 Boost your conversion rate
							</a>
						</h3>
					</article>
				</div>
				<div
					class="bg-white dark:bg-gray-800 shadow col-span-12 row-start-2 sm:col-span-6 sm:row-span-2 sm:col-start-7 md:col-span-4 md:col-start-5 lg:col-span-3 lg:row-span-2 lg:col-start-7">
					<article
						class="relative isolate flex flex-col justify-end overflow-hidden bg-gray-900 px-8 pb-8 pt-48 sm:pt-32 md:pt-48 lg:pt-32">
						<img src="https://picsum.photos/628/372?random=2" alt=""
							class="absolute inset-0 -z-10 h-full w-full object-cover">
						<div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
						<div class="absolute inset-0 -z-10 ring-1 ring-inset ring-gray-900/10"></div>
						<div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
							<time datetime="2020-03-16" class="mr-8">Mar 16, 2020</time>
						</div>
						<h3 class="mt-3 text-lg sm:truncate sm:text-base font-semibold leading-6 text-white">
							<a href="#">
								<span class="absolute inset-0"></span>
								02 Boost your conversion rate
							</a>
						</h3>
					</article>
				</div>
				<div
					class="bg-white dark:bg-gray-800 shadow col-span-12 row-start-3 sm:col-span-6 sm:row-start-3 md:col-span-6 md:col-start-1 lg:col-span-3 lg:col-start-7 lg:row-start-3">
					<div class="flex w-full items-start justify-between space-x-3 p-2">
						<img class="h-21 w-26 flex-shrink-0 bg-gray-300 dark:bg-gray-600 rounded-md"
							src="https://picsum.photos/104/84?random=3" alt="">
						<div class="flex-1">
							<div class="flex items-center space-x-3">
								<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-300">03: Major Earthquake Hits California,
									Emergency
									Services Mobilize</h3>
							</div>
							<p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">Regional</p>
						</div>
					</div>
				</div>
				<div
					class="bg-white dark:bg-gray-800 shadow col-span-12 row-start-4 sm:col-span-6 sm:row-span-2 sm:col-start-7 md:col-span-4 md:row-span-2 md:col-start-9 lg:col-span-3 lg:row-span-2 lg:col-start-10 lg:row-start-1">
					<article
						class="relative isolate flex flex-col justify-end overflow-hidden bg-gray-900 px-8 pb-8 pt-48 sm:pt-32 md:pt-48 lg:pt-32">
						<img src="https://picsum.photos/628/372?random=4" alt=""
							class="absolute inset-0 -z-10 h-full w-full object-cover">
						<div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
						<div class="absolute inset-0 -z-10 ring-1 ring-inset ring-gray-900/10"></div>
						<div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
							<time datetime="2020-03-16" class="mr-8">Mar 16, 2020</time>
						</div>
						<h3 class="mt-3 text-lg sm:truncate sm:text-base font-semibold leading-6 text-white">
							<a href="#">
								<span class="absolute inset-0"></span>
								04 Boost your conversion rate
							</a>
						</h3>
					</article>
				</div>
				<div
					class="bg-white dark:bg-gray-800 shadow col-span-12 row-start-5 sm:col-span-6 sm:row-start-4 md:col-span-6 md:col-start-7 md:row-start-3 lg:col-span-3 lg:col-start-10 lg:row-start-3">
					<div class="flex w-full items-start justify-between space-x-3 p-2">
						<img class="h-21 w-26 flex-shrink-0 bg-gray-300 dark:bg-gray-600 rounded-md"
							src="https://picsum.photos/104/84?random=5" alt="">
						<div class="flex-1">
							<div class="flex items-center space-x-3">
								<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-300">05: Major
									Earthquake
									Hits California, Emergency Services Mobilize</h3>
							</div>
							<p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">Regional</p>
						</div>
					</div>
				</div>
			</div>

			<div class="border-b border-gray-200 pb-1 mb-2 mt-10">
				<h3 class="text-base font-semibold leading-6 text-gray-900">Category title</h3>
			</div>

			<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
				<div class="bg-white dark:bg-gray-800 shadow relative flex h-full flex-col">
					<div class="flex w-full items-start justify-between space-x-3 p-2">
						<img class="h-21 w-26 flex-shrink-0 bg-gray-300 dark:bg-gray-600 rounded-md"
							src="https://picsum.photos/104/84?random=6" alt="">
						<div class="flex-1">
							<div class="flex items-center space-x-3">
								<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-300">01: Major
									Earthquake
									Hits California, Emergency Services Mobilize</h3>
							</div>
							<p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">Regional</p>
						</div>
					</div>
				</div>
				<div class="bg-white dark:bg-gray-800 shadow relative flex h-full flex-col">
					<div class="flex w-full items-start justify-between space-x-3 p-2">
						<img class="h-21 w-26 flex-shrink-0 bg-gray-300 dark:bg-gray-600 rounded-md"
							src="https://picsum.photos/104/84?random=7" alt="">
						<div class="flex-1">
							<div class="flex items-center space-x-3">
								<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-300">02: Major
									Earthquake
									Hits California, Emergency Services Mobilize</h3>
							</div>
							<p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">Regional</p>
						</div>
					</div>
				</div>
				<div class="bg-white dark:bg-gray-800 shadow relative flex h-full flex-col">
					<div class="flex w-full items-start justify-between space-x-3 p-2">
						<img class="h-21 w-26 flex-shrink-0 bg-gray-300 dark:bg-gray-600 rounded-md"
							src="https://picsum.photos/104/84?random=8" alt="">
						<div class="flex-1">
							<div class="flex items-center space-x-3">
								<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-300">03: Major
									Earthquake
									Hits California, Emergency Services Mobilize</h3>
							</div>
							<p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">Regional</p>
						</div>
					</div>
				</div>
				<div class="bg-white dark:bg-gray-800 shadow relative flex h-full flex-col">
					<div class="flex w-full items-start justify-between space-x-3 p-2">
						<img class="h-21 w-26 flex-shrink-0 bg-gray-300 dark:bg-gray-600 rounded-md"
							src="https://picsum.photos/104/84?random=9" alt="">
						<div class="flex-1">
							<div class="flex items-center space-x-3">
								<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-300">04: Major
									Earthquake
									Hits California, Emergency Services Mobilize</h3>
							</div>
							<p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">Regional</p>
						</div>
					</div>
				</div>
			</div>

			<div class="border-b border-gray-200 pb-1 mb-2 mt-10">
				<h3 class="text-base font-semibold leading-6 text-gray-900">Category title</h3>
			</div>

			<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
				<div class="bg-white dark:bg-gray-800 shadow relative flex h-full flex-col">
					<article
						class="relative isolate flex flex-col justify-end overflow-hidden bg-gray-900 px-8 pb-8 pt-48 sm:pt-32 md:pt-48 lg:pt-52">
						<img src="https://picsum.photos/628/372?random=10" alt=""
							class="absolute inset-0 -z-10 h-full w-full object-cover">
						<div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
						<div class="absolute inset-0 -z-10 ring-1 ring-inset ring-gray-900/10"></div>
						<div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
							<time datetime="2020-03-16" class="mr-8">Mar 16, 2020</time>
						</div>
						<h3 class="mt-3 text-lg sm:truncate sm:text-base font-semibold leading-6 text-white">
							<a href="#">
								<span class="absolute inset-0"></span>
								10 Boost your conversion rate
							</a>
						</h3>
					</article>
				</div>
				<div class="bg-white dark:bg-gray-800 shadow relative flex h-full flex-col">
					<div class="bg-white dark:bg-gray-800 shadow relative flex h-full flex-col">
						<div class="flex w-full items-start justify-between space-x-3 p-2">
							<img class="h-21 w-26 flex-shrink-0 bg-gray-300 dark:bg-gray-600 rounded-md"
								src="https://picsum.photos/104/84?random=11" alt="">
							<div class="flex-1">
								<div class="flex items-center space-x-3">
									<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-300">11: Major
										Earthquake
										Hits California, Emergency Services Mobilize</h3>
								</div>
								<p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">Regional</p>
							</div>
						</div>
					</div>
					<div class="bg-white dark:bg-gray-800 shadow relative flex h-full flex-col">
						<div class="flex w-full items-start justify-between space-x-3 p-2">
							<img class="h-21 w-26 flex-shrink-0 bg-gray-300 dark:bg-gray-600 rounded-md"
								src="https://picsum.photos/104/84?random=12" alt="">
							<div class="flex-1">
								<div class="flex items-center space-x-3">
									<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-300">12: Major
										Earthquake
										Hits California, Emergency Services Mobilize</h3>
								</div>
								<p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">Regional</p>
							</div>
						</div>
					</div>
					<div class="bg-white dark:bg-gray-800 shadow relative flex h-full flex-col">
						<div class="flex w-full items-start justify-between space-x-3 p-2">
							<img class="h-21 w-26 flex-shrink-0 bg-gray-300 dark:bg-gray-600 rounded-md"
								src="https://picsum.photos/104/84?random=13" alt="">
							<div class="flex-1">
								<div class="flex items-center space-x-3">
									<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-300">13: Major
										Earthquake
										Hits California, Emergency Services Mobilize</h3>
								</div>
								<p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">Regional</p>
							</div>
						</div>
					</div>
				</div>
				<div class="bg-white dark:bg-gray-800 shadow relative flex h-full flex-col">
					<div class="flex w-full items-start justify-between space-x-3 p-2">
						<img class="h-21 w-26 flex-shrink-0 bg-gray-300 dark:bg-gray-600 rounded-md"
							src="https://picsum.photos/104/84?random=14" alt="">
						<div class="flex-1">
							<div class="flex items-center space-x-3">
								<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-300">14: Major
									Earthquake
									Hits California, Emergency Services Mobilize</h3>
							</div>
							<p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">Regional</p>
						</div>
					</div>
					<div class="flex w-full items-start justify-between space-x-3 p-2">
						<img class="h-21 w-26 flex-shrink-0 bg-gray-300 dark:bg-gray-600 rounded-md"
							src="https://picsum.photos/104/84?random=15" alt="">
						<div class="flex-1">
							<div class="flex items-center space-x-3">
								<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-300">15: Major
									Earthquake
									Hits California, Emergency Services Mobilize</h3>
							</div>
							<p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">Regional</p>
						</div>
					</div>
					<div class="flex w-full items-start justify-between space-x-3 p-2">
						<img class="h-21 w-26 flex-shrink-0 bg-gray-300 dark:bg-gray-600 rounded-md"
							src="https://picsum.photos/104/84?random=16" alt="">
						<div class="flex-1">
							<div class="flex items-center space-x-3">
								<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-300">16: Major
									Earthquake
									Hits California, Emergency Services Mobilize</h3>
							</div>
							<p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">Regional</p>
						</div>
					</div>
				</div>
				<div class="bg-white dark:bg-gray-800 shadow relative flex h-full flex-col">
					<ul role="list"
						class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-1 lg:mx-0 lg:max-w-none lg:grid-cols-1">
						<li>
							<img class="aspect-[16/9] w-full object-cover"
								src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80"
								alt="">
							<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-300 p-4">17: Major Earthquake
								Hits California, Emergency Services Mobilize</h3>
							<p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400 p-4">Front-end Developer
							</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
--}}

@endsection