diff --git a/src/App.css b/src/App.css
index 00c92fe..17a633a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -326,21 +326,25 @@ img {
}
/* Styling the food menu */
-.menu-section-title {
- font-size: 40px;
- color: #F4CE14;
- text-align: center;
+.foodItem-container {
+ max-width: 500px;
+ margin: 10px;
+ border: 2px solid burlywood;
+ border-radius: 20px;
+ padding: 10px;
}
.menuItem-title {
margin: 0;
- color: #F4CE14;
+ font-size: 20px;
+ color: burlywood;
}
.foodItem-image {
- width: 120px;
- height: 120px;
+ width: 150px;
+ height: 230px;
margin: 0;
+ border-radius: 20px;
}
.foodItem-image img {
@@ -348,6 +352,7 @@ img {
height: 100%;
object-fit: cover;
margin: 0;
+ border-radius: 20px;
}
.foodItem-info {
@@ -356,6 +361,10 @@ img {
align-items: center;
}
+.foodItem-info .foodItem-btn {
+ margin: 10px auto;
+}
+
.menu {
margin-left: var(--main-side-margin);
margin-right: var(--main-side-margin);
@@ -366,17 +375,53 @@ img {
gap: 20px;
}
+.foodItem-img-des-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.foodItem-img-des hr {
+ height: 1px;
+ background-color: black;
+ border: none;
+}
+
.foodItem-description {
width: 300px;
margin: 0;
}
+.foodItem-img-des .priceAndTitle {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
.foodItem-price h3 {
- font-size: 30px;
+ font-size: 20px;
+ color: burlywood;
+ margin: 0;
+}
+
+.menu .traditional-menu {
+ margin: 40px auto;
+ max-width: 1100px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
}
.menu h2 {
text-align: center;
+ font-family: 'Times New Roman', Times, serif;
+ font-size: 20px;
+}
+
+.dessertsAndBreakfast {
+ margin: 40px auto;
+ max-width: 1100px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
}
diff --git a/src/Components/assets/Cheese_Sandwich.webp b/src/Components/assets/Cheese_Sandwich.webp
new file mode 100644
index 0000000..bbad168
Binary files /dev/null and b/src/Components/assets/Cheese_Sandwich.webp differ
diff --git a/src/Components/assets/Eggs_Benedict.webp b/src/Components/assets/Eggs_Benedict.webp
new file mode 100644
index 0000000..b9988dc
Binary files /dev/null and b/src/Components/assets/Eggs_Benedict.webp differ
diff --git a/src/Components/assets/French_Toast.webp b/src/Components/assets/French_Toast.webp
new file mode 100644
index 0000000..a45f8f2
Binary files /dev/null and b/src/Components/assets/French_Toast.webp differ
diff --git a/src/Components/assets/Yogurt_Parfait.webp b/src/Components/assets/Yogurt_Parfait.webp
new file mode 100644
index 0000000..ab4c8d9
Binary files /dev/null and b/src/Components/assets/Yogurt_Parfait.webp differ
diff --git a/src/Components/assets/tacos.jpg b/src/Components/assets/tacos.jpg
new file mode 100644
index 0000000..e8af7b4
Binary files /dev/null and b/src/Components/assets/tacos.jpg differ
diff --git a/src/Pages/menu.js b/src/Pages/menu.js
index 0f4daae..8440f57 100644
--- a/src/Pages/menu.js
+++ b/src/Pages/menu.js
@@ -3,21 +3,29 @@ import Nav from '../Components/nav';
import Header from '../Components/homeHeader';
import Footer from '../Components/footer';
import Specials from '../Components/specials';
+import SectionHeader from '../Components/SectionHeader';
+
+import { NavLink } from "react-router-dom";
/* food images */
-import greekSalad from '../Components/assets/greekSalad.jpg'
-import bruchetta from '../Components/assets/bruchetta.svg'
-import lemonDessert from '../Components/assets/lemonDessert.jpg'
-import Biltong_droewors from '../Components/assets/Biltong_droewors.webp'
-import Boerewors from '../Components/assets/Boerewors.webp'
-import Cape_Malay_curry from '../Components/assets/Cape_Malay_curry.webp'
-import Malva_pudding from '../Components/assets/Malva_pudding.webp'
-import Chakalaka_pap from '../Components/assets/Chakalaka_pap.webp'
-import Braai_Shisa_nyama from '../Components/assets/Braai_Shisa_nyama.webp'
-import Bunny_chow from '../Components/assets/Bunny_chow.webp'
-import Amarula_Don_Pedro from '../Components/assets/Amarula_Don_Pedro.webp'
-import Bobotie from '../Components/assets/Bobotie.webp'
-import Melktert from '../Components/assets/Melktert.webp'
+import greekSalad from '../Components/assets/greekSalad.jpg';
+import bruchetta from '../Components/assets/bruchetta.svg';
+import lemonDessert from '../Components/assets/lemonDessert.jpg';
+import Biltong_droewors from '../Components/assets/Biltong_droewors.webp';
+import Boerewors from '../Components/assets/Boerewors.webp';
+import Cape_Malay_curry from '../Components/assets/Cape_Malay_curry.webp';
+import Malva_pudding from '../Components/assets/Malva_pudding.webp';
+import Chakalaka_pap from '../Components/assets/Chakalaka_pap.webp';
+import Braai_Shisa_nyama from '../Components/assets/Braai_Shisa_nyama.webp';
+import Bunny_chow from '../Components/assets/Bunny_chow.webp';
+import Amarula_Don_Pedro from '../Components/assets/Amarula_Don_Pedro.webp';
+import Bobotie from '../Components/assets/Bobotie.webp';
+import Melktert from '../Components/assets/Melktert.webp';
+import tacos from '../Components/assets/tacos.jpg';
+import Eggs_Benedict from '../Components/assets/Eggs_Benedict.webp';
+import Cheese_Sandwich from '../Components/assets/Cheese_Sandwich.webp';
+import Yogurt_Parfait from '../Components/assets/Yogurt_Parfait.webp';
+import French_Toast from '../Components/assets/French_Toast.webp';
/* dinks images */
import cock_pepsi from '../Components/assets/cock_pepsi.jpg'
@@ -28,74 +36,99 @@ import corona from '../Components/assets/corona.jpeg'
import heineken from '../Components/assets/heineken.jpeg'
const foodTypes = {
- greekSalad: {title: "Greek Salad",
- image: greekSalad,
- price: 112.99,
- description: "The famous greek salad of crispy lettuce, peppers, olives and our Chicago style feta cheese, garnished with crunchy garlic and rosemary croutons."
- },
- bruchetta: {title: "Bruchetta",
- image: bruchetta ,
- price: 115.99,
- description: "Our Bruchetta is made from grilled bread that has been smeared with garlic and seasoned with salt and olive oil. " ,
- },
- Biltong_droewors: {title: "Biltong & droewors",
+ greekSalad: {title: "Greek Salad",
+ image: greekSalad,
+ price: 112.99,
+ description: "The famous greek salad of crispy lettuce, peppers, olives and our Chicago style feta cheese, garnished with crunchy garlic and rosemary croutons."
+ },
+ bruchetta: {title: "Bruchetta",
+ image: bruchetta ,
+ price: 115.99,
+ description: "Our Bruchetta is made from grilled bread that has been smeared with garlic and seasoned with salt and olive oil. " ,
+ },
+ Biltong_droewors: {title: "Biltong & droewors",
image: Biltong_droewors,
price: 183.64,
description: "The meat is cured in a mixture of vinegar, salt, sugar and spices such as coriander and pepper, then hung to dry. The finished product is prized by health enthusiasts for its high protein and low fat content." ,
- },
- Boerewors: {title: "Boerewors",
- image: Boerewors,
- price: 183.26,
- description: "This is a traditional South African sausage made from beef, mixed with either pork or lamb and a mixture of spices. Boerewors are traditionally served in a coiled shape, similar to the Cumberland sausage and cooked on a braai (barbecue)." ,
- },
- Cape_Malay_curry: {title: "Cape Malay curry",
- image: Cape_Malay_curry,
- price: 135.85,
- description: "When combined with local produce, the aromatic spices such as cinnamon, saffron, turmeric and chilli created fragrant curries and stews, which are still popular in the area today." ,
- },
- Chakalaka_pap: {title: "Chakalaka & pap",
- image: Chakalaka_pap,
- price: 139.89,
- description: " Chakalaka is a vegetable dish made of onions, tomatoes, peppers, carrots, beans and spices, and is often served cold. Pap, meaning 'porridge', is similar to American grits and is a starchy dish made from white corn maize. " ,
- },
- Braai_Shisa_nyama: {title: "Braai/Shisa nyama",
- image: Braai_Shisa_nyama,
- price: 195.63,
- description: "usually comprising of beef, chicken, pork, lamb and vors (sausages) – this is not an outing for vegetarians!" ,
- },
- Bunny_chow: {title: "Bunny chow",
- image: Bunny_chow,
- price: 175.27,
- description: "Hollowed out loaves of bread, stuffed with spicy curry were originally created by the immigrant Indian community in the Natal area of Durban and served to workers for lunch. Try chicken, pork or vegetarian varieties containing lentils and beans." ,
- },
- Bobotie: {title: "Bobotie",
- image: Bobotie,
- price: 134.72,
- description: "Minced meat is simmered with spices, usually curry powder, herbs and dried fruit, then topped with a mixture of egg and milk and baked until set." ,
- }
-
+ },
+ Boerewors: {title: "Boerewors",
+ image: Boerewors,
+ price: 183.26,
+ description: "This is a traditional South African sausage made from beef, mixed with either pork or lamb and a mixture of spices. Boerewors are traditionally served in a coiled shape, similar to the Cumberland sausage and cooked on a braai (barbecue)." ,
+ },
+ Cape_Malay_curry: {title: "Cape Malay curry",
+ image: Cape_Malay_curry,
+ price: 135.85,
+ description: "When combined with local produce, the aromatic spices such as cinnamon, saffron, turmeric and chilli created fragrant curries and stews, which are still popular in the area today." ,
+ },
+ Chakalaka_pap: {title: "Chakalaka & pap",
+ image: Chakalaka_pap,
+ price: 139.89,
+ description: " Chakalaka is a vegetable dish made of onions, tomatoes, peppers, carrots, beans and spices, and is often served cold. Pap, meaning 'porridge', is similar to American grits and is a starchy dish made from white corn maize. " ,
+ },
+ Braai_Shisa_nyama: {title: "Braai/Shisa nyama",
+ image: Braai_Shisa_nyama,
+ price: 195.63,
+ description: "Usually comprising of beef, chicken, pork, lamb and vors (sausages) – this is not an outing for vegetarians!" ,
+ },
+ Bunny_chow: {title: "Bunny chow",
+ image: Bunny_chow,
+ price: 175.27,
+ description: "Hollowed out loaves of bread, stuffed with spicy curry were originally created by the immigrant Indian community in the Natal area of Durban and served to workers for lunch. Try chicken, pork or vegetarian varieties containing lentils and beans." ,
+ },
+ Bobotie: {title: "Bobotie",
+ image: Bobotie,
+ price: 134.72,
+ description: "Minced meat is simmered with spices, usually curry powder, herbs and dried fruit, then topped with a mixture of egg and milk and baked until set." ,
+ },
+ Tacos: {title: "Mexican Tacos",
+ image: tacos,
+ price: 134.72,
+ description: "Traditional Mexican beef tacos are made with marinated sliced or shredded beef on soft corn tortillas." ,
+ }
+
};
const dessertS = {
- Melktert: {title: "Melktert",
+ Melktert: {title: "Melktert",
image: Melktert,
price: 24.37,
description: "Similar to the British custard tart or Portuguese pasteis de nata, melktert consists of a pastry case filled with milk, eggs and sugar, which is usually thickened with flour." ,
},
- Amarula_Don_Pedro: {title: "Amarula Don Pedro",
+ Amarula_Don_Pedro: {title: "Amarula Don Pedro",
image: Amarula_Don_Pedro,
price: 72.56,
description: "a cream liqueur made from the indigenous marula fruit, blended with ice cream. Find it in every bar or take a bottle of Amarula home from duty-free to make your own!" ,
},
- Malva_pudding: {title: "Malva pudding",
+ Malva_pudding: {title: "Malva pudding",
image: Malva_pudding,
price: 64.75,
description: "malva pudding is a sweet and sticky baked sponge pudding made with apricot jam and served smothered in a hot cream sauce." ,
},
- lemonDessert: {title: "Lemon Dessert",
+ lemonDessert: {title: "Lemon Dessert",
image: lemonDessert,
price: 115.88,
description: "This comes straight from grandma's recipe book, every last ingredient has been sourced and is as authentic as can be imagined." ,
+ },
+ Eggs_Benedict: {title: "Eggs Benedict",
+ image: Eggs_Benedict,
+ price: 115.88,
+ description: "There's nothing like a classic, Hollandaise-topped eggs Benedict to start your day. Serving with roasted potatoes to mop up the extra egg yolks and sauce." ,
+ },
+ Cheese_Sandwich: {title: "Cheese Sandwich",
+ image: Cheese_Sandwich,
+ price: 115.88,
+ description: "Try one of our favorite Fancy Grilled Cheese Sandwiches. Fresh bread with your choice meats and vegetables and only the best cheese." ,
+ },
+ Yogurt_Parfait: {title: "Yogurt Parfait",
+ image: Yogurt_Parfait,
+ price: 115.88,
+ description: "A parfait is basically a fancy trifle that you can serve for breakfast. It looks great in a glass, but can also be made in a bowl." ,
+ },
+ French_Toast: {title: "French Toast",
+ image: French_Toast,
+ price: 115.88,
+ description: " white, whole wheat, brioche, cinnamon-raisin, Italian, or French! Delicious served hot with butter and maple syrup." ,
},
}
@@ -129,27 +162,34 @@ const drinks = {
function MenuItem({foods}) {
return (
-
-
-
-
{foods.title}
-
-
-
-
-
-
-
-
{foods.description}
-
-
-
-
R{foods.price}
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
{foods.title}
+
+
+
R{foods.price}
+
+
+
+
{foods.description}
+
+
+ Add To Cart
+
+
+
+
+
+
)
}
@@ -192,32 +232,47 @@ class Menu extends Component {
-