Initial commit
This commit is contained in:
68
resources/views/livewire/welcome/article-card-full.blade.php
Normal file
68
resources/views/livewire/welcome/article-card-full.blade.php
Normal file
@@ -0,0 +1,68 @@
|
||||
<div>
|
||||
@if ($post != null && isset($post->slug))
|
||||
|
||||
<div class="relative flex flex-col justify-end overflow-hidden bg-theme-background max-h-[600px] lg:max-h-[800px] my-9">
|
||||
<a class="relative flex cursor-pointer flex-col justify-end overflow-hidden bg-theme-background max-h-[600px] lg:max-h-[800px]"
|
||||
href="{{ route('post.show_by_slug', [$post->slug]) }}">
|
||||
|
||||
<!-- Photo as background - full width -->
|
||||
@if ($media != null && method_exists($media, '__invoke'))
|
||||
<div class="absolute inset-0 z-0 h-full w-full">
|
||||
{{ $media('4_3', ['class' => 'absolute inset-0 z-0 h-full w-full object-cover blur-[1px]px]']) }}
|
||||
</div>
|
||||
@else
|
||||
<!-- Default background if no image -->
|
||||
<div class="absolute inset-0 z-0 h-full w-full bg-gradient-to-br from-primary-700 to-theme-brand"></div>
|
||||
@endif
|
||||
|
||||
<!-- Optional overlay for contrast -->
|
||||
<div class="absolute inset-0 z-10 bg-black bg-opacity-65"></div>
|
||||
|
||||
<!-- All card content on top of photo - constrained to max-7xl -->
|
||||
<div class="relative z-20 flex h-full flex-col justify-between w-full mx-auto max-w-7xl px-6 md:px-10 lg:px-14 py-14 md:py-14 lg:py-28 text-white">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-4">
|
||||
<h2 class="text text-3xl lg:text-5xl font-semibold leading-tight pr-16 md:pr-20">
|
||||
{{ $post->title }}
|
||||
</h2>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="inline-block items-center rounded-sm bg-theme-brand px-2 pb-1 pt-0.5 text-sm lg:text-lg font-normal">
|
||||
{{ $post->category }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-6 my-4 flex items-center justify-center">
|
||||
@if (isset($post->excerpt))
|
||||
<p class="w-full text-base md:text-xl font-normal leading-relaxed line-clamp-8">
|
||||
{{ $post->excerpt }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
<!-- Bottom section: author info -->
|
||||
<div class="flex flex-wrap items-end gap-4">
|
||||
<h2 class="text-lg md:text-2xl ml-auto pt-3 font-semibold text-white">
|
||||
{{ $post->author }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Like button positioned absolutely outside anchor tag (only for authenticated users) -->
|
||||
{{-- @auth
|
||||
<div class="absolute top-14 right-4 md:right-10 lg:right-14 z-30">
|
||||
@livewire('reaction-button', [
|
||||
'typeName' => 'like',
|
||||
'showCounter' => true,
|
||||
'reactionCounter' => $post['like_count'],
|
||||
'modelClass' => $post['model'],
|
||||
'modelId' => $post['id'],
|
||||
'size' => 'w-10 h-10',
|
||||
'inverseColors' => true,
|
||||
], key('like-' . $post['model'] . '-' . $post['id'] . '-' . $postNr))
|
||||
</div>
|
||||
@endauth --}}
|
||||
</div>
|
||||
|
||||
@endif
|
||||
</div>
|
||||
59
resources/views/livewire/welcome/cta-post.blade.php
Normal file
59
resources/views/livewire/welcome/cta-post.blade.php
Normal file
@@ -0,0 +1,59 @@
|
||||
<div class="bg-white">
|
||||
<div class="bg-theme-brand -mt-6 px-8 md:px-12 lg:px-28 py-6 md:py-10 lg:py-24">
|
||||
@if ($posts->isEmpty())
|
||||
<p class="text-theme-background">
|
||||
{{ __('No page available in your language at the moment') }}
|
||||
</p>
|
||||
@else
|
||||
@foreach ($posts as $post)
|
||||
<div class="relative m-0 p-20">
|
||||
|
||||
<!-- Title CTA -->
|
||||
@if (isset($post->translations[0]) && isset($post->translations[0]->title))
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<h2 class="text-2xl lg:text-3xl font-semibold text-theme-background">
|
||||
{{ $post->translations[0]->title }}
|
||||
</h2>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Content CTA -->
|
||||
@if (isset($post->translations[0]) && isset($post->translations[0]->content))
|
||||
<div
|
||||
class="content dark:text-theme-primary mb-6 max-w-7xl mx-auto text-left text-xl lg:text-2xl font-normal leading-relaxed lg:!leading-10 text-theme-background">
|
||||
{!! \App\Helpers\StringHelper::sanitizeHtml($post->translations[0]->content) !!}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Call carousel -->
|
||||
<div class="py-8">
|
||||
@livewire('welcome-page.call-card-carousel', ['random' => false])
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<!-- CTA / Excerpt -->
|
||||
@if (isset($post->translations[0]) && isset($post->translations[0]->excerpt))
|
||||
<div class="post mx-auto my-0 max-w-4xl bg-white px-8 py-20">
|
||||
<div class="flex flex-col md:flex-row items-center justify-center md:gap-12 lg:gap-20">
|
||||
<!-- Content -->
|
||||
<div class="text-theme-primary">
|
||||
<div class="content text-center text-base leading-loose">
|
||||
{{ $post->translations[0]->excerpt }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button -->
|
||||
<div class="flex items-center justify-center shrink-0">
|
||||
<x-jetstream.button class="leading-tight !text-lg sm:!text-xl px-12 py-1 sm:px-12 sm:py-4 md:px-10 md:py-1 mt-12 mb-4 sm:mt-6 sm:mb-2 md:my-4" wire:click.prevent="register">
|
||||
{{ __('Register now') }}
|
||||
</x-jetstream.button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
</div>
|
||||
75
resources/views/livewire/welcome/event-card-full.blade.php
Normal file
75
resources/views/livewire/welcome/event-card-full.blade.php
Normal file
@@ -0,0 +1,75 @@
|
||||
<div>
|
||||
@if ($post != null && isset($post->slug))
|
||||
|
||||
<div class="relative flex flex-col justify-end overflow-hidden bg-theme-background max-h-[600px] lg:max-h-[800px] my-9">
|
||||
<a class="relative flex cursor-pointer flex-col justify-end overflow-hidden bg-theme-background max-h-[600px] lg:max-h-[800px]"
|
||||
href="{{ route('post.show_by_slug', [$post->slug]) }}">
|
||||
|
||||
<!-- Photo as background - full width -->
|
||||
@if ($media != null && method_exists($media, '__invoke'))
|
||||
<div class="absolute inset-0 z-0 h-full w-full">
|
||||
{{ $media('4_3', ['class' => 'absolute inset-0 z-0 h-full w-full object-cover blur-[1px]']) }}
|
||||
</div>
|
||||
@else
|
||||
<!-- Default background if no image -->
|
||||
<div class="absolute inset-0 z-0 h-full w-full bg-gradient-to-br from-primary-700 to-theme-brand"></div>
|
||||
@endif
|
||||
|
||||
<!-- Optional overlay for contrast -->
|
||||
<div class="absolute inset-0 z-10 bg-black bg-opacity-65"></div>
|
||||
|
||||
<!-- All card content on top of photo - constrained to max-7xl -->
|
||||
<div class="relative z-20 flex h-full flex-col justify-between w-full mx-auto max-w-7xl px-6 md:px-10 lg:px-14 py-14 md:py-14 lg:py-28 text-white">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-4">
|
||||
<h2 class="text text-3xl lg:text-6xl font-semibold leading-tight pr-16 md:pr-20">
|
||||
{{ $post->title }}
|
||||
</h2>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="inline-block items-center rounded-sm bg-theme-brand px-2 pb-1 pt-0.5 text-sm lg:text-xl font-normal">
|
||||
{{ $post->category }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-6 my-4 flex items-center justify-center">
|
||||
@if (isset($post->excerpt))
|
||||
<p class="w-full text-base md:text-xl lg:text-2xl font-normal leading-relaxed lg:leading-loose line-clamp-8">
|
||||
{{ $post->excerpt }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
<!-- Bottom section: author and address -->
|
||||
<div class="flex flex-wrap items-end gap-4">
|
||||
<h2 class="text-lg md:text-2xl lg:text-4xl ml-auto pt-3 font-semibold text-white">
|
||||
@if (isset($post->venue))
|
||||
{{ $post->venue . ' ' . $post->city}}
|
||||
@endif
|
||||
@if (isset($post->from))
|
||||
<span class="text-center font-semibold">
|
||||
{{ Illuminate\Support\Carbon::parse($post->from)->translatedFormat('d F') }}
|
||||
{{ Illuminate\Support\Carbon::parse($post->from)->format('H:i') . ' ' . __('messages.hour_abbrevation') }}
|
||||
</span>
|
||||
@endif
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Like button positioned absolutely outside anchor tag (only for authenticated users) -->
|
||||
{{-- @auth
|
||||
@livewire('reaction-button', [
|
||||
'typeName' => 'like',
|
||||
'showCounter' => true,
|
||||
'reactionCounter' => $post['like_count'],
|
||||
'modelClass' => $post['model'],
|
||||
'modelId' => $post['id'],
|
||||
'size' => 'w-10 h-10',
|
||||
'inverseColors' => true,
|
||||
], key('like-' . $post['model'] . '-' . $post['id'] . '-' . $postNr))
|
||||
</div>
|
||||
@endauth --}}
|
||||
</div>
|
||||
|
||||
@endif
|
||||
</div>
|
||||
127
resources/views/livewire/welcome/image-card-full.blade.php
Normal file
127
resources/views/livewire/welcome/image-card-full.blade.php
Normal file
@@ -0,0 +1,127 @@
|
||||
<div x-data="{
|
||||
showFullscreen: false,
|
||||
async toggleFullscreen() {
|
||||
if (!this.showFullscreen) {
|
||||
this.showFullscreen = true;
|
||||
await this.$nextTick();
|
||||
const elem = this.$refs.fullscreenModal;
|
||||
if (elem.requestFullscreen) {
|
||||
elem.requestFullscreen();
|
||||
} else if (elem.webkitRequestFullscreen) {
|
||||
elem.webkitRequestFullscreen();
|
||||
} else if (elem.msRequestFullscreen) {
|
||||
elem.msRequestFullscreen();
|
||||
}
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
this.showFullscreen = false;
|
||||
}
|
||||
}
|
||||
}"
|
||||
@fullscreenchange.window="if (!document.fullscreenElement) { showFullscreen = false }"
|
||||
@webkitfullscreenchange.window="if (!document.webkitFullscreenElement) { showFullscreen = false }"
|
||||
@msfullscreenchange.window="if (!document.msFullscreenElement) { showFullscreen = false }">
|
||||
@if ($post != null && isset($post->slug))
|
||||
|
||||
<div class="relative flex flex-col bg-theme-background my-9">
|
||||
<!-- Caption overlay calculation -->
|
||||
@php
|
||||
$bottomText = '';
|
||||
$isLink = false;
|
||||
$linkUrl = '';
|
||||
$mediaOwner = isset($post->media_owner) && !empty($post->media_owner) ? $post->media_owner : '';
|
||||
|
||||
if (isset($post->author_id) && !empty($post->author_id)) {
|
||||
$bottomText = $post->author;
|
||||
$isLink = true;
|
||||
$linkUrl = url('user/' . $post->author_id);
|
||||
} elseif (isset($post->media_caption) && !empty($post->media_caption)) {
|
||||
$bottomText = $post->media_caption;
|
||||
} elseif (isset($post->content) && !empty($post->content)) {
|
||||
$bottomText = strip_tags($post->content);
|
||||
}
|
||||
@endphp
|
||||
|
||||
<div class="relative flex flex-col justify-center overflow-hidden bg-theme-background {{ !$media ? 'pt-32 pb-32' : '' }}">
|
||||
|
||||
<!-- Photo - full width spanning entire screen -->
|
||||
@if ($media != null && method_exists($media, '__invoke'))
|
||||
<div @click="toggleFullscreen()" class="cursor-pointer">
|
||||
{{ $media('hero', ['class' => 'w-full h-auto']) }}
|
||||
</div>
|
||||
|
||||
<!-- Caption overlaid on image - positioned like author in article card -->
|
||||
@if (!empty($bottomText) || !empty($mediaOwner))
|
||||
<div class="absolute bottom-0 w-full">
|
||||
<div class="w-full mx-auto max-w-7xl px-6 md:px-10 lg:px-14 py-14 md:py-14 lg:py-28">
|
||||
<div class="flex flex-col items-end gap-1">
|
||||
@if (!empty($bottomText))
|
||||
<h4 class="inline-flex items-center gap-2 rounded-sm bg-theme-brand px-2 pb-1 pt-0.5 text-sm lg:text-lg font-normal text-white">
|
||||
@if ($isLink && isset($post->author_profile_photo_path) && $post->author_profile_photo_path)
|
||||
<a href="{{ $linkUrl }}" @click.stop class="flex-shrink-0">
|
||||
<img src="{{ Storage::url($post->author_profile_photo_path) }}"
|
||||
alt="{{ $bottomText }}"
|
||||
class="w-4 h-4 lg:w-5 lg:h-5 rounded-full profile-photo object-cover">
|
||||
</a>
|
||||
@endif
|
||||
@if ($isLink)
|
||||
<a href="{{ $linkUrl }}" @click.stop class="text-white hover:underline">
|
||||
{{ $bottomText }}
|
||||
</a>
|
||||
@else
|
||||
{{ $bottomText }}
|
||||
@endif
|
||||
</h4>
|
||||
@endif
|
||||
@if (!empty($mediaOwner))
|
||||
<h6 class="inline-block items-center rounded-sm bg-theme-brand mt-2 px-1.5 pb-0.5 pt-0.5 text-[10px] lg:text-xs font-normal text-white">
|
||||
{{ $mediaOwner }}
|
||||
</h6>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Excerpt text centered - big like article title (only if no media) -->
|
||||
@elseif (isset($post->excerpt) && !empty($post->excerpt))
|
||||
<div class="flex items-center justify-center px-6 md:px-10 lg:px-14">
|
||||
<h2 class="text-3xl lg:text-5xl font-semibold leading-tight text-center text-theme-text-background bg-theme-brand p-6 m-8">
|
||||
{{ $post->excerpt }}
|
||||
</h2>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Full-screen modal -->
|
||||
<div x-show="showFullscreen"
|
||||
x-ref="fullscreenModal"
|
||||
@click="toggleFullscreen()"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black"
|
||||
style="display: none;">
|
||||
|
||||
@if ($media != null && method_exists($media, '__invoke'))
|
||||
<div class="relative w-full h-full flex items-center justify-center p-4">
|
||||
<!-- Full-screen image - use first (largest) responsive image -->
|
||||
@php
|
||||
// Get the largest responsive image URL (first in array = largest)
|
||||
$responsiveImages = $media->getResponsiveImageUrls('hero');
|
||||
$largestImageUrl = !empty($responsiveImages) ? reset($responsiveImages) : $media->getUrl('hero');
|
||||
@endphp
|
||||
<img src="{{ $largestImageUrl }}"
|
||||
alt="{{ $post->title ?? '' }}"
|
||||
class="max-w-full max-h-full object-contain"
|
||||
loading="eager">
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@endif
|
||||
</div>
|
||||
@@ -0,0 +1,127 @@
|
||||
<div x-data="{
|
||||
showFullscreen: false,
|
||||
async toggleFullscreen() {
|
||||
if (!this.showFullscreen) {
|
||||
this.showFullscreen = true;
|
||||
await this.$nextTick();
|
||||
const elem = this.$refs.fullscreenModal;
|
||||
if (elem.requestFullscreen) {
|
||||
elem.requestFullscreen();
|
||||
} else if (elem.webkitRequestFullscreen) {
|
||||
elem.webkitRequestFullscreen();
|
||||
} else if (elem.msRequestFullscreen) {
|
||||
elem.msRequestFullscreen();
|
||||
}
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
this.showFullscreen = false;
|
||||
}
|
||||
}
|
||||
}"
|
||||
@fullscreenchange.window="if (!document.fullscreenElement) { showFullscreen = false }"
|
||||
@webkitfullscreenchange.window="if (!document.webkitFullscreenElement) { showFullscreen = false }"
|
||||
@msfullscreenchange.window="if (!document.msFullscreenElement) { showFullscreen = false }">
|
||||
@if ($post != null && isset($post->slug))
|
||||
|
||||
<div class="relative flex flex-col bg-theme-background">
|
||||
<!-- Caption overlay calculation -->
|
||||
@php
|
||||
$bottomText = '';
|
||||
$isLink = false;
|
||||
$linkUrl = '';
|
||||
$mediaOwner = isset($post->media_owner) && !empty($post->media_owner) ? $post->media_owner : '';
|
||||
|
||||
if (isset($post->author_id) && !empty($post->author_id)) {
|
||||
$bottomText = $post->author;
|
||||
$isLink = true;
|
||||
$linkUrl = url('user/' . $post->author_id);
|
||||
} elseif (isset($post->media_caption) && !empty($post->media_caption)) {
|
||||
$bottomText = $post->media_caption;
|
||||
} elseif (isset($post->content) && !empty($post->content)) {
|
||||
$bottomText = strip_tags($post->content);
|
||||
}
|
||||
@endphp
|
||||
|
||||
<div class="relative flex flex-col justify-center overflow-hidden bg-theme-background {{ !$media ? 'pt-32 pb-32' : '' }}">
|
||||
|
||||
<!-- Photo - full width spanning entire screen -->
|
||||
@if ($media != null && method_exists($media, '__invoke'))
|
||||
<div @click="toggleFullscreen()" class="cursor-pointer">
|
||||
{{ $media('hero', ['class' => 'w-full h-auto']) }}
|
||||
</div>
|
||||
|
||||
<!-- Caption overlaid on image - positioned like author in article card -->
|
||||
@if (!empty($bottomText) || !empty($mediaOwner))
|
||||
<div class="absolute bottom-0 w-full">
|
||||
<div class="w-full mx-auto max-w-7xl px-6 md:px-10 lg:px-14 py-14 md:py-14 lg:py-28">
|
||||
<div class="flex flex-col items-end gap-1">
|
||||
@if (!empty($bottomText))
|
||||
<h4 class="inline-flex items-center gap-2 rounded-sm bg-theme-brand px-2 pb-1 pt-0.5 text-sm lg:text-lg font-normal text-white">
|
||||
@if ($isLink && isset($post->author_profile_photo_path) && $post->author_profile_photo_path)
|
||||
<a href="{{ $linkUrl }}" @click.stop class="flex-shrink-0">
|
||||
<img src="{{ Storage::url($post->author_profile_photo_path) }}"
|
||||
alt="{{ $bottomText }}"
|
||||
class="w-4 h-4 lg:w-5 lg:h-5 rounded-full profile-photo object-cover">
|
||||
</a>
|
||||
@endif
|
||||
@if ($isLink)
|
||||
<a href="{{ $linkUrl }}" @click.stop class="text-white hover:underline">
|
||||
{{ $bottomText }}
|
||||
</a>
|
||||
@else
|
||||
{{ $bottomText }}
|
||||
@endif
|
||||
</h4>
|
||||
@endif
|
||||
@if (!empty($mediaOwner))
|
||||
<h6 class="inline-block items-center rounded-sm bg-theme-brand mt-2 px-1.5 pb-0.5 pt-0.5 text-[10px] lg:text-xs font-normal text-white">
|
||||
{{ $mediaOwner }}
|
||||
</h6>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Excerpt text centered - big like article title (only if no media) -->
|
||||
@elseif (isset($post->excerpt) && !empty($post->excerpt))
|
||||
<div class="flex items-center justify-center px-6 md:px-10 lg:px-14">
|
||||
<h2 class="text-3xl lg:text-5xl font-semibold leading-tight text-center text-theme-text-background bg-theme-brand p-6 m-8">
|
||||
{{ $post->excerpt }}
|
||||
</h2>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Full-screen modal -->
|
||||
<div x-show="showFullscreen"
|
||||
x-ref="fullscreenModal"
|
||||
@click="toggleFullscreen()"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black"
|
||||
style="display: none;">
|
||||
|
||||
@if ($media != null && method_exists($media, '__invoke'))
|
||||
<div class="relative w-full h-full flex items-center justify-center p-4">
|
||||
<!-- Full-screen image - use first (largest) responsive image -->
|
||||
@php
|
||||
// Get the largest responsive image URL (first in array = largest)
|
||||
$responsiveImages = $media->getResponsiveImageUrls('hero');
|
||||
$largestImageUrl = !empty($responsiveImages) ? reset($responsiveImages) : $media->getUrl('hero');
|
||||
@endphp
|
||||
<img src="{{ $largestImageUrl }}"
|
||||
alt="{{ $post->title ?? '' }}"
|
||||
class="max-w-full max-h-full object-contain"
|
||||
loading="eager">
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@endif
|
||||
</div>
|
||||
50
resources/views/livewire/welcome/landing-post.blade.php
Normal file
50
resources/views/livewire/welcome/landing-post.blade.php
Normal file
@@ -0,0 +1,50 @@
|
||||
<div class="w-full p-0 m-0">
|
||||
@if($posts->isEmpty())
|
||||
<p class="text-theme-primary dark:text-theme-muted">
|
||||
{{ __('No page available in your language at the moment') }}
|
||||
</p>
|
||||
@else
|
||||
@foreach($posts as $post)
|
||||
<div class="relative w-full p-0 m-0 overflow-hidden">
|
||||
@if($post->hasMedia('*'))
|
||||
@php
|
||||
$media = $post->getFirstMedia('*');
|
||||
$mediaOwner = $media ? $media->getCustomProperty('owner', '') : '';
|
||||
@endphp
|
||||
<img src="{{ $post->getFirstMediaUrl('*', 'half_hero') }}" alt="{{ $media->getCustomProperty('caption') }}" class="w-full object-cover min-h-[700px] md:min-h-[1024px]">
|
||||
|
||||
<!-- Media owner overlay -->
|
||||
@if (!empty($mediaOwner))
|
||||
<div class="absolute bottom-0 w-full">
|
||||
<div class="w-full mx-auto max-w-7xl px-6 md:px-10 lg:px-14 py-14 md:py-14 lg:py-28">
|
||||
<div class="flex flex-col items-end gap-1">
|
||||
<h6 class="inline-block items-center rounded-sm bg-theme-brand px-1.5 pb-0.5 pt-0.5 text-[10px] lg:text-xs font-normal text-white">
|
||||
{{ $mediaOwner }}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
|
||||
<!-- Title Landing Post-->
|
||||
@if (isset($post->translations[0]) && isset($post->translations[0]->title))
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<h2 class="text-center text-xl md:text-2xl lg:text-4xl xl:text-6xl 2xl:text-7xl font-semibold text-theme-text-background dark:text-white bg-theme-brand p-6 m-8">
|
||||
{{ $post->translations[0]->title }}
|
||||
</h2>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Content Landing Post-->
|
||||
@if (isset($post->translations[0]->content) && strlen(trim(strip_tags($post->translations[0]->content))) > 0)
|
||||
<div class="text-theme-primary max-w-2xl mx-auto my-12 p-4 post mb-6 bg-white dark:bg-theme-primary">
|
||||
<div class="content font-base font-normal leading-loose">
|
||||
{!! \App\Helpers\StringHelper::sanitizeHtml($post->translations[0]->content) !!}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
</div>
|
||||
@@ -0,0 +1,19 @@
|
||||
<div class="w-full h-screen absolute inset-0">
|
||||
@if(!$posts->isEmpty())
|
||||
@foreach($posts as $post)
|
||||
<div class="relative w-full h-screen overflow-hidden">
|
||||
@if($post->hasMedia('*'))
|
||||
<img src="{{ $post->getFirstMediaUrl('*', 'hero') }}"
|
||||
alt="{{ $post->getFirstMedia('*')->getCustomProperty('caption') }}"
|
||||
class="w-full h-screen object-cover">
|
||||
@else
|
||||
<!-- Fallback background if no image -->
|
||||
<div class="w-full h-screen bg-gradient-to-br from-theme-primary/20 to-theme-secondary/20"></div>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
@else
|
||||
<!-- Fallback background if no posts -->
|
||||
<div class="w-full h-screen bg-gradient-to-br from-theme-primary/20 to-theme-secondary/20"></div>
|
||||
@endif
|
||||
</div>
|
||||
76
resources/views/livewire/welcome/news-card-full.blade.php
Normal file
76
resources/views/livewire/welcome/news-card-full.blade.php
Normal file
@@ -0,0 +1,76 @@
|
||||
<div>
|
||||
@if ($post != null && isset($post->slug))
|
||||
|
||||
<div class="relative flex flex-col justify-end overflow-hidden bg-theme-background max-h-[600px] lg:max-h-[800px] my-9">
|
||||
<a class="relative flex cursor-pointer flex-col justify-end overflow-hidden bg-theme-background max-h-[600px] lg:max-h-[800px]"
|
||||
href="{{ route('post.show_by_slug', [$post->slug]) }}">
|
||||
|
||||
<!-- Photo as background - full width -->
|
||||
@if ($media != null && method_exists($media, '__invoke'))
|
||||
<div class="absolute inset-0 z-0 h-full w-full">
|
||||
{{ $media('4_3', ['class' => 'absolute inset-0 z-0 h-full w-full object-cover blur-[1px]']) }}
|
||||
</div>
|
||||
@else
|
||||
<!-- Default background if no image -->
|
||||
<div class="absolute inset-0 z-0 h-full w-full bg-gradient-to-br from-primary-700 to-theme-brand"></div>
|
||||
@endif
|
||||
|
||||
<!-- Optional overlay for contrast -->
|
||||
<div class="absolute inset-0 z-10 bg-black bg-opacity-65"></div>
|
||||
|
||||
<!-- All card content on top of photo - constrained to max-7xl -->
|
||||
<div class="relative z-20 flex h-full flex-col justify-between w-full mx-auto max-w-7xl px-6 md:px-10 lg:px-14 py-14 md:py-14 lg:py-28 text-white">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-4">
|
||||
<h2 class="text text-3xl lg:text-5xl font-semibold leading-tight pr-16 md:pr-20">
|
||||
{{ $post->title }}
|
||||
</h2>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="inline-block items-center rounded-sm bg-theme-brand px-2 pb-1 pt-0.5 text-sm lg:text-xl font-normal">
|
||||
{{ $post->category }}
|
||||
</h4>
|
||||
<h4 class="inline-block items-center rounded-sm bg-theme-brand ml-3 px-2 pb-1 pt-0.5 text-sm lg:text-xl font-normal">
|
||||
@if (isset($post->from))
|
||||
<span class="">
|
||||
{{ Illuminate\Support\Carbon::parse($post->from)->translatedFormat('l, j F') }}
|
||||
</span>
|
||||
@endif
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-6 my-4 flex items-center justify-center">
|
||||
@if (isset($post->excerpt))
|
||||
<p class="w-full text-base md:text-xl lg:text-2xl font-normal leading-relaxed lg:leading-loose line-clamp-8">
|
||||
{{ $post->excerpt }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
<!-- Bottom section: author info -->
|
||||
<div class="flex flex-wrap items-end gap-4">
|
||||
<h2 class="text-lg md:text-2xl ml-auto pt-3 font-semibold text-white">
|
||||
{{ $post->author }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Like button positioned absolutely outside anchor tag (only for authenticated users) -->
|
||||
{{-- @auth
|
||||
<div class="absolute top-14 right-4 md:right-10 lg:right-14 z-30">
|
||||
@livewire('reaction-button', [
|
||||
'typeName' => 'like',
|
||||
'showCounter' => true,
|
||||
'reactionCounter' => $post['like_count'],
|
||||
'modelClass' => $post['model'],
|
||||
'modelId' => $post['id'],
|
||||
'size' => 'w-10 h-10',
|
||||
'inverseColors' => true,
|
||||
], key('like-' . $post['model'] . '-' . $post['id'] . '-' . $postNr))
|
||||
</div>
|
||||
@endauth --}}
|
||||
</div>
|
||||
|
||||
@endif
|
||||
</div>
|
||||
Reference in New Issue
Block a user