Move images

client/src/App.css

@@ -29,39 +29,50 @@ html,
   visibility: hidden;
 }
 
-.header {
+h1 {
   font-size: 80px;
   margin: 8px;
   font-weight: normal;
 }
 
-.sub-header {
+h2 {
   font-size: 52px;
   margin: 8px;
   font-weight: normal;
 }
 
-.sub-sub-header {
+h3 {
   font-size: 34px;
   margin-top: 18px;
   margin-bottom: 18px;
   font-weight: normal;
 }
 
+h4 {
+  font-size: 24px;
+  margin-top: 18px;
+  margin-bottom: 18px;
+  font-weight: normal;
+}
+
 .input-icon-wrapper {
   position: relative;
   display: inline-flex;
   align-items: center;
 }
 
-.name-input {
+.text-input {
   background-color: white;
   border-radius: 12px;
-  border: 2px solid #ccc; /* Adjust as needed */
+  border: none;
+  padding-left: 10px;
+  font-size: 25px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.name-input {
   width: 400px;
   height: 30px;
-  font-size: 25px;
-  padding-left: 10px;
   padding-right: 40px; /* Make room for the arrow */
 }
 
@@ -71,6 +82,18 @@ html,
   color: black; /* Adjust arrow color as needed */
 }
 
+.food-buttons {
+  display: flex;
+}
+
+.food-button img {
+  width: 100px; /* Or any size you prefer */
+  height: 100px; /* Ensure this is the same as the width for a perfect circle */
+  border-radius: 50%; /* This makes the image round */
+  object-fit: cover; /* This ensures the image covers the area nicely */
+  cursor: pointer; /* Optional: Changes the cursor to indicate it's clickable */
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;

client/src/App.js

@@ -3,13 +3,13 @@ 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})`,
+    // backgroundImage: `url(${backgroundImage})`,
+    backgroundImage: `url("/images/background.jpg")`,
     backgroundSize: "cover",
     backgroundPosition: "center",
     height: "100vh",

client/src/components/FoodButton.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+function FoodButton({ name }) {
+  const imageUrl = `/images/foods/${name}.png`;
+
+  return (
+    <div className="food-button">
+      <img
+        src={imageUrl}
+        alt={name}
+        style={{ borderRadius: "50%" }}
+      />
+    </div>
+  );
+}
+
+export default FoodButton;

client/src/components/NameInput.jsx

@@ -40,10 +40,9 @@ function NameInput(props) {
       <h3 className="sub-sub-header">please type your name to enter:</h3>
       <div className="input-icon-wrapper">
         <input
-          className="name-input"
+          className="text-input name-input"
           type="text"
           value={name}
-          placeholder="your name"
           onChange={handleChange}
           onKeyDown={handleKeyDown}
         />

client/src/components/Setup.jsx

@@ -1,10 +1,60 @@
 import React from "react";
+import FoodButton from "./FoodButton";
 
 function Setup() {
+  const foods = [
+    "banana",
+    "bratwurst",
+    "lollipop",
+    "meat",
+    "potato",
+    "tomato",
+    "water",
+  ];
+
+  const welcomeStyle = {
+    zIndex: 10,
+    color: "white",
+    textAlign: "center",
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-around",
+    alignItems: "center",
+  };
+
   return (
-    <div>
-      <h2>Setup Component</h2>
-      {/* Setup content goes here */}
+    <div style={welcomeStyle}>
+      <div>
+        <h4 className="sub-sub-sub-header">
+          Welcome to the Council of Foods - an assembly of diverse
+          <br /> foods, addressing the broken food system through debate.
+        </h4>
+        <h4 className="sub-sub-sub-header">
+          To begin a meeting, decide on a topic & pick which foods will be{" "}
+          <br /> participating!
+        </h4>
+      </div>
+      <div>
+        <h3>Topic:</h3>
+        <textarea
+          className="text-input"
+          rows="2"
+          cols="30"
+        ></textarea>
+      </div>
+      <div>
+        <h3>Foods:</h3>
+        <div className="food-buttons">
+          {foods.map((food) => (
+            <FoodButton
+              key={food}
+              name={food}
+            />
+          ))}
+        </div>
+      </div>
+      <button>Enter</button>
     </div>
   );
 }