Bigger redesign

pages/materialien.jsx

@@ -1,37 +1,44 @@
+// React, NextJS
 import React from "react";
 import Head from "next/head";
 
+// Bootstrap components
+import Table from 'react-bootstrap/Table';
+
 import Productpage from "../components/productpage.jsx";
 
 const content = {
   stahl: {
     title: "Materialien",
     text: `Wir fertigen Blechteile aus verschiedensten auf dem Weltmarkt erhältlichen Materialien. Rostende Stähle und nichtrostende Edelstähle gehörn dabei zu unserem Standardrepertoir, welche wir in den verschiedensten Stärken jederzeit vorrätig haben.`,
-    iconurl: "/icons/laserteile.svg",
-    iconalt: "Lasermachine beim herstellen von Laserteilen",
+    iconurl: "/icons/mat_stahl.svg",
+    iconalt: "Icon eines Stapels an Blech mit verschiedenen Stählen und Edelstählen",
     bgurl: "/background/materialien/stahl.webp",
+    bgtitle: "Bild mehrerer Stapel mit gebürstetem Edelstahl"
   },
   aluminium: {
     title: "Aluminium",
     text: `Aluminium ist aufgrund seiner spezifischen Festigkeit bei gleichzeitig geringem Volumen, sehr beliebt. So wird es vor allem dort verwendet, wo eine geringe Masse wichtig ist.`,
-    iconurl: "/icons/laserteile.svg",
-    iconalt: "Lasermachine beim herstellen von Laserteilen",
+    iconurl: "/icons/mat_aluminium.svg",
+    iconalt: "Icon eines Stapels an Blech mit verschiedenen Aluminiumlegierungen",
     bgurl: "/background/materialien/aluminium.webp",
+    bgtitle: "Bild mehrerer Stapel von Aluminiumblechen"
   },
   sonstiges: {
     title: "Sonstiges",
     text: `
     Falls Sie besondere Anforderungen haben, fertigen wir Ihre Teile gerne aus exotischen Materialien, wie z.B. Kuper, Mesing oder auch Gold - Für uns ist kein Material zu schwierig, wir freuen uns über Ihre Herausforderung!`,
-    iconurl: "/icons/laserteile.svg",
-    iconalt: "Lasermachine beim herstellen von Laserteilen",
+    iconurl: "/icons/mat_sonstiges.svg",
+    iconalt: "Icon eines Stapels an Blech mit selteneren Materialien wie z.B. Kupfer, Titan, Gold und Mu Metall",
     bgurl: "/background/materialien/sonstiges.webp",
+    bgtitle: "Bild mehrerer verschieden dicken Kupferblechen"
   },
 };
 
 function ContentSteel() {
   return (
     <>
-      <table className="table mt-5">
+      <Table className="mt-5">
         <thead className="table-secondary">
           <tr>
             <th>Stähle</th>
@@ -93,15 +100,15 @@ function ContentSteel() {
             <td></td>
           </tr>
         </tbody>
-      </table>
+      </Table>
     </>
   );
 }
 
-function ContenAluminum() {
+function ContentAluminum() {
   return (
     <>
-      <table className="table mt-5">
+      <Table className="mt-5">
         <thead className="table-secondary">
           <tr>
             <th>Aluminium</th>
@@ -126,15 +133,15 @@ function ContenAluminum() {
             <td>6,0</td>
           </tr>
         </tbody>
-      </table>
+      </Table>
     </>
   );
 }
 
-function ContenOther() {
+function ContentOther() {
   return (
     <>
-      <table className="table mt-5">
+      <Table className="mt-5">
         <thead className="table-secondary">
           <tr>
             <th>Sonstiges</th>
@@ -169,7 +176,7 @@ function ContenOther() {
             <td></td>
           </tr>
         </tbody>
-      </table>
+      </Table>
     </>
   );
 }
@@ -189,20 +196,29 @@ export default function Materialien(props) {
         bgurl={content.stahl.bgurl}
         title={content.stahl.title}
         text={content.stahl.text}
+        iconurl={content.stahl.iconurl}
+        iconalt={content.stahl.iconalt}
+        bgtitle={content.stahl.bgtitle}
         addtext={<ContentSteel />}
       />
       <Productpage
         bgurl={content.aluminium.bgurl}
         title={content.aluminium.title}
         text={content.aluminium.text}
-        addtext={<ContenAluminum />}
+       iconurl={content.aluminium.iconurl}
+       iconalt={content.aluminium.iconalt}
+       bgtitle={content.aluminium.bgtitle}
+        addtext={<ContentAluminum />}
         reversed
       />
       <Productpage
         bgurl={content.sonstiges.bgurl}
         title={content.sonstiges.title}
         text={content.sonstiges.text}
-        addtext={<ContenOther />}
+        iconurl={content.sonstiges.iconurl}
+        iconalt={content.sonstiges.iconalt}
+        bgtitle={content.sonstiges.bgtitle}
+        addtext={<ContentOther />}
       />
     </>
   );