umwd-components 0.1.134 → 0.1.136

package/dist/cjs/components/ColumnsSection.js

@@ -16,7 +16,8 @@ function ColumnsSection(_ref) {
   } = _ref;
   const {
     column,
-    maxWidth
+    maxWidth,
+    sx = {}
   } = data;
 
   // TODO make suitable for multiple column layouts
@@ -24,7 +25,8 @@ function ColumnsSection(_ref) {
   return /*#__PURE__*/React.createElement(material.Container, {
     maxWidth: maxWidth || "lg",
     sx: {
-      my: 1
+      my: 1,
+      ...sx
     }
   }, /*#__PURE__*/React.createElement(material.Grid, {
     container: true,

package/dist/cjs/components/ContactForm.js

@@ -18,7 +18,8 @@ function ContactForm(_ref) {
     data
   } = _ref;
   const {
-    maxWidth
+    maxWidth,
+    sx = {}
   } = data;
   const [formValues, setFormValues] = React.useState({
     name: "",
@@ -129,7 +130,8 @@ function ContactForm(_ref) {
   return /*#__PURE__*/React.createElement(material.Container, {
     maxWidth: maxWidth ? maxWidth : "lg",
     sx: {
-      my: 1
+      my: 1,
+      ...sx
     }
   }, /*#__PURE__*/React.createElement(material.Stack, {
     spacing: 2,

package/dist/cjs/components/FeaturesSection.js

@@ -16,13 +16,15 @@ function FeatureSection(_ref) {
   } = _ref;
   const {
     feature,
-    maxWidth
+    maxWidth,
+    sx = {}
   } = data;
   const theme = material.useTheme();
   return /*#__PURE__*/React.createElement(material.Container, {
     maxWidth: maxWidth || "lg",
     sx: {
-      my: 1
+      my: 1,
+      ...sx
     }
   }, /*#__PURE__*/React.createElement(material.Stack, {
     spacing: 2,

package/dist/cjs/components/FleetSection.js

@@ -19,7 +19,8 @@ function FleetSection(_ref) {
   } = _ref;
   const {
     airplane,
-    maxWidth
+    maxWidth,
+    sx = {}
   } = data;
   const theme = material.useTheme();
   return /*#__PURE__*/React.createElement(material.Container, {

package/dist/cjs/components/HeroSection.js

@@ -10,7 +10,6 @@ var React = require('react');
 var Link = require('next/link');
 var material = require('@mui/material');
 var StrapiImage = require('./StrapiImage.js');
-var utils = require('../lib/utils.js');
 
 function HeroSection(_ref) {
   let {
@@ -22,10 +21,9 @@ function HeroSection(_ref) {
     bgImage,
     logoImage,
     link,
-    maxWidth
+    maxWidth,
+    sx = {}
   } = data;
-  const theme = material.useTheme();
-  const glassColor = utils.setOpacity(theme.palette.background.paper, 0.45);
   return /*#__PURE__*/React.createElement("header", {
     style: {
       position: "relative",
@@ -41,7 +39,8 @@ function HeroSection(_ref) {
       width: "100%",
       overflow: "hidden",
       minHeight: "600px",
-      py: 6
+      py: 6,
+      ...sx
     }
   }, bgImage && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
     alt: "Background",
@@ -64,9 +63,7 @@ function HeroSection(_ref) {
   }, /*#__PURE__*/React.createElement(material.Paper, {
     sx: {
       px: 2,
-      py: 7,
-      backdropFilter: "blur(4px)",
-      backgroundColor: glassColor
+      py: 2
     }
   }, /*#__PURE__*/React.createElement(material.Stack, {
     spacing: 5,

package/dist/cjs/components/IconSection.js

@@ -16,12 +16,14 @@ function IconSection(_ref) {
   } = _ref;
   const {
     icon,
-    maxWidth
+    maxWidth,
+    sx = {}
   } = data;
   return /*#__PURE__*/React.createElement(material.Container, {
     maxWidth: maxWidth || "lg",
     sx: {
-      my: 1
+      my: 1,
+      ...sx
     }
   }, /*#__PURE__*/React.createElement(material.Grid, {
     container: true,

package/dist/cjs/components/PersonaliaSection.js

@@ -20,13 +20,15 @@ function PersonaliaSection(_ref) {
   } = _ref;
   const {
     partner,
-    maxWidth
+    maxWidth,
+    sx = {}
   } = data;
   material.useTheme();
   return /*#__PURE__*/React.createElement(material.Container, {
     maxWidth: maxWidth || "lg",
     sx: {
-      my: 1
+      my: 1,
+      ...sx
     }
   }, /*#__PURE__*/React.createElement(material.Grid, {
     container: true,

package/dist/cjs/components/ScrollNavbar.js

@@ -29,7 +29,8 @@ function ScrollNavbar(_ref) {
     pages,
     tabs,
     maxWidth,
-    minHeight
+    minHeight,
+    sx = {}
   } = data;
   const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
   const [currentTab, setCurrentTab] = React.useState(0);
@@ -43,7 +44,8 @@ function ScrollNavbar(_ref) {
   return /*#__PURE__*/React.createElement(material.AppBar, {
     position: "sticky",
     sx: {
-      backgroundColor: theme.palette.primary.main
+      backgroundColor: theme.palette.primary.main,
+      ...sx
     }
   }, /*#__PURE__*/React.createElement(material.Container, {
     maxWidth: maxWidth
@@ -86,8 +88,14 @@ function ScrollNavbar(_ref) {
     }
   }, site_title) : /*#__PURE__*/React.createElement(React.Fragment, null, site_title)))), /*#__PURE__*/React.createElement(material.Box, {
     sx: {
-      display: "block",
-      width: "30px"
+      display: {
+        xs: "none",
+        md: "flex"
+      },
+      width: {
+        xs: "0px",
+        md: "30px"
+      }
     }
   }), pages && pages.length > 0 && /*#__PURE__*/React.createElement(material.Box, {
     sx: {
@@ -164,7 +172,7 @@ function ScrollNavbar(_ref) {
     height: logo.height || 32,
     alt: logo.alternativeText || "site logo",
     style: {
-      maxHeight: "60px",
+      maxHeight: "55px",
       width: "auto",
       height: "auto"
     }
@@ -244,7 +252,7 @@ function ScrollNavbar(_ref) {
     width: logo.width || 32,
     height: logo.height || 32,
     style: {
-      maxHeight: "60px",
+      maxHeight: "55px",
       width: "auto",
       height: "auto"
     }

package/dist/cjs/components/TextImageSection.js

@@ -36,17 +36,21 @@ function TextImageSection(_ref) {
     text,
     image,
     reverse = false,
-    maxWidth
+    maxWidth,
+    sx = {}
   } = data;
 
   /* TODO Text_content should deal with linebreaks,
   reading up upon mui-markdown docs is advised */
 
+  /* TODO Replace with blocks */
+
   const theme = material.useTheme();
   return /*#__PURE__*/React.createElement(material.Container, {
     maxWidth: maxWidth ? maxWidth : "lg",
     sx: {
-      my: 1
+      my: 1,
+      ...sx
     }
   }, /*#__PURE__*/React.createElement(material.Paper, {
     sx: {

package/dist/cjs/lib/utils.js

@@ -23,35 +23,6 @@ function getStrapiMedia(url) {
   if (url.startsWith("http") || url.startsWith("//")) return url;
   return "".concat(getStrapiURL()).concat(url);
 }
-function setOpacity(color, opacity) {
-  // Clamp opacity between 0 and 1
-  opacity = Math.min(Math.max(opacity, 0), 1);
-
-  // Regex to match various color formats (hex, rgb, rgba)
-  const match = color.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i);
-  if (match) {
-    // Hex color
-    const [, r, g, b, alpha = "FF"] = match;
-    return "rgba(".concat(parseInt(r, 16), ", ").concat(parseInt(g, 16), ", ").concat(parseInt(b, 16), ", ").concat(parseInt(alpha, 16) / 255 * opacity, ")");
-  } else {
-    // Parse RGB or RGBA manually
-    const rgbMatch = color.match(/^rgb\((\d+)(?:,(\d+))?(?:,(\d+))?\)$/i);
-    const rgbaMatch = color.match(/^rgba\((\d+)(?:,(\d+))?(?:,(\d+))?(?:,([.\d]+))?\)$/i);
-    if (rgbMatch) {
-      // RGB format
-      const [, red, green, blue] = rgbMatch;
-      return "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(opacity, ")");
-    } else if (rgbaMatch) {
-      // RGBA format
-      const [, red, green, blue, alpha] = rgbaMatch;
-      return "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(alpha || opacity, ")"); // Use provided opacity if alpha is missing
-    }
-  }
-
-  // If parsing fails, return original color
-  return color;
-}
 
 exports.getStrapiMedia = getStrapiMedia;
 exports.getStrapiURL = getStrapiURL;
-exports.setOpacity = setOpacity;

package/dist/esm/components/ColumnsSection.js

@@ -14,7 +14,8 @@ function ColumnsSection(_ref) {
   } = _ref;
   const {
     column,
-    maxWidth
+    maxWidth,
+    sx = {}
   } = data;
 
   // TODO make suitable for multiple column layouts
@@ -22,7 +23,8 @@ function ColumnsSection(_ref) {
   return /*#__PURE__*/React__default.createElement(Container, {
     maxWidth: maxWidth || "lg",
     sx: {
-      my: 1
+      my: 1,
+      ...sx
     }
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,

package/dist/esm/components/ContactForm.js

@@ -14,7 +14,8 @@ function ContactForm(_ref) {
     data
   } = _ref;
   const {
-    maxWidth
+    maxWidth,
+    sx = {}
   } = data;
   const [formValues, setFormValues] = React__default.useState({
     name: "",
@@ -125,7 +126,8 @@ function ContactForm(_ref) {
   return /*#__PURE__*/React__default.createElement(Container, {
     maxWidth: maxWidth ? maxWidth : "lg",
     sx: {
-      my: 1
+      my: 1,
+      ...sx
     }
   }, /*#__PURE__*/React__default.createElement(Stack, {
     spacing: 2,

package/dist/esm/components/FeaturesSection.js

@@ -14,13 +14,15 @@ function FeatureSection(_ref) {
   } = _ref;
   const {
     feature,
-    maxWidth
+    maxWidth,
+    sx = {}
   } = data;
   const theme = useTheme();
   return /*#__PURE__*/React__default.createElement(Container, {
     maxWidth: maxWidth || "lg",
     sx: {
-      my: 1
+      my: 1,
+      ...sx
     }
   }, /*#__PURE__*/React__default.createElement(Stack, {
     spacing: 2,

package/dist/esm/components/FleetSection.js

@@ -17,7 +17,8 @@ function FleetSection(_ref) {
   } = _ref;
   const {
     airplane,
-    maxWidth
+    maxWidth,
+    sx = {}
   } = data;
   const theme = useTheme();
   return /*#__PURE__*/React__default.createElement(Container, {

package/dist/esm/components/HeroSection.js

@@ -6,9 +6,8 @@
   
 import React__default from 'react';
 import Link from 'next/link';
-import { useTheme, Box, Container, Paper, Stack, Typography, Button } from '@mui/material';
+import { Box, Container, Paper, Stack, Typography, Button } from '@mui/material';
 import { StrapiImage } from './StrapiImage.js';
-import { setOpacity } from '../lib/utils.js';
 
 function HeroSection(_ref) {
   let {
@@ -20,10 +19,9 @@ function HeroSection(_ref) {
     bgImage,
     logoImage,
     link,
-    maxWidth
+    maxWidth,
+    sx = {}
   } = data;
-  const theme = useTheme();
-  const glassColor = setOpacity(theme.palette.background.paper, 0.45);
   return /*#__PURE__*/React__default.createElement("header", {
     style: {
       position: "relative",
@@ -39,7 +37,8 @@ function HeroSection(_ref) {
       width: "100%",
       overflow: "hidden",
       minHeight: "600px",
-      py: 6
+      py: 6,
+      ...sx
     }
   }, bgImage && /*#__PURE__*/React__default.createElement(StrapiImage, {
     alt: "Background",
@@ -62,9 +61,7 @@ function HeroSection(_ref) {
   }, /*#__PURE__*/React__default.createElement(Paper, {
     sx: {
       px: 2,
-      py: 7,
-      backdropFilter: "blur(4px)",
-      backgroundColor: glassColor
+      py: 2
     }
   }, /*#__PURE__*/React__default.createElement(Stack, {
     spacing: 5,

package/dist/esm/components/IconSection.js

@@ -14,12 +14,14 @@ function IconSection(_ref) {
   } = _ref;
   const {
     icon,
-    maxWidth
+    maxWidth,
+    sx = {}
   } = data;
   return /*#__PURE__*/React__default.createElement(Container, {
     maxWidth: maxWidth || "lg",
     sx: {
-      my: 1
+      my: 1,
+      ...sx
     }
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,

package/dist/esm/components/PersonaliaSection.js

@@ -18,13 +18,15 @@ function PersonaliaSection(_ref) {
   } = _ref;
   const {
     partner,
-    maxWidth
+    maxWidth,
+    sx = {}
   } = data;
   useTheme();
   return /*#__PURE__*/React__default.createElement(Container, {
     maxWidth: maxWidth || "lg",
     sx: {
-      my: 1
+      my: 1,
+      ...sx
     }
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,

package/dist/esm/components/ScrollNavbar.js

@@ -25,7 +25,8 @@ function ScrollNavbar(_ref) {
     pages,
     tabs,
     maxWidth,
-    minHeight
+    minHeight,
+    sx = {}
   } = data;
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
   const [currentTab, setCurrentTab] = useState(0);
@@ -39,7 +40,8 @@ function ScrollNavbar(_ref) {
   return /*#__PURE__*/React__default.createElement(AppBar, {
     position: "sticky",
     sx: {
-      backgroundColor: theme.palette.primary.main
+      backgroundColor: theme.palette.primary.main,
+      ...sx
     }
   }, /*#__PURE__*/React__default.createElement(Container, {
     maxWidth: maxWidth
@@ -82,8 +84,14 @@ function ScrollNavbar(_ref) {
     }
   }, site_title) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, site_title)))), /*#__PURE__*/React__default.createElement(Box, {
     sx: {
-      display: "block",
-      width: "30px"
+      display: {
+        xs: "none",
+        md: "flex"
+      },
+      width: {
+        xs: "0px",
+        md: "30px"
+      }
     }
   }), pages && pages.length > 0 && /*#__PURE__*/React__default.createElement(Box, {
     sx: {
@@ -160,7 +168,7 @@ function ScrollNavbar(_ref) {
     height: logo.height || 32,
     alt: logo.alternativeText || "site logo",
     style: {
-      maxHeight: "60px",
+      maxHeight: "55px",
       width: "auto",
       height: "auto"
     }
@@ -240,7 +248,7 @@ function ScrollNavbar(_ref) {
     width: logo.width || 32,
     height: logo.height || 32,
     style: {
-      maxHeight: "60px",
+      maxHeight: "55px",
       width: "auto",
       height: "auto"
     }

package/dist/esm/components/TextImageSection.js

@@ -32,17 +32,21 @@ function TextImageSection(_ref) {
     text,
     image,
     reverse = false,
-    maxWidth
+    maxWidth,
+    sx = {}
   } = data;
 
   /* TODO Text_content should deal with linebreaks,
   reading up upon mui-markdown docs is advised */
 
+  /* TODO Replace with blocks */
+
   const theme = useTheme();
   return /*#__PURE__*/React__default.createElement(Container, {
     maxWidth: maxWidth ? maxWidth : "lg",
     sx: {
-      my: 1
+      my: 1,
+      ...sx
     }
   }, /*#__PURE__*/React__default.createElement(Paper, {
     sx: {

package/dist/esm/lib/utils.js

@@ -21,33 +21,5 @@ function getStrapiMedia(url) {
   if (url.startsWith("http") || url.startsWith("//")) return url;
   return "".concat(getStrapiURL()).concat(url);
 }
-function setOpacity(color, opacity) {
-  // Clamp opacity between 0 and 1
-  opacity = Math.min(Math.max(opacity, 0), 1);
 
-  // Regex to match various color formats (hex, rgb, rgba)
-  const match = color.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i);
-  if (match) {
-    // Hex color
-    const [, r, g, b, alpha = "FF"] = match;
-    return "rgba(".concat(parseInt(r, 16), ", ").concat(parseInt(g, 16), ", ").concat(parseInt(b, 16), ", ").concat(parseInt(alpha, 16) / 255 * opacity, ")");
-  } else {
-    // Parse RGB or RGBA manually
-    const rgbMatch = color.match(/^rgb\((\d+)(?:,(\d+))?(?:,(\d+))?\)$/i);
-    const rgbaMatch = color.match(/^rgba\((\d+)(?:,(\d+))?(?:,(\d+))?(?:,([.\d]+))?\)$/i);
-    if (rgbMatch) {
-      // RGB format
-      const [, red, green, blue] = rgbMatch;
-      return "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(opacity, ")");
-    } else if (rgbaMatch) {
-      // RGBA format
-      const [, red, green, blue, alpha] = rgbaMatch;
-      return "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(alpha || opacity, ")"); // Use provided opacity if alpha is missing
-    }
-  }
-
-  // If parsing fails, return original color
-  return color;
-}
-
-export { getStrapiMedia, getStrapiURL, setOpacity };
+export { getStrapiMedia, getStrapiURL };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.134",
+  "version": "0.1.136",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/ColumnsSection.tsx

@@ -9,6 +9,7 @@ import {
   Paper,
 } from "@mui/material";
 import getIcon from "../lib/getIcon.ts";
+import { SxProps, Theme } from "@mui/material/styles";
 
 type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
 
@@ -26,6 +27,7 @@ interface ColumnsSectionProps {
   description: string;
   column: ColumnProps[];
   maxWidth: MaxWidth;
+  sx?: SxProps<Theme>;
 }
 
 export function ColumnsSection({
@@ -33,12 +35,12 @@ export function ColumnsSection({
 }: {
   readonly data: ColumnsSectionProps;
 }) {
-  const { column, maxWidth } = data;
+  const { column, maxWidth, sx = {} } = data;
 
   // TODO make suitable for multiple column layouts
 
   return (
-    <Container maxWidth={maxWidth || "lg"} sx={{ my: 1 }}>
+    <Container maxWidth={maxWidth || "lg"} sx={{ my: 1, ...sx }}>
       <Grid container spacing={2}>
         {column.map((column) => {
           const Icon = getIcon(column.icon) as React.ElementType | null;

package/src/components/ContactForm.tsx

@@ -12,6 +12,7 @@ import {
   Button,
 } from "@mui/material";
 import isEmail from "validator/lib/isEmail";
+import { SxProps, Theme } from "@mui/material/styles";
 
 type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
 
@@ -20,10 +21,11 @@ interface ContactFormProps {
   __component: string;
   title: string;
   maxWidth: MaxWidth;
+  sx?: SxProps<Theme>;
 }
 
 function ContactForm({ data }: { readonly data: ContactFormProps }) {
-  const { maxWidth } = data;
+  const { maxWidth, sx = {} } = data;
 
   type FormValues = {
     name: string;
@@ -149,7 +151,7 @@ function ContactForm({ data }: { readonly data: ContactFormProps }) {
   };
 
   return (
-    <Container maxWidth={maxWidth ? maxWidth : "lg"} sx={{ my: 1 }}>
+    <Container maxWidth={maxWidth ? maxWidth : "lg"} sx={{ my: 1, ...sx }}>
       <Stack spacing={2} sx={{ width: "100%" }}>
         <Typography variant="h6" align="center">
           Write us

package/src/components/FeaturesSection.tsx

@@ -11,6 +11,7 @@ import {
   useTheme,
 } from "@mui/material";
 import getIcon from "../lib/getIcon.ts";
+import { SxProps, Theme } from "@mui/material/styles";
 
 type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
 
@@ -29,6 +30,7 @@ interface FeatureSectionProps {
   description: string;
   feature: FeatureProps[];
   maxWidth: MaxWidth;
+  sx?: SxProps<Theme>;
 }
 
 export function FeatureSection({
@@ -36,12 +38,12 @@ export function FeatureSection({
 }: {
   readonly data: FeatureSectionProps;
 }) {
-  const { feature, maxWidth } = data;
+  const { feature, maxWidth, sx = {} } = data;
 
   const theme = useTheme();
 
   return (
-    <Container maxWidth={maxWidth || "lg"} sx={{ my: 1 }}>
+    <Container maxWidth={maxWidth || "lg"} sx={{ my: 1, ...sx }}>
       <Stack
         spacing={2}
         direction={"row"}

package/src/components/FleetSection.tsx

@@ -16,6 +16,7 @@ import { StrapiImage } from "./StrapiImage.tsx";
 import RadarIcon from "@mui/icons-material/Radar";
 import SpeedIcon from "@mui/icons-material/Speed";
 import HeightIcon from "@mui/icons-material/Height";
+import { SxProps, Theme } from "@mui/material/styles";
 
 type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
 
@@ -48,10 +49,11 @@ interface FleetSectionProps {
   description: string;
   airplane: AirplaneProps[];
   maxWidth: MaxWidth;
+  sx?: SxProps<Theme>;
 }
 
 export function FleetSection({ data }: { readonly data: FleetSectionProps }) {
-  const { airplane, maxWidth } = data;
+  const { airplane, maxWidth, sx = {} } = data;
 
   const theme = useTheme();
 

package/src/components/HeroSection.tsx

@@ -10,7 +10,7 @@ import {
   useTheme,
 } from "@mui/material";
 import { StrapiImage } from "./StrapiImage.tsx";
-import { setOpacity } from "../lib/utils.ts";
+import { SxProps, Theme } from "@mui/material/styles";
 
 interface ImageProps {
   id: number;
@@ -37,15 +37,20 @@ interface HeroSectionProps {
     logoImage?: ImageProps;
     link: LinkProps;
     maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
+    sx?: SxProps<Theme>;
   };
 }
 
 export function HeroSection({ data }: Readonly<HeroSectionProps>) {
-  const { heading, subHeading, bgImage, logoImage, link, maxWidth } = data;
-
-  const theme = useTheme();
-
-  const glassColor = setOpacity(theme.palette.background.paper, 0.45);
+  const {
+    heading,
+    subHeading,
+    bgImage,
+    logoImage,
+    link,
+    maxWidth,
+    sx = {},
+  } = data;
 
   return (
     <header style={{ position: "relative", padding: 0, margin: 0 }}>
@@ -59,6 +64,7 @@ export function HeroSection({ data }: Readonly<HeroSectionProps>) {
           overflow: "hidden",
           minHeight: "600px",
           py: 6,
+          ...sx,
         }}
       >
         {bgImage && (
@@ -80,9 +86,7 @@ export function HeroSection({ data }: Readonly<HeroSectionProps>) {
           <Paper
             sx={{
               px: 2,
-              py: 7,
-              backdropFilter: "blur(4px)",
-              backgroundColor: glassColor,
+              py: 2,
             }}
           >
             <Stack spacing={5} alignItems="center" justifyContent="center">

package/src/components/IconSection.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Grid, Card, CardContent, Typography, Container } from "@mui/material";
 import getIcon from "../lib/getIcon.ts";
+import { SxProps, Theme } from "@mui/material/styles";
 
 type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
 
@@ -18,13 +19,14 @@ interface IconSectionProps {
   description: string;
   icon: IconProps[];
   maxWidth: MaxWidth;
+  sx?: SxProps<Theme>;
 }
 
 export function IconSection({ data }: { readonly data: IconSectionProps }) {
-  const { icon, maxWidth } = data;
+  const { icon, maxWidth, sx = {} } = data;
 
   return (
-    <Container maxWidth={maxWidth || "lg"} sx={{ my: 1 }}>
+    <Container maxWidth={maxWidth || "lg"} sx={{ my: 1, ...sx }}>
       <Grid container spacing={2}>
         {icon.map((icon) => {
           const Icon = getIcon(icon.icon) as React.ElementType | null;

package/src/components/PersonaliaSection.tsx

@@ -16,6 +16,7 @@ import { Email, LinkedIn } from "@mui/icons-material";
 import { BlockRendererClient } from "./BlockRendererClient.tsx";
 import { type BlocksContent } from "@strapi/blocks-react-renderer";
 import { MuiLink } from "./MuiLink.tsx";
+import { SxProps, Theme } from "@mui/material/styles";
 
 type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
 
@@ -53,6 +54,7 @@ interface PersonaliaSectionProps {
   description: string;
   partner?: PartnerProps[];
   maxWidth: MaxWidth;
+  sx?: SxProps<Theme>;
 }
 
 export function PersonaliaSection({
@@ -60,12 +62,12 @@ export function PersonaliaSection({
 }: {
   readonly data: PersonaliaSectionProps;
 }) {
-  const { partner, maxWidth } = data;
+  const { partner, maxWidth, sx = {} } = data;
 
   const theme = useTheme();
 
   return (
-    <Container maxWidth={maxWidth || "lg"} sx={{ my: 1 }}>
+    <Container maxWidth={maxWidth || "lg"} sx={{ my: 1, ...sx }}>
       <Grid container spacing={2}>
         {partner &&
           partner.map((partner) => {

package/src/components/ScrollNavbar.tsx

@@ -23,6 +23,7 @@ import CloseIcon from "@mui/icons-material/Close";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import ScrollLink from "./ScrollLink.tsx";
 import { type ReactNode } from "react";
+import { SxProps, Theme } from "@mui/material/styles";
 
 interface ImageProps {
   id: number;
@@ -55,10 +56,11 @@ interface NavbarProps {
   tabs: TabInfo[];
   maxWidth: MaxWidth;
   minHeight: string;
+  sx?: SxProps<Theme>;
 }
 
 function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
-  const { site_title, logo, pages, tabs, maxWidth, minHeight } = data;
+  const { site_title, logo, pages, tabs, maxWidth, minHeight, sx = {} } = data;
 
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
   const [currentTab, setCurrentTab] = useState(0);
@@ -76,7 +78,7 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
   return (
     <AppBar
       position="sticky"
-      sx={{ backgroundColor: theme.palette.primary.main }}
+      sx={{ backgroundColor: theme.palette.primary.main, ...sx }}
     >
       <Container maxWidth={maxWidth}>
         <Toolbar
@@ -132,7 +134,12 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
             </Box>
           </ScrollLink>
 
-          <Box sx={{ display: "block", width: "30px" }}></Box>
+          <Box
+            sx={{
+              display: { xs: "none", md: "flex" },
+              width: { xs: "0px", md: "30px" },
+            }}
+          ></Box>
 
           {/* Large screen menu */}
           {pages && pages.length > 0 && (
@@ -206,7 +213,7 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
                     width={logo.width || 32}
                     height={logo.height || 32}
                     alt={logo.alternativeText || "site logo"}
-                    style={{ maxHeight: "60px", width: "auto", height: "auto" }}
+                    style={{ maxHeight: "55px", width: "auto", height: "auto" }}
                   />
                 </Box>
               )}
@@ -275,7 +282,7 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
                             width={logo.width || 32}
                             height={logo.height || 32}
                             style={{
-                              maxHeight: "60px",
+                              maxHeight: "55px",
                               width: "auto",
                               height: "auto",
                             }}

package/src/components/TextImageSection.tsx

@@ -13,6 +13,7 @@ const MuiMarkdown = React.lazy(
   () => import(/* webpackChunkName: "mui-markdown" */ "mui-markdown")
 );
 import { StrapiImage } from "./StrapiImage.tsx";
+import { SxProps, Theme } from "@mui/material/styles";
 
 /* 
 TODO intregrate this interface into StrapiImage.tsx
@@ -26,6 +27,8 @@ interface ImageProps {
   height: number;
 } */
 
+type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
+
 interface TextImageSectionProps {
   data: {
     title: string;
@@ -37,21 +40,24 @@ interface TextImageSectionProps {
       alt: string;
     };
     reverse: boolean;
-    maxWidth: any;
+    maxWidth?: MaxWidth;
     minHeight: string;
+    sx?: SxProps<Theme>;
   };
 }
 
 function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
-  const { title, text, image, reverse = false, maxWidth } = data;
+  const { title, text, image, reverse = false, maxWidth, sx = {} } = data;
 
   /* TODO Text_content should deal with linebreaks,
   reading up upon mui-markdown docs is advised */
 
+  /* TODO Replace with blocks */
+
   const theme = useTheme();
 
   return (
-    <Container maxWidth={maxWidth ? maxWidth : "lg"} sx={{ my: 1 }}>
+    <Container maxWidth={maxWidth ? maxWidth : "lg"} sx={{ my: 1, ...sx }}>
       <Paper sx={{ p: 2 }}>
         {title && (
           <Typography variant="h1" textAlign="center" sx={{ pb: 2 }}>

package/src/stories/Page.stories.js

@@ -177,7 +177,7 @@ AMH.args = {
         alternativeText: null,
         width: 3841,
         height: 2161,
-        url: "/uploads/dm_masked_2x_3eabdcd56c.png",
+        url: "/uploads/desktop_wallpaper_0_5x_e910597d02.png",
       },
       logoImage: {
         id: 9,
@@ -188,6 +188,14 @@ AMH.args = {
         url: "/uploads/Asset_2_c4a9c4a5d1.png",
       },
       link: { id: 1, url: "/contact", text: "Contact us", isExternal: false },
+      sx: {
+        ".MuiPaper-root": {
+          py: 7,
+          backdropFilter: "blur(3px)",
+          backgroundColor: "rgba(255, 255, 255, 0.15)",
+          border: "1px solid rgba(255, 255, 255, 0.15)",
+        },
+      },
     },
     {
       id: 2,