Agent in the frontpage

src/styles/_homepage.sass

@@ -777,17 +777,17 @@ section.pricing
 		text-shadow: 1px 1px 0 white
 		margin:
 			top: 10px
-			bottom: 70px
+			bottom: 50px
 		padding: 0
 
 		+media-xs
 			font-size: 1.6em
 
 	.box
-		padding: 0 20px
+		margin-top: 40px
+		padding: 20px 20px 60px 20px
 		border: 1px solid $color-text-dark-hint
 		background-color: white
-		height: 340px
 		min-height: 340px
 		position: relative
 		text-align: center
@@ -814,7 +814,6 @@ section.pricing
 		&.education
 			.pricing-caption
 				padding: 25px
-				color: $color-text-dark-secondary
 				font-size: 1.1em
 				transition: color 100ms ease-in-out
 
@@ -851,9 +850,12 @@ section.pricing
 
 		.pricing-caption
 			color: $color-text-dark
-			// font-size: .9em
+			text-align: center
 			padding-bottom: 0
 
+			ul
+				text-align: left
+
 		+list-bullets
 
 		ul

src/styles/_join.sass

@@ -1,176 +1,34 @@
-$slide-height: 600px
+.navbar-backdrop.join
-
+	+media-xs
+		background-size: initial
 .join
 	position: relative
 
-	.slide
+	#page-header
-		position: relative
-		display: flex
-		justify-content: center
-		width: 100%
-
-
-		&.icons
-			margin: 50px auto 100px auto
-			flex-direction: row
-			justify-content: space-around
-
-			.join__points_item
-				display: inline-block
-				width: 20%
-				padding: 0 20px
-				text-align: center
-
-				.join__points_item-icon
-					font-size: 4em
 		display: block
-					color: $color-text-dark-secondary
+		padding: 30px 0 15px 0
-					margin: 0 0 15px 0
+		font-size: .9em
 
-				.join__points_item-title
+		.container
-					display: block
+			+media-sm
-					font-family: $font-headings
+				margin-left: 0
-					font-size: 1.5em
-					line-height: 1.2em
-					color: lighten($color-text, 10%)
 
-				.join__points_item-description
+		.page-title, .page-title-summary
-					margin-top: 25px
+			text-align: left
-					display: block
+			text-shadow: none
-
-		&.image
-			flex-direction: column
-
-			height: $slide-height
-			width: 100%
-			background:
-				repeat: no-repeat
-				size: cover
-
-			color: white
-
-			.lead
-				z-index: 1
-				max-width: 500px
-				font-size: 1.2em
-				padding: 0 50px
-				text-shadow: 0 0 25px rgba(black, .8)
-
-				h1
-					font:
-						family: $font-headings
-
-				a
-					color: white
-
-				&.right
-					align-self: flex-end
-
-		&.main
-			text-align: center
-			align-items: center
-
-			h1
-				z-index: 1
-				font:
-					family: $font-headings
-				font-size: 3.5em
-				margin: 0
-				padding: 0 0 15px 0
-				text-shadow: 0 0 30px rgba(black, .5)
-
-			h2
-				z-index: 1
-				font:
-					size: 1.4em
-					family: $font-headings
-					margin: 0
-					padding: 0
-					weight: 400
-
-				max-width: 500px
-				text-shadow: 0 0 25px rgba(black, .8)
-
-
-		&.subscribe
-			.box
-				padding: 15px 65rpx
-				margin: 25px auto
-				+container-box
-
-				h2
-					text-align: center
-					padding: 0 0 15px 0
 
 			ul
-					max-width: 300px
+				margin-bottom: 25px
-					margin: 0 30px
-					padding: 0
-					list-style-type: none
 
-					li
+				li.special
-						position: relative
+					color: $color-danger
-						padding: 0
-						margin: 0
 
-						&:after
+		.page-header-cta-container
-							position: absolute
+			margin: 30px 0 50px 60px
-							content: '\f00c'
+			justify-content: flex-start
-							font-size: 75%
-							top: 3px
-							left: -15px
-							font-family: "FontAwesome"
-							color: $color-success
-
-				a.subscribe
-					display: inline-block
-					width: 100%
-					text-align: center
-
-				button.subscribe
-					color: $color-text-dark
-					border-color: $color-text-dark
-					margin: 25px auto 25px auto
-					transition: opacity .1s
-
-					&:hover
-						opacity: .8
-
-					i
-						padding-left: 10px
 
 
-		.overlay
-			z-index: 1
 
-		.gradient
+	li.special
-			position: absolute
+		color: $color-danger
-			width: 100%
+		font-weight: bold
-			height: 100%
-			top: 0
-			left: 0
-			right: 0
-			bottom: 0
-			z-index: 0
-			background: linear-gradient(to top, rgba(5,6,6,0.6) 0%, transparent 80%)
-
-			&.left
-				background: linear-gradient(to right, rgba(5,6,6,0.6) 0%, transparent 80%)
-			&.right
-				background: linear-gradient(to left, rgba(5,6,6,0.6) 0%, transparent 80%)
-
-		button
-			color: white
-			border-color: white
-			padding: 5px 25px
-			margin: 45px auto 0 auto
-			font:
-				family: $font-headings
-				size: 1.6em
-
-			&:hover, &:focus
-				background-color: rgba(white, .2)
-
-			&:active
-				background-color: rgba(white, .4)
-				color: white

src/templates/join.jade

@@ -6,12 +6,12 @@
 | {% block og %}
 meta(property="og:title", content="Join the Blender Cloud")
 meta(property="og:url", content="https://cloud.blender.org/")
-meta(property="og:image", content="{{ url_for('static', filename='assets/img/backgrounds/background_services.jpg')}}")
+meta(property="og:image", content="{{ url_for('static', filename='assets/img/backgrounds/background_andy_hdribot_01.jpg')}}")
 | {% endblock %}
 
 | {% block header_backdrop %}
 .navbar-backdrop.join(
-	style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/background_andy_hdribot_01.jpg')}})")
+	style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/background_agent327_02.jpg')}})")
 | {% endblock %}
 
 | {% block page_overlay %}
@@ -22,21 +22,23 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac
 | {% block body %}
 #page-container.join
 	#page-header
-		.page-title-icons
+		.container
-			i.pi-blender
+			.page-title Peek inside a real production studio.
-			i.pi-heart-filled
+
-			i.pi-blender-cloud
+			.page-title-summary
-		.page-title
+				p Join us as we make the Agent 327 "Barbershop" scene
-			| Your Own Production Platform
+				ul
-		//- .page-title-summary
+					li Exclusive production insight & walk-throughs
-		//- 	| Get inspiration, knowledge, and tools all in one place.
+					li High-quality assets ready to use
+					li All the open movies files & tutorials
+					li 100+ hours of training
 
 			.page-header-cta-container
 				a.page-header-cta(href="https://store.blender.org/product/membership/")
 					| Join Now
 
-			a.page-header-cta-extra(href="{{ url_for('main.nodes_search_index') }}")
+				a.page-header-cta-extra(href="https://cloud.blender.org/p/agent-327")
-				| Explore
+					| Learn More
 					i.pi-angle-right
 
 
@@ -306,6 +308,14 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac
 							.pricing-caption
 								p * with a 3-months minimum period
 
+								ul
+									li 100+ hours of high-quality training
+									li All the open movies files and tutorials
+									li Exclusive production insight & walk-throughs
+									li <strong>Sync</strong> your Blender settings across devices
+									li <strong>Share</strong> images &amp; screenshots from within Blender
+									li <strong>Download</strong>&nbsp;1500+ textures &amp; HDRIs from Blender
+
 							a.sign-up-now(href="https://store.blender.org/product/membership/")
 								| Subscribe Now
 
@@ -317,8 +327,15 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac
 								span.digit-int 109
 								span.digit-dec .00 / year
 							.pricing-caption
-								p 1 month free!
+								ul
-								p Free copy of the <a href="https://store.blender.org/product/art-of-blender-2/">Art of Blender</a>
+									li 100+ hours of high-quality training
+									li All the open movies files and tutorials
+									li Exclusive production insight &amp; walk-throughs
+									li <strong>Sync</strong> your Blender settings across devices
+									li <strong>Share</strong> images &amp; screenshots from within Blender
+									li <strong>Download</strong>&nbsp;1500+ textures &amp; HDRIs from Blender
+									li.special 1 month free
+									li.special Free copy of <a href="https://store.blender.org/product/art-of-blender-2/">Art of Blender</a>
 
 							a.sign-up-now(href="https://store.blender.org/product/membership/")
 								| Subscribe Now