Create Hero View, ViewComponent and Model

DotnetViewComponents/ViewComponents/HeroViewComponent.cs

@@ -0,0 +1,21 @@
+namespace DotnetViewComponents.ViewComponents
+{
+    using Microsoft.AspNetCore.Mvc;
+    using DotnetViewComponents.ViewModels;
+
+    /// <summary>
+    /// A ViewComponent that rendes a hero section.
+    /// </summary>
+    public class HeroViewComponent : ViewComponent
+    {
+        public IViewComponentResult Invoke(
+            string? imageSrc = null,
+            string? heading = null,
+            string? textContent = null)
+        { 
+            var model = new HeroViewModel(imageSrc, heading, textContent);
+
+            return View(model);
+        }
+    }
+}

DotnetViewComponents/ViewModels/HeroViewModel.cs

@@ -0,0 +1,36 @@
+namespace DotnetViewComponents.ViewModels
+{
+    public class HeroViewModel
+    {
+        /// <summary>
+        /// Initializes a new instance of the <see cref="HeroViewModel"/> class.
+        /// </summary>
+        /// <param name="imageSrc">The source URL of the hero image.</param>
+        /// <param name="heading">The heading text for the hero section.</param>
+        /// <param name="textContent">The main text content for the hero section.</param>
+        public HeroViewModel(
+            string? imageSrc,
+            string? heading,
+            string? textContent)
+        {
+            ImageSrc = imageSrc;
+            Heading = heading;
+            TextContent = textContent;
+        }
+
+        /// <summary>
+        /// Gets or sets the source URL of the hero image.
+        /// </summary>
+        public string? ImageSrc { get; set; }
+
+        /// <summary>
+        /// Gets or sets the heading text for the hero section.
+        /// </summary>
+        public string? Heading { get; set;}
+
+        /// <summary>
+        /// Gets or sets the main text content for the hero section.
+        /// </summary>
+        public string? TextContent { get; set;}
+    }
+}

DotnetViewComponents/Views/Shared/Components/Hero/Default.cshtml

@@ -0,0 +1,33 @@
+@using DotnetViewComponents.ViewModels
+@model HeroViewModel
+
+@{
+	var hasImage = !String.IsNullOrWhiteSpace(Model.ImageSrc);
+	var hasHeading = !String.IsNullOrWhiteSpace(Model.Heading);
+	var hasTextContent = !String.IsNullOrWhiteSpace(Model.TextContent);
+}
+<section class="nhsuk-hero @(hasImage ? "nhsuk-hero--image" : "") @(hasTextContent ? "nhsuk-hero--image-description" : "")" @(hasImage ? $"style=background-image:url({Model.ImageSrc})" : "")>
+	<div class="nhsuk-hero__overlay">
+		@if (hasHeading || hasTextContent)
+		{
+			<div class="nhsuk-width-container @(!hasImage ? "nhsuk-hero--border" : "")">
+				<div class="nhsuk-grid-row">
+					<div class="nhsuk-grid-column-two-thirds">
+						<div class="@(hasImage ? "nhsuk-hero-content" : "nhsuk-hero__wrapper")">
+							@if (hasHeading)
+							{
+								<h1 class="nhsuk-u-margin-bottom-3">@Model.Heading</h1>
+							}
+							@if (hasTextContent)
+							{
+								<p class="nhsuk-body-l nhsuk-u-margin-bottom-0">@Model.TextContent</p>
+							}
+
+							<span class="nhsuk-hero__arrow" aria-hidden="true"></span>
+						</div>
+					</div>
+				</div>
+			</div>
+		}
+	</div>
+</section>