Browse Categories
Choose Your Game
Select a category to browse available items
Zenless Zone Zero
0 Items
@if(isset($customGames) && $customGames->count() > 0)
@foreach($customGames as $index => $customGame)
@php
// Use stored styling from database
$gameIcon = $customGame->icon;
$gameGradient = $customGame->color_gradient;
// Get product count for this custom game
$productCount = \App\Models\Product::where('game', $customGame->name)->count();
// Extract color names from gradient for consistent theming
$gradientParts = explode(' ', $gameGradient);
$primaryColor = str_replace(['from-', '-500'], '', $gradientParts[0] ?? 'purple');
$secondaryColor = str_replace(['to-', '-500'], '', $gradientParts[1] ?? 'blue');
// Map to predefined color classes to ensure Tailwind generates them
$colorClasses = [
'red' => [
'bg' => 'from-red-500/5 to-pink-500/5',
'border' => 'border-red-500/20',
'hover_border' => 'hover:border-red-500/40',
'bg_hover' => 'from-red-500/10 to-pink-500/10',
'decorative1' => 'from-red-400/20 to-pink-400/20',
'decorative2' => 'from-pink-400/20 to-red-400/20',
'shadow' => 'shadow-red-500/30',
'text_hover' => 'group-hover:text-red-300',
'icon_color' => 'text-red-400'
],
'pink' => [
'bg' => 'from-pink-500/5 to-rose-500/5',
'border' => 'border-pink-500/20',
'hover_border' => 'hover:border-pink-500/40',
'bg_hover' => 'from-pink-500/10 to-rose-500/10',
'decorative1' => 'from-pink-400/20 to-rose-400/20',
'decorative2' => 'from-rose-400/20 to-pink-400/20',
'shadow' => 'shadow-pink-500/30',
'text_hover' => 'group-hover:text-pink-300',
'icon_color' => 'text-pink-400'
],
'purple' => [
'bg' => 'from-purple-500/5 to-blue-500/5',
'border' => 'border-purple-500/20',
'hover_border' => 'hover:border-purple-500/40',
'bg_hover' => 'from-purple-500/10 to-blue-500/10',
'decorative1' => 'from-purple-400/20 to-blue-400/20',
'decorative2' => 'from-blue-400/20 to-purple-400/20',
'shadow' => 'shadow-purple-500/30',
'text_hover' => 'group-hover:text-purple-300',
'icon_color' => 'text-purple-400'
],
'blue' => [
'bg' => 'from-blue-500/5 to-indigo-500/5',
'border' => 'border-blue-500/20',
'hover_border' => 'hover:border-blue-500/40',
'bg_hover' => 'from-blue-500/10 to-indigo-500/10',
'decorative1' => 'from-blue-400/20 to-indigo-400/20',
'decorative2' => 'from-indigo-400/20 to-blue-400/20',
'shadow' => 'shadow-blue-500/30',
'text_hover' => 'group-hover:text-blue-300',
'icon_color' => 'text-blue-400'
],
'green' => [
'bg' => 'from-green-500/5 to-teal-500/5',
'border' => 'border-green-500/20',
'hover_border' => 'hover:border-green-500/40',
'bg_hover' => 'from-green-500/10 to-teal-500/10',
'decorative1' => 'from-green-400/20 to-teal-400/20',
'decorative2' => 'from-teal-400/20 to-green-400/20',
'shadow' => 'shadow-green-500/30',
'text_hover' => 'group-hover:text-green-300',
'icon_color' => 'text-green-400'
],
'orange' => [
'bg' => 'from-orange-500/5 to-red-500/5',
'border' => 'border-orange-500/20',
'hover_border' => 'hover:border-orange-500/40',
'bg_hover' => 'from-orange-500/10 to-red-500/10',
'decorative1' => 'from-orange-400/20 to-red-400/20',
'decorative2' => 'from-red-400/20 to-orange-400/20',
'shadow' => 'shadow-orange-500/30',
'text_hover' => 'group-hover:text-orange-300',
'icon_color' => 'text-orange-400'
],
'rose' => [
'bg' => 'from-rose-500/5 to-pink-500/5',
'border' => 'border-rose-500/20',
'hover_border' => 'hover:border-rose-500/40',
'bg_hover' => 'from-rose-500/10 to-pink-500/10',
'decorative1' => 'from-rose-400/20 to-pink-400/20',
'decorative2' => 'from-pink-400/20 to-rose-400/20',
'shadow' => 'shadow-rose-500/30',
'text_hover' => 'group-hover:text-rose-300',
'icon_color' => 'text-rose-400'
],
'teal' => [
'bg' => 'from-teal-500/5 to-cyan-500/5',
'border' => 'border-teal-500/20',
'hover_border' => 'hover:border-teal-500/40',
'bg_hover' => 'from-teal-500/10 to-cyan-500/10',
'decorative1' => 'from-teal-400/20 to-cyan-400/20',
'decorative2' => 'from-cyan-400/20 to-teal-400/20',
'shadow' => 'shadow-teal-500/30',
'text_hover' => 'group-hover:text-teal-300',
'icon_color' => 'text-teal-400'
],
'cyan' => [
'bg' => 'from-cyan-500/5 to-blue-500/5',
'border' => 'border-cyan-500/20',
'hover_border' => 'hover:border-cyan-500/40',
'bg_hover' => 'from-cyan-500/10 to-blue-500/10',
'decorative1' => 'from-cyan-400/20 to-blue-400/20',
'decorative2' => 'from-blue-400/20 to-cyan-400/20',
'shadow' => 'shadow-cyan-500/30',
'text_hover' => 'group-hover:text-cyan-300',
'icon_color' => 'text-cyan-400'
],
'indigo' => [
'bg' => 'from-indigo-500/5 to-purple-500/5',
'border' => 'border-indigo-500/20',
'hover_border' => 'hover:border-indigo-500/40',
'bg_hover' => 'from-indigo-500/10 to-purple-500/10',
'decorative1' => 'from-indigo-400/20 to-purple-400/20',
'decorative2' => 'from-purple-400/20 to-indigo-400/20',
'shadow' => 'shadow-indigo-500/30',
'text_hover' => 'group-hover:text-indigo-300',
'icon_color' => 'text-indigo-400'
],
'violet' => [
'bg' => 'from-violet-500/5 to-purple-500/5',
'border' => 'border-violet-500/20',
'hover_border' => 'hover:border-violet-500/40',
'bg_hover' => 'from-violet-500/10 to-purple-500/10',
'decorative1' => 'from-violet-400/20 to-purple-400/20',
'decorative2' => 'from-purple-400/20 to-violet-400/20',
'shadow' => 'shadow-violet-500/30',
'text_hover' => 'group-hover:text-violet-300',
'icon_color' => 'text-violet-400'
],
'emerald' => [
'bg' => 'from-emerald-500/5 to-green-500/5',
'border' => 'border-emerald-500/20',
'hover_border' => 'hover:border-emerald-500/40',
'bg_hover' => 'from-emerald-500/10 to-green-500/10',
'decorative1' => 'from-emerald-400/20 to-green-400/20',
'decorative2' => 'from-green-400/20 to-emerald-400/20',
'shadow' => 'shadow-emerald-500/30',
'text_hover' => 'group-hover:text-emerald-300',
'icon_color' => 'text-emerald-400'
],
'yellow' => [
'bg' => 'from-yellow-500/5 to-orange-500/5',
'border' => 'border-yellow-500/20',
'hover_border' => 'hover:border-yellow-500/40',
'bg_hover' => 'from-yellow-500/10 to-orange-500/10',
'decorative1' => 'from-yellow-400/20 to-orange-400/20',
'decorative2' => 'from-orange-400/20 to-yellow-400/20',
'shadow' => 'shadow-yellow-500/30',
'text_hover' => 'group-hover:text-yellow-300',
'icon_color' => 'text-yellow-400'
]
];
$colors = $colorClasses[$primaryColor] ?? $colorClasses['purple'];
@endphp
{{ $customGame->name }}
{{ $productCount }} Items
@endforeach
@endif
@if(!isset($customGames) || $customGames->isEmpty())
@endif
Secure transactions • Instant delivery • 24/7 support