umwd-components 0.1.95 → 0.1.97

package/dist/cjs/components/HeroSection.js

@@ -10,6 +10,7 @@ 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 {
@@ -20,8 +21,12 @@ function HeroSection(_ref) {
     subHeading,
     bgImage,
     logoImage,
-    link
+    link,
+    maxWidth
   } = data;
+  const theme = material.useTheme();
+  console.log(theme.palette.background.paper);
+  const glassColor = utils.setOpacity(theme.palette.background.paper, 0.45);
   return /*#__PURE__*/React.createElement("header", {
     style: {
       position: "relative",
@@ -36,7 +41,8 @@ function HeroSection(_ref) {
       justifyContent: "center",
       width: "100%",
       overflow: "hidden",
-      minHeight: "600px"
+      minHeight: "600px",
+      py: 6
     }
   }, bgImage && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
     alt: "Background",
@@ -50,26 +56,36 @@ function HeroSection(_ref) {
     height: bgImage.height || 1080,
     src: bgImage.url,
     width: bgImage.width || 1920
-  }), /*#__PURE__*/React.createElement(material.Stack, {
-    spacing: 2,
-    alignItems: "center",
-    justifyContent: "center",
+  }), /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth || "lg",
     sx: {
-      width: "max-content",
-      maxWidth: "600px",
+      my: 1,
       zIndex: 1
     }
+  }, /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      px: 2,
+      py: 7,
+      backdropFilter: "blur(4px)",
+      backgroundColor: glassColor
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 5,
+    alignItems: "center",
+    justifyContent: "center"
   }, logoImage && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
     alt: logoImage.alternativeText,
     height: logoImage.height || 100,
     src: logoImage.url,
     width: logoImage.width || 100
   }), /*#__PURE__*/React.createElement(material.Typography, {
-    variant: "h1",
-    align: "center"
+    variant: "h2",
+    align: "center",
+    component: "h1"
   }, heading), /*#__PURE__*/React.createElement(material.Typography, {
-    variant: "body1",
-    align: "center"
+    variant: "h4",
+    align: "center",
+    component: "h2"
   }, subHeading), /*#__PURE__*/React.createElement(Link, {
     href: link.url
   }, /*#__PURE__*/React.createElement(material.Button, {
@@ -78,7 +94,7 @@ function HeroSection(_ref) {
       width: "100%",
       fontSize: "1.5rem"
     }
-  }, link.text)))));
+  }, link.text)))))));
 }
 
 exports.HeroSection = HeroSection;

package/dist/cjs/lib/utils.js

@@ -23,6 +23,35 @@ 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/HeroSection.js

@@ -6,8 +6,9 @@
   
 import React__default from 'react';
 import Link from 'next/link';
-import { Box, Stack, Typography, Button } from '@mui/material';
+import { useTheme, Box, Container, Paper, Stack, Typography, Button } from '@mui/material';
 import { StrapiImage } from './StrapiImage.js';
+import { setOpacity } from '../lib/utils.js';
 
 function HeroSection(_ref) {
   let {
@@ -18,8 +19,12 @@ function HeroSection(_ref) {
     subHeading,
     bgImage,
     logoImage,
-    link
+    link,
+    maxWidth
   } = data;
+  const theme = useTheme();
+  console.log(theme.palette.background.paper);
+  const glassColor = setOpacity(theme.palette.background.paper, 0.45);
   return /*#__PURE__*/React__default.createElement("header", {
     style: {
       position: "relative",
@@ -34,7 +39,8 @@ function HeroSection(_ref) {
       justifyContent: "center",
       width: "100%",
       overflow: "hidden",
-      minHeight: "600px"
+      minHeight: "600px",
+      py: 6
     }
   }, bgImage && /*#__PURE__*/React__default.createElement(StrapiImage, {
     alt: "Background",
@@ -48,26 +54,36 @@ function HeroSection(_ref) {
     height: bgImage.height || 1080,
     src: bgImage.url,
     width: bgImage.width || 1920
-  }), /*#__PURE__*/React__default.createElement(Stack, {
-    spacing: 2,
-    alignItems: "center",
-    justifyContent: "center",
+  }), /*#__PURE__*/React__default.createElement(Container, {
+    maxWidth: maxWidth || "lg",
     sx: {
-      width: "max-content",
-      maxWidth: "600px",
+      my: 1,
       zIndex: 1
     }
+  }, /*#__PURE__*/React__default.createElement(Paper, {
+    sx: {
+      px: 2,
+      py: 7,
+      backdropFilter: "blur(4px)",
+      backgroundColor: glassColor
+    }
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    spacing: 5,
+    alignItems: "center",
+    justifyContent: "center"
   }, logoImage && /*#__PURE__*/React__default.createElement(StrapiImage, {
     alt: logoImage.alternativeText,
     height: logoImage.height || 100,
     src: logoImage.url,
     width: logoImage.width || 100
   }), /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "h1",
-    align: "center"
+    variant: "h2",
+    align: "center",
+    component: "h1"
   }, heading), /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "body1",
-    align: "center"
+    variant: "h4",
+    align: "center",
+    component: "h2"
   }, subHeading), /*#__PURE__*/React__default.createElement(Link, {
     href: link.url
   }, /*#__PURE__*/React__default.createElement(Button, {
@@ -76,7 +92,7 @@ function HeroSection(_ref) {
       width: "100%",
       fontSize: "1.5rem"
     }
-  }, link.text)))));
+  }, link.text)))))));
 }
 
 export { HeroSection };

package/dist/esm/lib/utils.js

@@ -21,5 +21,33 @@ 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);
 
-export { getStrapiMedia, getStrapiURL };
+  // 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 };

package/package.json

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

package/src/components/HeroSection.tsx

@@ -1,7 +1,16 @@
 import React from "react";
 import Link from "next/link";
-import { Box, Button, Stack, Typography } from "@mui/material";
+import {
+  Box,
+  Button,
+  Stack,
+  Typography,
+  Container,
+  Paper,
+  useTheme,
+} from "@mui/material";
 import { StrapiImage } from "./StrapiImage.tsx";
+import { setOpacity } from "../lib/utils.ts";
 
 interface ImageProps {
   id: number;
@@ -27,11 +36,18 @@ interface HeroSectionProps {
     bgImage?: ImageProps;
     logoImage?: ImageProps;
     link: LinkProps;
+    maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
   };
 }
 
 export function HeroSection({ data }: Readonly<HeroSectionProps>) {
-  const { heading, subHeading, bgImage, logoImage, link } = data;
+  const { heading, subHeading, bgImage, logoImage, link, maxWidth } = data;
+
+  const theme = useTheme();
+
+  console.log(theme.palette.background.paper);
+
+  const glassColor = setOpacity(theme.palette.background.paper, 0.45);
 
   return (
     <header style={{ position: "relative", padding: 0, margin: 0 }}>
@@ -44,6 +60,7 @@ export function HeroSection({ data }: Readonly<HeroSectionProps>) {
           width: "100%",
           overflow: "hidden",
           minHeight: "600px",
+          py: 6,
         }}
       >
         {bgImage && (
@@ -61,35 +78,42 @@ export function HeroSection({ data }: Readonly<HeroSectionProps>) {
             width={bgImage.width || 1920}
           />
         )}
-        <Stack
-          spacing={2}
-          alignItems="center"
-          justifyContent="center"
-          sx={{ width: "max-content", maxWidth: "600px", zIndex: 1 }}
-        >
-          {logoImage && (
-            <StrapiImage
-              alt={logoImage.alternativeText}
-              height={logoImage.height || 100}
-              src={logoImage.url}
-              width={logoImage.width || 100}
-            />
-          )}
-          <Typography variant="h1" align="center">
-            {heading}
-          </Typography>
-          <Typography variant="body1" align="center">
-            {subHeading}
-          </Typography>
-          <Link href={link.url}>
-            <Button
-              variant="contained"
-              sx={{ width: "100%", fontSize: "1.5rem" }}
-            >
-              {link.text}
-            </Button>
-          </Link>
-        </Stack>
+        <Container maxWidth={maxWidth || "lg"} sx={{ my: 1, zIndex: 1 }}>
+          <Paper
+            sx={{
+              px: 2,
+              py: 7,
+              backdropFilter: "blur(4px)",
+              backgroundColor: glassColor,
+            }}
+          >
+            <Stack spacing={5} alignItems="center" justifyContent="center">
+              {logoImage && (
+                <StrapiImage
+                  alt={logoImage.alternativeText}
+                  height={logoImage.height || 100}
+                  src={logoImage.url}
+                  width={logoImage.width || 100}
+                />
+              )}
+
+              <Typography variant="h2" align="center" component={"h1"}>
+                {heading}
+              </Typography>
+              <Typography variant="h4" align="center" component={"h2"}>
+                {subHeading}
+              </Typography>
+              <Link href={link.url}>
+                <Button
+                  variant="contained"
+                  sx={{ width: "100%", fontSize: "1.5rem" }}
+                >
+                  {link.text}
+                </Button>
+              </Link>
+            </Stack>
+          </Paper>
+        </Container>
       </Box>
     </header>
   );

package/src/lib/utils.ts

@@ -55,3 +55,38 @@ export function getStrapiMedia(url: string | null) {
   if (url.startsWith("http") || url.startsWith("//")) return url;
   return `${getStrapiURL()}${url}`;
 }
+
+export function setOpacity(color: string, opacity: number): string {
+  // 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(${parseInt(r, 16)}, ${parseInt(g, 16)}, ${parseInt(b, 16)}, ${
+      (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(${red}, ${green}, ${blue}, ${opacity})`;
+    } else if (rgbaMatch) {
+      // RGBA format
+      const [, red, green, blue, alpha] = rgbaMatch;
+      return `rgba(${red}, ${green}, ${blue}, ${alpha || opacity})`; // Use provided opacity if alpha is missing
+    }
+  }
+
+  // If parsing fails, return original color
+  return color;
+}

package/src/stories/HeroSection.stories.js

@@ -56,9 +56,9 @@ AMH.args = {
   data: {
     id: 1,
     __component: "layout.hero-section",
-    heading: null,
+    heading: "We offer world-wide, 24 / 7 patient transport by air ambulance. ",
     subHeading:
-      "We offer world wide, around the clock patient transport by air ambulance. Our aircrafts are equipped with state of the art medical equipment and staffed with highly qualified flying crews and medical teams. We will bring the patient back home, reliable and safely for affordable pricing.",
+      "Our aircrafts are equipped with state of the art medical equipment and staffed with highly qualified flying crews and medical teams. We will bring the patient back home, reliable and safely for affordable pricing.",
     bgImage: {
       id: 2,
       name: "dm_masked@2x.png",
@@ -69,11 +69,11 @@ AMH.args = {
     },
     logoImage: {
       id: 9,
-      name: "Airplane Cover-07.png",
+      name: "Asset 2.png",
       alternativeText: null,
-      width: 1280,
-      height: 720,
-      url: "/uploads/Airplane_Cover_07_f71759b898.png",
+      width: 1000,
+      height: 311,
+      url: "/uploads/Asset_2_c4a9c4a5d1.png",
     },
     link: { id: 1, url: "/contact", text: "Contact us", isExternal: false },
   },

package/src/stories/Page.stories.js

@@ -162,30 +162,32 @@ AMH.args = {
       },
     },
   },
-  title: "Hello Cruel World",
+  title: "AeroMedical Holland",
   blocks: [
     {
-      id: 3,
+      id: 1,
       __component: "layout.hero-section",
-      heading: "UMWD",
-      subHeading: "A place for all your resources",
+      heading:
+        "We offer world-wide, 24 / 7 patient transport by air ambulance. ",
+      subHeading:
+        "Our aircrafts are equipped with state of the art medical equipment and staffed with highly qualified flying crews and medical teams. We will bring the patient back home, reliable and safely for affordable pricing.",
       bgImage: {
-        id: 3,
-        url: "https://via.placeholder.com/100",
-        alternativeText: "UMWD",
+        id: 2,
+        name: "dm_masked@2x.png",
+        alternativeText: null,
+        width: 3841,
+        height: 2161,
+        url: "/uploads/dm_masked_2x_3eabdcd56c.png",
       },
       logoImage: {
-        id: 3,
-        url: "/uploads/logo_decorated_ad284d33ef.png",
-        alternativeText: "UMWD",
-        width: 250,
-        height: 250,
-      },
-      link: {
-        id: 3,
-        url: "/resources",
-        text: "Resources",
+        id: 9,
+        name: "Asset 2.png",
+        alternativeText: null,
+        width: 1000,
+        height: 311,
+        url: "/uploads/Asset_2_c4a9c4a5d1.png",
       },
+      link: { id: 1, url: "/contact", text: "Contact us", isExternal: false },
     },
     {
       id: 2,