import React from 'react';
import { Box, Typography } from '@mui/material';
import Paper from '@mui/material/Paper';

const HomePage: React.FC = () => {
  return (
          <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>
  );
};
  
export default HomePage;