umwd-components 0.1.66 → 0.1.68

package/dist/cjs/components/FeaturesSection.js

@@ -43,31 +43,55 @@ function FeatureSection(_ref) {
   }, /*#__PURE__*/React.createElement(material.Stack, {
     spacing: 2,
     direction: "row",
+    justifyContent: "stretch",
+    flexWrap: "wrap",
     sx: {
-      width: "100%",
-      height: "100%"
-    }
+      width: "100%"
+    },
+    useFlexGap: true
   }, 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",
+      justifyContent: "space-between",
+      flex: 1,
+      minWidth: "350px"
+    }
+  }, /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.CardMedia, {
+    sx: {
+      height: 140,
+      display: "grid",
       alignItems: "center",
       justifyContent: "center"
     }
-  }, getIcon(feature.icon), /*#__PURE__*/React.createElement(material.Typography, {
-    variant: "h2",
-    align: "center"
+  }, getIcon(feature.icon)), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h5",
+    align: "center",
+    component: "div",
+    sx: {
+      mb: 2
+    }
   }, feature.heading), /*#__PURE__*/React.createElement(material.Typography, {
-    variant: "body1",
-    align: "center"
-  }, feature.subHeading))))));
+    variant: "h6",
+    align: "center",
+    component: "div",
+    sx: {
+      mb: 2
+    }
+  }, feature.subHeading.substring(0, 50)), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "body2",
+    color: "text.secondary",
+    component: "div"
+  }, feature.subHeading)), /*#__PURE__*/React.createElement(material.CardActions, {
+    sx: {
+      mb: 0
+    }
+  }, /*#__PURE__*/React.createElement(material.Button, {
+    size: "small"
+  }, "Share"), /*#__PURE__*/React.createElement(material.Button, {
+    size: "small"
+  }, "Learn More"))))));
 }
 function CheckIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, props, {

package/dist/cjs/components/IconSection.js

@@ -0,0 +1,124 @@
+/*
+ * 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, null);
+    case "CHECK_ICON":
+      return /*#__PURE__*/React.createElement(CheckIcon, null);
+    case "CLOUD_ICON":
+      return /*#__PURE__*/React.createElement(CloudIcon, null);
+    default:
+      return null;
+  }
+}
+function IconSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    icon
+  } = data;
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Grid, {
+    container: true,
+    spacing: 2
+  }, icon.map(icon => /*#__PURE__*/React.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 6,
+    md: 4,
+    lg: 3
+  }, /*#__PURE__*/React.createElement(material.Card, {
+    key: icon.id,
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      flex: 1,
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "h6",
+    component: "div",
+    sx: {
+      mb: 1,
+      display: "flex",
+      justifyContent: "start",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement(material.SvgIcon, {
+    sx: {
+      mr: 2
+    }
+  }, getIcon(icon.icon)), " ", icon.title), /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "caption",
+    color: "text.secondary",
+    component: "div"
+  }, icon.text)))))));
+}
+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.IconSection = IconSection;

package/dist/cjs/components/Page.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var TextImageSection = require('./TextImageSection.js');
 var HeroSection = require('./HeroSection.js');
 var FeaturesSection = require('./FeaturesSection.js');
+var IconSection = require('./IconSection.js');
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -32,6 +33,11 @@ function blockRenderer(block) {
         key: block.id,
         data: block
       });
+    case "layout.icon-section":
+      return /*#__PURE__*/React.createElement(IconSection.IconSection, {
+        key: block.id,
+        data: block
+      });
     default:
       return null;
   }

package/dist/esm/components/FeaturesSection.js

@@ -6,7 +6,7 @@
   
 import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
-import { Container, Stack, Card, CardContent, Typography } from '@mui/material';
+import { Container, Stack, Card, CardContent, CardMedia, Typography, CardActions, Button } from '@mui/material';
 
 function getIcon(name) {
   switch (name) {
@@ -41,31 +41,55 @@ function FeatureSection(_ref) {
   }, /*#__PURE__*/React.createElement(Stack, {
     spacing: 2,
     direction: "row",
+    justifyContent: "stretch",
+    flexWrap: "wrap",
     sx: {
-      width: "100%",
-      height: "100%"
-    }
+      width: "100%"
+    },
+    useFlexGap: true
   }, 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",
+      justifyContent: "space-between",
+      flex: 1,
+      minWidth: "350px"
+    }
+  }, /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(CardMedia, {
+    sx: {
+      height: 140,
+      display: "grid",
       alignItems: "center",
       justifyContent: "center"
     }
-  }, getIcon(feature.icon), /*#__PURE__*/React.createElement(Typography, {
-    variant: "h2",
-    align: "center"
+  }, getIcon(feature.icon)), /*#__PURE__*/React.createElement(Typography, {
+    variant: "h5",
+    align: "center",
+    component: "div",
+    sx: {
+      mb: 2
+    }
   }, feature.heading), /*#__PURE__*/React.createElement(Typography, {
-    variant: "body1",
-    align: "center"
-  }, feature.subHeading))))));
+    variant: "h6",
+    align: "center",
+    component: "div",
+    sx: {
+      mb: 2
+    }
+  }, feature.subHeading.substring(0, 50)), /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2",
+    color: "text.secondary",
+    component: "div"
+  }, feature.subHeading)), /*#__PURE__*/React.createElement(CardActions, {
+    sx: {
+      mb: 0
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "small"
+  }, "Share"), /*#__PURE__*/React.createElement(Button, {
+    size: "small"
+  }, "Learn More"))))));
 }
 function CheckIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({}, props, {

package/dist/esm/components/IconSection.js

@@ -0,0 +1,122 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import { Container, Grid, Card, CardContent, Typography, SvgIcon } from '@mui/material';
+
+function getIcon(name) {
+  switch (name) {
+    case "CLOCK_ICON":
+      return /*#__PURE__*/React.createElement(ClockIcon, null);
+    case "CHECK_ICON":
+      return /*#__PURE__*/React.createElement(CheckIcon, null);
+    case "CLOUD_ICON":
+      return /*#__PURE__*/React.createElement(CloudIcon, null);
+    default:
+      return null;
+  }
+}
+function IconSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    icon
+  } = data;
+  return /*#__PURE__*/React.createElement(Container, {
+    maxWidth: "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    spacing: 2
+  }, icon.map(icon => /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    sm: 6,
+    md: 4,
+    lg: 3
+  }, /*#__PURE__*/React.createElement(Card, {
+    key: icon.id,
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      flex: 1,
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h6",
+    component: "div",
+    sx: {
+      mb: 1,
+      display: "flex",
+      justifyContent: "start",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement(SvgIcon, {
+    sx: {
+      mr: 2
+    }
+  }, getIcon(icon.icon)), " ", icon.title), /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    color: "text.secondary",
+    component: "div"
+  }, icon.text)))))));
+}
+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 { IconSection };

package/dist/esm/components/Page.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import TextImageSection from './TextImageSection.js';
 import { HeroSection } from './HeroSection.js';
 import { FeatureSection } from './FeaturesSection.js';
+import { IconSection } from './IconSection.js';
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -28,6 +29,11 @@ function blockRenderer(block) {
         key: block.id,
         data: block
       });
+    case "layout.icon-section":
+      return /*#__PURE__*/React.createElement(IconSection, {
+        key: block.id,
+        data: block
+      });
     default:
       return null;
   }

package/package.json

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

package/src/components/FeaturesSection.tsx

@@ -1,5 +1,14 @@
 import React from "react";
-import { Stack, Card, CardContent, Typography, Container } from "@mui/material";
+import {
+  Stack,
+  Card,
+  CardContent,
+  Typography,
+  Container,
+  CardMedia,
+  CardActions,
+  Button,
+} from "@mui/material";
 
 function getIcon(name: string) {
   switch (name) {
@@ -18,6 +27,7 @@ interface FeatureProps {
   id: number;
   heading: string;
   subHeading: string;
+  text: string;
   icon: string;
 }
 
@@ -37,28 +47,64 @@ export function FeatureSection({
   const { feature } = data;
   return (
     <Container maxWidth="lg" sx={{ my: 1 }}>
-      <Stack spacing={2} direction="row" sx={{ width: "100%", height: "100%" }}>
+      <Stack
+        spacing={2}
+        direction="row"
+        justifyContent="stretch"
+        flexWrap="wrap"
+        sx={{ width: "100%" }}
+        useFlexGap={true}
+      >
         {feature.map((feature) => (
           <Card
             key={feature.id}
-            sx={{ height: "100%", minHeight: "250px", width: "32%" }}
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
+              flex: 1,
+              minWidth: "350px",
+            }}
           >
-            <CardContent
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              {getIcon(feature.icon)}
-              <Typography variant="h2" align="center">
+            <CardContent>
+              <CardMedia
+                sx={{
+                  height: 140,
+                  display: "grid",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                {getIcon(feature.icon)}
+              </CardMedia>
+              <Typography
+                variant="h5"
+                align="center"
+                component="div"
+                sx={{ mb: 2 }}
+              >
                 {feature.heading}
               </Typography>
-              <Typography variant="body1" align="center">
+              <Typography
+                variant="h6"
+                align="center"
+                component="div"
+                sx={{ mb: 2 }}
+              >
+                {feature.subHeading.substring(0, 50)}
+              </Typography>
+              <Typography
+                variant="body2"
+                color="text.secondary"
+                component="div"
+              >
                 {feature.subHeading}
               </Typography>
             </CardContent>
+            <CardActions sx={{ mb: 0 }}>
+              <Button size="small">Share</Button>
+              <Button size="small">Learn More</Button>
+            </CardActions>
           </Card>
         ))}
       </Stack>

package/src/components/IconSection.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+import {
+  Stack,
+  Grid,
+  Card,
+  CardContent,
+  Typography,
+  Container,
+  CardMedia,
+  CardActions,
+  Button,
+  SvgIcon,
+} from "@mui/material";
+
+function getIcon(name: string) {
+  switch (name) {
+    case "CLOCK_ICON":
+      return <ClockIcon />;
+    case "CHECK_ICON":
+      return <CheckIcon />;
+    case "CLOUD_ICON":
+      return <CloudIcon />;
+    default:
+      return null;
+  }
+}
+
+interface IconProps {
+  id: number;
+  title: string;
+  text: string;
+  icon: string;
+}
+
+interface IconSectionProps {
+  id: number;
+  __component: string;
+  title: string;
+  description: string;
+  icon: IconProps[];
+}
+
+export function IconSection({ data }: { readonly data: IconSectionProps }) {
+  const { icon } = data;
+
+  return (
+    <Container maxWidth="lg" sx={{ my: 1 }}>
+      <Grid container spacing={2}>
+        {icon.map((icon) => (
+          <Grid item xs={12} sm={6} md={4} lg={3}>
+            <Card
+              key={icon.id}
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "space-between",
+                flex: 1,
+                height: "100%",
+              }}
+            >
+              <CardContent>
+                <Typography
+                  variant="h6"
+                  component="div"
+                  sx={{
+                    mb: 1,
+                    display: "flex",
+                    justifyContent: "start",
+                    alignItems: "center",
+                  }}
+                >
+                  <SvgIcon sx={{ mr: 2 }}>{getIcon(icon.icon)}</SvgIcon>{" "}
+                  {icon.title}
+                </Typography>
+
+                <Typography
+                  variant="caption"
+                  color="text.secondary"
+                  component="div"
+                >
+                  {icon.text}
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+    </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/Page.js

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import TextImageSection from "./TextImageSection.tsx";
 import { HeroSection } from "./HeroSection.tsx";
 import { FeatureSection } from "./FeaturesSection.tsx";
+import { IconSection } from "./IconSection.tsx";
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -14,6 +15,8 @@ function blockRenderer(block) {
       return <FeatureSection key={block.id} data={block} />;
     case "layout.text-image-section":
       return <TextImageSection key={block.id} data={block} />;
+    case "layout.icon-section":
+      return <IconSection key={block.id} data={block} />;
     default:
       return null;
   }

package/src/stories/Page.stories.js

@@ -40,20 +40,23 @@ HelloWorld.args = {
       feature: [
         {
           id: 1,
-          heading: "Resources",
-          subHeading: "A place for all your resources",
+          heading: "AIR AMBULANCE",
+          subHeading:
+            "All our aircraft providers are operational around the clock to ensure the patient gets home the fastest way. Our air ambulances are specifically modified to the highest medical standard. To ensure that patients who are in need of repatriation or evacuation can be transported as efficiently as possible. While upholding the highest international standards for medical treatment during the flight. Our aircrafts can carry up to two stretchers if needed and carry an oxygen capacity of ??? liters. Depending on the patient’s needs, travel distance and urgency of transport, the best type of air ambulance will be advised and provided.",
           icon: "CLOUD_ICON",
         },
         {
           id: 2,
-          heading: "Contact",
-          subHeading: "A place for all your resources",
+          heading: "BED TO BED",
+          subHeading:
+            "We offer bed to bed service. Where we will pick up the patient at the hospital of origin and also bring the patient to the receiving hospital with our medical team. This guarantees the best quality handover to the medical team that will take over the care of the patient at home.",
           icon: "CHECK_ICON",
         },
         {
           id: 3,
-          heading: "Contact",
-          subHeading: "A place for all your resources",
+          heading: "COMMERCIAL AIRLINE MEDICAL ESCORT",
+          subHeading:
+            "Medical transfer by commercial airline is a safe and more cost effective way to travel, if transport by air ambulance is not needed. We can provide medical escorts for necessary treatment and support, to keep the patient safe and comfortable during the flight. Depending on the patient’s diagnosis and condition and also flight options. Transport can be done in first class, business class or with a stretcher in economy class. Our team will help you pick the best way of transport.",
           icon: "CLOCK_ICON",
         },
       ],
@@ -69,5 +72,83 @@ HelloWorld.args = {
       text: "**Hello Mars,** \n a distant red planet that has captured the imagination of humanity for centuries. As we gaze upon your mysterious surface from Earth, we can't help but wonder about the secrets you hold. Hello to the vast landscapes of rust-colored terrain, the towering volcanoes, and the enigmatic canyons that weave across your surface.    *Hello Mars,* a planet that has been the focus of numerous space missions, each one aiming to unveil the mysteries of your past and present. From the iconic rovers tirelessly traversing your rocky landscapes to the orbiters capturing breathtaking images from above, we extend our greetings to the scientific endeavors that seek to understand your geology, climate, and potential for life. <br /> <br /> *Hello Mars,* a beacon of human exploration and curiosity. The dreams of setting foot on your soil have fueled the aspirations of generations, and with each technological leap, the possibility of humans visiting you becomes more tangible. The prospect of a human settlement on Mars brings excitement, challenges, and the promise of a new chapter in our interplanetary journey. <br /> <br /> *Hello Mars,* a testament to the indomitable human spirit that constantly seeks to push the boundaries of what is possible. As we continue to study, explore, and dream about the mysteries you hold, we are reminded of the vastness of the cosmos and the endless opportunities for discovery that lie beyond our home planet.",
       reverse: true,
     },
+    {
+      id: 1,
+      __component: "layout.icon-section",
+      icon: [
+        {
+          id: 1,
+          title: "INTENSIVE CARE UNIT",
+          text: "Intensive care unit with stretcher and vacuum mattress (adjustable backrest) | oxygen supply, compressed air and vacuum pump | 110/230V + 12/24V power supplies",
+          icon: "CLOCK_ICON",
+        },
+        {
+          id: 2,
+          title: "OXYGEN CAPACITY",
+          text: "4.000 l (per intensive care unit) plus up to 10.800 l in carbon high pressure cylinders",
+          icon: "CHECK_ICON",
+        },
+        {
+          id: 3,
+          title: "RESPIRATION SYSTEM",
+          text: "Hamilton T1 | or Hamilton H900 humidifier for: adults, pediatrics, neonates",
+          icon: "CLOUD_ICON",
+        },
+        {
+          id: 4,
+          title: "MONITORING",
+          text: "Zoll X Series | T1 (invasive and non-invasive blood pressure measurement, pulse oxymetry, capnometry, temperature measurement, ECG monitoring)",
+          icon: "CLOCK_ICON",
+        },
+        {
+          id: 5,
+          title: "DEFIBRILLATOR",
+          text: "Zoll X Series (with external cardiac pacemaker)",
+          icon: "CHECK_ICON",
+        },
+        {
+          id: 6,
+          title: "AED",
+          text: "Heartsine 350 P",
+          icon: "CLOUD_ICON",
+        },
+        {
+          id: 7,
+          title: "SYRINGE PUMPS",
+          text: "Fresenius Agilia Injectomat",
+          icon: "CLOCK_ICON",
+        },
+        {
+          id: 8,
+          title: "INFUSION PUMPS",
+          text: "Fresenus Agilia Volumat",
+          icon: "CHECK_ICON",
+        },
+        {
+          id: 9,
+          title: "PORTABLE SUCTION UNITS",
+          text: "Laerdal LCSU 4",
+          icon: "CLOUD_ICON",
+        },
+        {
+          id: 10,
+          title: "EMERGENCY ALS BAGS",
+          text: "Extensive equipment for emergency and intensive care (e.g. videolaryngoscop, chest tube, urinary catheter, arterial catheter, surgical instruments, coniotomy, central venous line, care products)",
+          icon: "CLOCK_ICON",
+        },
+        {
+          id: 11,
+          title: "MEDICATION",
+          text: "Standard medication for emergency and intensiv care medicine | narcotics | antidotes",
+          icon: "CHECK_ICON",
+        },
+        {
+          id: 12,
+          title: "PEDIATRIC EQUIPMENT",
+          text: "Babypod transport incubator I & II with Kanmed BabyWarmer | Incubator Dräger | intensive care backpack pediatric | additional emergency and intensive care medicine",
+          icon: "CLOUD_ICON",
+        },
+      ],
+    },
   ],
 };