Header big

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;