Created a beautiful Offerings menu and styled it.

src/Components/OfferMenu.css

@@ -0,0 +1,68 @@
+
+
+.offerMenu {
+    position: relative;
+    margin: 130px 0px 250px 0px;
+    display: grid;
+    grid-template-columns: 1fr 1.5fr 1fr;
+    grid-template-rows: 1fr;
+}
+
+.offerMenu .offering {
+    margin: 30px 20px;
+    height: 400px;
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}
+
+.offerMenu .offering {
+    display: flex;
+    flex-direction: column;
+}
+
+.offerMenu .offering h1 {
+    font-size: 45px;
+    margin-bottom: 0px;
+    font-family: 'Times New Roman', Times, serif;
+}
+
+.offerMenu .offering h2 {
+    font-size: 25px;
+    margin-bottom: 0px;
+    font-family: 'Times New Roman', Times, serif;
+}
+
+.offerMenu .offering p {
+    margin: 0;
+    color: burlywood;
+}
+
+.offerMenu .offering .offering-btn {
+    max-width: 100px;
+    margin: 20px auto;
+}
+
+.woodBackground-container {
+    width: 100%;
+    height: 90px;
+    position: absolute;
+    top: 180px;
+    left: 50%;
+    translate: -50% ;
+}
+
+.woodBackground-container .woodBackground {
+    width: 100%;
+    height: 100px;
+    object-fit: cover;
+    border-radius: 10px;
+}
+
+.offerMenu .offering img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border: 5px solid burlywood;
+}

src/Components/OfferMenu.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import './OfferMenu.css';
+import { NavLink } from "react-router-dom";
+
+import SectionHeader from "./SectionHeader";
+
+import restaurant2 from '../images/restaurant2.jpg';
+import wood_background from '../images/wood-background.jpg';
+import starters1_image from '../images/starters1-image.jpg';
+import luxury_food from '../images/luxury-food.avif';
+import luxury_drinks from '../images/luxury-drinks.avif';
+
+function OfferMenu() {
+  return (
+    <div className='offerMenu-container section-margin'>
+        <SectionHeader SectionHeader_text="What We Offer"/>
+        <div className='offerMenu'>
+            <div className='offering'>
+                <img className='offering-image' src={starters1_image} alt='offering image'></img>
+                <h2>Starters</h2>
+                <p>meaty</p>
+                <p>vegetarian</p>
+                <p>vegan</p>
+            </div>
+            <div className='offering middle-offering'>
+                <h1>We Offer Only The Best</h1>
+                <p>The Grand Delight stands to take an old-world approach to service with a modern, 
+                   new-world approach to cuisine. The wine list has been designed in a way to 
+                   convey the best on offer from around the world.
+                </p>
+                <NavLink className='primary-btn offering-btn' to="/menu">View Menu</NavLink>
+                <img src={luxury_food} alt='offering image'></img>
+                <h2>Mains</h2>
+                <p>Breakfast</p>
+                <p>Starter</p>
+                <p>Meals</p>
+                <p>Deserts</p>
+            </div>
+            <div className='offering'>
+                <img src={luxury_drinks} alt='offering image'></img>
+                <h2>Drinks</h2>
+                <p>soft drinks</p>
+                <p>wine & beer</p>
+                <p>spirits</p>
+            </div>
+            <div className='woodBackground-container'>
+                <img className='woodBackground' src={wood_background} alt='wood background image image'></img>
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default OfferMenu

src/Components/main.js

@@ -8,6 +8,7 @@ import Story from "./Story";
 import SectionHeader from "./SectionHeader";
 import MenuIntro from "./MenuIntro";
 import PlaceIntro from "./PlaceIntro";
+import OfferMenu from "./OfferMenu";
 import { NavLink } from "react-router-dom";
 
 function Main() {
@@ -31,7 +32,7 @@ function Main() {
             <Story />
             <MenuIntro />
             <PlaceIntro />
-
+            <OfferMenu />
         </main>
     );
 }