umwd-components 0.1.57 → 0.1.59

package/dist/cjs/components/FeaturesSection.js

@@ -0,0 +1,122 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var material = require('@mui/material');
+
+function getIcon(name) {
+  switch (name) {
+    case "CLOCK_ICON":
+      return /*#__PURE__*/React.createElement(ClockIcon, {
+        className: "w-12 h-12 mb-4 text-gray-900"
+      });
+    case "CHECK_ICON":
+      return /*#__PURE__*/React.createElement(CheckIcon, {
+        className: "w-12 h-12 mb-4 text-gray-900"
+      });
+    case "CLOUD_ICON":
+      return /*#__PURE__*/React.createElement(CloudIcon, {
+        className: "w-12 h-12 mb-4 text-gray-900"
+      });
+    default:
+      return null;
+  }
+}
+function FeatureSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    feature
+  } = data;
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2,
+    direction: "row",
+    sx: {
+      width: "100%",
+      height: "100%"
+    }
+  }, feature.map(feature => /*#__PURE__*/React.createElement(material.Card, {
+    key: feature.id,
+    sx: {
+      height: "100%",
+      minHeight: "250px",
+      width: "32%"
+    }
+  }, /*#__PURE__*/React.createElement(material.CardContent, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, getIcon(feature.icon), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h2",
+    align: "center"
+  }, feature.heading), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "body1",
+    align: "center"
+  }, feature.subHeading))))));
+}
+function CheckIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, props, {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("polyline", {
+    points: "20 6 9 17 4 12"
+  }));
+}
+function ClockIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, props, {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/React.createElement("polyline", {
+    points: "12 6 12 12 16 14"
+  }));
+}
+function CloudIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, props, {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"
+  }));
+}
+
+exports.FeatureSection = FeatureSection;

package/dist/cjs/components/HeroSection.js

@@ -0,0 +1,73 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var React = require('react');
+var Link = require('next/link');
+var material = require('@mui/material');
+var StrapiImage = require('./StrapiImage.js');
+
+function HeroSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    heading,
+    subHeading,
+    image,
+    link
+  } = data;
+  return /*#__PURE__*/React.createElement("header", {
+    className: "relative h-[600px] overflow-hidden"
+  }, /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100vw",
+      overflow: "hidden",
+      backgroundColor: "pink",
+      minHeight: "600px"
+    }
+  }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
+    alt: "Background",
+    style: {
+      position: "absolute",
+      inset: 0,
+      objectFit: "cover",
+      width: "100%",
+      height: "100%"
+    },
+    height: 1080,
+    src: image.url,
+    width: 1920
+  }), /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2,
+    sx: {
+      width: "max-content",
+      maxWidth: "600px",
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h1",
+    align: "center"
+  }, heading), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "body1",
+    align: "center"
+  }, subHeading), /*#__PURE__*/React.createElement(Link, {
+    href: link.url
+  }, /*#__PURE__*/React.createElement(material.Button, {
+    variant: "contained",
+    sx: {
+      width: "100%",
+      fontSize: "1.5rem"
+    }
+  }, link.text)))));
+}
+
+exports.HeroSection = HeroSection;

package/dist/cjs/components/NavBar.js

@@ -60,8 +60,12 @@ function NavBar(_ref) {
     console.log(newValue);
     setCurrentTab(newValue);
   };
+  const theme = material.useTheme();
   return /*#__PURE__*/React.createElement(material.AppBar, {
-    position: "sticky"
+    position: "sticky",
+    sx: {
+      backgroundColor: theme.palette.primary.main
+    }
   }, /*#__PURE__*/React.createElement(material.Container, {
     maxWidth: maxWidth
   }, /*#__PURE__*/React.createElement(material.Toolbar, {

package/dist/cjs/components/Page.js

@@ -13,8 +13,8 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.j
 var React = require('react');
 var PropTypes = require('prop-types');
 var TextImageBlock = require('./TextImageBlock.js');
-var HeroSection = require('./custom/HeroSection.js');
-var FeaturesSection = require('./custom/FeaturesSection.js');
+var HeroSection = require('./HeroSection.js');
+var FeaturesSection = require('./FeaturesSection.js');
 
 function blockRenderer(block) {
   switch (block.__component) {

package/dist/cjs/components/StrapiImage.js

@@ -0,0 +1,33 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var React = require('react');
+var Image = require('next/image');
+var utils = require('../lib/utils.js');
+
+function StrapiImage(_ref) {
+  let {
+    src,
+    alt,
+    height,
+    width,
+    style
+  } = _ref;
+  if (!src) return null;
+  const imageUrl = utils.getStrapiMedia(src);
+  const imageFallback = "https://placehold.co/".concat(width, "x").concat(height);
+  return /*#__PURE__*/React.createElement(Image, {
+    src: imageUrl !== null && imageUrl !== void 0 ? imageUrl : imageFallback,
+    alt: alt,
+    height: height,
+    width: width,
+    style: style
+  });
+}
+
+exports.StrapiImage = StrapiImage;

package/dist/cjs/components/TextImageBlock.js

@@ -29,16 +29,22 @@ function TextImageBlock(_ref) {
 
   /* TODO Text_content should deal with linebreaks */
 
-  return /*#__PURE__*/React.createElement(material.Grid, {
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Grid, {
     container: true,
     sx: [{
-      maxWidth: maxWidth,
-      margin: "auto"
+      margin: "auto",
+      p: 2
     }, text === undefined && {
       display: "grid",
       alignItems: "center",
       justifyContent: "center"
-    }]
+    }],
+    component: material.Paper
   }, title && /*#__PURE__*/React.createElement(material.Grid, {
     item: true,
     xs: 12,
@@ -118,7 +124,7 @@ function TextImageBlock(_ref) {
     width: image.width,
     height: image.height,
     alt: image.alt
-  })))));
+  }))))));
 }
 TextImageBlock.propTypes = {
   title: PropTypes.string,

package/dist/esm/components/FeaturesSection.js

@@ -0,0 +1,120 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { Container, Stack, Card, CardContent, Typography } from '@mui/material';
+
+function getIcon(name) {
+  switch (name) {
+    case "CLOCK_ICON":
+      return /*#__PURE__*/React.createElement(ClockIcon, {
+        className: "w-12 h-12 mb-4 text-gray-900"
+      });
+    case "CHECK_ICON":
+      return /*#__PURE__*/React.createElement(CheckIcon, {
+        className: "w-12 h-12 mb-4 text-gray-900"
+      });
+    case "CLOUD_ICON":
+      return /*#__PURE__*/React.createElement(CloudIcon, {
+        className: "w-12 h-12 mb-4 text-gray-900"
+      });
+    default:
+      return null;
+  }
+}
+function FeatureSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    feature
+  } = data;
+  return /*#__PURE__*/React.createElement(Container, {
+    maxWidth: "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    spacing: 2,
+    direction: "row",
+    sx: {
+      width: "100%",
+      height: "100%"
+    }
+  }, feature.map(feature => /*#__PURE__*/React.createElement(Card, {
+    key: feature.id,
+    sx: {
+      height: "100%",
+      minHeight: "250px",
+      width: "32%"
+    }
+  }, /*#__PURE__*/React.createElement(CardContent, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, getIcon(feature.icon), /*#__PURE__*/React.createElement(Typography, {
+    variant: "h2",
+    align: "center"
+  }, feature.heading), /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1",
+    align: "center"
+  }, feature.subHeading))))));
+}
+function CheckIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("polyline", {
+    points: "20 6 9 17 4 12"
+  }));
+}
+function ClockIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/React.createElement("polyline", {
+    points: "12 6 12 12 16 14"
+  }));
+}
+function CloudIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"
+  }));
+}
+
+export { FeatureSection };

package/dist/esm/components/HeroSection.js

@@ -0,0 +1,71 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React from 'react';
+import Link from 'next/link';
+import { Box, Stack, Typography, Button } from '@mui/material';
+import { StrapiImage } from './StrapiImage.js';
+
+function HeroSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    heading,
+    subHeading,
+    image,
+    link
+  } = data;
+  return /*#__PURE__*/React.createElement("header", {
+    className: "relative h-[600px] overflow-hidden"
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100vw",
+      overflow: "hidden",
+      backgroundColor: "pink",
+      minHeight: "600px"
+    }
+  }, /*#__PURE__*/React.createElement(StrapiImage, {
+    alt: "Background",
+    style: {
+      position: "absolute",
+      inset: 0,
+      objectFit: "cover",
+      width: "100%",
+      height: "100%"
+    },
+    height: 1080,
+    src: image.url,
+    width: 1920
+  }), /*#__PURE__*/React.createElement(Stack, {
+    spacing: 2,
+    sx: {
+      width: "max-content",
+      maxWidth: "600px",
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h1",
+    align: "center"
+  }, heading), /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1",
+    align: "center"
+  }, subHeading), /*#__PURE__*/React.createElement(Link, {
+    href: link.url
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "contained",
+    sx: {
+      width: "100%",
+      fontSize: "1.5rem"
+    }
+  }, link.text)))));
+}
+
+export { HeroSection };

package/dist/esm/components/NavBar.js

@@ -8,7 +8,7 @@
 import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
-import { AppBar, Container, Toolbar, Box, Typography, Button, Tabs, Tab, Dialog, List, ListItem, ListItemText, Divider } from '@mui/material';
+import { useTheme, AppBar, Container, Toolbar, Box, Typography, Button, Tabs, Tab, Dialog, List, ListItem, ListItemText, Divider } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { useRouter } from 'next/navigation';
@@ -56,8 +56,12 @@ function NavBar(_ref) {
     console.log(newValue);
     setCurrentTab(newValue);
   };
+  const theme = useTheme();
   return /*#__PURE__*/React.createElement(AppBar, {
-    position: "sticky"
+    position: "sticky",
+    sx: {
+      backgroundColor: theme.palette.primary.main
+    }
   }, /*#__PURE__*/React.createElement(Container, {
     maxWidth: maxWidth
   }, /*#__PURE__*/React.createElement(Toolbar, {

package/dist/esm/components/Page.js

@@ -9,8 +9,8 @@ import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import PropTypes from 'prop-types';
 import TextImageBlock from './TextImageBlock.js';
-import { HeroSection } from './custom/HeroSection.js';
-import { FeatureSection } from './custom/FeaturesSection.js';
+import { HeroSection } from './HeroSection.js';
+import { FeatureSection } from './FeaturesSection.js';
 
 function blockRenderer(block) {
   switch (block.__component) {

package/dist/esm/components/StrapiImage.js

@@ -0,0 +1,31 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React from 'react';
+import Image from 'next/image';
+import { getStrapiMedia } from '../lib/utils.js';
+
+function StrapiImage(_ref) {
+  let {
+    src,
+    alt,
+    height,
+    width,
+    style
+  } = _ref;
+  if (!src) return null;
+  const imageUrl = getStrapiMedia(src);
+  const imageFallback = "https://placehold.co/".concat(width, "x").concat(height);
+  return /*#__PURE__*/React.createElement(Image, {
+    src: imageUrl !== null && imageUrl !== void 0 ? imageUrl : imageFallback,
+    alt: alt,
+    height: height,
+    width: width,
+    style: style
+  });
+}
+
+export { StrapiImage };

package/dist/esm/components/TextImageBlock.js

@@ -6,7 +6,7 @@
  */
   
 import React from 'react';
-import { Grid, Typography, Box } from '@mui/material';
+import { Container, Grid, Paper, Typography, Box } from '@mui/material';
 import Image from 'next/image';
 import { MuiMarkdown } from 'mui-markdown';
 import PropTypes from 'prop-types';
@@ -25,16 +25,22 @@ function TextImageBlock(_ref) {
 
   /* TODO Text_content should deal with linebreaks */
 
-  return /*#__PURE__*/React.createElement(Grid, {
+  return /*#__PURE__*/React.createElement(Container, {
+    maxWidth: "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(Grid, {
     container: true,
     sx: [{
-      maxWidth: maxWidth,
-      margin: "auto"
+      margin: "auto",
+      p: 2
     }, text === undefined && {
       display: "grid",
       alignItems: "center",
       justifyContent: "center"
-    }]
+    }],
+    component: Paper
   }, title && /*#__PURE__*/React.createElement(Grid, {
     item: true,
     xs: 12,
@@ -114,7 +120,7 @@ function TextImageBlock(_ref) {
     width: image.width,
     height: image.height,
     alt: image.alt
-  })))));
+  }))))));
 }
 TextImageBlock.propTypes = {
   title: PropTypes.string,

package/package.json

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

package/src/components/FeaturesSection.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import { Stack, Card, CardContent, Typography, Container } from "@mui/material";
+
+function getIcon(name: string) {
+  switch (name) {
+    case "CLOCK_ICON":
+      return <ClockIcon className="w-12 h-12 mb-4 text-gray-900" />;
+    case "CHECK_ICON":
+      return <CheckIcon className="w-12 h-12 mb-4 text-gray-900" />;
+    case "CLOUD_ICON":
+      return <CloudIcon className="w-12 h-12 mb-4 text-gray-900" />;
+    default:
+      return null;
+  }
+}
+
+interface FeatureProps {
+  id: number;
+  heading: string;
+  subHeading: string;
+  icon: string;
+}
+
+interface FeatureSectionProps {
+  id: number;
+  __component: string;
+  title: string;
+  description: string;
+  feature: FeatureProps[];
+}
+
+export function FeatureSection({
+  data,
+}: {
+  readonly data: FeatureSectionProps;
+}) {
+  const { feature } = data;
+  return (
+    <Container maxWidth="lg" sx={{ my: 1 }}>
+      <Stack spacing={2} direction="row" sx={{ width: "100%", height: "100%" }}>
+        {feature.map((feature) => (
+          <Card
+            key={feature.id}
+            sx={{ height: "100%", minHeight: "250px", width: "32%" }}
+          >
+            <CardContent
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              {getIcon(feature.icon)}
+              <Typography variant="h2" align="center">
+                {feature.heading}
+              </Typography>
+              <Typography variant="body1" align="center">
+                {feature.subHeading}
+              </Typography>
+            </CardContent>
+          </Card>
+        ))}
+      </Stack>
+    </Container>
+  );
+}
+
+function CheckIcon(props: any) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+function ClockIcon(props: any) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <polyline points="12 6 12 12 16 14" />
+    </svg>
+  );
+}
+
+function CloudIcon(props: any) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
+    </svg>
+  );
+}

package/src/components/HeroSection.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import Link from "next/link";
+import { Box, Button, Stack, Typography } from "@mui/material";
+import { StrapiImage } from "./StrapiImage.tsx";
+
+interface ImageProps {
+  id: number;
+  url: string;
+  alternativeText: string;
+}
+
+interface LinkProps {
+  id: number;
+  url: string;
+  text: string;
+}
+
+interface HeroSectionProps {
+  data: {
+    id: number;
+    __component: string;
+    heading: string;
+    subHeading: string;
+    image: ImageProps;
+    link: LinkProps;
+  };
+}
+
+export function HeroSection({ data }: Readonly<HeroSectionProps>) {
+  const { heading, subHeading, image, link } = data;
+
+  return (
+    <header className="relative h-[600px] overflow-hidden">
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100vw",
+          overflow: "hidden",
+          backgroundColor: "pink",
+          minHeight: "600px",
+        }}
+      >
+        <StrapiImage
+          alt="Background"
+          style={{
+            position: "absolute",
+            inset: 0,
+            objectFit: "cover",
+            width: "100%",
+            height: "100%",
+          }}
+          height={1080}
+          src={image.url}
+          width={1920}
+        />
+        <Stack
+          spacing={2}
+          sx={{ width: "max-content", maxWidth: "600px", zIndex: 1 }}
+        >
+          <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>
+      </Box>
+    </header>
+  );
+}

package/src/components/Logo.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import Link from "next/link";
+
+function MountainIcon(props: any) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="m8 3 4 8 5-5 5 15H2L8 3z" />
+    </svg>
+  );
+}
+
+interface LogoProps {
+  text?: string;
+  dark?: boolean;
+}
+
+export function Logo({
+  text = "Logo Text",
+  dark = false,
+}: Readonly<LogoProps>) {
+  return (
+    <Link className="flex items-center gap-2" href="/">
+      <MountainIcon className={"h-6 w-6  text-pink-500"} />
+      <span
+        className={`text-lg font-semibold ${
+          dark ? "text-white" : "text-slate-900"
+        }`}
+      >
+        {text}
+      </span>
+    </Link>
+  );
+}

package/src/components/NavBar.js

@@ -18,6 +18,7 @@ import {
   ListItemText,
   Tabs,
   Tab,
+  useTheme,
 } from "@mui/material";
 
 import CloseIcon from "@mui/icons-material/Close";
@@ -78,8 +79,13 @@ function NavBar({
     setCurrentTab(newValue);
   };
 
+  const theme = useTheme();
+
   return (
-    <AppBar position="sticky">
+    <AppBar
+      position="sticky"
+      sx={{ backgroundColor: theme.palette.primary.main }}
+    >
       <Container maxWidth={maxWidth}>
         <Toolbar
           disableGutters

package/src/components/Page.js

@@ -3,8 +3,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import TextImageBlock from "./TextImageBlock";
-import { HeroSection } from "./custom/HeroSection.tsx";
-import { FeatureSection } from "./custom/FeaturesSection.tsx";
+import { HeroSection } from "./HeroSection.tsx";
+import { FeatureSection } from "./FeaturesSection.tsx";
 
 function blockRenderer(block) {
   switch (block.__component) {

package/src/components/StrapiImage.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import Image from "next/image";
+import { getStrapiMedia } from "../lib/utils.ts";
+
+interface StrapiImageProps {
+  src: string;
+  alt: string;
+  height: number;
+  width: number;
+  style: React.CSSProperties;
+}
+
+export function StrapiImage({
+  src,
+  alt,
+  height,
+  width,
+  style,
+}: Readonly<StrapiImageProps>) {
+  if (!src) return null;
+  const imageUrl = getStrapiMedia(src);
+  const imageFallback = `https://placehold.co/${width}x${height}`;
+
+  return (
+    <Image
+      src={imageUrl ?? imageFallback}
+      alt={alt}
+      height={height}
+      width={width}
+      style={style}
+    />
+  );
+}

package/src/components/TextImageBlock.js

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { Box, Grid, Typography } from "@mui/material";
+import { Box, Container, Grid, Paper, Typography } from "@mui/material";
 import Image from "next/image";
 import { MuiMarkdown } from "mui-markdown";
 import PropTypes from "prop-types";
@@ -14,131 +14,134 @@ function TextImageBlock({ title, text, image, reverse, maxWidth, minHeight }) {
   /* TODO Text_content should deal with linebreaks */
 
   return (
-    <Grid
-      container
-      sx={[
-        { maxWidth: maxWidth, margin: "auto" },
-        text === undefined && {
-          display: "grid",
-          alignItems: "center",
-          justifyContent: "center",
-        },
-      ]}
-    >
-      {title && (
-        <Grid
-          item
-          xs={12}
-          sx={{
-            p: 1,
+    <Container maxWidth="lg" sx={{ my: 1 }}>
+      <Grid
+        container
+        sx={[
+          { margin: "auto", p: 2 },
+          text === undefined && {
             display: "grid",
             alignItems: "center",
             justifyContent: "center",
-          }}
-        >
-          <Typography variant="h1">{title}</Typography>
-        </Grid>
-      )}
-      {reverse ? (
-        <>
-          {image?.url !== undefined && (
-            <Grid
-              item
-              xs={text !== null && text !== undefined ? 6 : 12}
-              sx={{
-                padding: "10px",
-                minHeight: minHeight || "300px",
-                display: "grid",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              <Box
+          },
+        ]}
+        component={Paper}
+      >
+        {title && (
+          <Grid
+            item
+            xs={12}
+            sx={{
+              p: 1,
+              display: "grid",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Typography variant="h1">{title}</Typography>
+          </Grid>
+        )}
+        {reverse ? (
+          <>
+            {image?.url !== undefined && (
+              <Grid
+                item
+                xs={text !== null && text !== undefined ? 6 : 12}
                 sx={{
-                  width: "100%",
-                  height: "100%",
-                  overflow: "hidden",
-                  display: "flex",
+                  padding: "10px",
+                  minHeight: minHeight || "300px",
+                  display: "grid",
                   alignItems: "center",
                   justifyContent: "center",
                 }}
               >
-                <Image
-                  src={image.url}
-                  width={image.width}
-                  height={image.height}
-                  alt={image.name}
-                />
-              </Box>
-            </Grid>
-          )}
-          {text !== null && text !== undefined && (
-            <Grid
-              item
-              xs={image?.url !== undefined ? 6 : 12}
-              sx={{
-                p: 1,
-                minHeight: minHeight || "300px",
-                display: "grid",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              <MuiMarkdown>{text}</MuiMarkdown>
-            </Grid>
-          )}
-        </>
-      ) : (
-        <>
-          {text && (
-            <Grid
-              item
-              xs={image?.url !== undefined ? 6 : 12}
-              sx={{
-                p: 1,
-                minHeight: minHeight || "300px",
-                display: "grid",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              <MuiMarkdown>{text}</MuiMarkdown>
-            </Grid>
-          )}
-          {image?.url !== undefined && (
-            <Grid
-              item
-              xs={text !== null && text !== undefined ? 6 : 12}
-              sx={{
-                padding: "10px",
-                minHeight: minHeight || "300px",
-                display: "grid",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              <Box
+                <Box
+                  sx={{
+                    width: "100%",
+                    height: "100%",
+                    overflow: "hidden",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <Image
+                    src={image.url}
+                    width={image.width}
+                    height={image.height}
+                    alt={image.name}
+                  />
+                </Box>
+              </Grid>
+            )}
+            {text !== null && text !== undefined && (
+              <Grid
+                item
+                xs={image?.url !== undefined ? 6 : 12}
                 sx={{
-                  width: "100%",
-                  height: "100%",
-                  overflow: "hidden",
-                  display: "flex",
+                  p: 1,
+                  minHeight: minHeight || "300px",
+                  display: "grid",
                   alignItems: "center",
                   justifyContent: "center",
                 }}
               >
-                <Image
-                  src={image.url}
-                  width={image.width}
-                  height={image.height}
-                  alt={image.alt}
-                />
-              </Box>
-            </Grid>
-          )}
-        </>
-      )}
-    </Grid>
+                <MuiMarkdown>{text}</MuiMarkdown>
+              </Grid>
+            )}
+          </>
+        ) : (
+          <>
+            {text && (
+              <Grid
+                item
+                xs={image?.url !== undefined ? 6 : 12}
+                sx={{
+                  p: 1,
+                  minHeight: minHeight || "300px",
+                  display: "grid",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <MuiMarkdown>{text}</MuiMarkdown>
+              </Grid>
+            )}
+            {image?.url !== undefined && (
+              <Grid
+                item
+                xs={text !== null && text !== undefined ? 6 : 12}
+                sx={{
+                  padding: "10px",
+                  minHeight: minHeight || "300px",
+                  display: "grid",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <Box
+                  sx={{
+                    width: "100%",
+                    height: "100%",
+                    overflow: "hidden",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <Image
+                    src={image.url}
+                    width={image.width}
+                    height={image.height}
+                    alt={image.alt}
+                  />
+                </Box>
+              </Grid>
+            )}
+          </>
+        )}
+      </Grid>
+    </Container>
   );
 }
 

package/src/stories/Page.stories.js

@@ -42,13 +42,13 @@ HelloWorld.args = {
           id: 1,
           heading: "Resources",
           subHeading: "A place for all your resources",
-          icon: "https://via.placeholder.com/100",
+          icon: "CLOUD_ICON",
         },
         {
           id: 2,
           heading: "Contact",
           subHeading: "A place for all your resources",
-          icon: "https://via.placeholder.com/100",
+          icon: "CHECK_ICON",
         },
       ],
     },