Feature/banner (#386)

* banner (#385) * Update layout.js * Update banner.js * Update banner.js * Update banner.js * Update banner.js * updated banner * updated hero content position --------- Co-authored-by: Alex Beckett <[email protected]>
celestiaorg · Mar 18, 2024 · 76e5c0f · 76e5c0f
1 parent f2a3b2f
commit 76e5c0f
Show file tree

Hide file tree

Showing 4 changed files with 571 additions and 545 deletions.
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Header from "./header";
 import Footer from "./footer";
+import Banner from "./modules/banner";
 
 export default function Layout({ children, footerBoxes, footerBoxes2 }) {
 	const [loaded, setLoaded] = useState(false);
@@ -32,6 +33,7 @@ export default function Layout({ children, footerBoxes, footerBoxes2 }) {
 
 	return (
 		<>
+			<Banner/>
 			<Header />
 			{children}
 			<Footer FooterBoxes={footerBoxes} FooterBoxes2={footerBoxes2} />

diff --git a/src/components/modules/banner.js b/src/components/modules/banner.js
@@ -1,46 +1,50 @@
-import * as React from "react"
+import * as React from "react";
 // import Image from "../imageComponent";
 
 export default class Banner extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            banner : true
-        }
-    }
-    closeBanner = () => {
-        const self = this;
-        document.getElementById("banner").classList.add("hide");
-        setTimeout(function (){
-            localStorage.setItem('modular-fellows-banner', 'true')
-            self.setState({banner:false})
-        },600);
-    };
+	constructor() {
+		super();
+		this.state = {
+			banner: true,
+		};
+	}
+	closeBanner = () => {
+		const self = this;
+		document.getElementById("banner").classList.add("hide");
+		setTimeout(function () {
+			localStorage.setItem("modular-fellows-banner", "true");
+			self.setState({ banner: false });
+		}, 600);
+	};
 
-    componentDidMount() {
-        if (localStorage.getItem('modular-fellows-banner')) {
-            this.setState({banner:false})
-        }
-    }
+	componentDidMount() {
+		if (localStorage.getItem("modular-fellows-banner")) {
+			this.setState({ banner: false });
+		}
+	}
 
-    render() {
+	render() {
+		return this.state.banner === true ? (
+			<div id={"banner"} className='banner'>
+				<div className={"close-banner"} onClick={this.closeBanner}>
+					<i className={"icon-close"}></i>
+				</div>
+				<div className={"container"}>
+					<div className={"gap-3 justify-content-center align-items-center d-flex flex-column flex-lg-row"}>
+						<div className={"banner-text col-auto"}>
+							Get ready for the first Celestia hackathon! Infinite Space Bazaar begins on April 2 <div className={`emoji`}>☄️</div>
+						</div>
 
-        return this.state.banner === true ? <div id={'banner'} className="banner">
-            <div className={'container'}>
-                <div className={'close-banner'} onClick={this.closeBanner}><i className={'icon-close'}></i></div>
-                <div className={'row w-lg-80 align-items-center justify-content-center'}>
-                    {/* <div className={'col-2 position-relative d-none d-md-flex'}>
-                        <Image alt={'Modular Summit'} filename={'modular-summit.svg'} />
-                    </div> */}
-                    <div className={'col-auto'}>Celestia Genesis Drop is live! <div style={{fontSize: `32px`, display: `inline-block`, transform: `translateY(4px)` }}>✨</div></div>
-
-                    <a className={'col-auto mt-3 mt-sm-0'} href="https://genesis.celestia.org" target={'_blank'} rel={'noreferrer'}>
-                        <div>
-                            <button className={'button-simple'}>Check eligibility</button>
-                        </div>
-                    </a>
-                </div>
-            </div>
-        </div> : ''
-    }
+						<a className={"col-auto"} href='https://bazaar.celestia.org' target={"_blank"} rel={"noreferrer"}>
+							<div>
+								<button className={"button-simple"}>Register now</button>
+							</div>
+						</a>
+					</div>
+				</div>
+			</div>
+		) : (
+			""
+		);
+	}
 }