Interior-Feinschliff: Hero-Slideshow, Lektorat, Rechtstexte, Aufräumen und Korrekturen 08.10.
Startseite und Heroes - Hero-Slideshow (11 Motive inkl. Febrü) mit Infokarte, Laufzeit-Linie, größeren Klickflächen, Goldrahmen und mobiler Karte unter dem Bild; Zeile über der Überschrift, neue Vertrauenspunkte - Hero-Stil auf Marken, Über uns und Kontakt übertragen, Breadcrumb entfernt - Gründer-Leiste, Vision-Box auf Ocker, Showroom-Display in Box mit „Größer ansehen“/Vollbild - Akzentfarbe #a8741f, größere Serif-Überschriften in der Interior-Welt - Marken: Bildpause mit Zitat; Vereine aktualisiert und verlinkt Inhalte - Lektorat aller angezeigten Texte, /about-Korrekturen, Rechtstexte (DDG, TDDDG, Hosting Hetzner) - Ablauf Maßanfertigung überall einheitlich, Magazin-Beitrag neu, alte Beiträge offline, deutsches Datum/Lesezeit, FAQ Projektausstattung, Otterpohl - Referenzen-Seite per CMS-Schalter ausblendbar CMS und Technik - Tote Sektionen, Felder, Seiten und Komponenten entfernt und archiviert (dev/2026-08-28/archiv-*) - Entwurf /entwurf, Farb-Schalter und /welcome entfernt; Test-Routen nur noch lokal - Seitenbaum-Beschreibungen geprüft, fehlende CMS-Felder ergänzt, Markenliste aus „Kernmarken“ - Admin-Bildvorschauen repariert, verwendete Bilder in die Mediathek übernommen - Seeder für das Deployment siehe dev/2026-08-28/entwicklungsplan.md Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
4b07bbdcae
commit
fcb10be120
406 changed files with 22549 additions and 3798 deletions
|
|
@ -1,7 +1,8 @@
|
|||
<section id="seitenkopf" class="section-padding flex items-center relative border-b border-border/30">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-[hsl(var(--hero-container))] rounded-[20px] w-[95%]">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 lg:py-12 bg-hero-container hero-frame rounded-[20px] w-[95%]">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-8 slide-right delay-200">
|
||||
<x-web.hero-eyebrow :text="$content['eyebrow'] ?? null" />
|
||||
<h1 class="text-hero">
|
||||
{!! $content['title'] !!}
|
||||
</h1>
|
||||
|
|
@ -20,7 +21,7 @@
|
|||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated slide-left delay-300">
|
||||
<div class="relative rounded-3xl overflow-hidden border border-white! shadow-elevated slide-left delay-300">
|
||||
<img src="{{ theme_image_url($content['image']) }}"
|
||||
alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-[600px] object-cover" />
|
||||
|
|
|
|||
|
|
@ -1,146 +0,0 @@
|
|||
<section class="section-padding {{ $bg }}" id="{{ $content['id'] }}">
|
||||
<div class="container-padding">
|
||||
@if(isset($content['title']))
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-section-title text-foreground mb-6">
|
||||
{{ $content['title'] }}
|
||||
</h2>
|
||||
<p class="text-large text-muted-foreground max-w-3xl mx-auto">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="grid lg:grid-cols-12 gap-16">
|
||||
@if ($layout === 'right')
|
||||
{{-- Layout Right: Bild zuerst, dann Text --}}
|
||||
{{-- Bild --}}
|
||||
<div class="space-y-8 col-span-8 lg:col-span-4 order-2 lg:order-1">
|
||||
<div class="relative h-full">
|
||||
<div class="sticky top-8">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated slide-right delay-300">
|
||||
@if(isset($content['image']))
|
||||
<img src="{{ theme_image_url($content['image']) }}"
|
||||
alt="{{ $content['image_alt'] ?? 'Benefits Image' }}"
|
||||
class="w-full h-[400px] md:h-[500px] lg:h-[600px] object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="bg-secondary/5 rounded-xl p-6 mt-6">
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-secondary mb-2">{{ $content['highlight']['value'] }}</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ $content['highlight']['text'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Text --}}
|
||||
<div class="space-y-8 col-span-8 order-1 lg:order-2">
|
||||
<div class="text-center lg:text-left slide-left delay-400">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 bg-secondary/10 text-secondary px-4 py-2 rounded-full text-md font-medium mb-6">
|
||||
@svg('heroicon-o-'.$content['tag_icon'], 'w-4 h-4')
|
||||
{{ $content['tag'] }}
|
||||
</div>
|
||||
<h3 class="text-3xl font-light text-foreground mb-6">
|
||||
{!! $content['tag_title'] !!}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
@foreach ($content['features'] as $index => $feature)
|
||||
<div class="card-elevated p-6 rounded-xl slide-left delay-{{ 500 + ($index * 100) }}">
|
||||
<div class="flex gap-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center">
|
||||
@if (isset($feature['icon']))
|
||||
@svg('heroicon-o-'.$feature['icon'], 'w-6 h-6 text-secondary')
|
||||
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-foreground mb-2">
|
||||
{{ $feature['title'] }}
|
||||
</h4>
|
||||
<p class="text-muted-foreground">
|
||||
{{ $feature['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
{{-- Layout Left (Standard): Text zuerst, dann Bild --}}
|
||||
{{-- Text --}}
|
||||
<div class="space-y-8 col-span-8 order-1 lg:order-1">
|
||||
<div class="text-center lg:text-left slide-right delay-300">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 bg-secondary/10 text-secondary px-4 py-2 rounded-full text-md font-medium mb-6">
|
||||
@svg('heroicon-o-'.$content['tag_icon'], 'w-4 h-4')
|
||||
{{ $content['tag'] }}
|
||||
</div>
|
||||
<h3 class="text-3xl font-light text-foreground mb-6">
|
||||
{!! $content['tag_title'] !!}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
@foreach ($content['features'] as $index => $feature)
|
||||
<div class="card-elevated p-6 rounded-xl slide-right delay-{{ 400 + ($index * 100) }}">
|
||||
<div class="flex gap-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center">
|
||||
@if (isset($feature['icon']))
|
||||
@svg('heroicon-o-'.$feature['icon'], 'w-6 h-6 text-secondary')
|
||||
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-foreground mb-2">
|
||||
{{ $feature['title'] }}
|
||||
</h4>
|
||||
<p class="text-muted-foreground">
|
||||
{{ $feature['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Bild --}}
|
||||
<div class="space-y-8 col-span-8 lg:col-span-4 order-2 lg:order-2">
|
||||
<div class="relative h-full">
|
||||
<div class="sticky top-8">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated slide-left delay-300">
|
||||
@if(isset($content['image']))
|
||||
<img src="{{ theme_image_url($content['image']) }}"
|
||||
alt="{{ $content['image_alt'] ?? 'Benefits Image' }}"
|
||||
class="w-full h-[400px] md:h-[500px] lg:h-[600px] object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="bg-secondary/5 rounded-xl p-6 mt-6">
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-secondary mb-2">{{ $content['highlight']['value'] }}</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ $content['highlight']['text'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
<section class="section-padding bg-background">
|
||||
<div class="container-padding">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="relative order-2 lg:order-1">
|
||||
<div class="card-elevated rounded-3xl p-12">
|
||||
<div class="text-center mb-8">
|
||||
<div class="w-20 h-20 mx-auto rounded-full bg-gradient-to-br from-secondary to-secondary/60 flex items-center justify-center mb-6">
|
||||
<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-semibold text-foreground mb-4">
|
||||
{{ $content['card_title'] }}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-accent/30 rounded-xl p-6">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="text-sm text-muted-foreground">Erstverkauf</span>
|
||||
<span class="text-lg font-semibold text-secondary">{{ $content['compensation']['initial_sale'] }}</span>
|
||||
</div>
|
||||
<div class="w-full bg-accent/50 rounded-full h-2">
|
||||
<div class="bg-secondary h-2 rounded-full w-[35%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-accent/30 rounded-xl p-6">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="text-sm text-muted-foreground">Folgegeschäfte</span>
|
||||
<span class="text-lg font-semibold text-secondary">{{ $content['compensation']['follow_up'] }}</span>
|
||||
</div>
|
||||
<div class="w-full bg-accent/50 rounded-full h-2">
|
||||
<div class="bg-secondary h-2 rounded-full w-[15%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center pt-4">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ $content['compensation_text'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8 order-1 lg:order-2">
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 bg-secondary/10 text-secondary px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||
<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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
|
||||
</svg>
|
||||
Für Makler
|
||||
</div>
|
||||
|
||||
<h2 class="text-section-title mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
|
||||
<p class="text-large text-muted-foreground leading-relaxed">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
@foreach($content['benefits'] as $benefit)
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center">
|
||||
@if($benefit['icon'] === 'trending-up')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
|
||||
</svg>
|
||||
@elseif($benefit['icon'] === 'clock')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
@elseif($benefit['icon'] === 'target')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 1.657-2.657 1.657-2.657A8 8 0 0118.657 17.657zM12 12l1 1"/>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-foreground mb-2">
|
||||
{{ $benefit['title'] }}
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{{ $benefit['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
<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-2 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="{{ theme_image_url($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">
|
||||
{{ __('ui.learn_more') }}
|
||||
<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>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<section class="section-padding text-center">
|
||||
<div class="container-padding">
|
||||
<div class="text-center mb-16 slide-up delay-300">
|
||||
<h2 class="text-section-title text-foreground mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
<p class="text-large text-muted-foreground max-w-2xl mx-auto">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
@foreach($content['testimonials'] as $index => $testimonial)
|
||||
<div class="card-elevated rounded-2xl p-8 text-left space-y-6 slide-up delay-{{ $index * 200 }}">
|
||||
<div class="flex items-center gap-4">
|
||||
<img src="{{ theme_image_url($testimonial['image']) }}" alt="{{ $testimonial['author'] }}" class="w-16 h-16 rounded-full object-cover">
|
||||
<div>
|
||||
<h4 class="font-bold text-foreground">{{ $testimonial['author'] }}</h4>
|
||||
<p class="text-sm text-muted-foreground">{{ $testimonial['author_title'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
@for ($i = 0; $i < 5; $i++)
|
||||
<svg class="w-5 h-5 {{ $i < $testimonial['rating'] ? 'text-secondary' : 'text-muted/20' }}" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
@endfor
|
||||
</div>
|
||||
<blockquote class="text-muted-foreground italic leading-relaxed">
|
||||
"{{ $testimonial['quote'] }}"
|
||||
</blockquote>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<section class="section-padding">
|
||||
<div class="container-padding">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-12">
|
||||
<div class="grid grid-cols-2 gap-8">
|
||||
@foreach($content['stats'] as $stat)
|
||||
<div>
|
||||
<div class="text-6xl font-light text-foreground mb-2">{{ $stat['number'] }}</div>
|
||||
<p class="text-muted-foreground text-sm">{{ $stat['text'] }}</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<h3 class="text-section-title">
|
||||
{!! $content['title'] !!}
|
||||
</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $content['description'] }}
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 pt-8">
|
||||
@foreach($content['features'] as $feature)
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-secondary rounded-full flex items-center justify-center">
|
||||
<span class="text-primary text-sm">✓</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-foreground font-medium text-sm">{{ $feature['title'] }}</p>
|
||||
<p class="text-muted-foreground text-xs">{{ $feature['subtitle'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="card-elevated bg-muted p-0 overflow-hidden rounded-3xl">
|
||||
<img src="{{ theme_image_url($content['image']) }}" alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-96 object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<section class="section-padding bg-background">
|
||||
<div class="container-padding">
|
||||
<div class="text-center mb-16 slide-up delay-300">
|
||||
<h2 class="text-section-title mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
<p class="text-large text-muted-foreground max-w-3xl mx-auto">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
@foreach($content['features'] as $index => $feature)
|
||||
<div class="group h-full {{ $index === 4 ? 'md:col-span-2 lg:col-span-1 lg:col-start-2' : '' }}">
|
||||
<div class="card-elevated p-8 overflow-hidden group hover:shadow-elevated transition-all duration-300 flex flex-col h-full slide-up delay-{{ $index * 200 }}">
|
||||
<div class="text-center space-y-6">
|
||||
<div class="mx-auto w-16 h-16 icon-secondary-linear glow-soft group-hover:glow-medium rounded-2xl flex items-center justify-center transition-colors duration-300">
|
||||
@if($feature['icon'])
|
||||
@svg('heroicon-o-'.$feature['icon'], 'w-8 h-8 text-secondary-foreground')
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-semibold text-foreground">
|
||||
{{ $feature['title'] }}
|
||||
</h3>
|
||||
|
||||
<div class="w-12 h-px bg-secondary mx-auto"></div>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $feature['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-secondary/20 via-secondary to-secondary/20 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,10 +1,27 @@
|
|||
{{-- Livewire braucht ein Wurzelelement. Solange kein Display veröffentlicht ist, bleibt es leer –
|
||||
lieber gar keine Sektion als ein Rahmen mit ewigem Ladebalken. --}}
|
||||
lieber gar keine Sektion als ein Rahmen mit ewigem Ladebalken.
|
||||
Seit 07.10.2026 in einer weißen Box; „Größer ansehen“ öffnet das Display in einem Overlay über
|
||||
die volle Fensterhöhe, dort lässt es sich (wo der Browser es kann) in den Vollbildmodus schalten.
|
||||
Das große Display lädt erst beim Öffnen, damit nicht zwei Player parallel laufen. --}}
|
||||
<div id="displays">
|
||||
@if ($displayId !== null)
|
||||
<section class="section-padding {{ $bg }}">
|
||||
<div class="container-padding">
|
||||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||||
<div class="grid items-center gap-10 rounded-3xl border border-border/60 bg-white p-6 shadow-[0_24px_60px_-28px_rgba(0,0,0,0.3)] sm:p-10 lg:grid-cols-2 lg:gap-16 lg:p-14"
|
||||
data-display-box
|
||||
x-data="{
|
||||
open: false,
|
||||
canFullscreen: document.fullscreenEnabled === true,
|
||||
show() { this.open = true; document.body.classList.add('overflow-hidden'); this.$nextTick(() => this.$refs.close?.focus()); },
|
||||
hide() {
|
||||
if (document.fullscreenElement) { document.exitFullscreen(); }
|
||||
this.open = false;
|
||||
document.body.classList.remove('overflow-hidden');
|
||||
this.$nextTick(() => this.$refs.trigger?.focus());
|
||||
},
|
||||
fullscreen() { this.$refs.stage?.requestFullscreen?.(); },
|
||||
}"
|
||||
x-on:keydown.escape.window="open && hide()">
|
||||
<div>
|
||||
<h2 class="text-section-title">{!! $content['title'] ?? '' !!}</h2>
|
||||
<p class="text-large text-muted-foreground leading-relaxed mt-6">{{ $content['text'] ?? '' }}</p>
|
||||
|
|
@ -22,14 +39,47 @@
|
|||
</div>
|
||||
|
||||
{{-- 9:16 wie das physische Display im Showroom --}}
|
||||
<div class="flex justify-center">
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<div class="w-full max-w-[320px] aspect-[9/16] overflow-hidden rounded-2xl shadow-elevated bg-black">
|
||||
<iframe src="{{ route('display.embed', ['display' => $displayId]) }}"
|
||||
title="{{ $content['iframe_title'] ?? __('ui.display_feed_title') }}"
|
||||
loading="lazy" scrolling="no"
|
||||
class="h-full w-full border-0"></iframe>
|
||||
</div>
|
||||
<button type="button" x-ref="trigger" x-on:click="show()" data-display-enlarge
|
||||
class="inline-flex items-center gap-2 rounded-full border border-border/70 bg-white px-5 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground">
|
||||
@svg('heroicon-o-arrows-pointing-out', 'h-5 w-5 text-secondary')
|
||||
{{ __('ui.display_feed_enlarge') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- Overlay: Display über die volle Fensterhöhe im Format 9:16 --}}
|
||||
<template x-teleport="body">
|
||||
<div x-show="open" x-cloak x-transition.opacity
|
||||
class="fixed inset-0 z-50 flex flex-col items-center justify-center gap-4 bg-black/90 p-4"
|
||||
role="dialog" aria-modal="true" aria-label="{{ $content['iframe_title'] ?? __('ui.display_feed_title') }}"
|
||||
x-on:click.self="hide()">
|
||||
<div class="flex items-center gap-3">
|
||||
<button type="button" x-show="canFullscreen" x-on:click="fullscreen()"
|
||||
class="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm text-white transition-colors hover:bg-white/20">
|
||||
@svg('heroicon-o-arrows-pointing-out', 'h-5 w-5')
|
||||
{{ __('ui.display_feed_fullscreen') }}
|
||||
</button>
|
||||
<button type="button" x-ref="close" x-on:click="hide()"
|
||||
class="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm text-white transition-colors hover:bg-white/20">
|
||||
@svg('heroicon-o-x-mark', 'h-5 w-5')
|
||||
{{ __('ui.display_feed_close') }}
|
||||
</button>
|
||||
</div>
|
||||
<div x-ref="stage" class="aspect-[9/16] h-[calc(100dvh-6rem)] max-w-full overflow-hidden rounded-2xl bg-black">
|
||||
<template x-if="open">
|
||||
<iframe src="{{ route('display.embed', ['display' => $displayId]) }}"
|
||||
title="{{ $content['iframe_title'] ?? __('ui.display_feed_title') }}"
|
||||
scrolling="no" allow="fullscreen" class="h-full w-full border-0"></iframe>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,79 +0,0 @@
|
|||
<section class="section-padding flex items-center relative border-b border-border/30">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-8">
|
||||
<h1 class="text-hero">
|
||||
{!! $content['title'] !!}
|
||||
</h1>
|
||||
|
||||
<p class="text-large text-muted-foreground leading-relaxed">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
@foreach ($content['features'] as $feature)
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
|
||||
@if ($feature['icon'] === 'users')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
|
||||
</svg>
|
||||
@elseif($feature['icon'] === 'building-2')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
@elseif($feature['icon'] === 'network')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-foreground">{{ $feature['title'] }}</p>
|
||||
<p class="text-sm text-muted-foreground">{{ $feature['description'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
|
||||
<img src="{{ theme_image_url($content['image']) }}"
|
||||
alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-[600px] object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
{{-- Floating info card --}}
|
||||
<div
|
||||
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-24 h-24 mx-auto rounded-full bg-secondary flex items-center justify-center mb-4">
|
||||
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-foreground">{{ $content['hub']['title'] }}</h3>
|
||||
<p class="text-sm text-muted-foreground">{{ $content['hub']['subtitle'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<section class="section-padding bg-background">
|
||||
<div class="container-padding">
|
||||
<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>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
@foreach ($content['stats'] as $index => $stat)
|
||||
|
||||
<div class="card-elevated p-8 text-center overflow-hidden group hover:shadow-elevated transition-all duration-300 flex flex-col slide-up delay-{{ $index * 200 }}">
|
||||
<h2 class="text-4xl lg:text-5xl font-bold text-secondary mb-4">
|
||||
{{ $stat['number'] }}
|
||||
</h2>
|
||||
<h3 class="text-xl lg:text-2xl font-semibold text-foreground mb-3">
|
||||
{{ $stat['label'] }}
|
||||
</h3>
|
||||
<p class="text-md text-muted-foreground leading-relaxed">
|
||||
{{ $stat['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<section class="section-padding {{ $bg }}">
|
||||
<div class="container-padding">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 bg-secondary/10 text-secondary px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||
<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="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
|
||||
</svg>
|
||||
{{ $content['tag'] }}
|
||||
</div>
|
||||
|
||||
<h2 class="text-section-title mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
|
||||
<p class="text-large text-muted-foreground leading-relaxed">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
@foreach($content['benefits'] as $benefit)
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center">
|
||||
@if($benefit['icon'] === 'credit-card')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
|
||||
</svg>
|
||||
@elseif($benefit['icon'] === 'star')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
|
||||
</svg>
|
||||
@elseif($benefit['icon'] === 'home')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-foreground mb-2">
|
||||
{{ $benefit['title'] }}
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{{ $benefit['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
|
||||
<img src="{{ theme_image_url($content['image']) }}"
|
||||
alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-[600px] object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
{{-- Floating info card --}}
|
||||
<div
|
||||
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-24 h-24 mx-auto rounded-full bg-secondary flex items-center justify-center mb-4">
|
||||
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-foreground">{{ $content['card_title'] }}</h3>
|
||||
<p class="text-sm text-muted-foreground">{{ $content['card_title'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<section class="section-padding text-center">
|
||||
<div class="container-narrow">
|
||||
<h2 class="text-section-title text-foreground leading-tight mb-8">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
|
||||
<div class="flex justify-center mb-8">
|
||||
<div class="w-16 h-px bg-secondary"></div>
|
||||
</div>
|
||||
|
||||
<p class="text-large text-muted-foreground">
|
||||
{{ $content['author'] }} <br />
|
||||
<span class="text-sm">{{ $content['author_title'] }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<section id="gruender" class="py-8 bg-background border-b border-border/30">
|
||||
<section id="gruender" class="py-8 {{ $bg }} border-b border-border/30">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col sm:flex-row items-center gap-6 sm:gap-8">
|
||||
@if(isset($content['image']))
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
<section class="section-padding relative">
|
||||
<div class="container-padding">
|
||||
{{-- Header Content --}}
|
||||
<div class="text-center mb-12 max-w-4xl mx-auto">
|
||||
<h1 class="text-hero mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h1>
|
||||
<p class="text-large text-muted-foreground mt-4 max-w-3xl mx-auto">
|
||||
{!! $content['subtitle'] !!}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{-- CTA Buttons --}}
|
||||
@if(isset($content['cta1_text']) && isset($content['cta2_text']))
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-16">
|
||||
<a href="{{ $content['cta1_link'] }}" class="btn-primary-accent">
|
||||
{{ $content['cta1_text'] }}
|
||||
</a>
|
||||
<a href="{{ $content['cta2_link'] }}" class="btn-secondary-accent">
|
||||
{{ $content['cta2_text'] }}
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Full Width Hero Image --}}
|
||||
<div class="relative w-full">
|
||||
<div class="relative rounded-2xl overflow-hidden shadow-elevated">
|
||||
<img src="{{ theme_image_url($content['hero_image'] ?? $content['tiles'][0]['image']) }}"
|
||||
alt="{{ $content['hero_image_alt'] ?? $content['tiles'][0]['alt'] ?? '' }}"
|
||||
class="w-full h-64 md:h-80 lg:h-96 object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/30 via-black/10 to-transparent"></div>
|
||||
|
||||
{{-- Optional overlay content --}}
|
||||
@if(isset($content['stats']) && count($content['stats']) > 0)
|
||||
<div class="absolute bottom-0 left-0 right-0 p-8">
|
||||
<div class="flex items-center justify-center space-x-8 text-white/90 text-sm">
|
||||
@foreach ($content['stats'] as $stat)
|
||||
<span class="font-medium">{{ $stat }}</span>
|
||||
@if (!$loop->last)
|
||||
<span class="opacity-60">•</span>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,102 +1,141 @@
|
|||
{{-- 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 class="hero-frame relative overflow-hidden rounded-[28px]">
|
||||
<x-web.hero-flank-right />
|
||||
<x-web.hero-flank-left />
|
||||
|
||||
{{-- 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
|
||||
|
||||
<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>
|
||||
|
||||
{{-- 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 x-data="heroSlider()" x-init="init()">
|
||||
@if (filled($content['title'] ?? null))
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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
|
||||
</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>
|
||||
@endif
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,84 +0,0 @@
|
|||
<section class="section-padding flex items-center relative border-b border-border/30">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
|
||||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||||
{{-- Left Content --}}
|
||||
<div class="space-y-8">
|
||||
<div class="space-y-6">
|
||||
<h1 class="text-hero">
|
||||
{!! $content['title'] !!}
|
||||
</h1>
|
||||
<p class="text-lg text-muted-foreground max-w-md leading-relaxed">
|
||||
{!! $content['subtitle'] !!}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<a href="{{ $content['cta1_link'] }}" class="btn-primary-accent">
|
||||
{{ $content['cta1_text'] }}
|
||||
</a>
|
||||
<a href="{{ $content['cta2_link'] }}" class="btn-secondary-accent">
|
||||
{{ $content['cta2_text'] }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-8 text-sm text-muted-foreground">
|
||||
@foreach ($content['stats'] as $stat)
|
||||
<span>{{ $stat }}</span>
|
||||
@if (!$loop->last)
|
||||
<span>•</span>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Right Image Tiles --}}
|
||||
<div class="relative">
|
||||
<div class="flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0">
|
||||
{{-- First Column --}}
|
||||
<div class="ml-auto w-44 flex-none space-y-8 pt-32 sm:ml-0 sm:pt-80 lg:order-last lg:pt-36 xl:order-0 xl:pt-80">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
|
||||
<img src="{{ theme_image_url($content['tiles'][0]['image']) }}"
|
||||
alt="{{ $content['tiles'][0]['alt'] ?? '' }}"
|
||||
class="aspect-2/3 w-full object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Second Column --}}
|
||||
<div class="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
|
||||
<img src="{{ theme_image_url($content['tiles'][1]['image']) }}"
|
||||
alt="{{ $content['tiles'][1]['alt'] ?? '' }}"
|
||||
class="aspect-2/3 w-full object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
|
||||
<img src="{{ theme_image_url($content['tiles'][2]['image']) }}"
|
||||
alt="{{ $content['tiles'][2]['alt'] ?? '' }}"
|
||||
class="aspect-2/3 w-full object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Third Column --}}
|
||||
<div class="w-44 flex-none space-y-8 pt-32 sm:pt-0">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
|
||||
<img src="{{ theme_image_url($content['tiles'][3]['image']) }}"
|
||||
alt="{{ $content['tiles'][3]['alt'] ?? '' }}"
|
||||
class="aspect-2/3 w-full object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
|
||||
<img src="{{ theme_image_url($content['tiles'][4]['image']) }}"
|
||||
alt="{{ $content['tiles'][4]['alt'] ?? '' }}"
|
||||
class="aspect-2/3 w-full object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,9 +1,46 @@
|
|||
<section id="hero" class="section-padding flex items-center relative border-b border-border/30">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
|
||||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||||
{{-- Left Content --}}
|
||||
<div class="space-y-8">
|
||||
{{-- Hero der Startseite (07.10.2026, Vorbild „Farbwelt und Stil“): Die Slideshow ist das Hauptelement
|
||||
des Rahmens und reicht oben, unten und rechts fast an die Kante. Die Infokarte über dem Bild wechselt
|
||||
mit: Marke und Motiv der jeweiligen Slide. Die Punkte stehen mittig unter dem ganzen Block.
|
||||
Ruhige Überblendung (1,4 s, Standard alle 7 s), Pause bei Hover/Fokus, Pfeiltasten, bei
|
||||
„reduzierter Bewegung“ kein Autowechsel. Eine feine Linie unten im Bild zeigt, wie lange das
|
||||
Bild noch steht; der Zähler läuft über requestAnimationFrame und hält bei Pause wirklich an. --}}
|
||||
<section id="hero" class="section-padding relative border-b border-border/30">
|
||||
<div class="mx-auto w-[95%] max-w-7xl"
|
||||
x-data="{
|
||||
active: 0,
|
||||
count: {{ count($slides) }},
|
||||
interval: {{ $this->intervalMs }},
|
||||
elapsed: 0,
|
||||
last: 0,
|
||||
frame: null,
|
||||
paused: false,
|
||||
reduced: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
|
||||
start() {
|
||||
if (this.reduced || this.count < 2) { return; }
|
||||
this.stop();
|
||||
this.last = performance.now();
|
||||
const tick = (now) => {
|
||||
{{-- Höchstens 100 ms pro Schritt: nach einem Tab-Wechsel springt die Zeit nicht. --}}
|
||||
const step = Math.min(now - this.last, 100);
|
||||
this.last = now;
|
||||
if (!this.paused && !document.hidden) { this.elapsed += step; }
|
||||
if (this.elapsed >= this.interval) { this.next(); return; }
|
||||
this.frame = requestAnimationFrame(tick);
|
||||
};
|
||||
this.frame = requestAnimationFrame(tick);
|
||||
},
|
||||
stop() { if (this.frame) { cancelAnimationFrame(this.frame); this.frame = null; } },
|
||||
go(i) { this.active = (i + this.count) % this.count; this.elapsed = 0; 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 class="bg-hero-container hero-frame grid overflow-hidden rounded-[20px] lg:grid-cols-12">
|
||||
{{-- Text --}}
|
||||
<div class="flex flex-col justify-center space-y-8 px-6 py-10 sm:px-10 lg:col-span-5 lg:py-12 lg:pl-14 lg:pr-8">
|
||||
<div class="space-y-6 slide-right delay-200">
|
||||
<x-web.hero-eyebrow :text="$content['eyebrow'] ?? null" />
|
||||
<h1 class="text-hero-alt">
|
||||
{!! $content['title'] !!}
|
||||
</h1>
|
||||
|
|
@ -24,34 +61,76 @@
|
|||
@endif
|
||||
</div>
|
||||
|
||||
@if(isset($content['stats']))
|
||||
<div class="flex flex-wrap items-center gap-6 pt-10 mt-10 border-t border-border/80 slide-right delay-300">
|
||||
@foreach ($content['stats'] as $stat)
|
||||
<div class="flex items-center gap-2 text-md text-muted-foreground font-light">
|
||||
@svg('heroicon-o-check-circle', 'w-6 h-6 text-secondary')
|
||||
<span>{{ $stat }}</span>
|
||||
</div>
|
||||
<x-web.hero-trust :items="$content['stats'] ?? []" />
|
||||
</div>
|
||||
|
||||
{{-- Slideshow: wenige Pixel Luft zum Rahmen, auf großen Bildschirmen mindestens 560 px hoch.
|
||||
Mobil (08.10.2026): Bild 4:3 oben, die Infokarte fest als Streifen darunter – sie verdeckt
|
||||
das Bild nicht. Ab lg schwebt die Karte wie gehabt unten links über dem Bild. --}}
|
||||
<div class="p-3 pt-0 sm:p-4 sm:pt-0 lg:col-span-7 lg:pl-0 lg:pt-4">
|
||||
<div class="flex h-full flex-col overflow-hidden rounded-2xl border border-white! bg-muted shadow-elevated slide-left delay-300 lg:relative lg:block lg:min-h-[560px]"
|
||||
@if (count($slides) > 1) role="group" aria-roledescription="carousel" aria-label="{{ __('ui.hero_slider.label') }}" tabindex="0" @endif
|
||||
x-on:mouseenter="paused = true" x-on:mouseleave="paused = false"
|
||||
x-on:focusin="paused = true" x-on:focusout="paused = false">
|
||||
<div class="relative aspect-[4/3] w-full shrink-0 lg:absolute lg:inset-0 lg:aspect-auto" data-hero-stage>
|
||||
{{-- Zustand über data-active statt Klassen: Alpine ersetzt das Attribut vollständig,
|
||||
fest im HTML stehende Klassen würde es dagegen stehen lassen. --}}
|
||||
@foreach ($slides as $index => $slide)
|
||||
<figure wire:key="hero-slide-{{ $index }}" data-hero-slide="{{ $index }}"
|
||||
data-active="{{ $index === 0 ? 'true' : 'false' }}" x-bind:data-active="(active === {{ $index }}).toString()"
|
||||
class="pointer-events-none absolute inset-0 m-0 opacity-0 transition-opacity duration-[1400ms] ease-in-out motion-reduce:transition-none data-[active=true]:pointer-events-auto data-[active=true]:opacity-100"
|
||||
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 />
|
||||
</figure>
|
||||
@endforeach
|
||||
<div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
|
||||
{{-- Laufzeit des aktuellen Bildes: füllt sich von links, bis das nächste kommt --}}
|
||||
@if (count($slides) > 1)
|
||||
<div class="pointer-events-none absolute inset-x-0 bottom-0 z-20 h-[3px] bg-white/25" data-hero-progress
|
||||
x-show="!reduced" aria-hidden="true">
|
||||
<div class="h-full origin-left bg-white" style="transform: scaleX(0)"
|
||||
x-bind:style="`transform: scaleX(${Math.min(elapsed / interval, 1)})`"></div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
{{-- Right Image --}}
|
||||
<div class="relative">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated slide-left delay-300">
|
||||
<img src="{{ theme_image_url($content['image']) }}" alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-[600px] object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
{{-- Infokarte: wechselt mit der Slide (Marke + Motiv), sonst die festen Kartentexte.
|
||||
Alle Fassungen liegen übereinander, die Karte ist so groß wie die längste. Der alte
|
||||
Text blendet erst aus, dann der neue ein, damit sich nichts überlagert.
|
||||
Weiß statt `bg-card`: Klassen mit „card“ greift die Glass-Flow-Regel `[class*="card"]` ab. --}}
|
||||
<div class="relative bg-white px-5 py-4 slide-left delay-400 lg:absolute lg:bottom-6 lg:left-6 lg:z-10 lg:max-w-[80%] lg:rounded-xl lg:border lg:border-border/50 lg:bg-white/95 lg:p-4 lg:shadow-lg lg:backdrop-blur-sm" data-hero-info>
|
||||
<div class="grid">
|
||||
@foreach ($slides as $index => $slide)
|
||||
<div wire:key="hero-card-{{ $index }}" data-hero-card="{{ $index }}"
|
||||
data-active="{{ $index === 0 ? 'true' : 'false' }}" x-bind:data-active="(active === {{ $index }}).toString()"
|
||||
class="col-start-1 row-start-1 opacity-0 transition-opacity duration-300 ease-in-out motion-reduce:transition-none data-[active=true]:opacity-100 data-[active=true]:delay-500 data-[active=true]:duration-500"
|
||||
x-bind:aria-hidden="(active !== {{ $index }}).toString()">
|
||||
<div class="text-base font-medium text-secondary lg:text-xl">{{ $slide['label'] !== '' ? $slide['label'] : $content['card_title'] }}</div>
|
||||
<div class="text-base font-medium font-secondary lg:text-lg">{!! $slide['caption'] !== '' ? e($slide['caption']) : $content['card_text'] !!}</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Floating info card --}}
|
||||
<div
|
||||
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50 slide-left delay-400">
|
||||
<div class="text-xl font-medium text-muted-foreground">{{ $content['card_title'] }}</div>
|
||||
<div class="text-lg font-medium font-secondary">{!! $content['card_text'] !!}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Steuerung mittig unter dem ganzen Block --}}
|
||||
@if (count($slides) > 1)
|
||||
<div class="mt-3 flex items-center justify-center gap-1" role="tablist" aria-label="{{ __('ui.hero_slider.dots') }}">
|
||||
@foreach ($slides as $index => $slide)
|
||||
{{-- Unsichtbare Klickfläche (py-4) um den dünnen Balken – der Balken selbst ist das Span. --}}
|
||||
<button type="button" role="tab" wire:key="hero-dot-{{ $index }}" x-on:click="go({{ $index }})" data-hero-dot
|
||||
x-bind:aria-selected="(active === {{ $index }}).toString()"
|
||||
class="group cursor-pointer px-1 py-4"
|
||||
aria-label="{{ __('ui.hero_slider.dot', ['n' => $index + 1, 'total' => count($slides), 'label' => implode(' – ', array_filter([$slide['label'], $slide['caption']]))]) }}">
|
||||
<span data-active="{{ $index === 0 ? 'true' : 'false' }}" x-bind:data-active="(active === {{ $index }}).toString()"
|
||||
class="block h-1 w-10 rounded-full bg-[hsl(var(--muted-foreground)/0.25)] transition-all duration-500 data-[active=false]:group-hover:bg-[hsl(var(--muted-foreground)/0.45)] data-[active=true]:w-14 data-[active=true]:bg-[hsl(var(--primary))]"></span>
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
<section class="section-padding bg-accent">
|
||||
<div class="container-padding">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-section-title mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
<p class="text-large text-muted-foreground max-w-2xl mx-auto">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
@foreach($content['team'] as $member)
|
||||
<div class="group">
|
||||
<div class="card-elevated rounded-3xl overflow-hidden hover:scale-105 transition-all duration-300">
|
||||
<div class="relative">
|
||||
<img
|
||||
src="{{ theme_image_url($member['image']) }}"
|
||||
alt="{{ $member['name'] }} - {{ $member['position'] }}"
|
||||
class="w-full h-80 object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 space-y-4">
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold text-foreground mb-1">
|
||||
{{ $member['name'] }}
|
||||
</h3>
|
||||
<p class="text-secondary font-medium text-sm">
|
||||
{{ $member['position'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="text-muted-foreground text-sm leading-relaxed">
|
||||
{{ $member['expertise'] }}
|
||||
</p>
|
||||
|
||||
<div class="flex items-center gap-2 pt-2">
|
||||
<div class="w-8 h-px bg-secondary"></div>
|
||||
<span class="text-xs text-secondary font-medium">{{ $content['team_tag'] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -49,51 +49,27 @@
|
|||
<!-- Main Content -->
|
||||
<div class="md:col-span-4">
|
||||
<div class="prose prose-lg max-w-none">
|
||||
<p class="text-lg text-muted-foreground leading-relaxed mb-8 slide-up delay-200">
|
||||
{{ $article['content']['intro'] }}
|
||||
</p>
|
||||
{{-- Leerzeilen im Text trennen Absätze (08.10.2026) --}}
|
||||
<div class="mb-8 space-y-4 slide-up delay-200">
|
||||
@foreach (preg_split('/\R\s*\R/u', trim((string) $article['content']['intro'])) as $paragraph)
|
||||
<p class="text-lg text-muted-foreground leading-relaxed">{{ $paragraph }}</p>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@foreach($article['content']['sections'] as $index => $section)
|
||||
<section class="mb-10 bg-light-muted shadow-md p-6 rounded-lg slide-up delay-400" id="section-{{ $index }}">
|
||||
<h2 class="text-2xl font-medium text-foreground mb-4">
|
||||
{{ $index + 1 }}. {{ $section['title'] }}
|
||||
</h2>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $section['content'] }}
|
||||
</p>
|
||||
<div class="space-y-4">
|
||||
@foreach (preg_split('/\R\s*\R/u', trim((string) $section['content'])) as $paragraph)
|
||||
<p class="text-muted-foreground leading-relaxed">{{ $paragraph }}</p>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
{{-- <div class="md:col-span-1">
|
||||
<div class="sticky top-24">
|
||||
|
||||
<div class="card-elevated rounded-lg p-2 slide-left delay-400">
|
||||
<h3 class="font-medium text-foreground mb-4 text-center font-2xl py-2">{{ $content['share_article'] }}</h3>
|
||||
<div class="space-y-3">
|
||||
<button class="btn-secondary-accent w-full">
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
<span class="font-medium text-sm">LinkedIn</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button class="btn-secondary-accent w-full">
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||
</svg>
|
||||
<span class="font-medium text-sm">Facebook</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> --}}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -64,11 +64,5 @@
|
|||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- <div class="text-center mt-16">
|
||||
<a href="/magazin?page=2" class="btn-primary-accent">
|
||||
{{ $content['load_more'] }}
|
||||
</a>
|
||||
</div> --}}
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,18 @@
|
|||
{{-- Seitenkopf für Unterseiten – abgesetzte graue Fläche wie der Hero auf Startseite und
|
||||
Netzwerkseite, damit er sich klar von den Blöcken darunter absetzt. --}}
|
||||
<section id="seitenkopf" class="section-padding flex items-center relative border-b border-border/30 {{ $bg }}">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20 bg-hero-container rounded-[20px] w-[95%]">
|
||||
{{-- Breadcrumb: Home → Marken --}}
|
||||
<nav aria-label="Breadcrumb" class="mb-8">
|
||||
<ol class="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<li><a href="{{ route('home') }}" class="hover:text-foreground transition-colors">Home</a></li>
|
||||
<li aria-hidden="true">/</li>
|
||||
<li class="text-foreground" aria-current="page">{{ $breadcrumb }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 lg:py-12 bg-hero-container hero-frame rounded-[20px] w-[95%]">
|
||||
@if (!empty($content['image']))
|
||||
{{-- 3:2 statt hälftig geteilt – der Text bleibt der Hauptdarsteller, das Bild begleitet ihn nur. --}}
|
||||
<div class="grid lg:grid-cols-5 gap-10 lg:gap-14 items-center">
|
||||
<div class="lg:col-span-3 slide-right delay-200">
|
||||
<x-web.hero-eyebrow :text="$content['eyebrow'] ?? null" class="mb-6" />
|
||||
<h1 class="text-hero-alt">{!! $content['title'] ?? '' !!}</h1>
|
||||
<p class="text-large text-muted-foreground leading-relaxed mt-6">{{ $content['text'] ?? '' }}</p>
|
||||
<x-web.hero-trust :items="$content['stats'] ?? []" class="mt-8" />
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-2 relative rounded-2xl overflow-hidden shadow-elevated slide-left delay-300">
|
||||
<div class="lg:col-span-2 relative rounded-2xl overflow-hidden border border-white! shadow-elevated slide-left delay-300">
|
||||
<img src="{{ theme_image_url($content['image']) }}" alt="{{ $content['image_alt'] ?? '' }}"
|
||||
class="w-full aspect-[4/3] object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/15 to-transparent"></div>
|
||||
|
|
@ -28,8 +21,10 @@
|
|||
@else
|
||||
{{-- Ohne Motiv bleibt der Textblock allein stehen – kein leerer Platzhalterrahmen. --}}
|
||||
<div class="max-w-3xl slide-right delay-200">
|
||||
<x-web.hero-eyebrow :text="$content['eyebrow'] ?? null" class="mb-6" />
|
||||
<h1 class="text-hero-alt">{!! $content['title'] ?? '' !!}</h1>
|
||||
<p class="text-large text-muted-foreground leading-relaxed mt-6">{{ $content['text'] ?? '' }}</p>
|
||||
<x-web.hero-trust :items="$content['stats'] ?? []" class="mt-8" />
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,154 +0,0 @@
|
|||
<section class="section-padding">
|
||||
<div class="container-padding">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-section-title text-foreground mb-6">
|
||||
{{ $content['title'] }}
|
||||
</h2>
|
||||
<p class="text-large text-muted-foreground max-w-3xl mx-auto">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-16">
|
||||
{{-- Für Makler --}}
|
||||
<div class="space-y-8">
|
||||
<div class="text-center lg:text-left">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 bg-secondary/10 text-secondary px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||
<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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
|
||||
</svg>
|
||||
{{ $content['broker']['tag'] }}
|
||||
</div>
|
||||
<h3 class="text-3xl font-light text-foreground mb-6">
|
||||
{!! $content['broker']['title'] !!}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
@foreach ($content['broker']['benefits'] as $index => $benefit)
|
||||
<div class="card-elevated p-6 rounded-xl">
|
||||
<div class="flex gap-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center">
|
||||
@if ($benefit['icon'] === 'trending-up')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
|
||||
</svg>
|
||||
@elseif($benefit['icon'] === 'target')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z">
|
||||
</path>
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-foreground mb-2">
|
||||
{{ $benefit['title'] }}
|
||||
</h4>
|
||||
<p class="text-muted-foreground">
|
||||
{{ $benefit['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="bg-secondary/5 rounded-xl p-6">
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-secondary mb-2">{{ $content['broker']['highlight']['value'] }}</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ $content['broker']['highlight']['text'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Für Lieferanten --}}
|
||||
<div class="space-y-8">
|
||||
<div class="text-center lg:text-left">
|
||||
<div class="inline-flex items-center gap-2 bg-secondary/10 text-secondary px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||
<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="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
|
||||
</path>
|
||||
</svg>
|
||||
{{ $content['supplier']['tag'] }}
|
||||
</div>
|
||||
<h3 class="text-3xl font-light text-foreground mb-6">
|
||||
{!! $content['supplier']['title'] !!}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
@foreach ($content['supplier']['benefits'] as $index => $benefit)
|
||||
<div class="card-elevated p-6 rounded-xl">
|
||||
<div class="flex gap-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 rounded-xl bg-accent/20 flex items-center justify-center">
|
||||
@if ($benefit['icon'] === 'globe')
|
||||
<svg class="w-6 h-6 text-accent-foreground" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
|
||||
</path>
|
||||
</svg>
|
||||
@elseif($benefit['icon'] === 'handshake')
|
||||
<svg class="w-6 h-6 text-accent-foreground" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z">
|
||||
</path>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-6 h-6 text-accent-foreground" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
|
||||
</path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-foreground mb-2">
|
||||
{{ $benefit['title'] }}
|
||||
</h4>
|
||||
<p class="text-muted-foreground">
|
||||
{{ $benefit['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="card-elevated p-0 overflow-hidden rounded-xl">
|
||||
<img src="{{ theme_image_url($content['supplier']['highlight']['image']) }}" alt="{{ $content['supplier']['highlight']['alt'] }}"
|
||||
class="w-full h-48 object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
|
||||
<div class="p-6 text-white">
|
||||
<div class="text-2xl font-bold mb-1">{{ $content['supplier']['highlight']['value'] }}</div>
|
||||
<p class="text-sm opacity-90">{{ $content['supplier']['highlight']['text'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
<section class="section-padding flex items-center relative border-b border-border/30">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-8">
|
||||
<div class="slide-right delay-300">
|
||||
<h1 class="text-hero mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h1>
|
||||
|
||||
<p class="text-lg text-muted-foreground max-w-md leading-relaxed">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
</div>
|
||||
@if(isset($content['partner_types']))
|
||||
<div class="grid grid-cols-2 gap-6 mt-8 border-t border-border/50 pt-8">
|
||||
@foreach ($content['partner_types'] as $index => $partner)
|
||||
<div class="flex gap-4 slide-up delay-{{ $index * 200 }}">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
|
||||
@svg('heroicon-o-'.$partner['icon'], 'w-6 h-6 text-secondary')
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-foreground">{{ $partner['title'] }}</p>
|
||||
<p class="text-sm text-muted-foreground">{{ $partner['description'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
@if(isset($content['stats']))
|
||||
<div class="flex flex-wrap items-center gap-6 pt-10 border-t border-border/80 slide-right delay-300">
|
||||
@foreach ($content['stats'] as $stat)
|
||||
<div class="flex items-center gap-2 text-md text-muted-foreground">
|
||||
@svg('heroicon-o-check-circle', 'w-6 h-6 text-secondary')
|
||||
<span>{{ $stat }}</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
|
||||
<div class="relative">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated slide-left delay-300">
|
||||
<img src="{{ theme_image_url($content['image']) }}"
|
||||
alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-[600px] object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
{{-- Floating info card --}}
|
||||
|
||||
<div
|
||||
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50 slide-left delay-400">
|
||||
<div class="text-xl font-medium text-muted-foreground">{!! $content['hub']['title'] !!}</div>
|
||||
<div class="text-lg font-medium font-secondary">{!! $content['hub']['subtitle'] !!}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<section class="section-padding bg-accent">
|
||||
<div class="container-padding">
|
||||
<div class="text-center mb-16 slide-up delay-300">
|
||||
<h2 class="text-section-title text-foreground mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
<p class="text-large text-muted-foreground max-w-3xl mx-auto">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 mb-16">
|
||||
@foreach ($content['steps'] as $index => $step)
|
||||
<div class="card-elevated p-0 overflow-hidden group hover:shadow-elevated transition-all duration-300 slide-up delay-{{ $index * 200 }}">
|
||||
@if(isset($step['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-'.$step['icon'], 'w-10 h-10 text-secondary-foreground')
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="p-8">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center">
|
||||
<span class="text-lg font-bold text-secondary">{{ $index + 1 }}</span>
|
||||
</div>
|
||||
<h3 class="text-2xl font-medium text-foreground">
|
||||
{{ $step['title'] }}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed mb-6">
|
||||
{{ $step['description'] }}
|
||||
</p>
|
||||
|
||||
@if ($index === count($content['steps']) - 1)
|
||||
<a href="{{ $content['cta']['button_link'] }}">
|
||||
<button class="btn-secondary-accent w-full cursor-pointer">
|
||||
{{ $content['cta']['button_text'] }}
|
||||
</button>
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,299 +0,0 @@
|
|||
|
||||
|
||||
<section class="section-padding">
|
||||
<div class="container-padding">
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-hero mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
<p class="text-large text-muted-foreground max-w-2xl mx-auto">
|
||||
{!! $content['subtitle'] !!}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Filter Navigation -->
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-12">
|
||||
|
||||
|
||||
@foreach($this->filters as $filterKey => $filterLabel)
|
||||
<button
|
||||
wire:click="filterBy('{{ $filterKey }}')"
|
||||
class="{{ $activeFilter === $filterKey
|
||||
? 'btn-primary-accent'
|
||||
: 'btn-secondary-accent' }}"
|
||||
>
|
||||
{{ $filterLabel }}
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<!-- Portfolio Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||||
x-data
|
||||
x-init="$nextTick(() => {
|
||||
// Smooth animation for grid changes
|
||||
$el.style.opacity = '0';
|
||||
setTimeout(() => { $el.style.opacity = '1'; }, 100);
|
||||
})">
|
||||
|
||||
@foreach($this->getFilteredProjects() as $index => $project)
|
||||
<div class="group card-elevated rounded-3xl overflow-hidden h-full hover:scale-[1.02] transition-all duration-300"
|
||||
x-data="{ loaded: false }"
|
||||
x-init="setTimeout(() => loaded = true, {{ $index * 100 }})"
|
||||
x-show="loaded"
|
||||
x-transition:enter="transition ease-out duration-700"
|
||||
x-transition:enter-start="opacity-0 transform translate-y-8"
|
||||
x-transition:enter-end="opacity-100 transform translate-y-0">
|
||||
|
||||
<!-- Image Container -->
|
||||
<div class="relative aspect-[4/3] overflow-hidden cursor-pointer"
|
||||
wire:click="openModal({{ json_encode($project) }})">
|
||||
<img src="{{ theme_image_url($project['image']) }}"
|
||||
alt="{{ $project['title'] }}"
|
||||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||||
|
||||
<!-- Overlay -->
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
|
||||
<!-- View Button -->
|
||||
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300">
|
||||
<button class="btn-primary-accent">
|
||||
<div class="flex items-center justify-center">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||
</svg>
|
||||
<span class="font-medium"> {{ __('ui.view') }}</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Category Badge -->
|
||||
<div class="absolute top-4 left-4">
|
||||
<span class="bg-primary text-white px-3 py-1 rounded-full text-xs font-medium">
|
||||
{{ $project['category'] }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="p-6 lg:p-8 flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-2xl lg:text-3xl font-semibold text-foreground leading-tight group-hover:text-secondary transition-colors duration-200">
|
||||
{{ $project['title'] }}
|
||||
</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed text-base line-clamp-2">
|
||||
{{ $project['description'] }}
|
||||
</p>
|
||||
|
||||
<!-- Features -->
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach($project['features'] as $feature)
|
||||
<span class="text-xs bg-muted text-muted-foreground px-2 py-1 rounded">
|
||||
{{ $feature }}
|
||||
</span>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location and Price -->
|
||||
<div class="flex items-center justify-between mt-6">
|
||||
<div class="flex items-center text-sm text-muted-foreground gap-4">
|
||||
@if(isset($project['location']) && $project['location'] != '')
|
||||
<div class="flex items-center gap-1">
|
||||
<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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
{{ $project['location'] }}
|
||||
</div>
|
||||
@endif
|
||||
@if(isset($project['price']) && $project['price'] != '')
|
||||
<span class="w-1 h-1 bg-muted-foreground rounded-full"></span>
|
||||
<span class="font-medium text-secondary">{{ $project['price'] }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@if(empty($this->getFilteredProjects()))
|
||||
<div class="text-center py-16">
|
||||
<div class="w-24 h-24 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center">
|
||||
<svg class="w-12 h-12 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-foreground mb-2">{{ __('ui.portfolio.no_projects') }}</h3>
|
||||
<p class="text-muted-foreground">{{ __('ui.portfolio.try_other_filter') }}</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div x-data="{ show: @entangle('showModal').live }"
|
||||
x-show="show"
|
||||
x-cloak
|
||||
class="fixed inset-0 z-50 overflow-y-auto"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="$wire.closeModal()">
|
||||
|
||||
<!-- Backdrop -->
|
||||
<div class="fixed inset-0 bg-black/70 backdrop-blur-sm"></div>
|
||||
|
||||
<!-- Modal Content -->
|
||||
<div class="relative min-h-screen flex items-center justify-center p-4">
|
||||
<div class="relative card-elevated rounded-3xl max-w-4xl w-full max-h-[90vh] overflow-hidden"
|
||||
x-show="show"
|
||||
x-transition:enter="transition ease-out duration-300 transform"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-200 transform"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.stop>
|
||||
|
||||
@if($selectedProject)
|
||||
<!-- Close Button -->
|
||||
<button @click="$wire.closeModal()"
|
||||
class="absolute top-4 right-4 z-20 bg-secondary text-white rounded-full p-2 hover:bg-secondary/80 transition-colors duration-200">
|
||||
<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="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Scrollable Content Area -->
|
||||
<div class="h-full max-h-[90vh] overflow-y-auto">
|
||||
<!-- Image -->
|
||||
<div class="aspect-[16/10] relative overflow-hidden rounded-t-2xl">
|
||||
<img src="{{ theme_image_url($selectedProject['image']) }}"
|
||||
alt="{{ $selectedProject['title'] }}"
|
||||
class="w-full h-full object-cover">
|
||||
|
||||
<!-- Category Badge -->
|
||||
<div class="absolute top-6 left-6">
|
||||
<span class="bg-primary text-white px-4 py-2 rounded-full text-sm font-medium">
|
||||
{{ $selectedProject['category'] }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="p-8">
|
||||
<div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
|
||||
<div class="flex-1">
|
||||
<h2 class="text-section-title mb-4">
|
||||
{{ $selectedProject['title'] }}
|
||||
</h2>
|
||||
<p class="text-muted-foreground mb-6 leading-relaxed text-base lg:text-lg">
|
||||
{{ $selectedProject['description'] }}
|
||||
</p>
|
||||
|
||||
<!-- Features -->
|
||||
<div class="mb-6">
|
||||
<h4 class="font-semibold text-foreground mb-3">{{ __('ui.portfolio.amenities') }}</h4>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach($selectedProject['features'] as $feature)
|
||||
<span class="bg-muted text-muted-foreground px-3 py-1 rounded-full text-sm">
|
||||
{{ $feature }}
|
||||
</span>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Details Sidebar -->
|
||||
<div class="lg:w-80 card-elevated rounded-lg p-6">
|
||||
<h4 class="font-semibold text-foreground mb-4">{{ __('ui.portfolio.project_details') }}</h4>
|
||||
|
||||
<div class="space-y-4">
|
||||
@if(isset($selectedProject['location']) && $selectedProject['location'] != '')
|
||||
<div class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-muted-foreground mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<span class="text-sm text-muted-foreground">{{ __('ui.portfolio.location') }}</span>
|
||||
<div class="font-medium text-foreground">{{ $selectedProject['location'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if(isset($selectedProject['price']) && $selectedProject['price'] != '')
|
||||
<div class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-muted-foreground mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<span class="text-sm text-muted-foreground">{{ __('ui.portfolio.price') }}</span>
|
||||
<div class="font-bold text-lg text-secondary">{{ $selectedProject['price'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if(isset($selectedProject['size']) && $selectedProject['size'] != '')
|
||||
<div class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-muted-foreground mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4a1 1 0 011-1h4m0 0V4m0-1h6m0 1v3M4 8h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V8z"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<span class="text-sm text-muted-foreground">{{ __('ui.portfolio.size') }}</span>
|
||||
<div class="font-medium text-foreground">{{ $selectedProject['size'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<button class="btn-primary-accent w-full mt-6">
|
||||
{{ __('ui.contact') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Custom scrollbar for modal */
|
||||
.overflow-y-auto::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.overflow-y-auto::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.overflow-y-auto::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--muted-foreground) / 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(var(--muted-foreground) / 0.5);
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
|
@ -8,10 +8,14 @@
|
|||
</div>
|
||||
|
||||
{{-- Kachel je Verein: Logo oben auf Weiß (die Logos sind für weißen Grund gemacht),
|
||||
darunter ein kurzer Text. Bewusst ohne Verlinkung – reine Nennung. --}}
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto slide-up delay-400">
|
||||
darunter ein kurzer Text. Ist eine Website (url) gepflegt, öffnet die Kachel sie in
|
||||
einem neuen Tab (08.10.2026). --}}
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto slide-up delay-400">
|
||||
@foreach ($content['logos'] ?? [] as $index => $logo)
|
||||
<div class="card-elevated rounded-2xl overflow-hidden" wire:key="sponsor-{{ $index }}">
|
||||
@php $url = preg_match('#^https?://#i', (string) ($logo['url'] ?? '')) ? $logo['url'] : null; @endphp
|
||||
<{{ $url ? 'a' : 'div' }} wire:key="sponsor-{{ $index }}" data-sponsor
|
||||
@if ($url) href="{{ $url }}" target="_blank" rel="noopener" @endif
|
||||
class="card-elevated rounded-2xl overflow-hidden flex flex-col">
|
||||
{{-- Feste Bühnenhöhe und Deckel in beide Richtungen: die Logos haben sehr
|
||||
unterschiedliche Seitenverhältnisse (1:1 bis 3,3:1) und wirken sonst
|
||||
unterschiedlich groß. --}}
|
||||
|
|
@ -20,13 +24,19 @@
|
|||
loading="lazy" class="max-h-20 max-w-[85%] w-auto object-contain" />
|
||||
</div>
|
||||
|
||||
<div class="p-6 border-t border-border/60">
|
||||
<h3 class="font-medium">{{ $logo['name'] ?? '' }}</h3>
|
||||
<div class="p-6 border-t border-border/60 grow">
|
||||
<h3 class="font-medium inline-flex items-center gap-1.5">
|
||||
{{ $logo['name'] ?? '' }}
|
||||
@if ($url)
|
||||
@svg('heroicon-o-arrow-top-right-on-square', 'w-4 h-4 text-secondary shrink-0')
|
||||
<span class="sr-only">{{ __('ui.opens_new_tab') }}</span>
|
||||
@endif
|
||||
</h3>
|
||||
@if (!empty($logo['text']))
|
||||
<p class="text-sm text-muted-foreground leading-relaxed mt-2">{{ $logo['text'] }}</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</{{ $url ? 'a' : 'div' }}>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,52 +0,0 @@
|
|||
<section class="section-padding bg-muted/20">
|
||||
<div class="container-padding">
|
||||
{{-- Section Title --}}
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-section-title">{{ $content['title'] }}</h2>
|
||||
<p class="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{-- Spotlights Grid --}}
|
||||
<div class="grid md:grid-cols-3 gap-8 lg:gap-12">
|
||||
@foreach ($content['spotlights'] as $index => $spotlight)
|
||||
<div class="text-center space-y-6 group">
|
||||
<div
|
||||
class="mx-auto w-20 h-20 bg-secondary/10 rounded-2xl flex items-center justify-center group-hover:bg-secondary/20 transition-colors duration-300">
|
||||
@if ($spotlight['icon'] === 'map-pin')
|
||||
<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
|
||||
</path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
@elseif($spotlight['icon'] === 'star')
|
||||
<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z">
|
||||
</path>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-xl font-medium">{{ $spotlight['title'] }}</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $spotlight['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
<section class="section-padding bg-accent">
|
||||
<div class="container-padding">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 bg-secondary/10 text-secondary px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||
<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="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
{{ $content['tag'] }}
|
||||
</div>
|
||||
|
||||
<h2 class="text-section-title mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
|
||||
<p class="text-large text-muted-foreground leading-relaxed">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
@foreach($content['benefits'] as $benefit)
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center">
|
||||
@if($benefit['icon'] === 'store')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
|
||||
</svg>
|
||||
@elseif($benefit['icon'] === 'settings')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
@elseif($benefit['icon'] === 'check-circle')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-foreground mb-2">
|
||||
{{ $benefit['title'] }}
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{{ $benefit['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="card-elevated rounded-3xl p-8">
|
||||
<div class="space-y-8">
|
||||
<div class="text-center">
|
||||
<div class="w-20 h-20 mx-auto rounded-full bg-gradient-to-br from-secondary/20 to-secondary/5 flex items-center justify-center mb-6">
|
||||
<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-semibold text-foreground mb-4">
|
||||
{{ $content['dashboard']['title'] }}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
@foreach($content['dashboard']['stats'] as $stat)
|
||||
<div class="bg-accent/30 rounded-xl p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm font-medium text-foreground">{{ $stat['label'] }}</span>
|
||||
<span class="text-xs text-secondary">{{ $stat['value'] }}</span>
|
||||
</div>
|
||||
<div class="w-full bg-accent/50 rounded-full h-2">
|
||||
<div class="bg-secondary h-2 rounded-full" style="width: {{ $stat['value'] }}"></div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,24 +1,36 @@
|
|||
{{-- „Gebaut auf Expertise und Vertrauen“. Mit `boxed` (Startseite, 07.10.2026): Inhalt in einer weißen
|
||||
Box mit Schatten auf der Ockerfläche, das Porträt deutlich kleiner neben dem Text. --}}
|
||||
<section id="vision" class="section-padding {{ $bg }}">
|
||||
<div class="container-padding">
|
||||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||||
|
||||
<div @class([
|
||||
'grid items-center',
|
||||
'gap-12 lg:grid-cols-2 lg:gap-16' => ! $boxed,
|
||||
'gap-10 rounded-3xl bg-white p-6 shadow-[0_30px_60px_-24px_rgba(0,0,0,0.35)] sm:p-10 lg:grid-cols-12 lg:gap-14 lg:p-14' => $boxed,
|
||||
]) @if ($boxed) data-vision-box @endif>
|
||||
|
||||
{{-- Image --}}
|
||||
<div class="relative">
|
||||
<div class="card-elevated rounded-3xl overflow-hidden slide-left delay-400">
|
||||
<div @class(['relative', 'mx-auto w-full max-w-xs lg:col-span-4 lg:max-w-none' => $boxed])>
|
||||
<div @class([
|
||||
'card-elevated rounded-3xl overflow-hidden slide-left delay-400',
|
||||
'aspect-[4/5]' => $boxed,
|
||||
])>
|
||||
<img src="{{ theme_image_url($content['image']) }}" alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-full object-cover" />
|
||||
|
||||
<div
|
||||
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">
|
||||
{{-- `absolute!`: die Glass-Flow-Regel `[class*="card"]` setzt sonst `position: relative`. --}}
|
||||
<div @class([
|
||||
'absolute! bg-card/95 backdrop-blur-sm rounded-xl shadow-lg border border-border/50',
|
||||
'bottom-6 left-6 p-4' => ! $boxed,
|
||||
'bottom-4 inset-x-4 p-3 text-sm' => $boxed,
|
||||
])>
|
||||
{{ $content['image_caption'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Content --}}
|
||||
<div class="spacing-section">
|
||||
<div @class(['spacing-section', 'lg:col-span-8' => $boxed])>
|
||||
<div class="spacing-content slide-right delay-300">
|
||||
<h2 class="text-section-title">{{ $content['title'] }}</h2>
|
||||
<h2 class="text-section-title">{!! $content['title'] !!}</h2>
|
||||
<div class="spacing-small text-large text-muted-foreground leading-relaxed">
|
||||
@foreach ($content['paragraphs'] as $paragraph)
|
||||
<p>{!! $paragraph !!}</p>
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
<section class="min-h-screen flex items-center relative overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-[hsl(var(--hero-container))] rounded-[20px] w-[95%]">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-8">
|
||||
<h1 class="text-5xl lg:text-6xl font-light text-foreground">
|
||||
Über <span class="text-secondary">B2in</span>
|
||||
</h1>
|
||||
|
||||
<blockquote class="text-xl lg:text-2xl text-muted-foreground italic leading-relaxed border-l-4 border-secondary pl-6">
|
||||
"Unsere Vision ist es, Unternehmen durch innovative Konnektivitätslösungen zu verbinden
|
||||
und nachhaltiges Wachstum in der digitalen Welt zu ermöglichen. Bei B2in schaffen wir
|
||||
nicht nur Verbindungen – wir bauen Brücken in die Zukunft."
|
||||
</blockquote>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-16 h-px bg-secondary"></div>
|
||||
<div>
|
||||
<p class="font-semibold text-foreground">Marcel Scheibe</p>
|
||||
<p class="text-sm text-muted-foreground">Gründer & CEO, B2in</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="card-elevated rounded-3xl overflow-hidden">
|
||||
<img
|
||||
src="{{ asset('img/assets/marcel-scheibe.jpg') }}"
|
||||
alt="Marcel Scheibe, Gründer und CEO von B2in"
|
||||
class="w-full h-96 lg:h-[500px] object-cover" />
|
||||
</div>
|
||||
<div class="absolute -bottom-6 -right-6 bg-secondary text-secondary-foreground p-6 rounded-2xl">
|
||||
<div class="text-3xl font-bold">2019</div>
|
||||
<p class="text-sm opacity-90">Gründungsjahr</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
<section class="py-20 px-4 bg-background">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="relative order-2 lg:order-1">
|
||||
<div class="card-elevated rounded-3xl p-12">
|
||||
<div class="text-center mb-8">
|
||||
<div class="w-20 h-20 mx-auto rounded-full bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center mb-6">
|
||||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-semibold text-foreground mb-4">
|
||||
Lifetime-Vergütung
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-accent/30 rounded-xl p-6">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="text-sm text-muted-foreground">Erstverkauf</span>
|
||||
<span class="text-lg font-semibold text-primary">3.5%</span>
|
||||
</div>
|
||||
<div class="w-full bg-accent/50 rounded-full h-2">
|
||||
<div class="bg-primary h-2 rounded-full w-[35%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-accent/30 rounded-xl p-6">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="text-sm text-muted-foreground">Folgegeschäfte</span>
|
||||
<span class="text-lg font-semibold text-primary">1.5%</span>
|
||||
</div>
|
||||
<div class="w-full bg-accent/50 rounded-full h-2">
|
||||
<div class="bg-primary h-2 rounded-full w-[15%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center pt-4">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Kontinuierliche Erträge über die gesamte Kundenbeziehung
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8 order-1 lg:order-2">
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||
<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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
|
||||
</svg>
|
||||
Für Makler
|
||||
</div>
|
||||
|
||||
<h2 class="text-4xl lg:text-5xl font-light text-foreground mb-6">
|
||||
Lifetime <span class="text-primary">Vergütung</span> für Makler
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
Profitieren Sie von einem revolutionären Vergütungsmodell, das über
|
||||
den einmaligen Verkauf hinausgeht. Bauen Sie langfristige Kundenbeziehungen
|
||||
auf und generieren Sie kontinuierliche Erträge.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
@foreach($this->benefits as $benefit)
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
@if($benefit['icon'] === 'trending-up')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
|
||||
</svg>
|
||||
@elseif($benefit['icon'] === 'clock')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
@elseif($benefit['icon'] === 'target')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 1.657-2.657 1.657-2.657A8 8 0 0118.657 17.657zM12 12l1 1"/>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-foreground mb-2">
|
||||
{{ $benefit['title'] }}
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{{ $benefit['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<section class="py-16 px-4 text-center">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="mb-8">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 bg-primary text-primary-foreground px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||
★ 4.9 Rating
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-section-title text-foreground mb-6">
|
||||
Committed to excellence, ensuring <br />
|
||||
<span class="text-secondary">enduring comfort</span> and creating lasting <br />
|
||||
memories
|
||||
</h2>
|
||||
|
||||
<p class="text-muted-foreground text-lg">
|
||||
Robert Wilson
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<section class="section-dark py-20 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-12">
|
||||
<div class="grid grid-cols-2 gap-8">
|
||||
<div>
|
||||
<div class="text-6xl font-light text-dark-text mb-2">17+</div>
|
||||
<p class="text-dark-muted text-sm">Years of Experience</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-6xl font-light text-dark-text mb-2">2M</div>
|
||||
<p class="text-dark-muted text-sm">Happy Guests</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<h3 class="text-3xl font-light text-dark-text">
|
||||
Economically Sound and Well-<br />
|
||||
<span class="text-secondary">Friendly Service</span> for<br />
|
||||
Families and Their<br />
|
||||
Precious Belongings
|
||||
</h3>
|
||||
|
||||
<p class="text-dark-muted leading-relaxed">
|
||||
We understand that every family is unique, which is why we offer personalized
|
||||
services tailored to meet your specific needs. From luxury amenities to
|
||||
budget-friendly options, we ensure every guest feels valued and comfortable.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 pt-8">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-secondary rounded-full flex items-center justify-center">
|
||||
<span class="text-primary text-sm">✓</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-dark-text font-medium text-sm">Top Consultation</p>
|
||||
<p class="text-dark-muted text-xs">Expert guidance</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-secondary rounded-full flex items-center justify-center">
|
||||
<span class="text-primary text-sm">✓</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-dark-text font-medium text-sm">Finest Meal</p>
|
||||
<p class="text-dark-muted text-xs">Gourmet dining</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-secondary rounded-full flex items-center justify-center">
|
||||
<span class="text-primary text-sm">✓</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-dark-text font-medium text-sm">Easy Tax Reduction</p>
|
||||
<p class="text-dark-muted text-xs">Cost-effective</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="card-elevated bg-dark-muted p-0 overflow-hidden rounded-3xl">
|
||||
<img src="{{ asset('img/assets/accommodation-2.jpg') }}" alt="Luxury interior design"
|
||||
class="w-full h-96 object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
<section class="py-20 px-4 bg-background">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl lg:text-5xl font-light text-foreground mb-6">
|
||||
Digitales <span class="text-primary">Herzstück</span>
|
||||
</h2>
|
||||
<p class="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||
Modernste Technologie-Infrastruktur, die alle Ecosystem-Teilnehmer
|
||||
nahtlos miteinander verbindet und außergewöhnliche Nutzererfahrungen ermöglicht.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
@foreach($this->features as $index => $feature)
|
||||
<div class="group {{ $index === 4 ? 'md:col-span-2 lg:col-span-1 lg:col-start-2' : '' }}">
|
||||
<div class="card-elevated p-8 rounded-3xl h-full hover:scale-105 transition-all duration-300 relative overflow-hidden">
|
||||
<div class="text-center space-y-6">
|
||||
<div class="w-16 h-16 mx-auto rounded-xl bg-primary/10 flex items-center justify-center mb-6">
|
||||
@if($feature['icon'] === 'cloud')
|
||||
<svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
|
||||
</svg>
|
||||
@elseif($feature['icon'] === 'shield')
|
||||
<svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
|
||||
</svg>
|
||||
@elseif($feature['icon'] === 'layers')
|
||||
<svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
|
||||
</svg>
|
||||
@elseif($feature['icon'] === 'database')
|
||||
<svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-semibold text-foreground">
|
||||
{{ $feature['title'] }}
|
||||
</h3>
|
||||
|
||||
<div class="w-12 h-px bg-primary mx-auto"></div>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $feature['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-primary/20 via-primary to-primary/20 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
<section class="min-h-screen flex items-center relative overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-[hsl(var(--hero-container))] rounded-[20px] w-[95%]">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-8">
|
||||
<h1 class="text-5xl lg:text-7xl font-light text-foreground">
|
||||
B2in <span class="text-primary">Ecosystem</span>
|
||||
</h1>
|
||||
|
||||
<p class="text-xl lg:text-2xl text-muted-foreground leading-relaxed">
|
||||
Ein intelligentes Netzwerk, das Endkunden, Makler, Lieferanten und
|
||||
Technologie nahtlos miteinander verbindet. Jeder Teilnehmer profitiert
|
||||
vom gesamten System und schafft gemeinsam außergewöhnliche Immobilienerlebnisse.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
@foreach ($this->features as $feature)
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
@if ($feature['icon'] === 'users')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
|
||||
</svg>
|
||||
@elseif($feature['icon'] === 'building-2')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
@elseif($feature['icon'] === 'network')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-foreground">{{ $feature['title'] }}</p>
|
||||
<p class="text-sm text-muted-foreground">{{ $feature['description'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="card-elevated rounded-3xl p-12 bg-background/80 backdrop-blur-sm">
|
||||
<div class="space-y-8">
|
||||
<!-- Central Hub -->
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-24 h-24 mx-auto rounded-full bg-primary flex items-center justify-center mb-4">
|
||||
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-foreground">B2in Portal</h3>
|
||||
<p class="text-sm text-muted-foreground">Zentrale Plattform</p>
|
||||
</div>
|
||||
|
||||
<!-- Connection Points -->
|
||||
<div class="grid grid-cols-2 gap-8">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 mx-auto rounded-full bg-accent flex items-center justify-center mb-3">
|
||||
<svg class="w-8 h-8 text-accent-foreground" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="font-medium text-sm">Endkunden</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 mx-auto rounded-full bg-accent flex items-center justify-center mb-3">
|
||||
<svg class="w-8 h-8 text-accent-foreground" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="font-medium text-sm">Makler</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 mx-auto rounded-full bg-accent flex items-center justify-center mb-3">
|
||||
<svg class="w-8 h-8 text-accent-foreground" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="font-medium text-sm">Lieferanten</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 mx-auto rounded-full bg-accent flex items-center justify-center mb-3">
|
||||
<svg class="w-8 h-8 text-accent-foreground" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="font-medium text-sm">B2A</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<section class="py-20 px-4 bg-background">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl lg:text-5xl font-light text-foreground mb-6">
|
||||
Unser <span class="text-primary">Ecosystem</span> in Zahlen
|
||||
</h2>
|
||||
<p class="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||
Zahlen, die die Stärke und das Vertrauen in unser vernetztes
|
||||
Geschäftsmodell widerspiegeln.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
@foreach ($this->stats as $stat)
|
||||
<div class="card-elevated rounded-2xl p-8 text-center">
|
||||
<div class="text-4xl lg:text-5xl font-bold text-primary mb-4">
|
||||
{{ $stat['number'] }}
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-foreground mb-3">
|
||||
{{ $stat['label'] }}
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground leading-relaxed">
|
||||
{{ $stat['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<section class="py-20 px-4 bg-accent/30">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||
<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="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
|
||||
</svg>
|
||||
Für Endkunden
|
||||
</div>
|
||||
|
||||
<h2 class="text-4xl lg:text-5xl font-light text-foreground mb-6">
|
||||
Exklusive <span class="text-primary">Erlebnisse</span> für Sie
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
Mit Ihrer persönlichen Login-Karte erhalten Sie Zugang zu einer
|
||||
einzigartigen Erlebniswelt, die speziell auf Ihre Wohnwünsche
|
||||
und Lebensstil abgestimmt ist. Entdecken Sie kuratierte Immobilien
|
||||
und Services, die sonst nicht verfügbar sind.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
@foreach($this->benefits as $benefit)
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
@if($benefit['icon'] === 'credit-card')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
|
||||
</svg>
|
||||
@elseif($benefit['icon'] === 'star')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
|
||||
</svg>
|
||||
@elseif($benefit['icon'] === 'home')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-foreground mb-2">
|
||||
{{ $benefit['title'] }}
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{{ $benefit['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="card-elevated rounded-3xl overflow-hidden">
|
||||
<div class="bg-gradient-to-br from-primary/20 to-primary/5 p-12 h-96 flex flex-col justify-center items-center text-center">
|
||||
<div class="w-24 h-24 rounded-full bg-primary/20 backdrop-blur-sm flex items-center justify-center mb-6">
|
||||
<svg class="w-12 h-12 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-semibold text-foreground mb-4">
|
||||
Login-Karte
|
||||
</h3>
|
||||
<p class="text-muted-foreground mb-6">
|
||||
Ihr Schlüssel zu exklusiven Immobilienerlebnissen
|
||||
</p>
|
||||
<div class="bg-background/80 backdrop-blur-sm rounded-xl p-4 w-full max-w-xs">
|
||||
<div class="text-sm text-muted-foreground mb-2">Mitgliedsnummer</div>
|
||||
<div class="font-mono text-lg">B2IN-2024-VIP</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<section class="section-dark py-20 px-4 text-center">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-5xl md:text-6xl font-light text-dark-text leading-tight mb-8">
|
||||
Were committed to <br />
|
||||
your <span class="text-secondary">comfort</span> and <br />
|
||||
<span class="text-secondary">satisfaction</span> for <br />
|
||||
unforgettable <br />
|
||||
experiences
|
||||
</h2>
|
||||
|
||||
<div class="flex justify-center mb-8">
|
||||
<div class="w-16 h-px bg-secondary"></div>
|
||||
</div>
|
||||
|
||||
<p class="text-dark-muted text-lg">
|
||||
Robert Wilson <br />
|
||||
<span class="text-sm">General Manager</span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<section class="py-20 px-4 bg-background">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl lg:text-5xl font-light text-foreground mb-6">
|
||||
Das <span class="text-secondary">Führungsteam</span>
|
||||
</h2>
|
||||
<p class="text-muted-foreground text-lg max-w-2xl mx-auto">
|
||||
Unser erfahrenes Team bringt jahrzehntelange Expertise in den Bereichen
|
||||
Technologie, Operations und Geschäftsentwicklung mit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
@foreach($this->team as $member)
|
||||
<div class="group">
|
||||
<div class="card-elevated rounded-3xl overflow-hidden hover:scale-105 transition-all duration-300">
|
||||
<div class="relative">
|
||||
<img
|
||||
src="{{ asset('img/assets/' . $member['image']) }}"
|
||||
alt="{{ $member['name'] }} - {{ $member['position'] }}"
|
||||
class="w-full h-80 object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 space-y-4">
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold text-foreground mb-1">
|
||||
{{ $member['name'] }}
|
||||
</h3>
|
||||
<p class="text-secondary font-medium text-sm">
|
||||
{{ $member['position'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="text-muted-foreground text-sm leading-relaxed">
|
||||
{{ $member['expertise'] }}
|
||||
</p>
|
||||
|
||||
<div class="flex items-center gap-2 pt-2">
|
||||
<div class="w-8 h-px bg-secondary"></div>
|
||||
<span class="text-xs text-secondary font-medium">B2IN TEAM</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
<div>
|
||||
<!-- Back Navigation -->
|
||||
<div class="pt-20 pb-4">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<a href="/magazin" class="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors">
|
||||
<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="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
Zurück zum Magazin
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Article Header -->
|
||||
<article class="pb-16">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<header class="text-center mb-12">
|
||||
<h1 class="text-4xl md:text-5xl font-light text-foreground mb-6 leading-tight">
|
||||
{{ $article['title'] }}
|
||||
</h1>
|
||||
<p class="text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
|
||||
{{ $article['subtitle'] }}
|
||||
</p>
|
||||
<div class="flex items-center justify-center gap-6 text-sm text-muted-foreground">
|
||||
<div class="flex items-center gap-2">
|
||||
<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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span>{{ $article['date'] }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span>{{ $article['readTime'] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Featured Image -->
|
||||
<div class="mb-12 overflow-hidden rounded-lg">
|
||||
<img
|
||||
src="{{ asset('images/' . $article['image']) }}"
|
||||
alt="{{ $article['title'] }}"
|
||||
class="w-full h-64 md:h-96 object-cover"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-4 gap-12">
|
||||
<!-- Main Content -->
|
||||
<div class="md:col-span-3">
|
||||
<div class="prose prose-lg max-w-none">
|
||||
<p class="text-lg text-muted-foreground leading-relaxed mb-8">
|
||||
{{ $article['content']['intro'] }}
|
||||
</p>
|
||||
|
||||
@foreach($article['content']['sections'] as $index => $section)
|
||||
<section class="mb-10" id="section-{{ $index }}">
|
||||
<h2 class="text-2xl font-medium text-foreground mb-4">
|
||||
{{ $index + 1 }}. {{ $section['title'] }}
|
||||
</h2>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $section['content'] }}
|
||||
</p>
|
||||
</section>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="md:col-span-1">
|
||||
<div class="sticky top-24">
|
||||
|
||||
<div class="card-elevated rounded-lg p-6">
|
||||
<h3 class="font-medium text-foreground mb-4">Artikel teilen</h3>
|
||||
<div class="space-y-3">
|
||||
<button class="w-full bg-[#0077B5] hover:bg-[#0095e5] text-white rounded-lg py-3 px-4 flex items-center justify-center gap-3 transition-colors duration-200">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
<span class="font-medium">LinkedIn</span>
|
||||
</button>
|
||||
|
||||
<button class="w-full bg-[#3b5998] hover:bg-[#5077cc] text-white rounded-lg py-3 px-4 flex items-center justify-center gap-3 transition-colors duration-200">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||
</svg>
|
||||
<span class="font-medium text-sm">Facebook</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
<!-- Bottom CTA -->
|
||||
<section class="bg-secondary text-secondary-foreground section-padding">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<h2 class="text-3xl font-light mb-6 text-[hsl(var(--dark-text))]">
|
||||
Entdecken Sie mehr über
|
||||
<span class="text-primary font-medium">Luxus</span> und
|
||||
<span class="text-primary font-medium">Komfort</span>
|
||||
für unvergessliche Erlebnisse.
|
||||
</h2>
|
||||
|
||||
<a href="/magazin" class="btn-accent px-8 py-3 rounded-lg">
|
||||
Weitere Artikel entdecken
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<section class="py-20 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl lg:text-5xl font-light text-foreground mb-6">
|
||||
B2in <span class="text-secondary">Magazin</span>
|
||||
</h2>
|
||||
<p class="text-muted-foreground text-lg max-w-2xl mx-auto">
|
||||
Entdecken Sie die neuesten Trends, Insights und Geschichten aus der Welt
|
||||
der Business-Konnektivität und Innovation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
@foreach($this->posts as $post)
|
||||
<article class="group">
|
||||
<div class="card-elevated rounded-3xl overflow-hidden h-full hover:scale-[1.02] transition-all duration-300">
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<div class="relative md:w-3/4 aspect-[2/1] md:aspect-[2/1]">
|
||||
<img
|
||||
src="{{ asset('images/' . $post['image']) }}"
|
||||
alt="{{ $post['title'] }}"
|
||||
class="w-full h-full object-cover">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div class="lg:w-2/3 p-6 lg:p-8 flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<time>{{ $post['date'] }}</time>
|
||||
<span class="w-1 h-1 bg-muted-foreground rounded-full"></span>
|
||||
<span>{{ $post['readTime'] }}</span>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl lg:text-2xl font-semibold text-foreground leading-tight group-hover:text-secondary transition-colors duration-200">
|
||||
<a href="/magazin/{{ $post['id'] }}" class="stretched-link">
|
||||
{{ $post['title'] }}
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed text-base lg:text-lg">
|
||||
{{ $post['excerpt'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mt-6">
|
||||
<div class="flex items-center text-secondary font-medium group-hover:text-secondary-dark transition-colors duration-200">
|
||||
<a href="/magazin/{{ $post['id'] }}" class="text-sm">Weiterlesen</a>
|
||||
<svg class="w-4 h-4 ml-2 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center group-hover:bg-secondary transition-colors duration-200">
|
||||
<a href="/magazin/{{ $post['id'] }}">
|
||||
<svg class="w-4 h-4 text-white transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-16">
|
||||
<a href="/magazin?page=2" class="btn-primary px-8 py-4 rounded-2xl">
|
||||
Weitere Artikel laden
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<section class="section-dark section-padding">
|
||||
<div class="container-narrow text-center">
|
||||
<h2 class="text-section-title text-[hsl(var(--dark-text))] mb-12">
|
||||
Unsere <span class="text-secondary">Geschichte</span>
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 mb-16">
|
||||
@foreach($this->timeline as $item)
|
||||
<div class="spacing-small">
|
||||
<div class="w-12 h-12 mx-auto bg-secondary/20 rounded-full flex items-center justify-center">
|
||||
<div class="w-6 h-6 bg-secondary rounded-full"></div>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-[hsl(var(--dark-text))]">{{ $item['title'] }}</h3>
|
||||
<p class="text-dark-muted text-sm leading-relaxed">
|
||||
{{ $item['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<p class="text-large text-dark-muted leading-relaxed max-w-3xl mx-auto">
|
||||
Was als Vision begann, traditionelle Geschäftsprozesse zu revolutionieren, ist heute eine
|
||||
bewährte Plattform für digitale Innovation. B2in schließt die Lücke zwischen
|
||||
traditionellen Unternehmen und modernen, digitalen Lösungen durch maßgeschneiderte
|
||||
Konnektivitätsservices, die Effizienz steigern und nachhaltiges Wachstum fördern.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<section class="py-20 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-4xl lg:text-5xl font-light text-foreground mb-6">
|
||||
Unsere <span class="text-secondary">Werte</span>
|
||||
</h2>
|
||||
<p class="text-muted-foreground text-lg max-w-2xl mx-auto">
|
||||
Diese fünf Grundpfeiler leiten unser tägliches Handeln und definieren,
|
||||
wer wir als Unternehmen sind und wofür wir stehen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
@foreach($this->values as $index => $value)
|
||||
<div class="group {{ $index === 4 ? 'md:col-span-2 lg:col-span-1 lg:col-start-2' : '' }}">
|
||||
<div class="card-elevated p-8 rounded-3xl h-full hover:scale-105 transition-all duration-300 relative overflow-hidden">
|
||||
<div class="text-center space-y-6">
|
||||
<div class="text-5xl mb-4">{{ $value['icon'] }}</div>
|
||||
|
||||
<h3 class="text-2xl font-semibold text-foreground">
|
||||
{{ $value['title'] }}
|
||||
</h3>
|
||||
|
||||
<div class="w-12 h-px bg-secondary mx-auto"></div>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $value['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-secondary/20 via-secondary to-secondary/20 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
<section class="py-16 px-4">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-section-title text-foreground mb-6">
|
||||
Warum Partner werden?
|
||||
</h2>
|
||||
<p class="text-muted-foreground text-lg max-w-3xl mx-auto">
|
||||
Entdecken Sie die Vorteile einer Partnerschaft mit B2in und
|
||||
wie Sie von unserem innovativen Ecosystem profitieren können.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-16">
|
||||
{{-- Für Makler --}}
|
||||
<div class="space-y-8">
|
||||
<div class="text-center lg:text-left">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||
<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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
|
||||
</svg>
|
||||
Für Makler
|
||||
</div>
|
||||
<h3 class="text-3xl font-light text-foreground mb-6">
|
||||
Revolutionäres <span class="text-primary">Provisionsmodell</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
@foreach ($this->brokerBenefits as $index => $benefit)
|
||||
<div class="card-elevated p-6 rounded-xl">
|
||||
<div class="flex gap-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
@if ($benefit['icon'] === 'trending-up')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
|
||||
</svg>
|
||||
@elseif($benefit['icon'] === 'target')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z">
|
||||
</path>
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-foreground mb-2">
|
||||
{{ $benefit['title'] }}
|
||||
</h4>
|
||||
<p class="text-muted-foreground">
|
||||
{{ $benefit['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="bg-primary/5 rounded-xl p-6">
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-primary mb-2">3.5% - ∞</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Erstprovision bis Lifetime-Vergütung
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Für Lieferanten --}}
|
||||
<div class="space-y-8">
|
||||
<div class="text-center lg:text-left">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 bg-accent/50 text-accent-foreground px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||
<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="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
|
||||
</path>
|
||||
</svg>
|
||||
Für Lieferanten
|
||||
</div>
|
||||
<h3 class="text-3xl font-light text-foreground mb-6">
|
||||
Globale <span class="text-primary">Marktchancen</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
@foreach ($this->supplierBenefits as $index => $benefit)
|
||||
<div class="card-elevated p-6 rounded-xl">
|
||||
<div class="flex gap-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 rounded-xl bg-accent/20 flex items-center justify-center">
|
||||
@if ($benefit['icon'] === 'globe')
|
||||
<svg class="w-6 h-6 text-accent-foreground" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
|
||||
</path>
|
||||
</svg>
|
||||
@elseif($benefit['icon'] === 'handshake')
|
||||
<svg class="w-6 h-6 text-accent-foreground" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z">
|
||||
</path>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-6 h-6 text-accent-foreground" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
|
||||
</path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-foreground mb-2">
|
||||
{{ $benefit['title'] }}
|
||||
</h4>
|
||||
<p class="text-muted-foreground">
|
||||
{{ $benefit['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="card-elevated p-0 overflow-hidden rounded-xl">
|
||||
<img src="{{ asset('img/assets/accommodation-1.jpg') }}" alt="Partner success visualization"
|
||||
class="w-full h-48 object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
|
||||
<div class="p-6 text-white">
|
||||
<div class="text-2xl font-bold mb-1">500+</div>
|
||||
<p class="text-sm opacity-90">Erfolgreiche Partner</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<section class="section-dark section-padding">
|
||||
<div class="container-narrow text-center">
|
||||
<div class="spacing-section">
|
||||
<h2 class="text-5xl lg:text-6xl font-light text-[hsl(var(--dark-text))] leading-tight">
|
||||
Wachsen Sie <br />
|
||||
<span class="text-secondary">mit uns</span>
|
||||
</h2>
|
||||
|
||||
<div class="w-16 h-px bg-secondary mx-auto"></div>
|
||||
|
||||
<p class="text-large text-dark-muted leading-relaxed max-w-2xl mx-auto">
|
||||
Werden Sie Teil des B2in-Partnernetzwerks und erschließen Sie neue
|
||||
Geschäftsmöglichkeiten durch innovative Konnektivitätslösungen.
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 py-8">
|
||||
@foreach($this->stats as $stat)
|
||||
<div class="text-center space-y-3">
|
||||
<div class="text-4xl font-light text-secondary">{{ $stat['number'] }}</div>
|
||||
<p class="text-dark-muted text-sm">{{ $stat['label'] }}</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="spacing-content">
|
||||
<a href="/contact" class="btn-accent px-12 py-6 rounded-2xl text-lg">
|
||||
Werden Sie B2in Partner
|
||||
</a>
|
||||
|
||||
<p class="text-dark-muted text-sm">
|
||||
Entdecken Sie die Vorteile einer strategischen Partnerschaft mit B2in
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
<section class="min-h-screen flex items-center relative overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-8">
|
||||
<h1 class="text-hero">
|
||||
Wachsen Sie mit uns.<br />
|
||||
Werden Sie <span class="text-secondary">B2in Partner</span>.
|
||||
</h1>
|
||||
|
||||
<p class="text-lg text-muted-foreground max-w-md leading-relaxed">
|
||||
Werden Sie Teil des B2in Ecosystems und profitieren Sie von innovativen
|
||||
Geschäftsmodellen, die nachhaltiges Wachstum und langfristigen Erfolg ermöglichen.
|
||||
Gemeinsam gestalten wir die Zukunft der Immobilienbranche.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
@foreach ($this->partnerTypes as $partner)
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
@if ($partner['icon'] === 'trending-up')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||
</svg>
|
||||
@elseif($partner['icon'] === 'globe')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
@elseif($partner['icon'] === 'handshake')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-foreground">{{ $partner['title'] }}</p>
|
||||
<p class="text-sm text-muted-foreground">{{ $partner['description'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="card-elevated rounded-3xl p-12 bg-background/80 backdrop-blur-sm">
|
||||
<div class="space-y-8">
|
||||
<!-- Central Partnership Hub -->
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-24 h-24 mx-auto rounded-full bg-primary flex items-center justify-center mb-4">
|
||||
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-foreground">Partner Network</h3>
|
||||
<p class="text-sm text-muted-foreground">Werden Sie Teil unseres Ecosystems</p>
|
||||
</div>
|
||||
|
||||
<!-- Partner Types -->
|
||||
<div class="grid grid-cols-2 gap-8">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 mx-auto rounded-full bg-accent flex items-center justify-center mb-3">
|
||||
<svg class="w-8 h-8 text-accent-foreground" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="font-medium text-sm">Makler</p>
|
||||
<p class="text-xs text-muted-foreground">Lifetime-Modell</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 mx-auto rounded-full bg-accent flex items-center justify-center mb-3">
|
||||
<svg class="w-8 h-8 text-accent-foreground" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="font-medium text-sm">Lieferanten</p>
|
||||
<p class="text-xs text-muted-foreground">Global Markets</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 mx-auto rounded-full bg-accent flex items-center justify-center mb-3">
|
||||
<svg class="w-8 h-8 text-accent-foreground" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 1.657-2.657 1.657-2.657A8 8 0 0118.657 17.657zM12 12l1 1" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="font-medium text-sm">Erfolg</p>
|
||||
<p class="text-xs text-muted-foreground">Messbare Ziele</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-16 h-16 mx-auto rounded-full bg-accent flex items-center justify-center mb-3">
|
||||
<svg class="w-8 h-8 text-accent-foreground" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="font-medium text-sm">Qualität</p>
|
||||
<p class="text-xs text-muted-foreground">Premium Standards</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
<section class="py-16 px-4 bg-accent">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-section-title text-foreground mb-6">
|
||||
So werden Sie <span class="text-primary">Partner</span>
|
||||
</h2>
|
||||
<p class="text-muted-foreground text-lg max-w-3xl mx-auto">
|
||||
In nur drei einfachen Schritten werden Sie Teil des B2in Ecosystems
|
||||
und können von allen Vorteilen unserer Partnerschaft profitieren.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 mb-16">
|
||||
@foreach ($this->steps as $index => $step)
|
||||
<div class="card-elevated p-0 overflow-hidden group hover:shadow-elevated transition-all duration-300">
|
||||
<div class="relative overflow-hidden">
|
||||
<img src="{{ asset('img/assets/' . $step['image']) }}" alt="{{ $step['title'] }}"
|
||||
class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300" />
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
</div>
|
||||
|
||||
{{-- Step Number Badge --}}
|
||||
<div
|
||||
class="absolute top-4 left-4 w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center font-bold text-lg">
|
||||
{{ $step['step'] }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-8">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
@if ($step['icon'] === 'file-text')
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
|
||||
</path>
|
||||
</svg>
|
||||
@elseif($step['icon'] === 'search')
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<h3 class="text-2xl font-medium text-foreground">
|
||||
{{ $step['title'] }}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p class="text-muted-foreground leading-relaxed mb-6">
|
||||
{{ $step['description'] }}
|
||||
</p>
|
||||
|
||||
@if ($index === count($steps) - 1)
|
||||
<a href="/contact">
|
||||
<button class="btn-secondary w-full">
|
||||
Jetzt starten
|
||||
</button>
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- CTA Section --}}
|
||||
<div class="text-center">
|
||||
<div class="card-elevated p-12 rounded-3xl bg-gradient-to-br from-primary/10 to-primary/5">
|
||||
<h3 class="text-3xl font-light text-foreground mb-6">
|
||||
Bereit für den nächsten <span class="text-primary">Schritt</span>?
|
||||
</h3>
|
||||
<p class="text-muted-foreground text-lg mb-8 max-w-2xl mx-auto">
|
||||
Werden Sie noch heute Teil des B2in Ecosystems und profitieren Sie
|
||||
von innovativen Geschäftsmodellen und nachhaltigen Erfolgsstrategien.
|
||||
</p>
|
||||
<a href="/contact">
|
||||
<button class="btn-primary text-lg px-8 py-4">
|
||||
Jetzt Partner werden
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
<section class="py-16 lg:py-24 bg-muted/20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{{-- Section Title --}}
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-section-title">spotlights</h2>
|
||||
<p class="text-muted-foreground text-lg mt-4 max-w-2xl mx-auto">
|
||||
Discover what makes our accommodation service stand out from the rest
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{-- Spotlights Grid --}}
|
||||
<div class="grid md:grid-cols-3 gap-8 lg:gap-12">
|
||||
@foreach ($this->spotlights as $index => $spotlight)
|
||||
<div class="text-center space-y-6 group">
|
||||
<div
|
||||
class="mx-auto w-20 h-20 bg-secondary/10 rounded-2xl flex items-center justify-center group-hover:bg-secondary/20 transition-colors duration-300">
|
||||
@if ($spotlight['icon'] === 'map-pin')
|
||||
<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
|
||||
</path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
@elseif($spotlight['icon'] === 'star')
|
||||
<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z">
|
||||
</path>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-xl font-medium">{{ $spotlight['title'] }}</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $spotlight['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
<section class="py-20 px-4 bg-muted/30">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-6">
|
||||
<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="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
Für Lieferanten
|
||||
</div>
|
||||
|
||||
<h2 class="text-4xl lg:text-5xl font-light text-foreground mb-6">
|
||||
Kuratierte <span class="text-primary">Plattform</span> für Anbieter
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
Werden Sie Teil eines exklusiven Netzwerks hochwertiger Anbieter.
|
||||
Präsentieren Sie Ihre Produkte und Services einer vorqualifizierten,
|
||||
kaufkräftigen Zielgruppe mit höchsten Qualitätsansprüchen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
@foreach($this->benefits as $benefit)
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
@if($benefit['icon'] === 'store')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
|
||||
</svg>
|
||||
@elseif($benefit['icon'] === 'settings')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
@elseif($benefit['icon'] === 'check-circle')
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-foreground mb-2">
|
||||
{{ $benefit['title'] }}
|
||||
</h3>
|
||||
<p class="text-muted-foreground">
|
||||
{{ $benefit['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="card-elevated rounded-3xl p-8">
|
||||
<div class="space-y-8">
|
||||
<div class="text-center">
|
||||
<div class="w-20 h-20 mx-auto rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center mb-6">
|
||||
<svg class="w-10 h-10 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-semibold text-foreground mb-4">
|
||||
Anbieter-Dashboard
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-accent/30 rounded-xl p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm font-medium text-foreground">Produktsichtbarkeit</span>
|
||||
<span class="text-xs text-primary">94%</span>
|
||||
</div>
|
||||
<div class="w-full bg-accent/50 rounded-full h-2">
|
||||
<div class="bg-primary h-2 rounded-full w-[94%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-accent/30 rounded-xl p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-sm font-medium text-foreground">Qualitätsbewertung</span>
|
||||
<span class="text-xs text-primary">98%</span>
|
||||
</div>
|
||||
<div class="w-full bg-accent/50 rounded-full h-2">
|
||||
<div class="bg-primary h-2 rounded-full w-[98%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
<div>
|
||||
<!-- Hero Section with Contact Form -->
|
||||
<section id="kontakt" class="py-10 flex items-center relative overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-[hsl(var(--hero-container))] rounded-[20px] w-[95%]">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 lg:py-12 bg-hero-container hero-frame rounded-[20px] w-[95%]">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<!-- Left Side - Hero Text -->
|
||||
<div class="">
|
||||
<x-web.hero-eyebrow :text="$content['hero']['eyebrow'] ?? null" class="mb-6" />
|
||||
<h1 class="text-hero mb-6 tracking-wide">
|
||||
{!! $content['hero']['title'] ?? 'Send us a<br /><span class="text-secondary font-medium">message.</span>' !!}
|
||||
</h1>
|
||||
|
|
@ -233,35 +234,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Social Media Section -->
|
||||
{{-- <section class="section-padding bg-accent">
|
||||
<div class="container-padding">
|
||||
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div class="slide-right delay-200">
|
||||
<h2 class="text-section-title mb-6">
|
||||
{!! $content['social_media']['title'] ?? 'Follow for<br /><span class="text-secondary font-medium">exclusives</span>' !!}
|
||||
</h2>
|
||||
<p class="text-muted-foreground mb-8 max-w-md">
|
||||
{{ $content['social_media']['subtitle'] ?? 'Bleiben Sie auf dem Laufenden mit exklusiven Angeboten und News.' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
@foreach($this->socialMedia as $index => $social)
|
||||
<div class="flex items-center justify-between p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors slide-left delay-{{ $index * 200 }} cursor-pointer">
|
||||
<div>
|
||||
<h3 class="text-xl text-foreground">{{ $social['name'] }}</h3>
|
||||
<p class="text-sm text-muted-foreground">{{ $social['handle'] }}</p>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
||||
</svg>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
--}}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue