Transition from Welcome to Setup

client/src/App.css

@@ -36,7 +36,7 @@ html,
 }
 
 .sub-header {
-  font-size: 40px;
+  font-size: 52px;
   margin: 8px;
   font-weight: normal;
 }

client/src/App.js

@@ -1,9 +1,13 @@
 import "./App.css";
+import React, { useState } from "react";
 import Overlay from "./components/Overlay";
 import Welcome from "./components/Welcome";
+import Setup from "./components/Setup";
 import backgroundImage from "./images/council-of-foods-background.jpg";
 
 function App() {
+  const [currentView, setCurrentView] = useState("welcome"); // "welcome" or "setup"
+
   const backgroundStyle = {
     backgroundImage: `url(${backgroundImage})`,
     backgroundSize: "cover",
@@ -12,10 +16,21 @@ function App() {
     width: "100vw",
   };
 
+  const enterSetup = () => {
+    setCurrentView("setup");
+  };
+
   return (
-    <div className="App" style={backgroundStyle}>
+    <div
+      className="App"
+      style={backgroundStyle}
+    >
       <Overlay>
-        <Welcome />
+        {currentView === "welcome" ? (
+          <Welcome onEnterSetup={enterSetup} />
+        ) : (
+          <Setup />
+        )}
       </Overlay>
     </div>
   );

client/src/components/NameInput.jsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 
-function NameInput() {
+function NameInput(props) {
   const [name, setName] = useState("");
   const [isNameMissing, setIsNameMissing] = useState(false);
 
@@ -22,8 +22,7 @@ function NameInput() {
 
   function enterCouncil() {
     if (name) {
-      console.log("Entering council...");
-      setIsNameMissing(false);
+      props.onEnterSetup();
     } else {
       console.log("No name...");
       setIsNameMissing(true);

client/src/components/Setup.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+function Setup() {
+  return (
+    <div>
+      <h2>Setup Component</h2>
+      {/* Setup content goes here */}
+    </div>
+  );
+}
+
+export default Setup;

client/src/components/Welcome.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import NameInput from "./NameInput";
 
-function Welcome() {
+function Welcome({ onEnterSetup }) {
   const welcomeStyle = {
     zIndex: 10,
     color: "white",
@@ -20,7 +20,7 @@ function Welcome() {
         <h2 className="sub-header">welcome to</h2>
         <h1 className="header">COUNCIL OF FOODS</h1>
       </div>
-      <NameInput />
+      <NameInput onEnterSetup={onEnterSetup} />
     </div>
   );
 }