truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement dynamic blog category highlights with category-specific imagery and responsive grid layouts

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-24 10:59:32 +03:00
parent 1b920e2b5b
commit 22c5e40cfc
6 changed files with 1041 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/blog/index.blade.php
+15 -5
View File
@@ -64,16 +64,26 @@
</div>
</div>
<!-- 3-Column Highlights Section -->
<!-- Dynamic Highlights Section -->
@if(isset($highlightCategories) && $highlightCategories->count() > 0)
@php
$catCount = $highlightCategories->count();
// Dynamically select column width based on category count
$gridClass = $catCount >= 4 ? 'md:w-6/12 lg:w-3/12 xl:w-3/12' : 'md:w-6/12 lg:w-4/12 xl:w-4/12';
@endphp
<div class="flex flex-wrap mx-[-15px] grid-view md:mx-[-20px] lg:mx-[-20px] xl:mx-[-25px] !mt-[-40px] xl:!mt-0 lg:!mt-0 !text-center !mb-16">
@foreach($highlightCategories as $index => $hCat)
@php
$images = ['assets/img/photos/f1.jpg', 'assets/img/photos/f2.jpg', 'assets/img/photos/f3.jpg'];
$hImg = asset($images[$index % 3]);
$images = [
'teknoloji-cozumleri' => 'assets/img/photos/blog_cat_tech.png',
'yapay-zeka' => 'assets/img/photos/blog_cat_ai.png',
'muzik-teknolojileri' => 'assets/img/photos/blog_cat_music.png',
'uygulama-gelistirme' => 'assets/img/photos/blog_cat_app.png',
];
$hImg = isset($images[$hCat->slug]) ? asset($images[$hCat->slug]) : asset('assets/img/photos/blog_cat_tech.png');
$hUrl = route('blog.index', ['category' => $hCat->slug]);
@endphp
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto md:!px-[20px] lg:!px-[20px] xl:!px-[25px] !mt-[40px] xl:!mt-0 lg:!mt-0">
<div class="{{ $gridClass }} w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto md:!px-[20px] lg:!px-[20px] xl:!px-[25px] !mt-[40px] xl:!mt-0 lg:!mt-0">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
<figure class="card-img-top overlay overlay-1 group">
<a href="{{ $hUrl }}">
@@ -126,7 +136,7 @@
<div class="widget">
<h4 class="widget-title !mb-3">Hakkımızda</h4>
<figure class="!rounded-[.4rem] !mb-4">
<img class="max-w-full h-auto !rounded-[.4rem]" src="{{ asset('assets/img/photos/f1.jpg') }}" alt="Trunçgil Teknoloji" style="height: 220px; object-fit: cover; width: 100%;">
<img class="max-w-full h-auto !rounded-[.4rem]" src="{{ asset('assets/img/Truncgil Technology Architecting the Digital Future copy.png') }}" alt="Trunçgil Teknoloji" style="height: 220px; object-fit: cover; width: 100%;">
</figure>
<p>Trunçgil Teknoloji, Gaziantep Teknopark bünyesinde web tasarım, özel yazılım geliştirme, yapay zeka çözümleri ve dijital dönüşüm süreçlerinde kurumlara premium ve yenilikçi çözümler sunan bir teknoloji ajansıdır.</p>
<nav class="nav social !mt-4">