Add matrix logo

src/components/CreateLinkTile.scss

@@ -17,8 +17,9 @@ limitations under the License.
 .createLinkTile {
     background: none;
 
-    > * {
-        margin: 12px 0;
+    row-gap: 24px;
+
+    * {
         width: 100%;
     }
 
@@ -26,5 +27,6 @@ limitations under the License.
         display: grid;
         row-gap: 24px;
         align-self: center;
+        padding: 0 30px;
     }
 }

src/components/MatrixTile.scss

@@ -0,0 +1,22 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.matrixTile {
+    background: none;
+    row-gap: 8px;
+
+    padding: 0 40px;
+}

src/components/MatrixTile.tsx

@@ -0,0 +1,36 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import Tile from "./Tile";
+
+import logo from "../imgs/matrix-logo.svg";
+
+import "./MatrixTile.scss";
+
+const MatrixTile: React.FC = () => {
+    return (
+        <Tile className="matrixTile">
+            <img src={logo} alt="matrix-logo" />
+            <div>
+                Matrix.to is a stateless URL redirecting service for the{" "}
+                <a href="https://matrix.org">Matrix</a> ecosystem.
+            </div>
+        </Tile>
+    );
+};
+
+export default MatrixTile;

src/components/Tile.scss

@@ -22,9 +22,8 @@ limitations under the License.
     border-radius: 8px;
     padding: 1rem;
 
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    display: grid;
+    justify-items: center;
 
     text-align: center;
 }