gitmedia/b2in
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Abschluss-CTA: durchgehender Verlauf statt weicher Kreise

Browse source 
Die beiden blur-Kreise ueber dem Hellblau wirkten als Flecken – der dunkle
rechts unten am staerksten. Ersetzt durch .cta-band in shared-styles.css: ein
durchgehender Verlauf ueber die volle Breite, von Anthrazit diagonal in das
Dynamic Blue, beides aus den Theme-Variablen.

- Tiefe kommt aus dem Verlauf, nicht aus ueberlagerten Flaechen.
- Zwei Haarlinien als Kontur: eine oben ueber die Breite, eine als Auftakt
  ueber der Ueberschrift, beide zu den Seiten auslaufend.
- Buttons filigraner: duennerer Rahmen beim Outline-Button, weicherer Schatten
  beim Hauptbutton.

Der Verlauf liegt als CSS-Klasse vor und nicht als Utility-Kette im Blade,
damit er mit den Theme-Variablen arbeitet und ueber alle Themes stimmt.

Tests: 862 gruen (3192 Assertions), Pint sauber, npm run build:b2in gebaut.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Kevin Adametz 2026-09-03 10:12:20 +00:00
parent f971f416db
commit 3ee7b44a77
5 changed files with 81 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

30
resources/views/livewire/web/components/sections/brand-detail.blade.php
View file

@ -100,9 +100,9 @@
{{-- Weiches Auf- und Zuklappen ueber grid-template-rows (0fr → 1fr):
das animiert die tatsaechliche Hoehe, waehrend x-show den Inhalt
schlagartig einblendet. Das Alpine-Collapse-Plugin ist in diesem
Projekt nicht registriert, dies kommt ohne Abhaengigkeit aus. --}}
{{-- Der zugeklappte Zustand steht auch im statischen class-Attribut,
damit vor dem Start von Alpine nichts aufgeklappt aufblitzt. Die
Projekt nicht registriert, dies kommt ohne Abhaengigkeit aus.
Der zugeklappte Zustand steht auch im statischen class-Attribut,
damit vor dem Start von Alpine nichts aufgeklappt aufblitzt – die
Objekt-Schreibweise von x-bind:class entfernt ihn beim Oeffnen. --}}
<div id="detail-{{ $index }}"
class="grid grid-rows-[0fr] opacity-0 transition-all duration-500 ease-[cubic-bezier(0.33,1,0.68,1)]"
@ -282,18 +282,14 @@
</section>
@endif
{{-- 5. Abschluss. Der Block schliesst die Seite ab und traegt den Claim aus der Zulieferung –
deshalb weiche Lichtflaechen statt Volltonhintergrund und ein gesetzter Hauptbutton
statt eines Textlinks. --}}
<section class="section-padding bg-secondary text-secondary-foreground relative overflow-hidden">
{{-- Rein dekorativ: zwei weiche Lichtpunkte nehmen der Flaeche die Haerte. --}}
<div aria-hidden="true" class="pointer-events-none absolute inset-0">
<div class="absolute -top-40 left-1/2 h-96 w-[42rem] -translate-x-1/2 rounded-full bg-white/10 blur-3xl"></div>
<div class="absolute -bottom-48 -right-24 h-96 w-96 rounded-full bg-black/20 blur-3xl"></div>
</div>
{{-- 5. Abschluss. Der Block schliesst die Seite ab und traegt den Claim aus der Zulieferung.
Der durchgehende Verlauf steckt in `.cta-band` (shared-styles.css) – als Utility-Klassen
waere er nicht ueber alle Themes hinweg zu halten. --}}
<section class="section-padding cta-band text-secondary-foreground">
<div class="container-narrow relative text-center">
<span aria-hidden="true" class="mx-auto block h-px w-16 bg-white/40"></span>
{{-- Haarlinie als Auftakt, laeuft zu beiden Seiten aus. --}}
<span aria-hidden="true"
class="mx-auto block h-px w-24 bg-gradient-to-r from-transparent via-white/50 to-transparent"></span>
<h2 class="text-section-title text-white mt-8 text-balance">
{{ $brand['cta_title'] ?: __('ui.brand_cta_title', ['name' => $brand['name']]) }}
@ -304,7 +300,7 @@
<div class="mt-10 flex flex-col sm:flex-row flex-wrap items-center justify-center gap-4">
<a href="{{ route('contact') }}"
class="group inline-flex items-center justify-center gap-2 rounded-lg bg-white px-8 py-4 text-lg font-medium text-secondary shadow-lg transition-all duration-300 hover:-translate-y-0.5 hover:shadow-xl">
class="group inline-flex items-center justify-center gap-2 rounded-lg bg-white px-8 py-4 text-lg font-medium text-secondary shadow-[0_12px_30px_-14px_rgba(0,0,0,0.65)] transition-all duration-300 hover:-translate-y-0.5 hover:shadow-[0_18px_38px_-14px_rgba(0,0,0,0.7)]">
{{ __('ui.request_appointment') }}
<svg class="h-5 w-5 transition-transform duration-300 group-hover:translate-x-1" fill="none"
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
@ -314,7 +310,7 @@
@if (!empty($brand['website_url']))
<a href="{{ $brand['website_url'] }}" target="_blank" rel="noopener"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-white/40 px-8 py-4 text-lg text-white transition-colors duration-300 hover:bg-white/10">
class="inline-flex items-center justify-center gap-2 rounded-lg border border-white/25 px-8 py-4 text-lg text-white/90 transition-colors duration-300 hover:border-white/50 hover:text-white">
{{ __('ui.brand_website') }}
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"
aria-hidden="true">
@ -326,7 +322,7 @@
</div>
@if (!empty($brand['showroom']))
<p class="mt-10 inline-flex items-center gap-2 text-sm text-white/70">
<p class="mt-10 inline-flex items-center gap-2 text-sm text-white/65">
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />