From c253ce29bb510143cea4b3b06f8bfe8cccf448ef Mon Sep 17 00:00:00 2001
From: Kekoa Kaaikala <kekoa.kaaikala@gmail.com>
Date: Mon, 4 Mar 2024 14:40:30 +0000
Subject: [PATCH] TEMP: Add Getting Started page

---
 .../getting-started/GettingStarted.tsx        | 60 ++++++++++++++++++-
 .../getting-started/NumberedCard.tsx          | 32 ++++++++++
 .../_components/getting-started/TabLabel.tsx  | 22 +++++++
 .../src/_components/getting-started/style.ts  |  0
 4 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 monkey/monkey_island/cc/next_ui/src/_components/getting-started/NumberedCard.tsx
 create mode 100644 monkey/monkey_island/cc/next_ui/src/_components/getting-started/TabLabel.tsx
 create mode 100644 monkey/monkey_island/cc/next_ui/src/_components/getting-started/style.ts

diff --git a/monkey/monkey_island/cc/next_ui/src/_components/getting-started/GettingStarted.tsx b/monkey/monkey_island/cc/next_ui/src/_components/getting-started/GettingStarted.tsx
index d25801b583e..eb5e5ea1055 100644
--- a/monkey/monkey_island/cc/next_ui/src/_components/getting-started/GettingStarted.tsx
+++ b/monkey/monkey_island/cc/next_ui/src/_components/getting-started/GettingStarted.tsx
@@ -1,9 +1,67 @@
 'use client';
 
 import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import NumberedCard from '@/_components/getting-started/NumberedCard';
+import Stack from '@mui/material/Stack';
+import ConstructionIcon from '@mui/icons-material/Construction';
+import SecurityIcon from '@mui/icons-material/Security';
+import LanIcon from '@mui/icons-material/Lan';
+import AssessmentIcon from '@mui/icons-material/Assessment';
+import Divider from '@mui/material/Divider';
 
 const GettingStarted = () => {
-    return <Box>Hello There!</Box>;
+    return (
+        <Card
+            variant="outlined"
+            sx={{
+                background: '#ffcc0070',
+                padding: '2em',
+                borderRadius: '20px'
+            }}>
+            <Stack direction="column" spacing={2}>
+                <Box>
+                    <h2>How it works?</h2>
+                    <p>
+                        The Monkey uses various methods to propagate across a
+                        data center and reports to this Monkey Island Control
+                        server
+                    </p>
+                </Box>
+                <Divider />
+                <Stack direction="row" spacing={2}>
+                    <NumberedCard number={1} title="First card">
+                        <ConstructionIcon fontSize="large" />
+                        <p>
+                            <b>Setup your Malware</b>
+                        </p>
+                        <p>Configure what you want the malware to do</p>
+                    </NumberedCard>
+                    <NumberedCard number={2} title="Second card">
+                        <SecurityIcon fontSize="large" />
+                        <p>
+                            <b>Run Monkey</b>
+                        </p>
+                        <p>Configure what you want the malware to do</p>
+                    </NumberedCard>
+                    <NumberedCard number={3} title="Second card">
+                        <LanIcon fontSize="large" />
+                        <p>
+                            <b>Review Infection Map</b>
+                        </p>
+                        <p>Configure what you want the malware to do</p>
+                    </NumberedCard>
+                    <NumberedCard number={4} title="Second card">
+                        <AssessmentIcon fontSize="large" />
+                        <p>
+                            <b>Security Reports</b>
+                        </p>
+                        <p>Configure what you want the malware to do</p>
+                    </NumberedCard>
+                </Stack>
+            </Stack>
+        </Card>
+    );
 };
 
 export default GettingStarted;
diff --git a/monkey/monkey_island/cc/next_ui/src/_components/getting-started/NumberedCard.tsx b/monkey/monkey_island/cc/next_ui/src/_components/getting-started/NumberedCard.tsx
new file mode 100644
index 00000000000..26f70707a9f
--- /dev/null
+++ b/monkey/monkey_island/cc/next_ui/src/_components/getting-started/NumberedCard.tsx
@@ -0,0 +1,32 @@
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import TabLabel from './TabLabel';
+import CardActionArea from '@mui/material/CardActionArea';
+
+export interface NumberedCardProps {
+    children: React.ReactNode;
+    number: number;
+    icon?: React.ReactNode;
+    title?: string;
+}
+
+const NumberedCard = (props: NumberedCardProps) => {
+    return (
+        <>
+            <Box
+                sx={{
+                    display: 'inline-flex'
+                }}>
+                <TabLabel>{props.number}</TabLabel>
+                <Card>
+                    <CardActionArea>
+                        <CardContent>{props.children}</CardContent>
+                    </CardActionArea>
+                </Card>
+            </Box>
+        </>
+    );
+};
+
+export default NumberedCard;
diff --git a/monkey/monkey_island/cc/next_ui/src/_components/getting-started/TabLabel.tsx b/monkey/monkey_island/cc/next_ui/src/_components/getting-started/TabLabel.tsx
new file mode 100644
index 00000000000..386d879a31d
--- /dev/null
+++ b/monkey/monkey_island/cc/next_ui/src/_components/getting-started/TabLabel.tsx
@@ -0,0 +1,22 @@
+import { styled } from '@mui/material/styles';
+
+export interface NumberedTabProps {
+    number: number;
+    color?: string;
+}
+
+const NumberedTabSpan = styled('span')(({ theme }) => ({
+    height: '24px',
+    fontSize: '16px',
+    paddingLeft: '7px',
+    paddingRight: '3px',
+    marginTop: '15px',
+    textAlign: 'center',
+    left: 0,
+    top: '1em',
+    borderRadius: '12px 0 0 12px',
+    color: theme.palette.primary.contrastText,
+    background: theme.palette.primary.main
+}));
+
+export default NumberedTabSpan;
diff --git a/monkey/monkey_island/cc/next_ui/src/_components/getting-started/style.ts b/monkey/monkey_island/cc/next_ui/src/_components/getting-started/style.ts
new file mode 100644
index 00000000000..e69de29bb2d