Created the Drinks Menu page and styled it.

src/App.js

@@ -9,6 +9,7 @@ import Login from './Pages/login';
 import Menu from './Pages/menu';
 import OrderOnline from './Pages/orderOnline';
 import ReservationConfirmation from './Pages/reservationComfirmation';
+import DrinksPage from './Pages/DrinksPage';
 
 
 
@@ -25,6 +26,7 @@ class App extends Component {
             <Route path="/about" element={<About />} />
             <Route path="/menu" element={<Menu />} />
             <Route path="/bookingPage" element={<BookingPage />} />
+            <Route path="/drinksPage" element={<DrinksPage />} />
             {/*<Route path="/orderOnline" element={<OrderOnline />} />*/}
             <Route path="/login" element={<Login />} />
         </Routes>

src/Pages/DrinksPage.css

@@ -0,0 +1,19 @@
+.drinksPage-container {
+    display: flex;
+    justify-content: center;
+}
+
+.drinksPage-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 40px;
+    margin: 60px 0px;
+    width: 100%;
+    max-width: 1200px;
+}
+
+.drinksPage-content img {
+    width: 100%;
+    object-fit: contain;
+}

src/Pages/DrinksPage.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import './DrinksPage.css';
+
+import Nav from '../Components/nav';
+import Header from '../Components/homeHeader';
+import Footer from '../Components/footer';
+import SectionHeader from '../Components/SectionHeader';
+
+import drinksMenu1 from '../images/drinksMenu1.jpg';
+import drinksMenu2 from '../images/drinksMenu2.jpg';
+import drinksMenu3 from '../images/drinksMenu3.jpg';
+import drinksMenu4 from '../images/drinksMenu4.jpg';
+import drinksMenu5 from '../images/drinksMenu5.jpg';
+
+function DrinksPage() {
+  return (
+    <div>
+        <Nav />
+        <Header />
+        <SectionHeader SectionHeader_text="Drinks Menu"/>
+        <div className='drinksPage-container section-margin'>
+            <div className='drinksPage-content'>
+                <img className='drinksMenu-image' src={drinksMenu1} alt='Drinks Menu'></img>
+                <img className='drinksMenu-image' src={drinksMenu2} alt='Drinks Menu'></img>
+                <img className='drinksMenu-image' src={drinksMenu3} alt='Drinks Menu'></img>
+                <img className='drinksMenu-image' src={drinksMenu4} alt='Drinks Menu'></img>
+                <img className='drinksMenu-image' src={drinksMenu5} alt='Drinks Menu'></img>
+            </div>
+        </div>
+        <Footer></Footer>
+    </div>
+  )
+}
+
+export default DrinksPage

src/Pages/menu.js

@@ -335,9 +335,12 @@ class Menu extends Component {
                         <DrinkItem drinks={drinksType.redbull}/>
                     </div>
                     <p className='section-margin'>
-                        Please note that alcohol drinks are only available on seat in and no online orders.
+                        Please note that the following are only available on seat in (no online orders).
                     </p>
-                    <NavLink className='primary-btn2' to="/about">Open Alcohol Menu</NavLink>
+                    <p className='section-margin'>
+                        Alcohol Drinks | Hot Drinks | Milkshakes | Some Cold Drinks
+                    </p>
+                    <NavLink className='primary-btn2' to="/drinksPage">Open Complete Drinks Menu</NavLink>
                 </div> 
                 <SectionHeader SectionHeader_text="Traditional Menu"/>
                 <div className='traditional-menu section-margin'>