diff --git a/frontend/src/components/NavBar/NavBar.js b/frontend/src/components/NavBar/NavBar.js index 16459fa..aad5693 100644 --- a/frontend/src/components/NavBar/NavBar.js +++ b/frontend/src/components/NavBar/NavBar.js @@ -8,7 +8,7 @@ export default function NavBar() {
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... -

+ + Maldevera East Coast Tour 2026 setIsOpen(true)} + /> + + setIsOpen(false)} + className='flyer-modal' + overlayClassName='flyer-overlay' + > + fullscreen flyer setIsOpen(false)} + /> +
) }