Merge pull request #41 from SmartCityFlensburg/feature/add-project-page

feat: add project page

.docker/Dockerfile.dev

@@ -9,6 +9,8 @@ RUN yarn build:dev
 
 
 FROM nginx:latest
+RUN rm /etc/nginx/conf.d/default.conf
+COPY .docker/nginx.conf /etc/nginx/conf.d/
 COPY --from=builder-web /app/build/dist /usr/share/nginx/html
 
 EXPOSE 80

.docker/Dockerfile.prod

@@ -9,6 +9,8 @@ RUN yarn build
 
 
 FROM nginx:latest
+RUN rm /etc/nginx/conf.d/default.conf
+COPY .docker/nginx.conf /etc/nginx/conf.d/
 COPY --from=builder-web /app/build/dist /usr/share/nginx/html
 
 EXPOSE 80

.docker/Dockerfile.stage

@@ -9,6 +9,8 @@ RUN yarn build:stage
 
 
 FROM nginx:latest
+RUN rm /etc/nginx/conf.d/default.conf
+COPY .docker/nginx.conf /etc/nginx/conf.d/
 COPY --from=builder-web /app/build/dist /usr/share/nginx/html
 
 EXPOSE 80

.docker/nginx.conf

@@ -0,0 +1,9 @@
+server {
+    listen       80;
+    listen  [::]:80;
+
+    location / {
+        root   /usr/share/nginx/html;
+        try_files $uri $uri/ /index.html;
+    }
+}

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.ts

@@ -0,0 +1,32 @@
+export const steps = [
+    {
+        label: "Konzepterstellung",
+        shortName: "Konzept",
+        isCurrent: false,
+        description: "Duis proident veniam minim et labore sit ex laboris consequat ea mollit et. Aute ut fugiat ex commodo voluptate nulla esse esse adipisicing fugiat aliqua aliquip nisi. Eu adipisicing nulla culpa velit fugiat ipsum nostrud elit et cupidatat voluptate pariatur in. Ut consequat magna quis culpa est magna. Mollit proident nostrud sint labore voluptate ullamco minim magna laborum commodo sint est. Dolor proident mollit nostrud aute elit quis incididunt reprehenderit mollit ea magna commodo reprehenderit exercitation. Elit ipsum voluptate ullamco exercitation ut reprehenderit labore voluptate sint reprehenderit qui. Cillum occaecat aliquip ea quis tempor incididunt ad non."
+    },
+    {
+        label: "MVP (Minimum Valible Product)",
+        shortName: "MVP",
+        isCurrent: true,
+        description: "Occaecat in dolor Test Test test 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,16 +1,17 @@
-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() {
   return (
-    <div>
-        <Introduction />
-        <Process />
-        <Stakeholder />
-        <Faq />
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/">
+          <Route index element={<HomePage />} />
+          <Route path="projekt" element={<ProjectPage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
   );
 }
 

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;