feat: Section with Features

frappe/public/scss/page-builder.scss

@@ -458,3 +458,106 @@
 		margin-right: auto;
 	}
 }
+
+/* Section with Features */
+
+.section-features {
+	display: grid;
+
+	&[data-columns="2"] {
+		margin-top: 3.75rem;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 6rem;
+
+		.feature-title {
+			font-size: $font-size-xl;
+			font-weight: bold;
+
+			@include media-breakpoint-up(md) {
+				font-size: $font-size-2xl;
+			}
+		}
+
+		.feature-content {
+			font-size: $font-size-base;
+			margin-top: 1.75rem;
+			margin-bottom: 1.75rem;
+
+			@include media-breakpoint-up(xl) {
+				font-size: $font-size-lg;
+			}
+		}
+
+		.feature-icon {
+			margin-bottom: 2rem;
+			width: 3.375rem;
+			height: 3.375rem;
+			object-fit: contain;
+		}
+	}
+
+	&[data-columns="3"] {
+		margin-top: 3rem;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 4.875rem;
+
+		.feature-title {
+			font-size: $font-size-lg;
+			font-weight: 600;
+
+			@include media-breakpoint-up(md) {
+				font-size: $font-size-xl;
+			}
+		}
+		.feature-content {
+			font-size: $font-size-base;
+			margin-top: 1rem;
+			margin-bottom: 1rem;
+		}
+
+		.feature-icon {
+			margin-bottom: 1.75rem;
+			width: 2.5rem;
+			height: 2.5rem;
+			object-fit: contain;
+		}
+	}
+
+	&[data-columns="4"] {
+		margin-top: 2.5rem;
+		grid-template-columns: repeat(4, 1fr);
+		gap: 3.75rem;
+
+		.feature-title {
+			font-size: $font-size-base;
+			font-weight: 600;
+		}
+
+		.feature-content {
+			font-size: $font-size-sm;
+			margin-top: 0.875rem;
+			margin-bottom: 0.875rem;
+		}
+
+		.feature-url {
+			font-size: $font-size-sm;
+		}
+
+		.feature-icon {
+			margin-bottom: 1.5rem;
+			width: 2.375rem;
+			height: 2.375rem;
+			object-fit: contain;
+		}
+	}
+}
+
+.section-feature {
+	display: flex;
+	flex-direction: column;
+}
+
+.feature-url {
+	display: inline-block;
+	margin-top: auto;
+}

frappe/website/web_template/section_with_features/section_with_features.html

@@ -0,0 +1,27 @@
+<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 }}">
+		{%- for feature in features -%}
+		<div class="section-feature">
+			{%- if feature.icon -%}
+			<img class="feature-icon" src="{{ feature.icon }}" alt="Icon for {{ feature.title }}">
+			{%- endif -%}
+			{%- if feature.title -%}
+			<h3 class="feature-title">{{ feature.title }}</h3>
+			{%- endif -%}
+			{%- if feature.content -%}
+			<p class="feature-content">{{ feature.content }}</p>
+			{%- endif -%}
+			{%- if feature.url -%}
+			<a href="{{ feature.url }}" class="feature-url">Learn more →</a>
+			{%- endif -%}
+		</div>
+		{%- endfor -%}
+	</div>
+</div>

frappe/website/web_template/section_with_features/section_with_features.json

@@ -0,0 +1,62 @@
+{
+ "creation": "2020-08-18 13:10:11.476496",
+ "docstatus": 0,
+ "doctype": "Web Template",
+ "fields": [
+  {
+   "fieldname": "title",
+   "fieldtype": "Data",
+   "label": "Title",
+   "reqd": 0
+  },
+  {
+   "fieldname": "subtitle",
+   "fieldtype": "Data",
+   "label": "Subtitle",
+   "reqd": 0
+  },
+  {
+   "fieldname": "columns",
+   "fieldtype": "Select",
+   "label": "Columns",
+   "options": "2\n3\n4",
+   "reqd": 0
+  },
+  {
+   "fieldname": "features",
+   "fieldtype": "Table Break",
+   "label": "Features",
+   "reqd": 0
+  },
+  {
+   "fieldname": "title",
+   "fieldtype": "Data",
+   "label": "Title",
+   "reqd": 0
+  },
+  {
+   "fieldname": "content",
+   "fieldtype": "Small Text",
+   "label": "Content",
+   "reqd": 0
+  },
+  {
+   "fieldname": "url",
+   "fieldtype": "Data",
+   "label": "URL",
+   "reqd": 0
+  },
+  {
+   "fieldname": "icon",
+   "fieldtype": "Attach Image",
+   "label": "Icon",
+   "reqd": 0
+  }
+ ],
+ "idx": 0,
+ "modified": "2020-08-18 13:48:43.138779",
+ "modified_by": "Administrator",
+ "name": "Section with Features",
+ "owner": "Administrator",
+ "standard": 1
+}