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

feat: update partners view with new collage layout, improved item styling, and responsive design for enhanced user experience

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-21 00:52:11 +03:00
parent af36454b8f
commit 1b00a3120e
1 changed files with 73 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/templates/corporate/partners.blade.php
+73 -26
View File
@@ -90,50 +90,97 @@
position: relative;
z-index: 1;
}
.partners-showcase__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem 1.5rem;
align-items: center;
justify-items: center;
.partners-showcase__collage {
position: relative;
width: 100%;
max-width: 540px;
min-height: 300px;
margin: 0 auto;
}
@media (min-width: 768px) {
.partners-showcase__grid {
grid-template-columns: repeat(4, 1fr);
gap: 2.25rem 1.75rem;
@media (min-width: 992px) {
.partners-showcase__collage {
min-height: 340px;
max-width: none;
margin: 0;
}
}
.partners-showcase__item {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.5rem;
padding: 0.25rem;
text-decoration: none;
transition: transform 0.25s ease;
transition: transform 0.3s ease, filter 0.3s ease;
}
.partners-showcase__item:hover {
transform: scale(1.06);
transform: scale(1.08) !important;
z-index: 2;
}
.partners-showcase__item img {
max-width: 100%;
max-height: 72px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(15%);
opacity: 0.9;
filter: grayscale(12%);
opacity: 0.92;
transition: filter 0.25s ease, opacity 0.25s ease;
}
@media (min-width: 992px) {
.partners-showcase__item img {
max-height: 88px;
}
}
.partners-showcase__item:hover img {
filter: grayscale(0%);
opacity: 1;
}
.partners-showcase__item--0 {
top: 0;
left: 0;
width: 44%;
transform: rotate(-2deg);
}
.partners-showcase__item--0 img { max-height: 76px; }
.partners-showcase__item--1 {
top: 4%;
right: 0;
width: 46%;
transform: rotate(3deg);
}
.partners-showcase__item--1 img { max-height: 84px; }
.partners-showcase__item--2 {
top: 36%;
left: 18%;
width: 52%;
transform: rotate(-1deg);
}
.partners-showcase__item--2 img { max-height: 96px; }
.partners-showcase__item--3 {
bottom: 2%;
left: 2%;
width: 42%;
transform: rotate(2deg);
}
.partners-showcase__item--3 img { max-height: 72px; }
.partners-showcase__item--4 {
bottom: 0;
right: 0;
width: 40%;
transform: rotate(-3deg);
}
.partners-showcase__item--4 img { max-height: 80px; }
@media (max-width: 767.98px) {
.partners-showcase__collage {
min-height: 260px;
max-width: 360px;
}
.partners-showcase__item--0 img,
.partners-showcase__item--1 img,
.partners-showcase__item--2 img,
.partners-showcase__item--3 img,
.partners-showcase__item--4 img {
max-height: 64px;
}
.partners-showcase__item--2 img {
max-height: 72px;
}
}
.partners-stats-badge {
display: inline-flex;
align-items: center;
@@ -223,8 +270,8 @@
<img class="w-full opacity-40" src="{{ asset('assets/img/photos/blurry.png') }}" alt="" loading="lazy">
</div>
<div class="partners-showcase relative z-[1]">
<div class="partners-showcase__grid">
@foreach(array_slice(array_filter($partners, fn ($p) => !empty($p['logo'])), 0, 7) as $featured)
<div class="partners-showcase__collage">
@foreach(array_slice(array_filter($partners, fn ($p) => !empty($p['logo'])), 0, 5) as $index => $featured)
@php
$featuredName = $featured['name'] ?? null;
if (!$featuredName && !empty($featured['url'])) {
@@ -233,9 +280,9 @@
}
@endphp
@if(!empty($featured['url']))
<a href="{{ $featured['url'] }}" target="_blank" rel="nofollow noopener" class="partners-showcase__item" title="{{ $featuredName }}">
<a href="{{ $featured['url'] }}" target="_blank" rel="nofollow noopener" class="partners-showcase__item partners-showcase__item--{{ $index }}" title="{{ $featuredName }}">
@else
<div class="partners-showcase__item">
<div class="partners-showcase__item partners-showcase__item--{{ $index }}">
@endif
<img
src="{{ asset('storage/' . $featured['logo']) }}"