East coast tour2026

frontend/src/components/NavBar/NavBar.js

@@ -8,7 +8,7 @@ export default function NavBar() {
         <div className="navbar-wrapper">
             <div className='navigation-links'>
                 <NavLink className="my-nav-link" to="/" >HOME</NavLink>
-                {/* <NavLink className="my-nav-link" to='/tours'>TOUR</NavLink> */}
+                <NavLink className="my-nav-link" to='/tours'>TOUR</NavLink>
                 <NavLink className="my-nav-link" to='/merch'>MERCH</NavLink>
                 <NavLink className="my-nav-link" to='/shows'>SHOWS</NavLink>
                 <NavLink className="my-nav-link" to='/about'>ABOUT</NavLink>

frontend/src/components/Pages/Tours/Tours.css

@@ -8,19 +8,21 @@
   font-weight: bold;
   padding: 20px;
   padding-bottom: 110px; /* add room for audio player */
-  height: 70vh;
+  min-height: 70vh;
 }
 
 .tour-page-header {
   text-align: center;
 }
 
 .tour-flyer {
+  display: block;
   width: 100%;
   height: auto;
   object-fit: contain;
   max-width: 600px;
-  margin: 20px;
+  margin: 20px auto;
+  cursor: pointer;
 }
 
 .tour-flyer-overlay {

frontend/src/components/Pages/Tours/Tours.js

@@ -1,12 +1,35 @@
-import React from "react";
+import React, { useState } from "react";
+import ReactModal from 'react-modal';
 import './Tours.css'
+import tourFlyer from './TourFlyers/Maldevera-East-Coast-Tour-2026-Flyer.png'
+import { FancyBorder } from '../../Templates/FancyBorder'
 
 export default function Tours() {
+    const [isOpen, setIsOpen] = useState(false);
+
     return (
         <div className="tours-wrapper">
-            <h2 className="tour-page-header">
-                2026 Tour info coming soon...
-            </h2>
+            <FancyBorder>
+                <img
+                    src={tourFlyer}
+                    alt="Maldevera East Coast Tour 2026"
+                    className="tour-flyer"
+                    onClick={() => setIsOpen(true)}
+                />
+            </FancyBorder>
+            <ReactModal
+                isOpen={isOpen}
+                onRequestClose={() => setIsOpen(false)}
+                className='flyer-modal'
+                overlayClassName='flyer-overlay'
+            >
+                <img
+                    src={tourFlyer}
+                    alt='fullscreen flyer'
+                    className='modal-flyer-image'
+                    onClick={() => setIsOpen(false)}
+                />
+            </ReactModal>
         </div>
     )
 }