Initial commit

resources/views/livewire/main-page/article-card-full.blade.php

@@ -0,0 +1,53 @@
+<div>
+    @if ($post != null)
+
+        <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 -->
+                @if ($media != null)
+                    <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 -->
+                <div class="relative z-20 flex h-full flex-col justify-between px-6 md:px-10 lg:px-14 py-14 md:py-14 lg:py-20 text-white">
+                    <div class="space-y-3">
+                        <div class="flex items-start gap-4">
+                            <h2 class="text text-3xl lg:text-4xl 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-base 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>
+        </div>
+
+    @endif
+</div>