diff --git a/src/App.js b/src/App.js
index cca1714..08d0a73 100644
--- a/src/App.js
+++ b/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 (
- <>
-
- >
- )
-}
+ return (
+ <>
+
+
+
+
+ >
+ );
+};
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/components/Meals/AvailableMeals.js b/src/components/Meals/AvailableMeals.js
new file mode 100644
index 0000000..3e21d95
--- /dev/null
+++ b/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) =>
{meal.name});
+
+ return (
+
+ );
+};
+
+export default AvailableMeals;
diff --git a/src/components/Meals/AvailableMeals.module.css b/src/components/Meals/AvailableMeals.module.css
new file mode 100644
index 0000000..9b6582f
--- /dev/null
+++ b/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);
+ }
+}
\ No newline at end of file
diff --git a/src/components/Meals/Meals.js b/src/components/Meals/Meals.js
new file mode 100644
index 0000000..9521775
--- /dev/null
+++ b/src/components/Meals/Meals.js
@@ -0,0 +1,13 @@
+import MealsSummary from "./MealsSummary";
+import AvailableMeals from "./AvailableMeals";
+
+const Meals = () => {
+ return (
+ <>
+
+
+ >
+ );
+};
+
+export default Meals;
diff --git a/src/components/Meals/MealsSummary.js b/src/components/Meals/MealsSummary.js
new file mode 100644
index 0000000..378335d
--- /dev/null
+++ b/src/components/Meals/MealsSummary.js
@@ -0,0 +1,19 @@
+import classes from "./MealsSummary.module.css";
+
+const MealsSummary = () => {
+ return (
+
+ Delicious Food, Delivered To You
+
+ Choose your favorite meal from our broad selection of available meals
+ and enjoy a delicious lunch or dinner at home.
+
+
+ All our meals are cooked with high-quality ingredients, just-in-time and
+ of course by experienced chefs!
+
+
+ );
+};
+
+export default MealsSummary;
diff --git a/src/components/Meals/MealsSummary.module.css b/src/components/Meals/MealsSummary.module.css
new file mode 100644
index 0000000..a88ccac
--- /dev/null
+++ b/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;
+}
\ No newline at end of file