Feature/sab 212 start page

package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "govuk-frontend": "^6.4.0"
+  }
+}

src/SchoolAccount.Web.Mvc/DependencyInjection.cs

@@ -2,6 +2,7 @@
 using SchoolAccount.Web.Mvc.Authentication.Extensions;
 using SchoolAccount.Web.Mvc.Features.Header;
 using SchoolAccount.Web.Mvc.Infrastructure;
+using SchoolAccount.Web.Mvc.TagHelpers.Components;
 
 namespace SchoolAccount.Web.Mvc;
 
@@ -17,6 +18,7 @@ IConfigurationManager configuration
         services.AddDsiAuthentication(configuration);
         services.AddControllersWithFeatureViews();
         services.AddGovUkFrontend();
+        services.AddTagComponents();
         services.AddScoped<IHeaderContentProvider, HeaderContentProvider>();
 
         if (env.IsDevelopment())
@@ -40,4 +42,17 @@ private static void AddControllersWithFeatureViews(this IServiceCollection servi
                 options.ViewLocationExpanders.Add(new FeatureViewLocationExpander());
             });
     }
+
+    private static void AddTagComponents(this IServiceCollection services)
+    {
+        services.Scan(scan =>
+            scan.FromAssembliesOf(typeof(DependencyInjection))
+                .AddClasses(
+                    classes => classes.AssignableTo<IComponentGenerator>(),
+                    publicOnly: false
+                )
+                .AsImplementedInterfaces()
+                .WithScopedLifetime()
+        );
+    }
 }

src/SchoolAccount.Web.Mvc/Features/Accounts/AccountController.cs

@@ -38,7 +38,7 @@ public IActionResult Logout()
     {
         if (!userContext.IsAuthenticated)
         {
-            return RedirectToAction("Home", "Home");
+            return RedirectToAction("Start", "Start");
         }
 
         HttpContext.Session.Clear();
@@ -54,6 +54,6 @@ public IActionResult LoggedOut()
     {
         HttpContext.Session.Clear();
 
-        return RedirectToAction("Start", "Home");
+        return RedirectToAction("Start", "Start");
     }
 }

src/SchoolAccount.Web.Mvc/Features/Start/Start.cshtml

@@ -0,0 +1,51 @@
+@model SchoolAccount.Web.Mvc.Features.Start.StartViewModel
+@{
+    ViewData["Title"] = "Home Page";
+}
+
+<div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+        <h1 class="govuk-heading-xl">Sign in to school account</h1>
+
+        <p class="govuk-body-l">
+            School account brings DfE services and guidance together in one place, helping you understand what you need
+            to do and when.
+        </p>
+
+        <p class="govuk-body">
+            This is an early version that supports the school census. More services and guidance will follow.
+        </p>
+
+        <p class="govuk-body">
+            You'll need a DfE sign-in account.
+        </p>
+
+        <a asp-controller="Account" asp-action="Login" class="govuk-button">
+            Sign in or create an account
+            <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19"
+                 viewBox="0 0 33 40" aria-hidden="true">
+                <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"/>
+            </svg>
+        </a>
+
+    </div>
+</div>
+
+<h2 class="govuk-heading-l govuk-!-margin-top-4">What you'll get</h2>
+
+<dfe-card-grid class="start-now-cards">
+    <dfe-card>
+        <dfe-card-image src="/assets/images/card-1.jpg" alt=""/>
+        Step-by-step guidance to help you complete your statutory returns
+    </dfe-card>
+
+    <dfe-card>
+        <dfe-card-image src="/assets/images/card-2.jpg" alt=""/>
+        Statuses that show where you are in the process
+    </dfe-card>
+
+    <dfe-card>
+        <dfe-card-image src="/assets/images/card-3.jpg" alt=""/>
+        Email notifications when something needs your attention
+    </dfe-card>
+</dfe-card-grid>

src/SchoolAccount.Web.Mvc/Features/Start/StartController.cs

@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+
+namespace SchoolAccount.Web.Mvc.Features.Start;
+
+[Route("/")]
+public class StartController : Controller
+{
+    [HttpGet(""), AllowAnonymous]
+    public async Task<IActionResult> Start()
+    {
+        return View(new StartViewModel());
+    }
+}

src/SchoolAccount.Web.Mvc/Features/Start/StartViewModel.cs

@@ -0,0 +1,3 @@
+namespace SchoolAccount.Web.Mvc.Features.Start;
+
+public record StartViewModel;

src/SchoolAccount.Web.Mvc/Features/_ViewImports.cshtml

@@ -1,2 +1,3 @@
 @addTagHelper *, GovUk.Frontend.AspNetCore
-@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@addTagHelper *, SchoolAccount.Web.Mvc

src/SchoolAccount.Web.Mvc/Styles/app.scss

@@ -7,22 +7,21 @@
 );
 
 @use 'components/dfe-header-static-sign-out';
+@use 'components/card';
 
 * {
   font-family: 'Inter', sans-serif!important;
 }
 
-.govuk-header__link .govuk-header__logotype{
+.govuk-header__link .govuk-header__logotype {
   height: 30px;
 }
 
-.govuk-header__link:focus .govuk-header__logotype{
+.govuk-header__link:focus .govuk-header__logotype {
   content: url(/images/department-for-education_black.png);
   height: 30px;
 }
 
 .govuk-width-container {
   max-width: 1140px;
-}
-
-
+}

src/SchoolAccount.Web.Mvc/Styles/components/card.scss

@@ -0,0 +1,147 @@
+@use "govuk-frontend" as *;
+
+.dfe-grid-container {
+  display:flex;
+  flex-direction:column;
+  gap:15px;
+  margin-bottom:30px;
+  .dfe-card {
+    position:relative;
+    display:flex;
+    flex-direction:column;
+    background-color:govuk-colour("white");
+    border:1px solid #b1b4b6;
+    max-width:400px;
+    &:hover {
+      background-color:#003a69;
+    }
+  }
+}
+
+@media (min-width:40.0625em) {
+  .dfe-grid-container {
+    display:grid;
+    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
+    gap:30px
+  }
+}
+@media (max-width:40.0525em) {
+  .dfe-card {
+    max-width:100%
+  }
+}
+.dfe-card>picture,
+.dfe-card>picture>img {
+  max-width:100%;
+}
+.dfe-card-container {
+  padding:24px;
+  display:flex;
+  flex-grow:1;
+  flex-direction:column;
+  border-left-width: 6px;
+  border-left-style: solid;
+  border-left-color: transparent;
+  .govuk-tag{
+    @include govuk-responsive-margin(3, bottom);
+  }
+  &.yellow{
+    border-left-color: govuk-colour("yellow");
+  }
+  &.green{
+    border-left-color: govuk-colour("green", $variant: "tint-50");
+  }
+  &.grey{
+    border-left-color: govuk-colour("black", $variant: "tint-80");
+  }
+  &.orange{
+    border-left-color: govuk-colour("orange", $variant: "tint-25");
+  }
+  &.red{
+    border-left-color: #d4351c;
+  }
+}
+
+.dfe-card--white-background{
+  background-color: govuk-colour("white");
+}
+
+.dfe-card-container h2+p:last-child,
+.dfe-card-container h3+p:last-child {
+  margin-top:0
+}
+.dfe-card:focus-within,
+.dfe-card:hover {
+  background-color:#003a69;
+}
+.dfe-card:focus-within .govuk-heading-m,
+.dfe-card:focus-within a,
+.dfe-card:focus-within p,
+.dfe-card:hover .govuk-heading-m,
+.dfe-card:hover a,
+.dfe-card:hover p {
+  color:govuk-colour("white")
+}
+.dfe-card:focus-within {
+  outline:3px solid govuk-colour("yellow");
+}
+.dfe-card-container .dfe-card-link--header:focus,
+.dfe-card-container .dfe-card-link--retake:focus {
+  color: govuk-colour("black");
+}
+.dfe-card-link--retake {
+  position:relative;
+  z-index:2
+}
+.dfe-card-link--header {
+  text-decoration:none;
+  color:#347ca9
+}
+.dfe-card-link--header:after {
+  position:absolute;
+  content:"";
+  left:0;
+  top:0;
+  right:0;
+  bottom:0
+}
+
+.start-now-cards.dfe-grid-container {
+  grid-template-columns: repeat(3, 1fr);
+
+  .dfe-card img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+  }
+}
+
+@media (max-width: 40.0525em) {
+  .start-now-cards.dfe-grid-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+.start-now-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+
+  .dfe-card {
+    width: 100%;
+    max-width: none;
+  }
+
+  .dfe-card img {
+    display: block;
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+  }
+}
+
+@media (max-width: 40.0525em) {
+  .start-now-cards {
+    grid-template-columns: 1fr;
+  }
+}