HOME
- {/*
TOUR */}
+
TOUR
MERCH
SHOWS
ABOUT
diff --git a/frontend/src/components/Pages/Tours/TourFlyers/Maldevera-East-Coast-Tour-2026-Flyer.png b/frontend/src/components/Pages/Tours/TourFlyers/Maldevera-East-Coast-Tour-2026-Flyer.png
new file mode 100644
index 0000000..84f1c8d
Binary files /dev/null and b/frontend/src/components/Pages/Tours/TourFlyers/Maldevera-East-Coast-Tour-2026-Flyer.png differ
diff --git a/frontend/src/components/Pages/Tours/Tours.css b/frontend/src/components/Pages/Tours/Tours.css
index feae1f3..f3ce613 100644
--- a/frontend/src/components/Pages/Tours/Tours.css
+++ b/frontend/src/components/Pages/Tours/Tours.css
@@ -8,7 +8,7 @@
font-weight: bold;
padding: 20px;
padding-bottom: 110px; /* add room for audio player */
- height: 70vh;
+ min-height: 70vh;
}
.tour-page-header {
@@ -16,11 +16,13 @@
}
.tour-flyer {
+ display: block;
width: 100%;
height: auto;
object-fit: contain;
max-width: 600px;
- margin: 20px;
+ margin: 20px auto;
+ cursor: pointer;
}
.tour-flyer-overlay {
diff --git a/frontend/src/components/Pages/Tours/Tours.js b/frontend/src/components/Pages/Tours/Tours.js
index 57917b7..11ec7e3 100644
--- a/frontend/src/components/Pages/Tours/Tours.js
+++ b/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 (
-
- 2026 Tour info coming soon...
-
+
+
setIsOpen(true)}
+ />
+
+
setIsOpen(false)}
+ className='flyer-modal'
+ overlayClassName='flyer-overlay'
+ >
+
setIsOpen(false)}
+ />
+
)
}