Add overlay

client/public/manifest.json

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

client/src/App.css

@@ -1,5 +1,26 @@
+@import url("https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+
+.App {
+  font-family: "Tinos", serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+body,
+html,
+#root,
+.App {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+
 .App {
   text-align: center;
+  position: relative;
+  height: 100vh;
+  width: 100vw;
 }
 
 .App-logo {

client/src/App.js

@@ -1,10 +1,22 @@
 import "./App.css";
-import Main from "./components/Main";
+import Overlay from "./components/Overlay";
+import Welcome from "./components/Welcome";
+import backgroundImage from "./images/council-of-foods-background.jpg";
 
 function App() {
+  const backgroundStyle = {
+    backgroundImage: `url(${backgroundImage})`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    height: "100vh",
+    width: "100vw",
+  };
+
   return (
-    <div className="App">
-      <Main />
+    <div className="App" style={backgroundStyle}>
+      <Overlay>
+        <Welcome />
+      </Overlay>
     </div>
   );
 }

client/src/components/Overlay.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+function Overlay({ children }) {
+  const overlayStyle = {
+    position: "absolute",
+    top: 0, // Start from the very top
+    left: 0, // Start from the very left
+    height: "100%", // Cover full parent height
+    width: "100%", // Cover full parent width
+    backgroundColor: "rgba(0, 0, 0, 0.5)", // Semi-transparent black
+  };
+
+  return <div style={overlayStyle}>{children}</div>;
+}
+
+export default Overlay;

client/src/components/Welcome.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+function Welcome() {
+  const welcomeStyle = {
+    zIndex: 10,
+    color: "white",
+    textAlign: "center",
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center", // Center the content vertically
+    alignItems: "center",
+  };
+
+  const contentStyle = {
+    // Add padding to the bottom to push the content up slightly
+    paddingBottom: "50%", // Adjust this value to control the shift
+  };
+
+  return (
+    <div style={welcomeStyle}>
+      {/* Wrap the text content for individual styling */}
+      <div style={contentStyle}>
+        <p>welcome to</p>
+        <h1>COUNCIL OF FOODS</h1>
+      </div>
+    </div>
+  );
+}
+
+export default Welcome;