Conference Banner

src/components/Banner/banner.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import styles from './banner.module.scss';
+
+
+export default function Banner(){
+
+    const [displayBanner, setDisplayBanner] = React.useState(true)
+
+    const display = displayBanner ? styles.banner : styles.hidden;
+
+    function toggleBanner(){
+        setDisplayBanner(prevState => !prevState)
+    }
+
+    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">
+                        <button className={styles.button}>BUY TICKETS</button>
+                    </a>
+                    <button className={styles.exitButton} onClick={toggleBanner}>
+                        <img src="/images/icons/exit-cross.png" className={styles.exit} alt="close banner"/>
+                    </button>
+                </div>
+            </div>
+        ) 
+
+}

src/components/Banner/banner.module.scss

@@ -0,0 +1,77 @@
+@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: "Source Sans 3", sans-serif;
+    font-size: 1.5em;
+    font-weight: bold;
+    color: #0094FF;
+}
+
+.text{
+    font-family: "Source Sans 3", sans-serif;
+    font-size: 1.5em;
+    color: #0094FF;
+}
+
+.button{
+    border: none;
+
+    padding: 1rem 2rem;
+
+    background-color: #0094FF;
+    color: #FFFFFF;
+
+    min-width: 150px;
+}
+
+.exit{
+    height: 1em;
+}
+
+.exitButton{
+    border: none;
+    background-color: #E9F5FF;
+}
+
+@media (max-width:600px) {
+    .banner{
+        flex-direction: column;
+        justify-content: space-around;
+
+        height: 20vh;
+    }
+}

src/components/Layout.tsx

@@ -1,16 +1,20 @@
+import React from 'react';
 import { Footer } from '@/components/Footer/Footer';
 import { Navbar } from '@/components/Navbar/Navbar';
+import Banner from '@/components/Banner/banner.jsx'
 import styles from './layout.module.scss';
 
 interface ILayout {
     children: any;
 }
 
 export function Layout({ children }: ILayout): JSX.Element {
+
     return (
         <div className={styles.pageContainer}>
             <div className={styles.contentWrapper}>
                 <Navbar />
+                <Banner />
                 {children}
             </div>
             <Footer />

styles/base/typography.scss

@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
 @import '@/styles/utils/all';
 
 html {