Makes stats appear on landing section, adds placeholder links to user guides and release notes

Author: RonLek

client/package-lock.json

@@ -16,8 +16,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
-    "react-syntax-highlighter": "^15.4.3",
-    "react-visibility-sensor": "^5.1.1"
+    "react-syntax-highlighter": "^15.4.3"
   },
   "scripts": {
     "start": "PORT=3002 react-scripts start",

client/package.json

@@ -45,7 +45,7 @@
 
 .main-stats-container {
   margin-top: 70px;
-  margin-bottom: 70px;
+  margin-bottom: 55px;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -60,22 +60,22 @@
   align-items: center;
   color: #29292e;
   background-color: #e0e0e01a;
-  border-radius: 100px;
-  height: 170px;
-  width: 170px;
+  border-radius: 50%;
+  height: 140px;
+  width: 140px;
   margin: 10px;
   box-shadow: 0px 8px 12px -7px #a9a6a6fc;
 }
 
 .stat-icon {
-  width: 60px;
-  height: 60px;
+  width: 45%;
+  height: 45%;
   display: block;
-  margin-bottom: 15px;
+  margin-bottom: 5px;
 }
 
 .stat-number {
-  font-size: 40px;
+  font-size: 30px;
   letter-spacing: 2px;
   margin-bottom: 5px;
   font-weight: 500;
@@ -287,3 +287,29 @@
   margin-right: 15px;
   margin-left: 30px;
 }
+
+.community-activity-action-button:hover {
+  cursor: pointer;
+}
+
+.main-stats-container-demo {
+  width: 100%;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.button-container-demo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
+
+.header-link {
+  color: hsl(240, 5%, 36%);
+}