Components Buttons, Header und Cards

src/App.css

@@ -1,9 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
 
 .App {
   text-align: center;
+  font-family: quicksand, arial;
 }
 
 .App-logo {
@@ -17,7 +19,7 @@
   }
 }
 
-.App-header {
+/*.App-header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
@@ -26,7 +28,7 @@
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
-}
+}*/
 
 .App-link {
   color: #61dafb;

src/App.js

@@ -1,20 +1,25 @@
 import logo from "./logo.svg";
-import Test from "./Components/test";
+import ButtonPrimary from "./Components/buttonPrimary";
+import ButtonSecondary from "./Components/buttonSecondary";
+import './App.css';
+import p_logo_dark from './pizza_logo_dark.png'
+import p_logo_light from './pizza_logo_light.png'
+import Header1 from "./Components/header_1";
+import test from "./Components/test";
+import Card from "./Components/card";
+import img_paparoy from './paparoy.jpg';
+import img_alaturca from './alaturca.jpg';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
+      <Header1 />
-        <img src={logo} className="App-logo" alt="logo" />
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4">
-        <p className="underline hover:text-blue-500">
+        <Card name="Papa Roy" bild={img_paparoy} />
-          Edit <code>src/App.js</code> and save to reload.
+        <Card name="A la Turca" bild={img_alaturca} />
-          <Test />
+        <Card name="Pizza Olive"/>
-        </p>
+      </div>
-        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
+  </div>
-          Learn React
-        </a>
-      </header>
-    </div>
   );
 }
 

src/Components/buttonPrimary.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function ButtonPrimary(props) {
+  return <button class="bg-primary hover:bg-primaryHover rounded-full h-9 w-32 text-white m-3"> {props.name || "Button"} </button>;
+}
+
+export default ButtonPrimary;

src/Components/buttonSecondary.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function ButtonSecondary(props) {
+  return <button class="bg-secondary hover:bg-secondaryHover rounded-full h-9 w-32 text-white m-3"> {props.name || "Button"} </button>;
+}
+
+export default ButtonSecondary;

src/Components/card.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import bild from '../paparoy.jpg';
+import ButtonPrimary from "./buttonPrimary";
+
+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="px-6 py-4 flex justify-between">
+      <div class="font-bold text-xl flex justify-start m-3">{props.name || "Restaurant"}</div>
+        <ButtonPrimary name="Speisekarte" />
+    </div>
+  </div>);
+}
+
+export default Card;

src/Components/header_1.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import p_logo_dark from '../pizza_logo_dark.png'
+import p_logo_light from '../pizza_logo_light.png'
+import ButtonSecondary from "./buttonSecondary";
+import ShoppingCart from '../shopping_cart.svg';
+
+function Header1() {
+   return <div class="bg-primary h-14 w-full p-2 flex justify-between items-center">
+            <img src={p_logo_light} alt="Logo" class="h-10"></img>
+            <div class="flex justify-center">
+              <ButtonSecondary name="Abmelden" />
+              <img src={ShoppingCart}></img>
+            </div> 
+          </div>
+}
+
+export default Header1;

src/Components/test.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 function test() {
-  return <p className="bg-green-800 rounded-lg"> test </p>;
+  return <p className="bg-primary"> test </p>;
 }
 
 export default test;

src/shopping_cart.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>

tailwind.config.js

@@ -2,6 +2,15 @@ module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {},
+    colors: {
+      primary: '#0E7768',
+      secondary: '#6FB98F',
+      primaryHover: '#13695D',
+      secondaryHover: '#69AF88',
+      white: '#ffffff',
+      gray1: '#EAEAEA',
+      gray2: '#FAFAFA'
+    }
   },
   plugins: [],
 };