Add splash opening (#14)

* Add splash opening

* Add mentor applications closed to homepage

* Add hacker manual

* Typewriter effect

* Update venue

* Don't intercept on ctrl, alt, shif etc.

* Fix venue name

* Update favicon

package.json

@@ -35,6 +35,7 @@
     "react-modal": "^3.15.1",
     "react-random-reveal": "^2.0.0",
     "react-responsive": "^9.0.0-beta.10",
+    "typewriter-effect": "^2.21.0",
     "yet-another-react-lightbox": "^2.2.2"
   },
   "devDependencies": {

src/components/EthBerlinLogo.jsx

@@ -1,10 +1,41 @@
 import React from "react";
-import logo from "../images/ethberlin4-logo.png";
+import Typewriter from "typewriter-effect";
 
 const EthBerlinLogo = React.forwardRef((props, ref) => {
   return (
-    <a ref={ref} className={`${props.className}`} href="/">
-      <img src={logo} alt="EthBerlin" />
+    <a
+      ref={ref}
+      className={`text-black hover:no-underline ${props.className}`}
+      href="/"
+    >
+      <div className="font-dotpassport text-3xl tracking-widest">
+        {/* <Typewriter
+          options={{
+            cursor: null,
+            strings: ["ETHBerlin04"],
+            autoStart: true,
+            loop: true,
+            delay: 30,
+          }}
+        /> */}
+        ETHBerlin04
+      </div>
+      <div className="font-ocra text-[.63rem] uppercase">
+        {
+          <Typewriter
+            options={{
+              cursor: null,
+              strings: ["<<<<<<<<<<<<<identity<<crisis<<<"],
+              autoStart: true,
+              loop: true,
+              delay: 30,
+              deleteSpeed: 30,
+              pauseFor: 10000,
+            }}
+          />
+        }
+        {/* {"<<<<<<<<<<<<<identity<<crisis<<<"} */}
+      </div>
     </a>
   );
 });

src/components/Layout.jsx

@@ -4,9 +4,13 @@ import Sidebar from "./Sidebar";
 import SecurityStrip from "./SecurityStrip";
 import ethLogo from "../assets/ethereum.png";
 
-const Layout = ({ children, showEthDiamond }) => {
+const Layout = ({ children, showEthDiamond, className, hidden }) => {
   return (
-    <div className="flex flex-col min-h-screen min-w-screen">
+    <div
+      className={`${
+        className ? className : ""
+      } flex flex-col min-h-screen min-w-screen`}
+    >
       <div className="flex-1 flex flex-col min-h-full font-bundessans text-black max-w-[100rem] m-auto">
         <Sidebar />
         <Seo />
@@ -15,7 +19,11 @@ const Layout = ({ children, showEthDiamond }) => {
           className={`z-10 hidden md:flex justify-end my-9 sm:mr-12 font-ocra text-black`}
         >
           <div>May 24-26, 2024</div>
-          <div className="sm:ml-8">Kreuzberg, Berlin</div>
+          <div className="sm:ml-8">
+            <a href="https://cic.com/berlin/" target="_blank">
+              CIC Innovation Campus, Berlin
+            </a>
+          </div>
         </div>
         {/* SecurityStrip*/}
         <div
@@ -43,7 +51,7 @@ const Layout = ({ children, showEthDiamond }) => {
 
         <div className="flex flex-row flex-1 ml-4 mr-4 sm:mr-8  sm:ml-72">
           {children && (
-            <div className="flex-grow sm:mt-24 mb-16 w-full sm:mr-8">
+            <div className="flex-grow sm:mt-16 mb-16 w-full sm:mr-8">
               {children}
             </div>
           )}

src/components/Sidebar.jsx

@@ -21,9 +21,9 @@ const Sidebar = ({ className }) => {
         {" "}
         <<M<ANIFESTO
       </a>
-      <a className="my-2" href="/hack">
+      <a className="my-2" href="/hacker-manual">
         {" "}
-        &lt;&lt;H&lt;ACK
+        &lt;&lt;H&lt;ACKER MANUAL
       </a>
       <a className="my-2" href="/face-idont">
         {" "}

src/html.js

@@ -18,26 +18,38 @@ export default function HTML(props) {
 
             function checkKey(e) {
                 e = e || window.event;
-                if (e.key == 'm' || e.key == 'M') {
-                  window.location.href= "/manifesto";
-                }
-                else if (e.key == 'h' || e.key == 'H') {
-                  window.location.href= "/hack";
-                }
-                else if (e.key == 'i' || e.key == 'I') {
-                  window.location.href= "/contact";
-                }
-                else if (e.key == 'd' || e.key == 'D') {
-                  window.location.href= "/decentralization";
-                }
-                else if (e.key == 'o' || e.key == 'O') {
-                  window.location.href= "/code-of-conduct";
-                }
-                else if (e.key == 'f' || e.key == 'F') {
-                  window.location.href= "/face-idont";
+
+                // Check if any modifier keys are pressed
+                if (e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) {
+                  // Exit the function if any modifier keys are pressed
+                  return;
                 }
-                else if (e.key == 'b' || e.key == 'B') {
-                  window.location.href= "https://blog.dod.ngo/";
+
+                switch (e.key.toLowerCase()) {
+                    case 'm':
+                        window.location.href= "/manifesto";
+                        break;
+                    case 'h':
+                        window.location.href= "/hacker-manual";
+                        break;
+                    case 'i':
+                        window.location.href= "/contact";
+                        break;
+                    case 'd':
+                        window.location.href= "/decentralization";
+                        break;
+                    case 'o':
+                        window.location.href= "/code-of-conduct";
+                        break;
+                    case 'f':
+                        window.location.href= "/face-idont";
+                        break;
+                    case 'b':
+                        window.location.href= "https://blog.dod.ngo/";
+                        break;
+                    default:
+                        // If key doesn't match any case, do nothing
+                        break;
                 }
             }
             `,