added Inter font and intro image

app/ui/intro.js

@@ -13,7 +13,7 @@ module.exports = function intro(state) {
         <p class="max-w-sm font-light leading-normal">
           ${state.translate('uploadPageExplainer')}
         </p>
-        <img class="my-6" src="${assets.get('illustration_download.svg')}" />
+        <img class="-mb-12" src="${assets.get('intro.png')}" />
       </div>
     </send-intro>
   `;

public/inter.css

@@ -0,0 +1,143 @@
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100;
+  src: url('Inter-Thin.woff2') format('woff2'),
+    url('Inter-Thin.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 100;
+  src: url('Inter-ThinItalic.woff2') format('woff2'),
+    url('Inter-ThinItalic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 200;
+  src: url('Inter-ExtraLight.woff2') format('woff2'),
+    url('Inter-ExtraLight.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 200;
+  src: url('Inter-ExtraLightItalic.woff2') format('woff2'),
+    url('Inter-ExtraLightItalic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url('Inter-Light.woff2') format('woff2'),
+    url('Inter-Light.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 300;
+  src: url('Inter-LightItalic.woff2') format('woff2'),
+    url('Inter-LightItalic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url('Inter-Regular.woff2') format('woff2'),
+    url('Inter-Regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 400;
+  src: url('Inter-Italic.woff2') format('woff2'),
+    url('Inter-Italic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url('Inter-Medium.woff2') format('woff2'),
+    url('Inter-Medium.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 500;
+  src: url('Inter-MediumItalic.woff2') format('woff2'),
+    url('Inter-MediumItalic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  src: url('Inter-SemiBold.woff2') format('woff2'),
+    url('Inter-SemiBold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 600;
+  src: url('Inter-SemiBoldItalic.woff2') format('woff2'),
+    url('Inter-SemiBoldItalic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  src: url('Inter-Bold.woff2') format('woff2'),
+    url('Inter-Bold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 700;
+  src: url('Inter-BoldItalic.woff2') format('woff2'),
+    url('Inter-BoldItalic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 800;
+  src: url('Inter-ExtraBold.woff2') format('woff2'),
+    url('Inter-ExtraBold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 800;
+  src: url('Inter-ExtraBoldItalic.woff2') format('woff2'),
+    url('Inter-ExtraBoldItalic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 900;
+  src: url('Inter-Black.woff2') format('woff2'),
+    url('Inter-Black.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 900;
+  src: url('Inter-BlackItalic.woff2') format('woff2'),
+    url('Inter-BlackItalic.woff') format('woff');
+}

server/layout.js

@@ -40,7 +40,7 @@ module.exports = function(state, body = '') {
         <link rel="manifest" href="/app.webmanifest" />
 
         <title>${state.title}</title>
-
+        <link rel="stylesheet" type="text/css" href="/inter.css" />
         <link
           rel="stylesheet"
           type="text/css"

tailwind.js

@@ -191,6 +191,7 @@ module.exports = {
 
   fonts: {
     sans: [
+      'Inter',
       'system-ui',
       'BlinkMacSystemFont',
       '-apple-system',