kgess-mirror/matrix.org
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix.org.git synced 2026-01-11 20:07:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Brand new frontpage (#1554)

Browse source 
* Brand new frontpage

* Make snap scrolling work

* Basic layout done

* Display the sections more horizontally

* Make the community section look better

* Halp

* Fix SCSS formatting

* Rework frontpage SCSS

* Update background image of the hero section to match mockup

* Don't use background on mobile for now, and don't make the logo too narrow

* Use arrows instead of symbol hack on the frontpage

* New mockup let's start over

* Giving a go to the new frontpage

* Change method to display transitions

* Move along, nothing to see here

* CSS works great actually, let's not use svgs

* Add the complex apps section

* Struggle with the background

* Add assets on the frontpage

* Make the curves scale a little better vertically

* Tweak spacing

* Turn the header dark

* Navbar tweaks

* Finish up the frontpage structure at last

* Adjust sections height and position backgrounds properly

* Add visuals for the build on matrix section

* Position visuals in the section 'build on matrix'

* Adjust a little the buildonmatrix section

* Implement the sponsors section

* We're almost responsive

* Make the sponsors section responsive

* Make the top border of the community section responsive

* Make the bottom border of the hero section look better on mobile

* Update sponsors template to use logo, and update actual sponsors list

* Use mobile backgrounds in responsive mode

* Adapt padding top to new header height

* Update the alt text for the video showcasing Element Call and Third Room

* Adjust section height to new header height

* More obvious #personal_bottom CSS

* Use rems whenever possible/sensible

Co-authored-by: Jonas Platte <jplatte@matrix.org>
This commit is contained in:
Thibault Martin 2023-01-25 13:39:13 +01:00 • committed by GitHub
parent 0a060a4907
commit 2e3072780c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 1755 additions and 625 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
content/index.toml
View file

@ -1,57 +0,0 @@
explore = [
{ title = "Try Matrix", href = "/try-matrix/", img = "basic_elaboration_message_happy.svg" },
{ title = "Clients", href = "/ecosystem/clients/", img = "software_layout_header_sideleft.svg" },
{ title = "Bots", href = "/ecosystem/bots/", img = "basic_calculator.svg" },
{ title = "SDKs", href = "/ecosystem/sdks/", img = "software_layers2.svg" },
{ title = "Hosting", href = "/ecosystem/hosting/", img = "basic_cloud.svg" },
]
[[sponsors]]
name = "Status"
image = "status.svg"
description = "A Mobile OS, Built for Ethereum."
website = "https://status.im"
[[sponsors]]
name = "UpCloud"
image = "upcloud.svg"
description = """
Matrix.org is generously hosted by UpCloud!
Host your homeserver via UpCloud and get a $25 credit.
"""
website = "https://upcloud.com/"
[[sponsors]]
name = "Private Internet Access"
image = "pia.svg"
description = """
Private Internet Access™ VPN Service encrypts your connection
and provides you with an anonymous IP to protect your privacy.
"""
website = "https://www.privateinternetaccess.com/"
[[sponsors]]
name = "InBlockchain"
image = "inblockchain.png"
description = """
InBlockchain is a full-service firm focusing on consulting, incubating
and facilitating crowdsales for promising blockchain startups.
"""
website = "http://www.inblockchain.com/"
[[sponsors]]
name = "OmiseGO"
image = "omisego.svg"
description = """
OmiseGO is a public Ethereum-based financial technology for use
in mainstream digital wallets.
"""
website = "https://omisego.network/"
[[sponsors]]
name = "Tendermint"
image = "tendermint.png"
description = """
Byzantine fault-tolerant replicated state machines in any programming language.
"""
website = "https://tendermint.com/"

8
content/sponsors.toml Normal file
View file

@ -0,0 +1,8 @@
[[sponsors]]
name = "UpCloud"
image = "upcloud.svg"
description = """
Matrix.org is generously hosted by UpCloud!
Host your homeserver via UpCloud and get a $25 credit.
"""
website = "https://upcloud.com/"

6
sass/_base.scss
View file

@ -5,6 +5,10 @@
html {
height: 100%;
font-size: 100%;
scroll-snap-type: y proximity;
scroll-padding-top: 95px;
scroll-behavior: smooth;
}
body {
@ -37,7 +41,7 @@ body {
}
main {
padding-top: 60px;
padding-top: 95px;
}
img {

34
sass/_header.scss
View file

@ -4,12 +4,15 @@
display: flex;
width: 100%;
height: 60px;
height: 95px;
padding-left: 20px;
border-bottom: 1px solid #f4f4f4;
align-items: center;
margin-bottom: 0;
background-color: #fff;
font-size: 18px;
color: #fff;
background-color: #000;
@media screen and (min-width: 1024px) {
padding-right: 20px;
@ -17,6 +20,11 @@
.brand {
margin-right: auto;
img {
width: 128px;
height: 55px;
}
}
.dropdown-button {
@ -56,7 +64,7 @@
a {
padding: 8px 24px;
margin: 8px 0;
color: #222222;
color: #fff;
&:hover {
color: #0098d4;
@ -70,21 +78,17 @@
@media screen and (min-width: 1024px) {
&.primary {
border-radius: 60px;
background-color: #000;
color: #fff !important;
background-color: #fff;
color: #000 !important;
padding-left: 20px;
padding-right: 20px;
padding-left: 2em;
padding-right: 2em;
margin-left: 12px;
&:not(:last-child) {
margin-right: 12px;
}
}
&.primary:hover {
background-color: #0098d4;
}
}
}
@ -114,7 +118,11 @@
.section-submenu {
background: #fff;
border: 1px solid #f4f4f4;
border-radius: .3em;
border-radius: 6px;
a {
color: #000;
}
}
}

677
sass/_index.scss
View file

@ -1,335 +1,424 @@
.hero {
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
animation: Gradient 10s ease infinite;
background-size: 400% 400%;
display: flex;
height: 600px;
padding-top: 60px;
flex-direction: column;
justify-content: center;
flex: none;
.background-img {
position: absolute;
left: 0;
top: 60px;
right: 0;
bottom: 0;
height: 600px;
background-image: url('/assets/hero-spiro.svg');
background-position: 100% 50%;
background-size: cover;
background-repeat: repeat;
background-attachment: scroll;
#frontpage {
#hero {
height: calc(100vh - 5.937rem);
background-color: #000;
background-image: url("/assets/frontpage/hero_dancing_lines.svg");
@media (max-width: 767px) {
background-position: 50% 50%;
background-image: url("/assets/frontpage/hero_dancing_lines_mobile.svg");
}
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
.hero_content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
h2 {
color: #fff;
font-size: 2.5rem;
font-weight: 700;
max-width: 36rem;
margin: 0 auto;
text-align: center;
@media (max-width: 767px) {
font-size: 2.125rem;
margin: 0 30px;
}
}
img {
width: 200px;
height: 86px;
margin: 0 auto 2rem auto;
}
}
@media (max-width: 479px) {
background-position: 15% 50%;
}
}
#hero_curve1 {
border-radius: 10% 100%;
background-color: #333;
height: 25vh;
width: 200%;
position: absolute;
bottom: -1vh;
right: -50px;
.content {
z-index: 49;
flex-direction: column;
text-align: center;
align-items: center;
width: 680px;
max-width: 100%;
padding-top: 60px;
padding-bottom: 60px;
.logo {
width: 160px;
margin-bottom: 20px;
@media (max-width: 767px) {
height: 15vh;
}
}
.message {
color: #fff;
margin-bottom: 40px;
#hero_curve2 {
border-radius: 10% 100%;
background-color: #666;
height: 25vh;
width: 200%;
position: absolute;
bottom: -3vh;
right: -50px;
@media (max-width: 767px) {
height: 15vh;
}
}
}
.button {
padding: 16px 32px;
border-radius: 32px;
#hero_curve3 {
border-radius: 10% 100%;
background-color: #aaa;
height: 25vh;
width: 200%;
position: absolute;
bottom: -5vh;
right: -50px;
background-color: #fff;
color: #000;
}
@media (max-width: 767px) {
height: 15vh;
}
}
&:hover {
background-color: #0098d4;
color: #fff;
}
}
#hero_curve4 {
border-radius: 10% 100%;
background-color: #fff;
height: 25vh;
width: 200%;
position: absolute;
bottom: -7vh;
right: -50px;
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
.dark-bg {
background-color: #f4f4f4;
}
.imagine {
font-size: 17px;
font-weight: normal;
line-height: 1.5em;
text-align: left;
margin-left: auto;
margin-right: auto;
max-width: 400px;
ul {
list-style: none;
}
li {
text-indent: -.8em;
margin-left: 0em;
margin-bottom: .5em;
}
h1 {
text-align: start;
padding: 0em;
}
}
.thisismatrix {
h1 {
text-align: center;
font-weight: bold;
padding: 0em;
}
p {
max-width: 640px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
.howdoesitwork {
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
h2 {
margin-top: 20px;
margin-bottom: 20px;
}
p {
text-align: left;
margin-top: 0;
}
.how {
display: flex;
margin-bottom: 60px;
text-align: left;
}
}
#open-standard {
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
max-width: unset !important;
}
#open-standard>.grid>*>.block>h4 {
text-align: center;
}
#latest-news {
display: flex;
flex-direction: column;
align-items: center;
.grid {
.block {
align-items: flex-start;
justify-content: space-between;
p {
text-align: start;
@media (max-width: 767px) {
height: 15vh;
}
}
}
}
#explore {
display: flex;
justify-content: center;
flex-wrap: wrap;
a {
img {
height: 48px;
margin-top: 10px;
margin-bottom: 10px;
#use-case-personal {
background-color: #fff;
background: url("/assets/frontpage/personal-bg.svg");
background-size: 100% 100%;
@media (max-width: 767px) {
background-image: url("/assets/frontpage/personal-bg-mobile.svg");
background-size: 100% 241px;
}
background-repeat: no-repeat;
background-position-y: bottom -20px;
span {
margin-bottom: 10px;
}
min-width: 90px;
margin-right: 20px;
margin-left: 20px;
padding-top: 6px;
padding-bottom: 6px;
color: #000;
text-align: center;
text-decoration: none;
display: inline-flex;
flex-direction: column;
}
a:hover {
color: #0098d4;
}
}
section {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.grid .block.dark-bg {
img {
margin-top: 10px;
padding-bottom: 10px;
}
.text {
h4 {
margin-bottom: 20px;
}
position: relative;
overflow: hidden;
display: flex;
flex-direction: row;
@media (max-width: 767px) {
flex-direction: column;
}
justify-content: space-around;
align-items: center;
height: 100%;
flex-direction: column;
padding-bottom: 175px;
h2 {
color: #000;
font-weight: 700;
margin: auto 0 auto 5rem;
@media (max-width: 767px) {
font-size: 2.125rem;
margin: 0 50px 50px 50px;
}
max-width: 28rem;
}
img {
margin: auto 0px;
width: 469px;
height: 418px;
@media (max-width: 767px) {
margin: 0px auto;
width: 323px;
height: 288px;
}
}
#personal_bottom {
position: absolute;
bottom: -340px;
height: 400px;
background-color: black;
border-radius: 100% 100%;
width: 150%;
left: -25%;
@media (max-width: 767px) {
width: 200%;
left: -50%;
}
}
}
}
@media (max-width: 767px) {
section {
display: block;
width: auto;
}
}
#use-case-community {
background-color: #000;
.subtitle {
font-weight: normal;
margin-top: 0px;
}
.support-container {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
#support {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
margin-top: 10px;
margin-bottom: 40px;
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 340px;
max-width: calc(100vw - 60px);
margin: 20px 10px;
color: #000;
justify-content: space-around;
text-align: center;
padding-top: 60px;
padding-bottom: 100px;
h2 {
color: #fff;
font-size: 2.5rem;
font-weight: 700;
max-width: 36rem;
margin: 0 auto;
@media (max-width: 767px) {
font-size: 2.125rem;
margin: 0 50px 50px 50px;
}
}
.call-to-action {
background-color: #fff;
color: #000;
font-size: 1.125rem;
font-weight: 600;
border-radius: 1000px;
padding: .4em 2em;
margin: 2em auto 4em auto;
}
img {
margin: 0 auto;
width: 756px;
height: 487px;
@media (max-width: 767px) {
margin: 0px auto;
width: 292px;
height: 188px;
}
}
}
}
#sponsors {
margin-top: 30px;
margin-bottom: 30px;
.grid .grid-container-third .block {
#complex_apps {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
padding: 160px 128px;
@media (max-width: 767px) {
flex-direction: column;
padding: 116px 30px;
}
h2 {
color: #000;
font-weight: 700;
margin: auto 0;
max-width: 450px;
@media (max-width: 767px) {
padding: 0 40px;
}
}
img {
border: 20px solid black;
border-radius: 30px;
@media (max-width: 767px) {
margin-top: 50px;
}
}
}
#buildonmatrix {
display: flex;
flex-direction: column;
gap: 28px;
padding: 250px 0 435px 0;
@media (max-width: 767px) {
padding: 100px 35px 435px 35px;
}
justify-content: space-around;
position: relative;
color: #fff;
background-color: #000;
background-image: url("/assets/frontpage/buildon-bg.svg");
background-size: 100% 100%;
@media (max-width: 767px) {
background-image: url("/assets/frontpage/buildon-bg-mobile.svg");
background-size: 100% 480px;
background-position-y: bottom;
}
background-repeat: no-repeat;
h2 {
text-align: center;
margin: 0 auto;
font-weight: 700;
}
p {
text-align: center;
margin: 0 auto;
max-width: 433px;
font-size: 1.125rem;
}
.logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 96px;
height: 96px;
min-height: 96px;
margin-bottom: 20px;
filter: invert(1);
width: 130px;
height: 130px;
margin: 0 auto;
}
.content {
#bridge_visual {
position: absolute;
top: 100px;
left: 50px;
width: 240px;
height: 287px;
@media (max-width: 767px) {
display: none;
}
}
#homeserver {
position: absolute;
bottom: 50px;
left: 150px;
width: 230px;
height: 235px;
@media (max-width: 767px) {
display: none;
}
}
#federation_visual {
position: absolute;
top: 50px;
right: 50px;
width: 425px;
height: 853px;
@media (max-width: 767px) {
display: none;
}
}
#federation_visual_mobile {
display: none;
@media (max-width: 767px) {
display: inline;
position: absolute;
bottom: 50px;
right: -3px;
width: 322px;
height: 324px,
}
}
.call-to-action {
background-color: #fff;
color: #000;
font-size: 1.125rem;
font-weight: 600;
border-radius: 1000px;
padding: .4em 2em;
margin: 0 auto;
}
}
#sponsors {
display: flex;
flex-direction: column;
padding: 5rem 45px;
h2 {
text-align: center;
margin: 0 auto;
font-weight: 700;
}
#sponsors_grid {
display: flex;
height: 100%;
flex-direction: column;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
margin: 2rem auto;
@media (max-width: 767px) {
margin: 0 auto;
}
.sponsor_card {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 1rem 0;
padding: 1rem 0;
width: 22rem;
@media (max-width: 767px) {
width: 100%;
}
img {
margin-bottom: 1rem;
}
.sponsor_text {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 12.5rem;
h3 {
text-align: center;
margin: 0 auto;
font-size: 1.125rem;
font-weight: 700;
}
a {
margin: 0 auto;
}
}
}
}
p {
text-align: center;
margin: 0 auto;
max-width: 638px;
}
.call-to-action {
background-color: #000;
color: #fff;
font-size: 1.125rem;
font-weight: 600;
border-radius: 1000px;
padding: .4em 2em;
margin: 1.5rem auto 0 auto;
}
}
}
#sdks {
display: flex;
flex-direction: column;
align-items: center;
}
#frontpage {
section {
max-width: 1200px;
margin: 1.5em auto;
}
p {
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
}
}

13
static/assets/frontpage-background.svg Normal file
View file

@ -0,0 +1,13 @@
<svg preserveAspectRatio="none" width="1280" height="4324" viewBox="0 0 1280 4324" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="684" width="1280" height="1070" fill="white"/>
<path d="M0 0H1280V852C715.5 739.868 0 734.748 0 734.748V0Z" fill="black"/>
<path d="M0 50H1280V882C715.5 772.5 0 767.5 0 767.5V50Z" fill="black" fill-opacity="0.6"/>
<path d="M0 80H1280V912C715.5 802.5 0 797.5 0 797.5V80Z" fill="black" fill-opacity="0.4"/>
<path d="M0 0H1280V942C715.5 818.023 0 812.362 0 812.362V0Z" fill="black" fill-opacity="0.2"/>
<path d="M0 1700.42C0 1700.42 254 1636 640.5 1636C1027 1636 1280 1700.42 1280 1700.42V2611H0V1700.42Z" fill="black"/>
<path d="M0 1720.42C0 1720.42 254 1646 640.5 1646C1027 1646 1280 1720.42 1280 1720.42V2631H0V1720.42Z" fill="black" fill-opacity="0.6"/>
<path d="M0 1740.42C0 1740.42 254 1666 640.5 1666C1027 1666 1280 1740.42 1280 1740.42V2651H0V1740.42Z" fill="black" fill-opacity="0.6"/>
<path d="M0 1759.42C0 1759.42 254 1685 640.5 1685C1027 1685 1280 1759.42 1280 1759.42V2670H0V1759.42Z" fill="black" fill-opacity="0.2"/>
<rect y="2660" width="1280" height="832" fill="white"/>
<rect y="3492" width="1280" height="832" fill="#121212"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

82
static/assets/frontpage/bridge-visual.svg Normal file
View file

@ -0,0 +1,82 @@
<svg width="279" height="326" viewBox="0 0 279 326" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M42.6409 34.814L108.656 166.609" stroke="white" stroke-width="0.936377"/>
<path d="M238.342 81.3988L106.547 169.652" stroke="white" stroke-width="0.936377"/>
<path d="M224.382 275.1L109.507 167.674" stroke="white" stroke-width="0.936377"/>
<g filter="url(#filter0_d_341_12617)">
<circle cx="225.466" cy="274.059" r="22.9412" fill="white"/>
</g>
<path d="M217.6 279.645C217.072 279.645 216.62 279.457 216.244 279.081C215.867 278.705 215.679 278.252 215.679 277.724V267.157C215.679 266.629 215.867 266.176 216.244 265.8C216.62 265.424 217.072 265.236 217.6 265.236H232.971C233.499 265.236 233.951 265.424 234.328 265.8C234.704 266.176 234.892 266.629 234.892 267.157V277.724C234.892 278.252 234.704 278.705 234.328 279.081C233.951 279.457 233.499 279.645 232.971 279.645H217.6ZM217.6 277.724H232.971V267.157H217.6V277.724ZM215.679 282.527C215.407 282.527 215.179 282.435 214.995 282.25C214.811 282.067 214.719 281.839 214.719 281.566C214.719 281.294 214.811 281.066 214.995 280.882C215.179 280.698 215.407 280.606 215.679 280.606H234.892C235.164 280.606 235.392 280.698 235.576 280.882C235.76 281.066 235.852 281.294 235.852 281.566C235.852 281.839 235.76 282.067 235.576 282.25C235.392 282.435 235.164 282.527 234.892 282.527H215.679ZM217.6 277.724V267.157V277.724Z" fill="black"/>
<g filter="url(#filter1_d_341_12617)">
<circle cx="41.9412" cy="32.9412" r="22.9412" fill="white"/>
</g>
<path d="M47.8957 20.4171L36.3386 20.4055C35.0673 20.4055 34.0272 21.4457 34.0272 22.7169V43.5197C34.0272 44.791 35.0673 45.8311 36.3386 45.8311H47.8957C49.1669 45.8311 50.2071 44.791 50.2071 43.5197V22.7169C50.2071 21.4457 49.1669 20.4171 47.8957 20.4171ZM47.8957 41.2083H36.3386V25.0284H47.8957V41.2083Z" fill="black"/>
<g filter="url(#filter2_d_341_12617)">
<circle cx="236.708" cy="78.8236" r="22.9412" fill="white"/>
</g>
<path d="M244.955 78.2089C246.019 78.2089 246.881 77.3465 246.881 76.2826C246.881 75.2188 246.019 74.3564 244.955 74.3564C243.891 74.3564 243.028 75.2189 243.028 76.2828V78.2089H244.955ZM239.561 78.2089C240.625 78.2089 241.487 77.3464 241.487 76.2825V70.8889C241.487 69.8249 240.625 68.9625 239.561 68.9625C238.497 68.9625 237.634 69.8249 237.634 70.8889V76.2825C237.634 77.3464 238.497 78.2089 239.561 78.2089Z" fill="#2EB67D"/>
<path d="M228.773 79.7503C227.709 79.7503 226.847 80.6127 226.847 81.6765C226.847 82.7404 227.709 83.6028 228.773 83.6028C229.837 83.6028 230.699 82.7403 230.699 81.6764V79.7503H228.773ZM234.167 79.7503C233.103 79.7503 232.24 80.6128 232.24 81.6767V87.0703C232.24 88.1342 233.103 88.9967 234.167 88.9967C235.231 88.9967 236.093 88.1342 236.093 87.0703V81.6767C236.093 80.6128 235.231 79.7503 234.167 79.7503Z" fill="#E01E5A"/>
<path d="M237.635 87.0707C237.635 88.1345 238.497 88.9969 239.561 88.9969C240.625 88.9969 241.487 88.1344 241.487 87.0706C241.487 86.0067 240.625 85.1441 239.561 85.1441L237.635 85.1441L237.635 87.0707ZM237.635 81.6766C237.635 82.7405 238.497 83.603 239.561 83.603L244.955 83.603C246.018 83.603 246.881 82.7405 246.881 81.6766C246.881 80.6127 246.018 79.7502 244.955 79.7502L239.561 79.7502C238.497 79.7502 237.635 80.6127 237.635 81.6766Z" fill="#ECB22E"/>
<path d="M236.093 70.8886C236.093 69.8247 235.231 68.9623 234.167 68.9623C233.103 68.9623 232.241 69.8248 232.241 70.8886C232.241 71.9526 233.103 72.8151 234.167 72.8151L236.093 72.8151L236.093 70.8886ZM236.093 76.2826C236.093 75.2187 235.231 74.3562 234.167 74.3562L228.773 74.3562C227.709 74.3562 226.847 75.2187 226.847 76.2826C226.847 77.3466 227.709 78.209 228.773 78.209L234.167 78.209C235.231 78.209 236.093 77.3466 236.093 76.2826Z" fill="#36C5F0"/>
<g filter="url(#filter3_d_341_12617)">
<circle cx="106.549" cy="166.375" r="64.61" fill="white"/>
</g>
<circle cx="106.548" cy="166.375" r="34.1778" fill="#17191C"/>
<g clip-path="url(#clip0_341_12617)">
<path d="M118.51 168.084H94.5861C92.7063 168.084 91.1683 169.622 91.1683 171.502V178.337C91.1683 180.217 92.7063 181.755 94.5861 181.755H118.51C120.39 181.755 121.928 180.217 121.928 178.337V171.502C121.928 169.622 120.39 168.084 118.51 168.084ZM98.0038 178.337C96.1241 178.337 94.5861 176.799 94.5861 174.919C94.5861 173.04 96.1241 171.502 98.0038 171.502C99.8836 171.502 101.422 173.04 101.422 174.919C101.422 176.799 99.8836 178.337 98.0038 178.337ZM118.51 150.995H94.5861C92.7063 150.995 91.1683 152.533 91.1683 154.413V161.248C91.1683 163.128 92.7063 164.666 94.5861 164.666H118.51C120.39 164.666 121.928 163.128 121.928 161.248V154.413C121.928 152.533 120.39 150.995 118.51 150.995ZM98.0038 161.248C96.1241 161.248 94.5861 159.71 94.5861 157.83C94.5861 155.951 96.1241 154.413 98.0038 154.413C99.8836 154.413 101.422 155.951 101.422 157.83C101.422 159.71 99.8836 161.248 98.0038 161.248Z" fill="white"/>
</g>
<circle cx="160.619" cy="133.773" r="11.4706" fill="#333333"/>
<circle cx="160.619" cy="133.773" r="11.4706" fill="black"/>
<circle cx="160.619" cy="133.773" r="11.4706" fill="black"/>
<circle cx="160.619" cy="133.773" r="11.4706" stroke="white" stroke-width="0.936377"/>
<g clip-path="url(#clip1_341_12617)">
<path d="M163.007 136.764V133.176C163.007 132.848 162.738 132.579 162.41 132.579C162.082 132.579 161.813 132.848 161.813 133.176V136.764H160.745C160.476 136.764 160.345 137.086 160.536 137.271L162.201 138.931C162.321 139.044 162.506 139.044 162.625 138.931L164.29 137.271C164.481 137.086 164.344 136.764 164.082 136.764H163.007ZM158.62 128.61L156.954 130.275C156.763 130.46 156.894 130.783 157.163 130.783H158.231V134.37C158.231 134.699 158.5 134.967 158.828 134.967C159.157 134.967 159.425 134.699 159.425 134.37V130.783H160.494C160.763 130.783 160.894 130.46 160.703 130.275L159.037 128.61C158.924 128.496 158.733 128.496 158.62 128.61Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_341_12617" x="183.797" y="241.754" width="83.3376" height="83.3375" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="9.36377"/>
<feGaussianBlur stdDeviation="9.36377"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_341_12617"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_341_12617" result="shape"/>
</filter>
<filter id="filter1_d_341_12617" x="0.272453" y="0.636227" width="83.3376" height="83.3376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="9.36377"/>
<feGaussianBlur stdDeviation="9.36377"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_341_12617"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_341_12617" result="shape"/>
</filter>
<filter id="filter2_d_341_12617" x="195.039" y="46.5186" width="83.3376" height="83.3376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="9.36377"/>
<feGaussianBlur stdDeviation="9.36377"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_341_12617"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_341_12617" result="shape"/>
</filter>
<filter id="filter3_d_341_12617" x="23.2119" y="92.401" width="166.675" height="166.675" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="9.36377"/>
<feGaussianBlur stdDeviation="9.36377"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.167 0 0 0 0 0.15 0 0 0 0 1 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_341_12617"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_341_12617" result="shape"/>
</filter>
<clipPath id="clip0_341_12617">
<rect width="41.0133" height="41.0133" fill="white" transform="translate(86.0416 145.868)"/>
</clipPath>
<clipPath id="clip1_341_12617">
<rect width="14.3266" height="14.3266" fill="white" transform="translate(153.456 126.61)"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 8.8 KiB

13
static/assets/frontpage/buildon-bg-mobile.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 93 KiB

13
static/assets/frontpage/buildon-bg.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 93 KiB

547
static/assets/frontpage/community-graphic.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 27 MiB

150
static/assets/frontpage/federation-visual-mobile.svg Normal file
View file

@ -0,0 +1,150 @@
<svg width="322" height="324" viewBox="0 0 322 324" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M123.001 200L256.001 71.0001" stroke="white" stroke-width="0.8"/>
<path d="M237.867 86.8698L317.885 91.8092" stroke="white" stroke-width="0.493936"/>
<path d="M276.885 17.7188L238.235 86.1289" stroke="white" stroke-width="0.493936"/>
<path d="M191.807 25.3748L237.619 84.2767" stroke="white" stroke-width="0.493936"/>
<g filter="url(#filter0_d_590_12171)">
<circle cx="318.008" cy="90.204" r="12.1014" fill="white"/>
</g>
<g clip-path="url(#clip0_590_12171)">
<path d="M313.859 93.1509C313.58 93.1509 313.342 93.0518 313.144 92.8535C312.945 92.6548 312.846 92.4162 312.846 92.1375V86.5634C312.846 86.2847 312.945 86.0461 313.144 85.8474C313.342 85.6491 313.58 85.55 313.859 85.55H321.967C322.245 85.55 322.484 85.6491 322.683 85.8474C322.881 86.0461 322.98 86.2847 322.98 86.5634V92.1375C322.98 92.4162 322.881 92.6548 322.683 92.8535C322.484 93.0518 322.245 93.1509 321.967 93.1509H313.859ZM313.859 92.1375H321.967V86.5634H313.859V92.1375ZM312.846 94.6711C312.702 94.6711 312.582 94.6225 312.485 94.5252C312.388 94.4282 312.339 94.308 312.339 94.1644C312.339 94.0208 312.388 93.9005 312.485 93.8036C312.582 93.7063 312.702 93.6577 312.846 93.6577H322.98C323.124 93.6577 323.244 93.7063 323.341 93.8036C323.438 93.9005 323.487 94.0208 323.487 94.1644C323.487 94.308 323.438 94.4282 323.341 94.5252C323.244 94.6225 323.124 94.6711 322.98 94.6711H312.846ZM313.859 92.1375V86.5634V92.1375Z" fill="black"/>
</g>
<g filter="url(#filter1_d_590_12171)">
<circle cx="193.038" cy="22.0408" r="12.1014" fill="white"/>
</g>
<path d="M188.888 24.9877C188.61 24.9877 188.371 24.8886 188.173 24.6903C187.974 24.4916 187.875 24.253 187.875 23.9743V18.4002C187.875 18.1215 187.974 17.8829 188.173 17.6842C188.371 17.4859 188.61 17.3868 188.888 17.3868H196.996C197.275 17.3868 197.513 17.4859 197.712 17.6842C197.91 17.8829 198.009 18.1215 198.009 18.4002V23.9743C198.009 24.253 197.91 24.4916 197.712 24.6903C197.513 24.8886 197.275 24.9877 196.996 24.9877H188.888ZM188.888 23.9743H196.996V18.4002H188.888V23.9743ZM187.875 26.5079C187.731 26.5079 187.611 26.4593 187.514 26.362C187.417 26.265 187.368 26.1447 187.368 26.0012C187.368 25.8576 187.417 25.7373 187.514 25.6404C187.611 25.5431 187.731 25.4944 187.875 25.4944H198.009C198.153 25.4944 198.273 25.5431 198.37 25.6404C198.467 25.7373 198.516 25.8576 198.516 26.0012C198.516 26.1447 198.467 26.265 198.37 26.362C198.273 26.4593 198.153 26.5079 198.009 26.5079H187.875ZM188.888 23.9743V18.4002V23.9743Z" fill="black"/>
<g filter="url(#filter2_d_590_12171)">
<circle cx="277.012" cy="17.1014" r="12.1014" fill="white"/>
</g>
<path d="M280.153 10.495L274.056 10.489C273.386 10.489 272.837 11.0376 272.837 11.7082V22.6816C272.837 23.3522 273.386 23.9009 274.056 23.9009H280.153C280.823 23.9009 281.372 23.3522 281.372 22.6816V11.7082C281.372 11.0376 280.823 10.495 280.153 10.495ZM280.153 21.4623H274.056V12.9275H280.153V21.4623Z" fill="black"/>
<g filter="url(#filter3_d_590_12171)">
<circle cx="237.495" cy="86.2525" r="34.0816" fill="white"/>
</g>
<circle cx="237.494" cy="86.2525" r="18.0287" fill="#17191C"/>
<path d="M243.804 87.1539H231.184C230.193 87.1539 229.381 87.9652 229.381 88.9568V92.5625C229.381 93.5541 230.193 94.3654 231.184 94.3654H243.804C244.796 94.3654 245.607 93.5541 245.607 92.5625V88.9568C245.607 87.9652 244.796 87.1539 243.804 87.1539ZM232.987 92.5625C231.996 92.5625 231.184 91.7512 231.184 90.7596C231.184 89.7681 231.996 88.9568 232.987 88.9568C233.979 88.9568 234.79 89.7681 234.79 90.7596C234.79 91.7512 233.979 92.5625 232.987 92.5625ZM243.804 78.1396H231.184C230.193 78.1396 229.381 78.9509 229.381 79.9425V83.5482C229.381 84.5398 230.193 85.3511 231.184 85.3511H243.804C244.796 85.3511 245.607 84.5398 245.607 83.5482V79.9425C245.607 78.9509 244.796 78.1396 243.804 78.1396ZM232.987 83.5482C231.996 83.5482 231.184 82.7369 231.184 81.7453C231.184 80.7537 231.996 79.9425 232.987 79.9425C233.979 79.9425 234.79 80.7537 234.79 81.7453C234.79 82.7369 233.979 83.5482 232.987 83.5482Z" fill="white"/>
<path d="M30.2674 186.905L136.954 181.213" stroke="white" stroke-width="0.650529"/>
<path d="M57.7498 254.723L135.325 181.213" stroke="white" stroke-width="0.650529"/>
<path d="M144.274 289.526L136.142 183.653" stroke="white" stroke-width="0.650529"/>
<g filter="url(#filter4_d_590_12171)">
<circle cx="29.9393" cy="186.255" r="15.938" fill="white"/>
</g>
<g clip-path="url(#clip1_590_12171)">
<path d="M24.4745 190.136C24.1075 190.136 23.7934 190.005 23.5322 189.744C23.2706 189.482 23.1398 189.168 23.1398 188.801V181.46C23.1398 181.093 23.2706 180.778 23.5322 180.517C23.7934 180.256 24.1075 180.125 24.4745 180.125H35.1526C35.5197 180.125 35.834 180.256 36.0956 180.517C36.3568 180.778 36.4874 181.093 36.4874 181.46V188.801C36.4874 189.168 36.3568 189.482 36.0956 189.744C35.834 190.005 35.5197 190.136 35.1526 190.136H24.4745ZM24.4745 188.801H35.1526V181.46H24.4745V188.801ZM23.1398 192.138C22.9507 192.138 22.7923 192.074 22.6646 191.946C22.5365 191.818 22.4724 191.66 22.4724 191.471C22.4724 191.281 22.5365 191.123 22.6646 190.995C22.7923 190.867 22.9507 190.803 23.1398 190.803H36.4874C36.6764 190.803 36.8348 190.867 36.9625 190.995C37.0907 191.123 37.1547 191.281 37.1547 191.471C37.1547 191.66 37.0907 191.818 36.9625 191.946C36.8348 192.074 36.6764 192.138 36.4874 192.138H23.1398ZM24.4745 188.801V181.46V188.801Z" fill="black"/>
</g>
<g filter="url(#filter5_d_590_12171)">
<circle cx="135.977" cy="181.051" r="44.8865" fill="white"/>
</g>
<circle cx="135.976" cy="181.05" r="23.7443" fill="#17191C"/>
<g clip-path="url(#clip2_590_12171)">
<path d="M144.287 182.238H127.666C126.36 182.238 125.291 183.306 125.291 184.612V189.361C125.291 190.667 126.36 191.735 127.666 191.735H144.287C145.593 191.735 146.661 190.667 146.661 189.361V184.612C146.661 183.306 145.593 182.238 144.287 182.238ZM130.04 189.361C128.734 189.361 127.666 188.292 127.666 186.986C127.666 185.681 128.734 184.612 130.04 184.612C131.346 184.612 132.415 185.681 132.415 186.986C132.415 188.292 131.346 189.361 130.04 189.361ZM144.287 170.365H127.666C126.36 170.365 125.291 171.434 125.291 172.74V177.489C125.291 178.795 126.36 179.863 127.666 179.863H144.287C145.593 179.863 146.661 178.795 146.661 177.489V172.74C146.661 171.434 145.593 170.365 144.287 170.365ZM130.04 177.489C128.734 177.489 127.666 176.42 127.666 175.114C127.666 173.808 128.734 172.74 130.04 172.74C131.346 172.74 132.415 173.808 132.415 175.114C132.415 176.42 131.346 177.489 130.04 177.489Z" fill="white"/>
</g>
<g filter="url(#filter6_d_590_12171)">
<circle cx="57.2603" cy="253.584" r="15.938" fill="white"/>
</g>
<g clip-path="url(#clip3_590_12171)">
<path d="M61.3965 244.883L53.3674 244.875C52.4842 244.875 51.7616 245.598 51.7616 246.481V260.933C51.7616 261.817 52.4842 262.539 53.3674 262.539H61.3965C62.2797 262.539 63.0023 261.817 63.0023 260.933V246.481C63.0023 245.598 62.2797 244.883 61.3965 244.883ZM61.3965 259.328H53.3674V248.087H61.3965V259.328Z" fill="black"/>
</g>
<g filter="url(#filter7_d_590_12171)">
<circle cx="143.783" cy="288.062" r="15.938" fill="white"/>
</g>
<g clip-path="url(#clip4_590_12171)">
<path d="M147.919 279.362L139.89 279.354C139.007 279.354 138.285 280.076 138.285 280.96V295.412C138.285 296.295 139.007 297.018 139.89 297.018H147.919C148.803 297.018 149.525 296.295 149.525 295.412V280.96C149.525 280.076 148.803 279.362 147.919 279.362ZM147.919 293.806H139.89V282.565H147.919V293.806Z" fill="black"/>
</g>
<defs>
<filter id="filter0_d_590_12171" x="296.028" y="73.1632" width="43.9603" height="43.9603" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4.93936"/>
<feGaussianBlur stdDeviation="4.93936"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_590_12171"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_590_12171" result="shape"/>
</filter>
<filter id="filter1_d_590_12171" x="171.057" y="4.99997" width="43.9603" height="43.9603" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4.93936"/>
<feGaussianBlur stdDeviation="4.93936"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_590_12171"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_590_12171" result="shape"/>
</filter>
<filter id="filter2_d_590_12171" x="255.031" y="0.0606413" width="43.9603" height="43.9603" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4.93936"/>
<feGaussianBlur stdDeviation="4.93936"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_590_12171"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_590_12171" result="shape"/>
</filter>
<filter id="filter3_d_590_12171" x="193.534" y="47.2315" width="87.9205" height="87.9206" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4.93936"/>
<feGaussianBlur stdDeviation="4.93936"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.167 0 0 0 0 0.15 0 0 0 0 1 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_590_12171"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_590_12171" result="shape"/>
</filter>
<filter id="filter4_d_590_12171" x="0.99076" y="163.811" width="57.8971" height="57.8971" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6.50529"/>
<feGaussianBlur stdDeviation="6.50529"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_590_12171"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_590_12171" result="shape"/>
</filter>
<filter id="filter5_d_590_12171" x="78.0802" y="129.659" width="115.794" height="115.794" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6.50529"/>
<feGaussianBlur stdDeviation="6.50529"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.167 0 0 0 0 0.15 0 0 0 0 1 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_590_12171"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_590_12171" result="shape"/>
</filter>
<filter id="filter6_d_590_12171" x="28.3117" y="231.141" width="57.8971" height="57.8971" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6.50529"/>
<feGaussianBlur stdDeviation="6.50529"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_590_12171"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_590_12171" result="shape"/>
</filter>
<filter id="filter7_d_590_12171" x="114.834" y="265.619" width="57.8971" height="57.8971" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6.50529"/>
<feGaussianBlur stdDeviation="6.50529"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_590_12171"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_590_12171" result="shape"/>
</filter>
<clipPath id="clip0_590_12171">
<rect width="12.1615" height="12.1615" fill="white" transform="translate(311.832 84.0298)"/>
</clipPath>
<clipPath id="clip1_590_12171">
<rect width="16.0171" height="16.0171" fill="white" transform="translate(21.8051 178.123)"/>
</clipPath>
<clipPath id="clip2_590_12171">
<rect width="28.4932" height="28.4932" fill="white" transform="translate(121.73 166.804)"/>
</clipPath>
<clipPath id="clip3_590_12171">
<rect width="19.2697" height="19.2697" fill="white" transform="translate(47.7471 244.072)"/>
</clipPath>
<clipPath id="clip4_590_12171">
<rect width="19.2697" height="19.2697" fill="white" transform="translate(134.27 278.551)"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

158
static/assets/frontpage/federation-visual.svg Normal file
View file

@ -0,0 +1,158 @@
<svg width="457" height="880" viewBox="0 0 457 880" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M319.003 558.5L380.503 115.5" stroke="white" stroke-width="0.8"/>
<path d="M186.003 690L319.003 561" stroke="white" stroke-width="0.8"/>
<path d="M318.983 561.072L426.566 567.713" stroke="white" stroke-width="0.664087"/>
<path d="M371.443 468.1L319.478 560.076" stroke="white" stroke-width="0.664087"/>
<path d="M257.056 478.394L318.65 557.586" stroke="white" stroke-width="0.664087"/>
<g filter="url(#filter0_d_541_11615)">
<circle cx="426.732" cy="565.555" r="16.2701" fill="white"/>
</g>
<g clip-path="url(#clip0_541_11615)">
<path d="M421.153 569.517C420.778 569.517 420.458 569.384 420.191 569.117C419.924 568.85 419.79 568.529 419.79 568.155V560.66C419.79 560.286 419.924 559.965 420.191 559.698C420.458 559.431 420.778 559.298 421.153 559.298H432.054C432.428 559.298 432.749 559.431 433.016 559.698C433.283 559.965 433.416 560.286 433.416 560.66V568.155C433.416 568.529 433.283 568.85 433.016 569.117C432.749 569.384 432.428 569.517 432.054 569.517H421.153ZM421.153 568.155H432.054V560.66H421.153V568.155ZM419.79 571.561C419.597 571.561 419.436 571.496 419.305 571.365C419.174 571.234 419.109 571.073 419.109 570.88C419.109 570.687 419.174 570.525 419.305 570.395C419.436 570.264 419.597 570.198 419.79 570.198H433.416C433.609 570.198 433.771 570.264 433.901 570.395C434.032 570.525 434.097 570.687 434.097 570.88C434.097 571.073 434.032 571.234 433.901 571.365C433.771 571.496 433.609 571.561 433.416 571.561H419.79ZM421.153 568.155V560.66V568.155Z" fill="black"/>
</g>
<g filter="url(#filter1_d_541_11615)">
<circle cx="258.711" cy="473.911" r="16.2701" fill="white"/>
</g>
<g clip-path="url(#clip1_541_11615)">
<path d="M253.132 477.873C252.757 477.873 252.437 477.74 252.17 477.473C251.903 477.206 251.77 476.885 251.77 476.51V469.016C251.77 468.642 251.903 468.321 252.17 468.054C252.437 467.787 252.757 467.654 253.132 467.654H264.033C264.407 467.654 264.728 467.787 264.995 468.054C265.262 468.321 265.395 468.642 265.395 469.016V476.51C265.395 476.885 265.262 477.206 264.995 477.473C264.728 477.74 264.407 477.873 264.033 477.873H253.132ZM253.132 476.51H264.033V469.016H253.132V476.51ZM251.77 479.917C251.577 479.917 251.415 479.851 251.284 479.721C251.154 479.59 251.088 479.429 251.088 479.236C251.088 479.043 251.154 478.881 251.284 478.75C251.415 478.62 251.577 478.554 251.77 478.554H265.395C265.588 478.554 265.75 478.62 265.88 478.75C266.011 478.881 266.077 479.043 266.077 479.236C266.077 479.429 266.011 479.59 265.88 479.721C265.75 479.851 265.588 479.917 265.395 479.917H251.77ZM253.132 476.51V469.016V476.51Z" fill="black"/>
</g>
<g filter="url(#filter2_d_541_11615)">
<circle cx="371.612" cy="467.27" r="16.2701" fill="white"/>
</g>
<path d="M375.835 458.388L367.638 458.38C366.737 458.38 365.999 459.117 365.999 460.019V474.773C365.999 475.674 366.737 476.412 367.638 476.412H375.835C376.736 476.412 377.474 475.674 377.474 474.773V460.019C377.474 459.117 376.736 458.388 375.835 458.388ZM375.835 473.133H367.638V461.658H375.835V473.133Z" fill="black"/>
<g filter="url(#filter3_d_541_11615)">
<circle cx="318.483" cy="560.242" r="45.822" fill="white"/>
</g>
<circle cx="318.482" cy="560.242" r="24.2392" fill="#17191C"/>
<path d="M326.965 561.454H309.998C308.665 561.454 307.574 562.545 307.574 563.878V568.726C307.574 570.059 308.665 571.15 309.998 571.15H326.965C328.299 571.15 329.389 570.059 329.389 568.726V563.878C329.389 562.545 328.299 561.454 326.965 561.454ZM312.422 568.726C311.089 568.726 309.998 567.635 309.998 566.302C309.998 564.969 311.089 563.878 312.422 563.878C313.755 563.878 314.846 564.969 314.846 566.302C314.846 567.635 313.755 568.726 312.422 568.726ZM326.965 549.335H309.998C308.665 549.335 307.574 550.425 307.574 551.759V556.606C307.574 557.94 308.665 559.03 309.998 559.03H326.965C328.299 559.03 329.389 557.94 329.389 556.606V551.759C329.389 550.425 328.299 549.335 326.965 549.335ZM312.422 556.606C311.089 556.606 309.998 555.516 309.998 554.183C309.998 552.849 311.089 551.759 312.422 551.759C313.755 551.759 314.846 552.849 314.846 554.183C314.846 555.516 313.755 556.606 312.422 556.606Z" fill="white"/>
<path d="M39.8694 695.568L183.308 687.915" stroke="white" stroke-width="0.874624"/>
<path d="M76.819 786.747L181.118 687.915" stroke="white" stroke-width="0.874624"/>
<path d="M193.148 833.54L182.216 691.195" stroke="white" stroke-width="0.874624"/>
<g filter="url(#filter4_d_541_11615)">
<circle cx="39.4283" cy="694.693" r="21.4283" fill="white"/>
</g>
<path d="M32.081 699.911C31.5875 699.911 31.1652 699.735 30.814 699.384C30.4623 699.033 30.2864 698.61 30.2864 698.117V688.246C30.2864 687.753 30.4623 687.33 30.814 686.979C31.1652 686.627 31.5875 686.452 32.081 686.452H46.4374C46.9309 686.452 47.3535 686.627 47.7053 686.979C48.0564 687.33 48.232 687.753 48.232 688.246V698.117C48.232 698.61 48.0564 699.033 47.7053 699.384C47.3535 699.735 46.9309 699.911 46.4374 699.911H32.081ZM32.081 698.117H46.4374V688.246H32.081V698.117ZM30.2864 702.603C30.0322 702.603 29.8193 702.517 29.6476 702.344C29.4753 702.173 29.3892 701.96 29.3892 701.706C29.3892 701.451 29.4753 701.238 29.6476 701.067C29.8193 700.894 30.0322 700.808 30.2864 700.808H48.232C48.4862 700.808 48.6992 700.894 48.8708 701.067C49.0431 701.238 49.1293 701.451 49.1293 701.706C49.1293 701.96 49.0431 702.173 48.8708 702.344C48.6992 702.517 48.4862 702.603 48.232 702.603H30.2864ZM32.081 698.117V688.246V698.117Z" fill="black"/>
<g filter="url(#filter5_d_541_11615)">
<circle cx="181.994" cy="687.696" r="60.349" fill="white"/>
</g>
<circle cx="181.993" cy="687.696" r="31.9238" fill="#17191C"/>
<g clip-path="url(#clip2_541_11615)">
<path d="M193.166 689.292H170.82C169.064 689.292 167.627 690.729 167.627 692.485V698.869C167.627 700.625 169.064 702.062 170.82 702.062H193.166C194.922 702.062 196.359 700.625 196.359 698.869V692.485C196.359 690.729 194.922 689.292 193.166 689.292ZM174.012 698.869C172.256 698.869 170.82 697.433 170.82 695.677C170.82 693.921 172.256 692.485 174.012 692.485C175.768 692.485 177.205 693.921 177.205 695.677C177.205 697.433 175.768 698.869 174.012 698.869ZM193.166 673.33H170.82C169.064 673.33 167.627 674.767 167.627 676.523V682.908C167.627 684.663 169.064 686.1 170.82 686.1H193.166C194.922 686.1 196.359 684.663 196.359 682.908V676.523C196.359 674.767 194.922 673.33 193.166 673.33ZM174.012 682.908C172.256 682.908 170.82 681.471 170.82 679.715C170.82 677.959 172.256 676.523 174.012 676.523C175.768 676.523 177.205 677.959 177.205 679.715C177.205 681.471 175.768 682.908 174.012 682.908Z" fill="white"/>
</g>
<g filter="url(#filter6_d_541_11615)">
<circle cx="76.1608" cy="785.216" r="21.4283" fill="white"/>
</g>
<path d="M81.722 773.518L70.9271 773.507C69.7396 773.507 68.7681 774.479 68.7681 775.666V795.097C68.7681 796.285 69.7396 797.256 70.9271 797.256H81.722C82.9094 797.256 83.881 796.285 83.881 795.097V775.666C83.881 774.479 82.9094 773.518 81.722 773.518ZM81.722 792.938H70.9271V777.825H81.722V792.938Z" fill="black"/>
<g filter="url(#filter7_d_541_11615)">
<circle cx="192.489" cy="831.571" r="21.4283" fill="white"/>
</g>
<path d="M198.05 819.874L187.255 819.863C186.068 819.863 185.096 820.834 185.096 822.022V841.453C185.096 842.64 186.068 843.612 187.255 843.612H198.05C199.238 843.612 200.209 842.64 200.209 841.453V822.022C200.209 820.834 199.238 819.874 198.05 819.874ZM198.05 839.294H187.255V824.181H198.05V839.294Z" fill="black"/>
<path d="M237.253 94.2495L376.365 177.48" stroke="white" stroke-width="0.787051"/>
<path d="M268.619 261.87L368.981 181.938" stroke="white" stroke-width="0.787051"/>
<path d="M423.984 21.8408L375.777 174.529" stroke="white" stroke-width="0.787051"/>
<circle cx="263.622" cy="266.417" r="19.2828" fill="white"/>
<path d="M257.011 271.113C256.567 271.113 256.187 270.955 255.871 270.639C255.554 270.322 255.396 269.942 255.396 269.498V260.616C255.396 260.172 255.554 259.792 255.871 259.475C256.187 259.159 256.567 259.001 257.011 259.001H269.93C270.374 259.001 270.754 259.159 271.071 259.475C271.387 259.792 271.545 260.172 271.545 260.616V269.498C271.545 269.942 271.387 270.322 271.071 270.639C270.754 270.955 270.374 271.113 269.93 271.113H257.011ZM257.011 269.498H269.93V260.616H257.011V269.498ZM255.396 273.535C255.167 273.535 254.975 273.458 254.821 273.303C254.666 273.148 254.588 272.956 254.588 272.728C254.588 272.499 254.666 272.307 254.821 272.153C254.975 271.998 255.167 271.92 255.396 271.92H271.545C271.773 271.92 271.965 271.998 272.12 272.153C272.275 272.307 272.352 272.499 272.352 272.728C272.352 272.956 272.275 273.148 272.12 273.303C271.965 273.458 271.773 273.535 271.545 273.535H255.396ZM257.011 269.498V260.616V269.498Z" fill="black"/>
<circle cx="235.286" cy="94.4462" r="19.2828" fill="white"/>
<path d="M240.291 83.9193L230.577 83.9095C229.508 83.9095 228.634 84.7838 228.634 85.8524V103.338C228.634 104.406 229.508 105.28 230.577 105.28H240.291C241.36 105.28 242.234 104.406 242.234 103.338V85.8524C242.234 84.7838 241.36 83.9193 240.291 83.9193ZM240.291 101.395H230.577V87.7952H240.291V101.395Z" fill="black"/>
<circle cx="423.786" cy="19.2828" r="19.2828" fill="white"/>
<path d="M428.791 8.75587L419.077 8.74615C418.008 8.74615 417.134 9.62042 417.134 10.689V28.1743C417.134 29.2428 418.008 30.1171 419.077 30.1171H428.791C429.86 30.1171 430.734 29.2428 430.734 28.1743V10.689C430.734 9.62042 429.86 8.75587 428.791 8.75587ZM428.791 26.2315H419.077V12.6318H428.791V26.2315Z" fill="black"/>
<circle cx="375.775" cy="175.119" r="54.3065" fill="white"/>
<circle cx="375.774" cy="175.119" r="28.7274" fill="#17191C"/>
<g clip-path="url(#clip3_541_11615)">
<path d="M385.828 176.555H365.719C364.139 176.555 362.846 177.848 362.846 179.428V185.173C362.846 186.753 364.139 188.046 365.719 188.046H385.828C387.408 188.046 388.701 186.753 388.701 185.173V179.428C388.701 177.848 387.408 176.555 385.828 176.555ZM368.592 185.173C367.012 185.173 365.719 183.881 365.719 182.301C365.719 180.721 367.012 179.428 368.592 179.428C370.172 179.428 371.465 180.721 371.465 182.301C371.465 183.881 370.172 185.173 368.592 185.173ZM385.828 162.192H365.719C364.139 162.192 362.846 163.484 362.846 165.064V170.81C362.846 172.39 364.139 173.682 365.719 173.682H385.828C387.408 173.682 388.701 172.39 388.701 170.81V165.064C388.701 163.484 387.408 162.192 385.828 162.192ZM368.592 170.81C367.012 170.81 365.719 169.517 365.719 167.937C365.719 166.357 367.012 165.064 368.592 165.064C370.172 165.064 371.465 166.357 371.465 167.937C371.465 169.517 370.172 170.81 368.592 170.81Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_541_11615" x="397.18" y="542.644" width="59.1038" height="59.1038" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6.64087"/>
<feGaussianBlur stdDeviation="6.64087"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_541_11615"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_541_11615" result="shape"/>
</filter>
<filter id="filter1_d_541_11615" x="229.159" y="451" width="59.1038" height="59.1038" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6.64087"/>
<feGaussianBlur stdDeviation="6.64087"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_541_11615"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_541_11615" result="shape"/>
</filter>
<filter id="filter2_d_541_11615" x="342.06" y="444.359" width="59.1037" height="59.1038" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6.64087"/>
<feGaussianBlur stdDeviation="6.64087"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_541_11615"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_541_11615" result="shape"/>
</filter>
<filter id="filter3_d_541_11615" x="259.379" y="507.78" width="118.208" height="118.208" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="6.64087"/>
<feGaussianBlur stdDeviation="6.64087"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.167 0 0 0 0 0.15 0 0 0 0 1 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_541_11615"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_541_11615" result="shape"/>
</filter>
<filter id="filter4_d_541_11615" x="0.50749" y="664.519" width="77.8415" height="77.8415" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="8.74624"/>
<feGaussianBlur stdDeviation="8.74624"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_541_11615"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_541_11615" result="shape"/>
</filter>
<filter id="filter5_d_541_11615" x="104.153" y="618.601" width="155.683" height="155.683" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="8.74624"/>
<feGaussianBlur stdDeviation="8.74624"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.167 0 0 0 0 0.15 0 0 0 0 1 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_541_11615"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_541_11615" result="shape"/>
</filter>
<filter id="filter6_d_541_11615" x="37.2401" y="755.042" width="77.8415" height="77.8415" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="8.74624"/>
<feGaussianBlur stdDeviation="8.74624"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_541_11615"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_541_11615" result="shape"/>
</filter>
<filter id="filter7_d_541_11615" x="153.568" y="801.397" width="77.8415" height="77.8415" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="8.74624"/>
<feGaussianBlur stdDeviation="8.74624"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_541_11615"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_541_11615" result="shape"/>
</filter>
<clipPath id="clip0_541_11615">
<rect width="16.3509" height="16.3509" fill="white" transform="translate(418.428 557.254)"/>
</clipPath>
<clipPath id="clip1_541_11615">
<rect width="16.3509" height="16.3509" fill="white" transform="translate(250.407 465.61)"/>
</clipPath>
<clipPath id="clip2_541_11615">
<rect width="38.3085" height="38.3085" fill="white" transform="translate(162.839 668.542)"/>
</clipPath>
<clipPath id="clip3_541_11615">
<rect width="34.4728" height="34.4728" fill="white" transform="translate(358.537 157.882)"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

35
static/assets/frontpage/hero_dancing_lines.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 253 KiB

35
static/assets/frontpage/hero_dancing_lines_mobile.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 255 KiB

49
static/assets/frontpage/homeserver.svg Normal file
View file

@ -0,0 +1,49 @@
<svg width="266" height="271" viewBox="0 0 266 271" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M39.6682 76.9226L188.025 69.5494" stroke="white" stroke-width="0.893718"/>
<path d="M185.347 71.7836L177.75 221.705" stroke="white" stroke-width="0.893718"/>
<g filter="url(#filter0_d_341_12587)">
<circle cx="39.8961" cy="77.8161" r="21.8961" fill="white"/>
</g>
<path d="M32.3887 83.1483C31.8844 83.1483 31.4529 82.9689 31.0941 82.6101C30.7347 82.2506 30.555 81.8188 30.555 81.3145V71.229C30.555 70.7247 30.7347 70.2929 31.0941 69.9335C31.4529 69.5747 31.8844 69.3953 32.3887 69.3953H47.0586C47.5629 69.3953 47.9947 69.5747 48.3541 69.9335C48.7129 70.2929 48.8923 70.7247 48.8923 71.229V81.3145C48.8923 81.8188 48.7129 82.2506 48.3541 82.6101C47.9947 82.9689 47.5629 83.1483 47.0586 83.1483H32.3887ZM32.3887 81.3145H47.0586V71.229H32.3887V81.3145ZM30.555 85.8989C30.2952 85.8989 30.0776 85.8108 29.9022 85.6348C29.7261 85.4594 29.6381 85.2418 29.6381 84.982C29.6381 84.7222 29.7261 84.5046 29.9022 84.3292C30.0776 84.1531 30.2952 84.0651 30.555 84.0651H48.8923C49.1521 84.0651 49.3697 84.1531 49.5451 84.3292C49.7212 84.5046 49.8092 84.7222 49.8092 84.982C49.8092 85.2418 49.7212 85.4594 49.5451 85.6348C49.3697 85.8108 49.1521 85.8989 48.8923 85.8989H30.555ZM32.3887 81.3145V71.229V81.3145Z" fill="black"/>
<g filter="url(#filter1_d_341_12587)">
<circle cx="177.978" cy="221.705" r="21.8961" fill="white"/>
</g>
<path d="M170.471 227.037C169.966 227.037 169.535 226.858 169.176 226.499C168.817 226.139 168.637 225.707 168.637 225.203V215.118C168.637 214.613 168.817 214.182 169.176 213.822C169.535 213.463 169.966 213.284 170.471 213.284H185.14C185.645 213.284 186.077 213.463 186.436 213.822C186.795 214.182 186.974 214.613 186.974 215.118V225.203C186.974 225.707 186.795 226.139 186.436 226.499C186.077 226.858 185.645 227.037 185.14 227.037H170.471ZM170.471 225.203H185.14V215.118H170.471V225.203ZM168.637 229.788C168.377 229.788 168.159 229.7 167.984 229.523C167.808 229.348 167.72 229.13 167.72 228.871C167.72 228.611 167.808 228.393 167.984 228.218C168.159 228.042 168.377 227.954 168.637 227.954H186.974C187.234 227.954 187.452 228.042 187.627 228.218C187.803 228.393 187.891 228.611 187.891 228.871C187.891 229.13 187.803 229.348 187.627 229.523C187.452 229.7 187.234 229.788 186.974 229.788H168.637ZM170.471 225.203V215.118V225.203Z" fill="black"/>
<g filter="url(#filter2_d_341_12587)">
<circle cx="185.572" cy="70.6665" r="61.6665" fill="white"/>
</g>
<circle cx="185.571" cy="70.6665" r="32.6207" fill="#17191C"/>
<path d="M196.988 72.2975H174.154C172.36 72.2975 170.892 73.7655 170.892 75.5596V82.0837C170.892 83.8779 172.36 85.3458 174.154 85.3458H196.988C198.782 85.3458 200.25 83.8779 200.25 82.0837V75.5596C200.25 73.7655 198.782 72.2975 196.988 72.2975ZM177.416 82.0837C175.622 82.0837 174.154 80.6158 174.154 78.8217C174.154 77.0275 175.622 75.5596 177.416 75.5596C179.21 75.5596 180.678 77.0275 180.678 78.8217C180.678 80.6158 179.21 82.0837 177.416 82.0837ZM196.988 55.9872H174.154C172.36 55.9872 170.892 57.4551 170.892 59.2493V65.7734C170.892 67.5675 172.36 69.0355 174.154 69.0355H196.988C198.782 69.0355 200.25 67.5675 200.25 65.7734V59.2493C200.25 57.4551 198.782 55.9872 196.988 55.9872ZM177.416 65.7734C175.622 65.7734 174.154 64.3055 174.154 62.5113C174.154 60.7172 175.622 59.2493 177.416 59.2493C179.21 59.2493 180.678 60.7172 180.678 62.5113C180.678 64.3055 179.21 65.7734 177.416 65.7734Z" fill="white"/>
<defs>
<filter id="filter0_d_341_12587" x="0.125637" y="46.9829" width="79.5409" height="79.541" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="8.93718"/>
<feGaussianBlur stdDeviation="8.93718"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_341_12587"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_341_12587" result="shape"/>
</filter>
<filter id="filter1_d_341_12587" x="138.207" y="190.872" width="79.5409" height="79.541" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="8.93718"/>
<feGaussianBlur stdDeviation="8.93718"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.329412 0 0 0 0 0.321569 0 0 0 0 0.964706 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_341_12587"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_341_12587" result="shape"/>
</filter>
<filter id="filter2_d_341_12587" x="106.031" y="0.0628185" width="159.082" height="159.082" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="8.93718"/>
<feGaussianBlur stdDeviation="8.93718"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.167 0 0 0 0 0.15 0 0 0 0 1 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_341_12587"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_341_12587" result="shape"/>
</filter>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.5 KiB

16
static/assets/frontpage/personal-bg-mobile.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 95 KiB

16
static/assets/frontpage/personal-bg.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 94 KiB

82
static/assets/frontpage/personal-graphic.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 22 MiB

3
static/assets/hero-spiro.svg
View file

File diff suppressed because one or more lines are too long
Side by side

Before

Width:  |  Height:  |  Size: 46 KiB

33
static/assets/matrix-lines-hero.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 249 KiB

BIN
static/images/community-cinny.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
static/images/community-element.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 MiB

7
static/images/matrix-favicon.svg Normal file
View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 520 520" style="enable-background:new 0 0 520 520;" xml:space="preserve">
<path d="M13.7,11.9v496.2h35.7V520H0V0h49.4v11.9H13.7z"/>
<path d="M166.3,169.2v25.1h0.7c6.7-9.6,14.8-17,24.2-22.2c9.4-5.3,20.3-7.9,32.5-7.9c11.7,0,22.4,2.3,32.1,6.8 c9.7,4.5,17,12.6,22.1,24c5.5-8.1,13-15.3,22.4-21.5c9.4-6.2,20.6-9.3,33.5-9.3c9.8,0,18.9,1.2,27.3,3.6c8.4,2.4,15.5,6.2,21.5,11.5 c6,5.3,10.6,12.1,14,20.6c3.3,8.5,5,18.7,5,30.7v124.1h-50.9V249.6c0-6.2-0.2-12.1-0.7-17.6c-0.5-5.5-1.8-10.3-3.9-14.3 c-2.2-4.1-5.3-7.3-9.5-9.7c-4.2-2.4-9.9-3.6-17-3.6c-7.2,0-13,1.4-17.4,4.1c-4.4,2.8-7.9,6.3-10.4,10.8c-2.5,4.4-4.2,9.4-5,15.1 c-0.8,5.6-1.3,11.3-1.3,17v103.3h-50.9v-104c0-5.5-0.1-10.9-0.4-16.3c-0.2-5.4-1.3-10.3-3.1-14.9c-1.8-4.5-4.8-8.2-9-10.9 c-4.2-2.7-10.3-4.1-18.5-4.1c-2.4,0-5.6,0.5-9.5,1.6c-3.9,1.1-7.8,3.1-11.5,6.1c-3.7,3-6.9,7.3-9.5,12.9c-2.6,5.6-3.9,13-3.9,22.1 v107.6h-50.9V169.2H166.3z"/>
<path d="M506.3,508.1V11.9h-35.7V0H520v520h-49.4v-11.9H506.3z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/images/personal-element-ios.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 410 KiB

BIN
static/images/personal-fluffychat.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 383 KiB

29
static/images/sponsors/upcloud.svg Normal file
View file

@ -0,0 +1,29 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 959 580.5" style="enable-background:new 0 0 959 580.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:#7B00FF;}
.st1{fill:none;}
</style>
<path id="Shape" d="M432.6,295.6c0,15.5-8.7,22.1-23,22.1c-15,0-23.8-6.6-23.8-22.1v-60.4h-11.4v61.5c0,22,15,30.8,34.8,30.8
c19.5,0,34.8-8.7,34.8-30.8v-61.5h-11.4V295.6z M492.6,258.9c-9.5,0-16.1,4.1-21.1,10.8h-0.2v-9.3H461v86.8h10.3v-28.9h0.3
c5.5,7,11.9,9.7,20.7,9.7c17.8,0,28.6-13.5,28.6-34.6C520.8,271.6,509.2,258.9,492.6,258.9L492.6,258.9z M491.4,319.4
c-15.1,0-20.8-11.5-20.8-25.8s6.6-26,21-26c12.5,0,18.7,11.2,18.7,25.9S504,319.4,491.4,319.4z M574.7,317.9
c-18.9,0-31.2-15-31.2-37.2c0-21.4,11.2-37.5,31.2-37.5c14.4,0,23.4,7.8,25.5,19.1h11.2c-2.4-16.8-15.3-29-36.5-29
c-27.1,0-43.1,20.8-43.1,47.4c0,27.6,16.8,47.3,42.5,47.3c11.5,0,20.8-3.3,27.2-9.5c6.7-6.9,10.6-15.9,11-25.5h-11.3
C600,306.2,591.9,317.9,574.7,317.9z M626.1,235.2h10.3v90.9h-10.3V235.2z M680.5,258.7c-19.6,0-31.8,15.5-31.8,34.6
s12.2,34.6,31.8,34.6c19.7,0,31.6-15.5,31.6-34.6S700.2,258.7,680.5,258.7z M680.5,319.2c-14,0-21.2-11.4-21.2-25.9
s7.2-26.1,21.2-26.1s21.1,11.6,21.1,26.1S694.5,319.2,680.5,319.2z M766.3,300.9c0,10.4-6.8,18.3-17.2,18.3
c-9.3,0-14.7-4.9-14.7-13.5v-45.3h-10.2V306c0,13.6,8.7,21.7,22.1,21.7c9.5,0,15.1-4.2,19.8-10.6h0.2v9h10.3v-65.8h-10.3
L766.3,300.9L766.3,300.9z M838.7,235.2v34.4h-0.2c-4.6-6.9-12.3-10.9-20.6-10.8c-16.3,0-28.9,12.7-28.9,34.6
c0,21.1,11.2,34.6,29.1,34.6c9.3,0,15.3-3.6,20.4-9.9h0.2v8H849v-90.9H838.7z M818.5,319.4c-12.6,0-18.9-10.9-18.9-25.8
s6.4-25.9,18.8-25.9c13.6,0,21,10.6,21,25.9C839.3,308.5,833.2,319.4,818.5,319.4z"/>
<g id="logo-cables">
<path id="Shape-2" class="st0" d="M320.5,290.4H209.3v8.4h111.3c5.3-0.2,9.7,4,9.9,9.3c0.2,5.3-4,9.7-9.3,9.9c-0.2,0-0.4,0-0.6,0
H200.9v-38.3h-8.4v46.7h128c9.9-0.2,17.8-8.5,17.5-18.4C337.8,298.3,330.1,290.6,320.5,290.4L320.5,290.4z"/>
<path id="Shape-3" class="st0" d="M118.4,280.8c0-5.3,4.3-9.5,9.5-9.5c0,0,0,0,0.1,0H238c9.9-0.2,17.8-8.5,17.5-18.4
c-0.2-9.6-7.9-17.3-17.5-17.5h-45.4v19.2h8.4v-10.8H238c5.3,0.2,9.4,4.6,9.3,9.9c-0.2,5-4.2,9.1-9.3,9.3H127.9c-9.9,0-18,8.1-18,18
s8.1,18,18,18h56.2v-8.4h-56.2C122.6,290.4,118.3,286.1,118.4,280.8z"/>
</g>
<rect x="88" y="207.5" class="st1" width="783" height="165.5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

2
templates/includes/header.html
View file

@ -1,6 +1,6 @@
<header class="site-header">
<a href="/" class="brand">
<img src="/images/matrix-logo.svg" alt="Matrix logo">
<img src="/images/matrix-logo-white.svg" alt="Matrix logo">
</a>
<input id="site-header-dropdown-checkbox" type="checkbox" class="dropdown-checkbox" aria-hidden="true">
<label for="site-header-dropdown-checkbox" class="dropdown-button">&#xe602;</label>

315
templates/index.html
View file

@ -3,262 +3,65 @@
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path='atom.xml', trailing_slash=false)}}">
{% endblock head_extra %}
{% block content %}
{% set frontpage_data = load_data(path="content/index.toml") %}
<div class="hero">
<div class="background-img"></div>
<div class="content">
<img src="images/matrix-logo-white.svg" alt="Matrix.org Logo" class="logo">
<h1 class="message">An open network for secure, decentralized communication</h1>
<a href="/docs/guides/introduction" class="button w-button">Learn More</a>
{% set sponsors_data = load_data(path="content/sponsors.toml") %}
<div id="frontpage">
<div id="hero" class="section">
<div class="hero_content">
<img src="images/matrix-logo-white.svg" alt="The Matrix Logo" />
<h2>An open network for secure, decentralised communication</h2>
</div>
<div id="hero_curve1"></div>
<div id="hero_curve2"></div>
<div id="hero_curve3"></div>
<div id="hero_curve4"></div>
</div>
<div id="use-case-personal" class="section">
<h2>Chat with friends, family, communities and co-workers</h2>
<img src="assets/frontpage/personal-graphic.svg" alt="An artist view of a chat timeline." />
<div id="personal_bottom"></div>
</div>
<div id="use-case-community" class="section">
<h2>A cozy, safe, supercharged place for your community</h2>
<div class="call-to-action">Reclaim your Space</div>
<img src="assets/frontpage/community-graphic.svg" alt="An artist view of a chat community." />
</div>
<div id="complex_apps" class="section">
<h2>Build advanced, rich communication applications on top of Matrix.</h2>
<img src="https://via.placeholder.com/536x320.png" alt="A video showcasing Element Call and Third Room" />
</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" alt="A conceptual representation of a bridged system" />
<img id="homeserver" src="/assets/frontpage/homeserver.svg" alt="A conceptual representation of a homeserver" />
<img id="federation_visual" src="/assets/frontpage/federation-visual.svg" alt="A conceptual representation of the federation between homeservers" />
<img id="federation_visual_mobile" src="/assets/frontpage/federation-visual-mobile.svg" alt="A conceptual representation of the federation between homeservers" />
<h2>Build on Matrix</h2>
<p>
Matrix is a rich ecosystem of clients, servers, bots and application
services. Find out more in our developer documentation.
</p>
<div class="call-to-action">Browse documentation </div>
</div>
<div id="sponsors" class="section">
<h2>Thank you to our incredible sponsors</h2>
<div id="sponsors_grid">
{% for sponsor in sponsors_data.sponsors %}
<div class="sponsor_card">
<img src="/images/sponsors/{{ sponsor.image }}" />
<div class="sponsor_text">
<h3>{{ sponsor.name }}</h3>
<p>{{ sponsor.description }}</p>
<a href="{{ sponsor.website }}">Learn more</a>
</div>
</div>
{% endfor %}
</div>
<p>
Matrix is supported by organisations and individuals like you who
care about the health of the ecosystem. Please consider supporting
us financially.
</p>
<div class="call-to-action">Support Matrix</div>
</div>
</div>
<div id="frontpage">
<section>
<div class="grid">
<div class="grid-container">
<div class="block">
<div class="imagine">
{% set imagine = load_data(path="/partials/frontpage/imagine.md") %}
{{ imagine | markdown | safe }}
</div>
</div>
</div>
<div class="grid-container">
<div class="block">
<div class="thisismatrix">
{% set thisismatrix = load_data(path="/partials/frontpage/this_is_matrix.md") %}
{{ thisismatrix | markdown | safe }}
</div>
</div>
</div>
</div>
</section>
<section>
<div class="grid">
<div class="grid-container">
<div class="block dark-bg">
{% set messaging = load_data(path="/partials/frontpage/features/messaging.md") %}
<div class="text">
{{ messaging | markdown | safe }}
</div>
<a href="/docs/guides/" class="w-button button-dark">Learn more</a>
</div>
</div>
<div class="grid-container">
<div class="block dark-bg">
{% set e2ee = load_data(path="/partials/frontpage/features/e2ee.md") %}
<div class="text">
{{ e2ee | markdown | safe }}
</div>
<a href="/docs/guides/end-to-end-encryption-implementation-guide" class="w-button button-dark">Learn
more</a>
</div>
</div>
<div class="grid-container">
<div class="block dark-bg">
{% set voip = load_data(path="/partials/frontpage/features/voip.md") %}
<div class="text">
{{ voip | markdown | safe }}
</div>
<a href="/blog/2018/02/05/3-d-video-calling-with-matrix-webrtc-and-webvr-at-fosdem-2018/"
class="w-button button-dark">Learn more</a>
</div>
</div>
<div class="grid-container">
<div class="block dark-bg">
{% set bridging = load_data(path="/partials/frontpage/features/bridging.md") %}
<div class="text">
{{ bridging | markdown | safe }}
</div>
<a href="/bridges/" class="w-button button-dark">Learn more</a>
</div>
</div>
<div class="grid-container-full">
<div class="block dark-bg">
{% set more = load_data(path="/partials/frontpage/features/more.md") %}
<div class="text">
{{ more | markdown | safe }}
</div>
</div>
</div>
</div>
</section>
<section class="howdoesitwork">
{% set how_does_it_work = load_data(path="/partials/frontpage/how_does_it_work.md") %}
{{ how_does_it_work | markdown | safe }}
<div class="how" style="height: 520px;">placeholder</div>
</section>
<section class="content dark-bg" id="open-standard">
<div class="content">
<h1>An Open Standard</h1>
<div class="grid">
<div class="grid-container-third">
<div class="block">
<img src="assets/basic_signs.svg" alt="">
<h3>Simple pragmatic <a href="/docs/api"> RESTful HTTP/JSON APIs</a> by default</h3>
</div>
</div>
<div class="grid-container-third">
<div class="block">
<img src="assets/basic_spread_text.svg" alt="">
<h3><a href="/docs/spec">Open specification</a> of the Matrix standard</h3>
</div>
</div>
<div class="grid-container-third">
<div class="block">
<img src="assets/basic_share.svg" alt="">
<h3>Fully decentralised conversations with no single points of control or failure</h3>
</div>
</div>
<div class="grid-container-third">
<div class="block">
<img src="assets/basic_lock.svg" alt="">
<h3>End-to-end encryption via Olm and Megolm</h3>
</div>
</div>
<div class="grid-container-third">
<div class="block">
<img src="assets/music_microphone_old.svg" alt="">
<h3>WebRTC VoIP/Video calling using Matrix signalling</h3>
</div>
</div>
<div class="grid-container-third">
<div class="block">
<img src="assets/arrows_rotate.svg" alt="">
<h3>Real-time synchronised history and state across all clients</h3>
</div>
</div>
<div class="grid-container-third">
<div class="block">
<img src="assets/basic_mail_open_text.svg" alt="">
<h3>Integrates with existing 3rd party IDs to authenticate and discover users</h3>
</div>
</div>
<div class="grid-container-third">
<div class="block">
<img src="assets/basic_heart.svg" alt="">
<h3>Maintained by the non-profit <a href="/foundation/">Matrix.org Foundation</a></h3>
</div>
</div>
<div class="grid-container-third">
<div class="block">
<img src="assets/basic_elaboration_message_happy.svg" alt="">
<h3>Group conversations, read receipts, typing notifications, presence...</h3>
</div>
</div>
</div>
</div>
</section>
<section id="latest-news">
<h1>Latest News</h1>
<div class="grid">
{% set blog_section = get_section(path="blog/_index.md") %}
{% for page in blog_section.pages | slice(end=4) %}
{% set path = page.path %}
{% set content = page.content | striptags | truncate(length=133) %}
{% set title = page.title %}
{% set date = page.date %}
{% set author = page.taxonomies.author | default (value=["unknown author"]) | first %}
<div class="grid-container">
<div class="block">
<h2>{{ title }}</h2>
<div>
<p style="color: #666;">{{ date | date(format="%d.%m.%Y %H:%M") }} by {{ author }}
</p>
<p>
{{ content }}
</p>
</div>
<a href="{{ path }}" class="w-button button-dark">Read more</a>
</div>
</div>
{% endfor %}
</div>
<a href="/blog" class="w-button button-dark">View all Posts</a>
</section>
<section>
<h1>Explore Matrix</h1>
<div id="explore">
{% for explore in frontpage_data.explore %}
<a title="{{ explore.title }}" href="{{ explore.href }}">
<img src="assets/{{ explore.img }}">
<span>{{ explore.title }}</span>
</a>
{% endfor %}
</div>
</section>
<section id="sdks">
<h1>SDKs</h1>
<h2 class="subtitle">Native SDKs for multiple platforms, including:</h2>
<div id="explore">
<a title="Python" href="https://github.com/poljar/matrix-nio">
<img src="assets/python.svg">
<span>Python</span>
</a>
<a title="JavaScript" href="https://github.com/matrix-org/matrix-js-sdk">
<img src="assets/js.svg">
<span>JavaScript</span>
</a>
<a title="Android" href="https://github.com/matrix-org/matrix-android-sdk">
<img src="assets/android.svg">
<span>Android</span>
</a>
<a title="iOS" href="https://github.com/matrix-org/matrix-ios-sdk">
<img src="assets/iOS.svg">
<span>iOS</span>
</a>
</div>
<a href="/sdks/" class="w-button button-dark">View all SDKs</a>
</section>
<section class="dark-bg support-container">
<h1>Support Matrix</h1>
<p>If you share our vision, or are building on top of Matrix, please consider donating...</p>
<p>Support us on Patreon for great rewards including access to the supporters-only podcast,
and even a
voice at our weekly meetings.<br>
<a href="https://www.patreon.com/matrixdotorg">Find out more at our Patreon page.</a>
</p>
<div id="support">
<div>
<h2>Patreon</h2>
<a href="https://www.patreon.com/matrixdotorg"><img alt="Patreon" src="/assets/patreon.png"></a>
</div>
<div>
<h2>Liberapay</h2>
<a href="https://liberapay.com/matrixdotorg"><img alt="Liberapay"
src="/assets/fund-via-liberapay.png"></a>
</div>
<div>
<h2>Cryptocurrency</h2>
<p>You can also send us cryptocurrency:<br>
<small>BTC 1LxowEgsquZ3UPZ68wHf8v2MDZw82dVmAE</small><br>
<small>ETH 0xA5f9a4f9E024F6D727f7afdA9257e22329A97485</small>
</p>
</div>
</div>
<p>If you share our vision, or are building on top of Matrix, please consider donating. See our current
<a href="/supporters">Elliptic supporters!</a>
</p>
</section>
<section id="sponsors">
<h1>Thank you to our incredible sponsors</h1>
<div class="grid">
{% for sponsor in frontpage_data.sponsors %}
<div class="grid-container-third">
<div class="block">
<div class="logo">
<img src="/assets/{{ sponsor.image }}" alt="{{ sponsor.name }} logo" width="96px" height="96px">
</div>
<div class="content">
<h2>{{ sponsor.name }}</h2>
<p>{{ sponsor.description }}</p>
<a href="{{ sponsor.website }}">Learn more</a>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
</div>
{% endblock content %}