From 655f2c5f2e57e471c8ca6c4e8b1a2faae42a4b4e Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Fri, 7 Jul 2023 01:10:11 +0200
Subject: [PATCH] Created the Header.jsx

---
 src/pages/Home/sections/Header/Header.jsx | 26 +++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/pages/Home/sections/Header/Header.jsx

diff --git a/src/pages/Home/sections/Header/Header.jsx b/src/pages/Home/sections/Header/Header.jsx
new file mode 100644
index 0000000..bc2f8e8
--- /dev/null
+++ b/src/pages/Home/sections/Header/Header.jsx
@@ -0,0 +1,26 @@
+import {Box, List, Stack, Typography, useMediaQuery, useTheme} from "@mui/material";
+import CertificateImage from "@/common/assets/images/home/certificate.svg";
+import BulletItem from "@/pages/Home/sections/Header/components/BulletItem/index.js";
+
+export const Header = () => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down("lg"));
+
+    return (
+        <Stack direction="row" alignItems="center" justifyContent="space-evenly" sx={{mt: 5}}>
+            <Stack direction="column" justifyContent="center" sx={{width: "45rem"}}>
+                <Typography variant="h3" fontWeight={700} color="black">Die Lizenzierung
+                    <Box color="primary.main" component="span"> Ihrer App</Box> war noch nie so einfach.
+                </Typography>
+
+                <List sx={{maxWidth: "32rem", mt: 2}}>
+                    <BulletItem text="Erstellen, löschen und verwalten Sie Ihre Lizenzen"/>
+                    <BulletItem text="Platzhalter-Text"/>
+                    <BulletItem text="Hier wird auch irgendwann sicher nochmal was hin kommen"/>
+                </List>
+            </Stack>
+
+            {!isMobile && <img src={CertificateImage} alt="Certificate" height="65%"/>}
+        </Stack>
+    );
+}
\ No newline at end of file