From 63bef06a227394fb7b57764d699b5a3ecdd69880 Mon Sep 17 00:00:00 2001
From: Kulpreet Singh <32346671+kulpreets@users.noreply.github.com>
Date: Thu, 27 Jun 2024 12:09:52 +1000
Subject: [PATCH] Added section header

---
 ui/src/pages/About/components/Features.tsx | 107 +++++++++++----------
 1 file changed, 56 insertions(+), 51 deletions(-)

diff --git a/ui/src/pages/About/components/Features.tsx b/ui/src/pages/About/components/Features.tsx
index 95210eb9..f72a9fcd 100644
--- a/ui/src/pages/About/components/Features.tsx
+++ b/ui/src/pages/About/components/Features.tsx
@@ -1,62 +1,67 @@
 import { FC } from "react";
-import { Card, Space, Tag } from "antd";
+import {List, Card, Space, Tag } from "antd";
 import { FEATURE_DATA } from "data/featureData";
 import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
 import { Carousel } from "react-responsive-carousel";
 
 const Features: FC = () => {
 	return (
-		<Carousel autoPlay={true} infiniteLoop={true}>
-			{FEATURE_DATA.filter((feature) => !feature.in_progress).map(
-				(feature, index) => (
-					<Card
-						bordered={false}
-						key={feature.key}
-						title={
-							<a
-								href={feature.link}
-								target="_blank"
-								rel="noopener noreferrer"
+
+		<List header={<div>Features</div>} bordered>
+			<List.Item>
+				<Carousel autoPlay={true} infiniteLoop={true}>
+					{FEATURE_DATA.filter((feature) => !feature.in_progress).map(
+						(feature, index) => (
+							<Card
+								bordered={false}
+								key={feature.key}
+								title={
+									<a
+										href={feature.link}
+										target="_blank"
+										rel="noopener noreferrer"
+									>
+										<h5>
+											{index} - {feature.name}
+										</h5>
+									</a>
+								}
+								actions={[
+									<Space key={feature.key}>
+										{feature.library.map((lib) => {
+											return (
+												<a
+													key={lib.url}
+													href={lib.url}
+													target="_blank"
+													rel="noopener noreferrer"
+												>
+													<Tag
+														color={
+															lib.name === "Vanilla JS"
+																? "green"
+																: "gold"
+														}
+													>
+														{lib.name}
+													</Tag>
+												</a>
+											);
+										})}
+									</Space>,
+								]}
 							>
-								<h5>
-									{index} - {feature.name}
-								</h5>
-							</a>
-						}
-						actions={[
-							<Space key={feature.key}>
-								{feature.library.map((lib) => {
-									return (
-										<a
-											key={lib.url}
-											href={lib.url}
-											target="_blank"
-											rel="noopener noreferrer"
-										>
-											<Tag
-												color={
-													lib.name === "Vanilla JS"
-														? "green"
-														: "gold"
-												}
-											>
-												{lib.name}
-											</Tag>
-										</a>
-									);
-								})}
-							</Space>,
-						]}
-					>
-						{feature.fullDescription.length > 0
-							? feature.fullDescription
-							: feature.shortDescription}
-						<br />
-						<br />
-					</Card>
-				)
-			)}
-		</Carousel>
+								{feature.fullDescription.length > 0
+									? feature.fullDescription
+									: feature.shortDescription}
+								<br />
+								<br />
+							</Card>
+						)
+					)}
+				</Carousel>
+			</List.Item>
+		</List>
 	);
 };