Merge pull request #3087 from matrix-org/MTRNord/frontpage-plat-members

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

Author: MTRNord

LICENSES/LicenseRef-ElementLogo.txt

@@ -0,0 +1 @@
+All Rights Reserved. The Element name, logo and device are registered trade marks of Element Creations Ltd.

sass/_index.scss

@@ -273,6 +273,87 @@
         }
     }
 
+    #platinum-sponsor {
+        display: flex;
+        flex-direction: column;
+        gap: 28px;
+        padding: 80px;
+        overflow: hidden;
+        align-items: center;
+        color: #fff;
+        background-color: #000;
+        text-align: center;
+
+        h2 {
+            font-size: 2.5rem;
+        }
+
+        .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: 42px;
+                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;
+
+        h2 {
+            font-size: 2.5rem;
+        }
+
+        #become-a-member__content {
+            max-width: 55.8rem;
+            flex-direction: column;
+            align-items: center;
+            gap: 28px;
+            display: flex;
+            text-align: center;
+
+            p {
+                text-wrap: balance;
+            }
+        }
+    }
+
     #buildonmatrix {
         display: flex;
         flex-direction: column;

static/images/element-creators-of-matrix--dark.svg

@@ -0,0 +1,3 @@
+# SPDX-FileCopyrightText: 2025 Element Creations Ltd
+#
+# SPDX-License-Identifier: LicenseRef-ElementLogo

static/images/element-creators-of-matrix--dark.svg.license

@@ -46,6 +46,25 @@ <h2>Build advanced, rich communication applications on top of Matrix.</h2>
         <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 member</h2>
+        <div class="row">
+            <div class="membership-card">
+                <a target="_blank" rel="noreferrer noopener" href="https://element.io/built-on-matrix" class="membership-card__content">
+                    <img alt="Element.io Logo" src="images/element-creators-of-matrix--dark.svg"></img>
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <div id="become-a-member" class="section">
+       <div id="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 +86,3 @@ <h2>Build on Matrix</h2>
     </div>
 </div>
 {% endblock content %}
-