Enhance PricingAddons component by bolding sub-addon labels and adjusting spacing for improved layout

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>

Author: leecalcote

src/components/Pricing/PricingAddons/index.js

@@ -411,8 +411,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly }) => {
                             return targetSubAddon?.pricing?.map((option, index) => ({
                               value: index,
                               label: (
-                                <Box sx={{ textAlign: "center", fontSize: "1.25rem" }}>
-
+                                <Box sx={{ textAlign: "center", fontSize: "1.25rem", fontWeight: "bold" }}>
                                   <Box>{option.learners === "2500+" ? "2,500+" : option.learners}</Box>
                                   <Box sx={{ color: "text.secondary", mb: 1.5, fontSize: ".9rem" }}>
                                     {option.currency}{isYearly ? option.yearlyPerUser : option.monthlyPerUser}<br />{targetSubAddon.unitLabelSingular}/{isYearly ? "year" : "month"}
@@ -422,7 +421,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly }) => {
                             })) || [];
                           })()}
                         />
-                        <Box sx={{ display: "flex", my: 5, justifyContent: "space-between" }}>
+                        <Box sx={{ display: "flex", my: 8, justifyContent: "space-between" }}>
                           <Typography variant="body2" sx={{ fontStyle: "italic", color: "text.secondary", fontFamily: "\"Qanelas Soft\", \"Open Sans\", sans-serif" }}>
                             Looking for a plan larger than 2,500 learners? Great! <a href="/company/contact">Let us know</a>.
                           </Typography>