248 lines
15 KiB
PHP
248 lines
15 KiB
PHP
@extends('web.layouts.web-master')
|
|
|
|
@php
|
|
$ui = data_get($content, 'ui', []);
|
|
$showUi = data_get($ui, 'show_page', []);
|
|
$statusClasses = [
|
|
'ready' => 'bg-emerald-500',
|
|
'construction' => 'bg-sky-500',
|
|
'offplan' => 'bg-amber-400 text-zinc-950',
|
|
];
|
|
$confidenceLabels = data_get($ui, 'confidence_labels', []);
|
|
$defaultProjectTitle = data_get($showUi, 'default_title', 'Projekt');
|
|
$dev = $dev ?? false;
|
|
$devQuery = $devQuery ?? false;
|
|
$overviewRouteName = $overviewRouteName ?? ($dev ? 'dev.immobilien-azizi' : 'immobilien');
|
|
$overviewUrl = route($overviewRouteName, $devQuery ? ['dev' => 1] : []);
|
|
$slug = $project['slug'] ?? '';
|
|
$fallbackImage = theme_image_url($project['image'] ?? 'b2in/hero-immobilien.jpg');
|
|
$basePath = storage_path('app/public/immobile/dubai/' . $slug);
|
|
$imagePaths = collect([
|
|
glob($basePath . '/image/*.{webp,jpg,jpeg,png}', GLOB_BRACE) ?: [],
|
|
glob($basePath . '/official-website/*.{webp,jpg,jpeg,png}', GLOB_BRACE) ?: [],
|
|
])
|
|
->flatten()
|
|
->all();
|
|
|
|
sort($imagePaths, SORT_NATURAL);
|
|
|
|
$galleryImages = collect($imagePaths)
|
|
->map(fn(string $path): string => theme_image_url(str_replace(storage_path('app/public') . '/', '', $path)))
|
|
->values();
|
|
$heroImage = $galleryImages->first() ?? $fallbackImage;
|
|
@endphp
|
|
|
|
@section('title', ($project['title'] ?? $defaultProjectTitle) . ' - B2in Dubai Preview')
|
|
@section('meta_description', $project['short'] ?? data_get($showUi, 'default_meta_description', ''))
|
|
|
|
@section('content')
|
|
<div class="bg-background">
|
|
<livewire:web.components.ui.header />
|
|
|
|
<main class="variante-glass-flow">
|
|
<section class="relative h-[62vh] min-h-[460px] overflow-hidden">
|
|
<x-web-picture src="{{ $heroImage }}" alt="{{ $project['title'] ?? '' }}"
|
|
class="absolute inset-0 h-full w-full object-cover" loading="" />
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/35 to-black/10"></div>
|
|
<div class="absolute inset-x-0 bottom-0 p-8 lg:p-12">
|
|
<div class="container-padding">
|
|
<a href="{{ $overviewUrl }}"
|
|
class="mb-6 inline-flex items-center gap-2 text-sm font-semibold text-white/75 hover:text-white">
|
|
@svg('heroicon-o-arrow-left', 'h-4 w-4')
|
|
{{ data_get($showUi, 'back_to_overview') }}
|
|
</a>
|
|
<div class="max-w-4xl">
|
|
<span
|
|
class="inline-flex rounded-full px-3 py-1 text-xs font-semibold text-white {{ $statusClasses[$project['status_group'] ?? 'ready'] ?? 'bg-secondary' }}">
|
|
{{ $project['status'] ?? '' }}
|
|
</span>
|
|
<h1 class="mt-4 text-4xl font-bold text-white lg:text-6xl">{{ $project['title'] ?? '' }}</h1>
|
|
<p class="mt-3 text-xl text-white/80">{{ $project['location'] ?? '' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-accent py-8">
|
|
<div class="container-padding">
|
|
<div class="grid gap-5 md:grid-cols-2 lg:grid-cols-4">
|
|
<div class="card-elevated rounded-2xl p-5">
|
|
<p class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
{{ data_get($showUi, 'stat_price') }}</p>
|
|
<p class="mt-2 font-semibold text-secondary">
|
|
{{ $project['price_from'] ?? data_get($showUi, 'stat_price_fallback') }}</p>
|
|
</div>
|
|
<div class="card-elevated rounded-2xl p-5">
|
|
<p class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
{{ data_get($showUi, 'stat_handover') }}</p>
|
|
<p class="mt-2 font-semibold text-foreground">
|
|
{{ $project['handover'] ?? data_get($showUi, 'stat_handover_fallback') }}</p>
|
|
</div>
|
|
<div class="card-elevated rounded-2xl p-5">
|
|
<p class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
{{ data_get($showUi, 'stat_units') }}</p>
|
|
<p class="mt-2 font-semibold text-foreground">
|
|
{{ $project['units'] ?? data_get($showUi, 'stat_units_fallback') }}</p>
|
|
</div>
|
|
<div class="card-elevated rounded-2xl p-5">
|
|
<p class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
{{ data_get($showUi, 'stat_data_confidence') }}</p>
|
|
<p class="mt-2 font-semibold text-foreground">
|
|
{{ $confidenceLabels[$project['data_confidence'] ?? 'yellow'] ?? data_get($showUi, 'stat_data_confidence_fallback') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-padding">
|
|
<div class="container-padding">
|
|
<div class="grid gap-12 lg:grid-cols-[0.72fr_0.28fr]">
|
|
<article>
|
|
<p class="mb-4 text-sm font-semibold uppercase tracking-[0.22em] text-secondary">
|
|
{{ data_get($showUi, 'section_investment') }}
|
|
</p>
|
|
<h2 class="text-section-title">{{ $project['short'] ?? '' }}</h2>
|
|
<p class="mt-6 text-large leading-relaxed text-muted-foreground">
|
|
{{ $project['marcel_take'] ?? '' }}
|
|
</p>
|
|
|
|
@if (!empty($project['official_description_de']))
|
|
<div class="mt-8 border-t border-border/70 pt-6">
|
|
<p
|
|
class="mb-2 text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground/80">
|
|
{{ data_get($showUi, 'official_description_label', data_get($ui, 'modal.official_description_label')) }}
|
|
</p>
|
|
<p class="leading-relaxed text-muted-foreground">
|
|
{{ $project['official_description_de'] }}
|
|
</p>
|
|
</div>
|
|
@endif
|
|
|
|
@if ($galleryImages->isNotEmpty())
|
|
<div class="mt-10 space-y-4">
|
|
<div class="flex items-end justify-between gap-4">
|
|
<h3 class="text-2xl font-semibold text-foreground">
|
|
{{ data_get($showUi, 'gallery_heading', data_get($ui, 'modal.gallery_heading')) }}
|
|
</h3>
|
|
<p class="text-sm text-muted-foreground">
|
|
{{ $galleryImages->count() }}
|
|
{{ data_get($ui, 'modal.gallery_count_word', 'Bilder') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
@foreach ($galleryImages->take(6) as $index => $image)
|
|
<a href="{{ $image }}" target="_blank" rel="noopener"
|
|
class="group overflow-hidden rounded-2xl bg-accent focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2 focus:ring-offset-background">
|
|
<img src="{{ $image }}"
|
|
alt="{{ ($project['title'] ?? '') . ' ' . data_get($ui, 'modal.gallery_image_word', 'Galerie Bild') . ' ' . ($index + 1) }}"
|
|
class="aspect-[16/9] w-full object-cover transition duration-500 group-hover:scale-105"
|
|
loading="lazy">
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="mt-10 rounded-2xl border border-secondary/20 bg-secondary/5 p-6">
|
|
<h3 class="text-lg font-semibold text-foreground">{{ data_get($showUi, 'for_whom') }}</h3>
|
|
<p class="mt-3 leading-relaxed text-muted-foreground">{{ $project['buyer_profile'] ?? '' }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-10">
|
|
<h3 class="text-2xl font-semibold text-foreground">{{ data_get($showUi, 'hard_facts') }}
|
|
</h3>
|
|
<ul class="mt-5 grid gap-3">
|
|
@foreach ($project['highlights'] ?? [] as $highlight)
|
|
<li class="flex gap-3 rounded-xl bg-accent p-4 text-muted-foreground">
|
|
@svg('heroicon-o-check-circle', 'mt-0.5 h-5 w-5 shrink-0 text-secondary')
|
|
<span>{{ $highlight }}</span>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</article>
|
|
|
|
<aside class="space-y-5">
|
|
@if ($dev)
|
|
<div class="card-elevated rounded-2xl p-6">
|
|
<h3 class="font-semibold text-foreground">{{ data_get($showUi, 'source_heading') }}
|
|
</h3>
|
|
<p class="mt-2 text-sm text-muted-foreground">
|
|
{{ data_get($showUi, 'source_text') }}
|
|
</p>
|
|
@if (!empty($project['official_url']))
|
|
<a href="{{ $project['official_url'] }}" target="_blank" rel="noopener"
|
|
class="mt-5 inline-flex items-center gap-2 font-semibold text-secondary hover:text-secondary/80">
|
|
{{ data_get($showUi, 'azizi_link') }}
|
|
@svg('heroicon-o-arrow-up-right', 'h-4 w-4')
|
|
</a>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
<div class="card-elevated rounded-2xl p-6">
|
|
<h3 class="font-semibold text-foreground">{{ data_get($showUi, 'next_step_heading') }}</h3>
|
|
<p class="mt-2 text-sm text-muted-foreground">
|
|
{{ data_get($showUi, 'next_step_text') }}
|
|
</p>
|
|
<a href="/contact" class="mt-5 inline-flex w-full justify-center btn-primary-accent">
|
|
{{ data_get($showUi, 'request_cta') }}
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-padding bg-accent">
|
|
<div class="container-padding">
|
|
<div class="mx-auto max-w-3xl text-center">
|
|
<h2 class="text-section-title">{{ data_get($showUi, 'process_title') }}</h2>
|
|
<p class="mt-4 text-large text-muted-foreground">
|
|
{{ data_get($showUi, 'process_intro') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto mt-10 grid max-w-5xl gap-5 md:grid-cols-3">
|
|
@foreach (data_get($showUi, 'process_steps', []) as $step)
|
|
<div class="card-elevated rounded-2xl p-6">
|
|
<h3 class="font-semibold text-foreground">{{ $step['title'] ?? '' }}</h3>
|
|
<p class="mt-2 text-sm text-muted-foreground">{{ $step['text'] ?? '' }}</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-padding">
|
|
<div class="container-padding">
|
|
<div
|
|
class="mx-auto max-w-3xl rounded-2xl border border-secondary/20 bg-secondary/5 p-8 text-center lg:p-12">
|
|
<h2 class="text-section-title">
|
|
{{ str_replace(':title', $project['title'] ?? data_get($showUi, 'interest_default_title'), data_get($showUi, 'interest_heading', '')) }}
|
|
</h2>
|
|
<p class="mt-4 text-large text-muted-foreground">
|
|
{{ data_get($showUi, 'interest_text') }}
|
|
</p>
|
|
<div class="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
|
|
<a href="/contact"
|
|
class="btn-primary-accent px-8 py-4 text-lg">{{ data_get($showUi, 'interest_cta_consult') }}</a>
|
|
<a href="{{ $overviewUrl }}#projekte"
|
|
class="btn-secondary-accent px-8 py-4 text-lg">{{ data_get($showUi, 'interest_cta_more') }}</a>
|
|
</div>
|
|
|
|
<div class="mt-10 text-left">
|
|
<livewire:web.components.sections.immobilien-contact-form :projectSlug="$project['slug'] ?? ''" :projectTitle="$project['title'] ?? ''"
|
|
:showInterest="false" :submitLabel="data_get($ui, 'modal.request_submit', 'Anfrage absenden')"
|
|
wire:key="azizi-project-detail-contact-form-{{ $project['slug'] ?? 'project' }}" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<livewire:web.components.ui.footer />
|
|
</div>
|
|
@endsection
|