feat: add install pages and instrcutions (#2)

Co-authored-by: Lucas Lemos <lucashenriqueblemos@gmail>

archetypes/default.md

@@ -1,4 +1,5 @@
 ---
 title: '{{ replace .File.ContentBaseName "-" " " | title }}'
 description: ''
+subtitle: ''
 ---

assets/scss/buttons.scss

@@ -0,0 +1,40 @@
+.done-button {
+	justify-self: flex-end;
+	align-self: flex-end;
+	margin: 0 40px 40px 0;
+}
+
+.next-button {
+	justify-self: flex-end;
+	align-self: flex-end;
+	margin-right: 40px;
+	margin-bottom: 40px;
+}
+
+.card-button {
+	align-self: center;
+	justify-self: center;
+
+	margin-top: 57px;
+}
+
+.next-button, .card-button, .done-button {
+	text-decoration: none;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	text-transform: uppercase;
+
+	width: 100px;
+	height: 40px;
+	border-radius: 2px;
+	border: 1px solid #5daceb;
+	background-color: #5daceb;
+	color: #ffffff;
+
+	font-family: Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 14px;
+}

assets/scss/cards.scss

@@ -0,0 +1,33 @@
+.cards-group {
+	display: flex;
+	justify-content: space-around;
+	margin-top: 60px;
+	flex: 1;
+}
+
+.card-text {
+	font-family: Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-style: italic;
+	font-size: 18px;
+	text-align: center;
+	color: #394251;
+}
+
+.card {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.card-body {
+	width: 200px;
+	height: 150px;
+	border: 1px solid #c2c5ca;
+	border-radius: 4px;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-evenly;
+	align-items: center;
+}

assets/scss/header.scss

@@ -0,0 +1,61 @@
+.download-button {
+	text-decoration: none;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: 150px;
+	height: 25px;
+	color: #5DACE8;
+	border: 2px solid #5DACE8;
+	border-radius: 2px;
+	background: transparent;
+	text-transform: uppercase;
+	padding: 5px 20px;
+
+	font-family: Inter;
+	font-size: 15px;
+	font-weight: 600;
+	cursor: pointer;
+}
+
+.logo {
+	display: flex;
+	margin-top: 20px;
+	margin-left: 20px;
+}
+
+.logo-block {
+	display: flex;
+	align-items: flex-start;
+	color: #ffffff;
+	text-transform: uppercase;
+	font-family: Helvetica, Arial, sans-serif;
+	font-weight: 700;
+	font-size: 26px;
+}
+
+.header-title {
+	font-family: Helvetica, Arial, sans-serif;
+	font-weight: 700;
+	color: #ffffff;
+	text-align: center;
+	font-size: 52px;
+}
+
+.header-subtitle {
+	font-family: Helvetica, Arial, sans-serif;
+	font-size: 20px;
+	font-weight: 300;
+	letter-spacing: 0em;
+	text-align: center;
+	color: #ffffff;
+	width: 500px;
+}
+
+header {
+	width: 100vw;
+	height: 40vh;
+	background: linear-gradient(180deg, #2E3337 0%, #1D2024 100%);
+}

assets/scss/list.scss

@@ -0,0 +1,24 @@
+.content > p {
+	font-family: Helvetica, Arial, sans-serif;
+	font-size: 30px;
+	font-weight: 300;
+	line-height: 2.5;
+
+	margin-left: 100px;
+}
+
+.content {
+	padding-top: 68px;
+	display: flex;
+	justify-content: space-between;
+	flex-direction: column;
+}
+
+.container {
+	height: inherit;
+	width: inherit;
+
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 2fr 1fr;
+}

assets/scss/main.scss

@@ -0,0 +1,29 @@
+#main {
+	width: 100vw;
+	height: 60vh;
+}
+
+.page > .subtitle {
+	font-size: 22px;
+	font-family: Helvetica, Arial, sans-serif;
+	margin: 60px 0 0 60px;
+}
+
+.page {
+	max-width: 100%;
+
+	height: inherit;
+	width: 100vw;
+	color: black;
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+}
+
+.info-block {
+	height: 80%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-evenly;
+}

assets/scss/style.scss

@@ -3,65 +3,4 @@
 html, body, p {
 	margin: 0;
 	padding: 0;
-}
-
-.info-block {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: space-evenly;
-}
-
-.download-button {
-	width: 200px;
-	height: 40px;
-	color: #5DACE8;
-	border: 2px solid #5DACE8;
-	border-radius: 2px;
-	background: transparent;
-	text-transform: uppercase;
-	padding: 5px 20px;
-
-	font-family: Inter;
-	font-size: 15px;
-	font-weight: 600;
-	line-height: 19px;
-	letter-spacing: 0em;
-	text-align: center;
-}
-
-.logo-block {
-	display: flex;
-	align-items: flex-start;
-	color: #ffffff;
-	text-transform: uppercase;
-	font-family: Helvetica, Arial, sans-serif;
-	font-weight: 700;
-	font-size: 26px;
-}
-
-.header-title {
-	font-family: Helvetica, Arial, sans-serif;
-	font-weight: 700;
-	color: #ffffff;
-	text-align: center;
-	font-size: 52px;
-}
-
-.header-subtitle {
-	font-family: Helvetica, Arial, sans-serif;
-	font-size: 20px;
-	font-weight: 300;
-	letter-spacing: 0em;
-	text-align: center;
-	color: #ffffff;
-	width: 500px;
-}
-
-header {
-	width: 100vw;
-	height: 30vh;
-	background: linear-gradient(180deg, #2E3337 0%, #1D2024 100%);
-	padding: 20px;
 }

content/_index.md

@@ -1,4 +1,22 @@
 ---
 title: "Lets get started"
 description: "Please download the latest release below"
+subtitle: "Requirements needed from Admin:"
+cards:
+  - 
+    icon: "http"
+    title: "URL for Web UI"
+    hasButton: false
+  - 
+    icon: "key"
+    title: "URL for API Keys"
+    hasButton: false
+  - 
+    icon: "login"
+    title: "Login Method"
+    hasButton: false
+  - 
+    icon: "download"
+    title: "Client Download"
+    hasButton: false
 ---

content/install.md

@@ -0,0 +1,21 @@
+---
+title: 'Install to your desktop'
+description: 'Select the desktop platform below that you currently are using, for instructions on how to begin the ashirt installation process.'
+subtitle: "Desktop platforms:"
+cards:
+  - 
+    icon: "apple"
+    title: "OSX"
+    hasButton: true
+    link: "/osx"
+  - 
+    icon: "win"
+    title: "Windows"
+    hasButton: true
+    link: "/windows"
+  - 
+    icon: "linux"
+    title: "Linux"
+    hasButton: true
+    link: "/linux"
+---

content/linux.md

@@ -0,0 +1,11 @@
+---
+title: "Linux"
+description: "Follow the instructions below to help you begin installing Ashirt to your local desktop"
+layout: list
+---
+
+**Step 1.** Set the executable bit on the downloaded app image\
+            
+Copy code here: **chmod +x ashirt-v1.0.1-linux.appimage**
+
+**Step 2.** Launch Ashirt application

content/osx.md

@@ -0,0 +1,11 @@
+---
+title: "OSX"
+description: "Follow the instructions below to help you begin installing Ashirt to your local desktop"
+layout: list
+---
+
+**Step 1.** Mount the DMG file
+
+**Step 2.** Move ashirt app into your local applications folder
+
+**Step 3.** Launch the Ashirt application using the folder through spotlight or with your terminal command: **open -a ashirt**

content/windows.md

@@ -0,0 +1,7 @@
+---
+title: "Windows"
+description: "Follow the instructions below to help you begin installing Ashirt to your local desktop"
+layout: list
+---
+
+**Step 1.** Awaiting reference...

hugo.toml

@@ -1,3 +1,3 @@
 baseURL = 'https://example.org/'
 languageCode = 'en-us'
-title = 'Ashirt'
+title = 'Ashirt'

layouts/_default/list.html

@@ -0,0 +1,11 @@
+{{ define "main" }}
+
+	<div class="container">
+		<div class="content">
+			{{ .Content }}
+		</div>
+
+		<a href="/" class="done-button">Done</a>
+	</div>
+
+{{ end }}

layouts/partials/card.html

@@ -0,0 +1,20 @@
+<div class="card">
+	<div class="card-body">
+		{{ $iconPath := printf "images/%s.png" .icon }}
+		{{ $image := resources.Get $iconPath }}
+
+		<img
+			src="{{ $image.RelPermalink }}"
+			alt="{{ .title }} icon"
+			class="card-icon"
+		/>
+
+		{{ if eq .hasButton false }}
+			<p class="card-text">{{ .title }}</p>
+		{{ end }}
+	</div>
+
+	{{ if eq .hasButton true }}
+		<a href="{{ .link }}" class="card-button">{{ .title }}</a>
+	{{ end }}
+</div>