Kevin Adametz
dec524989b
Behebt strukturelle Mobile-Bugs (320/390px) über presseecho, businessportal24 und den pressekonto-Hub hinweg: - Focus-/Kategorie-/Newsroom-Hero: Text im Flow (min-h + flex) statt fester Höhe, responsive Typo — Overlay überläuft nicht mehr nach oben. - Quality-Summary: Grid stackt auf Mobile (behebt Seiten-Overflow). - Hub: Utility-Bar mit Wrap, Header mit Mobile-Burger, Footer stackt, Architektur-Diagramm als gestapelte Mobile-Variante. - Sticky-Header (Portal): fehlende .header-sticky-CSS ergänzt und Script mit Platzhalter, damit der Header beim Scrollen sichtbar bleibt. - Header-Overflow bei 320px entschärft (Portal + Hub); Hub-Hero-H1 verkleinert, damit die Wortmarke "businessportal24" umbricht. - Mobile-Nav um Preise/FAQ/API ergänzt; Industry-Index-Dichte, Touch-Targets und Preise-Einzel-PM-Block für kleine Screens verbessert. - Homepages/Shared: px-8 → px-4 sm:px-6 lg:px-8. Co-authored-by: Cursor <cursoragent@cursor.com>
100 lines
4.9 KiB
PHP
100 lines
4.9 KiB
PHP
@props([
|
|
'leadRelease' => null,
|
|
'sideReleases' => [],
|
|
'boostedIds' => [],
|
|
])
|
|
|
|
@php
|
|
$sideReleases = collect($sideReleases)->take(4)->values();
|
|
$boostedIds = collect($boostedIds)->all();
|
|
|
|
if ($leadRelease) {
|
|
$leadCategoryName = $leadRelease->localizedCategoryName();
|
|
$leadImageUrl = $leadRelease->cardImageUrl();
|
|
$leadPlaceholderUrl = $leadImageUrl ? null : $leadRelease->chosenPlaceholderUrl();
|
|
$leadTitle = $leadRelease->title;
|
|
$leadTeaser = $leadRelease->teaserText(200);
|
|
$leadCompany = $leadRelease->company?->name;
|
|
$leadHref = route('release.detail', ['slug' => $leadRelease->slug]);
|
|
$leadReadTime = $leadRelease->readTimeMinutes();
|
|
$leadPublishedAt = $leadRelease->published_at;
|
|
}
|
|
@endphp
|
|
|
|
@if ($leadRelease)
|
|
<section class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 pt-8">
|
|
<header class="flex items-baseline justify-between mb-4 flex-wrap gap-2">
|
|
<h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] text-ink">
|
|
{{ __('web.hero.title') }}
|
|
</h2>
|
|
<div class="eyebrow muted">{{ ucfirst(now()->isoFormat(__('web.hero.clock_format'))) }} · {{ __('web.hero.editorial_pick') }}</div>
|
|
</header>
|
|
<hr class="rule-strong mb-6">
|
|
|
|
<div class="grid gap-9 lg:grid-cols-[1.7fr_1fr] grid-cols-1">
|
|
{{-- HERO: Text im Flow (min-h + flex), damit lange Titel auf Mobile nicht nach oben überlaufen --}}
|
|
<article>
|
|
<a href="{{ $leadHref }}" class="block group cursor-pointer">
|
|
<div class="relative overflow-hidden bg-hero-grad min-h-[320px] sm:min-h-[420px] lg:min-h-[500px] flex flex-col justify-end">
|
|
@if ($leadImageUrl)
|
|
<img src="{{ $leadImageUrl }}" alt="{{ $leadTitle }}"
|
|
class="absolute inset-0 h-full w-full object-cover opacity-90 transition-opacity group-hover:opacity-100"
|
|
loading="eager">
|
|
<div class="absolute inset-0 bg-black/10"></div>
|
|
@elseif ($leadPlaceholderUrl)
|
|
<img src="{{ $leadPlaceholderUrl }}" alt="" aria-hidden="true"
|
|
class="absolute inset-0 h-full w-full object-cover" loading="eager">
|
|
@else
|
|
<x-web.hero-fallback />
|
|
@endif
|
|
|
|
<div class="absolute top-4 left-4 sm:top-6 sm:left-6 z-10 flex gap-2">
|
|
<span class="bp-tag">{{ __('web.hero.top_story') }}</span>
|
|
@if (in_array($leadRelease->id, $boostedIds, true))
|
|
<span class="bp-tag">{{ __('web.shared.boosted_placement') }}</span>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="relative z-10 px-4 sm:px-9 pb-6 sm:pb-8 pt-16 sm:pt-[60px] text-white"
|
|
style="background:linear-gradient(180deg,transparent,rgba(0,0,0,0.92));">
|
|
@if ($leadCategoryName)
|
|
<div class="eyebrow on-dark mb-3">{{ $leadCategoryName }}</div>
|
|
@endif
|
|
<h1 class="font-serif text-[24px] sm:text-[32px] lg:text-[38px] font-semibold m-0 leading-[1.1] tracking-[-0.7px] max-w-[680px]">
|
|
{{ $leadTitle }}
|
|
</h1>
|
|
<p class="font-serif text-[13.5px] sm:text-[15px] leading-[1.5] mt-3 sm:mt-3.5 max-w-[580px] text-white/85">
|
|
{{ $leadTeaser }}
|
|
</p>
|
|
<div class="mt-3 sm:mt-4 flex items-center gap-3.5 text-[12px] text-white/65 flex-wrap">
|
|
@if ($leadCompany)
|
|
<span>{{ $leadCompany }}</span>
|
|
<span aria-hidden="true">·</span>
|
|
@endif
|
|
@if ($leadPublishedAt)
|
|
<time datetime="{{ $leadPublishedAt->toIso8601String() }}" class="font-mono">
|
|
{{ $leadPublishedAt->format('d.m.Y · H:i') }}
|
|
</time>
|
|
<span aria-hidden="true">·</span>
|
|
@endif
|
|
<span>{{ __('web.shared.read_time', ['minutes' => $leadReadTime]) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
|
|
{{-- SIDEBAR: Was sonst zählt --}}
|
|
<aside>
|
|
<div class="eyebrow muted mb-3.5">{{ __('web.hero.sidebar_title') }}</div>
|
|
|
|
@foreach ($sideReleases as $index => $release)
|
|
<x-web.focus-side-item :release="$release" :index="$index + 1" :first="$loop->first"
|
|
:boosted="in_array($release->id, $boostedIds, true)" />
|
|
@endforeach
|
|
|
|
<x-web.ad-slot variant="sidebar" />
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
@endif
|