Create first puzzle component

src/components/Puzzle1/PuzzleOne.css

@@ -0,0 +1,54 @@
+.popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 20px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    max-width: 400px; 
+  }
+
+  .popup h2 {
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+  }
+
+  .popup p {
+    font-size: 1.2rem;
+    margin-bottom: 10px;
+  }
+
+  .popup input[type="text"] {
+    width: 100%;
+    padding: 10px;
+    font-size: 1rem;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin-bottom: 10px;
+  }
+
+  .popup button {
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    font-size: 1rem;
+    cursor: pointer;
+    margin-right: 10px;
+  }
+
+  .popup button:last-child {
+    margin-right: 0;
+    background-color: #ccc;
+    color: #333;
+  }
+
+  .popup button:hover {
+    background-color: #0056b3;
+  }
+

src/components/Puzzle1/PuzzleOne.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import './PuzzleOne.css'
+
+export default function Puzzle1({ onClose, onSubmit }) {
+  const [answer, setAnswer] = useState('');
+
+  const handleSubmit = () => {
+    onSubmit(answer);
+    onClose();
+  };
+
+  return (
+    <div className="popup">
+      <h2>What's that displayed on Bob's computer? Looks like a cipher...maybe he kept some notes on his whiteboard? </h2>
+      <p>Decode the cipher: what does the message on Bob's computer mean?</p>
+      <input
+        type="text"
+        value={answer}
+        onChange={(e) => setAnswer(e.target.value)}
+        placeholder="Enter answer"
+      />
+      <button onClick={handleSubmit}>Submit</button>
+      <button onClick={onClose}>Close</button>
+    </div>
+  );
+}