SAB212 - Start Page with new cards

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,34 @@
+@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>
+
+<partial name="_StartCards" />

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/Start/_StartCards.cshtml

@@ -0,0 +1,34 @@
+<div class="govuk-grid-row">
+    <div class="govuk-grid-column-full">
+        <h2 class="govuk-heading-l govuk-!-margin-top-4">What you'll get</h2>
+
+        <div class="dfe-grid-container start-now-cards">
+            <div class="dfe-card">
+                <img src="/assets/images/card-1.jpg" alt="">
+                <div class="dfe-card-container">
+                    <p class="govuk-body">
+                        Step-by-step guidance to help you complete your statutory returns
+                    </p>
+                </div>
+            </div>
+
+            <div class="dfe-card">
+                <img src="/assets/images/card-2.jpg" alt="">
+                <div class="dfe-card-container">
+                    <p class="govuk-body">
+                        Statuses that show where you are in the process
+                    </p>
+                </div>
+            </div>
+
+            <div class="dfe-card">
+                <img src="/assets/images/card-3.jpg" alt="">
+                <div class="dfe-card-container">
+                    <p class="govuk-body">
+                        Email notifications when something needs your attention
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/SchoolAccount.Web.Mvc/SchoolAccount.Web.Mvc.csproj

@@ -27,4 +27,8 @@
     <PackageReference Include="Microsoft.Azure.AppConfiguration.AspNetCore" />
     <PackageReference Include="Microsoft.IdentityModel.Protocols.OpenIdConnect" />
   </ItemGroup>
+
+  <ItemGroup>
+    <_ContentIncludedByDefault Remove="Features\Home\Home.cshtml" />
+  </ItemGroup>
 </Project>

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;
+  }
+}

tests/SchoolAccount.IntegrationTests/Features/Account/LoggedOutActionTests.cs

@@ -20,7 +20,7 @@ public async Task Ensure_an_authenticated_user_accessing_LoggedOut_are_redirecte
         // Assert
         response.StatusCode.ShouldBe(HttpStatusCode.Redirect);
         response.Headers.Location?.OriginalString.ShouldStartWith(
-            factory.GeneratePath("Home", "Start")
+            factory.GeneratePath("Start", "Start")
         );
     }
 }

tests/SchoolAccount.IntegrationTests/Features/Account/LogoutActionTests.cs

@@ -48,7 +48,7 @@ public async Task Unauthorised_users_accessing_sign_out_get_redirected_to_start_
         // Assert
         response.StatusCode.ShouldBe(HttpStatusCode.OK);
         response.Headers.Location?.OriginalString.ShouldEndWith(
-            factory.GeneratePath("Home", "Home")
+            factory.GeneratePath("Start", "Start")
         );
     }
 

tests/SchoolAccount.IntegrationTests/Features/CrossCutting/AnonymousEndpointGuardrailTests.cs

@@ -31,7 +31,7 @@ public class AnonymousEndpointGuardrailTests(SchoolAccountWebApplicationFactory<
     // Adding a new anonymous endpoint should be a conscious, reviewed decision, not an accident.
     private readonly HashSet<string> _allowlistedAnonymousEndpoints =
     [
-        factory.GeneratePath("Home", "Start"),
+        factory.GeneratePath("Start", "Start"),
         factory.GeneratePath("Account", "Login"),
         factory.GeneratePath("Account", "Logout"),
         factory.GeneratePath("Account", "LoggedOut"),

tests/SchoolAccount.IntegrationTests/Features/CrossCutting/UnauthorisedAuthenticationTests.cs

@@ -22,7 +22,7 @@ public async Task Ensure_that_the_dashboard_controller_redirects_for_unauthorise
         // Assert
         response.StatusCode.ShouldBe(HttpStatusCode.Redirect);
         response.Headers.Location?.OriginalString.ShouldBeEquivalentTo(
-            factory.GeneratePath("Home", "Home", new { ReturnUrl = dashboardUri })
+            factory.GeneratePath("Start", "Start", new { ReturnUrl = dashboardUri })
         );
     }