add meals components

src/App.js

@@ -1,13 +1,17 @@
-import React from 'react';
+import React from "react";
 
-import Header from './components/Layout/Header';
+import Header from "./components/Layout/Header";
+import Meals from "./components/Meals/Meals";
 
 const App = () => {
   return (
     <>
       <Header />
+      <main>
+        <Meals />
+      </main>
     </>
-    )
-}
+  );
+};
 
 export default App;

src/components/Meals/AvailableMeals.js

@@ -0,0 +1,40 @@
+import classes from "./AvailableMeals.module.css";
+
+const DUMMY_MEALS = [
+  {
+    id: "m1",
+    name: "Sushi",
+    description: "Finest fish and veggies",
+    price: 22.99,
+  },
+  {
+    id: "m2",
+    name: "Schnitzel",
+    description: "A german specialty!",
+    price: 16.5,
+  },
+  {
+    id: "m3",
+    name: "Barbecue Burger",
+    description: "American, raw, meaty",
+    price: 12.99,
+  },
+  {
+    id: "m4",
+    name: "Green Bowl",
+    description: "Healthy...and green...",
+    price: 18.99,
+  },
+];
+
+const AvailableMeals = () => {
+  const mealsList = DUMMY_MEALS.map((meal) => <li>{meal.name}</li>);
+
+  return (
+    <section className={classes.meals}>
+      <ul>{mealsList}</ul>
+    </section>
+  );
+};
+
+export default AvailableMeals;

src/components/Meals/AvailableMeals.module.css

@@ -0,0 +1,24 @@
+.meals {
+  max-width: 60rem;
+  width: 90%;
+  margin: 2rem auto;
+  animation: meals-appear 1s ease-out forwards;
+}
+
+.meals ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+@keyframes meals-appear {
+  from {
+    opacity: 0;
+    transform: translateY(3rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/components/Meals/Meals.js

@@ -0,0 +1,13 @@
+import MealsSummary from "./MealsSummary";
+import AvailableMeals from "./AvailableMeals";
+
+const Meals = () => {
+  return (
+    <>
+      <AvailableMeals />
+      <MealsSummary />
+    </>
+  );
+};
+
+export default Meals;

src/components/Meals/MealsSummary.js

@@ -0,0 +1,19 @@
+import classes from "./MealsSummary.module.css";
+
+const MealsSummary = () => {
+  return (
+    <section className={classes.summary}>
+      <h2>Delicious Food, Delivered To You</h2>
+      <p>
+        Choose your favorite meal from our broad selection of available meals
+        and enjoy a delicious lunch or dinner at home.
+      </p>
+      <p>
+        All our meals are cooked with high-quality ingredients, just-in-time and
+        of course by experienced chefs!
+      </p>
+    </section>
+  );
+};
+
+export default MealsSummary;

src/components/Meals/MealsSummary.module.css

@@ -0,0 +1,18 @@
+.summary {
+  text-align: center;
+  max-width: 45rem;
+  width: 90%;
+  margin: auto;
+  margin-top: -10rem;
+  position: relative;
+  background-color: #383838;
+  color: white;
+  border-radius: 14px;
+  padding: 1rem;
+  box-shadow: 0 1px 18px 10px rgba(0, 0, 0, 0.25);
+}
+
+.summary h2 {
+  font-size: 2rem;
+  margin-top: 0;
+}