diff --git a/assets/blob.png b/assets/blob.png
new file mode 100644
index 000000000..554b11981
Binary files /dev/null and b/assets/blob.png differ
diff --git a/assets/leaves.svg b/assets/leaves.svg
new file mode 100644
index 000000000..070148df9
--- /dev/null
+++ b/assets/leaves.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 143 112" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M128.047,23.121c0.06,0.017 0.121,0.03 0.179,0.052c0.116,0.044 0.224,0.107 0.32,0.186c0.289,0.241 0.441,0.621 0.398,0.995c-0.014,0.123 -0.049,0.243 -0.103,0.355c-0.053,0.113 -0.125,0.215 -0.212,0.304c-0.043,0.044 -0.094,0.081 -0.141,0.121c-0.353,0.257 -0.707,0.511 -1.062,0.765c-3.378,2.404 -6.808,4.737 -10.267,7.022c-4.243,2.803 -8.534,5.531 -12.872,8.185c-4.906,3.001 -9.87,5.906 -14.899,8.696c-4.938,2.74 -9.938,5.37 -15.008,7.858c-6.245,3.064 -12.599,5.917 -19.084,8.441c-1.677,0.653 -3.364,1.283 -5.06,1.888c-0.459,0.163 -0.918,0.325 -1.379,0.485c-0.153,0.053 -0.306,0.106 -0.459,0.158c-0.086,0.03 -0.466,0.174 -0.638,0.202c-0.122,0.021 -0.247,0.02 -0.37,0c-0.122,-0.021 -0.241,-0.061 -0.35,-0.121c-0.331,-0.179 -0.554,-0.522 -0.585,-0.897c-0.01,-0.124 0,-0.248 0.031,-0.369c0.061,-0.241 0.204,-0.458 0.4,-0.611c0.131,-0.102 0.176,-0.11 0.326,-0.176c0.454,-0.155 0.908,-0.312 1.361,-0.47c1.674,-0.589 3.341,-1.199 4.998,-1.835c5.975,-2.291 11.838,-4.871 17.606,-7.641c7.316,-3.513 14.484,-7.333 21.527,-11.364c6.959,-3.982 13.799,-8.172 20.522,-12.542c2.59,-1.684 5.164,-3.395 7.716,-5.136c2.051,-1.4 4.091,-2.817 6.104,-4.271l0.118,-0.086c0.053,-0.032 0.104,-0.069 0.159,-0.097c0.111,-0.055 0.231,-0.092 0.354,-0.109c0.062,-0.008 0.124,-0.006 0.186,-0.009c0.061,0.007 0.123,0.014 0.184,0.021l0,0Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/><path d="M53.576,65.474c0,0 6.528,12.595 6.75,27.75c0.223,15.156 -4.5,14.25 -4.5,14.25c0,0 -2.623,-36.651 -2.25,-42Z" style="fill:url(#_Linear2);"/><path d="M48.861,66.179c0,0 3.134,13.836 -0.48,28.555c-3.613,14.72 -7.954,12.651 -7.954,12.651c0,0 6.721,-36.125 8.434,-41.206l0,0Z" style="fill:url(#_Linear3);"/><path d="M48.045,67.459c0,0 -5.294,13.161 -16.64,23.211c-11.346,10.05 -13.738,5.879 -13.738,5.879c0,0 26.078,-25.885 30.378,-29.09Z" style="fill:url(#_Linear4);"/><path d="M46.451,68.573c0,0 -10.444,9.599 -25.012,13.784c-14.567,4.185 -14.931,-0.609 -14.931,-0.609c0,0 34.683,-12.135 39.943,-13.175Z" style="fill:url(#_Linear5);"/><path d="M49.711,67.032c0,0 -13.577,-4.112 -28.516,-1.557c-14.94,2.555 -13.186,7.032 -13.186,7.032c0,0 36.512,-4.128 41.702,-5.475Z" style="fill:url(#_Linear6);"/><path d="M51.599,66.179c0,0 -11.832,-7.825 -26.878,-9.653c-15.046,-1.827 -14.647,2.965 -14.647,2.965c0,0 36.167,6.493 41.525,6.688Z" style="fill:url(#_Linear7);"/><path d="M54.996,64.134c0,0 -9.77,-10.286 -24.02,-15.449c-14.25,-5.164 -14.938,-0.405 -14.938,-0.405c0,0 33.781,14.459 38.958,15.854Z" style="fill:url(#_Linear8);"/><path d="M62.433,61.88c0,0 -8.106,-11.642 -21.414,-18.897c-13.307,-7.255 -14.706,-2.654 -14.706,-2.654l36.12,21.551Z" style="fill:url(#_Linear9);"/><path d="M68.975,57.469c0,0 -8.106,-11.642 -21.413,-18.896c-13.308,-7.255 -14.706,-2.654 -14.706,-2.654c0,0 31.212,19.39 36.119,21.55Z" style="fill:url(#_Linear10);"/><path d="M75.561,56.05c0,0 -7.227,-12.207 -19.964,-20.423c-12.737,-8.215 -14.47,-3.73 -14.47,-3.73c0,0 29.699,21.637 34.434,24.153Z" style="fill:url(#_Linear11);"/><path d="M82.89,51.578c0,0 -7.226,-12.208 -19.963,-20.423c-12.738,-8.215 -14.471,-3.73 -14.471,-3.73l34.434,24.153Z" style="fill:url(#_Linear12);"/><path d="M89.963,48.721c0,0 -5.966,-12.871 -17.815,-22.322c-11.849,-9.451 -13.804,-2.45 -13.804,-2.45c0,0 27.16,21.793 31.619,24.772Z" style="fill:url(#_Linear13);"/><path d="M97.78,45.114c0,0 -5.186,-13.204 -16.449,-23.346c-11.264,-10.142 -13.634,-3.27 -13.634,-3.27c0,0 25.81,23.377 30.083,26.616Z" style="fill:url(#_Linear14);"/><path d="M105.005,38.89c0,0 -5.187,-13.203 -16.45,-23.346c-11.263,-10.142 -13.633,-3.27 -13.633,-3.27c0,0 25.81,23.377 30.083,26.616Z" style="fill:url(#_Linear15);"/><path d="M111.032,34.48c0,0 -5.186,-13.204 -16.449,-23.346c-11.264,-10.142 -13.634,-3.27 -13.634,-3.27c0,0 25.81,23.377 30.083,26.616Z" style="fill:url(#_Linear16);"/><path d="M120.615,28.891c0,0 -5.186,-13.204 -16.45,-23.346c-11.263,-10.142 -13.633,-3.27 -13.633,-3.27l30.083,26.616Z" style="fill:url(#_Linear17);"/><path d="M56.937,64.134c0,0 9.12,4.395 13.38,18.941c4.26,14.546 0,20.934 0,20.934c0,0 -12.312,-34.621 -13.38,-39.875l0,0Z" style="fill:url(#_Linear18);"/><path d="M64.163,61.426c0,0 9.98,10.082 14.702,24.484c4.722,14.403 -0.056,14.944 -0.056,14.944c0,0 -13.411,-34.21 -14.646,-39.428Z" style="fill:url(#_Linear19);"/><path d="M82.89,52.482c0,0 11.324,8.544 18.065,22.119c6.742,13.575 2.091,15.547 2.091,15.547c0,0 -18.185,-32.68 -20.156,-37.666l0,0Z" style="fill:url(#_Linear20);"/><path d="M87.701,50.313c0,0 10.167,1.586 16.908,15.161c6.742,13.575 3.096,23.256 3.096,23.256c2.886,0.334 -14.502,-33.022 -20.004,-38.417l0,0Z" style="fill:url(#_Linear21);"/><path d="M98.195,45.061c0,0 7.582,2.79 14.323,16.365c6.742,13.575 0,25.054 0,25.054c2.885,0.334 -8.821,-36.024 -14.323,-41.419l0,0Z" style="fill:url(#_Linear22);"/><path d="M103.55,41.311c0,0 10.582,2.79 17.323,16.365c6.741,13.575 0,25.054 0,25.054c2.885,0.334 -11.821,-36.024 -17.323,-41.419l0,0Z" style="fill:url(#_Linear23);"/><path d="M109.88,36.979c0,0 9.832,5.79 16.573,19.365c6.741,13.575 1.5,23.553 1.5,23.553c2.885,0.334 -12.571,-37.524 -18.073,-42.918l0,0Z" style="fill:url(#_Linear24);"/><path d="M71.154,59.189c0,0 10.707,9.305 16.496,23.313c5.789,14.008 1.065,14.905 1.065,14.905c0,0 -15.938,-33.108 -17.561,-38.218Z" style="fill:url(#_Linear25);"/><path d="M76.512,56.939c0,0 8.231,1.055 14.02,15.063c5.788,14.008 3.977,22.405 3.977,22.405c0,0 -16.374,-32.358 -17.997,-37.468Z" style="fill:url(#_Linear26);"/><path d="M135.249,69.523c0,0 3.984,-7.279 -3.946,-20.196c-7.93,-12.917 -15.789,-16.387 -15.789,-16.387l19.735,36.583Z" style="fill:url(#_Linear27);"/><path d="M141.999,65.474c0,0 3.984,-7.278 -3.946,-20.195c-7.93,-12.917 -15.789,-16.388 -15.789,-16.388l19.735,36.583Z" style="fill:url(#_Linear28);"/><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.87509,3.75,-3.75,1.87509,87.7012,48.9746)"><stop offset="0%" style="stop-color:#7bf1ee;stop-opacity:1"/><stop offset="100%" style="stop-color:#00ca00;stop-opacity:1"/></linearGradient><linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(6.79404,0,0,6.79404,53.5402,86.4798)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(6.57363,1.71652,-1.71652,6.57363,43.5193,86.4939)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.42975,5.15134,-5.15134,4.42975,32.0946,81.1273)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.78,6.55672,-6.55672,1.78,26.1706,74.0408)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1.24335,-6.67931,6.67931,-1.24335,29.0676,70.9125)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear7" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.72001,-6.75578,6.75578,0.72001,30.7086,63.9896)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear8" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.22053,-6.42092,6.42092,2.22053,35.1329,57.3032)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear9" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(3.16402,-6.01232,6.01232,3.16402,43.8278,52.1298)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear10" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(3.16402,-6.01232,6.01232,3.16402,50.3701,47.7195)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear11" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(3.59833,-5.76291,5.76291,3.59833,57.7244,44.9564)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear12" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(3.59833,-5.76291,5.76291,3.59833,65.0537,40.4841)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear13" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.15806,-5.37304,5.37304,4.15806,73.3292,35.8941)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear14" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.47159,-5.11506,5.11506,4.47159,81.9423,31.317)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear15" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.47159,-5.11506,5.11506,4.47159,89.1672,25.0933)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear16" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.47159,-5.11506,5.11506,4.47159,95.1942,20.683)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear17" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.47159,-5.11506,5.11506,4.47159,104.777,15.0941)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear18" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(6.54749,-1.81369,1.81369,6.54749,62.5095,84.3866)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear19" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(6.48627,-2.02173,2.02173,6.48627,70.3788,81.4906)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear20" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(6.12874,-2.93217,2.93217,6.12874,91.9222,71.4459)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear21" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(6.12874,-2.93217,2.93217,6.12874,98.6722,67.7776)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear22" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(6.12874,-2.93217,2.93217,6.12874,107.672,65.5251)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear23" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(6.12874,-2.93217,2.93217,6.12874,116.027,61.7751)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear24" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(6.12874,-2.93217,2.93217,6.12874,123.107,58.9427)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear25" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(6.3164,-2.50243,2.50243,6.3164,78.8569,78.731)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear26" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(6.3164,-2.50243,2.50243,6.3164,85.7152,74.981)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear27" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(5.73722,-3.63913,3.63913,5.73722,126.062,51.4729)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient><linearGradient id="_Linear28" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(5.73722,-3.63913,3.63913,5.73722,132.812,47.4245)"><stop offset="0%" style="stop-color:#00d9ae;stop-opacity:1"/><stop offset="100%" style="stop-color:#fffff1;stop-opacity:1"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/assets/leaves1.png b/assets/leaves1.png
new file mode 100644
index 000000000..4b7d2050c
Binary files /dev/null and b/assets/leaves1.png differ
diff --git a/assets/leaves2.png b/assets/leaves2.png
new file mode 100644
index 000000000..718a01d50
Binary files /dev/null and b/assets/leaves2.png differ
diff --git a/src/docs/pages/index.js b/src/docs/pages/index.js
index 5733f1bf9..53c50dd10 100644
--- a/src/docs/pages/index.js
+++ b/src/docs/pages/index.js
@@ -14,6 +14,7 @@ import { getRawCodeBlocks as getCodeBlocks } from '../util';
 // Home page (splash and search)
 // ===================================================
 const IndexPage = props => {
+  console.log(props);
   const snippets = props.data.snippetDataJson.data.map(snippet => ({
     title: snippet.title,
     html: props.data.allMarkdownRemark.edges.find(
@@ -52,15 +53,26 @@ const IndexPage = props => {
         meta={[{ name: `google-site-verification`, content: `ADD YOUR VERIFICATION CODE HERE` }]}
       />
       <Shell withIcon={false} withTitle={false}>
-        <img
-          src={props.data.file.childImageSharp.original.src}
-          alt='Logo'
-          className='index-logo'
-        />
-        <h1 className='index-title'>{props.data.site.siteMetadata.title}</h1>
-        <p className='index-sub-title'>
-          {props.data.site.siteMetadata.description}
-        </p>
+        <div className='splash'>
+          <div className='splash-container'>
+            <img className='splash-leaves' id='splash-leaves-1' src={props.data.leaves1.childImageSharp.original.src} alt='splash-leaves-1' />
+            <img className='splash-leaves' id='splash-leaves-2' src={props.data.leaves2.childImageSharp.original.src} />
+            <img id='splash-blob' src={props.data.blob.childImageSharp.original.src} alt='splash-blob' />
+            <div className='splash-content'>
+              <img
+                src={props.data.file.childImageSharp.original.src} alt='Logo' className='splash-logo'
+              />
+              <h1 className='splash-title'
+                dangerouslySetInnerHTML={{ 
+                  __html: `${props.data.site.siteMetadata.title.replace('CSS','<strong>CSS</strong>')}`
+                }} 
+              />
+              <p className='splash-sub-title'>
+                {props.data.site.siteMetadata.description}
+              </p>
+            </div>
+          </div>
+        </div>
         <Search
           setSearchQuery={setSearchQuery}
           defaultValue={props.searchQuery}
@@ -122,6 +134,30 @@ export const indexPageQuery = graphql`
         }
       }
     }
+    leaves1 : file(relativePath: { eq: "leaves1.png" }) {
+      id
+      childImageSharp {
+        original {
+          src
+        }
+      }
+    }
+    leaves2 : file(relativePath: { eq: "leaves2.png" }) {
+      id
+      childImageSharp {
+        original {
+          src
+        }
+      }
+    }
+    blob : file(relativePath: { eq: "blob.png" }) {
+      id
+      childImageSharp {
+        original {
+          src
+        }
+      }
+    }
     snippetDataJson(meta: { type: { eq: "snippetArray" } }) {
       data {
         id
diff --git a/src/docs/styles/_layout.scss b/src/docs/styles/_layout.scss
index 7057cd837..10c476902 100644
--- a/src/docs/styles/_layout.scss
+++ b/src/docs/styles/_layout.scss
@@ -75,43 +75,132 @@ img.website-logo {
   height: 48px;
 }
 // Homepage logo
-.index-logo {
-  transition: 0.3s ease all;
-  display: block;
-  margin: 1.5rem 1.25rem 0.5rem;
-  vertical-align: middle;
-  @media screen and (min-width: 144px) {
-    max-width: 128px;
-    margin: 1.5rem auto 0.5rem;
+.splash {
+  position: relative;
+  height: 369px;
+  padding: 5rem 1rem 4rem;
+  background: #5b67ff;
+  background: linear-gradient(25deg,#95e2ff,#5f79ff,#8ed5ff);
+  color: #fff;
+  margin-bottom: 2rem;
+  text-align: center;
+  overflow: hidden;
+  z-index: 1;
+  &::after, &::before {
+    content: "";
+    position: absolute;
+    left: 0;
   }
-  @media screen and (min-width: $layout-medium-breakpoint) {
-    display: inline-block;
-    margin: 1.5rem 2rem 0.5rem 1.25rem;
+  &::before {
+    width: 150%;
+    height: 150%;
+    top: 0;
+    opacity: .1;
+    z-index: -1;
+  }
+  &::after {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M12 0l12 12H0z' fill='%23f2f3f8'/%3E%3C/svg%3E");
+    background-size: 24px 24px;
+    width: 100%;
+    height: 24px;
+    bottom: -7px;
+    z-index: 3;
   }
 }
-// Homepage title
-.index-title {
-  transition: 0.3s ease all;
+.splash-container {
+  max-width: 64rem;
+  padding: 0 2%;
+  margin: 0 auto;
+}
+.splash-leaves {
+  position: absolute;
+  user-select: none;
+  &#splash-leaves-1 {
+    right: -100px;
+    top: -50px;
+    width: 250px;
+  }
+  &#splash-leaves-2 {
+    left: -250px;
+    bottom: -100px;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(1.0, 1.0) rotate(235deg);
+    z-index: 2;
+    width: 400px;
+  }
+}
+#splash-blob {
+  position: absolute;
+  user-select: none;
+  width: 240px;
+  left: -25px;
+  top: 50px;
+}
+.splash-content {
+  position: relative;
+  z-index: 3;
+}
+.splash-logo {
+  height: 146px;
+  user-select: none;
+}
+.splash-title {
+  font-weight: 300;
   font-size: 2rem;
-  color: var(--fore-color-dark); 
+  margin: 1rem 0;
+  line-height: 1.2;
   @media screen and (min-width: $layout-medium-breakpoint) {
-    display: inline-block;
-  }
-  margin: 0.75rem 1.25rem;
-  text-align: center;
-}
-// Homepage subtitle
-.index-sub-title {
-  transition: 0.3s ease all;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  margin: 1rem 1.25rem 1.25rem;
-  color: var(--fore-color);
-  text-align: center;
-  @media screen and (min-width: $layout-medium-breakpoint) {
-    font-size: 1rem;
+    font-size: 3.75rem;
   }
 }
+.splash-sub-title {
+  font-size: 1.125rem;
+  max-width: 600px;
+  margin: 0 auto 2rem;
+  font-weight: 300;
+  letter-spacing: .4px;
+  @media screen and (min-width: $layout-medium-breakpoint) {
+    font-size: 1.5rem;
+  }
+}
+
+// .index-logo {
+//   transition: 0.3s ease all;
+//   display: block;
+//   margin: 1.5rem 1.25rem 0.5rem;
+//   vertical-align: middle;
+//   @media screen and (min-width: 144px) {
+//     max-width: 128px;
+//     margin: 1.5rem auto 0.5rem;
+//   }
+//   @media screen and (min-width: $layout-medium-breakpoint) {
+//     display: inline-block;
+//     margin: 1.5rem 2rem 0.5rem 1.25rem;
+//   }
+// }
+// // Homepage title
+// .index-title {
+//   transition: 0.3s ease all;
+//   font-size: 2rem;
+//   color: var(--fore-color-dark); 
+//   @media screen and (min-width: $layout-medium-breakpoint) {
+//     display: inline-block;
+//   }
+//   margin: 0.75rem 1.25rem;
+//   text-align: center;
+// }
+// // Homepage subtitle
+// .index-sub-title {
+//   transition: 0.3s ease all;
+//   font-size: 0.875rem;
+//   line-height: 1.5;
+//   margin: 1rem 1.25rem 1.25rem;
+//   color: var(--fore-color);
+//   text-align: center;
+//   @media screen and (min-width: $layout-medium-breakpoint) {
+//     font-size: 1rem;
+//   }
+// }
 
 // Page title
 .page-title {