314 lines
18 KiB
PHP
314 lines
18 KiB
PHP
@extends('web.layouts.web-master')
|
||
|
||
@section('title', 'Immobilien Dubai - B2in')
|
||
@section('meta_description', 'Exklusive Off-Market-Immobilien in Dubai. Persönliche Beratung, steuerfreie Renditen & Turnkey-Einrichtung aus einer Hand.')
|
||
|
||
@section('content')
|
||
<div class="bg-background">
|
||
<livewire:web.components.ui.header />
|
||
|
||
<main class="variante-glass-flow">
|
||
@php
|
||
$heroV2 = cms_theme_section('immobilien_hero_v2');
|
||
$warumDubai = cms_theme_section('immobilien_warum_dubai');
|
||
$kaufprozess = cms_theme_section('immobilien_kaufprozess');
|
||
$bruecke = cms_theme_section('immobilien_bruecke');
|
||
$mindset = cms_theme_section('immobilien_mindset');
|
||
$projects = cms_theme_section('immobilien_projects');
|
||
$moebelVorteil = cms_theme_section('immobilien_moebel_vorteil');
|
||
@endphp
|
||
|
||
{{-- Sektion 1: Hero --}}
|
||
@if (!empty($heroV2))
|
||
<section class="relative min-h-[70vh] flex items-center overflow-hidden">
|
||
<x-web-picture
|
||
src="{{ theme_image_url($heroV2['image'] ?? '') }}"
|
||
alt="{{ $heroV2['image_alt'] ?? 'Immobilien Investment Dubai' }}"
|
||
class="absolute inset-0 w-full h-full object-cover"
|
||
loading="" />
|
||
<div class="absolute inset-0 bg-gradient-to-r from-black/80 via-black/60 to-black/30"></div>
|
||
<div class="relative z-10 container-padding py-24 lg:py-32">
|
||
<div class="max-w-3xl slide-right delay-300">
|
||
<h1 class="text-4xl lg:text-5xl xl:text-6xl font-bold text-white leading-tight">
|
||
{!! $heroV2['title'] !!}
|
||
</h1>
|
||
<p class="text-lg lg:text-xl text-white/80 mt-6 max-w-2xl leading-relaxed">
|
||
{{ $heroV2['subtitle'] ?? '' }}
|
||
</p>
|
||
@if (isset($heroV2['cta_text']))
|
||
<div class="mt-10">
|
||
<a href="{{ $heroV2['cta_link'] ?? '#projekte' }}"
|
||
class="btn-primary-accent px-8 py-4 text-lg">
|
||
{{ $heroV2['cta_text'] }}
|
||
</a>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
|
||
<livewire:web.components.sections.founder-bar />
|
||
|
||
{{-- Sektion 2: Warum Dubai? --}}
|
||
@if (!empty($warumDubai))
|
||
<section class="section-padding">
|
||
<div class="container-padding">
|
||
<div class="max-w-3xl mx-auto text-center mb-12 slide-up delay-300">
|
||
<h2 class="text-section-title">{!! $warumDubai['title'] !!}</h2>
|
||
@if (isset($warumDubai['intro']))
|
||
<p class="text-large text-muted-foreground mt-4 leading-relaxed">
|
||
{{ $warumDubai['intro'] }}
|
||
</p>
|
||
@endif
|
||
</div>
|
||
|
||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
||
@foreach ($warumDubai['facts'] ?? [] as $index => $fact)
|
||
<div class="card-elevated rounded-2xl p-6 lg:p-8 text-center slide-up delay-{{ 300 + $index * 100 }}">
|
||
<div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-secondary/10 text-secondary mb-5">
|
||
@svg('heroicon-o-' . ($fact['icon'] ?? 'check'), 'w-7 h-7')
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-foreground mb-2">{{ $fact['title'] ?? '' }}</h3>
|
||
<p class="text-sm text-muted-foreground leading-relaxed">{{ $fact['description'] ?? '' }}</p>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
|
||
<livewire:web.components.sections.image-break section="immobilien_image_break" />
|
||
|
||
{{-- Sektion 3: Kaufprozess --}}
|
||
@if (!empty($kaufprozess))
|
||
<section class="section-padding bg-accent">
|
||
<div class="container-padding">
|
||
<div class="max-w-3xl mx-auto text-center mb-12 slide-up delay-300">
|
||
<h2 class="text-section-title">{!! $kaufprozess['title'] !!}</h2>
|
||
@if (isset($kaufprozess['intro']))
|
||
<p class="text-large text-muted-foreground mt-4 leading-relaxed">
|
||
{{ $kaufprozess['intro'] }}
|
||
</p>
|
||
@endif
|
||
</div>
|
||
|
||
<div class="max-w-4xl mx-auto">
|
||
<div class="grid md:grid-cols-2 gap-6">
|
||
@foreach ($kaufprozess['steps'] ?? [] as $index => $step)
|
||
<div class="relative card-elevated rounded-2xl p-6 lg:p-8 slide-up delay-{{ 300 + $index * 100 }}">
|
||
<div class="flex gap-5 items-start">
|
||
<div class="shrink-0 w-12 h-12 rounded-full bg-secondary text-white flex items-center justify-center text-lg font-bold">
|
||
{{ $step['number'] ?? '' }}
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-semibold text-foreground mb-2">{{ $step['title'] ?? '' }}</h3>
|
||
<p class="text-sm text-muted-foreground leading-relaxed">{{ $step['description'] ?? '' }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
|
||
{{-- Sektion 4: Die Brücke – Marcels Pitch --}}
|
||
@if (!empty($bruecke))
|
||
<section class="section-padding">
|
||
<div class="container-padding">
|
||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||
<div class="relative lg:order-1">
|
||
<div class="card-elevated rounded-3xl overflow-hidden slide-left delay-400">
|
||
<x-web-picture
|
||
src="{{ theme_image_url($bruecke['image'] ?? '') }}"
|
||
alt="{{ $bruecke['image_alt'] ?? 'Marcel Scheibe – Ihre Brücke nach Dubai' }}"
|
||
class="w-full h-[500px] object-cover" />
|
||
@if (isset($bruecke['image_caption']))
|
||
<div class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50 slide-left delay-500">
|
||
{{ $bruecke['image_caption'] }}
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spacing-section lg:order-2">
|
||
<div class="spacing-content slide-right delay-300">
|
||
<h2 class="text-section-title">{!! $bruecke['title'] !!}</h2>
|
||
<div class="spacing-small text-large text-muted-foreground leading-relaxed">
|
||
@foreach ($bruecke['paragraphs'] ?? [] as $paragraph)
|
||
<p>{!! $paragraph !!}</p>
|
||
@endforeach
|
||
</div>
|
||
|
||
@if (isset($bruecke['advantage_title']))
|
||
<div class="mt-8 p-6 rounded-2xl bg-secondary/5 border border-secondary/20">
|
||
<h3 class="text-lg font-semibold text-foreground mb-2">{{ $bruecke['advantage_title'] }}</h3>
|
||
<p class="text-muted-foreground leading-relaxed">{{ $bruecke['advantage_text'] ?? '' }}</p>
|
||
</div>
|
||
@endif
|
||
|
||
@if (isset($bruecke['cta_text']))
|
||
<div class="mt-8">
|
||
<a href="{{ $bruecke['cta_link'] ?? '/contact' }}"
|
||
class="btn-primary-accent px-6 py-3">
|
||
{{ $bruecke['cta_text'] }}
|
||
</a>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
|
||
{{-- Aktuelle Projekte --}}
|
||
@if (!empty($projects))
|
||
<section id="projekte" class="section-padding bg-accent">
|
||
<div class="container-padding">
|
||
<div class="text-center mb-12 slide-up delay-300">
|
||
<h2 class="text-section-title">{!! $projects['title'] ?? '' !!}</h2>
|
||
@if (isset($projects['subtitle']))
|
||
<p class="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
|
||
{{ $projects['subtitle'] }}
|
||
</p>
|
||
@endif
|
||
</div>
|
||
|
||
@php
|
||
$projectCount = count($projects['projects'] ?? []);
|
||
@endphp
|
||
<div class="grid md:grid-cols-1 lg:grid-cols-2 gap-8 slide-up delay-400">
|
||
@foreach ($projects['projects'] ?? [] as $project)
|
||
<div class="card-elevated rounded-2xl overflow-hidden {{ $projectCount === 1 ? 'lg:col-span-2 lg:max-w-[calc((100%-2rem)/2)] lg:mx-auto' : '' }}">
|
||
@if (isset($project['image']))
|
||
<div class="relative h-56 overflow-hidden">
|
||
<x-web-picture
|
||
src="{{ theme_image_url($project['image']) }}"
|
||
alt="{{ $project['title'] }}"
|
||
class="w-full h-full object-cover" />
|
||
@if (isset($project['status']))
|
||
<div class="absolute top-4 left-4">
|
||
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-secondary text-white">
|
||
{{ $project['status'] }}
|
||
@if (isset($project['launch_date']))
|
||
<span class="opacity-80">({{ $project['launch_date'] }})</span>
|
||
@endif
|
||
</span>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
@endif
|
||
|
||
<div class="p-6 lg:p-8">
|
||
<div class="mb-4">
|
||
<h3 class="text-xl font-semibold text-foreground">{{ $project['title'] }}</h3>
|
||
@if (isset($project['location']))
|
||
<p class="text-sm text-muted-foreground mt-1">{{ $project['location'] }}</p>
|
||
@endif
|
||
</div>
|
||
|
||
@if (isset($project['price_from']))
|
||
<p class="text-lg font-medium text-secondary mb-4">{{ $project['price_from'] }}</p>
|
||
@endif
|
||
|
||
@if (isset($project['highlights']))
|
||
<ul class="space-y-2 mb-6">
|
||
@foreach ($project['highlights'] as $highlight)
|
||
<li class="flex items-start gap-2 text-sm text-muted-foreground">
|
||
<svg class="w-4 h-4 text-secondary mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
{{ $highlight }}
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
@endif
|
||
|
||
<a href="{{ isset($project['slug']) ? route('immobilien.show', $project['slug']) : ($projects['cta_link'] ?? '/contact') }}"
|
||
class="inline-flex items-center gap-2 whitespace-nowrap btn-primary-accent">
|
||
<span>{{ isset($project['slug']) ? 'Exposé ansehen' : ($projects['cta_text'] ?? 'Anfragen') }}</span>
|
||
<svg class="w-4 h-4 shrink-0 inline-block ml-2 mb-0.5" 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>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
|
||
{{-- Sektion 5: Mindset-Check --}}
|
||
@if (!empty($mindset))
|
||
<section class="section-padding">
|
||
<div class="container-padding">
|
||
<div class="max-w-4xl mx-auto">
|
||
<div class="rounded-2xl border-2 border-secondary/20 bg-secondary/5 p-8 lg:p-12 slide-up delay-300">
|
||
<h2 class="text-section-title text-center">{!! $mindset['title'] !!}</h2>
|
||
|
||
<div class="mt-8 space-y-6 text-large leading-relaxed">
|
||
@if (isset($mindset['text_positive']))
|
||
<p class="text-foreground">{!! $mindset['text_positive'] !!}</p>
|
||
@endif
|
||
@if (isset($mindset['text_negative']))
|
||
<p class="text-muted-foreground">{{ $mindset['text_negative'] }}</p>
|
||
@endif
|
||
@if (isset($mindset['closing']))
|
||
<p class="text-foreground pt-4 border-t border-secondary/20">{!! $mindset['closing'] !!}</p>
|
||
@endif
|
||
</div>
|
||
|
||
@if (isset($mindset['cta_text']))
|
||
<div class="mt-8 text-center">
|
||
<a href="{{ $mindset['cta_link'] ?? '/contact' }}"
|
||
class="btn-primary-accent px-8 py-4 text-lg">
|
||
{{ $mindset['cta_text'] }}
|
||
</a>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
|
||
{{-- Möbel-Vorteil Banner (Teaser) --}}
|
||
@if (!empty($moebelVorteil))
|
||
<section class="section-padding bg-accent">
|
||
<div class="container-padding">
|
||
<div class="max-w-3xl mx-auto text-center slide-up delay-300">
|
||
<h2 class="text-section-title">{!! $moebelVorteil['title'] ?? '' !!}</h2>
|
||
<p class="text-large text-muted-foreground mt-4">
|
||
{{ $moebelVorteil['text'] ?? '' }}
|
||
</p>
|
||
@if (isset($moebelVorteil['button_text']))
|
||
<div class="mt-8">
|
||
<a href="{{ $moebelVorteil['button_link'] ?? '/netzwerk' }}"
|
||
class="btn-secondary-accent">
|
||
{{ $moebelVorteil['button_text'] }}
|
||
</a>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
|
||
<livewire:web.components.sections.c-t-a-section />
|
||
</main>
|
||
|
||
<livewire:web.components.ui.footer />
|
||
</div>
|
||
@endsection
|
||
|
||
@push('styles')
|
||
<style>
|
||
[x-cloak] {
|
||
display: none !important;
|
||
}
|
||
</style>
|
||
@endpush
|