Enhance: 50% bigger partner icons, text next to icon, smooth logo carousel animation

This commit is contained in:
2026-06-24 18:55:49 +00:00
parent 7871bacb8a
commit 7180fd190d
2 changed files with 177 additions and 82 deletions
+72
View File
@@ -693,6 +693,7 @@
<section class="partner-banner" id="partners"> <section class="partner-banner" id="partners">
<div class="container"> <div class="container">
<h3>Trusted by</h3> <h3>Trusted by</h3>
<div class="partner-carousel-wrap">
<div class="partner-grid"> <div class="partner-grid">
<a <a
href="https://paraguayservice.com/" href="https://paraguayservice.com/"
@@ -763,6 +764,77 @@
/> />
<span>Start Paraguay</span> <span>Start Paraguay</span>
</a> </a>
<!-- duplicate for seamless scroll -->
<a
href="https://paraguayservice.com/"
target="_blank"
rel="noopener"
class="partner-item"
>
<img
src="images/paraguayservice-favicon.png"
alt="Paraguay Service"
/>
<span>Paraguay Service</span>
</a>
<a
href="https://estancia-agape.com/"
target="_blank"
rel="noopener"
class="partner-item"
>
<img
src="images/estancia-agape-favicon.png"
alt="Estancia Agape"
/>
<span>Estancia Agape</span>
</a>
<a
href="https://kate-group.de/"
target="_blank"
rel="noopener"
class="partner-item"
>
<img
src="images/kate-group-favicon.png"
alt="KATE Group"
/>
<span>KATE Group</span>
</a>
<a
href="https://agilnova.de/"
target="_blank"
rel="noopener"
class="partner-item"
>
<img src="images/agilnova-favicon.png" alt="agilnova" />
<span>agilnova</span>
</a>
<a
href="https://006-002-bc5bb1cb-984d-42c3-8580-63439f4924c5.odoo4projects.com/"
target="_blank"
rel="noopener"
class="partner-item"
>
<img
src="images/ramani-kenya-logo.png"
alt="Ramani Kenya"
/>
<span>Ramani Kenya</span>
</a>
<a
href="https://startparaguay.net/"
target="_blank"
rel="noopener"
class="partner-item"
>
<img
src="images/startparaguay-favicon.png"
alt="Start Paraguay"
/>
<span>Start Paraguay</span>
</a>
</div>
</div> </div>
</div> </div>
</section> </section>
+35 -12
View File
@@ -682,6 +682,7 @@ img {
padding: 2rem 0; padding: 2rem 0;
background: #f6f5f4; background: #f6f5f4;
text-align: center; text-align: center;
overflow: hidden;
} }
.partner-banner h3 { .partner-banner h3 {
font-family: "Inter Tight", sans-serif; font-family: "Inter Tight", sans-serif;
@@ -692,39 +693,61 @@ img {
letter-spacing: 0.08em; letter-spacing: 0.08em;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.partner-carousel-wrap {
overflow: hidden;
width: 100%;
}
.partner-grid { .partner-grid {
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: center; gap: 3rem;
gap: 2rem; width: max-content;
animation: partnerScroll 40s linear infinite;
}
.partner-carousel-wrap:hover .partner-grid {
animation-play-state: paused;
}
@keyframes partnerScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
} }
.partner-item { .partner-item {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: center; align-items: center;
gap: 0.4rem; gap: 0.6rem;
text-decoration: none; text-decoration: none;
color: rgba(33, 37, 41, 0.55); color: rgba(33, 37, 41, 0.55);
font-size: 0.75rem; font-size: 0.85rem;
font-weight: 500;
white-space: nowrap;
transition: opacity 0.2s; transition: opacity 0.2s;
flex-shrink: 0;
} }
.partner-item:hover { .partner-item:hover {
opacity: 0.7; opacity: 0.7;
} }
.partner-item img { .partner-item img {
width: 32px; width: 48px;
height: 32px; height: 48px;
border-radius: 6px; border-radius: 8px;
object-fit: contain; object-fit: contain;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.partner-grid { .partner-grid {
gap: 1.25rem; gap: 2rem;
} }
.partner-item img { .partner-item img {
width: 28px; width: 42px;
height: 28px; height: 42px;
}
.partner-item {
font-size: 0.75rem;
gap: 0.4rem;
} }
} }
/* ---- Blog Section ---- */ /* ---- Blog Section ---- */