initial template for web

package.json

@@ -10,10 +10,12 @@
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.0",
     "react-dom": "^17.0.2",
+    "react-particles-js": "^3.5.1",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "redux": "^4.1.0",
+    "tsparticles": "^1.29.2",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

src/App.css

@@ -1,3 +1,5 @@
 .App {
   text-align: center;
+  background-color: #1e5871;
+  color: aliceblue;
 }

src/App.jsx

@@ -1,12 +1,15 @@
 import './App.css';
 import { Provider } from 'react-redux';
 import React from 'react';
+import Layout from './web-components/layout';
 import store from './store/store';
 
 function App() {
   return (
     <Provider store={store}>
-      <div className="App"> </div>
+      <div className="App">
+        <Layout />
+      </div>
     </Provider>
   );
 }

src/web-components/layout.css

@@ -0,0 +1,24 @@
+.rectangle {
+  position: absolute;
+  width: 100%;
+  /* height: 100%; */
+  left: -30px;
+  right: -50px;
+  top: -130px;
+  /* flex: 1 0 auto; */
+  color: cornsilk;
+  background: black;
+  transform: skew(4deg) rotate(10deg);
+}
+
+.footer {
+  flex-shrink: 0;
+  background: black;
+  height: 3rem;
+  left: 0;
+}
+
+.main {
+  height: 700px;
+  width: 900px;
+}

src/web-components/layout.jsx

@@ -0,0 +1,17 @@
+import './layout.css';
+import React from 'react';
+import Particle from './particleeffect.jsx';
+
+const layout = () => (
+  <>
+    <div className="rectangle">
+      <Particle height="100%" val={150} />
+    </div>
+    <div className="main" />
+    <div className="footer">
+      <Particle height="3rem" val={30} />
+    </div>
+  </>
+);
+
+export default layout;

src/web-components/particleeffect.jsx

@@ -0,0 +1,29 @@
+import Particles from 'react-particles-js';
+
+import React from 'react';
+
+const particleeffect = ({ height, val }) => (
+  <Particles
+    params={{
+      particles: {
+        number: {
+          value: val,
+        },
+        size: {
+          value: 3,
+        },
+      },
+      interactivity: {
+        events: {
+          onhover: {
+            enable: true,
+            mode: 'repulse',
+          },
+        },
+      },
+    }}
+    height={height}
+  />
+);
+
+export default particleeffect;