diff --git a/frappe/public/scss/desk/avatar.scss b/frappe/public/scss/desk/avatar.scss
index cc8c16ce44..638256c21d 100644
--- a/frappe/public/scss/desk/avatar.scss
+++ b/frappe/public/scss/desk/avatar.scss
@@ -111,8 +111,8 @@
 }
 
 .avatar-large {
-	width: 72px;
-	height: 72px;
+	width: 64px;
+	height: 64px;
 
 	.standard-image {
 		font-size: var(--text-2xl);
diff --git a/frappe/public/scss/website/base.scss b/frappe/public/scss/website/base.scss
index 4190780ece..324397552d 100644
--- a/frappe/public/scss/website/base.scss
+++ b/frappe/public/scss/website/base.scss
@@ -1,3 +1,13 @@
+$font-size-xs: 0.7rem;
+$font-size-sm: 0.85rem;
+$font-size-lg: 1.12rem;
+$font-size-xl: 1.25rem;
+$font-size-2xl: 1.5rem;
+$font-size-3xl: 2rem;
+$font-size-4xl: 2.5rem;
+$font-size-5xl: 3rem;
+$font-size-6xl: 4rem;
+
 html {
 	height: 100%;
 }
@@ -16,43 +26,74 @@ img {
 
 h1 {
 	font-size: $font-size-3xl;
-	font-weight: 800;
 	line-height: 1.25;
 	letter-spacing: -0.025em;
-	margin-bottom: 1rem;
+	margin-top: 3rem;
+	margin-bottom: 0.75rem;
 
 	@include media-breakpoint-up(sm) {
+		font-size: $font-size-5xl;
 		line-height: 2.5rem;
-		font-size: $font-size-4xl;
+		margin-top: 3.5rem;
+		margin-bottom: 1.25rem;
 	}
 	@include media-breakpoint-up(xl) {
+		font-size: $font-size-6xl;
 		line-height: 1;
-		font-size: $font-size-5xl;
+		margin-top: 4rem;
 	}
 }
 
 h2 {
-	font-size: $font-size-xl;
-	font-weight: 700;
+	font-size: $font-size-2xl;
+	margin-top: 2rem;
 	margin-bottom: 0.75rem;
 
 	@include media-breakpoint-up(sm) {
-		font-size: $font-size-2xl;
-	}
-	@include media-breakpoint-up(md) {
 		font-size: $font-size-3xl;
+		margin-top: 4rem;
+		margin-bottom: 1rem;
+	}
+	@include media-breakpoint-up(xl) {
+		font-size: $font-size-4xl;
+		margin-top: 4rem;
 	}
 }
 
 h3 {
-	font-size: $font-size-base;
-	font-weight: 600;
+	font-size: $font-size-xl;
+	margin-top: 1.5rem;
 	margin-bottom: 0.5rem;
 
 	@include media-breakpoint-up(sm) {
-		font-size: $font-size-lg;
+		font-size: $font-size-2xl;
+		margin-top: 2.5rem;
 	}
-	@include media-breakpoint-up(md) {
-		font-size: $font-size-xl;
+	@include media-breakpoint-up(xl) {
+		font-size: $font-size-3xl;
+		margin-top: 3.5rem;
 	}
 }
+
+h4 {
+	font-size: $font-size-lg;
+	margin-top: 1rem;
+	margin-bottom: 0.5rem;
+
+	@include media-breakpoint-up(sm) {
+		font-size: $font-size-xl;
+		margin-top: 1.25rem;
+	}
+	@include media-breakpoint-up(xl) {
+		font-size: $font-size-2xl;
+		margin-top: 1.75rem;
+	}
+
+	a {
+		color: $body-color;
+	}
+}
+
+.btn.btn-lg {
+	font-size: $font-size-lg;
+}
diff --git a/frappe/public/scss/website/blog.scss b/frappe/public/scss/website/blog.scss
index 6b0acb9d83..99255df764 100644
--- a/frappe/public/scss/website/blog.scss
+++ b/frappe/public/scss/website/blog.scss
@@ -57,12 +57,12 @@
 
 	.blog-card-footer {
 		display: flex;
-		align-items: center;
+		align-items: top;
 		margin-top: 0.5rem;
 
 		.avatar {
+			margin-top: 0.4rem;
 			margin-right: 0.5rem;
-			border-radius: 50%;
 		}
 	}
 }
diff --git a/frappe/public/scss/website/index.scss b/frappe/public/scss/website/index.scss
index e36e649eb7..4352301b4c 100644
--- a/frappe/public/scss/website/index.scss
+++ b/frappe/public/scss/website/index.scss
@@ -5,7 +5,6 @@
 @import "../common/global";
 @import "../common/icons";
 @import "../common/alert";
-@import 'base';
 @import "../common/flex";
 @import "../common/buttons";
 @import "../common/modal";
@@ -14,6 +13,7 @@
 @import "../common/indicator";
 @import "../common/controls";
 @import "../common/awesomeplete";
+@import 'base';
 @import 'multilevel_dropdown';
 @import 'website_image';
 @import 'website_avatar';
diff --git a/frappe/public/scss/website/markdown.scss b/frappe/public/scss/website/markdown.scss
index 6f009df393..c2592b61e9 100644
--- a/frappe/public/scss/website/markdown.scss
+++ b/frappe/public/scss/website/markdown.scss
@@ -1,30 +1,12 @@
-$font-sizes-desktop: (
-	"sm": 0.75rem,
-	"base": 1rem,
-	"lg": 1.125rem,
-	"xl": 1.41rem,
-	"2xl": 1.6rem,
-	"3xl": 2rem
-);
 
-$font-sizes-mobile: (
-	"sm": 0.75rem,
-	"base": 1rem,
-	"lg": 1.125rem,
-	"xl": 1.25rem,
-	"2xl": 1.5rem,
-	"3xl": 1.75rem
-);
+.section-markdown > .from-markdown {
+	max-width: 50rem;
+	margin: auto;
+}
 
 .from-markdown {
 	color: $gray-700;
 	line-height: 1.7;
-	letter-spacing: -0.011em;
-
-	> * + * {
-		margin-top: 0.75rem;
-		margin-bottom: 0;
-	}
 
 	> :first-child {
 		margin-top: 0;
@@ -47,6 +29,10 @@ $font-sizes-mobile: (
 		list-style: decimal;
 	}
 
+	p, li {
+		font-size: $font-size-lg;
+	}
+
 	li {
 		padding-top: 1px;
 		padding-bottom: 1px;
@@ -87,86 +73,6 @@ $font-sizes-mobile: (
 		font-weight: 600;
 	}
 
-	h1, h2, h3, h4, h5, h6 {
-		color: $gray-900;
-	}
-
-	h2, h3, h4, h5, h6 {
-		font-weight: 600;
-	}
-
-	h1 {
-		font-size: map-get($font-sizes-mobile, '3xl');
-		line-height: 1.5;
-		letter-spacing: -0.021em;
-		font-weight: 700;
-
-		@include media-breakpoint-up(md) {
-			font-size: map-get($font-sizes-desktop, '3xl');
-			letter-spacing: -0.024em;
-		}
-
-		// for byline
-		& + p {
-			margin-top: 1.5rem;
-			font-size: map-get($font-sizes-mobile, 'xl');
-			letter-spacing: -0.014em;
-			line-height: 1.4;
-
-			@include media-breakpoint-up(md) {
-				font-size: map-get($font-sizes-desktop, 'xl');
-				letter-spacing: -0.0175em;
-			}
-		}
-	}
-
-	h2 {
-		font-size: map-get($font-sizes-mobile, '2xl');
-		line-height: 1.56;
-		letter-spacing: -0.015em;
-		margin-top: 4rem;
-
-		@include media-breakpoint-up(md) {
-			font-size: map-get($font-sizes-desktop, '2xl');
-			letter-spacing: -0.0195em;
-		}
-	}
-
-	h3 {
-		font-size: map-get($font-sizes-mobile, 'xl');
-		line-height: 1.56;
-		letter-spacing: -0.014em;
-		margin-top: 2.25rem;
-
-		@include media-breakpoint-up(md) {
-			font-size: map-get($font-sizes-desktop, 'xl');
-			letter-spacing: -0.0175em;
-		}
-	}
-
-	h4 {
-		font-size: map-get($font-sizes-mobile, 'lg');
-		line-height: 1.56;
-		letter-spacing: -0.014em;
-		margin-top: 2.5rem;
-	}
-
-	h5 {
-		font-size: map-get($font-sizes-mobile, 'base');
-		line-height: 1.5;
-		letter-spacing: -0.011em;
-		font-weight: 600;
-		margin-top: 2rem;
-	}
-
-	h6 {
-		font-size: map-get($font-sizes-mobile, 'sm');
-		line-height: 1.35;
-		font-weight: 600;
-		text-transform: uppercase;
-		margin-top: 1.5rem;
-	}
-
 	tr > td,
 	tr > th {
 		font-size: $font-size-sm;
diff --git a/frappe/public/scss/website/page_builder.scss b/frappe/public/scss/website/page_builder.scss
index e7e2f8b242..f94f79df21 100644
--- a/frappe/public/scss/website/page_builder.scss
+++ b/frappe/public/scss/website/page_builder.scss
@@ -1,4 +1,7 @@
 .hero-content {
+	margin-top: 3rem;
+	margin-bottom: 3rem;
+
 	.btn-primary {
 		margin-top: 1rem;
 		margin-right: 0.5rem;
@@ -15,16 +18,23 @@
 
 .hero-title, .hero-subtitle {
 	max-width: 42rem;
+	margin-top: 0rem;
+	margin-bottom: 0.5rem;
+}
+
+.lead {
+	font-weight: normal;
+	font-size: 1.25rem;
+	margin-bottom: 1.5rem;
 }
 
 .hero-subtitle {
 	@extend .lead;
-	font-weight: 400;
 	color: $gray-600;
-	font-size: 1rem;
+	font-size: $font-size-lg;
 
 	@include media-breakpoint-up(sm) {
-		font-size: 1.25rem;
+		font-size: $font-size-xl;
 	}
 }
 
@@ -42,10 +52,10 @@
 .section-description {
 	max-width: 56rem;
 	margin-top: 0.5rem;
-	font-size: $font-size-base;
+	font-size: $font-size-lg;
 
-	@include media-breakpoint-up(lg) {
-		font-size: $font-size-lg;
+	@include media-breakpoint-up(media-breakpoint-up) {
+		font-size: $font-size-xl;
 	}
 }
 
@@ -226,14 +236,10 @@
 	}
 }
 
-.section-markdown > .from-markdown {
-	max-width: 42rem;
-}
-
 .section-cta {
 	padding: 3rem 2rem;
 	text-align: center;
-	background-color: $primary-light;
+	background-color: $gray-200;
 	border-radius: 0.75rem;
 
 	@include media-breakpoint-up(sm) {
@@ -248,12 +254,7 @@
 	.title {
 		margin: 0 auto;
 		max-width: 36rem;
-		font-size: $font-size-2xl;
-		font-weight: 800;
 		line-height: 1.25;
-		@include media-breakpoint-up(md) {
-			font-size: $font-size-4xl;
-		}
 	}
 	.subtitle {
 		max-width: 36rem;
@@ -270,11 +271,15 @@
 		margin-top: 0.5rem;
 		font-size: $font-size-xs;
 	}
+	.action {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
 }
 
 .section-small-cta {
 	padding: 1.8rem;
-	background-color: lighten($primary, 42%);
+	background-color: var(--gray-200);
 	border-radius: 0.75rem;
 	display: flex;
 	flex-direction: column;
@@ -294,26 +299,27 @@
 		}
 	}
 
-	.title {
-		max-width: 36rem;
-		font-size: $font-size-xl;
-		font-weight: 800;
-		line-height: 1.25;
-		@include media-breakpoint-up(md) {
-			font-size: $font-size-2xl;
-		}
+	.section-title {
+		line-height: 1;
+		margin-bottom: 0.25rem;
 	}
+
 	.subtitle {
 		max-width: 36rem;
 		font-size: $font-size-base;
 		color: $gray-900;
-		margin-bottom: 1.2rem;
+		margin-bottom: 0.5rem;
 
 		@include media-breakpoint-up(md) {
 			font-size: $font-size-lg;
 			margin-bottom: 0px;
 		}
 	}
+
+	.action {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
 }
 
 .section-cta-container {
@@ -379,6 +385,20 @@
 	}
 }
 
+.testimonial-author {
+	margin-top: 1rem;
+	display: flex;
+	align-items: center;
+
+	.avatar {
+		margin-right: 0.5rem;
+	}
+
+	p {
+		margin-bottom: 0;
+	}
+}
+
 .split-section-content.align-top {
 	margin-top: 2rem;
 }
@@ -514,12 +534,12 @@
 
 		@include media-breakpoint-up(md) {
 			grid-template-columns: repeat(2, 1fr);
-			gap: 6rem;
+			gap: 3rem 5rem;
 		}
 
 		.feature-title {
 			font-size: $font-size-xl;
-			font-weight: bold;
+			font-weight: 600;
 
 			@include media-breakpoint-up(md) {
 				font-size: $font-size-2xl;
@@ -528,7 +548,7 @@
 
 		.feature-content {
 			font-size: $font-size-base;
-			margin-top: 1.75rem;
+			margin-top: 1.25rem;
 
 			@include media-breakpoint-up(xl) {
 				font-size: $font-size-lg;
@@ -630,9 +650,14 @@
 	}
 }
 
+.section-title {
+	margin-top: 0;
+	margin-bottom: 0.5rem;
+}
+
 .section-title + .section-features, .section-description + .section-features {
 	&[data-columns="2"] {
-		margin-top: 3.75rem;
+		margin-top: 3rem;
 	}
 
 	&[data-columns="3"] {
@@ -651,6 +676,10 @@
 	position: relative;
 }
 
+.feature-title {
+	margin-top: 0;
+}
+
 .feature-title, .feature-content {
 	margin-bottom: 0;
 }
@@ -666,3 +695,16 @@
 .section-with-embed .embed-container {
 	margin-top: 2rem;
 }
+
+.section-video {
+    aspect-ratio: 16 / 9;
+    width: 100%;
+    cursor: pointer;
+	margin-bottom: 1rem;
+}
+
+.video-thumbnail {
+    aspect-ratio: 16 / 9;
+    width: 100%;
+    object-fit: cover;
+}
diff --git a/frappe/public/scss/website/variables.scss b/frappe/public/scss/website/variables.scss
index 293d02b06d..ad3dbd2f8b 100644
--- a/frappe/public/scss/website/variables.scss
+++ b/frappe/public/scss/website/variables.scss
@@ -58,7 +58,7 @@ $font-size-lg: 1.125rem !default;
 $font-size-xl: 1.25rem !default;
 $font-size-2xl: 1.5rem !default;
 $font-size-3xl: 1.875rem !default;
-$font-size-4xl: 2.25rem !default;
+$font-size-4xl: 2.5rem !default;
 $font-size-5xl: 3rem !default;
 $font-size-6xl: 4rem !default;
 
diff --git a/frappe/templates/includes/avatar_macro.html b/frappe/templates/includes/avatar_macro.html
index b652b573b3..49c2dfc1bc 100644
--- a/frappe/templates/includes/avatar_macro.html
+++ b/frappe/templates/includes/avatar_macro.html
@@ -1,18 +1,18 @@
-{% macro avatar(user_id=None, css_style=None, size="avatar-small") %}
+{% macro avatar(user_id=None, css_style=None, size="avatar-small", full_name=None, image=None) %}
 {% set user_info = frappe.utils.get_user_info_for_avatar(user_id) %}
-<span class="avatar {{ size }}" title="{{ user_info.name }}" style="{{ css_style or '' }}">
-	{% if user_info.image  %}
+<span class="avatar {{ size }}" title="{{ full_name or user_info.name }}" style="{{ css_style or '' }}">
+	{% if image or user_info.image  %}
 	<img
 		class="avatar-frame standard-image"
-		src="{{ user_info.image }}"
-		title="{{ user_info.name }}">
+		src="{{ image or user_info.image }}"
+		title="{{ full_name or user_info.name }}">
 	</span>
 	{% else %}
 	<span
 		class="avatar-frame standard-image"
-		title="{{ user_info.name }}">
-		{{ frappe.utils.get_abbr(user_info.name).upper() }}
+		title="{{ full_name or user_info.name }}">
+		{{ frappe.utils.get_abbr(full_name or user_info.name).upper() }}
 	</span>
 	{% endif %}
 </span>
-{% endmacro %}
\ No newline at end of file
+{% endmacro %}
diff --git a/frappe/templates/includes/blog/blogger.html b/frappe/templates/includes/blog/blogger.html
index 6963cc7361..bc36501ddd 100644
--- a/frappe/templates/includes/blog/blogger.html
+++ b/frappe/templates/includes/blog/blogger.html
@@ -1,8 +1,9 @@
-{% from "frappe/templates/includes/macros.html" import square_image_with_fallback %}
+{% from "frappe/templates/includes/avatar_macro.html" import avatar %}
 
 <div class="media">
-	{{ square_image_with_fallback(src=blogger_info.avatar, size='small', alt=blogger_info.full_name, class='align-self-start mr-4 rounded') }}
-	<div class="media-body">
+	{{  avatar(full_name=blogger_info.full_name, image=blogger_info.avatar, size='avatar-large') }}
+
+	<div class="media-body ml-3">
 		<h5 class="mt-0">
 			<a href="/blog?blogger={{ blogger_info.name }}" class="text-dark">{{ blogger_info.full_name }}</a>
 		</h5>
diff --git a/frappe/templates/includes/web_block.html b/frappe/templates/includes/web_block.html
index 0805e743c0..c8b22b3551 100644
--- a/frappe/templates/includes/web_block.html
+++ b/frappe/templates/includes/web_block.html
@@ -3,6 +3,8 @@
 		'section-padding-top': web_block.add_top_padding,
 		'section-padding-bottom': web_block.add_bottom_padding,
 		'bg-light': web_block.add_shade,
+		'border-top': web_block.add_border_at_top,
+		'border-bottom': web_block.add_border_at_bottom,
 	},
 	web_block.css_class
 ]) -%}
@@ -10,7 +12,10 @@
 {%- if web_template_type == 'Section' -%}
 {%- if not web_block.hide_block -%}
 <section class="section {{ classes }}" data-section-idx="{{ web_block.idx | e }}"
-	data-section-template="{{ web_block.web_template | e }}">
+	data-section-template="{{ web_block.web_template | e }}"
+	{% if web_block.add_background_image -%}
+		style="background: url({{ web_block.background_image}}) no-repeat center center; background-size: cover;"
+	{%- endif %}>
 	{%- if web_block.add_container -%}
 	<div class="container">
 	{%- endif -%}
diff --git a/frappe/website/doctype/blog_post/blog_post.json b/frappe/website/doctype/blog_post/blog_post.json
index 5e3cc78d70..3f8407e8e2 100644
--- a/frappe/website/doctype/blog_post/blog_post.json
+++ b/frappe/website/doctype/blog_post/blog_post.json
@@ -113,6 +113,7 @@
    "depends_on": "eval:doc.content_type === 'Markdown'",
    "fieldname": "content_md",
    "fieldtype": "Markdown Editor",
+   "ignore_xss_filter": 1,
    "label": "Content (Markdown)"
   },
   {
@@ -213,7 +214,7 @@
  "index_web_pages_for_search": 1,
  "is_published_field": "published",
  "links": [],
- "modified": "2022-03-09 01:48:25.227295",
+ "modified": "2022-03-21 14:42:19.282612",
  "modified_by": "Administrator",
  "module": "Website",
  "name": "Blog Post",
@@ -245,6 +246,7 @@
  "route": "blog",
  "sort_field": "modified",
  "sort_order": "ASC",
+ "states": [],
  "title_field": "title",
  "track_changes": 1
-}
+}
\ No newline at end of file
diff --git a/frappe/website/doctype/blog_post/templates/blog_post_row.html b/frappe/website/doctype/blog_post/templates/blog_post_row.html
index 53539c33e0..f8494d12b0 100644
--- a/frappe/website/doctype/blog_post/templates/blog_post_row.html
+++ b/frappe/website/doctype/blog_post/templates/blog_post_row.html
@@ -1,3 +1,5 @@
+{% from "frappe/templates/includes/avatar_macro.html" import avatar %}
+
 {%- set post = doc -%}
 <div class="blog-card col-sm-12 {{ 'col-md-8' if post.featured else 'col-md-4' }}">
 	<div class="card h-100">
@@ -26,7 +28,7 @@
 				<p class="post-description text-muted">{{ post.intro }}</p>
 			</div>
 			<div class="blog-card-footer">
-				<img class="avatar website-image-extra-small" src="{{ post.avatar }}">
+				{{  avatar(full_name=post.full_name, image=post.avatar, size='avatar-medium') }}
 				<div class="text-muted">
 					<a href="/blog?blogger={{ post.blogger }}">{{ post.full_name }}</a>
 					<div class="small">
diff --git a/frappe/website/doctype/web_page/web_page.js b/frappe/website/doctype/web_page/web_page.js
index 070d1b2ad5..32d8a2df32 100644
--- a/frappe/website/doctype/web_page/web_page.js
+++ b/frappe/website/doctype/web_page/web_page.js
@@ -18,7 +18,7 @@ frappe.ui.form.on('Web Page', {
 		frm.set_query('web_template', 'page_blocks', function() {
 			return {
 				filters: {
-					"type": 'Section'
+					"type": ['in', ['Section', 'Component']]
 				}
 			};
 		});
diff --git a/frappe/website/doctype/web_page_block/web_page_block.json b/frappe/website/doctype/web_page_block/web_page_block.json
index 4e3060a1e1..e93dcd3df2 100644
--- a/frappe/website/doctype/web_page_block/web_page_block.json
+++ b/frappe/website/doctype/web_page_block/web_page_block.json
@@ -13,8 +13,12 @@
   "add_container",
   "add_top_padding",
   "add_bottom_padding",
+  "add_border_at_top",
+  "add_border_at_bottom",
   "add_shade",
-  "hide_block"
+  "hide_block",
+  "add_background_image",
+  "background_image"
  ],
  "fields": [
   {
@@ -68,18 +72,42 @@
    "default": "1",
    "fieldname": "add_top_padding",
    "fieldtype": "Check",
-   "label": "Add Space on Top"
+   "label": "Add Space at Top"
   },
   {
    "default": "1",
    "fieldname": "add_bottom_padding",
    "fieldtype": "Check",
-   "label": "Add Space on Bottom"
+   "label": "Add Space at Bottom"
+  },
+  {
+   "default": "0",
+   "fieldname": "add_border_at_top",
+   "fieldtype": "Check",
+   "label": "Add Border at Top"
+  },
+  {
+   "default": "0",
+   "fieldname": "add_border_at_bottom",
+   "fieldtype": "Check",
+   "label": "Add Border at Bottom"
+  },
+  {
+   "default": "0",
+   "fieldname": "add_background_image",
+   "fieldtype": "Check",
+   "label": "Add Background Image"
+  },
+  {
+   "depends_on": "add_background_image",
+   "fieldname": "background_image",
+   "fieldtype": "Attach Image",
+   "label": "Background Image"
   }
  ],
  "istable": 1,
  "links": [],
- "modified": "2020-05-11 15:21:54.247652",
+ "modified": "2022-03-21 14:23:32.665108",
  "modified_by": "Administrator",
  "module": "Website",
  "name": "Web Page Block",
@@ -88,5 +116,6 @@
  "quick_entry": 1,
  "sort_field": "modified",
  "sort_order": "DESC",
+ "states": [],
  "track_changes": 1
 }
\ No newline at end of file
diff --git a/frappe/website/js/website.js b/frappe/website/js/website.js
index 079924d014..9a01b41a91 100644
--- a/frappe/website/js/website.js
+++ b/frappe/website/js/website.js
@@ -423,6 +423,18 @@ $.extend(frappe, {
 				});
 			});
 		}
+	},
+	setup_videos: () => {
+		// converts video images into youtube embeds (via Page Builder)
+		$('.section-video').on('click', (e) => {
+			let $video = $(e.currentTarget);
+			let id = $video.data('youtubeId');
+			console.log(id);
+			$video.find(".video-thumbnail").hide();
+			$video.append(`
+				<iframe allowfullscreen="" class="section-video" frameborder="0" src="//youtube.com/embed/${id}?autoplay=1"></iframe>
+			`)
+		})
 	}
 });
 
@@ -647,5 +659,6 @@ $(document).on("page-change", function() {
 
 frappe.ready(function() {
 	frappe.show_language_picker();
+	frappe.setup_videos();
 	frappe.socketio.init(window.socketio_port);
 });
diff --git a/frappe/website/web_template/cover_image/__init__.py b/frappe/website/web_template/cover_image/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frappe/website/web_template/cover_image/cover_image.html b/frappe/website/web_template/cover_image/cover_image.html
new file mode 100644
index 0000000000..e54952d80d
--- /dev/null
+++ b/frappe/website/web_template/cover_image/cover_image.html
@@ -0,0 +1,5 @@
+{{ frappe.render_template('templates/includes/image_with_blur.html', {
+	"src": url,
+	"alt": description,
+	"class": "full-width-image"
+}) }}
diff --git a/frappe/website/web_template/cover_image/cover_image.json b/frappe/website/web_template/cover_image/cover_image.json
new file mode 100644
index 0000000000..f44b797418
--- /dev/null
+++ b/frappe/website/web_template/cover_image/cover_image.json
@@ -0,0 +1,34 @@
+{
+ "__islocal": true,
+ "__unsaved": 1,
+ "creation": "2022-03-15 14:17:49.482939",
+ "docstatus": 0,
+ "doctype": "Web Template",
+ "fields": [
+  {
+   "__islocal": 1,
+   "__unsaved": 1,
+   "fieldname": "url",
+   "fieldtype": "Attach Image",
+   "label": "Image",
+   "reqd": 0
+  },
+  {
+   "__islocal": 1,
+   "__unsaved": 1,
+   "fieldname": "description",
+   "fieldtype": "Data",
+   "label": "Description",
+   "reqd": 0
+  }
+ ],
+ "idx": 0,
+ "modified": "2022-03-15 14:17:49.482939",
+ "modified_by": "Administrator",
+ "module": "Website",
+ "name": "Cover Image",
+ "owner": "Administrator",
+ "standard": 1,
+ "template": "",
+ "type": "Component"
+}
\ No newline at end of file
diff --git a/frappe/website/web_template/full_width_image/full_width_image.json b/frappe/website/web_template/full_width_image/full_width_image.json
index 8458b6c79b..840551f791 100644
--- a/frappe/website/web_template/full_width_image/full_width_image.json
+++ b/frappe/website/web_template/full_width_image/full_width_image.json
@@ -1,4 +1,5 @@
 {
+ "__unsaved": 1,
  "creation": "2020-04-17 16:03:35.676241",
  "docstatus": 0,
  "doctype": "Web Template",
@@ -17,8 +18,9 @@
   }
  ],
  "idx": 0,
- "modified": "2020-09-11 15:52:40.656939",
+ "modified": "2022-03-15 14:17:17.563982",
  "modified_by": "Administrator",
+ "module": "Website",
  "name": "Full Width Image",
  "owner": "Administrator",
  "standard": 1,
diff --git a/frappe/website/web_template/hero/hero.html b/frappe/website/web_template/hero/hero.html
index 0d2f9b008a..4f2f8d89ed 100644
--- a/frappe/website/web_template/hero/hero.html
+++ b/frappe/website/web_template/hero/hero.html
@@ -9,12 +9,12 @@
 		{%- if primary_action or secondary_action -%}
 		<div class="hero-buttons">
 			{%- if primary_action -%}
-			<a class="btn btn-lg btn-primary" href="{{ primary_action }}">
+			<a class="btn btn-lg btn-dark" href="{{ primary_action }}">
 				{{ primary_action_label }}
 			</a>
 			{%- endif -%}
 			{%- if secondary_action -%}
-			<a class="btn btn-lg btn-primary-light" href="{{ secondary_action }}">
+			<a class="btn btn-lg btn-light ml-3" href="{{ secondary_action }}">
 				{{ secondary_action_label }}
 			</a>
 			{%- endif -%}
diff --git a/frappe/website/web_template/hero/hero.json b/frappe/website/web_template/hero/hero.json
index 6a72e15434..b4344a2fc8 100644
--- a/frappe/website/web_template/hero/hero.json
+++ b/frappe/website/web_template/hero/hero.json
@@ -1,4 +1,5 @@
 {
+ "__unsaved": 1,
  "creation": "2020-04-19 15:26:23.140620",
  "docstatus": 0,
  "doctype": "Web Template",
@@ -49,7 +50,7 @@
   }
  ],
  "idx": 0,
- "modified": "2020-10-26 17:39:56.959008",
+ "modified": "2022-03-21 14:30:14.405261",
  "modified_by": "Administrator",
  "module": "Website",
  "name": "Hero",
diff --git a/frappe/website/web_template/section_with_cta/section_with_cta.html b/frappe/website/web_template/section_with_cta/section_with_cta.html
index 7a4169e0aa..4494dccecb 100644
--- a/frappe/website/web_template/section_with_cta/section_with_cta.html
+++ b/frappe/website/web_template/section_with_cta/section_with_cta.html
@@ -4,8 +4,12 @@
 		{%- if subtitle -%}
 		<p class="subtitle">{{ subtitle }}</p>
 		{%- endif -%}
-		<div class="mt-6">
-			<a href="{{ cta_url }}" class="btn btn-lg btn-primary">{{ cta_label }}</a>
+		<div class="mt-3">
+			<h4 class="action">
+				<a href="{{ cta_url }}" class="no-decoration">{{ cta_label }}
+					<svg class="icon icon-md"><use xlink:href="#icon-right"></use></svg>
+				</a>
+			</h4>
 		</div>
 		{%- if cta_description -%}
 		<div class="description">
diff --git a/frappe/website/web_template/section_with_small_cta/section_with_small_cta.html b/frappe/website/web_template/section_with_small_cta/section_with_small_cta.html
index 56a95bb4c9..7bd8c905ad 100644
--- a/frappe/website/web_template/section_with_small_cta/section_with_small_cta.html
+++ b/frappe/website/web_template/section_with_small_cta/section_with_small_cta.html
@@ -1,14 +1,18 @@
 <div class="section-cta-container">
 	<div class="section-small-cta">
 		<div>
-			<h2 class="title">{{ title or '' }}</h2>
+			<h3 class="section-title">{{ title or '' }}</h3>
 			{%- if subtitle -%}
 			<p class="subtitle">{{ subtitle }}</p>
 			{%- endif -%}
 		</div>
 		<div>
 			{%- if cta_label and cta_url -%}
-			<a href="{{ cta_url }}" class="btn btn-lg btn-primary">{{ cta_label }}</a>
+			<h4 class="action">
+				<a href="{{ cta_url }}" class="no-decoration">{{ cta_label }}
+					<svg class="icon icon-md"><use xlink:href="#icon-right"></use></svg>
+				</a>
+			</h4>
 			{%- endif -%}
 		</div>
 	</div>
diff --git a/frappe/website/web_template/section_with_testimonials/__init__.py b/frappe/website/web_template/section_with_testimonials/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frappe/website/web_template/section_with_testimonials/section_with_testimonials.html b/frappe/website/web_template/section_with_testimonials/section_with_testimonials.html
new file mode 100644
index 0000000000..8260f96115
--- /dev/null
+++ b/frappe/website/web_template/section_with_testimonials/section_with_testimonials.html
@@ -0,0 +1,31 @@
+{% from "frappe/templates/includes/avatar_macro.html" import avatar %}
+
+<div class="section-with-features">
+	{%- if title -%}
+	<h2 class="section-title">{{ title }}</h2>
+	{%- endif -%}
+	{%- if subtitle -%}
+	<p class="section-description">{{ subtitle }}</p>
+	{%- endif -%}
+
+	<div class="section-features" data-columns="{{ columns or 3 }}">
+		{%- for testimonial in testimonials -%}
+		<div class="section-feature">
+			<div>
+				{%- if testimonial.content -%}
+				<p class="feature-content">{{ testimonial.content }}</p>
+				{%- endif -%}
+			</div>
+			<div class="testimonial-author">
+				{{  avatar(full_name=testimonial.full_name, image=testimonial.image, size='avatar-medium') }}
+				<p>
+					{{ testimonial.full_name }}
+					{%- if testimonial.designation -%}
+					<br>{{ testimonial.designation }}
+					{%- endif -%}
+				</p>
+			</div>
+		</div>
+		{%- endfor -%}
+	</div>
+</div>
diff --git a/frappe/website/web_template/section_with_testimonials/section_with_testimonials.json b/frappe/website/web_template/section_with_testimonials/section_with_testimonials.json
new file mode 100644
index 0000000000..c1ba071be2
--- /dev/null
+++ b/frappe/website/web_template/section_with_testimonials/section_with_testimonials.json
@@ -0,0 +1,73 @@
+{
+ "__unsaved": 1,
+ "creation": "2022-03-21 15:28:13.141783",
+ "docstatus": 0,
+ "doctype": "Web Template",
+ "fields": [
+  {
+   "fieldname": "title",
+   "fieldtype": "Data",
+   "label": "Title",
+   "reqd": 0
+  },
+  {
+   "fieldname": "subtitle",
+   "fieldtype": "Data",
+   "label": "Subtitle",
+   "reqd": 0
+  },
+  {
+   "default": "3",
+   "fieldname": "columns",
+   "fieldtype": "Select",
+   "label": "Columns",
+   "options": "2\n3\n4",
+   "reqd": 0
+  },
+  {
+   "fieldname": "testimonials",
+   "fieldtype": "Table Break",
+   "label": "Testimonials",
+   "reqd": 0
+  },
+  {
+   "fieldname": "content",
+   "fieldtype": "Small Text",
+   "label": "Content",
+   "reqd": 0
+  },
+  {
+   "fieldname": "full_name",
+   "fieldtype": "Data",
+   "label": "Full Name",
+   "reqd": 0
+  },
+  {
+   "fieldname": "designation",
+   "fieldtype": "Data",
+   "label": "Designation",
+   "reqd": 0
+  },
+  {
+   "fieldname": "image",
+   "fieldtype": "Attach Image",
+   "label": "Image",
+   "reqd": 0
+  },
+  {
+   "fieldname": "url",
+   "fieldtype": "Data",
+   "label": "URL",
+   "reqd": 0
+  }
+ ],
+ "idx": 0,
+ "modified": "2022-03-21 15:39:39.044104",
+ "modified_by": "Administrator",
+ "module": "Website",
+ "name": "Section with Testimonials",
+ "owner": "Administrator",
+ "standard": 1,
+ "template": "",
+ "type": "Section"
+}
\ No newline at end of file
diff --git a/frappe/website/web_template/section_with_videos/__init__.py b/frappe/website/web_template/section_with_videos/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frappe/website/web_template/section_with_videos/section_with_videos.html b/frappe/website/web_template/section_with_videos/section_with_videos.html
new file mode 100644
index 0000000000..f464b39db0
--- /dev/null
+++ b/frappe/website/web_template/section_with_videos/section_with_videos.html
@@ -0,0 +1,24 @@
+<div class="section-with-features">
+	{%- if title -%}
+	<h2 class="section-title">{{ title }}</h2>
+	{%- endif -%}
+	{%- if subtitle -%}
+	<p class="section-description">{{ subtitle }}</p>
+	{%- endif -%}
+
+	<div class="section-features" data-columns="{{ columns or 3 }}">
+		{%- for video in videos -%}
+		<div class="section-feature">
+            <div class="section-video" data-youtube-id="{{ video.youtube_id }}">
+                <img class="video-thumbnail" src="https://i.ytimg.com/vi/{{ video.youtube_id }}/sddefault.jpg">
+            </div>
+            {%- if video.title -%}
+            <h3 class="feature-title">{{ video.title }}</h3>
+            {%- endif -%}
+            {%- if video.content -%}
+            <p class="feature-content">{{ video.content }}</p>
+            {%- endif -%}
+    </div>
+		{%- endfor -%}
+	</div>
+</div>
diff --git a/frappe/website/web_template/section_with_videos/section_with_videos.json b/frappe/website/web_template/section_with_videos/section_with_videos.json
new file mode 100644
index 0000000000..161830546c
--- /dev/null
+++ b/frappe/website/web_template/section_with_videos/section_with_videos.json
@@ -0,0 +1,61 @@
+{
+ "__unsaved": 1,
+ "creation": "2022-03-21 15:59:18.432776",
+ "docstatus": 0,
+ "doctype": "Web Template",
+ "fields": [
+  {
+   "fieldname": "title",
+   "fieldtype": "Data",
+   "label": "Title",
+   "reqd": 0
+  },
+  {
+   "fieldname": "subtitle",
+   "fieldtype": "Data",
+   "label": "Subtitle",
+   "reqd": 0
+  },
+  {
+   "default": "3",
+   "fieldname": "columns",
+   "fieldtype": "Select",
+   "label": "Columns",
+   "options": "2\n3\n4",
+   "reqd": 0
+  },
+  {
+   "fieldname": "videos",
+   "fieldtype": "Table Break",
+   "label": "Videos",
+   "reqd": 0
+  },
+  {
+   "fieldname": "youtube_id",
+   "fieldtype": "Data",
+   "label": "YouTube Video ID",
+   "reqd": 0
+  },
+  {
+   "fieldname": "title",
+   "fieldtype": "Data",
+   "label": "Title",
+   "reqd": 0
+  },
+  {
+   "fieldname": "content",
+   "fieldtype": "Small Text",
+   "label": "Content",
+   "reqd": 0
+  }
+ ],
+ "idx": 0,
+ "modified": "2022-03-21 16:03:46.339279",
+ "modified_by": "Administrator",
+ "module": "Website",
+ "name": "Section with Videos",
+ "owner": "Administrator",
+ "standard": 1,
+ "template": "",
+ "type": "Section"
+}
\ No newline at end of file