Daves branch

app/assets/sass/components/_hero.scss

@@ -1,3 +1,142 @@
+// ==========================================================================
+// NICE-STYLE HERO
+// Hero section with diagonal edge image (like NICE website)
+// ==========================================================================
+
+$nice-hero-bg: #003087; // NHS dark blue
+
+.nice-hero {
+  position: relative;
+  background-color: $nice-hero-bg;
+  overflow: hidden;
+  min-height: 400px;
+
+  @media (min-width: 769px) {
+    min-height: 450px;
+    display: flex;
+    align-items: stretch;
+  }
+}
+
+.nice-hero__content {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  padding: 40px 0;
+
+  @media (min-width: 769px) {
+    padding: 56px 0;
+  }
+}
+
+.nice-hero__inner {
+  width: 100%;
+}
+
+.nice-hero__text {
+  color: #ffffff;
+
+  @media (min-width: 769px) {
+    max-width: 50%;
+    padding-right: 24px; // Ensure text stays clear of diagonal edge
+  }
+
+  h1, .nhsuk-heading-xl {
+    color: #ffffff;
+    margin-bottom: 24px;
+  }
+
+  p, .nhsuk-body-l, .nhsuk-body {
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  .nhsuk-button--reverse {
+    background-color: #ffffff;
+    color: $nice-hero-bg;
+
+    &:hover {
+      background-color: #f0f4f5;
+      color: #002266;
+    }
+
+    &:focus {
+      background-color: #ffeb3b;
+      color: #212b32;
+      box-shadow: 0 4px 0 #212b32;
+    }
+  }
+
+  .nhsuk-link--reverse {
+    color: #ffffff;
+    text-decoration: underline;
+
+    &:hover {
+      color: #ffffff;
+      text-decoration: none;
+    }
+
+    &:focus {
+      color: #212b32;
+    }
+  }
+}
+
+.nice-hero__subtext {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.nice-hero__image {
+  display: none;
+
+  @media (min-width: 769px) {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 35%;
+    z-index: 1;
+
+    // Diagonal edge using clip-path
+    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    width: 38%;
+    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
+  }
+}
+
+// Mobile: show image below content
+@media (max-width: 768px) {
+  .nice-hero {
+    flex-direction: column;
+  }
+
+  .nice-hero__image {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 250px;
+    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
+    margin-top: -20px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center top;
+    }
+  }
+}
+
 // ==========================================================================
 // COMPASS HERO
 // Hero section with full-width background image

app/assets/sass/main.scss

@@ -16,5 +16,4 @@
 
 .nhsuk-width-container {
   max-width: 1100px;
-margin: 0 auto;
 }

app/routes.js

@@ -110,9 +110,11 @@ router.post('/redirect-test', function(request, response) {
 })
 // Version-specific routes
 router.use('/current', require('./views/current/routes'))
+// v1 routes
+router.use('/v1', require('./views/v1/routes'))
+// v2 routes
+router.use('/v2', require('./views/v2/routes'))
+
 
-// When you duplicate to v2:
-// router.use('/v2', require('./views/v2/routes'))
-// END 
 
 module.exports = router