import React, {useState } from 'react'; import {isMobile} from "react-device-detect"; import AppFramework, { usecases } from "../components/AppFramework.jsx"; import {Link} from 'react-router-dom'; import ReactGA from 'react-ga'; import { Button, LinearProgress, Typography } from '@material-ui/core'; export const securityFramework = [ { image: , text: "Cases", description: "Case management" }, { image: , text: "SIEM", description: "Case management" }, { image: , text: "Assets", description: "Case management" }, { image: , text: "IAM", description: "Case management" }, { image: , text: "Intel", description: "Case management" }, { image: , text: "Comms", description: "Case management" }, { image: , text: "Network", description: "Case management" }, { image: , text: "EDR & AV", description: "Case management" }, ] const LandingpageUsecases = (props) => { const { userdata } = props const [selectedUsecase, setSelectedUsecase] = useState("Phishing") const usecasekeys = usecases === undefined || usecases === null ? [] : Object.keys(usecases) const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)" const buttonStyle = {borderRadius: 25, height: 50, width: 260, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18, backgroundImage: buttonBackground} const HandleTitle = (props) => { const { usecases, selectedUsecase, setSelecedUsecase } = props const [progress, setProgress] = useState(0) React.useEffect(() => { const timer = setInterval(() => { setProgress((oldProgress) => { if (oldProgress >= 105) { const foundIndex = usecasekeys.findIndex(key => key === selectedUsecase) var newitem = usecasekeys[foundIndex+1] if (newitem === undefined || newitem === 0) { newitem = usecasekeys[1] } setSelectedUsecase(newitem) return -18 } if (oldProgress >= 65) { return oldProgress + 3 } if (oldProgress >= 80) { return oldProgress + 1 } return oldProgress + 6 }) }, 165) return () => { clearInterval(timer) } }, []) if (usecases === null || usecases === undefined || usecases.length === 0) { return null } const modifier = isMobile ? 17 : 22 return ( Handle
{selectedUsecase} with confidence ) } const parsedWidth = isMobile ? "100%" : 1100 return (
{/*Security Automation is Hard*/} Connecting your everchanging environment is hard. We get it! That's why we built Shuffle, where you can use and share your security workflows to everyones benefit. {/*Shuffle is an automation platform where you don't need to be an expert to automate. Get access to our large pool of security playbooks, apps and people.*/}
{isMobile ? null : } {isMobile ? null : }
{isMobile ? null :
} {isMobile ? null :
}
{isMobile ? : null } {/*isMobile ? : null*/}
{isMobile ? null :
{securityFramework.map((data, index) => { return (
{data.image} {data.text}
) })}
}
) } export default LandingpageUsecases;