diff --git a/resources/views/templates/corporate/partners.blade.php b/resources/views/templates/corporate/partners.blade.php index 18db622..7b4c565 100644 --- a/resources/views/templates/corporate/partners.blade.php +++ b/resources/views/templates/corporate/partners.blade.php @@ -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 @@
-
- @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 $featuredName = $featured['name'] ?? null; if (!$featuredName && !empty($featured['url'])) { @@ -233,9 +280,9 @@ } @endphp @if(!empty($featured['url'])) - + @else -
+
@endif