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; position: relative;
z-index: 1; z-index: 1;
} }
.partners-showcase__grid { .partners-showcase__collage {
display: grid; position: relative;
grid-template-columns: repeat(3, 1fr); width: 100%;
gap: 2rem 1.5rem; max-width: 540px;
align-items: center; min-height: 300px;
justify-items: center; margin: 0 auto;
} }
@media (min-width: 768px) { @media (min-width: 992px) {
.partners-showcase__grid { .partners-showcase__collage {
grid-template-columns: repeat(4, 1fr); min-height: 340px;
gap: 2.25rem 1.75rem; max-width: none;
margin: 0;
} }
} }
.partners-showcase__item { .partners-showcase__item {
position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; padding: 0.25rem;
padding: 0.5rem;
text-decoration: none; text-decoration: none;
transition: transform 0.25s ease; transition: transform 0.3s ease, filter 0.3s ease;
} }
.partners-showcase__item:hover { .partners-showcase__item:hover {
transform: scale(1.06); transform: scale(1.08) !important;
z-index: 2;
} }
.partners-showcase__item img { .partners-showcase__item img {
max-width: 100%; max-width: 100%;
max-height: 72px;
width: auto; width: auto;
height: auto; height: auto;
object-fit: contain; object-fit: contain;
filter: grayscale(15%); filter: grayscale(12%);
opacity: 0.9; opacity: 0.92;
transition: filter 0.25s ease, opacity 0.25s ease; 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 { .partners-showcase__item:hover img {
filter: grayscale(0%); filter: grayscale(0%);
opacity: 1; 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 { .partners-stats-badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -223,8 +270,8 @@
<img class="w-full opacity-40" src="{{ asset('assets/img/photos/blurry.png') }}" alt="" loading="lazy"> <img class="w-full opacity-40" src="{{ asset('assets/img/photos/blurry.png') }}" alt="" loading="lazy">
</div> </div>
<div class="partners-showcase relative z-[1]"> <div class="partners-showcase relative z-[1]">
<div class="partners-showcase__grid"> <div class="partners-showcase__collage">
@foreach(array_slice(array_filter($partners, fn ($p) => !empty($p['logo'])), 0, 7) as $featured) @foreach(array_slice(array_filter($partners, fn ($p) => !empty($p['logo'])), 0, 5) as $index => $featured)
@php @php
$featuredName = $featured['name'] ?? null; $featuredName = $featured['name'] ?? null;
if (!$featuredName && !empty($featured['url'])) { if (!$featuredName && !empty($featured['url'])) {
@@ -233,9 +280,9 @@
} }
@endphp @endphp
@if(!empty($featured['url'])) @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 @else
<div class="partners-showcase__item"> <div class="partners-showcase__item partners-showcase__item--{{ $index }}">
@endif @endif
<img <img
src="{{ asset('storage/' . $featured['logo']) }}" src="{{ asset('storage/' . $featured['logo']) }}"