First commit
This commit is contained in:
commit
7cf3558ba7
12933 changed files with 1180047 additions and 0 deletions
|
|
@ -0,0 +1,20 @@
|
|||
<div class="text-center mb-16">
|
||||
<h2 class="text-section-title mb-8">Button-Demo</h2>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<button class="btn-primary">Primary Button</button>
|
||||
<button class="btn-secondary">Secondary Button</button>
|
||||
<button class="btn-accent">Accent Button</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<p class="text-sm text-muted-foreground mb-4">Hover-Effekte:</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<button class="btn-primary-accent">
|
||||
Primary → Accent (Hover)
|
||||
</button>
|
||||
<button class="btn-secondary-accent">
|
||||
Secondary → Accent (Hover)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<div class="text-center mb-16">
|
||||
<h2 class="text-section-title mb-8">Farb-Demo</h2>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="card-elevated p-6">
|
||||
<div class="w-full h-20 bg-primary rounded-lg mb-4"></div>
|
||||
<h3 class="font-medium">Primary</h3>
|
||||
<p class="text-sm text-muted-foreground">{{ \App\Helpers\ThemeHelper::getPrimaryColor() }}</p>
|
||||
</div>
|
||||
<div class="card-elevated p-6">
|
||||
<div class="w-full h-20 bg-secondary rounded-lg mb-4"></div>
|
||||
<h3 class="font-medium">Secondary</h3>
|
||||
<p class="text-sm text-muted-foreground">{{ \App\Helpers\ThemeHelper::getSecondaryColor() }}</p>
|
||||
</div>
|
||||
<div class="card-elevated p-6">
|
||||
<div class="w-full h-20 bg-accent rounded-lg mb-4"></div>
|
||||
<h3 class="font-medium">Accent</h3>
|
||||
<p class="text-sm text-muted-foreground">Neutral</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<div class="text-center mb-16">
|
||||
<h2 class="text-section-title mb-8">{{ $title }}</h2>
|
||||
@if ($description)
|
||||
<p class="text-muted-foreground mb-8 max-w-2xl mx-auto">{{ $description }}</p>
|
||||
@endif
|
||||
|
||||
<div class="card-elevated p-8">
|
||||
@if ($component)
|
||||
<livewire:web.components.{{ $component }} />
|
||||
@else
|
||||
{{ $slot }}
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<div class="text-center mb-16">
|
||||
<h2 class="text-section-title mb-8">Logo-Demo</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div class="card-elevated p-8">
|
||||
<h3 class="text-lg font-medium mb-4">Positives Logo</h3>
|
||||
<div class="flex justify-center">
|
||||
<img src="{{ asset(\App\Helpers\ThemeHelper::getLogoPath('positive')) }}"
|
||||
alt="{{ $domainName ?? 'B2IN' }} Logo" class="h-16 w-auto" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-elevated p-8 bg-dark-bg">
|
||||
<h3 class="text-lg font-medium mb-4 text-dark-text">Negatives Logo</h3>
|
||||
<div class="flex justify-center">
|
||||
<img src="{{ asset(\App\Helpers\ThemeHelper::getLogoPath('negative')) }}"
|
||||
alt="{{ $domainName ?? 'B2IN' }} Logo" class="h-16 w-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<div class="text-center mb-16">
|
||||
<h1 class="text-hero mb-8">
|
||||
Theme Demo für <span class="text-secondary">{{ $domainName ?? 'B2IN' }}</span>
|
||||
</h1>
|
||||
|
||||
<div class="card-elevated p-8 max-w-4xl mx-auto">
|
||||
<div class="grid md:grid-cols-2 gap-8 text-left">
|
||||
<div>
|
||||
<h3 class="text-xl font-medium mb-4">Aktuelle Domain-Konfiguration</h3>
|
||||
<div class="space-y-2 text-sm">
|
||||
<p><strong>Domain:</strong> {{ $domainName ?? 'Nicht erkannt' }}</p>
|
||||
<p><strong>Theme:</strong> {{ $theme ?? 'b2in' }}</p>
|
||||
<p><strong>View Prefix:</strong> {{ $viewPrefix ?? 'b2in' }}</p>
|
||||
<p><strong>URL:</strong> {{ $domainUrl ?? config('app.url') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-medium mb-4">Theme-Details</h3>
|
||||
<div class="space-y-2 text-sm">
|
||||
@php
|
||||
$domainConfig = \App\Helpers\ThemeHelper::getDomainConfig();
|
||||
@endphp
|
||||
<p><strong>Primärfarbe:</strong>
|
||||
<span class="inline-block w-4 h-4 rounded-full mr-2"
|
||||
style="background-color: {{ \App\Helpers\ThemeHelper::getPrimaryColor() }}"></span>
|
||||
{{ \App\Helpers\ThemeHelper::getPrimaryColor() }}
|
||||
</p>
|
||||
<p><strong>Sekundärfarbe:</strong>
|
||||
<span class="inline-block w-4 h-4 rounded-full mr-2"
|
||||
style="background-color: {{ \App\Helpers\ThemeHelper::getSecondaryColor() }}"></span>
|
||||
{{ \App\Helpers\ThemeHelper::getSecondaryColor() }}
|
||||
</p>
|
||||
<p><strong>Primärschrift:</strong> {{ \App\Helpers\ThemeHelper::getPrimaryFont() }}</p>
|
||||
<p><strong>Sekundärschrift:</strong> {{ \App\Helpers\ThemeHelper::getSecondaryFont() }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<div class="text-center">
|
||||
<h2 class="text-section-title mb-8">Domain-Switching</h2>
|
||||
<div class="card-elevated p-8 max-w-4xl mx-auto">
|
||||
<p class="text-muted-foreground mb-6">Testen Sie das Theme-Switching mit verschiedenen Domains:</p>
|
||||
|
||||
<!-- Domain-basierte Links -->
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
@foreach ($domains as $domain)
|
||||
<a href="{{ $domain['url'] }}/theme-demo" class="btn-secondary text-center">{{ $domain['domain_name'] }} Theme</a>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
|
||||
{{-- <div class="border-t pt-6">
|
||||
<p class="text-muted-foreground mb-4">Oder testen Sie das Theme-Switching über URL-Parameter:</p>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||||
<a href="/theme-demo?theme=b2in" class="btn-accent text-center">B2IN (URL)</a>
|
||||
<a href="/theme-demo?theme=b2a" class="btn-accent text-center">B2A (URL)</a>
|
||||
<a href="/theme-demo?theme=stileigentum" class="btn-accent text-center">Stileigentum (URL)</a>
|
||||
<a href="/theme-demo?theme=style2own" class="btn-accent text-center">Style2own (URL)</a>
|
||||
</div>
|
||||
|
||||
<div class="border-t pt-6">
|
||||
<p class="text-muted-foreground mb-4">Für lokale Entwicklung ohne Domain-Setup (Pfad-basiert):</p>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<a href="/b2in/theme-demo" class="btn-primary text-center">B2IN (Pfad)</a>
|
||||
<a href="/b2a/theme-demo" class="btn-primary text-center">B2A (Pfad)</a>
|
||||
<a href="/stileigentum/theme-demo" class="btn-primary text-center">Stileigentum (Pfad)</a>
|
||||
<a href="/style2own/theme-demo" class="btn-primary text-center">Style2own (Pfad)</a>
|
||||
</div>
|
||||
</div>
|
||||
--}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<section class="section-padding 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-hero">
|
||||
{!! $content['title'] !!}
|
||||
</h1>
|
||||
|
||||
<blockquote class="text-large text-muted-foreground italic leading-relaxed border-l-4 border-secondary pl-6">
|
||||
{{ $content['quote'] }}
|
||||
</blockquote>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-16 h-px bg-secondary"></div>
|
||||
<div>
|
||||
<p class="font-semibold text-foreground">{{ $content['founder_name'] }}</p>
|
||||
<p class="text-sm text-muted-foreground">{{ $content['founder_title'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="card-elevated rounded-3xl overflow-hidden">
|
||||
<img
|
||||
src="{{ asset('img/assets/' . $content['image']) }}"
|
||||
alt="{{ $content['image_alt'] }}"
|
||||
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">{{ $content['year'] }}</div>
|
||||
<p class="text-sm opacity-90">{{ $content['year_text'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<section class="section-padding {{ $bg }}">
|
||||
<div class="container-padding">
|
||||
{{-- Section Title --}}
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-section-title">{{ $title }}</h2>
|
||||
<p class="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
|
||||
{{ $subtitle }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{-- Brand Cards --}}
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
@foreach ($worlds as $world)
|
||||
<div class="card-elevated overflow-hidden group hover:shadow-elevated transition-all duration-300">
|
||||
<div class="relative">
|
||||
<img src="{{ asset('img/assets/' . $world['image']) }}" alt="{{ $world['title'] }}"
|
||||
class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</div>
|
||||
|
||||
<div class="p-6 spacing-small">
|
||||
<h3 class="text-xl font-medium">{{ $world['title'] }}</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $world['description'] }}
|
||||
</p>
|
||||
|
||||
<a href="{{ $world['link'] }}"
|
||||
class="inline-flex items-center gap-2 text-secondary font-medium hover:gap-3 transition-all duration-300">
|
||||
Mehr erfahren
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<section class="{{ $bg }} text-secondary-foreground section-padding">
|
||||
<div class="container-narrow text-center">
|
||||
<div class="spacing-section">
|
||||
<h2 class="text-section-title text-white">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
|
||||
<p class="text-large text-secondary-foreground max-w-2xl mx-auto leading-relaxed">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
|
||||
<div class="pt-4">
|
||||
<a
|
||||
href="{{ $content['button_link'] }}"
|
||||
class="btn-primary-accent px-8 py-4 text-lg"
|
||||
>
|
||||
{{ $content['button_text'] }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<section class="section-padding text-center">
|
||||
<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-2xl mx-auto">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
@foreach($content['testimonials'] as $testimonial)
|
||||
<div class="card-elevated rounded-2xl p-8 text-left space-y-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<img src="{{ asset('img/assets/' . $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>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<section class="section-padding {{ $bg }}">
|
||||
<div class="container-padding">
|
||||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||||
|
||||
@if($layout === 'right')
|
||||
{{-- Layout Right: Image zuerst, dann Content --}}
|
||||
{{-- Image --}}
|
||||
<div class="relative lg:order-1">
|
||||
<div class="card-elevated rounded-3xl overflow-hidden">
|
||||
<img
|
||||
src="{{ asset('img/assets/' . $content['image']) }}"
|
||||
alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-[500px] 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">{{ $content['image_caption'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Content --}}
|
||||
<div class="spacing-section lg:order-2">
|
||||
<div class="spacing-content">
|
||||
<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>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
{{-- Layout Left (Standard): Content zuerst, dann Image --}}
|
||||
{{-- Content --}}
|
||||
<div class="spacing-section">
|
||||
<div class="spacing-content">
|
||||
<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>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Image --}}
|
||||
<div class="relative">
|
||||
<div class="card-elevated rounded-3xl overflow-hidden">
|
||||
<img
|
||||
src="{{ asset('img/assets/' . $content['image']) }}"
|
||||
alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-[500px] 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">{{ $content['image_caption'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<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="{{ asset('img/assets/' . $content['image']) }}" alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-96 object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<section class="section-padding bg-background">
|
||||
<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-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 {{ $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-secondary/10 flex items-center justify-center mb-6">
|
||||
@if($feature['icon'] === 'cloud')
|
||||
<svg class="w-8 h-8 text-secondary" 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-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>
|
||||
@elseif($feature['icon'] === 'layers')
|
||||
<svg class="w-8 h-8 text-secondary" 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-secondary" 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-secondary" 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-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>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
{{-- Hero Icons Helper Function --}}
|
||||
@php
|
||||
function renderHeroIcon($iconName, $style = 'outline') {
|
||||
$iconPath = public_path("heroicons/optimized/24/{$style}/{$iconName}.svg");
|
||||
$fallbackPath = public_path("heroicons/optimized/24/outline/sparkles.svg");
|
||||
|
||||
if (file_exists($iconPath)) {
|
||||
$svg = file_get_contents($iconPath);
|
||||
// Add classes for styling
|
||||
return str_replace('<svg', '<svg class="w-10 h-10 text-secondary"', $svg);
|
||||
} elseif (file_exists($fallbackPath)) {
|
||||
$svg = file_get_contents($fallbackPath);
|
||||
return str_replace('<svg', '<svg class="w-10 h-10 text-secondary"', $svg);
|
||||
}
|
||||
|
||||
// Ultimate fallback - simple star icon
|
||||
return '<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.563.563 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>
|
||||
</svg>';
|
||||
}
|
||||
@endphp
|
||||
|
||||
<section class="section-padding {{ $bg }}">
|
||||
<div class="container-padding">
|
||||
{{-- Section Title --}}
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-section-title">{{ $content['title'] }}</h2>
|
||||
@if(isset($content['subtitle']))
|
||||
<p class="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Pillars Grid --}}
|
||||
<div class="grid md:grid-cols-3 gap-8 lg:gap-12">
|
||||
@foreach($content['pillars'] as $index => $pillar)
|
||||
<div class="card-elevated rounded-2xl p-8 text-center">
|
||||
<div class="text-center spacing-content 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">
|
||||
{!! renderHeroIcon($pillar['icon'], $pillar['icon_style'] ?? 'outline') !!}
|
||||
</div>
|
||||
|
||||
<div class="spacing-small">
|
||||
<h3 class="text-xl font-medium">{{ $pillar['title'] }}</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $pillar['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<section class="section-padding 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-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="{{ asset('img/assets/' . $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>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<section class="section-padding bg-background">
|
||||
<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-3xl mx-auto">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
@foreach ($content['stats'] as $stat)
|
||||
<div class="card-elevated rounded-2xl p-8 text-center">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<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="{{ asset('img/assets/' . $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>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<div x-data="{ openIndex: null }">
|
||||
<section class="section-padding {{ $bg }}">
|
||||
<div class="container-padding">
|
||||
{{-- Section Title --}}
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-hero mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
@if(!empty($content['subtitle']))
|
||||
<p class="text-large text-muted-foreground max-w-2xl mx-auto">
|
||||
{!! $content['subtitle'] !!}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- FAQ Container --}}
|
||||
<div class="max-w-4xl mx-auto">
|
||||
@if(!empty($content['questions']))
|
||||
<div class="space-y-4">
|
||||
@foreach($content['questions'] as $index => $faq)
|
||||
<div class="card-elevated rounded-xl overflow-hidden">
|
||||
<dt>
|
||||
<button
|
||||
@click="openIndex = openIndex === {{ $index }} ? null : {{ $index }}"
|
||||
class="flex w-full items-center justify-between p-6 text-left hover:bg-muted/30 transition-colors duration-200"
|
||||
:aria-expanded="openIndex === {{ $index }}"
|
||||
>
|
||||
<span class="text-lg font-medium text-foreground pr-6">
|
||||
{{ $faq['question'] }}
|
||||
</span>
|
||||
<span class="flex-shrink-0 ml-6 flex h-8 w-8 items-center justify-center rounded-full bg-secondary/10 transition-all duration-200"
|
||||
:class="openIndex === {{ $index }} ? 'bg-secondary text-white' : 'text-secondary hover:bg-secondary/20'">
|
||||
<svg class="w-5 h-5 transition-transform duration-200"
|
||||
:class="openIndex === {{ $index }} ? 'rotate-180' : ''"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</dt>
|
||||
<dd x-show="openIndex === {{ $index }}"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 transform -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 transform translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 transform translate-y-0"
|
||||
x-transition:leave-end="opacity-0 transform -translate-y-2"
|
||||
class="px-6 pb-6">
|
||||
<div class="border-t border-border pt-4">
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $faq['answer'] }}
|
||||
</p>
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
{{-- Fallback wenn keine FAQ-Daten vorhanden --}}
|
||||
<div class="text-center py-12">
|
||||
<p class="text-muted-foreground">Keine FAQ-Inhalte verfügbar.</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<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="{{ asset('img/assets/' . ($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>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
|
||||
<div x-data="heroSlider()" x-init="init()">
|
||||
<section class="relative mb-10">
|
||||
<!-- Slider Container -->
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
@if(!empty($content['slides']))
|
||||
@foreach($content['slides'] as $index => $slide)
|
||||
<div
|
||||
class="absolute inset-0 transition-opacity duration-1000 ease-in-out"
|
||||
:class="currentSlide === {{ $index }} ? 'opacity-100' : 'opacity-0'"
|
||||
>
|
||||
<img
|
||||
src="{{ asset('img/assets/' . $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>
|
||||
|
||||
<!-- 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="Slide {{ $index + 1 }} anzeigen"
|
||||
></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="Vorheriges Bild"
|
||||
>
|
||||
<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="Nächstes Bild"
|
||||
>
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
@endif
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function heroSlider() {
|
||||
return {
|
||||
currentSlide: 0,
|
||||
totalSlides: {{ !empty($content['slides']) ? count($content['slides']) : 0 }},
|
||||
autoplayInterval: null,
|
||||
autoplayTimeout: null,
|
||||
|
||||
init() {
|
||||
if (this.totalSlides > 1) {
|
||||
this.startAutoplay();
|
||||
}
|
||||
},
|
||||
|
||||
// Automatischer Wechsel (nur für Intervall)
|
||||
autoNextSlide() {
|
||||
this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
|
||||
},
|
||||
|
||||
// Manuelle Navigation
|
||||
nextSlide() {
|
||||
this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
|
||||
this.resetAutoplay();
|
||||
},
|
||||
|
||||
previousSlide() {
|
||||
this.currentSlide = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
|
||||
this.resetAutoplay();
|
||||
},
|
||||
|
||||
setSlide(index) {
|
||||
this.currentSlide = index;
|
||||
this.resetAutoplay();
|
||||
},
|
||||
|
||||
startAutoplay() {
|
||||
// Zuerst alle bestehenden Timer löschen
|
||||
this.stopAutoplay();
|
||||
|
||||
this.autoplayInterval = setInterval(() => {
|
||||
this.autoNextSlide();
|
||||
}, 5000); // Wechsel alle 5 Sekunden
|
||||
},
|
||||
|
||||
stopAutoplay() {
|
||||
if (this.autoplayInterval) {
|
||||
clearInterval(this.autoplayInterval);
|
||||
this.autoplayInterval = null;
|
||||
}
|
||||
if (this.autoplayTimeout) {
|
||||
clearTimeout(this.autoplayTimeout);
|
||||
this.autoplayTimeout = null;
|
||||
}
|
||||
},
|
||||
|
||||
resetAutoplay() {
|
||||
// Alle Timer stoppen
|
||||
this.stopAutoplay();
|
||||
|
||||
// Nach 5 Sekunden Pause wieder starten
|
||||
this.autoplayTimeout = setTimeout(() => {
|
||||
this.startAutoplay();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<section class="section-padding flex items-center relative">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 card-elevated 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="{{ asset('img/assets/' . $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="{{ asset('img/assets/' . $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="{{ asset('img/assets/' . $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="{{ asset('img/assets/' . $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="{{ asset('img/assets/' . $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>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<section class="section-padding flex items-center relative">
|
||||
<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 --}}
|
||||
<div class="relative">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
|
||||
<img src="{{ asset('img/assets/' . $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-sm text-muted-foreground">{{ $content['card_title'] }}</div>
|
||||
<div class="text-2xl font-medium">{!! $content['card_text'] !!}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<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="{{ 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">{{ $content['team_tag'] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<div>
|
||||
<!-- Back Navigation -->
|
||||
<div class="pt-20 pb-4">
|
||||
<div class="container-narrow">
|
||||
<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>
|
||||
{{ $content['back_to_magazine'] }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Article Header -->
|
||||
<article class="pb-16">
|
||||
<div class="container-narrow">
|
||||
<header class="text-center mb-12">
|
||||
<h1 class="text-section-title mb-6 leading-tight">
|
||||
{{ $article['title'] }}
|
||||
</h1>
|
||||
<p class="text-large 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('img/assets/' . $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-large 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">{{ $content['share_article'] }}</h3>
|
||||
<div class="space-y-3">
|
||||
<button class="btn-secondary-accent w-full">
|
||||
<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="btn-secondary-accent w-full">
|
||||
<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="container-narrow text-center">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<h2 class="text-3xl font-light mb-6 text-white">
|
||||
{!! $content['cta_title'] !!}
|
||||
</h2>
|
||||
|
||||
<a href="/magazin" class="btn-primary-accent">
|
||||
{{ $content['cta_button'] }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<section class="section-padding">
|
||||
<div class="container-padding">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-hero mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
<p class="text-large text-muted-foreground mt-4 max-w-3xl mx-auto">
|
||||
{{ $content['subtitle'] }}
|
||||
</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('img/assets/' . $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">{{ $content['read_more'] }}</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-accent">
|
||||
{{ $content['load_more'] }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<section class="section-padding">
|
||||
<div class="container-padding text-center">
|
||||
<h2 class="text-section-title text-foreground mb-12">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
@foreach($content['timeline'] as $index => $item)
|
||||
<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-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-foreground">{{ $item['title'] }}</h3>
|
||||
|
||||
<p class="text-muted-foreground text-sm leading-relaxed">
|
||||
{{ $item['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>
|
||||
|
||||
|
||||
<p class="text-large text-muted-foreground leading-relaxed max-w-3xl mx-auto mt-12">
|
||||
{{ $content['summary'] }}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
{{-- Hero Icons Helper Function --}}
|
||||
@php
|
||||
function renderHeroIcon($iconName, $style = 'outline') {
|
||||
$iconPath = public_path("heroicons/optimized/24/{$style}/{$iconName}.svg");
|
||||
$fallbackPath = public_path("heroicons/optimized/24/outline/sparkles.svg");
|
||||
|
||||
if (file_exists($iconPath)) {
|
||||
$svg = file_get_contents($iconPath);
|
||||
// Add classes for styling
|
||||
return str_replace('<svg', '<svg class="w-10 h-10 text-secondary"', $svg);
|
||||
} elseif (file_exists($fallbackPath)) {
|
||||
$svg = file_get_contents($fallbackPath);
|
||||
return str_replace('<svg', '<svg class="w-10 h-10 text-secondary"', $svg);
|
||||
}
|
||||
|
||||
// Ultimate fallback - simple star icon
|
||||
return '<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.563.563 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>
|
||||
</svg>';
|
||||
}
|
||||
@endphp
|
||||
<section class="section-padding">
|
||||
<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-2 lg:grid-cols-3 gap-8">
|
||||
@foreach($content['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="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">
|
||||
{!! renderHeroIcon($value['icon'], $value['icon_style'] ?? 'outline') !!}
|
||||
</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>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<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="{{ asset('img/assets/' . $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>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<section class="{{ $bg }} text-secondary-foreground section-padding">
|
||||
<div class="container-narrow text-center">
|
||||
<div class="spacing-section">
|
||||
<h2 class="text-section-title text-white">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
|
||||
|
||||
<p class="text-large text-secondary-foreground max-w-2xl mx-auto leading-relaxed">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 py-8">
|
||||
@foreach($content['stats'] as $stat)
|
||||
<div class="text-center space-y-3">
|
||||
<div class="text-4xl font-light text-secondary-foreground">{{ $stat['number'] }}</div>
|
||||
<p class="text-secondary-foreground text-sm">{{ $stat['label'] }}</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="spacing-content">
|
||||
<a href="{{ $content['button_link'] }}" class="btn-primary-accent">
|
||||
{{ $content['button_text'] }}
|
||||
</a>
|
||||
|
||||
<p class="text-secondary-foreground text-sm">
|
||||
{{ $content['small_text'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<section class="section-padding 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">
|
||||
{!! $content['title'] !!}
|
||||
</h1>
|
||||
|
||||
<p class="text-lg text-muted-foreground max-w-md leading-relaxed">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
@foreach ($content['partner_types'] as $partner)
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
|
||||
@if ($partner['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($partner['icon'] === 'globe')
|
||||
<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.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-secondary" 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-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>
|
||||
<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="relative rounded-3xl overflow-hidden shadow-elevated">
|
||||
<img src="{{ asset('img/assets/' . $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>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<section class="section-padding bg-accent">
|
||||
<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 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">
|
||||
<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-secondary 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-secondary/10 flex items-center justify-center">
|
||||
@if ($step['icon'] === 'file-text')
|
||||
<svg class="w-5 h-5 text-secondary" 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-secondary" 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-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"></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($content['steps']) - 1)
|
||||
<a href="/contact">
|
||||
<button class="btn-secondary-accent 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-secondary/10 to-secondary/5">
|
||||
<h3 class="text-3xl font-light text-foreground mb-6">
|
||||
{!! $content['cta']['title'] !!}
|
||||
</h3>
|
||||
<p class="text-large text-muted-foreground mb-8 max-w-2xl mx-auto">
|
||||
{{ $content['cta']['subtitle'] }}
|
||||
</p>
|
||||
<a href="{{ $content['cta']['button_link'] }}">
|
||||
<button class="btn-primary-accent">
|
||||
{{ $content['cta']['button_text'] }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,299 @@
|
|||
|
||||
|
||||
<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="{{ asset('img/assets/' . $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"> Ansehen</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">Keine Projekte gefunden</h3>
|
||||
<p class="text-muted-foreground">Versuchen Sie einen anderen 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="{{ asset('img/assets/' . $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">Ausstattung</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">Projektdetails</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">Standort</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">Preis</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">Größe</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">
|
||||
Kontakt aufnehmen
|
||||
</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
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<section class="section-padding {{ $bg }}">
|
||||
<div class="container-padding">
|
||||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||||
{{-- Content --}}
|
||||
<div class="spacing-section">
|
||||
<div class="spacing-content">
|
||||
<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>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Image --}}
|
||||
<div class="relative">
|
||||
<div class="card-elevated rounded-3xl overflow-hidden">
|
||||
<img
|
||||
src="{{ asset('img/assets/' . $content['image']) }}"
|
||||
alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-[500px] 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">{{ $content['image_caption'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
<div>
|
||||
<!-- Hero Section with Contact Form -->
|
||||
<section 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="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<!-- Left Side - Hero Text -->
|
||||
<div>
|
||||
<h1 class="text-hero mb-6 tracking-wide">
|
||||
{!! $content['hero']['title'] ?? 'Send us a<br /><span class="text-secondary font-medium">message.</span>' !!}
|
||||
</h1>
|
||||
<p class="text-large text-muted-foreground mb-8 max-w-md">
|
||||
{{ $content['hero']['subtitle'] ?? 'Wir freuen uns auf Ihre Nachricht und werden uns schnellstmöglich bei Ihnen melden.' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Right Side - Contact Form -->
|
||||
<div class="card-elevated p-8">
|
||||
@if (session()->has('message'))
|
||||
<div class="mb-6 p-4 bg-gray-50 border border-secondary/20 rounded-lg text-secondary">
|
||||
{{ session('message') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form wire:submit="submit" class="space-y-6">
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="firstName" class="text-foreground mb-2 block text-sm font-medium">
|
||||
{{ $content['form']['labels']['first_name'] ?? 'First name *' }}
|
||||
</label>
|
||||
<input
|
||||
wire:model="firstName"
|
||||
id="firstName"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 bg-gray-50 border border-border rounded-lg outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-gray-600 sm:text-sm/6"
|
||||
required
|
||||
/>
|
||||
@error('firstName') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label for="lastName" class="text-foreground mb-2 block text-sm font-medium">
|
||||
{{ $content['form']['labels']['last_name'] ?? 'Last name *' }}
|
||||
</label>
|
||||
<input
|
||||
wire:model="lastName"
|
||||
id="lastName"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 bg-gray-50 border border-border rounded-lg outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-gray-600 sm:text-sm/6"
|
||||
required
|
||||
/>
|
||||
@error('lastName') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="company" class="text-foreground mb-2 block text-sm font-medium">
|
||||
{{ $content['form']['labels']['company'] ?? 'Company' }}
|
||||
</label>
|
||||
<input
|
||||
wire:model="company"
|
||||
id="company"
|
||||
type="text"
|
||||
class="w-full px-3 py-2 bg-gray-50 border border-border rounded-lg outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-gray-600 sm:text-sm/6"
|
||||
/>
|
||||
@error('company') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="email" class="text-foreground mb-2 block text-sm font-medium">
|
||||
{{ $content['form']['labels']['email'] ?? 'Email *' }}
|
||||
</label>
|
||||
<input
|
||||
wire:model="email"
|
||||
id="email"
|
||||
type="email"
|
||||
class="w-full px-3 py-2 bg-gray-50 border border-border rounded-lg outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-gray-600 sm:text-sm/6"
|
||||
required
|
||||
/>
|
||||
@error('email') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label for="phone" class="text-foreground mb-2 block text-sm font-medium">
|
||||
{{ $content['form']['labels']['phone'] ?? 'Phone' }}
|
||||
</label>
|
||||
<input
|
||||
wire:model="phone"
|
||||
id="phone"
|
||||
type="tel"
|
||||
class="w-full px-3 py-2 bg-gray-50 border border-border rounded-lg outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-gray-600 sm:text-sm/6"
|
||||
/>
|
||||
@error('phone') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="subject" class="text-foreground mb-2 block text-sm font-medium">
|
||||
{{ $content['form']['labels']['subject'] ?? 'Subject *' }}
|
||||
</label>
|
||||
<div class="grid grid-cols-1">
|
||||
<select
|
||||
wire:model="subject"
|
||||
id="subject" name="subject"
|
||||
class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-gray-50 py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-gray-600 sm:text-sm/6">
|
||||
@foreach($this->subjects as $value => $label)
|
||||
<option value="{{ $value }}">{{ $label }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4">
|
||||
<path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
@error('subject') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<label for="message" class="text-foreground mb-2 block text-sm font-medium">
|
||||
{{ $content['form']['labels']['message'] ?? 'Message *' }}
|
||||
</label>
|
||||
<textarea
|
||||
wire:model="message"
|
||||
id="message"
|
||||
rows="5"
|
||||
class="w-full px-3 py-2 bg-gray-50 border border-border rounded-lg outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-gray-600 sm:text-sm/6 resize-none"
|
||||
placeholder="{{ $content['form']['placeholders']['message'] ?? 'Ihre Nachricht...' }}"
|
||||
required
|
||||
></textarea>
|
||||
@error('message') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full btn-primary flex items-center justify-center"
|
||||
wire:loading.attr="disabled"
|
||||
>
|
||||
<div class="flex items-center justify-center">
|
||||
<span wire:loading.remove>{{ $content['form']['button_text'] ?? 'Senden' }}</span>
|
||||
<span wire:loading>{{ $content['form']['button_loading'] ?? 'Wird gesendet...' }}</span>
|
||||
|
||||
<svg wire:loading.remove class="ml-2 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 8l4 4m0 0l-4 4m4-4H3"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Information Cards -->
|
||||
<section class="section-padding">
|
||||
<div class="container-padding">
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
@foreach($this->contactInfo as $info)
|
||||
<div class="card-elevated p-8 rounded-xl text-center">
|
||||
<div class="w-12 h-12 bg-secondary/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
@if($info['icon'] === 'map-pin')
|
||||
<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 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
@elseif($info['icon'] === 'mail')
|
||||
<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 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<h3 class="text-xl mb-2 text-foreground">{{ $info['title'] }}</h3>
|
||||
<div class="text-muted-foreground text-sm">
|
||||
@foreach($info['info'] as $line)
|
||||
<p>{{ $line }}</p>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</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>
|
||||
<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 $social)
|
||||
<div class="flex items-center justify-between p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors 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>
|
||||
73
resources/views/livewire/web/components/ui/footer.blade.php
Normal file
73
resources/views/livewire/web/components/ui/footer.blade.php
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<footer class="section-dark section-padding">
|
||||
<div class="container-padding">
|
||||
{{-- Main Content --}}
|
||||
<div class="text-center spacing-section">
|
||||
<div class="spacing-section">
|
||||
<div class="flex items-center justify-center">
|
||||
<img src="{{ asset(\App\Helpers\ThemeHelper::getLogoPath('negative')) }}"
|
||||
alt="{{ $domainName ?? 'B2In' }} Logo" class="h-12 w-auto" />
|
||||
</div>
|
||||
|
||||
<div class="container-narrow spacing-content">
|
||||
<h2 class="text-section-title text-dark-text leading-tight">
|
||||
Connecting Design and <span class="text-secondary">Property</span>
|
||||
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<hr class="border-t border-dark-muted/30 mt-12 pt-4">
|
||||
</div>
|
||||
|
||||
{{-- Links --}}
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-left max-w-4xl mx-auto">
|
||||
<div class="spacing-small">
|
||||
<a href="#" class="block hover-text-secondary transition-colors">Privacy Policy</a>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="spacing-small">
|
||||
<a href="#" class="block hover-text-secondary transition-colors">Terms of Service</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="spacing-small">
|
||||
<a href="#" class="block hover-text-secondary transition-colors">Cookie Policy</a>
|
||||
</div>
|
||||
|
||||
<div class="spacing-small">
|
||||
<a href="#" class="block hover-text-secondary transition-colors">Impressum</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Bottom Bar --}}
|
||||
<div class="border-t border-dark-muted/30 mt-12 pt-8">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center spacing-small md:space-y-0">
|
||||
<div class="text-dark-muted text-sm">
|
||||
© {{ date('Y') }} B2In. All rights reserved.
|
||||
</div>
|
||||
<div class="flex items-center space-x-6 text-dark-muted text-sm">
|
||||
<div class="flex space-x-4">
|
||||
<a href="#" class="hover-text-secondary transition-colors" aria-label="Facebook">
|
||||
<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>
|
||||
</a>
|
||||
<a href="#" class="hover-text-secondary transition-colors" aria-label="Instagram">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 6.62 5.367 11.987 11.988 11.987s11.987-5.367 11.987-11.987C24.004 5.367 18.637.001 12.017.001zM8.449 16.988c-1.297 0-2.448-.49-3.323-1.297C4.198 14.895 3.708 13.744 3.708 12.447s.49-2.448 1.418-3.323c.875-.807 2.026-1.297 3.323-1.297s2.448.49 3.323 1.297c.928.875 1.418 2.026 1.418 3.323s-.49 2.448-1.418 3.244c-.875.807-2.026 1.297-3.323 1.297zm7.83-9.281c-.49 0-.928-.175-1.297-.49-.368-.315-.49-.753-.49-1.243s.122-.928.49-1.243c.369-.315.807-.49 1.297-.49s.928.175 1.297.49c.368.315.49.753.49 1.243s-.122.928-.49 1.243c-.369.315-.807.49-1.297.49z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="hover-text-secondary transition-colors" aria-label="LinkedIn">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
71
resources/views/livewire/web/components/ui/header.blade.php
Normal file
71
resources/views/livewire/web/components/ui/header.blade.php
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<header class="header-normal" id="header">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<a href="{{ $domainUrl }}" class="flex items-center">
|
||||
<img src="{{ asset(\App\Helpers\ThemeHelper::getLogoPath('positive')) }}"
|
||||
alt="{{ $domainName ?? 'B2IN' }} Logo" class="h-8 w-auto" />
|
||||
</a>
|
||||
|
||||
<nav class="hidden md:flex items-center space-x-8">
|
||||
@foreach($content['navigation'] as $navItem)
|
||||
<a href="{{ $navItem['url'] }}"
|
||||
class="text-sm font-medium transition-colors relative
|
||||
@if($this->isActiveRoute($navItem['url']))
|
||||
text-secondary after:absolute after:bottom-[-4px] after:left-0 after:w-full after:h-0.5 after:bg-secondary after:rounded-full
|
||||
@else
|
||||
text-primary hover:text-secondary
|
||||
@endif">
|
||||
{{ $navItem['label'] }}
|
||||
</a>
|
||||
@endforeach
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center space-x-4">
|
||||
<a href="{{ config('domains.domain_portal_url') }}"
|
||||
class=" md:block rounded-md px-3 py-2 text-sm font-medium bg-secondary hover-bg-primary hover-shadow-accent-glow text-white transition-all duration-200">
|
||||
{{ $content['portal_login'] }}
|
||||
</a>
|
||||
<button wire:click="toggleMobileMenu"
|
||||
class="md:hidden w-5 h-5 text-muted-foreground hover:text-foreground transition-colors">
|
||||
@if ($this->isMobileMenuOpen)
|
||||
<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="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
@else
|
||||
<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="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
@endif
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Mobile Menu --}}
|
||||
@if ($this->isMobileMenuOpen)
|
||||
<div class="md:hidden border-t border-border bg-background/95 backdrop-blur-sm">
|
||||
<nav class="px-4 py-6 space-y-4">
|
||||
@foreach($content['navigation'] as $navItem)
|
||||
<a href="{{ $navItem['url'] }}"
|
||||
class="block text-sm font-medium transition-colors py-2 px-3 rounded-md
|
||||
@if($this->isActiveRoute($navItem['url']))
|
||||
text-secondary bg-secondary/10 border-l-2 border-secondary
|
||||
@else
|
||||
text-foreground hover:text-secondary hover:bg-muted/50
|
||||
@endif"
|
||||
wire:click="closeMobileMenu">
|
||||
{{ $navItem['label'] }}
|
||||
</a>
|
||||
@endforeach
|
||||
<div class="pt-4 border-t border-border">
|
||||
<a href="{{ config('domains.domain_portal_url') }}"
|
||||
class="block w-full btn-secondary-accent text-center">
|
||||
{{ $content['portal_login'] }}
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</header>
|
||||
79
resources/views/livewire/web/components/ui/top-bar.blade.php
Normal file
79
resources/views/livewire/web/components/ui/top-bar.blade.php
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<div class="topbar-normal" id="topbar">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-10 text-xs">
|
||||
<!-- Left side - Social icons and Theme Demo -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- Social Media Icons -->
|
||||
|
||||
<span class="text-muted-foreground">
|
||||
<a href="/theme-demo" class="text-foreground hover-text-secondary transition-colors">Theme Demo</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Right side - Language switcher -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="flex space-x-3">
|
||||
<a href="#" class="text-muted-foreground hover-text-secondary transition-colors" aria-label="Facebook">
|
||||
<svg class="w-4 h-4" 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>
|
||||
</a>
|
||||
<a href="#" class="text-muted-foreground hover-text-secondary transition-colors" aria-label="Instagram">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 6.62 5.367 11.987 11.988 11.987s11.987-5.367 11.987-11.987C24.004 5.367 18.637.001 12.017.001zM8.449 16.988c-1.297 0-2.448-.49-3.323-1.297C4.198 14.895 3.708 13.744 3.708 12.447s.49-2.448 1.418-3.323c.875-.807 2.026-1.297 3.323-1.297s2.448.49 3.323 1.297c.928.875 1.418 2.026 1.418 3.323s-.49 2.448-1.418 3.244c-.875.807-2.026 1.297-3.323 1.297zm7.83-9.281c-.49 0-.928-.175-1.297-.49-.368-.315-.49-.753-.49-1.243s.122-.928.49-1.243c.369-.315.807-.49 1.297-.49s.928.175 1.297.49c.368.315.49.753.49 1.243s-.122.928-.49 1.243c-.369.315-.807.49-1.297.49z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-muted-foreground hover-text-secondary transition-colors" aria-label="LinkedIn">
|
||||
<svg class="w-4 h-4" 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>
|
||||
</a>
|
||||
</div>
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button
|
||||
@click="open = !open"
|
||||
class="flex items-center space-x-1 text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<span class="text-sm font-medium flex items-center gap-1">
|
||||
<span>{{ $localeFlags[$currentLocale] ?? '🏳️' }}</span>
|
||||
<span class="text-xs">{{ $availableLocales[$currentLocale] ?? 'Deutsch' }}</span>
|
||||
</span>
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<div
|
||||
x-show="open"
|
||||
@click.away="open = false"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="transform opacity-0 scale-95"
|
||||
x-transition:enter-end="transform opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="absolute right-0 mt-2 w-32 bg-card border border-border rounded-md shadow-lg z-50"
|
||||
style="display: none;"
|
||||
>
|
||||
<div class="py-1">
|
||||
@foreach($availableLocales as $locale => $name)
|
||||
<button
|
||||
wire:click="switchLanguage('{{ $locale }}')"
|
||||
@click="open = false"
|
||||
class="block w-full text-left px-4 py-2 text-sm transition-colors duration-200 {{ $currentLocale === $locale ? 'bg-secondary text-secondary-foreground' : 'text-card-foreground hover:bg-gray-200 hover:text-gray-900' }}"
|
||||
style="cursor: pointer;"
|
||||
>
|
||||
<span class="inline-flex items-center gap-2">
|
||||
<span>{{ $localeFlags[$locale] ?? '🏳️' }}</span>
|
||||
<span>{{ $name }}</span>
|
||||
</span>
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue