Method banner

src/components/Banner/banner.jsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import styles from './banner.module.scss';
+
+export function Banner() {
+    const [displayBanner, setDisplayBanner] = useState(null);
+
+    useEffect(() => {
+        const stateCondition = localStorage.getItem('displayBanner');
+        console.log('localStorage = ' + localStorage.getItem('displayBanner'));
+        if (stateCondition === 'false') {
+            setDisplayBanner(false);
+        } else {
+            setDisplayBanner(true);
+        }
+        console.log('stateCondition =' + stateCondition);
+    }, []);
+
+    const hideBanner = () => {
+        localStorage.setItem('displayBanner', 'false');
+        setDisplayBanner(false);
+    };
+
+    const display = displayBanner ? styles.banner : styles.hidden;
+
+    return (
+        <div className={display}>
+            <div>
+                <h3 className={styles.textBold}>Method Conference</h3>
+            </div>
+            <div className={styles.textArea}>
+                <p className={styles.textBold}>Join us for a full day of code & learning.</p>
+                <p className={styles.text}>Saturday, October 12, 2024, @ eFactory</p>
+            </div>
+            <div className={styles.container}>
+                <a href="https://www.methodconf.com/2024/" target="_blank" className={styles.anchor}>
+                    <button className={styles.button}>BUY TICKETS</button>
+                </a>
+                <button className={styles.exitButton} onClick={hideBanner}>
+                    {/* eslint-disable */}
+                        <img src="/images/icons/exit-cross.png" className={styles.exit} alt="close banner" />
+                        {/* eslint-enable */}
+                    {/* We disabled this for linting because we don't have an icon 
+                        system for this site yet, and this component is temporary. They can
+                        be removed when the icon systems are integrated.*/}
+                </button>
+            </div>
+        </div>
+    );
+}

src/components/Banner/banner.module.scss

@@ -0,0 +1,84 @@
+@import '@/styles/utils/all';
+
+.container{
+    display: flex;
+    justify-content: space-between;
+
+    width: 12em;
+}
+
+.hidden {
+    display: none;
+}
+
+.banner {
+    display: flex;
+
+    height: 120px;
+    width: 98%;
+
+    margin: .5em;
+    padding: 0em 2em;
+
+    border-radius: 1em;
+    background-color: #E9F5FF;
+
+
+    justify-content: space-between;
+    align-items: center;
+
+    text-align: center;
+}
+
+.textArea{
+    margin: 0em 1em;
+}
+
+.textBold{
+    font-family: sans-serif;
+    font-size: 1.5em;
+    font-weight: bold;
+    color: #0094FF;
+}
+
+.text{
+    font-family: sans-serif;
+    font-size: 1.5em;
+    color: #0094FF;
+}
+
+.button{
+    border: none;
+
+    padding: 1rem 2rem;
+
+    background-color: #0094FF;
+    color: #FFFFFF;
+
+    min-width: 150px;
+}
+
+.anchor :hover{
+    cursor: pointer;
+}
+
+.exit{
+    height: 1em;
+}
+
+.exitButton{
+    border: none;
+    background-color: #E9F5FF;
+}
+
+.exitButton :hover{
+    cursor: pointer;
+}
+@media (max-width:600px) {
+    .banner{
+        flex-direction: column;
+        justify-content: space-around;
+
+        height: 20vh;
+    }
+}

src/components/Layout.tsx

@@ -1,3 +1,4 @@
+import { Banner } from '@/components/Banner/banner.jsx';
 import { Footer } from '@/components/Footer/Footer';
 import { Navbar } from '@/components/Navbar/Navbar';
 import styles from './layout.module.scss';
@@ -11,6 +12,7 @@ export function Layout({ children }: ILayout): JSX.Element {
         <div className={styles.pageContainer}>
             <div className={styles.contentWrapper}>
                 <Navbar />
+                <Banner />
                 {children}
             </div>
             <Footer />