Website auf React

website/simply-cpq/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/SimplyCPQ_Logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>simply-cpq</title>
+    <title>Simply CPQ</title>
   </head>
   <body>
     <div id="root"></div>

website/simply-cpq/package.json

@@ -10,8 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@fontsource-variable/inter": "^5.3.0",
+    "@mui/icons-material": "^9.3.1",
+    "@mui/material": "^9.3.1",
+    "@mui/x-data-grid": "^9.11.0",
     "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "react-router": "^8.3.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",

website/simply-cpq/src/App.tsx

@@ -1,8 +1,6 @@
 import { createBrowserRouter, RouterProvider } from 'react-router'
 import Layout from './Layout.tsx'
 import HomePage from './pages/HomePage.tsx'
-import LanguagesPage from './pages/LanguagesPage.tsx'
-import PropertyPage from './pages/PropertyPage.tsx'
 import NotFoundPage from './pages/NotFoundPage.tsx'
 
 import './App.css'
@@ -14,8 +12,6 @@ const router = createBrowserRouter([
     element: <Layout />,
     children: [
       { index: true, element: <HomePage /> },
-      { path: 'language', element: <LanguagesPage /> },
-      { path: 'propertypool', element: <PropertyPage /> },
       { path: '*', element: <NotFoundPage /> },
     ],
   },

website/simply-cpq/src/components/Footer.tsx

@@ -8,7 +8,7 @@ function Footer() {
     <AppBar position="static"> 
         <Toolbar>
             <Typography variant="body2" component="div" sx={{ flexGrow: 1 }}>
-                SimplyCPQ Material Editor (c) 2026 Dr. Thomas Sindt
+                Simply CPQ (c) 2026 Dr. Thomas Sindt
             </Typography>
         </Toolbar>
     </AppBar>

website/simply-cpq/src/components/NavBar.tsx

@@ -14,14 +14,17 @@ function NavBar() {
                 <img src={SimplyCPQLogo} alt="SimplyCPQ Logo" style={{ width: '40px', height: '40px' }} />
             </IconButton>
             <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-                SimplyCPQ Material Editor
+                Simply CPQ
+            </Typography>
+            <Typography variant="body2" component="div" sx={{ flexGrow: 1 }}>
+                einfach anbieten einfach gemacht
             </Typography>
             <Stack direction="row" spacing={2}>
-                <Button color="inherit" onClick={() => navigate('/propertypool')}>Property Pool</Button>
-                <Button color="inherit">Products</Button>
-                <Button color="inherit">Conditions</Button>
-                <Button color="inherit" onClick={() => navigate('/language')}>Languages</Button>
                 <Button color="inherit" onClick={() => navigate('/')}>Home</Button>
+                <Button color="inherit">Simply CPQ</Button>
+                <Button color="inherit">Dienstleistungen</Button>
+                <Button color="inherit">Über uns</Button>
+                <Button color="inherit">Kontakt</Button>
             </Stack>    
         </Toolbar>
     </AppBar>

website/simply-cpq/src/keycloak.ts

@@ -1,8 +0,0 @@
-import Keycloak from 'keycloak-js';
-
- const keycloak = new Keycloak({
-  url: 'http://localhost:8080',
-  realm: 'simplycpq',
-  clientId: 'scpq',
-});
-export default keycloak;

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-
-const LanguagesPage: React.FC = () => {
-    return (
-          <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
-              <Typography variant="h3">
-                  Language Management
-              </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"
-                }}
-              >
-              </Box>
-          </Box>
-      );
-  };
-
-export default LanguagesPage;

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-
-const PropertyPage: React.FC = () => {
-    return (
-          <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
-              <Typography variant="h3">
-                  Property Type Management
-              </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"
-                }}
-              >
-              </Box>
-          </Box>
-      );
-  };
-
-export default PropertyPage;