From 2add954f9e1e5b47b514725a8f67fd8e02fb9a49 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Fri, 20 Mar 2026 12:29:41 +0100 Subject: [PATCH 1/6] rework the frontpage to be more concise and useful Signed-off-by: MTRNord --- sass/_index.scss | 362 ++++++++++++------ .../element-creators-of-matrix--light.svg | 26 ++ ...ment-creators-of-matrix--light.svg.license | 3 + templates/index.html | 107 ++++-- 4 files changed, 355 insertions(+), 143 deletions(-) create mode 100644 static/images/element-creators-of-matrix--light.svg create mode 100644 static/images/element-creators-of-matrix--light.svg.license diff --git a/sass/_index.scss b/sass/_index.scss index 8a4f2885c..a9c93dc51 100644 --- a/sass/_index.scss +++ b/sass/_index.scss @@ -43,6 +43,26 @@ height: 86px; margin: 0 auto 2rem auto; } + + .hero-description { + color: #fff; + text-align: center; + max-width: 40rem; + margin: 1rem auto 0 auto; + padding: 0 30px; + font-size: 1.125rem; + opacity: 0.9; + } + + .hero-cta-row { + justify-content: center; + margin-top: 1.5rem; + + @media (max-width: 767px) { + flex-direction: column; + align-items: center; + } + } } #hero_curve1 { @@ -102,174 +122,276 @@ } } - #use-case-personal { - background: url("/assets/frontpage/personal-bg.svg"); - background-size: 100% 100%; + #matrix-difference { + background-color: #000; + color: #fff; + padding: 80px 2rem; + text-align: center; + + h2 { + font-size: 2.5rem; + font-weight: 700; + margin: 0 auto 2rem auto; + color: #fff; - @media (max-width: 59rem) { - background-image: url("/assets/frontpage/personal-bg-mobile.svg"); - background-size: 100% 241px; - padding-inline: 1rem; + @media (max-width: 767px) { + font-size: 2.125rem; + } } - background-repeat: no-repeat; - background-position-y: bottom -20px; + .matrix-features { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 28px; + max-width: 60rem; + margin: 0 auto; - position: relative; + @media (max-width: 767px) { + grid-template-columns: 1fr; + } + } + + .feature-item { + border: 1px solid #3c3f44; + border-radius: 14px; + padding: 28px; + text-align: left; + transition: border-color 0.2s ease; + + &:hover { + border-color: #666; + } + + h3 { + font-size: 1.5rem; + font-weight: 700; + margin-top: 0; + margin-bottom: 0.75rem; + color: #fff; + } + + p { + color: #fff; + margin: 0; + line-height: 1.75; + font-size: 1rem; + } + } + } + + #what-is-matrix { + display: flex; + flex-direction: column; + padding: 80px 2rem; overflow: hidden; + align-items: center; + color: #000; + background-color: #fff; - padding-inline: 2rem; - padding-bottom: 175px; + h2 { + font-size: 2.5rem; + + @media (max-width: 767px) { + font-size: 2.125rem; + } + } - .use-case-personal-content { + #what-is-matrix__content { + max-width: 55.8rem; + flex-direction: column; + align-items: center; + gap: 28px; display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1000px; - margin-inline: auto; + text-align: center; + + p { + text-wrap: balance; + font-size: 1.125rem; + line-height: 1.75; + } + } + } + + #blog-preview { + background-color: #000; + color: #fff; + padding: 80px 2rem; + text-align: center; + + h2 { + font-size: 2.5rem; + font-weight: 700; + margin: 0 auto 1rem auto; + color: #fff; + + @media (max-width: 767px) { + font-size: 2.125rem; + } + } + + .blog-preview-description { + max-width: 40rem; + margin: 0 auto 2rem auto; + color: rgba(255, 255, 255, 0.8); + font-size: 1.125rem; + } + + .blog-preview-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 28px; + max-width: 60rem; + margin: 0 auto 2rem auto; + text-align: left; @media (max-width: 59rem) { - flex-direction: column-reverse; - align-items: center; + grid-template-columns: 1fr; } } - .col { + .blog-preview-card { + border: 1px solid #3c3f44; + border-radius: 14px; + padding: 28px; display: flex; flex-direction: column; - max-height: 418px; - justify-content: center; - max-width: 27.9rem; + gap: 12px; + transition: border-color 0.2s ease; - h2 { - display: inline; - color: #000; - font-size: 2.5rem; + &:hover { + border-color: #666; + } + + h3 { + font-size: 1.125rem; font-weight: 700; + margin: 0; + line-height: 1.4; - @media (max-width: 59rem) { - margin-top: 2rem; - text-align: center; - } + a { + color: #fff; - @media (max-width: 767px) { - font-size: 2.125rem; + &:hover { + color: rgba(255, 255, 255, 0.7); + } } } - } - img { - margin: auto 0px; + p { + color: rgba(255, 255, 255, 0.7); + font-size: 0.9375rem; + margin: 0; + line-height: 1.6; + flex: 1; + } + } - flex: auto; - max-width: 470px; - aspect-ratio: 470 / 418; + .blog-preview-meta { + display: flex; + align-items: center; + gap: 0.75rem; + flex-wrap: wrap; + } - @media (max-width: 59rem) { - margin: 0px auto; - } + .blog-preview-date { + color: rgba(255, 255, 255, 0.6); + font-size: 0.875rem; + font-weight: 500; } - #personal_bottom { - position: absolute; - bottom: -340px; - height: 400px; - background-color: black; - border-radius: 100% 100%; + .blog-preview-tag { + font-size: 0.75rem; + font-weight: 600; + padding: 0.2em 0.6em; + border-radius: 4px; + background-color: #333; + color: #fff; + } - width: 150%; - left: -25%; + .blog-preview-readmore { + color: rgba(255, 255, 255, 0.7); + font-size: 0.875rem; + font-weight: 600; + margin-top: auto; + text-decoration: none; - @media (max-width: 767px) { - width: 200%; - left: -50%; + &:hover { + color: #fff; + text-decoration: underline; } } } - #use-case-community { - background-color: #000; - - display: flex; - flex-direction: column; - justify-content: space-around; - + #use-cases { + background-color: #f8f8f8; + padding: 80px 2rem; text-align: center; - padding-top: 60px; - padding-bottom: 100px; - padding-inline: 2rem; h2 { - color: #fff; font-size: 2.5rem; font-weight: 700; - max-width: 36rem; - margin: 0 auto; - } + margin: 0 auto 2rem auto; + color: #000; - .call-to-action { - margin-block: 2em 4em; + @media (max-width: 767px) { + font-size: 2.125rem; + } } - img { + .use-cases-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 28px; + max-width: 60rem; margin: 0 auto; - aspect-ratio: 756 / 487; - flex: auto; - max-width: 756px; - } - } - #complex-apps { - display: flex; - flex-direction: row; - justify-content: space-between; - gap: 2rem; - max-width: 1200px; - margin-inline: auto; - padding: 10rem 2rem; - - @media (max-width: 64rem) { - flex-direction: column-reverse; - align-items: center; + @media (max-width: 59rem) { + grid-template-columns: 1fr; + } } - .col { + .use-case-card { + border: 1px solid #d2d2d2; + border-radius: 14px; + padding: 28px; display: flex; flex-direction: column; - max-height: 418px; - justify-content: center; - max-width: 27.9rem; - margin-inline: auto; + gap: 16px; + text-align: left; + background-color: #fff; + transition: border-color 0.2s ease; - @media (max-width: 767px) { - max-width: none; + &:hover { + border-color: #888; } - h2 { - display: inline; - color: #000; - font-size: 2.5rem; - font-weight: 700; - - @media (max-width: 64rem) { - text-align: center; - } + img { + width: 100%; + aspect-ratio: 16 / 9; + object-fit: cover; + border-radius: 8px; + background-color: #eee; + } - @media (max-width: 767px) { - font-size: 2.125rem; - margin: 0 auto 2rem auto; - } + h3 { + font-size: 1.5rem; + font-weight: 700; + margin: 0; + color: #000; + } - margin: 0 0 2rem 0; + p { + color: #000; + margin: 0; + line-height: 1.75; + flex: 1; } - } - #complex-apps-image { - outline: 20px solid black; - border-radius: 30px; - flex: auto; - max-width: min(576px, 100%); - margin: 20px; + .call-to-action { + align-self: flex-start; + font-size: 0.9375rem; + padding: .45em 1.4em; + } } } @@ -277,11 +399,11 @@ display: flex; flex-direction: column; gap: 28px; - padding: 80px; + padding: 80px 80px 40px 80px; overflow: hidden; align-items: center; - color: #fff; - background-color: #000; + color: #000; + background-color: #fff; text-align: center; h2 { @@ -302,7 +424,7 @@ max-width: 648px; padding: 28px; border-radius: 16px; - border: 1px #3c3f44 solid; + border: 1px #d2d2d2 solid; display: flex; flex-direction: column; text-align: center; @@ -330,7 +452,7 @@ #become-a-member { display: flex; flex-direction: column; - padding: 80px; + padding: 40px 80px 80px 80px; overflow: hidden; align-items: center; color: #000; diff --git a/static/images/element-creators-of-matrix--light.svg b/static/images/element-creators-of-matrix--light.svg new file mode 100644 index 000000000..3d4854639 --- /dev/null +++ b/static/images/element-creators-of-matrix--light.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/element-creators-of-matrix--light.svg.license b/static/images/element-creators-of-matrix--light.svg.license new file mode 100644 index 000000000..2615c7454 --- /dev/null +++ b/static/images/element-creators-of-matrix--light.svg.license @@ -0,0 +1,3 @@ +# SPDX-FileCopyrightText: 2025 Element Creations Ltd +# +# SPDX-License-Identifier: LicenseRef-ElementLogo diff --git a/templates/index.html b/templates/index.html index 7e0442693..e740229cc 100644 --- a/templates/index.html +++ b/templates/index.html @@ -8,48 +8,109 @@
The Matrix Logo

An open network for secure, decentralised communication

+

Connect with anyone, anywhere through an open protocol that gives you control over your conversations and data.

+
+ Try Matrix + Learn More +
-
-
-
-

Chat with friends, family, communities and co-workers

-
- Start a conversation - Support us -
+ +
+
+

What is Matrix?

+

Matrix is an open standard for interoperable, decentralised, real-time communication over the Internet. It provides a way for anyone to communicate securely across different platforms and services—without being locked into a single vendor.

+

From individual users to large organisations, Matrix provides the tools for secure, private communication that you control.

+ Learn More About Matrix +
+
+ +
+

The Matrix Difference

+
+
+

True Privacy by Design

+

Not just end-to-end encrypted, but with cross-signed device verification and decentralised key management. No backdoors, no data harvesting, no surveillance.

+
+
+

Own Your Conversations

+

Host your own server or choose one you trust. No single corporation owns Matrix—it's a global open network where you control your data and who can access it.

+
+
+

One Network, Many Apps

+

Choose from dozens of compatible apps and servers built by the community. Matrix bridges to other platforms so you can reach everyone, everywhere.

+
+
+

Community Powered

+

Built by its community, for its community. An open, transparent project governed by the Matrix.org Foundation—not a corporate walled garden.

- An artist view of a chat timeline.
-
-
-

A cozy, safe, supercharged place for your community

-
- Reclaim your Space + +
+

Built for everyone

+
+
+ +

Individuals & families

+

Chat securely with friends, family, and co-workers. Your conversations, on your terms, with full end-to-end encryption.

+ Start a conversation +
+
+ +

Communities & organisations

+

Create a cozy, supercharged space for your community. Own your data, set your rules, and never lose access to your history.

+ Reclaim your Space +
+
+ Element Call — a VoIP application built on Matrix +

Developers & businesses

+

Build rich communication applications on an open standard. Full interoperability, no vendor lock-in, backed by a global ecosystem.

+ Start building +
- An artist view of a chat community.
-
-
-

Build advanced, rich communication applications on top of Matrix.

-
- Start building apps + + {% set blog = get_section(path="blog/_index.md") %} +
+

Latest from the Blog

+

Stay up to date with the latest news, updates, and insights from the Matrix community.

+
+ {% set_global blog_count = 0 %} + {% for page in blog.pages %} + {% if page.extra.hide_from_blog %}{% continue %}{% endif %} + {% if blog_count >= 3 %}{% break %}{% endif %} + {% set_global blog_count = blog_count + 1 %} +
+
+ {{ page.date | date(format="%Y-%m-%d") }} + {% if page.taxonomies.category %} + {% for cat in page.taxonomies.category %} + {{ cat }} + {% endfor %} + {% endif %} +
+

{{ page.title }}

+ {% if page.description %} +

{{ page.description }}

+ {% endif %} + Read more →
+ {% endfor %}
- A conversation between four people on Element Call, a VoIP conference tool based on Matrix. + View All Posts
+

Platinum member

- Element.io Logo + Element.io Logo
From 09c3195e7f16558f9da250dfcc702605d20a28df Mon Sep 17 00:00:00 2001 From: MTRNord Date: Fri, 20 Mar 2026 14:11:10 +0100 Subject: [PATCH 2/6] add a TWIM section for #3222 Signed-off-by: MTRNord --- sass/_index.scss | 104 +++++++++++++++++++++++++++++++++++++++++++ templates/index.html | 26 +++++++++++ 2 files changed, 130 insertions(+) diff --git a/sass/_index.scss b/sass/_index.scss index a9c93dc51..e42d412f2 100644 --- a/sass/_index.scss +++ b/sass/_index.scss @@ -212,6 +212,110 @@ } } + #twim { + background-color: #fff; + padding: 80px 2rem; + + #twim__content { + max-width: 60rem; + margin: 0 auto; + display: flex; + gap: 48px; + align-items: flex-start; + + @media (max-width: 767px) { + flex-direction: column; + } + } + + .twim__text { + flex: 1; + } + + .twim__eyebrow { + font-size: 0.875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--color-text-light); + margin-bottom: 0.5rem; + } + + h2 { + font-size: 2.5rem; + font-weight: 700; + color: #000; + margin-block: 0 1rem; + + @media (max-width: 767px) { + font-size: 2.125rem; + } + } + + p { + color: #000; + font-size: 1.125rem; + line-height: 1.75; + } + + .twim__ctas { + justify-content: flex-start; + margin-top: 1.5rem; + } + + .twim__latest { + background-color: #000; + color: #fff; + border-radius: 14px; + padding: 28px; + display: flex; + flex-direction: column; + gap: 12px; + text-decoration: none; + width: 280px; + flex-shrink: 0; + transition: background-color 0.2s ease; + + @media (max-width: 767px) { + width: 100%; + } + + &:hover { + background-color: #222; + } + + .twim__latest-eyebrow { + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + color: rgba(255, 255, 255, 0.6); + margin: 0; + } + + h3 { + font-size: 1.125rem; + font-weight: 700; + color: #fff; + margin: 0; + line-height: 1.4; + } + + .twim__latest-date { + font-size: 0.875rem; + color: rgba(255, 255, 255, 0.6); + margin: 0; + } + + .twim__readmore { + font-size: 0.875rem; + font-weight: 600; + color: rgba(255, 255, 255, 0.8); + margin-top: auto; + } + } + } + #blog-preview { background-color: #000; color: #fff; diff --git a/templates/index.html b/templates/index.html index e740229cc..6686e457c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -76,6 +76,32 @@

Developers & businesses

{% set blog = get_section(path="blog/_index.md") %} +
+
+
+

Every Friday

+

This Week in Matrix

+

A community-curated weekly digest of the latest news, releases, and projects from across the Matrix ecosystem. Find out what's happening, discover new apps and servers, and see how you can get involved.

+
+ Browse all editions + Contribute in #twim:matrix.org +
+
+ {% set_global twim_found = false %} + {% for page in blog.pages %} + {% if not twim_found and page.taxonomies.category and "This Week in Matrix" in page.taxonomies.category %} + {% set_global twim_found = true %} + +

Latest edition

+

{{ page.title }}

+

{{ page.date | date(format="%B %d, %Y") }}

+ Read more → + + {% endif %} + {% endfor %} +
+
+

Latest from the Blog

Stay up to date with the latest news, updates, and insights from the Matrix community.

From 880042ef1f8dd67798b8af0af0d10bdd2587bbee Mon Sep 17 00:00:00 2001 From: MTRNord Date: Fri, 20 Mar 2026 14:15:53 +0100 Subject: [PATCH 3/6] improve the card layouts for the blogposts and twim section Signed-off-by: MTRNord --- sass/_index.scss | 6 ++++-- templates/index.html | 6 ++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/sass/_index.scss b/sass/_index.scss index e42d412f2..3927f2a8c 100644 --- a/sass/_index.scss +++ b/sass/_index.scss @@ -266,6 +266,7 @@ .twim__latest { background-color: #000; color: #fff; + border: 1px solid #d2d2d2; border-radius: 14px; padding: 28px; display: flex; @@ -274,14 +275,14 @@ text-decoration: none; width: 280px; flex-shrink: 0; - transition: background-color 0.2s ease; + transition: border-color 0.2s ease; @media (max-width: 767px) { width: 100%; } &:hover { - background-color: #222; + border-color: #888; } .twim__latest-eyebrow { @@ -410,6 +411,7 @@ border-radius: 4px; background-color: #333; color: #fff; + white-space: nowrap; } .blog-preview-readmore { diff --git a/templates/index.html b/templates/index.html index 6686e457c..e4778194c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -113,11 +113,9 @@

Latest from the Blog

{% set_global blog_count = blog_count + 1 %}
- {{ page.date | date(format="%Y-%m-%d") }} + {{ page.date | date(format="%B %d, %Y") }} {% if page.taxonomies.category %} - {% for cat in page.taxonomies.category %} - {{ cat }} - {% endfor %} + {{ page.taxonomies.category | first }} {% endif %}

{{ page.title }}

From 186895fa0abd35f40aefec49f53df5a9f2f6709f Mon Sep 17 00:00:00 2001 From: MTRNord Date: Fri, 20 Mar 2026 14:23:19 +0100 Subject: [PATCH 4/6] link to twim-guide on the buttons in the twim section Signed-off-by: MTRNord --- templates/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/index.html b/templates/index.html index e4778194c..92317ad78 100644 --- a/templates/index.html +++ b/templates/index.html @@ -81,10 +81,10 @@

Developers & businesses

Every Friday

This Week in Matrix

-

A community-curated weekly digest of the latest news, releases, and projects from across the Matrix ecosystem. Find out what's happening, discover new apps and servers, and see how you can get involved.

+

A community-curated weekly digest of the latest news, releases, and projects from across the Matrix ecosystem. Find out what's happening, discover new apps and servers, and share your own work in #thisweekin:matrix.org.

Browse all editions - Contribute in #twim:matrix.org + How to contribute
{% set_global twim_found = false %} From 6d1154c0b81ea7ab7d9b086acb5fcb05f3e22662 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Wed, 25 Mar 2026 09:46:36 +0100 Subject: [PATCH 5/6] Differenciate Platinum Member and Become a Member Signed-off-by: MTRNord --- sass/_index.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/sass/_index.scss b/sass/_index.scss index 3927f2a8c..b809635ac 100644 --- a/sass/_index.scss +++ b/sass/_index.scss @@ -506,6 +506,7 @@ flex-direction: column; gap: 28px; padding: 80px 80px 40px 80px; + background-color: #f8f8f8; overflow: hidden; align-items: center; color: #000; From ca15334f6f0880da2d9bfcfffffc47ea59407d88 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Wed, 25 Mar 2026 09:47:07 +0100 Subject: [PATCH 6/6] make the platinum member card as a whole clickable and have the same hover semantics Signed-off-by: MTRNord --- sass/_index.scss | 7 ++++++- templates/index.html | 8 ++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/sass/_index.scss b/sass/_index.scss index b809635ac..04bfee1db 100644 --- a/sass/_index.scss +++ b/sass/_index.scss @@ -530,12 +530,17 @@ .membership-card { max-width: 648px; padding: 28px; - border-radius: 16px; + border-radius: 14px; border: 1px #d2d2d2 solid; display: flex; flex-direction: column; text-align: center; gap: 28px; + transition: border-color 0.2s ease; + + &:hover { + border-color: #888; + } } .membership-card__content { diff --git a/templates/index.html b/templates/index.html index 92317ad78..0e8e4a999 100644 --- a/templates/index.html +++ b/templates/index.html @@ -132,11 +132,11 @@

{{ page.title }}

Platinum member

-
- + +
Element.io Logo - -
+
+