diff --git a/src/css/common.css b/src/css/common.css index f656c14..e3fa91f 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -130,11 +130,18 @@ body{overflow-x:hidden;} .partners-logo-cell img { max-width: 75%; max-height: 28px; width: auto; height: auto; object-fit: contain;transition:0.3s all;} .partners-logo-cell img:hover{transform: scale(1.1);transition:0.3s all;} +.cta-box { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 48px 56px; border-radius: 24px; overflow: hidden; background: var(--color-primary); } +.cta-bg { position: absolute; inset: 0; background-size: 75%; background-position: right 100%; background-repeat: no-repeat; opacity: 0.28; mask-image: linear-gradient(to right, transparent 20%, black 70%); -webkit-mask-image: linear-gradient(to right, transparent 20%, black 70%); } +.cta-content { position: relative; z-index: 1; } +.cta-eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); } +.cta-title { margin: 0; font-size: clamp(22px,2.2vw,30px); font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1.25; } +.cta-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 52px; padding: 0 28px; background: #fff; border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--color-primary); text-decoration: none; white-space: nowrap; letter-spacing: -.01em; flex-shrink: 0; } + @media (max-width: 768px) { .partners-wrap {margin-top:-2rem; padding: 0 0 4rem 0; } .partners-title-block { padding: 3rem 0 2rem; text-align: left; align-items: flex-start; } .partners-section-row { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; } -.partners-sidebar { position: static; flex-direction: row; align-items: baseline; gap: 12px; } +.partners-sidebar { position: static; flex-direction: column; align-items: flex-start; gap: 4px; } .partners-heading { font-size:24px; } .partners-heading br { display: none; } .partners-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -147,6 +154,8 @@ body{overflow-x:hidden;} .partners-grid--5 .partners-logo-cell:nth-last-child(-n+5) { border-bottom: 1px solid #e8e8e8; } .partners-grid--5 .partners-logo-cell:nth-child(3n) { border-right: none; } .partners-grid--5 .partners-logo-cell:nth-last-child(-n+3) { border-bottom: none; } +.cta-box { padding: 32px 28px; } +.cta-bg { background-size: cover; background-position: center; mask-image: linear-gradient(to bottom, transparent 0%, black 40%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%); } } diff --git a/src/pages/company/PartnersPage.jsx b/src/pages/company/PartnersPage.jsx index 038dacd..f346a04 100644 --- a/src/pages/company/PartnersPage.jsx +++ b/src/pages/company/PartnersPage.jsx @@ -27,12 +27,32 @@ const CLIENTS = [ { id: "molit", logo: "24" }, ]; -const PARTNERS = ["02", "03", "04", "05", "06", "07", "08", "10", "11", "12", "13", "14", "18", "19", "22"]; +const PARTNERS = [ + "02", + "03", + "04", + "05", + "06", + "07", + "08", + "10", + "11", + "12", + "13", + "14", + "18", + "19", + "22", +]; function LogoCard({ logo, basePath }) { return (
+
Trusted by Many,
@@ -108,7 +141,9 @@ export default function PartnersPage() {
Built for the Future
Clients
Partners
- Become a Partner -
-Become a Partner
+