Added easter egg quiz

Author: Dhruv Dange

components/HeroBanner.js

@@ -15,7 +15,7 @@ const HeroBanner = () => {
           <div className="row pt-5">
             <div className="col-lg-6 pb-5">
               <div className="d-md-block pycon-logo text-center text-lg-start">
-                <a href="#">
+                <a href="/2023/suprise">
                   <Image src={logo} width="100%" height="100%" alt="" />
                 </a>
               </div>

components/quiz.js

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from "react";
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+
+const Quiz = () => {
+  const [answer, setAnswer] = useState("");
+  const [questions, setQuestions] = useState([]);
+  const [answersQ, setAnswersQ] = useState([]);
+  const [currentQuestion, setCurrentQuestion] = useState(0);
+  const [openModal, setOpenModal] = useState(false);
+  const discountCode = "PYCON2023";
+
+  useEffect(() => {
+    setQuestions([
+      "Password",
+      "What is the name of the conference? \nA. pycon2023 \n B. pycon2022 \n C. pycon2021 \n D. pycon2020",
+    ]);
+
+    setAnswersQ([
+      "PYCON2023",
+      'A',
+    ]);
+  }, []);
+
+  useEffect(() => {
+    if (answer.toUpperCase() === answersQ[currentQuestion]) {
+      setAnswer("");
+      setCurrentQuestion(currentQuestion + 1);
+      if (currentQuestion === questions.length - 1) {
+        setOpenModal(true);
+      }
+    }
+  }, [answer]);
+
+  const handleAnswerChange = (event) => {
+    setAnswer(event.target.value);
+  };
+
+  const handleClose = () => {setOpenModal(false); window.location.href = "/2023";}
+  const copyToClipboard = async () => {
+    if ('clipboard' in navigator) {
+      return await navigator.clipboard.writeText(discountCode);
+    } else {
+      return document.execCommand('copy', true, discountCode);
+    }
+  }
+
+  return (
+    <>
+      <div className="cyber-container">
+        <div className="cyber-card">
+          {currentQuestion !== 0 && (
+            <h2 className="cyber-heading">
+              Answer These Questions for a Special Prize!
+            </h2>
+          )}
+          <div className="cyber-form-group">
+            <label className="cyber-label" htmlFor="passwordInput">
+              <text style={{whiteSpace: "pre-line"}}>{questions[currentQuestion]}</text>
+            </label>
+            <input
+              type="password"
+              className="cyber-form-control"
+              id="passwordInput"
+              value={answer}
+              onChange={handleAnswerChange}
+            />
+          </div>
+
+          <Modal show={openModal} onHide={handleClose}>
+        <Modal.Header closeButton>
+          <Modal.Title>Congratulations!</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>Woohoo, you completed the quiz! Here is a pycon ticket discount code just for you! <br/> {discountCode}</Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            Close
+          </Button>
+          <Button variant="primary" onClick={copyToClipboard}>
+            Copy Code
+          </Button>
+        </Modal.Footer>
+      </Modal>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Quiz;

pages/suprise.tsx

@@ -0,0 +1,9 @@
+import Quiz from "../components/quiz";
+
+type componentProps = {
+  isMobile: boolean;
+};
+
+export default function CyberQuiz() {
+  return <Quiz />;
+}

public/images/logos/python-256.png

@@ -239,8 +239,89 @@ button a {
   cursor: pointer;
   position: relative;
 }
+ 
+/* Cyper Page CSS */
+.cyber-container {
+  background-color: black;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cyber-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.cyber-form-group {
+  width: 100%;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center; /* Align items on the same line */
+  flex-direction: column;
+}
+
+.cyber-label {
+  color: #20C20E;
+  font-size: 24px;
+  margin: 2rem;
+}
+
+.cyber-heading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: #20C20E;
+  font-size: 2rem;
+  margin: 0;
+  padding: 1rem;
+  background-color: black;
+}
+
+
+.cyber-label2 {
+  color: #20C20E;
+  font-size: 24px;
+  margin-right: 10px;
+}
+
+.cyber-form-control {
+  flex: 1; /* Expand input to take remaining space */
+  border: 2px solid #20C20E;
+  background-color: black;
+  color: white;
+  padding: 10px;
+  border-radius: 5px;
+  outline: none;
+}
+
+.cyber-btn-primary {
+  background-color: #20C20E;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  outline: none;
+}
+
+@media (max-width: 768px) {
+  .cyber-form-group {
+    flex-direction: column; /* Change to column layout for mobile */
+  }
+  .cyber-label {
+    margin: 0.2rem;
+    margin-bottom: 1rem;
+  }
+}
 
-.green-btn {
+ .green-btn {
   color: white;
   background-color: #1f928d;
 }