416 lines
26 KiB
PHP
416 lines
26 KiB
PHP
@extends('web.layouts.web-master')
|
|
|
|
@php
|
|
$projects = collect($content['projects'] ?? []);
|
|
$featured = $content['featured'] ?? [];
|
|
$featuredProject = $projects->firstWhere('slug', $featured['slug'] ?? '');
|
|
$categories = collect($content['categories'] ?? []);
|
|
$districts = collect(data_get($content, 'districts.items', []));
|
|
$gridProjectsCount = $projects->reject(fn ($project) => $project['slug'] === data_get($featured, 'slug'))->count();
|
|
$statusLabels = [
|
|
'ready' => 'Sofort verfuegbar',
|
|
'construction' => 'Im Bau',
|
|
'offplan' => 'Off-Plan',
|
|
];
|
|
$statusClasses = [
|
|
'ready' => 'bg-emerald-500',
|
|
'construction' => 'bg-sky-500',
|
|
'offplan' => 'bg-amber-400 text-zinc-950',
|
|
];
|
|
@endphp
|
|
|
|
@section('title', data_get($content, 'meta.title', 'Dubai Immobilien - B2in'))
|
|
@section('meta_description', data_get($content, 'meta.description', 'Kuratierte Immobilienprojekte in Dubai.'))
|
|
|
|
@section('content')
|
|
<div class="bg-background">
|
|
<livewire:web.components.ui.header />
|
|
|
|
<main class="variante-glass-flow">
|
|
<section class="relative min-h-[76vh] flex items-center overflow-hidden">
|
|
<x-web-picture
|
|
src="{{ theme_image_url(data_get($content, 'hero.image')) }}"
|
|
alt="Dubai Skyline - kuratierte Immobilienprojekte"
|
|
class="absolute inset-0 h-full w-full object-cover"
|
|
loading="" />
|
|
<div class="absolute inset-0 bg-gradient-to-r from-black/85 via-black/65 to-black/35"></div>
|
|
|
|
<div class="relative z-10 container-padding py-24 lg:py-32">
|
|
<div class="max-w-4xl">
|
|
<p class="mb-5 text-sm font-semibold uppercase tracking-[0.24em] text-secondary">
|
|
{{ data_get($content, 'hero.eyebrow') }}
|
|
</p>
|
|
<h1 class="max-w-3xl text-4xl font-bold leading-tight text-white lg:text-6xl">
|
|
{{ data_get($content, 'hero.title') }}
|
|
</h1>
|
|
<p class="mt-6 max-w-2xl text-lg leading-relaxed text-white/80 lg:text-xl">
|
|
{{ data_get($content, 'hero.subtitle') }}
|
|
</p>
|
|
|
|
<div class="mt-10 flex flex-col gap-3 sm:flex-row">
|
|
<a href="#projekte" class="btn-primary-accent px-8 py-4 text-lg">
|
|
{{ data_get($content, 'hero.cta_primary') }}
|
|
</a>
|
|
<a href="/contact" class="btn-secondary-accent px-8 py-4 text-lg">
|
|
{{ data_get($content, 'hero.cta_secondary') }}
|
|
</a>
|
|
</div>
|
|
|
|
<p class="mt-5 max-w-xl text-sm font-medium text-white/70">
|
|
{{ data_get($content, 'hero.microcopy') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-padding">
|
|
<div class="container-padding">
|
|
<div class="grid items-center gap-12 lg:grid-cols-[0.9fr_1.1fr]">
|
|
<div class="card-elevated overflow-hidden rounded-3xl">
|
|
<x-web-picture
|
|
src="{{ theme_image_url(data_get($content, 'intro.image')) }}"
|
|
alt="Marcel Scheibe - B2in Immobilienberatung"
|
|
class="h-[460px] w-full object-cover" />
|
|
</div>
|
|
|
|
<div>
|
|
<p class="mb-4 text-sm font-semibold uppercase tracking-[0.22em] text-secondary">
|
|
Kuratiert statt katalogisiert
|
|
</p>
|
|
<h2 class="text-section-title">{{ data_get($content, 'intro.title') }}</h2>
|
|
<blockquote class="mt-6 border-l-4 border-secondary pl-5 text-xl font-medium leading-relaxed text-foreground">
|
|
"{{ data_get($content, 'intro.quote') }}"
|
|
</blockquote>
|
|
<div class="mt-6 space-y-4 text-large leading-relaxed text-muted-foreground">
|
|
@foreach (data_get($content, 'intro.paragraphs', []) as $paragraph)
|
|
<p>{{ $paragraph }}</p>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-padding relative isolate overflow-hidden bg-zinc-950 text-white">
|
|
<x-web-picture
|
|
src="{{ theme_image_url($featured['image'] ?? 'b2in/hero-immobilien.jpg') }}"
|
|
alt="{{ $featured['title'] ?? 'Burj Azizi' }}"
|
|
class="absolute inset-0 -z-20 h-full w-full object-cover"
|
|
loading="" />
|
|
<div class="absolute inset-0 -z-10 bg-gradient-to-r from-zinc-950 via-zinc-950/90 to-zinc-950/65"></div>
|
|
<div class="absolute inset-x-0 top-0 -z-10 h-28 bg-gradient-to-b from-zinc-950 to-transparent"></div>
|
|
<div class="absolute inset-x-0 bottom-0 -z-10 h-28 bg-gradient-to-t from-zinc-950 to-transparent"></div>
|
|
|
|
<div class="container-padding">
|
|
<div class="grid gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
|
|
<div class="relative overflow-hidden rounded-3xl border border-white/10 bg-[#142f34] shadow-2xl shadow-black/20">
|
|
<x-web-picture
|
|
src="{{ theme_image_url($featured['image'] ?? 'b2in/hero-immobilien.jpg') }}"
|
|
alt="{{ $featured['title'] ?? 'Burj Azizi' }}"
|
|
class="h-[520px] w-full object-cover opacity-75" />
|
|
<div class="absolute inset-0 bg-gradient-to-t from-[#071316]/95 via-[#071316]/35 to-[#071316]/10"></div>
|
|
<div class="absolute bottom-6 left-6 right-6">
|
|
<span class="inline-flex rounded-full bg-white px-3 py-1 text-xs font-semibold text-[#0e2226]">
|
|
Headline-Projekt
|
|
</span>
|
|
<h2 class="mt-4 text-3xl font-bold lg:text-5xl">{{ $featured['title'] ?? '' }}</h2>
|
|
<p class="mt-2 text-white/75">{{ $featured['location'] ?? '' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="inline-flex rounded-full bg-white px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-[#0e2226]">
|
|
{{ $featured['status'] ?? '' }}
|
|
</p>
|
|
<h2 class="mt-4 text-3xl font-bold leading-tight lg:text-5xl">
|
|
{{ $featured['headline'] ?? '' }}
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-relaxed text-white/75">
|
|
{{ $featured['text'] ?? '' }}
|
|
</p>
|
|
|
|
<div class="mt-6 rounded-2xl border border-white/10 bg-white/10 p-6">
|
|
<p class="text-sm font-semibold text-white">Marcels Einschätzung</p>
|
|
<p class="mt-3 leading-relaxed text-white/80">{{ $featured['marcel_take'] ?? '' }}</p>
|
|
</div>
|
|
|
|
<dl class="mt-8 grid gap-3 sm:grid-cols-2">
|
|
<div class="rounded-2xl bg-white/5 p-4">
|
|
<dt class="text-xs uppercase tracking-wider text-white/50">Preis</dt>
|
|
<dd class="mt-1 font-semibold">{{ $featured['price_from'] ?? '' }}</dd>
|
|
</div>
|
|
<div class="rounded-2xl bg-white/5 p-4">
|
|
<dt class="text-xs uppercase tracking-wider text-white/50">Uebergabe</dt>
|
|
<dd class="mt-1 font-semibold">{{ $featured['handover'] ?? '' }}</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<ul class="mt-6 grid gap-2 text-sm text-white/70 sm:grid-cols-2">
|
|
@foreach ($featured['facts'] ?? [] as $fact)
|
|
<li class="flex gap-2">
|
|
@svg('heroicon-o-check-circle', 'mt-0.5 h-4 w-4 shrink-0 text-secondary')
|
|
<span>{{ $fact }}</span>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
|
|
@if ($featuredProject)
|
|
<div class="mt-8">
|
|
<a href="{{ route('dev.immobilien-azizi.show', $featuredProject['slug']) }}" class="btn-primary-accent px-7 py-3">
|
|
Burj Azizi im Detail ansehen
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="karte" class="section-padding bg-accent">
|
|
<div class="container-padding">
|
|
<div class="mb-10 max-w-3xl">
|
|
<h2 class="text-section-title">{{ data_get($content, 'map.title') }}</h2>
|
|
<p class="mt-4 text-large leading-relaxed text-muted-foreground">
|
|
{{ data_get($content, 'map.subtitle') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid gap-8 lg:grid-cols-[1.2fr_0.8fr]">
|
|
<div class="relative min-h-[520px] overflow-hidden rounded-3xl border border-border bg-gradient-to-br from-sky-100 via-white to-emerald-50 p-6 shadow-sm dark:from-slate-900 dark:via-slate-950 dark:to-emerald-950">
|
|
<div class="absolute left-[8%] top-[10%] h-[78%] w-[62%] rotate-[-18deg] rounded-[55%] border border-sky-400/30 bg-sky-300/20"></div>
|
|
<div class="absolute right-[8%] top-[5%] h-[86%] w-[32%] rounded-[48%] border border-emerald-500/20 bg-emerald-300/20"></div>
|
|
<div class="absolute bottom-[8%] left-[24%] h-[26%] w-[46%] rounded-[48%] border border-secondary/20 bg-secondary/10"></div>
|
|
|
|
<span class="absolute left-[56%] top-[44%] text-xs font-semibold uppercase tracking-wider text-zinc-500">Downtown</span>
|
|
<span class="absolute left-[34%] top-[70%] text-xs font-semibold uppercase tracking-wider text-zinc-500">Al Furjan</span>
|
|
<span class="absolute left-[29%] top-[87%] text-xs font-semibold uppercase tracking-wider text-zinc-500">Dubai South</span>
|
|
<span class="absolute left-[21%] top-[42%] text-xs font-semibold uppercase tracking-wider text-zinc-500">Palm</span>
|
|
<span class="absolute left-[70%] top-[24%] text-xs font-semibold uppercase tracking-wider text-zinc-500">Dubai Islands</span>
|
|
|
|
@foreach (data_get($content, 'map.pins', []) as $pin)
|
|
@php
|
|
$pinProject = $projects->firstWhere('slug', $pin['slug']);
|
|
$group = $pinProject['status_group'] ?? 'ready';
|
|
@endphp
|
|
@if ($pinProject)
|
|
<a href="{{ route('dev.immobilien-azizi.show', $pinProject['slug']) }}"
|
|
title="{{ $pinProject['title'] }}"
|
|
class="group absolute flex h-8 w-8 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border-2 border-white shadow-lg transition hover:z-20 hover:scale-110 {{ $statusClasses[$group] ?? 'bg-secondary' }}"
|
|
style="left: {{ $pin['x'] }}%; top: {{ $pin['y'] }}%;">
|
|
<span class="h-2.5 w-2.5 rounded-full bg-white/90"></span>
|
|
<span class="pointer-events-none absolute bottom-full left-1/2 mb-3 hidden w-56 -translate-x-1/2 rounded-xl bg-zinc-950 p-3 text-left text-xs text-white shadow-xl group-hover:block">
|
|
<strong class="block text-sm">{{ $pinProject['title'] }}</strong>
|
|
<span class="mt-1 block text-white/70">{{ $pinProject['location'] }}</span>
|
|
<span class="mt-2 block text-secondary">{{ $statusLabels[$group] ?? $pinProject['status'] }}</span>
|
|
</span>
|
|
</a>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="grid content-start gap-4">
|
|
@foreach ($statusLabels as $key => $label)
|
|
<div class="card-elevated rounded-2xl p-5">
|
|
<div class="flex items-center gap-3">
|
|
<span class="h-4 w-4 rounded-full {{ $statusClasses[$key] ?? 'bg-secondary' }}"></span>
|
|
<h3 class="font-semibold text-foreground">{{ $label }}</h3>
|
|
</div>
|
|
<p class="mt-2 text-sm text-muted-foreground">
|
|
{{ $projects->where('status_group', $key)->count() }} Projekte in dieser Auswahl.
|
|
</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@if ($districts->isNotEmpty())
|
|
<section class="section-padding">
|
|
<div class="container-padding">
|
|
<div class="mb-10 max-w-3xl">
|
|
<p class="mb-4 text-sm font-semibold uppercase tracking-[0.22em] text-secondary">
|
|
Stadtteil-Kontext
|
|
</p>
|
|
<h2 class="text-section-title">{{ data_get($content, 'districts.title') }}</h2>
|
|
<p class="mt-4 text-large leading-relaxed text-muted-foreground">
|
|
{{ data_get($content, 'districts.subtitle') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
|
|
@foreach ($districts as $district)
|
|
<article class="card-elevated rounded-2xl p-6">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-secondary">
|
|
{{ $district['projects'] ?? '' }}
|
|
</p>
|
|
<h3 class="mt-3 text-xl font-semibold text-foreground">{{ $district['name'] ?? '' }}</h3>
|
|
<p class="mt-3 text-sm leading-relaxed text-muted-foreground">
|
|
{{ $district['description'] ?? '' }}
|
|
</p>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
<section id="projekte" class="section-padding">
|
|
<div class="container-padding">
|
|
<div class="mb-12 max-w-3xl">
|
|
<p class="mb-4 text-sm font-semibold uppercase tracking-[0.22em] text-secondary">
|
|
Projektgrid
|
|
</p>
|
|
<h2 class="text-section-title">{{ $gridProjectsCount }} Projekte im Vergleich</h2>
|
|
<p class="mt-4 text-large text-muted-foreground">
|
|
Burj Azizi steht bewusst als eigenes Flaggschiff oben. Die restlichen PDF-Positionen und kuratierten Zusatzprojekte sind nach Käuferlogik, Stadtteil und Entwicklungsstatus sortiert.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-16">
|
|
@foreach ($categories as $category)
|
|
@php
|
|
$categoryProjects = $projects
|
|
->where('category', $category['key'])
|
|
->reject(fn ($project) => $project['slug'] === data_get($featured, 'slug'));
|
|
@endphp
|
|
@if ($categoryProjects->isNotEmpty())
|
|
<section>
|
|
<div class="mb-6 max-w-3xl">
|
|
<h3 class="text-2xl font-semibold text-foreground">{{ $category['title'] }}</h3>
|
|
<p class="mt-2 text-muted-foreground">{{ $category['intro'] }}</p>
|
|
</div>
|
|
|
|
<div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
|
|
@foreach ($categoryProjects as $project)
|
|
<article class="card-elevated flex h-full flex-col overflow-hidden rounded-2xl">
|
|
<div class="relative h-52 overflow-hidden">
|
|
<x-web-picture
|
|
src="{{ theme_image_url($project['image']) }}"
|
|
alt="{{ $project['title'] }}"
|
|
class="h-full w-full object-cover transition duration-500 hover:scale-105" />
|
|
<span class="absolute left-4 top-4 rounded-full px-3 py-1 text-xs font-semibold text-white {{ $statusClasses[$project['status_group']] ?? 'bg-secondary' }}">
|
|
{{ $project['status'] }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex flex-1 flex-col p-6">
|
|
<p class="text-sm text-muted-foreground">{{ $project['location'] }}</p>
|
|
<h4 class="mt-1 text-xl font-semibold text-foreground">{{ $project['title'] }}</h4>
|
|
<p class="mt-4 text-sm leading-relaxed text-muted-foreground">{{ $project['short'] }}</p>
|
|
|
|
<dl class="mt-5 grid gap-3 text-sm">
|
|
<div>
|
|
<dt class="font-medium text-foreground">Geeignet fuer</dt>
|
|
<dd class="text-muted-foreground">{{ $project['buyer_profile'] }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="font-medium text-foreground">Preis / Verfuegbarkeit</dt>
|
|
<dd class="text-secondary">{{ $project['price_from'] }}</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<div class="mt-auto pt-6">
|
|
<a href="{{ route('dev.immobilien-azizi.show', $project['slug']) }}" class="inline-flex items-center gap-2 font-semibold text-secondary hover:text-secondary/80">
|
|
Details ansehen
|
|
@svg('heroicon-o-arrow-right', 'h-4 w-4')
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@endif
|
|
@endforeach
|
|
</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($content, 'market_context.title') }}</h2>
|
|
<p class="mt-4 text-large text-muted-foreground">{{ data_get($content, 'market_context.subtitle') }}</p>
|
|
</div>
|
|
|
|
<div class="mx-auto mt-12 grid max-w-6xl gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
@foreach (data_get($content, 'market_context.facts', []) as $fact)
|
|
<div class="card-elevated rounded-2xl p-6">
|
|
<div class="mb-5 inline-flex h-12 w-12 items-center justify-center rounded-full bg-secondary/10 text-secondary">
|
|
@svg('heroicon-o-' . $fact['icon'], 'h-6 w-6')
|
|
</div>
|
|
<h3 class="font-semibold text-foreground">{{ $fact['title'] }}</h3>
|
|
<p class="mt-2 text-sm leading-relaxed text-muted-foreground">{{ $fact['description'] }}</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-padding">
|
|
<div class="container-padding">
|
|
<div class="mx-auto max-w-4xl">
|
|
<div class="mb-10 text-center">
|
|
<h2 class="text-section-title">{{ data_get($content, 'process.title') }}</h2>
|
|
</div>
|
|
<div class="grid gap-5 md:grid-cols-2">
|
|
@foreach (data_get($content, 'process.steps', []) as $step)
|
|
<div class="card-elevated rounded-2xl p-6">
|
|
<div class="flex gap-5">
|
|
<span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-secondary text-lg font-bold text-white">
|
|
{{ $step['number'] }}
|
|
</span>
|
|
<div>
|
|
<h3 class="font-semibold text-foreground">{{ $step['title'] }}</h3>
|
|
<p class="mt-2 text-sm leading-relaxed text-muted-foreground">{{ $step['description'] }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section-padding bg-secondary/5">
|
|
<div class="container-padding">
|
|
<div class="mx-auto max-w-4xl rounded-2xl border border-secondary/20 bg-background p-8 text-center lg:p-12">
|
|
<h2 class="text-section-title">{{ data_get($content, 'mindset.title') }}</h2>
|
|
<div class="mt-8 grid gap-5 text-left md:grid-cols-2">
|
|
<p class="rounded-2xl bg-emerald-500/10 p-5 leading-relaxed text-foreground">
|
|
{{ data_get($content, 'mindset.positive') }}
|
|
</p>
|
|
<p class="rounded-2xl bg-amber-500/10 p-5 leading-relaxed text-muted-foreground">
|
|
{{ data_get($content, 'mindset.negative') }}
|
|
</p>
|
|
</div>
|
|
<div class="mt-8">
|
|
<a href="/contact" class="btn-primary-accent px-8 py-4 text-lg">
|
|
{{ data_get($content, 'mindset.cta') }}
|
|
</a>
|
|
</div>
|
|
</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($content, 'furniture.title') }}</h2>
|
|
<p class="mt-4 text-large text-muted-foreground">{{ data_get($content, 'furniture.text') }}</p>
|
|
<div class="mt-8">
|
|
<a href="/netzwerk" class="btn-secondary-accent">
|
|
{{ data_get($content, 'furniture.button') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<livewire:web.components.sections.c-t-a-section />
|
|
</main>
|
|
|
|
<livewire:web.components.ui.footer />
|
|
</div>
|
|
@endsection
|