React website

website/simply-cpq/src/pages/HomePage.tsx

@@ -1,11 +1,47 @@
 import React from 'react';
+import { Box, Typography } from '@mui/material';
+import Paper from '@mui/material/Paper';
 
 const HomePage: React.FC = () => {
   return (
-    <div>
-      <h1>Welcome to the Home Page</h1>
-      <p>This is the main landing page of the application.</p>
-    </div>
+          <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
+              <Typography variant="h3">
+                  Willkommen zu Simply CPQ
+              </Typography>
+              <Box
+                sx={{
+                  display: "flex",           // Arrange children in a row
+                  flexDirection: "row",
+                  width: "100vw",             // Full width of the parent
+                  p: 2,                       // Padding around the flex container
+                  bgcolor: "#f5f5f5"
+                }}
+              >
+              <div>
+                  <Paper sx={{ height: 600, width: '40vw', marginRight: 2 }}>
+                    <Typography variant="body1" component="p" gutterBottom>
+                      Simply CPQ unterstützt Dich dabei, komplexe und variantenreiche Produkte effizient zu konfigurieren, belastbar zu kalkulieren und professionell am Markt anzubieten.<br /><br />
+                    </Typography>
+                    <Typography m={2} variant="body1" component="p" gutterBottom>
+                      Die Lösung schafft Klarheit in Angebotserstellung und Produktzusammenstellung. Sie reduziert manuelle Aufwände, erhöht die Qualität der Preisfindung und beschleunigt Deinen Weg vom Kundenbedarf zum fertigen Angebot.<br /><br />
+                    </Typography>
+                    <Typography variant="body1" component="p" gutterBottom>
+                      Besonders für kleine und mittelständische Unternehmen bietet Simply CPQ einen klaren Vorteil: eine flexible Plattform ohne Abhängigkeit von einem einzelnen Hersteller. Deine Daten bleiben in Deinem Eigentum und können in standardisierten Formaten exportiert sowie in offene Formate importiert werden.<br /><br />
+                    </Typography>
+                  </Paper>
+              </div>
+              <div>
+                  <Paper sx={{ height: 600, width: '40vw', marginRight: 2 }}>
+                    <Typography variant="body1" component="p" gutterBottom>
+                      Dank des modularen Aufbaus kannst Du Simply CPQ gezielt einsetzen und erweitern – von der API über Web-Komponenten bis hin zu individuellen Anwendungen. Die offene Architektur auf Basis etablierter Technologien wie REST, React, SQL, Markdown und Keycloak schafft eine solide Grundlage für nachhaltige und zukunftssichere Lösungen.<br /><br />
+                    </Typography>
+                    <Typography variant="body1" component="p" gutterBottom>
+                      Solltest Du später weitere Systeme einsetzen wollen, kannst Du Informationen, Produkte, Angebote und Regeln problemlos übertragen und weiterverwenden – sofern die Zielsysteme standardisierte Schnittstellen unterstützen.<br /><br />
+                    </Typography>
+                  </Paper>
+              </div>
+              </Box>
+          </Box>
   );
 };