68 lines
4.1 KiB
PHP
68 lines
4.1 KiB
PHP
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
|
<div class="container mx-auto py-12 px-4">
|
|
<!-- Breadcrumb Navigation -->
|
|
<nav class="mb-8" aria-label="Breadcrumb">
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 px-4 py-3">
|
|
<ol class="flex items-center space-x-2 text-sm text-gray-600">
|
|
<li>
|
|
<a wire:navigate href="{{ route('home') }}" class="text-blue-600 hover:text-blue-700 flex items-center">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
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">
|
|
</path>
|
|
</svg>
|
|
Hem
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<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"></path>
|
|
</svg>
|
|
</li>
|
|
<li class="font-medium text-gray-900">
|
|
Partier
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Header -->
|
|
<div class="text-center mb-12">
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-4">Sveriges Riksdag - Partier</h1>
|
|
<p class="text-lg text-gray-600">Utforska information om de politiska partierna i Sveriges riksdag</p>
|
|
</div>
|
|
|
|
<!-- Party Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 max-w-7xl mx-auto">
|
|
@foreach ($parties as $party)
|
|
<a wire:navigate href="{{ route('party.show', $party['code']) }}" class="group">
|
|
<div class="bg-white rounded-lg shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-200 overflow-hidden">
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-center mb-4">
|
|
<div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center group-hover:bg-gray-200 transition-colors">
|
|
@if ($party['logo'])
|
|
<img src="{{ $party['logo'] }}" alt="{{ $party['name'] }}" class="w-12 h-12 object-contain">
|
|
@else
|
|
<span class="text-2xl font-bold text-gray-600">{{ $party['code'] }}</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-semibold text-gray-900 text-center mb-2">{{ $party['name'] }}</h3>
|
|
<p class="text-sm text-gray-600 text-center mb-4">{{ $party['code'] }}</p>
|
|
|
|
<div class="flex items-center justify-center text-blue-600 group-hover:text-blue-700">
|
|
<span class="text-sm font-medium">Visa detaljer</span>
|
|
<svg class="w-4 h-4 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div> |