development 31-10-2025

resources/views/livewire/web/components/sections/card-section.blade.php

@@ -0,0 +1,69 @@
+<section class="section-padding {{ $bg }}">
+    <div class="container-padding">
+        {{-- Section Title --}}
+        <div class="text-center mb-16 slide-up delay-300">
+            <h2 class="text-section-title">{!! $content['title'] !!}</h2>
+            <p class="text-large text-muted-foreground mt-4 max-w-3xl mx-auto">
+                {!! $content['subtitle'] !!}
+            </p>
+        </div>
+
+        {{-- Brand Cards --}}
+        <div class="grid md:grid-cols-3 gap-8">
+            @foreach ($content['cards'] as $index => $card)
+            <div class="card-elevated overflow-hidden group hover:shadow-elevated transition-all duration-300 flex flex-col slide-up delay-{{ $index * 200 }}">
+
+                @if(isset($card['image']))
+                    <div class="relative">
+                        <img src="{{ asset('img/assets/' . $card['image']) }}" alt="{{ $card['title'] }}"
+                            class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" />
+                    </div>
+                @endif
+
+                @if(isset($card['icon']))
+                <div class="relative pt-12 pb-8">
+                        <div class="mx-auto w-20 h-20 icon-secondary-linear glow-soft group-hover:glow-medium rounded-2xl flex items-center justify-center transition-colors duration-300">
+                            @svg('heroicon-o-'.$card['icon'], 'w-10 h-10 text-secondary-foreground')
+                        </div>
+                    </div>
+                @endif
+
+                <div class="p-6 spacing-small flex flex-col justify-between flex-grow">
+                    <div class="mb-4">
+                        @if (isset($card['logo']))
+                        <img src="{{ asset($card['logo']) }}" alt="{{ $card['title'] }}"
+                            class="{{ $card['logo_width'] }} h-18 object-contain" />
+                        @endif
+                        @if(isset($card['title']))
+                        <h3 class="text-xl font-medium text-center">{{ $card['title'] }}</h3>
+                        @endif
+                        @if(isset($card['description']))
+                            <p class="text-muted-foreground leading-relaxed mt-2 text-center">
+                                {{ $card['description'] }}
+                            </p>
+                        @endif
+                    </div>
+
+                    @if(isset($card['button']))
+                    <div class="flex flex-col sm:flex-row gap-4 slide-right delay-300 mx-auto pt-4">
+                        <a href="{{ $card['button'] }}" class="btn-primary-accent">
+                            {{ $card['button_text'] }}
+                        </a>
+                    </div>
+                    @endif
+                    @if(isset($card['link']))
+                    <a href="{{ $card['link'] }}"
+                        class="inline-flex items-center gap-2 text-secondary font-medium hover:gap-3 transition-all duration-300">
+                        Mehr erfahren
+                        <svg class="w-4 h-4" 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>
+                    </a>
+                    @endif
+                </div>
+            </div>
+            @endforeach
+        </div>
+    </div>
+</section>