Merge branch 'master' into addon-bug

Author: Namanv0509

src/collections/events/2025/hacktoberfest-2025/index.mdx

@@ -0,0 +1,46 @@
+---
+title: "Hacktoberfest Prep 2025: Design with Meshery"
+description: "Prepare for Hacktoberfest with Layer5 MeshMates and Maintainers. Join seasoned open source maintainers, hack through easy issues, and grow your skills. Discover Newcomers resources and explore the Layer5 Community Handbook."
+thumbnail: 
+darkthumbnail: 
+date: 2025-00-03
+eurl: 
+type: Event
+speakers: []
+published: false
+upcoming: true
+register: true
+---
+
+import { Link } from "gatsby" ;
+// import preptemberslides from "./hacktoberfest-prep-2024-extending-meshery-models.pdf"
+import hacktoberfestBadge from "./layer5-hacktoberfest11-badge-large.png";
+
+<p>
+<Link to="/programs/hacktoberfest">Hacktoberfest</Link> is just around the corner. You'd be surprised to know how small changes can make a big impact on a project. The more a project scales, the easier it is for small errors to live within it. You can make a real difference by fixing these relatively easier issues and continue to grow from there.
+</p>
+
+<p>As in years past, Layer5 has a number of different projects and a variety of technologies for participants to choose from.  Our Hacktoberfest theme for 2025 will focus Design w. <Link to="/cloud-native-management/meshery">Meshery</Link> is an extensible, self-service platform for collaborative infrastructure management. Be sure to understand the <Link to="/blog/meshery/comparing-meshery-models-and-meshery-designs">difference between Meshery Models and Meshery Designs</Link>. The Meshery project is looking for contributors to extend these models to support new cloud native infrastructure and their features.</p>
+
+<p>
+Prepare for Hacktoberfest and ready yourself for contributing to CNCF projects the easy way with Layer5 <Link to="/community/meshmates">MeshMates</Link> and Maintainers. Spend an hour with seasoned, open source maintainers and hack your way through. To get a head start, see our <Link to="/community/newcomers">Newcomers Resources</Link>. Get familiar with the Layer5 community through our <Link to="/community/handbook">Community Handbook</Link>.
+</p>
+
+<h3>Earn a Badge </h3> 
+<p>Earn a Hacktoberfest Contributor badge by contributing to Layer5 projects during this Hacktoberfest.</p>
+<img src={hacktoberfestBadge} style="width: 250px"/>
+
+<ul>
+    <li><strong>DATE:</strong>October 3, 2025</li>
+    <li><strong>TIME:</strong>9AM CT | 3PM WAT | 7:30PM IST</li>
+    {/* <li><strong>LIVESTREAM:</strong> <a href="https://www.youtube.com/watch?v=iKe52yMWWK4">YouTube</a></li> */}
+</ul>
+
+<p> Resources:</p>
+{/*
+<ul>
+    <li><Link to="/blog/open-source/ways-to-contribute-at-layer5">Code and Non-Code Contributing at Layer5</Link></li>
+    <li><a href="https://github.com/issues?q=is%3Aopen+is%3Aissue+archived%3Afalse+org%3Alayer5io+org%3Ameshery+org%3Aservice-mesh-performance+org%3Aservice-mesh-patterns+label%3A%22hacktoberfest%22+">Issues for Hacktoberfest</a></li>
+    <li><a href="https://www.youtube.com/watch?v=iKe52yMWWK4">Recorded Livestream</a></li>
+    <li><a href={preptemberslides}>Presentation Slides</a></li>
+</ul> */}

src/collections/events/2025/hacktoberfest-2025/layer5-hacktoberfest11-badge-large.png

@@ -177,7 +177,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly ,currency,enterpri
       const enterpriseUserSeats = enterpriseUsers > 0 ? ` and ${enterpriseUsers} enterprise user${enterpriseUsers > 1 ? "s" : ""}` : "";
       return {
         link: matchingPlanLink.link,
-        name: `Subscribe (${currentLearnerCount} learners${targetSubAddonName ? " " + targetSubAddonName : ""}${enterpriseUserSeats})`
+        name: "Subscribe For Add-on"
       };
     }
 
@@ -191,7 +191,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly ,currency,enterpri
 
     return {
       link: "#",
-      name: `Subscribe to ${selectedAddon.name}`
+      name: "Subscribe For Add-on"
     };
   };
 
@@ -361,7 +361,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly ,currency,enterpri
                               const option = targetSubAddon.pricing[value];
                               const pricePerUser = isYearly ? option.yearlyPerUser : option.monthlyPerUser;
                               const totalPrice = pricePerUser * option.learners;
-                              const period = isYearly ? "/month" : "/month";
+                              const period = isYearly ? "/year" : "/month";
                               return `${option.learners} learners - ${formatPrice(totalPrice)}${period}`;
                             }
                             return "";
@@ -409,7 +409,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly ,currency,enterpri
                           })()}
                         />
                         <Box sx={boxStyles.disclaimerSection}>
-                          <Typography variant="body2" sx={typographyStyles.italic}>
+                          <Typography variant="body2" sx={typographyStyles.italic }>
                             Looking for a plan larger than 2,500 learners? Great! <a href="/company/contact">Let us know</a>.
                           </Typography>
                         </Box>
@@ -420,39 +420,48 @@ export const PricingAddons = ({ isYearly = false, setIsYearly ,currency,enterpri
                   {selectedAddon !== null && selectedAddon.id !== "academy" && (
                     <>
                       <Box sx={boxStyles.unitQuantitySection}>
-                        <Typography variant="h6" fontWeight="600" sx={boxStyles.unitQuantityTitle}>
+                        <Typography variant="h6" sx={boxStyles.unitQuantityTitle}>
                           {selectedAddon.pricing?.[quantityIndex]?.units || 0} {selectedAddon?.unitLabel}
                         </Typography>
                         <Slider
-                          value={quantityIndex}
-                          onChange={(event, newValue) => setQuantityIndex(newValue)}
-                          min={0}
-                          max={selectedAddon?.pricing?.length - 1 || 0}
-                          step={null}
-                          valueLabelDisplay="auto"
-                          valueLabelFormat={(value) => {
-                            if (selectedAddon?.pricing && selectedAddon.pricing[value]) {
-                              const option = selectedAddon.pricing[value];
-                              const unitPrice = isYearly ? option.yearlyPerUnit : option.monthlyPerUnit;
-                              const totalPrice = unitPrice * option.units;
-                              const period = isYearly ? "/year" : "/month";
-                              return `${option.units} ${selectedAddon?.unitLabel?.slice(0, -1) || "unit"} - ${formatPrice(totalPrice)}${period}`;
-                            }
-                            return "";
-                          }}
-                          sx={getSliderStyle(sliderStyles.baseOther, "14px")}
-                          marks={selectedAddon?.pricing?.map((option, index) => ({
-                            value: index,
-                            label: (
-                              <Box sx={boxStyles.sliderMarks}>
-                                <Box>{option.units}</Box>
-                                <Box sx={boxStyles.sliderPriceText}>
-                                  {formatPrice(isYearly ? option.yearlyPerUnit * option.units : option.monthlyPerUnit * option.units)}
+                            value={quantityIndex}
+                            onChange={(event, newValue) => setQuantityIndex(newValue)}
+                            min={0}
+                            valueLabelDisplay="auto"
+                            valueLabelFormat={(value) => {
+                              const option = selectedAddon?.pricing?.[value];
+                              if (option) {
+                                const pricePerUnit = isYearly ? option.yearlyPerUnit : option.monthlyPerUnit;
+                                const totalPrice = pricePerUnit * option.units;
+                                const period = isYearly ? "/year" : "/month";
+                                return `${option.units} ${selectedAddon.unitLabel?.slice(0, -1) || "unit"} - ${formatPrice(totalPrice)}${period}`;
+                              }
+                              return "";
+                            }}
+                            max={(selectedAddon?.pricing?.length - 1) || 0}
+                            step={null}
+                            sx={getSliderStyle(sliderStyles.baseOther, "1rem")} // ← use same style as academy
+                            marks={selectedAddon?.pricing?.map((option, index) => ({
+                              value: index,
+                              label: (
+                                <Box sx={{ textAlign: "center", fontSize: "1.25rem", fontWeight: "bold" }}>
+                                  <Box>{option.units}</Box>
+                                  <Box
+                                    sx={{
+                                      color: "text.secondary",
+                                      mb: 1.5,
+                                      fontSize: {
+                                        xs: "0.75rem",
+                                        sm: "0.9rem",
+                                      }
+                                    }}>
+                                    {formatPrice(isYearly ? option.yearlyPerUnit : option.monthlyPerUnit)}<br />{selectedAddon.unitLabel?.slice(0, -1) || "unit"}/{isYearly ? "year" : "month"}
+                                  </Box>
                                 </Box>
-                              </Box>
-                            ),
-                          })) || []}
-                        />
+                              )
+                            }))}
+                          />
+
                       </Box>
                     </>
                   )}
@@ -468,7 +477,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly ,currency,enterpri
               >
                 <Box sx={{ ...boxStyles.flexBetween, ...boxStyles.pricingHeader }}>
                   <Typography variant="h6" sx={typographyStyles.subheading} gutterBottom>
-                    Add-on  ×  Quantity per Subscription Duration
+                    Add-on  ×  Quantity / per Subscription Duration
                   </Typography>
                   <Typography variant="h6" sx={typographyStyles.subheading} gutterBottom>
                     SUBTOTAL
@@ -552,9 +561,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly ,currency,enterpri
                       {formatPrice((isYearly ? enterprisePlan.yearlyprice : enterprisePlan.monthlyprice) * (enterpriseUsers > 0 ? enterpriseUsers : 1))}/{isYearly ? "monthly" : "yearly"}
                     </Typography>
                   </Box>
-                  <Typography variant="h6" sx={typographyStyles.subheading} gutterBottom>
-                    TOTAL
-                  </Typography>
+
                   <Box sx={boxStyles.flexBetween}>
                     <Typography variant="body1" gutterBottom sx={typographyStyles.subheading}>
                       {isYearly ? "Yearly" : "Monthly"} Cost

src/collections/members/gopi-vaibhav/gopi-vaibhav.webp

@@ -70,8 +70,8 @@ export const getAddOns = () => [
     monthlyPrice: 64,
     yearlyPrice: 653, // ~15% discount for yearly
     iconType: "cloud", // Reference to icon type instead of component
-    unitLabel: "servers",
-    unitLabelSingular: "server",
+    unitLabel: "Servers",
+    unitLabelSingular: "Server",
     maxUnits: 50,
     pricing: [
       { units: 1, monthlyPerUnit: 64, yearlyPerUnit: 54.40, currency: "$" },
@@ -87,8 +87,8 @@ export const getAddOns = () => [
     monthlyPrice: 1.50,
     yearlyPrice: 15.30, // ~15% discount for yearly
     iconType: "group", // Reference to icon type instead of component
-    unitLabel: "collaborators",
-    unitLabelSingular: "collaborator",
+    unitLabel: "Collaborators",
+    unitLabelSingular: "Collaborator",
     maxUnits: 200,
     pricing: [
       { units: 1, monthlyPerUnit: 2, yearlyPerUnit: 1.70, currency: "$" },

src/collections/members/gopi-vaibhav/index.mdx

@@ -24,7 +24,8 @@ export const typographyStyles = {
   italic: {
     fontFamily: QANELAS_FONT,
     fontStyle: "italic",
-    color: "text.secondary"
+    color: "text.secondary",
+    marginTop: 5
   },
   headerTitle: {
     fontSize: 16,
@@ -53,7 +54,9 @@ export const typographyStyles = {
     fontSize: "0.8rem",
     fontStyle: "italic",
     fontFamily: QANELAS_FONT,
-    color: "text.secondary"
+    color: "text.secondary",
+    marginTop: 5,
+    marginBottom: 5,
   },
   pricingItemLeft: {
     marginLeft: 0.5,
@@ -192,8 +195,10 @@ export const boxStyles = {
     justifyContent: "center"
   },
   unitQuantityTitle: {
-    fontSize: "1rem",
-    mb: 1
+    justifySelf: "center",
+    textAlign: "center",
+    width: "100%",
+    fontFamily: QANELAS_FONT
   },
   pricingPaper: {
     p: 2.5,
@@ -217,7 +222,7 @@ export const boxStyles = {
     alignItems: "center"
   },
   enterpriseUserInput: {
-    width: "5rem",
+    width: "4rem",
     ml: 1,
     "& .MuiInputBase-input": {
       py: "0.25rem"
@@ -284,8 +289,8 @@ export const sliderStyles = {
     justifyContent: "center"
   },
   baseOther: {
-    mb: 4,
-    ml: 6,
+    mb: 6,
+    ml: 7,
     width: "80%",
     display: "flex",
     justifyContent: "center"