new template

src/scss/layout/_hero.scss

@@ -1,46 +1,127 @@
 .hero {
-    position: relative;
-    padding-top: 40px;
-    overflow: hidden;
+	position: relative;
+    padding-top: 128px;
+	padding-bottom: 80px;
+	z-index: 0;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: color(typography, 1);
+		z-index: -2;
+	}
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: calc(50% - 320px);
+		width: 640px;
+		height: 136px;
+		background-image: url('../images/hero-illustration.svg');
+		background-size: 640px 136px;
+		background-repeat: no-repeat;
+		z-index: -1;
+	}
 }
 
-.hero-paragraph {
-    margin-bottom: 32px;
-}
-
-.hero-media {
-    position: relative;
-    height: 200px;
-    margin-top: 40px;
-    background: color(bg, 1);
-    border-radius: 4px 4px 0 0;
-
-    &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        @include shadow;
-        mix-blend-mode: multiply;
-    }
+.hero-copy {
+    position: relative; /* To display elements above hero illustrations */
 }
 
 @include media( '>medium' ) {
 
     .hero {
-        padding-top: 80px;
+        padding-top: 160px;
+		padding-bottom: 128px;
+
+		&::after {
+			left: calc(50% - 720px);
+			width: 1440px;
+			height: 307px;
+			background-size: 1440px 307px;
+		}
     }
 
-    .hero-paragraph {
-        margin-bottom: 40px;
-        padding-left: 72px;
-        padding-right: 72px;
-    }
-
-    .hero-media {
-        margin-top: 64px;
-        height: 400px;
-    }
+	.hero-paragraph {
+		padding-left: 72px;
+		padding-right: 72px;
+	}
+}
+
+.has-animations {
+
+	.hero::before,
+	.hero::after,
+	.site-header,
+	.hero-title,
+	.hero-paragraph,
+	.hero-cta {
+		opacity: 0;
+	}
+
+	&.is-loaded {
+
+		.hero {
+
+			&::before {
+				animation: heroBg .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
+			}
+
+			&::after {
+				animation: heroFadeIn .6s ease forwards .3s;
+			}
+		}
+
+		.site-header {
+			animation: heroFadeIn .6s ease forwards .3s;
+		}
+
+		.hero-title {
+			animation: heroContent .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards .15s;
+		}
+
+		.hero-paragraph {
+			animation: heroContent .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards .3s;
+		}
+
+		.hero-cta {
+			animation: heroContent .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards .45s;
+		}
+	}
+}
+
+@keyframes heroBg {
+	from {
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@keyframes heroContent {
+	from {
+		transform: translateY(-40px);
+		opacity: 0;
+	}
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@keyframes heroFadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
 }