Add Pricing Addons component with real-time pricing and features

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

Author: leecalcote

src/components/PricingAddons/AcademyIcon.js

@@ -0,0 +1,30 @@
+import React from "react";
+const AcademyIcon = ({ width = "32px", height = "32px", primaryFill, secondaryFill }) => {
+  return (
+    <svg
+      fill={primaryFill}
+      width={width}
+      height={height}
+      viewBox="0 0 22 22"
+      xmlns="http://www.w3.org/2000/svg"
+      data-name="Layer 1"
+    >
+      {/*middle-part*/}
+      <path
+        fill={secondaryFill}
+        d="M3.8,7.5v9h-1.7c-.3,0-.6.3-.6.6v.9h19.5v-.9c0-.3-.3-.6-.6-.6h-1.7V7.5h-3v9h-3V7.5h-3v9h-3V7.5h-3Z"
+      />
+      {/*bottom-part*/}
+      <path
+        fill={primaryFill}
+        d="M21.4,18.8H1.1c-.6,0-1.1.5-1.1,1.1v.8c0,.2.2.4.4.4h21.8c.2,0,.4-.2.4-.4v-.8c0-.6-.5-1.1-1.1-1.1Z"
+      />
+      {/*head-part*/}
+      <path
+        fill={primaryFill}
+        d="M22.5,4.5v.8c0,.2-.2.4-.4.4h-1.1v.6c0,.3-.3.6-.6.6H2.1c-.3,0-.6-.3-.6-.6v-.6H.4c-.2,0-.4-.2-.4-.4v-.8c0-.2,0-.3.2-.3L11.1,0c0,0,.2,0,.3,0l10.9,4.1c.1,0,.2.2.2.3Z"
+      />
+    </svg>
+  );
+};
+export default AcademyIcon;

src/components/PricingAddons/PricingAddons.style.js

@@ -0,0 +1,131 @@
+import { createTheme } from "@mui/material/styles";
+
+// Layer5 brand colors based on their design system
+export const layer5Theme = createTheme({
+  palette: {
+    primary: {
+      main: "#00B39F", // Layer5 signature green
+      light: "#00D3C7",
+      dark: "#00A08F",
+      contrastText: "#ffffff",
+    },
+    secondary: {
+      main: "#5C5C5C",
+      light: "#8A8A8A",
+      dark: "#2E2E2E",
+      contrastText: "#ffffff",
+    },
+    background: {
+      default: "#FAFAFA",
+      paper: "#ffffff",
+    },
+    text: {
+      primary: "#1A202C",
+      secondary: "#4A5568",
+    },
+    success: {
+      main: "#38A169",
+      light: "#68D391",
+      dark: "#2F855A",
+    },
+    info: {
+      main: "#00B39F",
+      light: "#00D3C7",
+      dark: "#00A08F",
+    },
+  },
+  typography: {
+    fontFamily: "\"Inter\", \"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
+    h1: {
+      fontSize: "2.5rem",
+      fontWeight: 700,
+      lineHeight: 1.2,
+    },
+    h2: {
+      fontSize: "2rem",
+      fontWeight: 600,
+      lineHeight: 1.3,
+    },
+    h3: {
+      fontSize: "1.5rem",
+      fontWeight: 600,
+      lineHeight: 1.4,
+    },
+    body1: {
+      fontSize: "1rem",
+      lineHeight: 1.5,
+    },
+    body2: {
+      fontSize: "0.875rem",
+      lineHeight: 1.5,
+    },
+  },
+  shape: {
+    borderRadius: 8,
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: "none",
+          fontWeight: 600,
+          borderRadius: 8,
+          padding: "10px 24px",
+        },
+        contained: {
+          boxShadow: "0 2px 8px rgba(0, 179, 159, 0.2)",
+          "&:hover": {
+            boxShadow: "0 4px 16px rgba(0, 179, 159, 0.3)",
+          },
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: 12,
+          boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          border: "1px solid rgba(0, 179, 159, 0.1)",
+        },
+      },
+    },
+    MuiSlider: {
+      styleOverrides: {
+        root: {
+          color: "#00B39F",
+          height: 8,
+        },
+        thumb: {
+          height: 24,
+          width: 24,
+          backgroundColor: "#00B39F",
+          border: "2px solid currentColor",
+          "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
+            boxShadow: "0 0 0 8px rgba(0, 179, 159, 0.16)",
+          },
+        },
+        track: {
+          height: 8,
+          borderRadius: 4,
+        },
+        rail: {
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: "#E2E8F0",
+        },
+      },
+    },
+    MuiSwitch: {
+      styleOverrides: {
+        switchBase: {
+          "&.Mui-checked": {
+            color: "#00B39F",
+            "& + .MuiSwitch-track": {
+              backgroundColor: "#00B39F",
+            },
+          },
+        },
+      },
+    },
+  },
+});