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:
parent
3211569fee
commit
4b07bbdcae
124 changed files with 3618 additions and 496 deletions
|
|
@ -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">→</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 --}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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']))
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue