add a section for platinum members as well as a call to action for becoming a member

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
This commit is contained in:
MTRNord 2025-12-16 15:54:43 +01:00
parent c62b6b4109
commit 7b7b03d361
No known key found for this signature in database
3 changed files with 159 additions and 9 deletions

View file

@ -1,5 +1,4 @@
#frontpage {
h2 {
margin-block: 1.38rem 1rem;
}
@ -273,6 +272,77 @@
}
}
#platinum-sponsor {
display: flex;
flex-direction: column;
gap: 28px;
padding: 80px;
overflow: hidden;
align-items: center;
color: #fff;
background-color: #000;
.row {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 400px), 1fr)
);
gap: 28px;
max-width: 55.8rem;
}
.membership-card {
max-width: 648px;
padding: 28px;
border-radius: 16px;
border: 1px #3c3f44 solid;
display: flex;
flex-direction: column;
text-align: center;
gap: 28px;
}
.membership-card__content {
flex-direction: column;
align-items: center;
gap: 16px;
display: flex;
img {
width: 148px;
height: 32px;
object-fit: contain;
}
}
.membership-card__extra {
border-top: 1px #3c3f44 solid;
padding-top: 16px;
}
}
#become-a-member {
display: flex;
flex-direction: column;
padding: 80px;
overflow: hidden;
align-items: center;
color: #000;
background-color: #fff;
.become-a-member__content {
max-width: 55.8rem;
flex-direction: column;
align-items: center;
gap: 28px;
display: flex;
p {
text-wrap: balance;
}
}
}
#buildonmatrix {
display: flex;
flex-direction: column;
@ -329,7 +399,10 @@
@media (max-width: 767px) {
top: 25px; // container padding
}
left: min(max(20%, calc(50% - 600px)), calc(50% - (var(--bridge-visual-width) / 2) - 300px));
left: min(
max(20%, calc(50% - 600px)),
calc(50% - (var(--bridge-visual-width) / 2) - 300px)
);
width: var(--bridge-visual-width);
height: 287px;
@ -340,7 +413,10 @@
position: absolute;
bottom: 50px;
left: min(max(20%, calc(50% - 600px)), calc(50% - (var(--homeserver-width) / 2) - 300px));
left: min(
max(20%, calc(50% - 600px)),
calc(50% - (var(--homeserver-width) / 2) - 300px)
);
width: var(--homeserver-width);
height: 235px;
@ -351,7 +427,10 @@
position: absolute;
bottom: 75px;
right: min(max(12%, calc(50% - 650px)), calc(50% - (var(--federation-visual-width) / 2) - 300px));
right: min(
max(12%, calc(50% - 650px)),
calc(50% - (var(--federation-visual-width) / 2) - 300px)
);
width: var(--federation-visual-width);
height: 880px;
@ -360,7 +439,7 @@
.call-to-action {
display: flex;
align-items: center;
gap: .5em;
gap: 0.5em;
img {
max-height: 1.5em;
@ -391,7 +470,6 @@
margin: 0 auto;
}
.sponsor_card {
display: flex;
flex-direction: column;
@ -444,7 +522,7 @@
#information-banner {
width: 100%;
padding: .4em 1em;
padding: 0.4em 1em;
background-color: var(--notice-box-color);
text-align: center;
z-index: 999;
@ -452,7 +530,7 @@
.notice-box {
text-align: center;
padding: .4em 1em;
padding: 0.4em 1em;
margin-bottom: 1rem;
background-color: var(--notice-box-color);
}

View file

@ -0,0 +1,49 @@
<svg
width="148"
height="32"
viewBox="0 0 148 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_1094_17621)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z"
fill="#0DBD8B"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.0747 7.45524C13.0747 6.8094 13.5994 6.28585 14.2465 6.28585C18.633 6.28585 22.1889 9.83438 22.1889 14.2117C22.1889 14.8575 21.6642 15.3811 21.0171 15.3811C20.3699 15.3811 19.8452 14.8575 19.8452 14.2117C19.8452 11.1261 17.3386 8.62464 14.2465 8.62464C13.5994 8.62464 13.0747 8.10108 13.0747 7.45524Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M24.5424 13.0422C25.1896 13.0422 25.7143 13.5658 25.7143 14.2116C25.7143 18.589 22.1584 22.1375 17.7719 22.1375C17.1247 22.1375 16.6001 21.6139 16.6001 20.9681C16.6001 20.3223 17.1247 19.7987 17.7719 19.7987C20.864 19.7987 23.3706 17.2973 23.3706 14.2116C23.3706 13.5658 23.8953 13.0422 24.5424 13.0422Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.9436 24.5448C18.9436 25.1906 18.419 25.7142 17.7718 25.7142C13.3853 25.7142 9.82943 22.1656 9.82943 17.7883C9.82943 17.1425 10.3541 16.6189 11.0013 16.6189C11.6484 16.6189 12.1731 17.1425 12.1731 17.7883C12.1731 20.8739 14.6797 23.3754 17.7718 23.3754C18.419 23.3754 18.9436 23.8989 18.9436 24.5448Z"
fill="white"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.45756 18.9578C6.81037 18.9578 6.28573 18.4342 6.28573 17.7884C6.28573 13.411 9.84164 9.86251 14.2281 9.86251C14.8753 9.86251 15.3999 10.3861 15.3999 11.0319C15.3999 11.6777 14.8753 12.2013 14.2281 12.2013C11.136 12.2013 8.62938 14.7027 8.62938 17.7884C8.62938 18.4342 8.10474 18.9578 7.45756 18.9578Z"
fill="white"
/>
<path
d="M56.2858 17.8571H45.0001C45.1334 19.038 45.562 19.9809 46.2858 20.6856C47.0096 21.3714 47.962 21.7142 49.143 21.7142C49.9239 21.7142 50.6287 21.5237 51.2572 21.1428C51.8858 20.7618 52.3334 20.2475 52.6001 19.5999H56.0287C55.5715 21.1047 54.7144 22.3237 53.4572 23.2571C52.2192 24.1714 50.7525 24.6285 49.0572 24.6285C46.8477 24.6285 45.0572 23.8952 43.6858 22.4285C42.3334 20.9618 41.6572 19.1047 41.6572 16.8571C41.6572 14.6666 42.343 12.8285 43.7144 11.3428C45.0858 9.85707 46.8572 9.11422 49.0287 9.11422C51.2001 9.11422 52.9525 9.84755 54.2858 11.3142C55.6382 12.7618 56.3144 14.5904 56.3144 16.7999L56.2858 17.8571ZM49.0287 11.8856C47.962 11.8856 47.0763 12.1999 46.3715 12.8285C45.6668 13.4571 45.2287 14.2952 45.0572 15.3428H52.943C52.7906 14.2952 52.3715 13.4571 51.6858 12.8285C51.0001 12.1999 50.1144 11.8856 49.0287 11.8856ZM58.6541 19.8571V2.85707H62.0541V19.9142C62.0541 20.6761 62.4732 21.0571 63.3113 21.0571L63.9113 21.0285V24.2571C63.5875 24.3142 63.2446 24.3428 62.8827 24.3428C61.416 24.3428 60.3398 23.9714 59.6541 23.2285C58.9875 22.4856 58.6541 21.3618 58.6541 19.8571ZM79.7456 17.8571H68.4599C68.5933 19.038 69.0218 19.9809 69.7456 20.6856C70.4694 21.3714 71.4218 21.7142 72.6028 21.7142C73.3837 21.7142 74.0885 21.5237 74.7171 21.1428C75.3456 20.7618 75.7933 20.2475 76.0599 19.5999H79.4885C79.0314 21.1047 78.1742 22.3237 76.9171 23.2571C75.679 24.1714 74.2123 24.6285 72.5171 24.6285C70.3075 24.6285 68.5171 23.8952 67.1456 22.4285C65.7933 20.9618 65.1171 19.1047 65.1171 16.8571C65.1171 14.6666 65.8028 12.8285 67.1742 11.3428C68.5456 9.85707 70.3171 9.11422 72.4885 9.11422C74.6599 9.11422 76.4123 9.84755 77.7456 11.3142C79.098 12.7618 79.7742 14.5904 79.7742 16.7999L79.7456 17.8571ZM72.4885 11.8856C71.4218 11.8856 70.5361 12.1999 69.8314 12.8285C69.1266 13.4571 68.6885 14.2952 68.5171 15.3428H76.4028C76.2504 14.2952 75.8314 13.4571 75.1456 12.8285C74.4599 12.1999 73.5742 11.8856 72.4885 11.8856ZM95.0854 15.7714V24.2856H91.6854V15.3999C91.6854 13.1523 90.752 12.0285 88.8854 12.0285C87.8758 12.0285 87.0663 12.3523 86.4568 12.9999C85.8663 13.6475 85.5711 14.5333 85.5711 15.6571V24.2856H82.1711V9.45707H85.3139V11.4285C85.6758 10.7618 86.2282 10.2095 86.9711 9.77136C87.7139 9.33326 88.6378 9.11422 89.7425 9.11422C91.7997 9.11422 93.2854 9.89517 94.1997 11.4571C95.4568 9.89517 97.133 9.11422 99.2282 9.11422C100.962 9.11422 102.295 9.65707 103.228 10.7428C104.162 11.8095 104.628 13.219 104.628 14.9714V24.2856H101.228V15.3999C101.228 13.1523 100.295 12.0285 98.4282 12.0285C97.3997 12.0285 96.5806 12.3618 95.9711 13.0285C95.3806 13.6761 95.0854 14.5904 95.0854 15.7714ZM121.537 17.8571H110.251C110.385 19.038 110.813 19.9809 111.537 20.6856C112.261 21.3714 113.213 21.7142 114.394 21.7142C115.175 21.7142 115.88 21.5237 116.508 21.1428C117.137 20.7618 117.585 20.2475 117.851 19.5999H121.28C120.823 21.1047 119.965 22.3237 118.708 23.2571C117.47 24.1714 116.004 24.6285 114.308 24.6285C112.099 24.6285 110.308 23.8952 108.937 22.4285C107.585 20.9618 106.908 19.1047 106.908 16.8571C106.908 14.6666 107.594 12.8285 108.965 11.3428C110.337 9.85707 112.108 9.11422 114.28 9.11422C116.451 9.11422 118.204 9.84755 119.537 11.3142C120.889 12.7618 121.565 14.5904 121.565 16.7999L121.537 17.8571ZM114.28 11.8856C113.213 11.8856 112.327 12.1999 111.623 12.8285C110.918 13.4571 110.48 14.2952 110.308 15.3428H118.194C118.042 14.2952 117.623 13.4571 116.937 12.8285C116.251 12.1999 115.365 11.8856 114.28 11.8856ZM127.105 9.45707V11.4285C127.448 10.7809 128.01 10.238 128.791 9.79993C129.591 9.34279 130.553 9.11422 131.677 9.11422C133.429 9.11422 134.781 9.64755 135.734 10.7142C136.705 11.7809 137.191 13.1999 137.191 14.9714V24.2856H133.791V15.3999C133.791 14.3523 133.543 13.5333 133.048 12.9428C132.572 12.3333 131.839 12.0285 130.848 12.0285C129.762 12.0285 128.905 12.3523 128.277 12.9999C127.667 13.6475 127.362 14.5428 127.362 15.6856V24.2856H123.962V9.45707H127.105ZM147.121 21.2571V24.1999C146.702 24.3142 146.111 24.3714 145.349 24.3714C142.454 24.3714 141.006 22.9142 141.006 19.9999V12.1714H138.749V9.45707H141.006V5.59993H144.406V9.45707H147.178V12.1714H144.406V19.6571C144.406 20.819 144.959 21.3999 146.063 21.3999L147.121 21.2571Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0_1094_17621">
<rect width="148" height="32" fill="white" />
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 6.3 KiB

View file

@ -46,6 +46,30 @@
<img src="/element-call.webp" id="complex-apps-image"
alt="A conversation between four people on Element Call, a VoIP conference tool based on Matrix." />
</div>
<div id="platinum-sponsor" class="section">
<h2>Platinum sponsor</h2>
<div class="row">
<div class="membership-card">
<div class="membership-card__content">
<img alt="Element.io Logo" src="images/ElementLogoMarkInvertedText.svg"></img>
<p>Element provides community and pro editions of its apps and backends.</p>
<a href="https://element.io/for-matrix" class="call-to-action inverted">Products</a>
</div>
<div class="membership-card__extra">
<p>Learn more about the relationship between <a href="https://element.io/matrix-relationship">Element and Matrix</a></p>
</div>
</div>
</div>
</div>
<div id="become-a-member" class="section">
<div class="become-a-member__content">
<h2>Become a member</h2>
<p>The Matrix.org Foundation members guide and support the Foundation's focus.</p>
<a href="/membership" class="call-to-action">Support us</a>
</div>
</div>
<div id="buildonmatrix" class="section">
<img class="logo" src="images/matrix-favicon.svg" alt="The Matrix Logo" />
<img id="bridge_visual" src="/assets/frontpage/bridge-visual.svg"
@ -67,4 +91,3 @@
</div>
</div>
{% endblock content %}