add new link components

Author: wbglaeser

src/ui/screens/benefit-page/components/BenefitPageLinkButton.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { VBox } from '@/ui/shared-components/LayoutBoxes';
+import { Typography } from '@mui/material';
+import RegularButton from '@/ui/shared-components/buttons/RegularButton';
+import theme from '@/theme';
+
+const BenefitPageLinkButton = ({ link }) => {
+    console.log('Rendering BenefitPageLinkButton with link:', link);
+
+    return (
+        <VBox
+            sx={{
+                width: { xs: '100%', sm: 250 },
+                padding: { xs: 2, sm: 4 },
+                backgroundColor: "transparent",
+                border: "1px solid",
+                borderColor: "blue.main",
+                boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.25)',
+                borderRadius: theme.shape.borderRadius
+
+            }}
+        >
+            <VBox sx={{ gap: 2 }} >
+                <Typography variant="h4" sx={{ fontWeight: 500, wordBreak: "break-word" }}>
+                    {link?.title}
+                </Typography>
+                <Typography variant="body1" sx={{ wordBreak: "break-word" }}>
+                    {link?.description}
+                </Typography>
+                <RegularButton
+                    variant="transparentBlueOutlined"
+                    size='small'
+                    text={'Link öffnen'}
+                    link={link?.url}
+                />
+            </VBox >
+        </VBox >
+    );
+}
+
+export default BenefitPageLinkButton;

src/ui/screens/benefit-page/components/BenefitPageLinks.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { VBox, HBox } from '@/ui/shared-components/LayoutBoxes';
+import theme from '@/theme';
+import { Typography } from '@mui/material';
+import BenefitPageLinkButton from './BenefitPageLinkButton';
+
+const BenefitPageLinks = ({ t, linksList }) => {
+
+    return (
+        <VBox
+            sx={{
+                backgroundColor: 'white.main',
+                padding: { xs: '32px 20px', md: '32px' },
+                borderRadius: theme.shape.borderRadius,
+                boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.25)',
+                gap: 4,
+            }}
+        >
+            <VBox sx={{ gap: 4 }} >
+                <HBox gap={1} sx={{ maxWidth: 800, justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                    <Typography variant="h2" sx={{ fontWeight: 500, wordBreak: "break-word" }}>
+                        {t('app.benefitPage.links.title')}
+                    </Typography>
+                </HBox>
+                <HBox sx={{flexWrap: 'wrap', gap: 2, alignItems: 'center'}}>
+                    {
+                        linksList?.map((link, i) =>
+                            <BenefitPageLinkButton key={i} t={t} link={link} />
+                        )
+                    }
+                </HBox>            
+            </VBox >
+        </VBox >
+    );
+}
+
+export default BenefitPageLinks;