Added Plant Card component skeleton design

Added Home Page skeleton design

frontend/web-app/src/Components/PlantCard.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import '../Styles/custom/plantCard.css'
+
+function PlantCard() {
+  return (
+    <div className='plantCard'>
+
+    </div>
+  )
+}
+
+export default PlantCard

frontend/web-app/src/Pages/HomePage.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react'
 import authController from '../Controller/AuthController'
+import '../Styles/custom/homePage.css'
+import PlantCard from '../Components/PlantCard'
 
 function HomePage() {
 // example of using APIs
@@ -17,7 +19,12 @@ function HomePage() {
   }, [])
 
   return (
-    <div>HomePage</div>
+    <div className='homePage'>
+      <div className='nameBar'>Vy's Plants</div>
+      <div className='plantViewer'>
+        <PlantCard />
+      </div>
+    </div>
   )
 }
 

frontend/web-app/src/Styles/custom/homePage.css

@@ -0,0 +1,18 @@
+/* Home Page CSS */
+
+.homePage{
+    display: flex;
+    flex-direction: column;
+    padding: 44px 82px 0px 82px;
+}
+
+.nameBar{
+    font-family: "Poppins", serif;
+    font-size: 42px;
+    font-weight: 800;
+    color: #4C5740;
+}
+
+.plantViewer{
+    padding-top: 31px;
+}

frontend/web-app/src/Styles/custom/plantCard.css

@@ -0,0 +1,8 @@
+/* Plant Card CSS */
+
+.plantCard{
+    height: 532px;
+    width: 356px;
+    background-color: #E6F2D7;
+    border-radius: 18px;
+}