frikky
350 lines
12 KiB
JavaScript
350 lines
12 KiB
JavaScript
import React, {useState } from 'react';
|
|
|
|
import Paper from '@material-ui/core/Paper';
|
|
import Card from '@material-ui/core/Card';
|
|
import CardActionArea from '@material-ui/core/CardActionArea';
|
|
import CardMedia from '@material-ui/core/CardMedia';
|
|
import CardContent from '@material-ui/core/CardContent';
|
|
import CardActions from '@material-ui/core/CardActions';
|
|
import Button from '@material-ui/core/Button';
|
|
import Divider from '@material-ui/core/Divider';
|
|
import Grid from '@material-ui/core/Grid';
|
|
import {BrowserView, MobileView} from "react-device-detect";
|
|
|
|
import ScheduleIcon from '@material-ui/icons/Schedule';
|
|
import Web from '@material-ui/icons/Web';
|
|
import AccountTree from '@material-ui/icons/AccountTree';
|
|
import InfoIcon from '@material-ui/icons/Info';
|
|
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
|
|
import CreateIcon from '@material-ui/icons/Create';
|
|
|
|
const bodyDivStyle = {
|
|
margin: "auto",
|
|
}
|
|
|
|
const surfaceColor = "#27292D"
|
|
const boxStyle = {
|
|
flex: "1",
|
|
marginLeft: "10px",
|
|
marginRight: "10px",
|
|
height: "400px",
|
|
//backgroundColor: "#e8eaf6",
|
|
backgroundColor: surfaceColor,
|
|
textAlign: "center",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}
|
|
|
|
const bodyTextStyle = {
|
|
color: "#ffffff",
|
|
}
|
|
|
|
const hrefStyle = {
|
|
color: "inherit",
|
|
textDecoration: "none",
|
|
}
|
|
|
|
|
|
// Should be different if logged in :|
|
|
const LandingPage = (props) => {
|
|
const { isLoaded} = props;
|
|
|
|
const textColor = "#8899A6"
|
|
const iconColor = "#1DA1F2"
|
|
const iconSize = "8em"
|
|
|
|
const GridLayout = (header, description, link, icon) => {
|
|
return (
|
|
<Paper style={boxStyle}>
|
|
<a href={link} style={hrefStyle}>
|
|
<div style={{flex: "1", color: "#FFFFFF"}}>
|
|
<h2>{header}</h2>
|
|
</div>
|
|
<Divider />
|
|
<div style={{flex: "3", marginLeft: "10px", marginRight: "10px", marginTop: "10px", color: textColor}}>
|
|
{description}
|
|
</div>
|
|
<div style={{margin: "auto"}}>
|
|
{icon}
|
|
</div>
|
|
<Divider style={{marginTop: "20px", marginBottom: "20px"}} />
|
|
<div style={{flex: "1", color: "#f85a3e"}}>
|
|
<div style={{}} >
|
|
Learn more
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</Paper>
|
|
)
|
|
}
|
|
|
|
const listitems = [
|
|
GridLayout("Simple integrations", "Easily use others' or create your own integration", "/docs/features", <Web style={{fontSize: iconSize, marginTop: "20px", color: iconColor}} />),
|
|
GridLayout("Workflows", "Access the power of automation within minutes, whether its on premise or in the cloud", "/docs/features", <AccountTree style={{fontSize: iconSize, marginTop: "20px", color: iconColor}} />),
|
|
GridLayout("Realtime actions", "Beat the clock by leveraging our realtime triggers", "/docs/features", <ScheduleIcon style={{fontSize: iconSize, marginTop: "20px", color: iconColor}} />),
|
|
]
|
|
|
|
// The actual landing page
|
|
// <img style={{width: "400px"}} alt={"logo"} src={Default}/>
|
|
//We start by understanding your unique environment to help identify the right thing to automate.
|
|
const secondaryColor = "rgba(167,46,87,1)"
|
|
const primaryColor = "rgba(25, 35, 94, 1)"
|
|
|
|
const paperStyle = {
|
|
flex: 1,
|
|
backgroundColor: "inherit",
|
|
cursor: "pointer",
|
|
}
|
|
|
|
const secondaryItemList = [
|
|
{
|
|
primaryText: "No time to waste",
|
|
secondaryText: "Bring all your applications into a single view, and make them all work together flawlessly!",
|
|
image: "/images/time.jpg",
|
|
}, {
|
|
primaryText: "Get a better overview",
|
|
secondaryText: "Don't know what's happening? We'll help you track and act on your most valuable KPI's!",
|
|
image: "/images/overview.jpg",
|
|
}, {
|
|
primaryText: "Conquer your tasks",
|
|
secondaryText: "Get access to powerful tools and pre-made workflows to help you crush your teams daily tasks!",
|
|
image: "/images/burnout.jpg",
|
|
},
|
|
]
|
|
const [image, setImage] = useState(secondaryItemList[0].image);
|
|
|
|
const landingpageDataBrowser =
|
|
<div>
|
|
<div style={{backgroundImage: "url('/images/test.jpg')", backgroundSize: "80% 100%", backgroundRepeat: "no-repeat", minHeight: "100vh", maxHeight: 1024}}>
|
|
<div style={{textAlign: "left", paddingTop: 135, maxWidth: 700, paddingLeft: "50%", color: secondaryColor, display: "flex", fontSize: 25}}>
|
|
<div style={{flex: 1}}>
|
|
<a href="/docs/about" style={hrefStyle}>
|
|
<Grid container direction="row" alignItems="center">
|
|
<Grid item>
|
|
<InfoIcon />
|
|
</Grid>
|
|
<Grid item style={{marginLeft: 5}}>
|
|
About
|
|
</Grid>
|
|
</Grid>
|
|
</a>
|
|
</div>
|
|
<div style={{flex: 1}}>
|
|
<a href="/contact" style={hrefStyle}>
|
|
<Grid container direction="row" alignItems="center">
|
|
<Grid item>
|
|
<CreateIcon />
|
|
</Grid>
|
|
<Grid item style={{marginLeft: 5}}>
|
|
Get in touch
|
|
</Grid>
|
|
</Grid>
|
|
</a>
|
|
</div>
|
|
<div style={{flex: 1}}>
|
|
<a href="/login" style={hrefStyle}>
|
|
<Button
|
|
style={{borderRadius: 25, height: 50, minWidth: 200, backgroundColor: secondaryColor, color: "white"}} variant="contained">
|
|
Try it out <ArrowForwardIcon />
|
|
</Button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div style={bodyTextStyle, {textAlign: "left", paddingTop: "8%", paddingLeft: "28%", maxWidth: 430,}}>
|
|
<div style={{fontSize: 25, color:"rgba(0,0,0,0.45)"}}>
|
|
Shuffle
|
|
</div>
|
|
<div style={{fontSize: 50, color: "rgba(0,0,0,0.7)"}}>
|
|
INFORMATION <div style={{color: secondaryColor}}>OVERLOAD</div>
|
|
</div>
|
|
<div style={{fontSize: 20, color: "rgba(0, 0, 0, 0.45)", marginTop: 20,}}>
|
|
Everyone run into the same fundamental operational problems. Mailbox chaos, tickets getting out of hand and a constant feeling of being overwhelmed. The good news? <div style={{color: secondaryColor, marginTop: 10}}>Shuffle solves them.</div>
|
|
</div>
|
|
<a href="/docs/features" style={hrefStyle}>
|
|
<Button
|
|
style={{borderRadius: 25, height: 50, marginTop: 50, width: 200, backgroundColor: secondaryColor, color: "white"}}
|
|
variant="contained"
|
|
>Learn how</Button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div style={{minHeight: 1024, width: "100%", backgroundImage: "linear-gradient(to bottom right, #19235e, #19235e)",}}>
|
|
<div style={{minHeight: 1000, paddingTop: 150, maxWidth: 1250, margin: "auto"}}>
|
|
<div style={{color: "rgba(255,255,255,0.8", fontSize: 60, marginLeft: 25, }}>
|
|
<b>Automation is just the beginning </b>
|
|
</div>
|
|
<div style={{marginTop: 40, display: 'flex', flexDirection: "row"}}>
|
|
<div style={{flex: 8, display: "flex", flexDirection: "column", fontSize: 40, }}>
|
|
{secondaryItemList.map((data, index) => {
|
|
const color = image === data.image ? "rgba(255,255,255,1)" : "rgba(255,255,255,0.4)"
|
|
return (
|
|
<div style={{borderRadius: 15, padding: 25, maxWidth: 600, height: 150, fontSize: 40, color: color, cursor: "pointer"}} onClick={() => setImage(data.image)}>
|
|
{data.primaryText}
|
|
<div style={{fontSize: 22, marginTop: 10, }}>
|
|
{data.secondaryText}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
<div style={{flex: 1}} />
|
|
<div style={{flex: 10, height: "100%", width: "100%",}}>
|
|
<img src={image} style={{borderRadius: 15, minHeight: "100%", minWidth: "100%", maxWidth: "100%", maxHeight: "100%"}}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{maxWidth: 1250, paddingTop: 100, paddingBottom: 100, margin: "auto", color: "rgba(255,255,255,0.8)"}}>
|
|
<Divider style={{backgroundColor: "rgba(255,255,255,0.6)"}} />
|
|
<div style={{marginTop: 100, fontSize: 40, display: "flex", marginLeft: 100, marginRight: 100}}>
|
|
<div style={{flex: 3}}>
|
|
Learn more about the benefits of Shuffle
|
|
</div>
|
|
<div style={{flex: 1}}>
|
|
<a href="/docs/features" style={hrefStyle}>
|
|
<Button
|
|
fullWidth
|
|
style={{borderRadius: 25, minHeight: 50, minWidth: 200, backgroundColor: secondaryColor, color: "white"}} variant="contained">
|
|
See features
|
|
</Button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{textAlign: "center", maxWidth: 1100, minHeight: 600, paddingTop: 100, margin: "auto", color: "rgba(0,0,0,1)"}}>
|
|
<div style={{fontSize: 50}}>
|
|
<b>Focus on the work that matters to you</b>
|
|
</div>
|
|
<div style={{fontSize: 20, color: "rgba(0,0,0,0.7)", maxWidth: "100%"}}>
|
|
Menial tasks, scattered content, constant copy pasting, waste of talent - <b>there's a smarter way to work.</b>
|
|
</div>
|
|
<div style={{display: "flex", marginTop: 50}}>
|
|
<Card onClick={() => {window.location.pathname = "/docs/features"}} style={{flex: 1, margin: 10, textAlign: "center"}}>
|
|
<CardActionArea>
|
|
<CardMedia
|
|
title="TEST"
|
|
image="/images/time.jpg"
|
|
/>
|
|
<CardContent>
|
|
<h3>Premade playbooks</h3>
|
|
<p>Get your automation done with minimal effort</p>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
<Button size="medium" color="green">
|
|
Learn more
|
|
</Button>
|
|
</Card>
|
|
<Card onClick={() => {window.location.pathname = "/docs/features"}} style={{flex: 1, margin: 10, textAlign: "center"}}>
|
|
<CardActionArea>
|
|
<CardMedia
|
|
title="TEST"
|
|
image="/images/time.jpg"
|
|
/>
|
|
<CardContent>
|
|
<h3>Open frameworks</h3>
|
|
<p>Mitre Att&ck, OpenAPI and more!</p>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
<Button size="medium" color="green">
|
|
Learn more
|
|
</Button>
|
|
</Card>
|
|
<Card onClick={() => {window.location.pathname = "/docs/features"}} style={{flex: 1, margin: 10, textAlign: "center"}}>
|
|
<CardActionArea>
|
|
<CardMedia
|
|
title="TEST"
|
|
image="/images/time.jpg"
|
|
/>
|
|
<CardContent>
|
|
<h3>Hundreds of integrations</h3>
|
|
<p>Quickly integrate your software applications</p>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
<Button size="medium" color="green">
|
|
Learn more
|
|
</Button>
|
|
</Card>
|
|
<Card style={{flex: 1, margin: 10, textAlign: "center"}} onClick={() => {window.location.pathname = "/docs/features"}}>
|
|
<CardActionArea>
|
|
<CardMedia
|
|
title="TEST"
|
|
image="images/time.jpg"
|
|
/>
|
|
<CardContent>
|
|
<h3>Automated compliance</h3>
|
|
<p>Stuck with compliance needs you can't meet?</p>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
<Button size="medium" color="green">
|
|
Learn more
|
|
</Button>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
const landingpageDataMobile =
|
|
<div style={{backgroundColor: "#1F2023", paddingTop: 30}}>
|
|
<div style={{color: "white", textAlign: "center", marginLeft: "10px", marginRight: "10px"}}>
|
|
<h1>Shuffle</h1>
|
|
<h3>A general automation solution for Infosec and IT Professionals</h3>
|
|
<a href="/contact" style={hrefStyle}>
|
|
<Button
|
|
style={{width: "220px", height: "60px", borderRadius: "0px"}}
|
|
variant="contained"
|
|
color="primary"
|
|
>
|
|
Contact
|
|
</Button>
|
|
</a>
|
|
</div>
|
|
<div style={{display: "flex", flexDirection: "column", marginTop: "100px"}}>
|
|
<div>
|
|
{listitems[0]}
|
|
</div>
|
|
<div style={{marginTop: "20px"}}>
|
|
{listitems[1]}
|
|
</div>
|
|
<div style={{marginTop: "20px", marginBottom: "30px"}}>
|
|
{listitems[2]}
|
|
</div>
|
|
<div style={{marginTop: "20px", marginBottom: "30px", textAlign: "center"}}>
|
|
<a href="/contact" style={hrefStyle}>
|
|
<Button
|
|
style={{width: "220px", height: "60px", borderRadius: "0px"}}
|
|
variant="contained"
|
|
color="primary"
|
|
>
|
|
Contact
|
|
</Button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
// Reroute if the user is logged in
|
|
// const landingSite = isLoggedIn ? <Workflows globalUrl={globalUrl}{...props} /> : <div style={bodyDivStyle}>{landingpageData}</div>
|
|
const landingSite = <div style={bodyDivStyle}>{landingpageDataBrowser}</div>
|
|
|
|
const loadedCheck = isLoaded ?
|
|
<div>
|
|
<BrowserView>
|
|
{landingSite}
|
|
</BrowserView>
|
|
<MobileView>
|
|
{landingpageDataMobile}
|
|
</MobileView>
|
|
</div>
|
|
:
|
|
<div>
|
|
</div>
|
|
|
|
return(
|
|
<div>
|
|
{loadedCheck}
|
|
</div>
|
|
)
|
|
}
|
|
export default LandingPage;
|