Add illustration to getting started column

2 files changed, 13 insertions, 0 deletions

diff --git a/app/assets/javascripts/components/features/getting_started/index.jsx b/app/assets/javascripts/components/features/getting_started/index.jsx
index fdd594621..157bdf8f2 100644
--- a/app/assets/javascripts/components/features/getting_started/index.jsx
+++ b/app/assets/javascripts/components/features/getting_started/index.jsx
@@ -48,6 +48,8 @@ const GettingStarted = ({ intl, me }) => {
         <p><FormattedMessage id='getting_started.about_shortcuts' defaultMessage='If the target user is on the same domain as you, just the username will work. The same rule applies to mentioning people in statuses.' /></p>
         <p><FormattedMessage id='getting_started.about_developer' defaultMessage='The developer of this project can be followed as Gargron@mastodon.social' /></p>
       </div>
+
+      <div className='getting-started__illustration' />
     </Column>
   );
 };
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 9f2d1217f..88808b085 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -332,6 +332,7 @@
 
 .column {
   width: 330px;
+  position: relative;
 }
 
 .drawer {
@@ -575,3 +576,13 @@
     color: #fff;
   }
 }
+
+.getting-started__illustration {
+  width: 330px;
+  height: 235px;
+  background: image-url('mastodon-getting-started.png') no-repeat 0 0;
+  position: absolute;
+  pointer-events: none;
+  bottom: 0;
+  left: 0;
+}
\ No newline at end of file