starting Meals Comp

src/components/Meals/AvailableMeals.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+
+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 = () => {
+  return (
+    <section>
+
+    </section>
+  )
+}
+
+export default AvailableMeals

src/components/Meals/Meals.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Meals = props => {
+  return (
+    <div>Meals</div>
+  )
+}
+
+export default Meals

src/components/Meals/MealsSummary.jsx

@@ -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;
+}