Better join page for the agent project

src/styles/_project.sass

@@ -2674,3 +2674,63 @@ section.node-children
 
 			.blog_index-header
 				border-radius: 0
+
+.join-project
+	display: flex
+	flex-direction: column
+	width: 100%
+	height: 100%
+	color: white
+
+	background-position-x: 64%
+
+	a.cta
+		padding: 5px 35px
+		+button($color-primary, 3px, true)
+
+	a.cta-learn-more
+		padding: 5px 20px
+		+button(white, 3px)
+		display: inline-block
+		margin: 25px 0 25px 15px
+		padding: 5px 35px
+
+	&__title
+		display: flex
+		padding: 25px 0 10px 10px
+		font:
+			size: 2.5em
+			weight: 300
+
+		span.icon
+			display: flex
+			align-items: center
+
+		span.text
+			display: flex
+			align-items: center
+			text-align: left
+			line-height: 1.2em
+			margin-right: auto
+
+	&__lead
+		font-size: 1.4em
+		font-weight: 300
+		padding: 0 25px 25px
+		max-width: 800px
+
+	&__summary
+		font-size: 1.1em
+		padding: 0 25px
+		max-width: 500px
+
+		ul
+			margin: 0
+			padding-left: 20px
+
+		&-cta-container
+			a.cta
+				display: inline-block
+				margin: 25px 0 0 0
+				padding: 5px 35px
+				text-align: center

src/styles/project-main.sass

@@ -9,7 +9,6 @@
 @import _error
 
 @import _search
-@import _pages
 
 @import plugins/_jstree
 @import plugins/_js_select2

src/templates/join_agent.jade

@@ -1,133 +1,44 @@
 | {% set title = 'join' %}
-link(href="{{ url_for('static_pillar', filename='assets/css/main.css', v=11220163) }}", rel="stylesheet")
 
 | {% block body %}
-#page-container.join
+.join-project(
-.navbar-backdrop.join(
 	style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/background_agent327_02.jpg')}})")
-	#page-header
-		.page-title Support the Agent 327 project
 
-		.page-title-summary
+	.join-project__title
-			p Join us as we make the Agent 327 "Barbershop" scene
+		span.icon
+			i.pi-lock-open
+		span.text Get Your Backstage Pass
+
+	.join-project__lead.
+		Subscribe, be part of the action and join us<br/> as we make the Agent 327 "Barbershop" scene.
+
+	.join-project__summary
+		p By becoming a Blender Cloud member, you will gain access to:
 		ul
-				li Exclusive production insight &amp; walk-throughs
+			li All the artwork being developed for the short
+			li Animation tests and reviews
+			li New versions of the film every week
+			li Follow us closely via Attract, our project management software
+
+		.join-project__summary-cta-container
+			a.cta(href="https://store.blender.org/product/membership/")
+				| Join Now
+			a.cta-learn-more(href="https://cloud.blender.org/p/agent-327/about")
+				| Learn more
+
+	.join-project__summary
+		p On top of that, you will get full Blender Cloud access to:
+
+		ul
+			li Exclusive production insight & walk-throughs
 			li High-quality assets ready to use
 			li All the open movies files & tutorials
 			li 100+ hours of training
+			li Blender Cloud add-on with texture browsing & Blender Sync
+			li All of this and more for only USD 9.90/month!
 
-		.page-header-cta-container
+		.join-project__summary-cta-container
-			a.page-header-cta(href="https://store.blender.org/product/membership/")
+			a.cta-learn-more(href="https://cloud.blender.org/services")
-				| Join Now
+				| Blender Cloud Services
-
-			a.page-header-cta-extra(href="https://store.blender.org/product/membership/")
-				| for only €9.90
-				i.pi-angle-right
-
-
-	#page-content
-		.page-triplet-container.homepage
-			.row
-				.col-md-6
-					.triplet-card(data-url="{{ url_for('main.open_projects') }}")
-						.triplet-card-thumbnail
-							img(
-								alt="Open Projects",
-								src="{{ url_for('static', filename='assets/img/features/open_movies_02.jpg')}}")
-						.triplet-card-info
-							h3 Open Projects
-							p.
-								The iconic Blender Institute Open Movies,
-								featuring all the production files, assets, artwork, and never-seen-before content.
-							a.triplet-cta(href="{{ url_for('main.open_projects') }}")
-								| LEARN MORE
-
-				.col-md-6
-					.triplet-card(data-url="{{ url_for('main.training') }}")
-						.triplet-card-thumbnail
-							img(
-								alt="Training and Tutorials",
-								src="{{ url_for('static', filename='assets/img/features/training_02.jpg')}}")
-						.triplet-card-info
-							h3 Training &amp; Tutorials
-							p.
-								Character modeling, 3D printing, VFX, rigging and more. We offer
-								12 complete training series with +100 hours of training.
-							a.triplet-cta(href="{{ url_for('main.training') }}")
-								| LEARN MORE
-
-			.row
-				.col-md-6
-					.triplet-card(data-url="{{ url_for('main.redir_hdri') }}")
-						.triplet-card-thumbnail
-							img(
-								alt="HDRI",
-								src="{{ url_for('static', filename='assets/img/features/hdri_01.jpg')}}")
-						.triplet-card-info
-							h3 HDRI
-							p.
-								Up to 8K and 18 EVs (extremely high) HDR images to light your renders.
-							a.triplet-cta(href="{{ url_for('main.redir_hdri') }}")
-								| LEARN MORE
-				.col-md-6
-					.triplet-card(data-url="{{ url_for('main.redir_textures') }}")
-						.triplet-card-thumbnail
-							img(
-								alt="Textures",
-								src="{{ url_for('static', filename='assets/img/features/textures_01.jpg')}}")
-						.triplet-card-info
-							h3 Textures
-							p.
-								More than 1500 texture maps.
-								Browse online or from Blender with our awesome  add-on.
-							a.triplet-cta(href="{{ url_for('main.redir_textures') }}")
-								| LEARN MORE
-
-			.row
-				.col-md-6
-					.triplet-card(data-url="{{ url_for('main.redir_characters') }}")
-						.triplet-card-thumbnail
-							img(
-								alt="Characters",
-								src="{{ url_for('static', filename='assets/img/features/characters_01.jpg')}}")
-						.triplet-card-info
-							h3 Characters
-							p.
-								Production quality, fully rigged and shaded characters ready to animate.
-							a.triplet-cta(href="{{ url_for('main.redir_characters') }}")
-								| LEARN MORE
-				.col-md-6
-					.triplet-card(data-url="{{ url_for('main.services') }}")
-						.triplet-card-thumbnail
-							img(
-								alt="Services and Tools",
-								src="{{ url_for('static', filename='assets/img/features/services_01.jpg')}}")
-						.triplet-card-info
-							h3 Services & Tools
-							p.
-								Create your personal projects, collaborate with other members, store
-								and sync your Blender settings across multiple workstations.
-							a.triplet-cta(href="{{ url_for('main.services') }}")
-								| LEARN MORE
-
-		section.page-card.subscribe(
-			style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/background_services.jpg')}});")
-			.page-card-side
-				h2.page-card-title
-					| Get inspiration, knowledge, and tools in one place.
-				.page-card-summary
-					| Join us for only $9.90/month!
-				a.page-card-cta(
-					href="https://store.blender.org/product/membership/")
-					| Subscribe Now
-
-| {% endblock %}
-
-| {% block footer_scripts %}
-script.
-
-	$('.triplet-card').click(function(){
-		window.location.href = $(this).attr('data-url');
-	});
 
 | {% endblock %}