feat: add project page

package.json

@@ -14,11 +14,13 @@
   "dependencies": {
     "@splidejs/react-splide": "^0.7.12",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",

src/data/processSteps.tsx

@@ -0,0 +1,32 @@
+export const steps = [
+    {
+        label: "Konzepterstellung",
+        shortName: "Konzept",
+        isCurrent: false,
+        description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna."
+    },
+    {
+        label: "MVP (Minimum Valible Product)",
+        shortName: "MVP",
+        isCurrent: true,
+        description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna."
+    },
+    {
+        label: "Projektvorstellung 01",
+        shortName: "Vorstellung 01",
+        isCurrent: false,
+        description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna."
+    },
+    {
+        label: "Projektvorstellung 02",
+        shortName: "Vorstellung 02",
+        isCurrent: false,
+        description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna."
+    },
+    {
+        label: "Finale Vorstellung",
+        shortName: "Finalisierung",
+        isCurrent: false,
+        description: "Occaecat in dolor eiusmod fugiat. Excepteur proident nostrud aliquip esse ut nostrud in ut esse. Proident ut consequat consequat consectetur magna."
+    },
+];

src/main.tsx

@@ -8,9 +8,7 @@ import './css/site.css'
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
         <Header />
-        <main>
             <App />
-        </main>
         <Footer />
     </React.StrictMode>,
 )

src/tsx/App.tsx

@@ -1,17 +1,16 @@
-import Faq from "./components/sections/Faq";
-import Introduction from "./components/sections/Introduction";
-import Process from "./components/sections/Process";
-import Stakeholder from "./components/sections/Stakeholder";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import HomePage from "./pages/HomePage";
+import ProjectPage from "./pages/ProjectPage";
 
-function App() {
+export default function App() {
   return (
-    <div>
-        <Introduction />
-        <Process />
-        <Stakeholder />
-        <Faq />
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/">
+          <Route index element={<HomePage />} />
+          <Route path="projekt" element={<ProjectPage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
   );
 }
-
-export default App;

src/tsx/components/Button.tsx

@@ -8,16 +8,16 @@ interface ButtonProps {
 }
 
 const Button: React.FC<ButtonProps> = ({ href, children, ariaLabel, isExternalLink = false }) => {
-  return (
-    <a
-      href={href}
-      aria-label={ariaLabel}
-      target={isExternalLink ? '_blank' : '_self'}
-      className="flex items-center justify-center gap-x-4 rounded-2xl w-max font-semibold px-5 py-2 bg-transparent border border-white text-white group transition-color ease-in-out duration-300 hover:bg-green-light-900 hover:border-green-light-900"
-    >
-      {children}
-    </a>
-  );
+    return (
+        <a
+            href={href}
+            aria-label={ariaLabel}
+            target={isExternalLink ? '_blank' : '_self'}
+            className="flex items-center justify-center gap-x-4 rounded-2xl w-max font-semibold px-5 py-2 bg-transparent border border-white text-white group transition-color ease-in-out duration-300 hover:bg-green-light-900 hover:border-green-light-900"
+        >
+            {children}
+        </a>
+    );
 };
 
 export default Button;