Initial open source commit
This commit is contained in:
frikky
@@ -0,0 +1,349 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user