Startseite ruhiger, Otterpohl mit Montage, Marken-Bilder und Farbwelt-Entwurf

- Hinweisleiste per B2IN_ANNOUNCEMENT_BAR ausgeblendet (Standard aus)
- Hero: „Räume aus einer Hand.“ als neue Überschrift, zweiter Button entfernt
- Projekttext mit zentralem deutschen Vertragspartner (Punkt statt Gedankenstrich)
- Otterpohl als vierte Kernmarke: Text v2, Abschnitt „Montage“, Titelbild getauscht
- Markenabschnitte: Absätze mit „- “ als Liste mit fetter Einleitung
- Titelbilder und Galerien für CABINET, Rotpunkt, Febrü und Otterpohl (WebP)
- Feedback 17.09. in den Markentexten, Demobilder entfernt, WhatsApp-Nummer
- Palette „Modern“ fest ohne Schalter, Entwurf /entwurf mit Hero-Slideshow
- Seeder-Liste fürs Deployment im Entwicklungsplan

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Kevin Adametz 2026-10-01 10:34:21 +00:00
parent 3211569fee
commit 4b07bbdcae
124 changed files with 3618 additions and 496 deletions

View file

@ -0,0 +1,55 @@
{{-- Farb-Schalter für die Abstimmung (Nachtrag 18 + 19): bisherige Creme-Palette, die hellere
Variante „Neu“ und der Entwurf vom 24.09. Schwimmt am linken Rand in der Mitte – unten links
sitzt der Cookie-Button, unten rechts die Terminanfrage.
„Bisher“ und „Neu“ schalten im Browser um (localStorage b2in-palette, im <head> gesetzt,
?palette=modern|classic per Link). „Entwurf“ ist eine eigene Seite (/entwurf) mit fester
Palette; von dort führen die beiden anderen Einträge zurück auf die Startseite. --}}
@props(['draft' => false])
<div class="fixed left-3 top-1/2 z-40 -translate-y-1/2 print:hidden" data-palette-switch
@unless ($draft)
x-data="{
palette: document.documentElement.classList.contains('palette-modern') ? 'modern' : 'classic',
choose(value) {
this.palette = value;
document.documentElement.classList.toggle('palette-modern', value === 'modern');
try { localStorage.setItem('b2in-palette', value); } catch (e) {}
},
}"
@endunless>
<div class="flex flex-col items-stretch gap-1 rounded-full border border-border bg-card/95 p-1 text-[11px] font-medium shadow-lg backdrop-blur-sm"
role="group" aria-label="{{ __('ui.palette.label') }}">
<span class="px-2 pt-1 text-center text-[10px] uppercase tracking-wide text-muted-foreground" aria-hidden="true">
{{ __('ui.palette.label') }}
</span>
@if ($draft)
<a href="{{ url('/?palette=classic') }}"
class="rounded-full px-3 py-1.5 text-center text-muted-foreground transition-colors duration-200 hover:text-foreground">
{{ __('ui.palette.classic') }}
</a>
<a href="{{ url('/?palette=modern') }}"
class="rounded-full px-3 py-1.5 text-center text-muted-foreground transition-colors duration-200 hover:text-foreground">
{{ __('ui.palette.modern') }}
</a>
<span aria-current="page" class="rounded-full bg-primary px-3 py-1.5 text-center text-primary-foreground">
{{ __('ui.palette.draft') }}
</span>
@else
<button type="button" x-on:click="choose('classic')" x-bind:aria-pressed="(palette === 'classic').toString()"
x-bind:class="palette === 'classic' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'"
class="cursor-pointer rounded-full px-3 py-1.5 transition-colors duration-200">
{{ __('ui.palette.classic') }}
</button>
<button type="button" x-on:click="choose('modern')" x-bind:aria-pressed="(palette === 'modern').toString()"
x-bind:class="palette === 'modern' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'"
class="cursor-pointer rounded-full px-3 py-1.5 transition-colors duration-200">
{{ __('ui.palette.modern') }}
</button>
<a href="{{ route('home.draft') }}"
class="rounded-full px-3 py-1.5 text-center text-muted-foreground transition-colors duration-200 hover:text-foreground">
{{ __('ui.palette.draft') }}
</a>
@endif
</div>
</div>

View file

@ -0,0 +1,18 @@
{{-- Linke Flanke des Entwurfs-Heros (Nachtrag 19): schmaler Haken unten links, oben gerundet,
mit Goldlinie. Höhe rund 46 % des Rahmens, Breite aus dem viewBox-Verhältnis. --}}
<svg class="hero-flank hero-flank-left hidden lg:block" viewBox="0 0 80 480" preserveAspectRatio="xMinYMax meet"
aria-hidden="true" focusable="false" data-hero-flank="left">
<defs>
<linearGradient id="hero-flank-left-green" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" style="stop-color: hsl(var(--primary-light))" />
<stop offset="1" style="stop-color: hsl(var(--primary-dark))" />
</linearGradient>
<linearGradient id="hero-flank-left-gold" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" style="stop-color: hsl(var(--secondary-light))" />
<stop offset="1" style="stop-color: hsl(var(--secondary)); stop-opacity: 0.5" />
</linearGradient>
</defs>
<path d="M0 480V56C0 25 25 0 56 0H80V480Z" fill="url(#hero-flank-left-green)" />
<path d="M14 480V60C14 35 35 14 60 14H80" fill="none" stroke="url(#hero-flank-left-gold)" stroke-width="1.5"
vector-effect="non-scaling-stroke" />
</svg>

View file

@ -0,0 +1,24 @@
{{-- Rechte Flanke des Entwurfs-Heros (Nachtrag 19): tannengrüner Block mit gerundeter Innenkante,
Goldlinie mit Verlauf entlang der Rundung und einer kurzen Zierlinie wie in der Visualisierung.
Skaliert über die Rahmenhöhe (height: 100 %, Breite aus dem viewBox-Verhältnis). Farben
kommen aus den Tokens, damit die Flanke jede Palette mitmacht. Kann später 1:1 gegen eine
gelieferte SVG-Datei getauscht werden. --}}
<svg class="hero-flank hero-flank-right hidden lg:block" viewBox="0 0 140 1000" preserveAspectRatio="xMaxYMid meet"
aria-hidden="true" focusable="false" data-hero-flank="right">
<defs>
<linearGradient id="hero-flank-right-green" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" style="stop-color: hsl(var(--primary-light))" />
<stop offset="1" style="stop-color: hsl(var(--primary-dark))" />
</linearGradient>
<linearGradient id="hero-flank-right-gold" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" style="stop-color: hsl(var(--secondary-light))" />
<stop offset="0.5" style="stop-color: hsl(var(--secondary)); stop-opacity: 0.45" />
<stop offset="1" style="stop-color: hsl(var(--secondary-light))" />
</linearGradient>
</defs>
<path d="M140 0H72C32 0 0 32 0 72V928C0 968 32 1000 72 1000H140Z" fill="url(#hero-flank-right-green)" />
<path d="M140 14H74C41 14 14 41 14 74V926C14 959 41 986 74 986H140" fill="none"
stroke="url(#hero-flank-right-gold)" stroke-width="1.5" vector-effect="non-scaling-stroke" />
<path d="M124 330V600" fill="none" stroke="url(#hero-flank-right-gold)" stroke-width="1.5"
vector-effect="non-scaling-stroke" />
</svg>

View file

@ -565,13 +565,16 @@ $cancelForm = function () {
wire:click="addGalleryImage('{{ CmsBrand::GALLERY_PROJECT }}')">Projekt</flux:button>
<flux:button size="xs" variant="ghost" icon="plus"
wire:click="addGalleryImage('{{ CmsBrand::GALLERY_INSPIRATION }}')">Inspiration</flux:button>
<flux:button size="xs" variant="ghost" icon="plus"
wire:click="addGalleryImage('{{ CmsBrand::GALLERY_COMPANY }}')">Werkstatt</flux:button>
</div>
</div>
<div class="mb-3 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
<strong>Projekt</strong> = tatsächlich ausgeführter Auftrag.
<strong>Projekt</strong> = tatsächlich ausgeführter Auftrag (erscheint auch unter „Referenzen“, solange dort nichts gepflegt ist).
<strong>Werkstatt</strong> = Einblick in Fertigung oder Montage des Herstellers.
<strong>Inspiration</strong> = Entwurf, Rendering oder KI-Darstellung.
Auf der Seite werden beide getrennt gezeigt und beschriftet – bitte nichts vermischen.
Auf der Seite trägt jedes Bild seine Beschriftung – bitte nichts vermischen.
</div>
@if (empty($gallery))
@ -589,6 +592,7 @@ $cancelForm = function () {
<flux:select wire:model="gallery.{{ $i }}.category" size="sm" class="mb-2">
<flux:select.option value="{{ CmsBrand::GALLERY_PROJECT }}">Realisiertes Projekt</flux:select.option>
<flux:select.option value="{{ CmsBrand::GALLERY_INSPIRATION }}">Inspiration / Entwurf</flux:select.option>
<flux:select.option value="{{ CmsBrand::GALLERY_COMPANY }}">Aus der Werkstatt</flux:select.option>
</flux:select>
<flux:input wire:model="gallery.{{ $i }}.caption" size="sm" class="mb-2"

View file

@ -71,13 +71,29 @@
<section class="pb-16">
<div class="container-narrow space-y-14">
@foreach ($brand['sections'] as $index => $section)
<div wire:key="section-{{ $index }}">
<div wire:key="section-{{ $index }}" @if (!empty($section['anchor'])) id="{{ $section['anchor'] }}" @endif>
@if (!empty($section['title']))
<h2 class="text-2xl lg:text-3xl font-medium">{{ $section['title'] }}</h2>
@endif
@foreach ($section['paragraphs'] as $i => $paragraph)
<p class="text-muted-foreground leading-relaxed mt-4">{{ $paragraph }}</p>
@foreach (\App\Models\CmsBrand::paragraphBlocks($section['paragraphs']) as $block)
@if ($block['type'] === 'list')
<ul class="mt-6 space-y-4">
@foreach ($block['items'] as $item)
<li class="flex gap-3 text-muted-foreground leading-relaxed">
<span class="mt-2.5 h-1.5 w-1.5 shrink-0 rounded-full bg-secondary" aria-hidden="true"></span>
<span>
@if ($item['lead'] !== '')
<strong class="font-medium text-foreground">{{ $item['lead'] }}:</strong>
@endif
{{ $item['text'] }}
</span>
</li>
@endforeach
</ul>
@else
<p class="text-muted-foreground leading-relaxed mt-4">{{ $block['text'] }}</p>
@endif
@endforeach
@if (!empty($section['quote']))
@ -129,6 +145,14 @@
@if (!empty($section['claim']))
<p class="text-large text-secondary font-medium mt-6">{{ $section['claim'] }}</p>
@endif
@if (!empty($section['link']) && !empty($section['link_text']))
<a href="{{ $section['link'] }}"
class="text-secondary font-medium mt-4 inline-flex items-center gap-1 hover:underline">
{{ $section['link_text'] }}
<span aria-hidden="true">&rarr;</span>
</a>
@endif
</div>
@endforeach
</div>
@ -153,98 +177,65 @@
</section>
@endif
{{-- 4. Galerie: realisierte Projekte und Inspirationen strikt getrennt --}}
{{-- 4. Galerie. Realisierte Projekte, Einblicke in die Werkstatt und Visualisierungen stehen in
einem Raster, unterschieden nur durch das Badge – der Rubrikwechsel ist ausgesetzt
(Abstimmung 22.09., Nachtrag 17). Reihenfolge: Projekte, Werkstatt, Visualisierungen.
Überschrift und Zeile darunter richten sich nach dem, was die Galerie enthält (Nachtrag 19):
nur Visualisierungen → „Inspirationen und Entwürfe“, nur Projekte → „Referenzen“, Projekte
und Werkstatt → „Referenzen und Einblicke“, mit Visualisierungen → „Projekte und Entwürfe“. --}}
@php
$galleryProjects = $gallery['projects'] ?? [];
$galleryInspirations = $gallery['inspirations'] ?? [];
$hasBothGalleryGroups = $galleryProjects !== [] && $galleryInspirations !== [];
$initialGalleryTab = $galleryProjects !== [] ? 'projects' : 'inspirations';
$galleryItems = array_merge($gallery['projects'] ?? [], $gallery['company'] ?? [], $gallery['inspirations'] ?? []);
$galleryLightbox = collect(['projects' => $galleryProjects, 'inspirations' => $galleryInspirations])
->map(fn (array $items) => collect($items)->map(fn (array $item) => [
'src' => theme_image_url($item['image']),
'caption' => $item['caption'] ?? '',
'badge' => $item['category'] === \App\Models\CmsBrand::GALLERY_PROJECT
? __('ui.brand_gallery_badge_project')
: __('ui.brand_gallery_badge_inspiration'),
])->values()->all())
->all();
$galleryHasReal = ! empty($gallery['projects']) || ! empty($gallery['company']);
$galleryHasDrafts = ! empty($gallery['inspirations']);
$galleryVariant = match (true) {
! $galleryHasReal => 'inspirations',
$galleryHasDrafts => 'mixed',
! empty($gallery['company']) => 'projects_company',
default => 'projects',
};
$galleryLightbox = collect($galleryItems)->map(fn (array $item) => [
'src' => theme_image_url($item['image']),
'caption' => $item['caption'] ?? '',
'badge' => \App\Models\CmsBrand::galleryBadge($item['category']),
])->values()->all();
@endphp
@if ($galleryProjects || $galleryInspirations)
@if ($galleryItems)
<section id="galerie" class="section-padding"
x-data="{
tab: '{{ $initialGalleryTab }}',
groups: @js($galleryLightbox),
items: @js($galleryLightbox),
lightbox: false,
current: 0,
get items() { return this.groups[this.tab] ?? [] },
open(index) { this.current = index; this.lightbox = true },
next() { this.current = (this.current + 1) % this.items.length },
prev() { this.current = (this.current - 1 + this.items.length) % this.items.length },
}">
<div class="container-padding">
<div class="text-center max-w-2xl mx-auto">
<h2 class="text-section-title">{{ __('ui.brand_gallery_title') }}</h2>
<p class="text-muted-foreground leading-relaxed mt-4">{{ __('ui.brand_gallery_intro') }}</p>
<h2 class="text-section-title">{{ __('ui.brand_gallery_title_'.$galleryVariant) }}</h2>
<p class="text-muted-foreground leading-relaxed mt-4">{{ __('ui.brand_gallery_intro_'.$galleryVariant) }}</p>
</div>
@if ($hasBothGalleryGroups)
<div class="flex justify-center mt-10" role="tablist" aria-label="{{ __('ui.brand_gallery_title') }}">
<div class="inline-flex rounded-full bg-accent p-1 gap-1">
@foreach (['projects' => __('ui.brand_gallery_tab_projects'), 'inspirations' => __('ui.brand_gallery_tab_inspirations')] as $tabKey => $tabLabel)
<button type="button" role="tab" wire:key="gallery-tab-{{ $tabKey }}"
x-on:click="tab = '{{ $tabKey }}'"
x-bind:aria-selected="tab === '{{ $tabKey }}' ? 'true' : 'false'"
x-bind:class="tab === '{{ $tabKey }}'
? 'bg-background text-foreground shadow-sm'
: 'text-muted-foreground hover:text-foreground'"
class="px-6 py-2.5 rounded-full text-sm font-medium transition-colors cursor-pointer">
{{ $tabLabel }}
</button>
@endforeach
</div>
</div>
@endif
@foreach (['projects' => $galleryProjects, 'inspirations' => $galleryInspirations] as $groupKey => $groupItems)
@if ($groupItems)
<div wire:key="gallery-group-{{ $groupKey }}"
@if ($hasBothGalleryGroups) x-show="tab === '{{ $groupKey }}'" x-cloak @endif
class="mt-10">
@unless ($hasBothGalleryGroups)
<h3 class="text-xl font-medium text-center mb-8">
{{ $groupKey === 'projects' ? __('ui.brand_gallery_tab_projects') : __('ui.brand_gallery_tab_inspirations') }}
</h3>
@endunless
@if ($groupKey === 'inspirations')
<p class="text-sm text-muted-foreground text-center max-w-2xl mx-auto mb-8">
{{ __('ui.brand_gallery_inspiration_note') }}
</p>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
@foreach ($galleryItems as $index => $item)
<figure wire:key="gallery-{{ $index }}" class="group">
<button type="button" x-on:click="open({{ $index }})"
class="relative block w-full overflow-hidden rounded-2xl cursor-pointer">
<img src="{{ theme_image_url($item['image']) }}"
alt="{{ $item['caption'] ?: $brand['name'] }}" loading="lazy"
class="w-full aspect-[4/3] object-cover transition-transform duration-300 group-hover:scale-105" />
<span class="absolute top-3 left-3 rounded-full bg-black/60 px-3 py-1 text-xs font-medium text-white backdrop-blur-sm">
{{ \App\Models\CmsBrand::galleryBadge($item['category']) }}
</span>
</button>
@if (!empty($item['caption']))
<figcaption class="text-sm text-muted-foreground mt-3">{{ $item['caption'] }}</figcaption>
@endif
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
@foreach ($groupItems as $index => $item)
<figure wire:key="gallery-{{ $groupKey }}-{{ $index }}" class="group">
<button type="button" x-on:click="open({{ $index }})"
class="relative block w-full overflow-hidden rounded-2xl cursor-pointer">
<img src="{{ theme_image_url($item['image']) }}"
alt="{{ $item['caption'] ?: $brand['name'] }}" loading="lazy"
class="w-full aspect-[4/3] object-cover transition-transform duration-300 group-hover:scale-105" />
<span class="absolute top-3 left-3 rounded-full bg-black/60 px-3 py-1 text-xs font-medium text-white backdrop-blur-sm">
{{ $groupKey === 'projects' ? __('ui.brand_gallery_badge_project') : __('ui.brand_gallery_badge_inspiration') }}
</span>
</button>
@if (!empty($item['caption']))
<figcaption class="text-sm text-muted-foreground mt-3">{{ $item['caption'] }}</figcaption>
@endif
</figure>
@endforeach
</div>
</div>
@endif
@endforeach
</figure>
@endforeach
</div>
</div>
{{-- Lightbox: ins body geteleportet, damit keine Eltern-Constraints stören --}}

View file

@ -1,139 +1,102 @@
{{-- Hero des Entwurfs (Nachtrag 19): Rahmen mit feiner Goldkante und grünen Flanken, links
Text mit einem Button, rechts die Slideshow. Das Bild hat ein festes Seitenverhältnis –
das Motiv wird auf großen Bildschirmen nicht mehr unten beschnitten (Briefing Punkt 2).
Der Wechsel läuft langsam (Überblendung 1,4 s, Standard alle 7 s), pausiert bei Hover und
bleibt bei „reduzierter Bewegung“ stehen. --}}
<section id="hero" class="hero-draft section-padding relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
x-data="{
active: 0,
count: {{ count($slides) }},
interval: {{ $this->intervalMs }},
timer: null,
paused: false,
reduced: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
start() {
if (this.reduced || this.count < 2) { return; }
this.stop();
this.timer = setInterval(() => { if (!this.paused && !document.hidden) { this.next(); } }, this.interval);
},
stop() { if (this.timer) { clearInterval(this.timer); this.timer = null; } },
go(i) { this.active = (i + this.count) % this.count; this.start(); },
next() { this.go(this.active + 1); },
prev() { this.go(this.active - 1); },
}"
x-init="start()" x-on:keydown.arrow-right.prevent="next()" x-on:keydown.arrow-left.prevent="prev()">
<div x-data="heroSlider()" x-init="init()">
<section class="relative mb-10">
<!-- Slider Container -->
<div class="absolute inset-0 overflow-hidden">
@if(!empty($content['slides']))
@foreach($content['slides'] as $index => $slide)
<div
class="absolute inset-0 transition-opacity duration-1000 ease-in-out"
:class="currentSlide === {{ $index }} ? 'opacity-100' : 'opacity-0'"
>
<img
src="{{ theme_image_url($slide['image']) }}"
alt="{{ $slide['image_alt'] }}"
class="size-full object-cover"
/>
<div class="absolute inset-0 bg-gray-900 opacity-20"></div>
</div>
@endforeach
@endif
</div>
<div class="hero-frame relative overflow-hidden rounded-[28px]">
<x-web.hero-flank-right />
<x-web.hero-flank-left />
<!-- Content -->
<div class="relative mx-auto flex max-w-3xl flex-col items-center px-6 py-32 text-center sm:py-64 lg:px-0">
<h1 class="text-hero text-white">
{!! $content['title'] !!}
</h1>
<p class="mt-4 text-xl text-white">{!! $content['subtitle'] !!}</p>
<a href="{{ $content['cta1_link'] }}" class="mt-8 inline-block btn-secondary-accent">{{ $content['cta1_text'] }}</a>
</div>
{{-- Rechts wenig Innenabstand: das Bild liegt über der grünen Flanke, wie in der Visualisierung. --}}
<div class="relative grid items-center gap-10 p-6 sm:p-10 lg:grid-cols-12 lg:gap-10 lg:py-5 lg:pl-16 lg:pr-12">
{{-- Text --}}
<div class="space-y-6 lg:col-span-5 lg:py-10 lg:pr-4">
@if (!empty($content['eyebrow']))
<p class="hero-eyebrow">{{ $content['eyebrow'] }}</p>
@endif
<!-- Navigation Dots -->
@if(!empty($content['slides']) && count($content['slides']) > 1)
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2">
<div class="flex space-x-3">
@foreach($content['slides'] as $index => $slide)
<button
@click="setSlide({{ $index }})"
class="w-3 h-3 rounded-full border-2 border-white/50 transition-all duration-300"
:class="currentSlide === {{ $index }} ? 'bg-white border-white' : 'bg-transparent hover:border-white/80'"
aria-label="{{ __('ui.show_slide', ['number' => $index + 1]) }}"
></button>
@endforeach
<h1 class="hero-title">{!! $content['title'] ?? '' !!}</h1>
@if (!empty($content['subtitle']))
<p class="max-w-md text-base leading-relaxed text-muted-foreground">{!! $content['subtitle'] !!}</p>
@endif
<div>
<a href="{{ $content['cta_link'] ?? '/marken' }}" class="btn-hero">
{{ $content['cta_text'] ?? __('ui.all_brands_cta') }}
<svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
</a>
</div>
</div>
{{-- Slideshow --}}
<div class="hero-image lg:col-span-7">
<div class="hero-image-frame">
<div class="relative aspect-[4/3] overflow-hidden rounded-[calc(1.25rem-1.5px)] bg-muted lg:aspect-[5/4]"
role="group" aria-roledescription="carousel" aria-label="{{ __('ui.hero_slider.label') }}"
x-on:mouseenter="paused = true" x-on:mouseleave="paused = false"
x-on:focusin="paused = true" x-on:focusout="paused = false" tabindex="0">
@forelse ($slides as $index => $slide)
<figure wire:key="hero-slide-{{ $index }}" data-hero-slide="{{ $index }}"
class="hero-slide absolute inset-0 m-0 {{ $index === 0 ? 'opacity-100' : 'opacity-0' }}"
x-bind:class="active === {{ $index }} ? 'opacity-100' : 'opacity-0 pointer-events-none'"
x-bind:aria-hidden="(active !== {{ $index }}).toString()">
<img src="{{ theme_image_url($slide['image']) }}" alt="{{ $slide['alt'] }}"
class="h-full w-full object-cover" @if ($index > 0) loading="lazy" @endif />
@if ($slide['label'] !== '')
<figcaption
class="absolute bottom-5 left-5 rounded-full bg-card/85 px-3 py-1 text-[10px] font-medium uppercase tracking-[0.18em] text-foreground/80 backdrop-blur-sm">
{{ $slide['label'] }}
</figcaption>
@endif
</figure>
@empty
<div class="flex h-full items-center justify-center text-sm text-muted-foreground">
{{ __('ui.hero_slider.empty') }}
</div>
@endforelse
</div>
</div>
</div>
</div>
</div>
</div>
@endif
<!-- Arrow Navigation (Optional) -->
@if(!empty($content['slides']) && count($content['slides']) > 1)
<button
@click="previousSlide()"
class="absolute left-6 top-1/2 transform -translate-y-1/2 text-white/70 hover:text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white/50 rounded-full p-2"
aria-label="{{ __('ui.previous_image') }}"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
<button
@click="nextSlide()"
class="absolute right-6 top-1/2 transform -translate-y-1/2 text-white/70 hover:text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white/50 rounded-full p-2"
aria-label="{{ __('ui.next_image') }}"
>
<svg class="w-6 h-6" 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>
</button>
@endif
</section>
</div>
<script>
function heroSlider() {
return {
currentSlide: 0,
totalSlides: {{ !empty($content['slides']) ? count($content['slides']) : 0 }},
autoplayInterval: null,
autoplayTimeout: null,
init() {
if (this.totalSlides > 1) {
this.startAutoplay();
}
},
// Automatischer Wechsel (nur für Intervall)
autoNextSlide() {
this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
},
// Manuelle Navigation
nextSlide() {
this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
this.resetAutoplay();
},
previousSlide() {
this.currentSlide = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
this.resetAutoplay();
},
setSlide(index) {
this.currentSlide = index;
this.resetAutoplay();
},
startAutoplay() {
// Zuerst alle bestehenden Timer löschen
this.stopAutoplay();
this.autoplayInterval = setInterval(() => {
this.autoNextSlide();
}, 5000); // Wechsel alle 5 Sekunden
},
stopAutoplay() {
if (this.autoplayInterval) {
clearInterval(this.autoplayInterval);
this.autoplayInterval = null;
}
if (this.autoplayTimeout) {
clearTimeout(this.autoplayTimeout);
this.autoplayTimeout = null;
}
},
resetAutoplay() {
// Alle Timer stoppen
this.stopAutoplay();
// Nach 5 Sekunden Pause wieder starten
this.autoplayTimeout = setTimeout(() => {
this.startAutoplay();
}, 1000);
}
}
}
</script>
{{-- Punkte unter dem Rahmen --}}
@if (count($slides) > 1)
<div class="mt-6 flex items-center justify-center gap-3" role="tablist" aria-label="{{ __('ui.hero_slider.dots') }}">
@foreach ($slides as $index => $slide)
<button type="button" role="tab" wire:key="hero-dot-{{ $index }}" x-on:click="go({{ $index }})"
x-bind:aria-selected="(active === {{ $index }}).toString()"
x-bind:class="active === {{ $index }} ? 'bg-primary w-14' : 'bg-border w-10 hover:bg-muted-foreground/40'"
class="h-1 cursor-pointer rounded-full transition-all duration-500 {{ $index === 0 ? 'bg-primary w-14' : 'bg-border w-10' }}"
aria-label="{{ __('ui.hero_slider.dot', ['n' => $index + 1, 'total' => count($slides), 'label' => $slide['label']]) }}">
</button>
@endforeach
</div>
@endif
</div>
</section>

View file

@ -16,9 +16,12 @@
<a href="{{ $content['cta1_link'] }}" class="btn-primary-accent">
{{ $content['cta1_text'] }}
</a>
<x-appointment-link :href="$content['cta2_link']" class="btn-secondary-accent">
{{ $content['cta2_text'] }}
</x-appointment-link>
{{-- Zweiter Button nur, wenn gepflegt – seit 01.10.2026 leer, „Termin anfragen“ bleibt im Widget. --}}
@if (filled($content['cta2_text'] ?? null))
<x-appointment-link :href="$content['cta2_link'] ?? '/contact'" class="btn-secondary-accent">
{{ $content['cta2_text'] }}
</x-appointment-link>
@endif
</div>
@if(isset($content['stats']))

View file

@ -63,7 +63,32 @@
<p class="text-sm text-muted-foreground leading-relaxed mt-2">{{ $content['intro'] }}</p>
@endif
<form wire:submit="submit" class="space-y-4 mt-6">
{{-- WhatsApp zuerst (Abstimmung 23.09.): der schnellste Weg steht oben, das Formular
darunter. Nur sichtbar, wenn im CMS eine Nummer hinterlegt ist. Der Link ist ein
normaler Klick-zum-Chat-Link – auf dem Handy öffnet die installierte App, sonst
WhatsApp Web. Der Text ist aus dem Formularstand vorbereitet, abgeschickt wird er
vom Besucher selbst. --}}
@if ($this->whatsappUrl !== '')
<div class="mt-5" data-appointment-whatsapp>
<p class="text-sm text-muted-foreground">{{ __('ui.appointment.whatsapp_intro') }}</p>
<a x-bind:href="whatsappHref" target="_blank" rel="noopener"
class="mt-3 flex w-full items-center justify-center gap-2 rounded-lg bg-[#25D366] px-6 py-3 font-medium text-white transition-transform hover:scale-[1.02]">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.372-.025-.521-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.247-.694.247-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884a9.82 9.82 0 016.988 2.896 9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.885-9.885 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.359.101 11.945c0 2.096.549 4.142 1.595 5.945L0 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.582 0 11.941-5.359 11.944-11.945a11.87 11.87 0 00-3.417-8.4" />
</svg>
{{ __('ui.whatsapp') }}
</a>
<p class="mt-2 text-xs text-muted-foreground">{{ __('ui.appointment.whatsapp_note') }}</p>
<div class="mt-6 flex items-center gap-3 text-xs uppercase tracking-wide text-muted-foreground" aria-hidden="true">
<span class="h-px flex-1 bg-border"></span>
<span>{{ __('ui.appointment.or_form') }}</span>
<span class="h-px flex-1 bg-border"></span>
</div>
</div>
@endif
<form wire:submit="submit" class="space-y-4 mt-5">
<div>
<label for="appointment-name" class="text-foreground mb-2 block text-sm font-medium">
{{ __('ui.appointment.name') }} <span aria-hidden="true">*</span>
@ -150,23 +175,6 @@
</button>
</form>
{{-- Alternative: WhatsApp. Nur sichtbar, wenn im CMS eine Nummer hinterlegt ist.
Der Link ist ein normaler Klick-zum-Chat-Link – auf dem Handy öffnet die
installierte App, sonst WhatsApp Web. Der Text ist vorbereitet, abgeschickt
wird er vom Besucher selbst. --}}
@if ($this->whatsappUrl !== '')
<div class="mt-6 pt-6 border-t border-border/60">
<p class="text-sm text-muted-foreground">{{ __('ui.appointment.whatsapp_intro') }}</p>
<a x-bind:href="whatsappHref" target="_blank" rel="noopener"
class="mt-3 flex w-full items-center justify-center gap-2 rounded-lg bg-[#25D366] px-6 py-3 font-medium text-white transition-transform hover:scale-[1.02]">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.372-.025-.521-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.247-.694.247-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884a9.82 9.82 0 016.988 2.896 9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.885-9.885 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.359.101 11.945c0 2.096.549 4.142 1.595 5.945L0 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.582 0 11.941-5.359 11.944-11.945a11.87 11.87 0 00-3.417-8.4" />
</svg>
{{ __('ui.whatsapp') }}
</a>
<p class="mt-2 text-xs text-muted-foreground">{{ __('ui.appointment.whatsapp_note') }}</p>
</div>
@endif
@endif
</div>
@ -174,7 +182,7 @@
<button type="button" x-on:click="open = !open" x-bind:aria-expanded="open.toString()"
aria-controls="appointment-widget-title"
class="btn-secondary-accent flex items-center gap-2 rounded-full px-5 py-3 shadow-lg cursor-pointer
max-w-[calc(100vw-2rem)] text-left leading-tight">
max-w-[calc(100vw-2rem)] text-left leading-tight appointment-toggle">
<svg class="h-5 w-5 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"

View file

@ -1,5 +1,6 @@
{{-- Der Footer folgt der Farbwelt der Seite: Interior auf Sand mit Tanne und positivem Logo,
Immobilien dunkel mit negativem Logo (Tokens `--footer-*` in theme-b2in.css, Logo in mount()).
In der Farbvariante „Modern“ liegt auch der Interior-Footer dunkel und zeigt das negative Logo.
pb-28 auf kleinen Schirmen: darunter schwebt das Terminanfrage-Widget, das sonst die
letzten Zeilen des Footers verdecken wuerde. --}}
<footer id="footer" class="section-footer section-padding pb-28 sm:pb-16">
@ -9,9 +10,16 @@
<div class="spacing-section">
<div class="flex items-center justify-center">
<img src="{{ asset($logoPath) }}"
alt="{{ $domainName ?? 'B2in Interior' }} Logo" class="h-16 w-auto"
alt="{{ $domainName ?? 'B2in Interior' }} Logo" class="footer-logo-light h-16 w-auto"
width="81" height="64"
loading="lazy" />
@if ($logoPathDark !== '')
{{-- Farbvariante „Modern“: dunkler Footer, negatives Logo (Umschaltung per CSS). --}}
<img src="{{ asset($logoPathDark) }}"
alt="{{ $domainName ?? 'B2in Interior' }} Logo" class="footer-logo-dark h-16 w-auto"
width="81" height="64"
loading="lazy" />
@endif
</div>
<div class="container-narrow spacing-content">

View file

@ -0,0 +1,33 @@
{{-- Entwurf der Startseite in der Farbwelt vom 24.09.2026 (Nachtrag 19). Nur zur Abstimmung:
Palette „greige“ am Body, Gold-Logo, neuer Hero mit Slideshow, keine Ankündigungsleiste.
Der Rest der Seite ist die reguläre Startseite – die Sektionen färben sich über die Tokens. --}}
@extends('web.layouts.web-master')
@section('title', 'Entwurf – B2in Interior')
@section('meta_description', 'Entwurf der Startseite in der neuen Farbwelt – nur zur Abstimmung.')
@section('announcement_bar', 'off')
@push('meta')
<meta name="robots" content="noindex, nofollow">
@endpush
@section('content')
<div class="bg-background">
<livewire:web.components.ui.header />
<main class="variante-glass-flow">
<livewire:web.components.sections.hero-slider />
<livewire:web.components.sections.founder-bar />
<livewire:web.components.sections.audience-switch />
<livewire:web.components.sections.core-brands bg="bg-accent" />
<livewire:web.components.sections.origin-section />
<livewire:web.components.sections.vision-section />
<livewire:web.components.sections.sponsoring bg="bg-accent" />
<livewire:web.components.sections.display-feed />
<livewire:web.components.sections.immobilien-teaser />
<livewire:web.components.sections.c-t-a-section />
</main>
<livewire:web.components.ui.footer />
</div>
@endsection

View file

@ -1,5 +1,14 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
@php
// Farbpalette der Interior-Welt (Nachtrag 18): ohne Schalter setzt der Server die Klasse aus
// config('app.palette'); mit Schalter entscheidet das Skript im <head> anhand des localStorage.
$paletteFixed = config('app.theme', 'b2in') === 'b2in'
&& b2in_world() === 'interior'
&& ! config('app.palette_switch')
&& b2in_palette() === ''
&& config('app.palette') === 'modern';
@endphp
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"{!! $paletteFixed ? ' class="palette-modern"' : '' !!}>
<head>
<meta charset="utf-8">
@ -51,8 +60,40 @@
@php
$theme = config('app.theme', 'b2in');
// Farb-Schalter nur auf den Interior-Seiten von b2in, solange die Palette abgestimmt wird.
$showPaletteSwitch = $theme === 'b2in' && b2in_world() === 'interior' && config('app.palette_switch');
// Entwurf /entwurf (Nachtrag 19): feste Palette „greige“ am Body, kein Browser-Schalter.
$paletteDraft = b2in_palette() === 'greige';
// Global per B2IN_ANNOUNCEMENT_BAR, einzeln per @section('announcement_bar', 'off').
$hideAnnouncementBar = ! config('app.announcement_bar') || trim($__env->yieldContent('announcement_bar', 'on')) === 'off';
@endphp
@if ($showPaletteSwitch && ! $paletteDraft)
{{-- Läuft vor dem Stylesheet: setzt die gemerkte Palette, bevor die Seite gezeichnet wird.
?palette=modern|classic in der URL überschreibt und merkt sich die Wahl; ohne
gemerkte Wahl gilt config('app.palette'). --}}
<script>
(function () {
var fromUrl = new URLSearchParams(window.location.search).get('palette');
var palette = null;
try {
if (fromUrl === 'modern' || fromUrl === 'classic') {
localStorage.setItem('b2in-palette', fromUrl);
}
palette = localStorage.getItem('b2in-palette');
} catch (e) {
palette = fromUrl;
}
if (palette === null) {
palette = @js(config('app.palette'));
}
if (palette === 'modern') {
document.documentElement.classList.add('palette-modern');
}
})();
</script>
@endif
@vite([
\App\Helpers\ThemeHelper::getThemeCssPath(),
'resources/js/app.js'
@ -113,13 +154,15 @@
@stack('styles')
</head>
<body class="antialiased bg-background text-foreground world-{{ b2in_world() }}">
<body class="antialiased bg-background text-foreground world-{{ b2in_world() }}{{ $paletteDraft ? ' palette-greige' : '' }}">
{{-- GTM noscript (nur bei GTM-Nutzung) --}}
<x-cookie-consent::gtm-noscript />
<!-- Announcement Bar -->
<livewire:web.components.ui.announcement-bar />
{{-- Ankündigungsleiste – global per B2IN_ANNOUNCEMENT_BAR, je Seite mit @section('announcement_bar', 'off') abschaltbar --}}
@unless ($hideAnnouncementBar)
<livewire:web.components.ui.announcement-bar />
@endunless
{{-- TopBar (Backup: Sprachwechsel & Social Icons – folgt später) --}}
{{-- <livewire:web.components.ui.top-bar /> --}}
@ -129,6 +172,10 @@
{{-- Terminanfrage: schwebend unten rechts, auf allen Seiten --}}
<livewire:web.components.ui.appointment-widget />
@if ($showPaletteSwitch)
<x-palette-switch :draft="$paletteDraft" />
@endif
{{-- Cookie Consent Manager (vor Livewire-Scripts) --}}
<x-cookie-consent::manager />

View file

@ -1,6 +1,6 @@
@extends('web.layouts.web-master')
@section('title', 'Unsere Marken – CABINET, Rotpunkt Küchen, Febrü & Tischlerei | B2in Interior')
@section('title', 'Unsere Marken – CABINET, Rotpunkt Küchen, Febrü & Otterpohl | B2in Interior')
@section('meta_description', 'Ausgewählte Hersteller statt beliebiger Kataloge: maßgefertigte Einbauschränke, Premium-Küchen und Möbel fürs Arbeiten – mit persönlicher Beratung in der Region.')
@section('content')