Kevin Adametz
1242d4bce8
Gewuenscht: CABINET 15 Prozent kleiner, Rotpunkt 20 Prozent groesser, Februe unveraendert. Rotpunkt fuellte die Box bereits ganz aus und konnte nur ueber eine groessere Box wachsen. - Alle vier Logo-Boxen 20 Prozent hoeher (Seitenkopf 96 → 115 px, Kacheln 44 → 53 px, /marken 56 → 67 px). Rotpunkt waechst dadurch um genau 20 %. - Februe gleicht das ueber 20 Prozent Luft oben und unten in der Datei aus und rendert unveraendert. - CABINET bekommt 18 Prozent Luft rechts – die Box begrenzt den 4:1-Schriftzug ueber die Breite, nicht ueber die Hoehe. Die Luft sitzt nur rechts, damit das Logo links buendig zum Text darunter bleibt. Nachgerechnet an allen drei Stellen: CABINET 85 %, Rotpunkt 120 %, Februe 100 %. Die Abstimmung steckt in den Zeichenflaechen der Dateien, nicht im Blade – so gilt sie an allen vier Stellen gleichzeitig. Der Merksatz fuer neue Logos steht im Kopf von BrandLogoSeeder. Tests: 873 gruen (3217 Assertions), Pint sauber, alle Themes gebaut. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
62 lines
4.1 KiB
PHP
62 lines
4.1 KiB
PHP
{{-- Übersichtsseite /marken: je Marke Logo, Bild, Claim, Text, drei Merkmale und der Weg
|
||
zur Detailseite. Jede Marke steht in einem eigenen Rahmen, damit klar ist, was zusammengehört.
|
||
Abwechselnde Bildseite, damit die Liste nicht monoton wird. --}}
|
||
<section class="section-padding {{ $bg }}">
|
||
<div class="container-padding space-y-10 lg:space-y-14">
|
||
@foreach ($brands as $index => $brand)
|
||
<article class="card-elevated rounded-3xl p-6 sm:p-8 lg:p-12" wire:key="brand-{{ $brand['slug'] }}">
|
||
<div class="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
|
||
<div class="{{ $loop->even ? '' : 'lg:order-2' }}">
|
||
@if (!empty($brand['image']))
|
||
<img src="{{ theme_image_url($brand['image']) }}" alt="{{ $brand['name'] }}"
|
||
class="w-full rounded-2xl object-cover aspect-[4/3]" loading="lazy" />
|
||
@else
|
||
{{-- Platzhalter, solange die Bildmotive fehlen (offene Zulieferung). --}}
|
||
<div class="w-full aspect-[4/3] rounded-2xl bg-muted flex items-center justify-center">
|
||
<span class="text-muted-foreground text-sm">{{ $brand['name'] }}</span>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
<div class="{{ $loop->even ? '' : 'lg:order-1' }}">
|
||
{{-- Feste Box statt fester Hoehe: die Markenlogos haben sehr unterschiedliche
|
||
Seitenverhaeltnisse und wirken sonst ungleich gross. Die optische Feinabstimmung
|
||
steckt in den Zeichenflaechen der Dateien, nicht hier – siehe BrandLogoSeeder. --}}
|
||
@if (!empty($brand['logo']))
|
||
<img src="{{ theme_image_url($brand['logo']) }}" alt="{{ $brand['name'] }}"
|
||
class="h-[4.2rem] max-w-[12rem] w-auto mb-5 object-contain object-left" loading="lazy" />
|
||
@endif
|
||
|
||
<h2 class="text-2xl lg:text-3xl font-medium">{{ $brand['name'] }}</h2>
|
||
<p class="text-large text-secondary font-medium mt-1">{{ $brand['tagline'] }}</p>
|
||
|
||
@foreach (preg_split('/\R{2,}/', trim((string) ($brand['summary'] ?: $brand['teaser']))) as $i => $paragraph)
|
||
<p class="text-muted-foreground leading-relaxed mt-4">{!! nl2br(e($paragraph)) !!}</p>
|
||
@endforeach
|
||
|
||
@if (!empty($brand['highlights']))
|
||
<ul class="mt-6 space-y-2 pt-6 border-t border-border/60">
|
||
@foreach ($brand['highlights'] as $i => $highlight)
|
||
<li class="flex items-start gap-3" wire:key="hl-{{ $brand['slug'] }}-{{ $i }}">
|
||
<svg class="w-5 h-5 text-secondary shrink-0 mt-0.5" fill="none" stroke="currentColor"
|
||
stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||
</svg>
|
||
<span class="text-muted-foreground">{{ is_array($highlight) ? ($highlight['title'] ?? '') : $highlight }}</span>
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
@endif
|
||
|
||
@if (!empty($brand['has_detail_page']))
|
||
<a href="{{ route('marken.show', ['slug' => $brand['slug']]) }}"
|
||
class="btn-primary-accent px-6 py-3 mt-8 inline-block">
|
||
{{ __('ui.more_about', ['name' => $brand['name']]) }}
|
||
</a>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</article>
|
||
@endforeach
|
||
</div>
|
||
</section>
|