Header big

package-lock.json

@@ -1359,6 +1359,35 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz",
+      "integrity": "sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+      "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
+      "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.1"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.18",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
+      "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",

src/App.js

@@ -13,10 +13,14 @@ import img_alaturca from './alaturca.jpg';
 import Eingabefeld from "./Components/eingabefeld";
 import "../node_modules/font-awesome/css/font-awesome.min.css";
 import Liste from "./Components/liste";
+import MainPage from "./Components/mainpage";
+import HeaderBig from "./Components/header_big";
+import EndPage from "./Components/endpage";
 
 function App() {
   return (
-    <div className="App">
+    <div className="App ">
+      <EndPage />
     </div>
   );
 }

src/Components/card.jsx

@@ -1,13 +1,18 @@
 import React from "react";
 import bild from "../paparoy.jpg";
 import ButtonPrimary from "./buttonPrimary";
+import Ueberschrift2 from "./ueberschrift2";
 
 function Card(props) {
   return (
     <div class="w-full rounded-xl overflow-hidden shadow-lg bg-gray1 ">
-      <img class="w-full max-h-60 object-fill" src={props.bild || bild} alt="Papa Roy"></img>
+      <div class="h-60">
+        <img class="w-full h-full object-cover" src={props.bild || bild} alt="Papa Roy"></img>
+      </div>
       <div class="px-6 py-4 flex justify-between">
-        <div class="font-bold text-xl flex justify-start m-3">{props.name || "Restaurant"}</div>
+        <div class="font-bold text-xl flex justify-start m-3">
+          <Ueberschrift2 name={props.name} />
+        </div>
         <ButtonPrimary name="Speisekarte" />
       </div>
     </div>

src/Components/endpage.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import HeaderBig from "./header_big";
+
+function EndPage() {
+  return (
+    <div>
+      <HeaderBig name=" " />
+    </div>
+  );
+}
+
+export default EndPage;

src/Components/header_big.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import p_logo_light from "../pizza_logo_light.png";
+import Ueberschrift1 from "./ueberschrift1";
+
+function HeaderBig(props) {
+  return (
+    <div class="bg-primary h-40 w-full p-2 pl-10 pr-10 flex justify-between items-center">
+      <img src={p_logo_light} alt="Logo" class="h-28"></img>
+      <Ueberschrift1 name={props.name} />
+    </div>
+  );
+}
+
+export default HeaderBig;

src/Components/mainpage.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Header1 from "../Components/header_1";
+import ButtonPrimary from "./buttonPrimary";
+import img_paparoy from "../paparoy.jpg";
+import img_alaturca from "../alaturca.jpg";
+import Card from "./card";
+
+function MainPage() {
+  return (
+    <div class="overflow-hidden">
+      <Header1 />
+      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
+        <Card name="Papa Roy" bild={img_paparoy} />
+        <Card name="A la Turca" bild={img_alaturca} />
+        <Card name="Pizza Olive" bild={img_paparoy} />
+      </div>
+    </div>
+  );
+}
+
+export default MainPage;

src/Components/ueberschrift1.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function Ueberschrift1(props) {
+  return <p class="font-bold text-4xl text-white">{props.name || "Text"}</p>;
+}
+
+export default Ueberschrift1;

src/Components/ueberschrift2.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function Ueberschrift2(props) {
+  return <p class="font-bold text-xl">{props.name || "Text"}</p>;
+}
+
+export default Ueberschrift2;