Add particle js, implement in pageintro and configuration

package.json

@@ -25,6 +25,7 @@
     "prismjs": "^1.15.0",
     "react-headroom": "^2.2.2",
     "react-helmet": "^5.2.0",
+    "react-particles-js": "^2.3.0",
     "react-responsive-mixin": "^0.4.0",
     "react-typed": "^1.0.9",
     "serve": "^10.0.0",

src/components/PageIntro.js

@@ -3,6 +3,8 @@ import React, { Component } from 'react'
 import SectionIntro from './SectionIntro'
 import Button from './Button'
 
+import Particles from 'react-particles-js';
+
 class PageIntro extends Component {
   componentDidMount() {
     let tiltjs = require('vanilla-tilt')
@@ -20,6 +22,46 @@ class PageIntro extends Component {
   render() {
     return (
       <section className="saburly-intro bg-saburly-light relative">
+        <Particles
+            params={{
+              particles: {
+                number: {
+                  value: 47,
+                  density: {
+                    enable: true,
+                    value_area: 5000
+                }
+                },
+                size: {
+                  value: 1.47
+                },
+                color: {
+                  value: "#5763ab"
+                },
+                move: {
+                  speed: 0.77
+              },
+                line_linked: {
+                  enable: true,
+                  color: "#5763ab",
+                  opacity: 0.15,
+                },
+              },
+              interactivity: {
+                events: {
+                  onhover: {
+                    enable: false,
+                  }
+                }
+              },
+              "retina_detect": true
+            }}
+            style={{
+              position: 'absolute',
+              width: "100%",
+              height: "100%"
+            }}
+        />
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
           <title>bg-saburly-white</title>
           <path

src/pages/index.js

@@ -35,6 +35,7 @@ const IndexPage = ({ ...props }) => (
       siteDescription="We are in the business of solving real-world problems with digital solutions. Our mission is to make you stand out with the help of modern technologies"
       siteUrl="https://saburly.com"
     />
+
     <PageIntro
       text="We are in the business of solving real-world problems with digital solutions. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
       image={ImgIntro}
@@ -54,22 +55,21 @@ const IndexPage = ({ ...props }) => (
     </PageIntro>
 
     <main>
-
+      <section className="md:flex p-8 mt-10 items-center puttthemhere justify-center m-auto">
-      <section className="md:flex p-8 mt-10 items-center justify-center m-auto">
+        <div className="text-center">
-      <div className="text-center">
+        <a href="https://clutch.co/se/app-developers" target="_blank">
-      <a href="https://clutch.co/se/app-developers" target="_blank">
+          <img
-        <img
+            src={TopWebDevelopers}
-          src={TopWebDevelopers}
+            alt="Top Web Developer Company"
-          alt="Top Web Developer Company"
+          />
-        />
+          </a>
-        </a>
+          </div>
-        </div>
+            <SectionIntro
-        <SectionIntro
+            classes="p-8 md:max-w-lg"
-        classes="p-8 md:max-w-lg"
+            h2Classes="text-3xl xsm:text-4xl sm:text-5xl xl:text-6xl font-black"
-        h2Classes="text-3xl xsm:text-4xl sm:text-5xl xl:text-6xl font-black"
+            headline="Because beautiful code makes our heart pound"
-        headline="Because beautiful code makes our heart pound"
+            text="What gets us going is our passion for cutting edge technologies and incredible user experiences. Our developers deliver custom end-to-end software solutions daily and can even help you with initial analysis, architecture design, testing and deployments."
-        text="What gets us going is our passion for cutting edge technologies and incredible user experiences. Our developers deliver custom end-to-end software solutions daily and can even help you with initial analysis, architecture design, testing and deployments."
+            />
-        />
       </section>
 
       <section className="relative">