Skeleton almost done

ui-subsystem/src/App.js

 import logo from './logo.svg';
 import './App.css';
+import Landing from './components/Landing';
 
 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>
-    </div>
+    <Landing/>
   );
 }
 

ui-subsystem/src/components/Landing.css

+.bg {
+    background-color: black;
+    height: 100vh;
+    width: 100vw;
+    position: relative;
+    min-height: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    display: block;
+
+}
+
+.container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    width: 100vw;
+    height: 100vh;
+}
+
+.param-wrap {
+    display: block;
+    width: 80vw;
+    height: 100vh;
+    /* background-color: #FCFCFC; */
+    overflow-x: hidden;
+    overflow-y: hidden;
+    text-align: center;
+}
+
+.title {
+    color: white;
+    font-size: 2.5rem;
+    font-weight: 800;
+    display: block;
+}
+
+.split-container {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.options-bg {
+    display: block;
+    width: 53vw;
+    height: 100vh;
+    /* background-color: #FCFCFC; */
+    overflow-x: hidden;
+    overflow-y: hidden;
+    text-align: center;
+}
+.opitons-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.options {
+    width: 60.3125rem;
+    height: 3.5625rem;
+    border-radius: 2.5rem;
+    /* background-color: white; */
+    border: none;
+    display: flex;
+    justify-content: space-evenly;
+
+}
+
+.options-text {
+    font-size: large;
+    font-weight: 750;
+    color: white;
+}
+
+.add-plant-btn {
+    width: 11.25rem;
+    height: 3.5625rem;
+    border-radius: 2.5rem;
+    background-color: #AA88FF;
+    border: none;
+    color: white;
+    font-size: large;
+    font-weight: 750;
+}
+
+.options-text {
+    color: white
+}
+
+.new-plant {
+    color: white;
+    /* padding: 10px; */
+    margin: 1.25rem; 
+    width: 60.3125rem;
+    height: 3.5625rem;
+    background-color: #A8FF35;
+    border-radius: 2.5rem;
+    
+}
+
+.new-plant-text {
+    color: white
+}
+
+.plant-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.health-wrap {
+    display: block;
+    width: 11.25rem;
+    height: 100vh;
+    border-radius: 2.5rem;
+    background-color: #FFEA17;
+    align-items: center;
+    align-content: center;
+}
+
+.health-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+}
+
+.new-health {
+    width: 11.25rem;
+    height: 3.5625rem;
+    border-radius: 2.5rem;
+    background-color: #FFBF00;
+    margin: 1.25rem; 
+    color: white;
+    font-size: large;
+    font-weight: 750;
+}
+
+.health-header {
+    width: 11.25rem;
+    height: 3.5625rem;
+    border-radius: 2.5rem;
+    background-color: #FFBF00;
+    border: none;
+    color: white;
+    font-size: large;
+    font-weight: 750;
+    vertical-align: top;
+
+}
\ No newline at end of file

ui-subsystem/src/components/Landing.js

+import React, {useState, useEffect} from 'react';
+import './Landing.css';
+
+
+function Landing() {
+    const [plants,setPlants] = useState([]);
+    const [healths, setHealths] = useState([]); // fill this later w actual data
+
+    const loadPlant = () => {
+        const newPlant = (
+            <div className='new-plant'>
+                New Plant {plants.length + 1}
+            </div>
+        );
+
+        const newHealth = (
+            <div className='new-health'>
+                New Health {healths.length + 1}
+            </div>
+        );
+    
+        setPlants([...plants, newPlant]);
+        setHealths([...healths, newHealth])
+    };
+
+    
+
+    return (
+        <div className='bg'>
+            <div className='container'>
+                <div className='param-wrap'>
+                    <div className='title'>
+                        <p>Green Your World</p>
+                        <p>One Drop at a Time!</p>
+                    </div>
+                    <div className='split-container'>
+                        <div className='options-bg'>
+                            <div className='options-container'>
+                                <div className='options'>
+                                    <button className='add-plant-btn' onClick={loadPlant}>Add Plant</button>
+                                    <p className='options-text'>Max Water Usage</p>
+                                    <p className='options-text'>Min Moisture Level</p>
+                                    <p className='options-text'>Watering Hours</p>
+                                </div>
+                            </div>
+                            <div className='plant-container'>
+                                {plants.map((plant, index) => (
+                                    <div key = {index}>{plant}</div>
+                                ))}
+                            </div>
+                        </div>
+
+                        <div className='health-wrap'>
+                            <p className='health-header'>Plant Health</p>
+                            <div className='health-container'>
+                                {healths.map((health, index) => (
+                                    <div key = {index}>{health}</div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                    
+                </div>
+                
+            </div>
+                
+        </div>
+    )
+}
+
+export default Landing;
\ No newline at end of file