December-software-project/sort-algo

import React from 'react';
import './styles.css';

import Particles from 'react-tsparticles';
import HomeDescription from './homedescription/HomeDescription';

/**
 * Home Section of the app.
 *
 * @component
 * @category App Body
 */
const Home = () => {
  return (
    <div id="home" className="home">
      <HomeDescription />
      <Particles
        id="particles"
        className="wrapper"
        options={{
          background: {
            color: {
              value: '#5467ff',
            },
          },
          fpsLimit: 60,
          interactivity: {
            detectsOn: 'canvas',
            events: {
              resize: true,
            },
            modes: {
              bubble: {
                distance: 400,
                duration: 2,
                opacity: 0.8,
                size: 40,
              },
              push: {
                quantity: 4,
              },
              repulse: {
                distance: 200,
                duration: 0.4,
              },
            },
          },
          particles: {
            color: {
              value: '#fff',
            },
            collisions: {
              enable: true,
            },
            move: {
              direction: 'none',
              enable: true,
              outMode: 'bounce',
              random: false,
              speed: 3,
              straight: false,
            },
            number: {
              density: {
                enable: true,
                value_area: 800,
              },
              value: 80,
            },
            opacity: {
              value: 0.5,
            },
            shape: {
              type: 'circle',
            },
            size: {
              random: true,
              value: 5,
            },
          },
          detectRetina: true,
        }}
      />
    </div>
  );
};

export default Home;