diff --git a/sass/_index.scss b/sass/_index.scss index 8a4f2885c..04bfee1db 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,382 @@ } } - #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; - overflow: hidden; + @media (max-width: 767px) { + grid-template-columns: 1fr; + } + } - padding-inline: 2rem; - padding-bottom: 175px; + .feature-item { + border: 1px solid #3c3f44; + border-radius: 14px; + padding: 28px; + text-align: left; + transition: border-color 0.2s ease; - .use-case-personal-content { - display: flex; - flex-direction: row; - justify-content: space-between; - max-width: 1000px; - margin-inline: auto; + &:hover { + border-color: #666; + } - @media (max-width: 59rem) { - flex-direction: column-reverse; - align-items: center; + 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; } } + } - .col { - display: flex; + #what-is-matrix { + display: flex; + flex-direction: column; + padding: 80px 2rem; + overflow: hidden; + align-items: center; + color: #000; + background-color: #fff; + + h2 { + font-size: 2.5rem; + + @media (max-width: 767px) { + font-size: 2.125rem; + } + } + + #what-is-matrix__content { + max-width: 55.8rem; flex-direction: column; - max-height: 418px; - justify-content: center; - max-width: 27.9rem; + align-items: center; + gap: 28px; + display: flex; + text-align: center; - h2 { - display: inline; - color: #000; - font-size: 2.5rem; - font-weight: 700; + p { + text-wrap: balance; + font-size: 1.125rem; + line-height: 1.75; + } + } + } - @media (max-width: 59rem) { - margin-top: 2rem; - text-align: center; - } + #twim { + background-color: #fff; + padding: 80px 2rem; - @media (max-width: 767px) { - font-size: 2.125rem; - } + #twim__content { + max-width: 60rem; + margin: 0 auto; + display: flex; + gap: 48px; + align-items: flex-start; + + @media (max-width: 767px) { + flex-direction: column; } } - img { - margin: auto 0px; + .twim__text { + flex: 1; + } - flex: auto; - max-width: 470px; - aspect-ratio: 470 / 418; + .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; + } - @media (max-width: 59rem) { - margin: 0px auto; + h2 { + font-size: 2.5rem; + font-weight: 700; + color: #000; + margin-block: 0 1rem; + + @media (max-width: 767px) { + font-size: 2.125rem; } } - #personal_bottom { - position: absolute; - bottom: -340px; - height: 400px; - background-color: black; - border-radius: 100% 100%; + p { + color: #000; + font-size: 1.125rem; + line-height: 1.75; + } - width: 150%; - left: -25%; + .twim__ctas { + justify-content: flex-start; + margin-top: 1.5rem; + } + + .twim__latest { + background-color: #000; + color: #fff; + border: 1px solid #d2d2d2; + border-radius: 14px; + padding: 28px; + display: flex; + flex-direction: column; + gap: 12px; + text-decoration: none; + width: 280px; + flex-shrink: 0; + transition: border-color 0.2s ease; @media (max-width: 767px) { - width: 200%; - left: -50%; + width: 100%; + } + + &:hover { + border-color: #888; + } + + .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; } } } - #use-case-community { + #blog-preview { background-color: #000; - - display: flex; - flex-direction: column; - justify-content: space-around; - + color: #fff; + 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 1rem auto; + color: #fff; - .call-to-action { - margin-block: 2em 4em; + @media (max-width: 767px) { + font-size: 2.125rem; + } } - img { - margin: 0 auto; - aspect-ratio: 756 / 487; - flex: auto; - max-width: 756px; + .blog-preview-description { + max-width: 40rem; + margin: 0 auto 2rem auto; + color: rgba(255, 255, 255, 0.8); + font-size: 1.125rem; } - } - #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; + .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) { + 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; - margin-inline: auto; + gap: 12px; + transition: border-color 0.2s ease; - @media (max-width: 767px) { - max-width: none; + &:hover { + border-color: #666; } - h2 { - display: inline; - color: #000; - font-size: 2.5rem; + h3 { + font-size: 1.125rem; font-weight: 700; + margin: 0; + line-height: 1.4; - @media (max-width: 64rem) { - text-align: center; - } + a { + color: #fff; - @media (max-width: 767px) { - font-size: 2.125rem; - margin: 0 auto 2rem auto; + &:hover { + color: rgba(255, 255, 255, 0.7); + } } + } - margin: 0 0 2rem 0; + p { + color: rgba(255, 255, 255, 0.7); + font-size: 0.9375rem; + margin: 0; + line-height: 1.6; + flex: 1; } } - #complex-apps-image { - outline: 20px solid black; - border-radius: 30px; - flex: auto; - max-width: min(576px, 100%); - margin: 20px; + .blog-preview-meta { + display: flex; + align-items: center; + gap: 0.75rem; + flex-wrap: wrap; + } + + .blog-preview-date { + color: rgba(255, 255, 255, 0.6); + font-size: 0.875rem; + font-weight: 500; + } + + .blog-preview-tag { + font-size: 0.75rem; + font-weight: 600; + padding: 0.2em 0.6em; + border-radius: 4px; + background-color: #333; + color: #fff; + white-space: nowrap; + } + + .blog-preview-readmore { + color: rgba(255, 255, 255, 0.7); + font-size: 0.875rem; + font-weight: 600; + margin-top: auto; + text-decoration: none; + + &:hover { + color: #fff; + text-decoration: underline; + } + } + } + + #use-cases { + background-color: #f8f8f8; + padding: 80px 2rem; + text-align: center; + + h2 { + font-size: 2.5rem; + font-weight: 700; + margin: 0 auto 2rem auto; + color: #000; + + @media (max-width: 767px) { + font-size: 2.125rem; + } + } + + .use-cases-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 28px; + max-width: 60rem; + margin: 0 auto; + + @media (max-width: 59rem) { + grid-template-columns: 1fr; + } + } + + .use-case-card { + border: 1px solid #d2d2d2; + border-radius: 14px; + padding: 28px; + display: flex; + flex-direction: column; + gap: 16px; + text-align: left; + background-color: #fff; + transition: border-color 0.2s ease; + + &:hover { + border-color: #888; + } + + img { + width: 100%; + aspect-ratio: 16 / 9; + object-fit: cover; + border-radius: 8px; + background-color: #eee; + } + + h3 { + font-size: 1.5rem; + font-weight: 700; + margin: 0; + color: #000; + } + + p { + color: #000; + margin: 0; + line-height: 1.75; + flex: 1; + } + + .call-to-action { + align-self: flex-start; + font-size: 0.9375rem; + padding: .45em 1.4em; + } } } @@ -277,11 +505,12 @@ display: flex; flex-direction: column; gap: 28px; - padding: 80px; + padding: 80px 80px 40px 80px; + background-color: #f8f8f8; overflow: hidden; align-items: center; - color: #fff; - background-color: #000; + color: #000; + background-color: #fff; text-align: center; h2 { @@ -301,12 +530,17 @@ .membership-card { max-width: 648px; padding: 28px; - border-radius: 16px; - border: 1px #3c3f44 solid; + 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 { @@ -330,7 +564,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..0e8e4a999 100644 --- a/templates/index.html +++ b/templates/index.html @@ -8,50 +8,135 @@
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") %} +
+
+
+

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 share your own work in #thisweekin:matrix.org.

+
+ Browse all editions + How to contribute +
+ {% 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 %}
- A conversation between four people on Element Call, a VoIP conference tool based on Matrix.
+ +
+

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="%B %d, %Y") }} + {% if page.taxonomies.category %} + {{ page.taxonomies.category | first }} + {% endif %} +
+

{{ page.title }}

+ {% if page.description %} +

{{ page.description }}

+ {% endif %} + Read more → +
+ {% endfor %} +
+ View All Posts +
+

Platinum member

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