Added Easter Egg Quiz

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/coc.js

@@ -3,7 +3,14 @@ import ReactMarkdown from "react-markdown";
 export default function CoC({ markdownContent }) {
   return (
     <>
-      <h1 id="coc">Code of Conduct</h1>
+      <h1
+        className="com-head text-center"
+        data-aos="fade-down"
+        data-aos-duration="800"
+        id="coc"
+      >
+        Code of Conduct
+      </h1>
       <ReactMarkdown className="content">{markdownContent}</ReactMarkdown>
     </>
   );

components/faqs.js

@@ -1,12 +1,17 @@
 import ReactMarkdown from "react-markdown";
 
-export default function Faqs({markdownContent}) {
+export default function Faqs({ markdownContent }) {
   return (
     <>
-      <h1 id="faq">Frequently Asked Questions</h1>
-      <ReactMarkdown className="content">
-        {markdownContent}
-      </ReactMarkdown>
+      <h1
+        className="com-head text-center"
+        data-aos="fade-down"
+        data-aos-duration="800"
+        id="faq"
+      >
+        Frequently Asked Questions
+      </h1>
+      <ReactMarkdown className="content">{markdownContent}</ReactMarkdown>
     </>
   );
 }

components/header.js

@@ -64,8 +64,8 @@ const navBarItems = [
     name: "Python Express",
     href: "https://pythonexpress.org/",
     openInNewTab: true,
-  }
-]
+  },
+];
 
 export default function Header() {
   const [activeNavBarItem, setActiveNavBarItem] = useState();
@@ -79,7 +79,9 @@ export default function Header() {
       const sectionElement = document.getElementById(item.id);
       if (sectionElement) {
         const rect = sectionElement.getBoundingClientRect();
-        const isVisible = (rect.top - elementOffsetTop <= 0) && (rect.bottom - elementOffsetTop > 0);
+        const isVisible =
+          rect.top - elementOffsetTop <= 0 &&
+          rect.bottom - elementOffsetTop > 0;
         if (isVisible) {
           setActiveNavBarItem(i);
           // Stop checking once we find the visible element
@@ -91,17 +93,16 @@ export default function Header() {
 
   useEffect(() => {
     handleScroll();
-    window.addEventListener('scroll', handleScroll);
+    window.addEventListener("scroll", handleScroll);
     return () => {
-      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener("scroll", handleScroll);
     };
   }, [navBarScrollTrigger]);
 
-
   const navBarClickHandler = () => {
-    setNavBarToggle((prv) => (!prv));
-    setNavBarScrollTrigger((prv) => (!prv));
-  }
+    setNavBarToggle((prv) => !prv);
+    setNavBarScrollTrigger((prv) => !prv);
+  };
 
   return (
     <header className="bg-header sticky-top">
@@ -131,10 +132,16 @@ export default function Header() {
                 aria-label="Toggle navigation"
                 onClick={navBarClickHandler}
               >
-                <IconComponent name="bars" color="#000" backgroundColor='#FFF' />
+                <IconComponent
+                  name="bars"
+                  color="#000"
+                  backgroundColor="#FFF"
+                />
               </button>
               <div
-                className={"navbar-collapse" + (navBarToggle ? "" : " collapse")}
+                className={
+                  "navbar-collapse" + (navBarToggle ? "" : " collapse")
+                }
                 id="navbarNavDropdown"
               >
                 <ul className="navbar-nav">
@@ -145,8 +152,14 @@ export default function Header() {
                         target={item.openInNewTab ? "_blank" : "_self"}
                         onClick={navBarClickHandler}
                       >
-                        <span className={"nav-link" + (index == activeNavBarItem ? " active" : "")}>
-                          {item.name}</span>
+                        <span
+                          className={
+                            "nav-link" +
+                            (index == activeNavBarItem ? " active" : "")
+                          }
+                        >
+                          {item.name}
+                        </span>
                       </Link>
                     </li>
                   ))}
@@ -158,15 +171,13 @@ export default function Header() {
       </div>
       {/* schema */}
       <BreadcrumbJsonLd
-        itemListElements={
-          navBarItems.map((item, index) => (
-            {
-              position: index+1,
-              name: item.name,
-              item: item.openInNewTab ? item.href : `https://in.pycon.org${item.href}`,
-            }
-          ))
-        }
+        itemListElements={navBarItems.map((item, index) => ({
+          position: index + 1,
+          name: item.name,
+          item: item.openInNewTab
+            ? item.href
+            : `https://in.pycon.org${item.href}`,
+        }))}
       />
     </header>
   );

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;

components/travel.js

@@ -0,0 +1,17 @@
+import ReactMarkdown from "react-markdown";
+
+export default function Travel({ markdownContent }) {
+  return (
+    <>
+      <h1
+        className="com-head text-center"
+        data-aos="fade-down"
+        data-aos-duration="800"
+        id="Travel"
+      >
+        Getting to PyCon India 2023
+      </h1>
+      <ReactMarkdown className="content">{markdownContent}</ReactMarkdown>
+    </>
+  );
+}

data/travel.md

@@ -0,0 +1,38 @@
+# Travel Information for PyCon India 2023 in Hyderabad
+
+Welcome to PyCon India 2023 in Hyderabad! Below you'll find detailed travel information on how to reach the conference venue.
+
+## Getting to Hyderabad
+
+### By Plane - Rajiv Gandhi International Airport
+
+If you're arriving by air, the Rajiv Gandhi International Airport serves as your gateway to Hyderabad. Various Indian airlines operate flights to this airport, including Air India, Air India Express, Indian Airlines, Indigo Airlines, Trujet, and SpiceJet.
+
+### By Train - Secunderabad or Hyderabad
+
+For those opting for train travel, Indian Railways offer services to Hyderabad from different parts of India. Major railway stations include Secunderabad, Hyderabad, Kachiguda, and Begumpet. Hyderabad Deccan Station, also known as Nampally Station, is a significant hub for trains to South and North India via Secunderabad.
+
+### By Car
+
+Hyderabad is well-connected to other major cities by road. Routes like the Bangalore-Hyderabad corridor have been upgraded to four-lane divided highways, providing a convenient option for road travelers.
+
+### By Bus
+
+Hyderabad's extensive bus network, including state government and private buses, connects the city to various parts of Telangana, South India, and Western India. Major bus stations include JBS (Jubilee Bus Station) in Secunderabad and MGBS (Imliban), which holds the distinction of being one of the largest bus stations in the world.
+
+For more comprehensive travel information and options, please refer to the [Hyderabad Wiki Page](https://wikitravel.org/en/Hyderabad#Get_in).
+
+## Getting to the Conference Venue - JNTU-H, Kukatpally
+
+The conference will be held at JNTU-H, Kukatpally. Here are the different ways to reach the venue:
+
+### Via Hyderabad Metro
+
+JNTU-H, Kukatpally is best accessible via the Hyderabad Metro Red line. You can get down at either the "KPHB Colony" or "JNTU College" stop and then walk towards JNTU-H, Kukatpally.
+
+- **From the Blue Line:** If you're arriving via the Blue line, you can easily switch to the Red line (towards Miyapur) at Ameerpet station.
+- **From the Green Line:** If you're coming via the Green line, you can switch to the Red line (towards M.G. Bus Station) at the M.G. Bus Station stop.
+
+For a list of stations on the Hyderabad Metro Red line, you can refer to [Wikipedia](https://en.wikipedia.org/wiki/Red_Line_(Hyderabad_Metro)).
+
+We're excited to welcome you to PyCon India 2023 and hope you have a fantastic experience in Hyderabad! If you have any further inquiries or need assistance, feel free to contact us at [[email protected]](mailto:[email protected]).

pages/suprise.tsx

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

pages/travel.tsx

@@ -0,0 +1,31 @@
+import fs from "fs";
+import path from "path";
+import Travel from "../components/travel";
+import MiscLayout from "../components/miscLayout";
+
+interface TravelPageProps {
+  markdownContent: string;
+}
+
+export default function TravelPage({ markdownContent }: TravelPageProps) {
+  return (
+    <MiscLayout>
+      <Travel markdownContent={markdownContent} />
+    </MiscLayout>
+  );
+}
+
+export async function getStaticProps() {
+  const filePath = path.join(process.cwd(), "data", "travel.md");
+  let markdownContent = fs.readFileSync(filePath, "utf8");
+
+  markdownContent = markdownContent.replace(/^---[\s\S]*?---/g, "");
+
+  return {
+    props: {
+      markdownContent,
+    },
+  };
+}
+
+