Basic landing page

client/package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.1.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.0",

client/src/App.js

@@ -1,23 +1,17 @@
 import logo from './logo.svg';
 import './App.css';
+import ChooseFiles from './Components/ChooseFiles';
+import Receive from './Components/Receive';
+import SuperheroName from './Components/SuperheroName';
+import Header from './Components/Header';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Header />
+      <SuperheroName />
+      <ChooseFiles />
+      <Receive />
     </div>
   );
 }

client/src/Components/ChooseFiles.js

@@ -0,0 +1,18 @@
+import './button.css'
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+
+const ChooseFiles = () => {
+
+    const handleClick = () => {
+        alert("Choose Files")
+    }
+
+    return (
+        <div className = "choosefiles">
+            <button type = "button" class="button chooseFilesButton col-2" onClick={handleClick}>CHOOSE FILES</button>
+        </div>
+    );
+}
+
+export default ChooseFiles;

client/src/Components/Header.js

@@ -0,0 +1,14 @@
+import './button.css'
+import BAMLogo from '../assets/BAMLogo.png'
+
+const Header = () => {
+
+    return (
+        <div className = "Header">
+           <img src = {BAMLogo} class="bam-image-size" alt="BAM! Logo"/>
+            <button>?</button>
+        </div>
+    );
+}
+
+export default Header;

client/src/Components/Receive.js

@@ -0,0 +1,16 @@
+import './button.css'
+
+const Receive = () => {
+
+    const handleClick = () => {
+        alert("Receive Files")
+    }
+
+    return (
+        <div className = "receivefiles">
+            <button type = "button" class="button receiveFilesButton col-2" onClick={handleClick}>RECEIVE</button>
+        </div>
+    );
+}
+
+export default Receive;

client/src/Components/SuperheroName.js

@@ -0,0 +1,17 @@
+import './button.css'
+
+const SuperheroName = () => {
+
+    return (
+        <div className = "SuperheroName">
+            <form>
+                Superhero Name<br></br>
+                <label>
+                    <input type="text" name="name" placeholder="Enter Name"/>
+                </label>
+            </form>
+        </div>
+    );
+}
+
+export default SuperheroName;

client/src/Components/button.css

@@ -0,0 +1,15 @@
+.button {
+    font-family: "Roboto", sans-serif;
+    font-size: 22px;
+    font-weight: 800;
+    border-radius: 5px;
+    transition: transform 0.3s ease;
+}
+
+.receiveFilesButton {
+    background-color: rgba(168,198,250,255)
+}
+
+.chooseFilesButton {
+    background-color: rgba(255,180,176,255)
+}

client/src/index.css

@@ -11,3 +11,8 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.bam-image-size{
+  width: 170px;
+  height: 150px;
+}