diff --git a/app/assets/images/icon-1.png b/app/assets/images/icon-1.png new file mode 100644 index 0000000..4e86edd Binary files /dev/null and b/app/assets/images/icon-1.png differ diff --git a/app/assets/sass/components/_hero.scss b/app/assets/sass/components/_hero.scss index bc178c5..ab2f687 100644 --- a/app/assets/sass/components/_hero.scss +++ b/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 diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss index efd01e3..8b9a3c1 100755 --- a/app/assets/sass/main.scss +++ b/app/assets/sass/main.scss @@ -16,5 +16,4 @@ .nhsuk-width-container { max-width: 1100px; -margin: 0 auto; } \ No newline at end of file diff --git a/app/routes.js b/app/routes.js index 1970fcc..82af6f2 100644 --- a/app/routes.js +++ b/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 diff --git a/app/views/current/category-wound-care.html b/app/views/current/category-wound-care.html index 931a0db..0194191 100644 --- a/app/views/current/category-wound-care.html +++ b/app/views/current/category-wound-care.html @@ -1,7 +1,7 @@ -{% extends prototypeVersion + '/layouts/layout-search.html' %} +{% extends prototypeVersion + '/layouts/layout-signed-in.html' %} -{% set pageName = "Wound care" %} -{% set serviceHeader = "NHS medtech procurement" %} +{% set pageName = "Search medical technologies - Compass" %} +{% set serviceHeader = "Compass" %} {% block beforeContent %} {% from "breadcrumb/macro.njk" import breadcrumb %} @@ -9,465 +9,1059 @@ {{ breadcrumb({ items: [ { - href: "/" + prototypeVersion + "/index", + href: "/", text: "Home" - }, - { - href: "/" + prototypeVersion + "/search", - text: "Find medical technologies" } ], href: "#", - text: "Wound care" + text: "Search results" }) }} {% endblock %} {% block content %} -{# Page header #}
Dressings, negative pressure therapy, skin substitutes, and wound management devices.
-- 183 products from 47 suppliers · - 56 NHS trust evaluations · - 23 trusts available to contact -
-+ Showing 1 to 10 of 87 products +
+ + {# Result 1 - NPWT System #} ++ Advanced Wound Therapeutics Ltd +
+ + ++ UK Made +
+ WoundCare Solutions plc +
+ + ++ DermaGuard Medical +
+ + ++ SME +
+Showing 183 products
-+ BioWound Technologies +
+ + ++ UK Made + SME +
+ MediComfort Systems Ltd +
+ + +Smith+Nephew · Single-use negative pressure wound therapy
- -- 12 trusts procured - 2 under review · 1 excluded -
- -- NICE MTG43 - 8 trust evaluations - NHS Supply Chain -
- -- 5 trusts willing to discuss lessons learned -
-+ Specialist Wound Care Ltd +
+ + +3M/KCI · Surgical incision management
- -- 9 trusts procured - 3 under review -
- -- Clinical trial - 6 trust evaluations -
- -- 4 trusts willing to discuss lessons learned -
-+ UK Made + SME +
+Mölnlycke · Foam dressing with Safetac technology
- -- 7 trusts procured - 1 under review -
- -- 5 trust evaluations - NHS Supply Chain -
- -- 3 trusts willing to discuss lessons learned -
-+ SurgiWound International +
+ + +ConvaTec · Antimicrobial Hydrofiber dressing
- -- 6 trusts procured -
- -- 4 trust evaluations - NHS Supply Chain -
- -- 2 trusts willing to discuss lessons learned -
-+ Natural Wound Healing Ltd +
+ + +3M/Acelity · Ultra-portable NPWT
- -- 4 trusts procured - 2 under review -
- -- 3 trust evaluations -
- -- 2 trusts willing to discuss lessons learned -
-+ SME +
+Genadyne · Portable NPWT system
- -- 3 trusts procured - 1 under review - 1 excluded -
- -- 2 trust evaluations -
- -- 1 trust willing to discuss lessons learned -
-+ DermaProtect Solutions +
+ + +NANOVA · Bioactive wound healing
- -- No NHS trust data yet -
- -- MHRA registered - Pilot study -
- -- No trusts available to contact yet -
-+ Vascular Wound Care Ltd +
+ + ++ UK Made +
++ or sign up your trust +
-
- The NHS 10 Year Plan commits to making better use of data and digital technology to improve outcomes and - experiences. Compass supports this vision
- - Start using today - -Access multiple trusted sources in one place: NICE Medtech Guidance, ODEP Accreditation, - DTAC Passporting, NHS Trust Evaluations, and MHRA Registration data.
" - }) }} -Access multiple trusted sources in one place with NICE Medtech Guidance, ODEP Accreditation, + DTAC Passporting, NHS Trust Evaluations, and MHRA Registration data.
+Read and share evaluations from NHS trusts using the technologies in practice, providing - insights beyond formal guidance.
" - }) }}Connect directly with trusts who have evaluated technologies you're considering. Learn - from their experience before making decisions.
" - }) }} -Read and share evaluations from NHS trusts that are using the products/suppliers/technologies, and get insights beyond formal guidance.
+Connect directly with trusts who have evaluated technologies you're considering. Learn + from their experience before making decisions.
+Access evidence quickly to support tendering processes, supplier evaluation, and business case development for medical technology purchases.
" }) }} @@ -106,10 +93,10 @@Review clinical evidence and real-world evaluations from other NHS trusts to inform technology adoption decisions in your service.
" }) }} @@ -119,10 +106,10 @@Support your evaluation processes with centralised regulatory and clinical evidence, and share your findings with other NHS organisations.
" }) }} @@ -130,10 +117,10 @@Identify evidence-based innovations and assess their readiness for adoption across your organisation or integrated care system.
" }) }} @@ -144,7 +131,7 @@Compass integrates evidence from the most authoritative sources in healthcare:
+This service integrates evidence from the most authoritative sources in healthcare:
Evidence-based guidance on medical technologies from the National Institute for Health and Care Excellence. +
Evidence-based guidance on medical technologies from the National Institute for Health and Care Excellence
Orthopaedic Data Evaluation Panel ratings for implants and related devices.
+Orthopaedic Data Evaluation Panel ratings for implants and related devices
Devices Technical Advisory Committee approval status for medical devices.
+Devices Technical Advisory Committee approval status for medical devices
Real-world assessments and feedback from NHS organisations using these technologies in practice.
+Real-world assessments and feedback from NHS organisations using these technologies in practice
Medicines and Healthcare products Regulatory Agency registration and compliance information.
+Medicines and Healthcare products Regulatory Agency registration and compliance information
Used by trusts everywhere
+ {% block heroHeading %} +Used by 45 + + NHS trusts.
+ {% endblock %} - - {% endblock %} - - - {% block heroActions %} -
+ Search, evaluate and choose a supplier based on good clinical outcomes.
- -Used by NHS trusts everywhere.
- - diff --git a/app/views/v2/layouts/layout-hero.html b/app/views/v2/layouts/layout-hero.html index fd1e66a..4d97b8c 100755 --- a/app/views/v2/layouts/layout-hero.html +++ b/app/views/v2/layouts/layout-hero.html @@ -50,14 +50,14 @@