umwd-components 0.1.88 → 0.1.91

package/dist/cjs/components/ColumnsSection.js

@@ -9,18 +9,17 @@
 var React = require('react');
 var material = require('@mui/material');
 var getIcon = require('../lib/getIcon.js');
-var LocalShippingIcon = require('@mui/icons-material/LocalShipping');
 
 function ColumnsSection(_ref) {
   let {
     data
   } = _ref;
   const {
-    column
+    column,
+    maxWidth
   } = data;
-  console.log(LocalShippingIcon);
   return /*#__PURE__*/React.createElement(material.Container, {
-    maxWidth: "lg",
+    maxWidth: maxWidth || "lg",
     sx: {
       my: 1
     }
@@ -35,20 +34,17 @@ function ColumnsSection(_ref) {
     useFlexGap: true
   }, column.map(column => {
     const Icon = getIcon.default(column.icon);
-    return /*#__PURE__*/React.createElement(material.Card, {
-      key: column.id,
+    return /*#__PURE__*/React.createElement(material.Paper, {
       sx: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between",
-        flex: 1,
-        minWidth: "350px"
+        p: 2
       }
-    }, /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.Typography, {
+    }, /*#__PURE__*/React.createElement(material.Typography, {
       variant: "h5",
-      component: "div",
       sx: {
-        mb: 2
+        mb: 2,
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center"
       }
     }, Icon !== null && /*#__PURE__*/React.createElement(Icon, {
       sx: {
@@ -63,7 +59,7 @@ function ColumnsSection(_ref) {
       variant: "body2",
       color: "text.secondary",
       component: "div"
-    }, column.text)));
+    }, column.text));
   })));
 }
 

package/dist/cjs/components/FeaturesSection.js

@@ -15,10 +15,12 @@ function FeatureSection(_ref) {
     data
   } = _ref;
   const {
-    feature
+    feature,
+    maxWidth
   } = data;
+  const theme = material.useTheme();
   return /*#__PURE__*/React.createElement(material.Container, {
-    maxWidth: "lg",
+    maxWidth: maxWidth || "lg",
     sx: {
       my: 1
     }
@@ -28,7 +30,13 @@ function FeatureSection(_ref) {
     justifyContent: "stretch",
     flexWrap: "wrap",
     sx: {
-      width: "100%"
+      width: "100%",
+      [theme.breakpoints.up("xs")]: {
+        flexDirection: "column"
+      },
+      [theme.breakpoints.up("sm")]: {
+        flexDirection: "row"
+      }
     },
     useFlexGap: true
   }, feature.map(feature => {
@@ -40,9 +48,9 @@ function FeatureSection(_ref) {
         flexDirection: "column",
         justifyContent: "space-between",
         flex: 1,
-        minWidth: "350px"
+        minWidth: 275
       }
-    }, /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.CardMedia, {
+    }, /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.Box, {
       sx: {
         height: 140,
         display: "grid",

package/dist/cjs/components/FleetSection.js

@@ -18,10 +18,12 @@ function FleetSection(_ref) {
     data
   } = _ref;
   const {
-    airplane
+    airplane,
+    maxWidth
   } = data;
+  const theme = material.useTheme();
   return /*#__PURE__*/React.createElement(material.Container, {
-    maxWidth: "lg",
+    maxWidth: maxWidth || "lg",
     sx: {
       my: 1
     }
@@ -31,7 +33,13 @@ function FleetSection(_ref) {
     justifyContent: "stretch",
     flexWrap: "wrap",
     sx: {
-      width: "100%"
+      width: "100%",
+      [theme.breakpoints.up("xs")]: {
+        flexDirection: "column"
+      },
+      [theme.breakpoints.up("sm")]: {
+        flexDirection: "row"
+      }
     },
     useFlexGap: true
   }, airplane.map(airplane => /*#__PURE__*/React.createElement(material.Card, {
@@ -41,7 +49,7 @@ function FleetSection(_ref) {
       flexDirection: "column",
       justifyContent: "space-between",
       flex: 1,
-      minWidth: "350px"
+      minWidth: 275
     }
   }, /*#__PURE__*/React.createElement(material.CardHeader, {
     title: airplane.name,

package/dist/cjs/components/Footer.js

@@ -13,6 +13,7 @@ var React = require('react');
 var material = require('@mui/material');
 var Link = require('next/link');
 var Image = require('next/image');
+var getIcon = require('../lib/getIcon.js');
 var PropTypes = require('prop-types');
 
 Footer.propTypes = {
@@ -143,11 +144,17 @@ function Footer(_ref) {
       color: "primary.contrastText"
     }
   }, company_socials.map((company_social, index) => {
+    const Icon = getIcon.default(company_social.icon);
     return /*#__PURE__*/React.createElement(material.IconButton, {
       key: index,
       color: "inherit",
       href: company_social.url
-    }, company_social.icon);
+    }, Icon !== null && /*#__PURE__*/React.createElement(Icon, {
+      sx: {
+        mr: 2,
+        mt: 0.2
+      }
+    }));
   })))), /*#__PURE__*/React.createElement(material.Grid, {
     item: true,
     xs: 12

package/dist/cjs/components/IconSection.js

@@ -15,10 +15,11 @@ function IconSection(_ref) {
     data
   } = _ref;
   const {
-    icon
+    icon,
+    maxWidth
   } = data;
   return /*#__PURE__*/React.createElement(material.Container, {
-    maxWidth: "lg",
+    maxWidth: maxWidth || "lg",
     sx: {
       my: 1
     }

package/dist/cjs/components/TextImageSection.js

@@ -42,6 +42,7 @@ function TextImageSection(_ref) {
   /* TODO Text_content should deal with linebreaks,
   reading up upon mui-markdown docs is advised */
 
+  const theme = material.useTheme();
   return /*#__PURE__*/React.createElement(material.Container, {
     maxWidth: maxWidth || "lg",
     sx: {
@@ -54,16 +55,20 @@ function TextImageSection(_ref) {
   }, title && /*#__PURE__*/React.createElement(material.Typography, {
     variant: "h1",
     textAlign: "center",
-    width: "100%",
     sx: {
       pb: 2
     }
   }, title), /*#__PURE__*/React.createElement(material.Stack, {
     spacing: 2,
-    direction: reverse ? "row-reverse" : "row"
+    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, {
     sx: {
-      width: text !== null && text !== undefined ? "50%" : "100%",
+      minWidth: 200,
       height: "100%",
       overflow: "hidden",
       display: "flex",
@@ -77,7 +82,6 @@ function TextImageSection(_ref) {
     src: image.url
   })), text !== null && text !== undefined && /*#__PURE__*/React.createElement(material.Box, {
     sx: {
-      width: (image === null || image === void 0 ? void 0 : image.url) !== null && (image === null || image === void 0 ? void 0 : image.url) !== undefined ? "50%" : "100%",
       height: "100%",
       overflow: "hidden",
       display: "flex",

package/dist/cjs/lib/getIcon.js

@@ -29,6 +29,11 @@ var MasksIcon = require('@mui/icons-material/Masks');
 var BoltIcon = require('@mui/icons-material/Bolt');
 var BedIcon = require('@mui/icons-material/Bed');
 var AmbulanceIcon = require('./AmbulanceIcon.js');
+var LinkedInIcon = require('@mui/icons-material/LinkedIn');
+var FaceBookIcon = require('@mui/icons-material/Facebook');
+var TwitterIcon = require('@mui/icons-material/Twitter');
+var LocalShippingIcon = require('@mui/icons-material/LocalShipping');
+var InstagramIcon = require('@mui/icons-material/Instagram');
 
 function getIcon(icon) {
   switch (icon) {
@@ -74,6 +79,16 @@ function getIcon(icon) {
       return BedIcon;
     case "AmbulanceIcon":
       return AmbulanceIcon.default;
+    case "LinkedInIcon":
+      return LinkedInIcon;
+    case "FaceBookIcon":
+      return FaceBookIcon;
+    case "TwitterIcon":
+      return TwitterIcon;
+    case "LocalShippingIcon":
+      return LocalShippingIcon;
+    case "InstagramIcon":
+      return InstagramIcon;
     default:
       return null;
   }

package/dist/esm/components/ColumnsSection.js

@@ -5,20 +5,19 @@
  */
   
 import React__default from 'react';
-import { Container, Stack, Card, CardContent, Typography } from '@mui/material';
+import { Container, Stack, Paper, Typography } from '@mui/material';
 import getIcon from '../lib/getIcon.js';
-import LocalShippingIcon from '@mui/icons-material/LocalShipping';
 
 function ColumnsSection(_ref) {
   let {
     data
   } = _ref;
   const {
-    column
+    column,
+    maxWidth
   } = data;
-  console.log(LocalShippingIcon);
   return /*#__PURE__*/React__default.createElement(Container, {
-    maxWidth: "lg",
+    maxWidth: maxWidth || "lg",
     sx: {
       my: 1
     }
@@ -33,20 +32,17 @@ function ColumnsSection(_ref) {
     useFlexGap: true
   }, column.map(column => {
     const Icon = getIcon(column.icon);
-    return /*#__PURE__*/React__default.createElement(Card, {
-      key: column.id,
+    return /*#__PURE__*/React__default.createElement(Paper, {
       sx: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between",
-        flex: 1,
-        minWidth: "350px"
+        p: 2
       }
-    }, /*#__PURE__*/React__default.createElement(CardContent, null, /*#__PURE__*/React__default.createElement(Typography, {
+    }, /*#__PURE__*/React__default.createElement(Typography, {
       variant: "h5",
-      component: "div",
       sx: {
-        mb: 2
+        mb: 2,
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center"
       }
     }, Icon !== null && /*#__PURE__*/React__default.createElement(Icon, {
       sx: {
@@ -61,7 +57,7 @@ function ColumnsSection(_ref) {
       variant: "body2",
       color: "text.secondary",
       component: "div"
-    }, column.text)));
+    }, column.text));
   })));
 }
 

package/dist/esm/components/FeaturesSection.js

@@ -5,7 +5,7 @@
  */
   
 import React__default from 'react';
-import { Container, Stack, Card, CardContent, CardMedia, Typography, CardActions, Button } from '@mui/material';
+import { useTheme, Container, Stack, Card, CardContent, Box, Typography, CardActions, Button } from '@mui/material';
 import getIcon from '../lib/getIcon.js';
 
 function FeatureSection(_ref) {
@@ -13,10 +13,12 @@ function FeatureSection(_ref) {
     data
   } = _ref;
   const {
-    feature
+    feature,
+    maxWidth
   } = data;
+  const theme = useTheme();
   return /*#__PURE__*/React__default.createElement(Container, {
-    maxWidth: "lg",
+    maxWidth: maxWidth || "lg",
     sx: {
       my: 1
     }
@@ -26,7 +28,13 @@ function FeatureSection(_ref) {
     justifyContent: "stretch",
     flexWrap: "wrap",
     sx: {
-      width: "100%"
+      width: "100%",
+      [theme.breakpoints.up("xs")]: {
+        flexDirection: "column"
+      },
+      [theme.breakpoints.up("sm")]: {
+        flexDirection: "row"
+      }
     },
     useFlexGap: true
   }, feature.map(feature => {
@@ -38,9 +46,9 @@ function FeatureSection(_ref) {
         flexDirection: "column",
         justifyContent: "space-between",
         flex: 1,
-        minWidth: "350px"
+        minWidth: 275
       }
-    }, /*#__PURE__*/React__default.createElement(CardContent, null, /*#__PURE__*/React__default.createElement(CardMedia, {
+    }, /*#__PURE__*/React__default.createElement(CardContent, null, /*#__PURE__*/React__default.createElement(Box, {
       sx: {
         height: 140,
         display: "grid",

package/dist/esm/components/FleetSection.js

@@ -5,7 +5,7 @@
  */
   
 import React__default from 'react';
-import { Container, Stack, Card, CardHeader, CardMedia, Paper, Box, Typography, CardContent, Chip } from '@mui/material';
+import { useTheme, Container, Stack, Card, CardHeader, CardMedia, Paper, Box, Typography, CardContent, Chip } from '@mui/material';
 import { StrapiImage } from './StrapiImage.js';
 import RadarIcon from '@mui/icons-material/Radar';
 import SpeedIcon from '@mui/icons-material/Speed';
@@ -16,10 +16,12 @@ function FleetSection(_ref) {
     data
   } = _ref;
   const {
-    airplane
+    airplane,
+    maxWidth
   } = data;
+  const theme = useTheme();
   return /*#__PURE__*/React__default.createElement(Container, {
-    maxWidth: "lg",
+    maxWidth: maxWidth || "lg",
     sx: {
       my: 1
     }
@@ -29,7 +31,13 @@ function FleetSection(_ref) {
     justifyContent: "stretch",
     flexWrap: "wrap",
     sx: {
-      width: "100%"
+      width: "100%",
+      [theme.breakpoints.up("xs")]: {
+        flexDirection: "column"
+      },
+      [theme.breakpoints.up("sm")]: {
+        flexDirection: "row"
+      }
     },
     useFlexGap: true
   }, airplane.map(airplane => /*#__PURE__*/React__default.createElement(Card, {
@@ -39,7 +47,7 @@ function FleetSection(_ref) {
       flexDirection: "column",
       justifyContent: "space-between",
       flex: 1,
-      minWidth: "350px"
+      minWidth: 275
     }
   }, /*#__PURE__*/React__default.createElement(CardHeader, {
     title: airplane.name,

package/dist/esm/components/Footer.js

@@ -9,6 +9,7 @@ import React__default from 'react';
 import { useTheme, AppBar, Container, Toolbar, Grid, Link, Box, Typography, Stack, IconButton, Divider } from '@mui/material';
 import Link$1 from 'next/link';
 import Image from 'next/image';
+import getIcon from '../lib/getIcon.js';
 import PropTypes from 'prop-types';
 
 Footer.propTypes = {
@@ -139,11 +140,17 @@ function Footer(_ref) {
       color: "primary.contrastText"
     }
   }, company_socials.map((company_social, index) => {
+    const Icon = getIcon(company_social.icon);
     return /*#__PURE__*/React__default.createElement(IconButton, {
       key: index,
       color: "inherit",
       href: company_social.url
-    }, company_social.icon);
+    }, Icon !== null && /*#__PURE__*/React__default.createElement(Icon, {
+      sx: {
+        mr: 2,
+        mt: 0.2
+      }
+    }));
   })))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12

package/dist/esm/components/IconSection.js

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

package/dist/esm/components/TextImageSection.js

@@ -6,7 +6,7 @@
  */
   
 import React__default from 'react';
-import { Container, Paper, Typography, Stack, Box } from '@mui/material';
+import { useTheme, Container, Paper, Typography, Stack, Box } from '@mui/material';
 import { StrapiImage } from './StrapiImage.js';
 
 const MuiMarkdown = /*#__PURE__*/React__default.lazy(() => import( /* webpackChunkName: "mui-markdown" */'mui-markdown'));
@@ -38,6 +38,7 @@ function TextImageSection(_ref) {
   /* TODO Text_content should deal with linebreaks,
   reading up upon mui-markdown docs is advised */
 
+  const theme = useTheme();
   return /*#__PURE__*/React__default.createElement(Container, {
     maxWidth: maxWidth || "lg",
     sx: {
@@ -50,16 +51,20 @@ function TextImageSection(_ref) {
   }, title && /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h1",
     textAlign: "center",
-    width: "100%",
     sx: {
       pb: 2
     }
   }, title), /*#__PURE__*/React__default.createElement(Stack, {
     spacing: 2,
-    direction: reverse ? "row-reverse" : "row"
+    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, {
     sx: {
-      width: text !== null && text !== undefined ? "50%" : "100%",
+      minWidth: 200,
       height: "100%",
       overflow: "hidden",
       display: "flex",
@@ -73,7 +78,6 @@ function TextImageSection(_ref) {
     src: image.url
   })), text !== null && text !== undefined && /*#__PURE__*/React__default.createElement(Box, {
     sx: {
-      width: (image === null || image === void 0 ? void 0 : image.url) !== null && (image === null || image === void 0 ? void 0 : image.url) !== undefined ? "50%" : "100%",
       height: "100%",
       overflow: "hidden",
       display: "flex",

package/dist/esm/lib/getIcon.js

@@ -25,6 +25,11 @@ import MasksIcon from '@mui/icons-material/Masks';
 import BoltIcon from '@mui/icons-material/Bolt';
 import BedIcon from '@mui/icons-material/Bed';
 import AmbulanceIcon from './AmbulanceIcon.js';
+import LinkedInIcon from '@mui/icons-material/LinkedIn';
+import FaceBookIcon from '@mui/icons-material/Facebook';
+import TwitterIcon from '@mui/icons-material/Twitter';
+import LocalShippingIcon from '@mui/icons-material/LocalShipping';
+import InstagramIcon from '@mui/icons-material/Instagram';
 
 function getIcon(icon) {
   switch (icon) {
@@ -70,6 +75,16 @@ function getIcon(icon) {
       return BedIcon;
     case "AmbulanceIcon":
       return AmbulanceIcon;
+    case "LinkedInIcon":
+      return LinkedInIcon;
+    case "FaceBookIcon":
+      return FaceBookIcon;
+    case "TwitterIcon":
+      return TwitterIcon;
+    case "LocalShippingIcon":
+      return LocalShippingIcon;
+    case "InstagramIcon":
+      return InstagramIcon;
     default:
       return null;
   }

package/package.json

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

package/src/components/ColumnsSection.tsx

@@ -1,7 +1,15 @@
 import React from "react";
-import { Stack, Card, CardContent, Typography, Container } from "@mui/material";
+import {
+  Stack,
+  Card,
+  CardContent,
+  Typography,
+  Container,
+  Paper,
+} from "@mui/material";
 import getIcon from "../lib/getIcon.ts";
-import LocalShippingIcon from "@mui/icons-material/LocalShipping";
+
+type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
 
 interface ColumnProps {
   id: number;
@@ -16,6 +24,7 @@ interface ColumnsSectionProps {
   title: string;
   description: string;
   column: ColumnProps[];
+  maxWidth: MaxWidth;
 }
 
 export function ColumnsSection({
@@ -23,11 +32,10 @@ export function ColumnsSection({
 }: {
   readonly data: ColumnsSectionProps;
 }) {
-  const { column } = data;
+  const { column, maxWidth } = data;
 
-  console.log(LocalShippingIcon);
   return (
-    <Container maxWidth="lg" sx={{ my: 1 }}>
+    <Container maxWidth={maxWidth || "lg"} sx={{ my: 1 }}>
       <Stack
         spacing={2}
         direction="row"
@@ -39,41 +47,38 @@ export function ColumnsSection({
         {column.map((column) => {
           const Icon = getIcon(column.icon) as React.ElementType | null;
           return (
-            <Card
-              key={column.id}
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                justifyContent: "space-between",
-                flex: 1,
-                minWidth: "350px",
-              }}
-            >
-              <CardContent>
-                <Typography variant="h5" component="div" sx={{ mb: 2 }}>
-                  {Icon !== null && (
-                    <Icon
-                      sx={{
-                        mr: 2,
-                        mt: 0.2,
-                        width: "50px",
-                        height: "50px",
-                        fill: "currentColor",
-                        stroke: "none",
-                      }}
-                    />
-                  )}
-                  {column.heading}
-                </Typography>
-                <Typography
-                  variant="body2"
-                  color="text.secondary"
-                  component="div"
-                >
-                  {column.text}
-                </Typography>
-              </CardContent>
-            </Card>
+            <Paper sx={{ p: 2 }}>
+              <Typography
+                variant="h5"
+                sx={{
+                  mb: 2,
+                  display: "flex",
+                  justifyContent: "flex-start",
+                  alignItems: "center",
+                }}
+              >
+                {Icon !== null && (
+                  <Icon
+                    sx={{
+                      mr: 2,
+                      mt: 0.2,
+                      width: "50px",
+                      height: "50px",
+                      fill: "currentColor",
+                      stroke: "none",
+                    }}
+                  />
+                )}
+                {column.heading}
+              </Typography>
+              <Typography
+                variant="body2"
+                color="text.secondary"
+                component="div"
+              >
+                {column.text}
+              </Typography>
+            </Paper>
           );
         })}
       </Stack>

package/src/components/FeaturesSection.tsx

@@ -5,12 +5,15 @@ import {
   CardContent,
   Typography,
   Container,
-  CardMedia,
+  Box,
   CardActions,
   Button,
+  useTheme,
 } from "@mui/material";
 import getIcon from "../lib/getIcon.ts";
 
+type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
+
 interface FeatureProps {
   id: number;
   heading: string;
@@ -25,6 +28,7 @@ interface FeatureSectionProps {
   title: string;
   description: string;
   feature: FeatureProps[];
+  maxWidth: MaxWidth;
 }
 
 export function FeatureSection({
@@ -32,15 +36,26 @@ export function FeatureSection({
 }: {
   readonly data: FeatureSectionProps;
 }) {
-  const { feature } = data;
+  const { feature, maxWidth } = data;
+
+  const theme = useTheme();
+
   return (
-    <Container maxWidth="lg" sx={{ my: 1 }}>
+    <Container maxWidth={maxWidth || "lg"} sx={{ my: 1 }}>
       <Stack
         spacing={2}
-        direction="row"
+        direction={"row"}
         justifyContent="stretch"
         flexWrap="wrap"
-        sx={{ width: "100%" }}
+        sx={{
+          width: "100%",
+          [theme.breakpoints.up("xs")]: {
+            flexDirection: "column",
+          },
+          [theme.breakpoints.up("sm")]: {
+            flexDirection: "row",
+          },
+        }}
         useFlexGap={true}
       >
         {feature.map((feature) => {
@@ -53,11 +68,11 @@ export function FeatureSection({
                 flexDirection: "column",
                 justifyContent: "space-between",
                 flex: 1,
-                minWidth: "350px",
+                minWidth: 275,
               }}
             >
               <CardContent>
-                <CardMedia
+                <Box
                   sx={{
                     height: 140,
                     display: "grid",
@@ -78,7 +93,7 @@ export function FeatureSection({
                       }}
                     />
                   )}
-                </CardMedia>
+                </Box>
                 <Typography
                   variant="h5"
                   align="center"

package/src/components/FleetSection.tsx

@@ -10,12 +10,15 @@ import {
   Box,
   Chip,
   Paper,
+  useTheme,
 } from "@mui/material";
 import { StrapiImage } from "./StrapiImage.tsx";
 import RadarIcon from "@mui/icons-material/Radar";
 import SpeedIcon from "@mui/icons-material/Speed";
 import HeightIcon from "@mui/icons-material/Height";
 
+type MaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | undefined;
+
 interface ImageProps {
   id: number;
   url: string;
@@ -44,18 +47,30 @@ interface FleetSectionProps {
   title: string;
   description: string;
   airplane: AirplaneProps[];
+  maxWidth: MaxWidth;
 }
 
 export function FleetSection({ data }: { readonly data: FleetSectionProps }) {
-  const { airplane } = data;
+  const { airplane, maxWidth } = data;
+
+  const theme = useTheme();
+
   return (
-    <Container maxWidth="lg" sx={{ my: 1 }}>
+    <Container maxWidth={maxWidth || "lg"} sx={{ my: 1 }}>
       <Stack
         spacing={2}
-        direction="row"
+        direction={"row"}
         justifyContent="stretch"
         flexWrap="wrap"
-        sx={{ width: "100%" }}
+        sx={{
+          width: "100%",
+          [theme.breakpoints.up("xs")]: {
+            flexDirection: "column",
+          },
+          [theme.breakpoints.up("sm")]: {
+            flexDirection: "row",
+          },
+        }}
         useFlexGap={true}
       >
         {airplane.map((airplane) => (
@@ -66,7 +81,7 @@ export function FleetSection({ data }: { readonly data: FleetSectionProps }) {
               flexDirection: "column",
               justifyContent: "space-between",
               flex: 1,
-              minWidth: "350px",
+              minWidth: 275,
             }}
           >
             <CardHeader

package/src/components/Footer.js

@@ -18,6 +18,7 @@ import {
 import NextLink from "next/link";
 import { Link as MUILink } from "@mui/material";
 import Image from "next/image";
+import getIcon from "../lib/getIcon.ts";
 
 import PropTypes from "prop-types";
 
@@ -144,13 +145,15 @@ function Footer({
                     sx={{ width: "min-content", color: "primary.contrastText" }}
                   >
                     {company_socials.map((company_social, index) => {
+                      const Icon = getIcon(company_social.icon);
                       return (
                         <IconButton
                           key={index}
                           color="inherit"
                           href={company_social.url}
                         >
-                          {company_social.icon}
+                          {Icon !== null && <Icon sx={{ mr: 2, mt: 0.2 }} />}
+                          {/* {company_social.icon} */}
                         </IconButton>
                       );
                     })}

package/src/components/IconSection.tsx

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

package/src/components/TextImageSection.tsx

@@ -1,7 +1,14 @@
 "use client";
 
 import React from "react";
-import { Box, Container, Paper, Typography, Stack } from "@mui/material";
+import {
+  Box,
+  Container,
+  Paper,
+  Typography,
+  Stack,
+  useTheme,
+} from "@mui/material";
 const MuiMarkdown = React.lazy(
   () => import(/* webpackChunkName: "mui-markdown" */ "mui-markdown")
 );
@@ -41,25 +48,30 @@ function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
   /* TODO Text_content should deal with linebreaks,
   reading up upon mui-markdown docs is advised */
 
+  const theme = useTheme();
+
   return (
     <Container maxWidth={maxWidth || "lg"} sx={{ my: 1 }}>
       <Paper sx={{ p: 2 }}>
         {title && (
-          <Typography
-            variant="h1"
-            textAlign="center"
-            width={"100%"}
-            sx={{ pb: 2 }}
-          >
+          <Typography variant="h1" textAlign="center" sx={{ pb: 2 }}>
             {title}
           </Typography>
         )}
 
-        <Stack spacing={2} direction={reverse ? "row-reverse" : "row"}>
+        <Stack
+          spacing={2}
+          direction={reverse ? "row-reverse" : "row"}
+          sx={{
+            [theme.breakpoints.down("sm")]: {
+              flexDirection: "column",
+            },
+          }}
+        >
           {image?.url !== undefined && (
             <Box
               sx={{
-                width: text !== null && text !== undefined ? "50%" : "100%",
+                minWidth: 200,
                 height: "100%",
                 overflow: "hidden",
                 display: "flex",
@@ -79,10 +91,6 @@ function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
           {text !== null && text !== undefined && (
             <Box
               sx={{
-                width:
-                  image?.url !== null && image?.url !== undefined
-                    ? "50%"
-                    : "100%",
                 height: "100%",
                 overflow: "hidden",
                 display: "flex",

package/src/lib/getIcon.ts

@@ -19,6 +19,11 @@ import MasksIcon from "@mui/icons-material/Masks";
 import BoltIcon from "@mui/icons-material/Bolt";
 import BedIcon from "@mui/icons-material/Bed";
 import AmbulanceIcon from "./AmbulanceIcon.tsx";
+import LinkedInIcon from "@mui/icons-material/LinkedIn";
+import FaceBookIcon from "@mui/icons-material/Facebook";
+import TwitterIcon from "@mui/icons-material/Twitter";
+import LocalShippingIcon from "@mui/icons-material/LocalShipping";
+import InstagramIcon from "@mui/icons-material/Instagram";
 
 export default function getIcon(icon: string): React.ElementType | null {
   switch (icon) {
@@ -64,6 +69,16 @@ export default function getIcon(icon: string): React.ElementType | null {
       return BedIcon;
     case "AmbulanceIcon":
       return AmbulanceIcon;
+    case "LinkedInIcon":
+      return LinkedInIcon;
+    case "FaceBookIcon":
+      return FaceBookIcon;
+    case "TwitterIcon":
+      return TwitterIcon;
+    case "LocalShippingIcon":
+      return LocalShippingIcon;
+    case "InstagramIcon":
+      return InstagramIcon;
     default:
       return null;
   }

package/src/stories/Footer.stories.js

@@ -38,7 +38,7 @@ Orefs.args = {
     {
       name: "Facebook",
       url: "https://www.facebook.com/",
-      icon: <FacebookIcon />,
+      icon: "FacebookIcon",
     },
   ],
   //disclaimer_link: PropTypes.string,
@@ -68,17 +68,17 @@ Orefs.args = {
     {
       name: "Facebook",
       url: "https://www.facebook.com/",
-      icon: <FacebookIcon />,
+      icon: "FaceBookIcon",
     },
     {
       name: "Instagram",
       url: "https://www.instagram.com/",
-      icon: <InstagramIcon />,
+      icon: "InstagramIcon",
     },
     {
       name: "LinkedIn",
       url: "https://www.linkedin.com/",
-      icon: <LinkedInIcon />,
+      icon: "LinkedInIcon",
     },
   ],
 };
@@ -107,17 +107,17 @@ AMH.args = {
     {
       name: "Facebook",
       url: "https://www.facebook.com/",
-      icon: <FacebookIcon />,
+      icon: "FaceBookIcon",
     },
     {
       name: "Instagram",
       url: "https://www.instagram.com/",
-      icon: <InstagramIcon />,
+      icon: "InstagramIcon",
     },
     {
       name: "LinkedIn",
       url: "https://www.linkedin.com/",
-      icon: <LinkedInIcon />,
+      icon: "LinkedInIcon",
     },
   ],
   disclaimer_link: "#",