363 lines
23 KiB
PHP
363 lines
23 KiB
PHP
@extends('web.layouts.web-master')
|
||
|
||
@section('title', ($project['title'] ?? 'Exposé') . ' - B2in Immobilien')
|
||
@section('meta_description', ($project['investment_case']['text'] ?? 'Exklusives Off-Market-Immobilienprojekt in Dubai – jetzt Exposé ansehen.'))
|
||
|
||
@section('content')
|
||
<div class="bg-background">
|
||
<livewire:web.components.ui.header />
|
||
|
||
<main class="variante-glass-flow">
|
||
|
||
{{-- 1. Hero --}}
|
||
<section class="relative h-[50vh] min-h-[400px] overflow-hidden">
|
||
<x-web-picture
|
||
src="{{ theme_image_url($project['image'] ?? '') }}"
|
||
alt="{{ $project['title'] ?? '' }}"
|
||
class="absolute inset-0 w-full h-full object-cover"
|
||
loading="" />
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
|
||
<div class="absolute bottom-0 left-0 right-0 p-8 lg:p-12">
|
||
<div class="container-padding">
|
||
@if (isset($project['status']))
|
||
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-secondary text-white mb-4">
|
||
{{ $project['status'] }}
|
||
@if (isset($project['launch_date']))
|
||
<span class="opacity-80">({{ $project['launch_date'] }})</span>
|
||
@endif
|
||
</span>
|
||
@endif
|
||
<h1 class="text-3xl lg:text-4xl font-bold text-white">{{ $project['title'] ?? '' }}</h1>
|
||
@if (isset($project['location']))
|
||
<p class="text-lg text-white/80 mt-2">{{ $project['location'] }}</p>
|
||
@endif
|
||
@if (isset($project['price_from']))
|
||
<p class="text-xl font-semibold text-white mt-3">{{ $project['price_from'] }}</p>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- 2. Quick Facts --}}
|
||
{{-- Editierbar über CMS je Projekt --}}
|
||
|
||
@if (!empty($project['quick_facts']))
|
||
<section class=" bg-accent">
|
||
<div class="container-padding">
|
||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
|
||
@foreach ($project['quick_facts'] as $fact)
|
||
<div class="text-center p-4">
|
||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-secondary/10 text-secondary mb-3">
|
||
@if (isset($fact['icon']))
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||
@switch($fact['icon'])
|
||
@case('home-modern')
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205l3 1m1.5.5l-1.5-.5M6.75 7.364V3h-3v18m3-13.636l10.5-3.819" />
|
||
@break
|
||
@case('squares-2x2')
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
|
||
@break
|
||
@case('building-office-2')
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" />
|
||
@break
|
||
@case('user')
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
|
||
@break
|
||
@endswitch
|
||
</svg>
|
||
@endif
|
||
</div>
|
||
<p class="text-xs text-muted-foreground uppercase tracking-wider mb-1">{{ $fact['label'] ?? '' }}</p>
|
||
<p class="text-sm font-semibold text-foreground">{{ $fact['value'] ?? '' }}</p>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
|
||
{{-- 3. Investment Case --}}
|
||
|
||
@if (!empty($project['investment_case']))
|
||
<section class="section-padding">
|
||
<div class="container-padding">
|
||
<div class="max-w-3xl mx-auto">
|
||
<h2 class="text-section-title text-left">{{ $project['investment_case']['title'] ?? '' }}</h2>
|
||
<p class="text-large text-muted-foreground mt-6 leading-relaxed">
|
||
{{ $project['investment_case']['text'] ?? '' }}
|
||
</p>
|
||
|
||
@if (!empty($project['investment_case']['views']))
|
||
<div class="mt-8">
|
||
<p class="text-sm font-semibold text-foreground mb-3">Verfügbare Views:</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
@foreach ($project['investment_case']['views'] as $view)
|
||
<span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-secondary/10 text-secondary">
|
||
{{ $view }}
|
||
</span>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
@if (!empty($project['highlights']))
|
||
<ul class="mt-8 space-y-3">
|
||
@foreach ($project['highlights'] as $highlight)
|
||
<li class="flex items-start gap-3 text-muted-foreground">
|
||
<svg class="w-5 h-5 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
|
||
</div>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
|
||
{{-- 4. Bildergalerie --}}
|
||
|
||
@if (!empty($project['gallery']))
|
||
<div x-data="{ lightbox: false, current: 0 }">
|
||
<section class="section-padding bg-accent">
|
||
<div class="container-padding">
|
||
<h2 class="text-section-title text-center mb-8">Galerie</h2>
|
||
|
||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4">
|
||
@foreach ($project['gallery'] as $index => $image)
|
||
<div class="relative aspect-[4/3] rounded-xl overflow-hidden cursor-pointer group"
|
||
@click="lightbox = true; current = {{ $index }}">
|
||
<x-web-picture
|
||
src="{{ theme_image_url($image) }}"
|
||
alt="{{ $project['title'] ?? '' }} – Bild {{ $index + 1 }}"
|
||
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" />
|
||
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300"></div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- Lightbox (via x-teleport ins body, umgeht alle Eltern-Constraints) --}}
|
||
<template x-teleport="body">
|
||
<div x-show="lightbox" x-cloak
|
||
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"
|
||
class="fixed inset-0 z-50 isolate bg-black/90"
|
||
@keydown.escape.window="lightbox = false"
|
||
@keydown.arrow-right.window="current = (current + 1) % {{ count($project['gallery']) }}"
|
||
@keydown.arrow-left.window="current = (current - 1 + {{ count($project['gallery']) }}) % {{ count($project['gallery']) }}">
|
||
|
||
{{-- Bildbereich (eigene Ebene, dahinter) --}}
|
||
<div class="absolute inset-0 flex items-center justify-center p-4 z-0">
|
||
@foreach ($project['gallery'] as $index => $image)
|
||
<x-web-picture x-show="current === {{ $index }}"
|
||
x-transition:enter="transition ease-out duration-200"
|
||
x-transition:enter-start="opacity-0 scale-95"
|
||
x-transition:enter-end="opacity-100 scale-100"
|
||
src="{{ theme_image_url($image) }}"
|
||
alt="{{ $project['title'] ?? '' }} – Bild {{ $index + 1 }}"
|
||
class="max-h-[85vh] max-w-[90vw] object-contain rounded-lg"
|
||
loading="" />
|
||
@endforeach
|
||
</div>
|
||
|
||
{{-- Close Button (oben rechts mit Abstand) --}}
|
||
<button @click="lightbox = false"
|
||
class="cursor-pointer absolute top-6 left-auto right-6 z-10 flex items-center justify-center w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 text-white/90 hover:text-white border border-white/20 transition-all">
|
||
<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" />
|
||
</svg>
|
||
</button>
|
||
|
||
{{-- Previous (links, vertikal mittig) --}}
|
||
<button @click="current = (current - 1 + {{ count($project['gallery']) }}) % {{ count($project['gallery']) }}"
|
||
class="cursor-pointer absolute left-6 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-14 h-14 rounded-full bg-white/10 hover:bg-white/20 text-white/90 hover:text-white border border-white/20 transition-all">
|
||
<svg class="w-7 h-7" 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>
|
||
</button>
|
||
|
||
{{-- Next (rechts, vertikal mittig) --}}
|
||
<button @click="current = (current + 1) % {{ count($project['gallery']) }}"
|
||
class="cursor-pointer absolute left-auto right-6 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center w-14 h-14 rounded-full bg-white/10 hover:bg-white/20 text-white/90 hover:text-white border border-white/20 transition-all">
|
||
<svg class="w-7 h-7" 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" />
|
||
</svg>
|
||
</button>
|
||
|
||
{{-- Counter --}}
|
||
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 text-white/60 text-sm">
|
||
<span x-text="current + 1"></span> / {{ count($project['gallery']) }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- 5. Trust-Block: Investorenschutz (pro Projekt im CMS, siehe investor_trust) --}}
|
||
@php
|
||
$trust = $project['investor_trust'] ?? [];
|
||
$trustColumns = $trust['columns'] ?? [];
|
||
@endphp
|
||
@if (! empty($trust['title']) || count($trustColumns) > 0)
|
||
<section class="section-padding">
|
||
<div class="container-padding">
|
||
<div class="max-w-4xl mx-auto">
|
||
@if (! empty($trust['title']) || ! empty($trust['intro']))
|
||
<div class="text-center mb-10">
|
||
@if (! empty($trust['title']))
|
||
<h2 class="text-section-title">{{ $trust['title'] }}</h2>
|
||
@endif
|
||
@if (! empty($trust['intro']))
|
||
<p class="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
|
||
{{ $trust['intro'] }}
|
||
</p>
|
||
@endif
|
||
</div>
|
||
@endif
|
||
|
||
@if (count($trustColumns) > 0)
|
||
<div class="grid md:grid-cols-3 gap-6 mb-10">
|
||
@foreach ($trustColumns as $col)
|
||
<div class="card-elevated rounded-2xl p-6 text-center">
|
||
<div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-secondary/10 text-secondary mb-5">
|
||
@if (! empty($col['icon']))
|
||
@svg($col['icon'], 'w-7 h-7')
|
||
@endif
|
||
</div>
|
||
<h3 class="text-base font-semibold text-foreground mb-3">{{ $col['title'] ?? '' }}</h3>
|
||
<p class="text-sm text-muted-foreground leading-relaxed">
|
||
{{ $col['text'] ?? '' }}
|
||
</p>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
@endif
|
||
|
||
@if (! empty($trust['cta_url']) && ! empty($trust['cta_label']))
|
||
<div class="text-center">
|
||
<a href="{{ $trust['cta_url'] }}" class="btn-secondary-accent transition-colors duration-200">
|
||
<span class="flex items-center justify-center gap-2">
|
||
@svg('heroicon-o-book-open', 'w-4 h-4')
|
||
<span>{{ $trust['cta_label'] }}</span>
|
||
<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 8l4 4m0 0l-4 4m4-4H3" />
|
||
</svg>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
|
||
{{-- 6. Location & Map --}}
|
||
@if (!empty($project['location_info']))
|
||
<section class="section-padding bg-accent">
|
||
<div class="container-padding">
|
||
<div class="max-w-3xl mx-auto">
|
||
<h2 class="text-section-title text-left">{{ $project['location_info']['title'] ?? '' }}</h2>
|
||
|
||
@if (!empty($project['location_info']['points']))
|
||
<ul class="mt-8 space-y-4">
|
||
@foreach ($project['location_info']['points'] as $point)
|
||
<li class="flex items-start gap-3 text-muted-foreground">
|
||
<svg class="w-5 h-5 text-secondary mt-0.5 shrink-0 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
|
||
</svg>
|
||
{{ $point }}
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
@endif
|
||
|
||
@if (isset($project['location_info']['map_url']))
|
||
<div class="mt-8 text-center">
|
||
<a href="{{ $project['location_info']['map_url'] }}"
|
||
target="_blank" rel="noopener"
|
||
class="inline-flex items-center gap-2 btn-secondary-accent">
|
||
<svg class="w-4 h-4 inline-block mr-2 mb-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
||
</svg>
|
||
Auf Google Maps ansehen
|
||
</a>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
|
||
{{-- Möbel-Vorteil / Synergie (pro Projekt: furniture_benefit; Fallback: Theme-Config) --}}
|
||
@php
|
||
$moebelVorteil = $project['furniture_benefit'] ?? [];
|
||
if (empty($moebelVorteil) || (empty($moebelVorteil['title'] ?? null) && empty($moebelVorteil['text'] ?? null))) {
|
||
$moebelVorteil = cms_theme_section('immobilien_moebel_vorteil');
|
||
}
|
||
@endphp
|
||
@if (! empty($moebelVorteil))
|
||
<section class="section-padding bg-secondary/5">
|
||
<div class="container-padding">
|
||
<div class="max-w-3xl mx-auto text-center">
|
||
<h2 class="text-section-title">{!! $moebelVorteil['title'] ?? '' !!}</h2>
|
||
<p class="text-large text-muted-foreground mt-4">
|
||
{{ $moebelVorteil['text'] ?? '' }}
|
||
</p>
|
||
@if (! empty($moebelVorteil['button_text'] ?? null))
|
||
<div class="mt-8">
|
||
<a href="{{ $moebelVorteil['button_link'] ?? '/partner' }}"
|
||
class="btn-secondary-accent">
|
||
{{ $moebelVorteil['button_text'] }}
|
||
</a>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
|
||
{{-- 7. Lead-Generierung / Kontakt --}}
|
||
@if (!empty($project['contact']))
|
||
<section class="section-padding bg-accent">
|
||
<div class="container-padding">
|
||
<div class="max-w-2xl mx-auto text-center">
|
||
<h2 class="text-section-title">{{ $project['contact']['title'] ?? '' }}</h2>
|
||
@if (isset($project['contact']['subtitle']))
|
||
<p class="text-large text-muted-foreground mt-3">{{ $project['contact']['subtitle'] }}</p>
|
||
@endif
|
||
|
||
<div class="mt-8 card-elevated rounded-2xl p-8 text-left">
|
||
<livewire:web.components.sections.immobilien-contact-form
|
||
:projectSlug="$project['slug'] ?? ''"
|
||
:projectTitle="$project['title'] ?? ''"
|
||
:interestOptions="$project['contact']['options'] ?? []"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
@endif
|
||
|
||
</main>
|
||
|
||
<livewire:web.components.ui.footer />
|
||
</div>
|
||
@endsection
|
||
|
||
@push('styles')
|
||
<style>
|
||
[x-cloak] {
|
||
display: none !important;
|
||
}
|
||
</style>
|
||
@endpush
|
||
|