From 18720362f9b985836dc3b22d54cae506e2700d3d Mon Sep 17 00:00:00 2001
From: Paul Dempsey <76729591+paul-daniel-dempsey@users.noreply.github.com>
Date: Sun, 2 Feb 2025 20:57:07 +0000
Subject: [PATCH] feat: benefits list

---
 .../subscriptionsProductDescription.tsx           |  9 ++++++---
 .../subscriptionsLanding.scss                     | 15 +++++++++++++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/support-frontend/assets/components/subscriptionsProductDescription/subscriptionsProductDescription.tsx b/support-frontend/assets/components/subscriptionsProductDescription/subscriptionsProductDescription.tsx
index 6c6bb11b83..bec4ab5c09 100644
--- a/support-frontend/assets/components/subscriptionsProductDescription/subscriptionsProductDescription.tsx
+++ b/support-frontend/assets/components/subscriptionsProductDescription/subscriptionsProductDescription.tsx
@@ -86,11 +86,14 @@ function SubscriptionsProductBenefits({
 	benefits: ProductBenefit[];
 }): JSX.Element {
 	return (
-		<div className="subscriptions__description">
+		<ul className="subscriptions__list">
 			{benefits.map((benefit) => (
-				<section>{benefit.copy}</section>
+				<li className="subscriptions__listitem">
+					<div className="subscriptions__listitem__bullet">{`\u2022`}</div>
+					<div>{benefit.copy}</div>
+				</li>
 			))}
-		</div>
+		</ul>
 	);
 }
 
diff --git a/support-frontend/assets/pages/subscriptions-landing/subscriptionsLanding.scss b/support-frontend/assets/pages/subscriptions-landing/subscriptionsLanding.scss
index d58260103b..bed0466140 100644
--- a/support-frontend/assets/pages/subscriptions-landing/subscriptionsLanding.scss
+++ b/support-frontend/assets/pages/subscriptions-landing/subscriptionsLanding.scss
@@ -164,6 +164,21 @@
 	}
 }
 
+.subscriptions__list {
+  display: block;
+  border-top: 1px solid gu-colour(neutral-86);
+  margin: 45px 20px 25px 0px;
+}
+
+.subscriptions__listitem {
+  display: flex;
+}
+
+.subscriptions__listitem__bullet {
+  vertical-align: top;
+  padding-right: 4px;
+}
+
 .subscriptions__product--reverse {
 	@include mq($until: tablet) {
 		padding-bottom: 30px;