umwd-components 0.1.157 → 0.1.159

package/dist/cjs/components/Footer.js

@@ -30,7 +30,7 @@ Footer.propTypes = {
   parent_company_name: PropTypes.string,
   company_address: PropTypes.shape({
     street: PropTypes.string,
-    street_number: PropTypes.string,
+    street_number: PropTypes.number,
     street_number_addition: PropTypes.string,
     postal_code: PropTypes.string,
     city: PropTypes.string

package/dist/cjs/components/NavBar.js

@@ -144,9 +144,8 @@ function NavBar(_ref) {
     value: currentTab,
     onChange: (event, newValue) => handleChange(event, newValue),
     "aria-label": "wrapped label tabs example",
-    textColor: "secondary",
-    indicatorColor: "secondary",
-    variant: "fullWidth"
+    indicatorColor: "secondary"
+    //variant="fullWidth"
   }, tabs.length > 0 && tabs.map(tab => {
     return /*#__PURE__*/React.createElement(material.Tab, {
       key: tab.name,
@@ -156,7 +155,8 @@ function NavBar(_ref) {
         router.push(tab.url);
       },
       sx: {
-        p: 1
+        p: 1,
+        color: "primary.contrastText"
       }
     });
   }))), /*#__PURE__*/React.createElement(Link, {

package/dist/cjs/components/ScrollNavbar.js

@@ -133,7 +133,6 @@ function ScrollNavbar(_ref) {
   }, /*#__PURE__*/React.createElement(material.Tabs, {
     value: currentTab,
     "aria-label": "wrapped label tabs example",
-    textColor: "secondary",
     indicatorColor: "secondary",
     role: "navigation"
   }, tabs.length > 0 && tabs.map((tab, index) => {
@@ -181,15 +180,16 @@ function ScrollNavbar(_ref) {
       width: "auto",
       height: "auto"
     }
-  })), site_title !== undefined && /*#__PURE__*/React.createElement(material.Typography, {
+  })), site_title != null && /*#__PURE__*/React.createElement(React.Fragment, null, typeof site_title === "string" ? /*#__PURE__*/React.createElement(material.Typography, {
     variant: "h5",
     noWrap: true,
     component: "h1",
     sx: {
       display: "flex",
-      flexGrow: 1
+      flexGrow: 1,
+      textDecoration: "none"
     }
-  }, site_title))), /*#__PURE__*/React.createElement(material.Box, {
+  }, site_title) : /*#__PURE__*/React.createElement(React.Fragment, null, site_title)))), /*#__PURE__*/React.createElement(material.Box, {
     sx: {
       display: {
         xs: "flex",
@@ -262,15 +262,16 @@ function ScrollNavbar(_ref) {
       width: "auto",
       height: "auto"
     }
-  })), /*#__PURE__*/React.createElement(material.Typography, {
+  })), site_title != null && /*#__PURE__*/React.createElement(React.Fragment, null, typeof site_title === "string" ? /*#__PURE__*/React.createElement(material.Typography, {
     variant: "h5",
     noWrap: true,
     component: "h1",
     sx: {
       display: "flex",
-      flexGrow: 1
+      flexGrow: 1,
+      textDecoration: "none"
     }
-  }, site_title !== undefined && site_title))), /*#__PURE__*/React.createElement(material.Button, {
+  }, site_title) : /*#__PURE__*/React.createElement(React.Fragment, null, site_title)))), /*#__PURE__*/React.createElement(material.Button, {
     onClick: handleCloseMobileMenu,
     sx: {
       width: "40px",

package/dist/cjs/components/StrapiImage.js

@@ -12,6 +12,7 @@ var utils = require('../lib/utils.js');
 
 function StrapiImage(_ref) {
   let {
+    id,
     src,
     alt = "",
     height,
@@ -22,6 +23,7 @@ function StrapiImage(_ref) {
   const imageUrl = utils.getStrapiMedia(src);
   const imageFallback = "https://placehold.co/".concat(width, "x").concat(height);
   return /*#__PURE__*/React.createElement(Image, {
+    id: id,
     src: imageUrl !== null && imageUrl !== void 0 ? imageUrl : imageFallback,
     alt: alt,
     height: height,

package/dist/cjs/components/TextImageSection.js

@@ -15,6 +15,67 @@ var StrapiImage = require('./StrapiImage.js');
 var utils = require('../lib/utils.js');
 
 const MuiMarkdown = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "mui-markdown" */'mui-markdown'));
+function StickyImage(_ref) {
+  let {
+    image
+  } = _ref;
+  const theme = material.useTheme();
+  const imageSrc = image.url;
+  if (imageSrc === undefined) {
+    return null;
+  }
+  const [offsetY, setOffsetY] = React.useState(0);
+  const handleScroll = () => {
+    const offset = 160;
+    const imageDivID = "image-container".concat(image.url);
+    const imageDiv = document.getElementById(imageDivID);
+    const imageID = "image".concat(image.url);
+    const imageElement = document.getElementById(imageID);
+    if (imageDiv === null || imageElement === null) {
+      return;
+    }
+    const imageDivRect = imageDiv.getBoundingClientRect();
+    const imageRect = imageElement.getBoundingClientRect();
+    if (imageRect.height >= imageDivRect.height) {
+      return;
+    }
+    const imageAtBottomOffset = imageDivRect.height - imageRect.height;
+    if (imageDivRect.y <= offset && -imageDivRect.y <= imageDivRect.height - imageRect.height - offset) {
+      setOffsetY(-imageDivRect.y + offset);
+    } else if (imageDivRect.y > 0) {
+      setOffsetY(0);
+    } else {
+      setOffsetY(imageAtBottomOffset);
+    }
+  };
+  React.useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []); // Empty dependency array to run effect only once
+
+  return /*#__PURE__*/React.createElement(material.Box, {
+    id: "image-container".concat(image.url),
+    sx: {
+      height: "100%",
+      position: "relative"
+    }
+  }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
+    id: "image".concat(image.url),
+    alt: image.alt,
+    height: image.height,
+    width: image.width,
+    src: image.url,
+    style: {
+      width: "100%",
+      height: "auto",
+      display: "block",
+      position: "relative",
+      top: offsetY,
+      borderRadius: 4,
+      border: "1px solid ".concat(theme.palette.secondary.main)
+    }
+  }));
+}
 
 /* 
 TODO intregrate this interface into StrapiImage.tsx
@@ -28,10 +89,10 @@ interface ImageProps {
   height: number;
 } */
 
-function TextImageSection(_ref) {
+function TextImageSection(_ref2) {
   let {
     data
-  } = _ref;
+  } = _ref2;
   const {
     title,
     text,
@@ -54,42 +115,28 @@ function TextImageSection(_ref) {
       my: 1,
       ...sx
     }
-  }, /*#__PURE__*/React.createElement(material.Paper, {
-    sx: {
-      p: 2,
-      backdropFilter: "blur(3px)",
-      backgroundColor: utils.setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
-      border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
-    }
   }, title && /*#__PURE__*/React.createElement(material.Typography, {
     variant: "h1",
     textAlign: "center",
     sx: {
       pb: 2
     }
-  }, title), /*#__PURE__*/React.createElement(material.Stack, {
+  }, title), /*#__PURE__*/React.createElement(material.Grid, {
+    container: true,
     spacing: 2,
-    direction: reverse ? "row-reverse" : "row",
-    sx: {
-      [theme.breakpoints.down("sm")]: {
-        flexDirection: "column"
-      }
-    }
-  }, (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React.createElement(material.Box, {
+    direction: reverse ? "row-reverse" : "row"
+  }, /*#__PURE__*/React.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    md: (image === null || image === void 0 ? void 0 : image.url) !== undefined ? 8 : 12
+  }, /*#__PURE__*/React.createElement(material.Paper, {
     sx: {
-      minWidth: 200,
-      height: "100%",
-      overflow: "hidden",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
+      p: 2,
+      backdropFilter: "blur(3px)",
+      backgroundColor: utils.setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+      border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
     }
-  }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
-    alt: image.alt,
-    height: image.height,
-    width: image.width,
-    src: image.url
-  })), text !== null && text !== undefined && /*#__PURE__*/React.createElement(material.Box, {
+  }, text !== null && text !== undefined && /*#__PURE__*/React.createElement(material.Box, {
     sx: {
       height: "100%",
       overflow: "hidden",
@@ -97,7 +144,13 @@ function TextImageSection(_ref) {
       alignItems: "center",
       justifyContent: "center"
     }
-  }, /*#__PURE__*/React.createElement(MuiMarkdown, null, text)))));
+  }, /*#__PURE__*/React.createElement(MuiMarkdown, null, text)))), (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    md: 4
+  }, /*#__PURE__*/React.createElement(StickyImage, {
+    image: image
+  }))));
 }
 
 exports.default = TextImageSection;

package/dist/esm/components/Footer.js

@@ -26,7 +26,7 @@ Footer.propTypes = {
   parent_company_name: PropTypes.string,
   company_address: PropTypes.shape({
     street: PropTypes.string,
-    street_number: PropTypes.string,
+    street_number: PropTypes.number,
     street_number_addition: PropTypes.string,
     postal_code: PropTypes.string,
     city: PropTypes.string

package/dist/esm/components/NavBar.js

@@ -140,9 +140,8 @@ function NavBar(_ref) {
     value: currentTab,
     onChange: (event, newValue) => handleChange(event, newValue),
     "aria-label": "wrapped label tabs example",
-    textColor: "secondary",
-    indicatorColor: "secondary",
-    variant: "fullWidth"
+    indicatorColor: "secondary"
+    //variant="fullWidth"
   }, tabs.length > 0 && tabs.map(tab => {
     return /*#__PURE__*/React__default.createElement(Tab, {
       key: tab.name,
@@ -152,7 +151,8 @@ function NavBar(_ref) {
         router.push(tab.url);
       },
       sx: {
-        p: 1
+        p: 1,
+        color: "primary.contrastText"
       }
     });
   }))), /*#__PURE__*/React__default.createElement(Link, {

package/dist/esm/components/ScrollNavbar.js

@@ -129,7 +129,6 @@ function ScrollNavbar(_ref) {
   }, /*#__PURE__*/React__default.createElement(Tabs, {
     value: currentTab,
     "aria-label": "wrapped label tabs example",
-    textColor: "secondary",
     indicatorColor: "secondary",
     role: "navigation"
   }, tabs.length > 0 && tabs.map((tab, index) => {
@@ -177,15 +176,16 @@ function ScrollNavbar(_ref) {
       width: "auto",
       height: "auto"
     }
-  })), site_title !== undefined && /*#__PURE__*/React__default.createElement(Typography, {
+  })), site_title != null && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof site_title === "string" ? /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h5",
     noWrap: true,
     component: "h1",
     sx: {
       display: "flex",
-      flexGrow: 1
+      flexGrow: 1,
+      textDecoration: "none"
     }
-  }, site_title))), /*#__PURE__*/React__default.createElement(Box, {
+  }, site_title) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, site_title)))), /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       display: {
         xs: "flex",
@@ -258,15 +258,16 @@ function ScrollNavbar(_ref) {
       width: "auto",
       height: "auto"
     }
-  })), /*#__PURE__*/React__default.createElement(Typography, {
+  })), site_title != null && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof site_title === "string" ? /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h5",
     noWrap: true,
     component: "h1",
     sx: {
       display: "flex",
-      flexGrow: 1
+      flexGrow: 1,
+      textDecoration: "none"
     }
-  }, site_title !== undefined && site_title))), /*#__PURE__*/React__default.createElement(Button, {
+  }, site_title) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, site_title)))), /*#__PURE__*/React__default.createElement(Button, {
     onClick: handleCloseMobileMenu,
     sx: {
       width: "40px",

package/dist/esm/components/StrapiImage.js

@@ -10,6 +10,7 @@ import { getStrapiMedia } from '../lib/utils.js';
 
 function StrapiImage(_ref) {
   let {
+    id,
     src,
     alt = "",
     height,
@@ -20,6 +21,7 @@ function StrapiImage(_ref) {
   const imageUrl = getStrapiMedia(src);
   const imageFallback = "https://placehold.co/".concat(width, "x").concat(height);
   return /*#__PURE__*/React__default.createElement(Image, {
+    id: id,
     src: imageUrl !== null && imageUrl !== void 0 ? imageUrl : imageFallback,
     alt: alt,
     height: height,

package/dist/esm/components/TextImageSection.js

@@ -5,12 +5,73 @@
  * @license MIT
  */
   
-import React__default from 'react';
-import { useTheme, Container, Paper, Typography, Stack, Box } from '@mui/material';
+import React__default, { useState, useEffect } from 'react';
+import { useTheme, Container, Typography, Grid, Paper, Box } from '@mui/material';
 import { StrapiImage } from './StrapiImage.js';
 import { setOpacity } from '../lib/utils.js';
 
 const MuiMarkdown = /*#__PURE__*/React__default.lazy(() => import( /* webpackChunkName: "mui-markdown" */'mui-markdown'));
+function StickyImage(_ref) {
+  let {
+    image
+  } = _ref;
+  const theme = useTheme();
+  const imageSrc = image.url;
+  if (imageSrc === undefined) {
+    return null;
+  }
+  const [offsetY, setOffsetY] = useState(0);
+  const handleScroll = () => {
+    const offset = 160;
+    const imageDivID = "image-container".concat(image.url);
+    const imageDiv = document.getElementById(imageDivID);
+    const imageID = "image".concat(image.url);
+    const imageElement = document.getElementById(imageID);
+    if (imageDiv === null || imageElement === null) {
+      return;
+    }
+    const imageDivRect = imageDiv.getBoundingClientRect();
+    const imageRect = imageElement.getBoundingClientRect();
+    if (imageRect.height >= imageDivRect.height) {
+      return;
+    }
+    const imageAtBottomOffset = imageDivRect.height - imageRect.height;
+    if (imageDivRect.y <= offset && -imageDivRect.y <= imageDivRect.height - imageRect.height - offset) {
+      setOffsetY(-imageDivRect.y + offset);
+    } else if (imageDivRect.y > 0) {
+      setOffsetY(0);
+    } else {
+      setOffsetY(imageAtBottomOffset);
+    }
+  };
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []); // Empty dependency array to run effect only once
+
+  return /*#__PURE__*/React__default.createElement(Box, {
+    id: "image-container".concat(image.url),
+    sx: {
+      height: "100%",
+      position: "relative"
+    }
+  }, /*#__PURE__*/React__default.createElement(StrapiImage, {
+    id: "image".concat(image.url),
+    alt: image.alt,
+    height: image.height,
+    width: image.width,
+    src: image.url,
+    style: {
+      width: "100%",
+      height: "auto",
+      display: "block",
+      position: "relative",
+      top: offsetY,
+      borderRadius: 4,
+      border: "1px solid ".concat(theme.palette.secondary.main)
+    }
+  }));
+}
 
 /* 
 TODO intregrate this interface into StrapiImage.tsx
@@ -24,10 +85,10 @@ interface ImageProps {
   height: number;
 } */
 
-function TextImageSection(_ref) {
+function TextImageSection(_ref2) {
   let {
     data
-  } = _ref;
+  } = _ref2;
   const {
     title,
     text,
@@ -50,42 +111,28 @@ function TextImageSection(_ref) {
       my: 1,
       ...sx
     }
-  }, /*#__PURE__*/React__default.createElement(Paper, {
-    sx: {
-      p: 2,
-      backdropFilter: "blur(3px)",
-      backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
-      border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
-    }
   }, title && /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h1",
     textAlign: "center",
     sx: {
       pb: 2
     }
-  }, title), /*#__PURE__*/React__default.createElement(Stack, {
+  }, title), /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
     spacing: 2,
-    direction: reverse ? "row-reverse" : "row",
-    sx: {
-      [theme.breakpoints.down("sm")]: {
-        flexDirection: "column"
-      }
-    }
-  }, (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React__default.createElement(Box, {
+    direction: reverse ? "row-reverse" : "row"
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12,
+    md: (image === null || image === void 0 ? void 0 : image.url) !== undefined ? 8 : 12
+  }, /*#__PURE__*/React__default.createElement(Paper, {
     sx: {
-      minWidth: 200,
-      height: "100%",
-      overflow: "hidden",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
+      p: 2,
+      backdropFilter: "blur(3px)",
+      backgroundColor: setOpacity(theme.palette.background.paper, glass ? 0.1 : 1),
+      border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none"
     }
-  }, /*#__PURE__*/React__default.createElement(StrapiImage, {
-    alt: image.alt,
-    height: image.height,
-    width: image.width,
-    src: image.url
-  })), text !== null && text !== undefined && /*#__PURE__*/React__default.createElement(Box, {
+  }, text !== null && text !== undefined && /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       height: "100%",
       overflow: "hidden",
@@ -93,7 +140,13 @@ function TextImageSection(_ref) {
       alignItems: "center",
       justifyContent: "center"
     }
-  }, /*#__PURE__*/React__default.createElement(MuiMarkdown, null, text)))));
+  }, /*#__PURE__*/React__default.createElement(MuiMarkdown, null, text)))), (image === null || image === void 0 ? void 0 : image.url) !== undefined && /*#__PURE__*/React__default.createElement(Grid, {
+    item: true,
+    xs: 12,
+    md: 4
+  }, /*#__PURE__*/React__default.createElement(StickyImage, {
+    image: image
+  }))));
 }
 
 export { TextImageSection as default };

package/package.json

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

package/src/components/Footer.js

@@ -36,7 +36,7 @@ Footer.propTypes = {
   parent_company_name: PropTypes.string,
   company_address: PropTypes.shape({
     street: PropTypes.string,
-    street_number: PropTypes.string,
+    street_number: PropTypes.number,
     street_number_addition: PropTypes.string,
     postal_code: PropTypes.string,
     city: PropTypes.string,

package/src/components/NavBar.js

@@ -176,9 +176,8 @@ function NavBar({
                 value={currentTab}
                 onChange={(event, newValue) => handleChange(event, newValue)}
                 aria-label="wrapped label tabs example"
-                textColor="secondary"
                 indicatorColor="secondary"
-                variant="fullWidth"
+                //variant="fullWidth"
               >
                 {tabs.length > 0 &&
                   tabs.map((tab) => {
@@ -190,7 +189,7 @@ function NavBar({
                         onClick={() => {
                           router.push(tab.url);
                         }}
-                        sx={{ p: 1 }}
+                        sx={{ p: 1, color: "primary.contrastText" }}
                       />
                     );
                   })}

package/src/components/ScrollNavbar.tsx

@@ -185,7 +185,6 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
               <Tabs
                 value={currentTab}
                 aria-label="wrapped label tabs example"
-                textColor="secondary"
                 indicatorColor="secondary"
                 role="navigation"
               >
@@ -233,18 +232,25 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
                   />
                 </Box>
               )}
-              {site_title !== undefined && (
-                <Typography
-                  variant="h5"
-                  noWrap
-                  component="h1"
-                  sx={{
-                    display: "flex",
-                    flexGrow: 1,
-                  }}
-                >
-                  {site_title}
-                </Typography>
+              {site_title != null && (
+                <>
+                  {typeof site_title === "string" ? (
+                    <Typography
+                      variant="h5"
+                      noWrap
+                      component="h1"
+                      sx={{
+                        display: "flex",
+                        flexGrow: 1,
+                        textDecoration: "none",
+                      }}
+                    >
+                      {site_title}
+                    </Typography>
+                  ) : (
+                    <>{site_title}</>
+                  )}
+                </>
               )}
             </Box>
           </Link>
@@ -308,17 +314,27 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
                             }}
                           />
                         </Box>
-                        <Typography
-                          variant="h5"
-                          noWrap
-                          component="h1"
-                          sx={{
-                            display: "flex",
-                            flexGrow: 1,
-                          }}
-                        >
-                          {site_title !== undefined && site_title}
-                        </Typography>
+
+                        {site_title != null && (
+                          <>
+                            {typeof site_title === "string" ? (
+                              <Typography
+                                variant="h5"
+                                noWrap
+                                component="h1"
+                                sx={{
+                                  display: "flex",
+                                  flexGrow: 1,
+                                  textDecoration: "none",
+                                }}
+                              >
+                                {site_title}
+                              </Typography>
+                            ) : (
+                              <>{site_title}</>
+                            )}
+                          </>
+                        )}
                       </Box>
                     </Link>
                     <Button

package/src/components/StrapiImage.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import { getStrapiMedia } from "../lib/utils.ts";
 
 interface StrapiImageProps {
+  id: string;
   src: string;
   alt: string;
   height: number;
@@ -11,6 +12,7 @@ interface StrapiImageProps {
 }
 
 export function StrapiImage({
+  id,
   src,
   alt = "",
   height,
@@ -23,6 +25,7 @@ export function StrapiImage({
 
   return (
     <Image
+      id={id}
       src={imageUrl ?? imageFallback}
       alt={alt}
       height={height}

package/src/components/TextImageSection.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import React from "react";
+import React, { useState, useEffect } from "react";
 import {
   Box,
   Container,
   Paper,
   Typography,
-  Stack,
+  Grid,
   useTheme,
 } from "@mui/material";
 const MuiMarkdown = React.lazy(
@@ -16,6 +16,83 @@ import { StrapiImage } from "./StrapiImage.tsx";
 import { SxProps, Theme } from "@mui/material/styles";
 import { setOpacity } from "../lib/utils.ts";
 
+function StickyImage({ image }) {
+  const theme = useTheme();
+  const imageSrc = image.url;
+
+  if (imageSrc === undefined) {
+    return null;
+  }
+
+  const [offsetY, setOffsetY] = useState(0);
+
+  const handleScroll = () => {
+    const offset = 160;
+
+    const imageDivID = `image-container${image.url}`;
+    const imageDiv = document.getElementById(imageDivID);
+
+    const imageID = `image${image.url}`;
+    const imageElement = document.getElementById(imageID);
+
+    if (imageDiv === null || imageElement === null) {
+      return;
+    }
+
+    const imageDivRect = imageDiv.getBoundingClientRect();
+    const imageRect = imageElement.getBoundingClientRect();
+
+    if (imageRect.height >= imageDivRect.height) {
+      return;
+    }
+
+    const imageAtBottomOffset = imageDivRect.height - imageRect.height;
+
+    if (
+      imageDivRect.y <= offset &&
+      -imageDivRect.y <= imageDivRect.height - imageRect.height - offset
+    ) {
+      setOffsetY(-imageDivRect.y + offset);
+    } else if (imageDivRect.y > 0) {
+      setOffsetY(0);
+    } else {
+      setOffsetY(imageAtBottomOffset);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []); // Empty dependency array to run effect only once
+
+  return (
+    <Box
+      id={`image-container${image.url}`}
+      sx={{
+        height: "100%",
+        position: "relative",
+      }}
+    >
+      <StrapiImage
+        id={`image${image.url}`}
+        alt={image.alt}
+        height={image.height}
+        width={image.width}
+        src={image.url}
+        style={{
+          width: "100%",
+          height: "auto",
+          display: "block",
+          position: "relative",
+          top: offsetY,
+          borderRadius: 4,
+          border: `1px solid ${theme.palette.secondary.main}`,
+        }}
+      />
+    </Box>
+  );
+}
+
 /* 
 TODO intregrate this interface into StrapiImage.tsx
 
@@ -68,6 +145,69 @@ function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
 
   return (
     <Container maxWidth={maxWidth ? maxWidth : "lg"} sx={{ my: 1, ...sx }}>
+      {title && (
+        <Typography variant="h1" textAlign="center" sx={{ pb: 2 }}>
+          {title}
+        </Typography>
+      )}
+
+      <Grid container spacing={2} direction={reverse ? "row-reverse" : "row"}>
+        <Grid item xs={12} md={image?.url !== undefined ? 8 : 12}>
+          <Paper
+            sx={{
+              p: 2,
+              backdropFilter: "blur(3px)",
+              backgroundColor: setOpacity(
+                theme.palette.background.paper,
+                glass ? 0.1 : 1
+              ),
+              border: glass ? "1px solid rgba(255, 255, 255, 0.15)" : "none",
+            }}
+          >
+            {text !== null && text !== undefined && (
+              <Box
+                sx={{
+                  height: "100%",
+                  overflow: "hidden",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <MuiMarkdown>{text}</MuiMarkdown>
+              </Box>
+            )}
+          </Paper>
+        </Grid>
+        {image?.url !== undefined && (
+          <Grid item xs={12} md={4}>
+            <StickyImage image={image} />
+          </Grid>
+        )}
+      </Grid>
+    </Container>
+  );
+}
+
+export default TextImageSection;
+
+{
+  /* <Box
+              component={Paper}
+              sx={{ border: `1px solid ${theme.palette.secondary.main}` }}
+            >
+              <StrapiImage
+                alt={image.alt}
+                height={image.height}
+                width={image.width}
+                src={image.url}
+                style={{ width: "100%", height: "auto", display: "block" }}
+              />
+            </Box> */
+}
+
+{
+  /* <Container maxWidth={maxWidth ? maxWidth : "lg"} sx={{ my: 1, ...sx }}>
       <Paper
         sx={{
           p: 2,
@@ -110,6 +250,7 @@ function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
                 height={image.height}
                 width={image.width}
                 src={image.url}
+                style={{ width: "100%", height: "auto" }}
               />
             </Box>
           )}
@@ -129,8 +270,5 @@ function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
           )}
         </Stack>
       </Paper>
-    </Container>
-  );
+    </Container> */
 }
-
-export default TextImageSection;