updated intro image

app/main.css

@@ -148,6 +148,13 @@ footer li:hover {
   text-decoration: none;
 }
 
+.intro {
+  max-width: unset;
+  height: unset;
+  margin-bottom: -3rem;
+  margin-right: -7rem;
+}
+
 .main {
   display: flex;
   max-width: 64rem;

app/ui/home.js

@@ -30,7 +30,7 @@ module.exports = function(state, emit) {
     <main class="main relative">
       ${state.modal && modal(state, emit)}
       <section
-        class="h-full w-full p-6 z-10 md:flex md:flex-row md:rounded-lg md:shadow-big"
+        class="h-full w-full p-6 z-10 overflow-hidden md:flex md:flex-row md:rounded-lg md:shadow-big"
       >
         <div class="px-2 w-full md:px-0 md:mr-6 md:w-1/2">${left}</div>
         <div class="mt-6 w-full md:w-1/2 md:-m-2">${right}</div>

app/ui/intro.js

@@ -4,16 +4,16 @@ const assets = require('../../common/assets');
 module.exports = function intro(state) {
   return html`
     <send-intro
-      class="flex flex-col items-center justify-center bg-white border border-grey-light md:border-none px-6 md:py-0 py-6 mb-0 h-full w-full"
+      class="flex flex-col items-center justify-center bg-white px-6 md:py-0 py-6 mb-0 h-full w-full"
     >
-      <div class="flex flex-col justify-end h-full py-8">
+      <div class="flex flex-col justify-end h-full">
         <h1 class="font-bold">
           ${state.translate('uploadPageHeader')}
         </h1>
-        <p class="max-w-sm mt-2 font-light leading-normal">
+        <p class="max-w-sm mt-2 pr-16 font-light leading-normal">
           ${state.translate('uploadPageExplainer')}
         </p>
-        <img class="-mb-12" src="${assets.get('intro.png')}" />
+        <img class="intro" src="${assets.get('intro.svg')}" />
       </div>
     </send-intro>
   `;