<div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-blue-50 to-blue-200 dark:from-gray-900 dark:to-blue-950 min-h-screen flex items-center justify-center font-serif">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-2xl rounded-lg overflow-hidden border-4 border-blue-400 dark:border-blue-700 transform transition-all duration-500 hover:scale-[1.01]">
<div class="p-6 sm:p-8 lg:p-12 bg-blue-600 dark:bg-blue-900 text-white flex justify-between items-center relative overflow-hidden">
<div class="absolute inset-0 pattern-geometric opacity-20 dark:opacity-10 pointer-events-none"></div>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-wide drop-shadow-lg z-10">Oceanic Selections</h2>
<div class="flex items-center space-x-3 z-10">
<span class="text-lg font-semibold">Your Cart</span>
<svg class="w-8 h-8 sm:w-10 sm:h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.705.42 2.302l.644.644m-.644-.644L11.75 21M7 13H5.4M11.75 21h3.5M11.75 21L9.25 10.25l-2.293 2.293c-.63-.63-.182 1.705.42 2.302l.644.644" />
</svg>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8 md:p-10">
<!-- Primary Button -->
<button class="w-full py-4 px-6 bg-gradient-to-br from-blue-500 to-blue-700 dark:from-blue-700 dark:to-blue-900 text-white text-lg font-bold uppercase rounded-lg shadow-xl tracking-wider
transform transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-2xl hover:brightness-110
focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600
flex items-center justify-center space-x-2 relative overflow-hidden
border-b-4 border-blue-800 dark:border-blue-950 button-animation">
<span class="z-10">Add to Cart</span>
<svg class="w-6 h-6 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
<!-- Secondary Button -->
<button class="w-full py-4 px-6 bg-gradient-to-br from-blue-300 to-blue-500 dark:from-blue-500 dark:to-blue-700 text-white text-lg font-semibold uppercase rounded-lg shadow-md tracking-wide
transform transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg hover:brightness-110
focus:outline-none focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-500
flex items-center justify-center space-x-2 relative overflow-hidden
border-b-4 border-blue-600 dark:border-blue-800 button-animation">
<span class="z-10">View Details</span>
<svg class="w-6 h-6 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
</button>
<!-- Ghost Button -->
<button class="w-full py-4 px-6 bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 text-lg font-semibold uppercase rounded-lg shadow-lg tracking-wide
border-2 border-blue-600 dark:border-blue-700
transform transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-xl hover:bg-blue-50 dark:hover:bg-blue-900
focus:outline-none focus:ring-4 focus:ring-blue-100 dark:focus:ring-blue-800
flex items-center justify-center space-x-2 relative overflow-hidden
border-b-4 border-blue-700 dark:border-blue-800 button-animation">
<span class="z-10">Wishlist</span>
<svg class="w-6 h-6 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.73l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.07l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
</button>
<!-- Icon Button with text -->
<button class="w-full py-4 px-6 bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 text-white text-lg font-medium rounded-lg shadow-md tracking-wide
transform transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-xl hover:brightness-110
focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700
flex items-center justify-center space-x-2 relative overflow-hidden
border-b-4 border-blue-700 dark:border-blue-900 button-animation">
<svg class="w-6 h-6 z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H3a2 2 0 00-2 2v6a2 2 0 002 2h14a2 2 0 002-2v-6a2 2 0 00-2-2h-3V6a4 4 0 00-4-4zm2 6V6a2 2 0 10-4 0v2h4zm-4 4a1 1 0 100 2h4a1 1 0 100-2H8z" clip-rule="evenodd" />
</svg>
<span class="z-10">Buy Now</span>
</button>
<!-- Outline Button -->
<button class="w-full py-4 px-6 bg-transparent text-blue-600 dark:text-blue-300 text-lg font-semibold uppercase rounded-lg shadow-inner
border-2 border-blue-600 dark:border-blue-500
transform transition-all duration-300 ease-in-out
hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-800 dark:hover:text-blue-100 hover:shadow-md
focus:outline-none focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-700
flex items-center justify-center space-x-2 relative overflow-hidden
border-b-4 border-blue-700 dark:border-blue-600 button-animation">
<span class="z-10">Compare Items</span>
<svg class="w-6 h-6 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
</svg>
</button>
<!-- Disabled Button -->
<button class="w-full py-4 px-6 bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-lg font-medium uppercase rounded-lg shadow-inner cursor-not-allowed
relative overflow-hidden
border-b-4 border-gray-400 dark:border-gray-800 button-animation opacity-70">
<span class="z-10">Out of Stock</span>
<svg class="w-6 h-6 z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-8-8a8 8 0 0115.347-3.929L3.929 15.347A8 8 0 012 10z" clip-rule="evenodd" />
</svg>
</button>
<!-- Small Button -->
<button class="w-full py-3 px-5 bg-gradient-to-br from-sky-400 to-sky-600 dark:from-sky-600 dark:to-sky-800 text-white text-base font-semibold rounded-md shadow-md
transform transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg hover:brightness-110
focus:outline-none focus:ring-4 focus:ring-sky-200 dark:focus:ring-sky-700
flex items-center justify-center space-x-2 relative overflow-hidden
border-b-4 border-sky-700 dark:border-sky-900 button-animation">
<svg class="w-5 h-5 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="z-10">Quick View</span>
</button>
<!-- Large Button -->
<button class="w-full py-5 px-8 bg-gradient-to-br from-teal-500 to-cyan-700 dark:from-teal-700 dark:to-cyan-900 text-white text-xl font-bold uppercase rounded-lg shadow-2xl tracking-wider
transform transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-3xl hover:brightness-110
focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-600
flex items-center justify-center space-x-3 relative overflow-hidden
border-b-4 border-teal-800 dark:border-teal-950 button-animation">
<span class="z-10">Proceed to Checkout</span>
<svg class="w-7 h-7 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</button>
</div>
<div class="p-6 sm:p-8 md:p-10 bg-blue-700 dark:bg-blue-950 text-white flex flex-col sm:flex-row justify-between items-center relative overflow-hidden">
<div class="absolute inset-0 pattern-geometric-reverse opacity-20 dark:opacity-10 pointer-events-none"></div>
<p class="text-center sm:text-left mb-4 sm:mb-0 text-sm sm:text-base z-10">© 2023 Oceanic Arts. All rights reserved.</p>
<div class="flex space-x-4 z-10">
<a href="#" class="text-white hover:text-blue-200 dark:hover:text-blue-400 transition duration-300">Privacy Policy</a>
<a href="#" class="text-white hover:text-blue-200 dark:hover:text-blue-400 transition duration-300">Terms of Service</a>
</div>
</div>
</div>
</div>
<style>
/* Art Deco Geometric Pattern */
.pattern-geometric {
background-image: radial-gradient(circle at 100% 150%, #4a90e2, #4a90e2 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #2a5298 37%, #2a5298 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, #4a90e2, #4a90e2 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #2a5298 37%, #2a5298 40%, transparent 40%, transparent), radial-gradient(circle at 100% 50%, #4a90e2, #4a90e2 14%, transparent 14%, transparent 17%, #3467b7 17%, #3467b7 20%, transparent 20%, transparent 23%, #2a5298 23%, #2a5298 26%, transparent 26%, transparent), radial-gradient(circle at 0 50%, #4a90e2, #4a90e2 14%, transparent 14%, transparent 17%, #3467b7 17%, #3467b7 20%, transparent 20%, transparent 23%, #2a5298 23%, #2a5298 26%, transparent 26%, transparent), radial-gradient(circle at 100% 0, #4a90e2, #4a90e2 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #2a5298 37%, #2a5298 40%, transparent 40%, transparent), radial-gradient(circle at 0 0, #4a90e2, #4a90e2 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #2a5298 37%, #2a5298 40%, transparent 40%, transparent);
background-size: 80px 80px;
background-position: 0 0, 80px 0, 40px 40px, 120px 40px, 40px 0, 120px 0;
}
.pattern-geometric-reverse {
background-image: radial-gradient(circle at 100% 150%, #2a5298, #2a5298 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #4a90e2 37%, #4a90e2 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, #2a5298, #2a5298 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #4a90e2 37%, #4a90e2 40%, transparent 40%, transparent), radial-gradient(circle at 100% 50%, #2a5298, #2a5298 14%, transparent 14%, transparent 17%, #3467b7 17%, #3467b7 20%, transparent 20%, transparent 23%, #4a90e2 23%, #4a90e2 26%, transparent 26%, transparent), radial-gradient(circle at 0 50%, #2a5298, #2a5298 14%, transparent 14%, transparent 17%, #3467b7 17%, #3467b7 20%, transparent 20%, transparent 23%, #4a90e2 23%, #4a90e2 26%, transparent 26%, transparent), radial-gradient(circle at 100% 0, #2a5298, #2a5298 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #4a90e2 37%, #4a90e2 40%, transparent 40%, transparent), radial-gradient(circle at 0 0, #2a5298, #2a5298 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #4a90e2 37%, #4a90e2 40%, transparent 40%, transparent);
background-size: 80px 80px;
background-position: 0 0, 80px 0, 40px 40px, 120px 40px, 40px 0, 120px 0;
}
/* Button Hover/Click Animation - Subtle Art Deco Shine */
.button-animation::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
transform: rotate(45deg);
opacity: 0;
transition: all 0.5s ease-out;
z-index: 0;
}
.button-animation:hover::before {
opacity: 1;
top: -20%;
left: -20%;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
}
</style>
