<div class="max-w-7xl mx-auto">
<h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-2 text-center rtl:text-right">Image Gallery</h1>
<p class="text-gray-600 dark:text-gray-400 text-center rtl:text-right mb-8">Browse through our collection of stunning images</p>
<!-- Gallery Component -->
<div x-data="{
images: [
{ id: 1, title: 'Mountain Sunrise', category: 'nature', thumbnail: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80' },
{ id: 2, title: 'City Skyline', category: 'urban', thumbnail: 'https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80' },
{ id: 3, title: 'Portrait Session', category: 'portrait', thumbnail: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80' },
{ id: 4, title: 'Forest Path', category: 'nature', thumbnail: 'https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80' },
{ id: 5, title: 'Urban Architecture', category: 'urban', thumbnail: 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80' },
{ id: 6, title: 'Beach Sunset', category: 'nature', thumbnail: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80' },
{ id: 7, title: 'Street Photography', category: 'urban', thumbnail: 'https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80' },
{ id: 8, title: 'Professional Portrait', category: 'portrait', thumbnail: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80' }
],
loadedCount: 8
}"
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-2xl overflow-hidden p-6">
<!-- Gallery Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
<template x-for="(image, index) in images.slice(0, loadedCount)" :key="image.id">
<div class="rounded-lg overflow-hidden relative group transform transition-transform duration-300 hover:scale-105 hover:shadow-xl dark:hover:shadow-2xl">
<img
:src="image.thumbnail"
:alt="image.title"
class="w-full h-64 object-cover"
>
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-300 flex items-end p-4 rtl:flex-row-reverse">
<div class="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300 rtl:text-right">
<h3 class="text-white font-semibold text-lg rtl:text-right" x-text="image.title"></h3>
<p class="text-gray-300 text-sm rtl:text-right" x-text="image.category"></p>
</div>
</div>
</div>
</template>
</div>
<!-- Load More Button -->
<div x-show="loadedCount < images.length" class="text-center rtl:text-right mt-8">
<button
@click="loadedCount += 4"
class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white px-6 py-3 rounded-full transition-colors duration-300 shadow-md hover:shadow-lg"
>
Load More Images
</button>
</div>
</div>
</div>