From 1bf32715cad90b37e3ecf68a26ab42de5cad8c5d Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Sat, 2 Nov 2024 13:06:48 +0100
Subject: [PATCH 1/6] Pricing on homepage

---
 src/components/Tiers.vue           |  95 +++++++++---
 src/components/header/UserMenu.vue |   8 +-
 src/components/home/Builder.vue    |   4 +-
 src/components/home/Campaign.vue   |   4 +-
 src/components/home/Feedback.vue   | 238 +++++++++++++++--------------
 src/components/home/General.vue    |   4 +-
 src/components/home/Pricing.vue    |  35 +++++
 src/components/home/Share.vue      |   4 +-
 src/css/styles.scss                |   9 +-
 src/views/Home.vue                 |  22 ++-
 src/views/profile/SetUsername.vue  |   5 +
 11 files changed, 271 insertions(+), 157 deletions(-)
 create mode 100644 src/components/home/Pricing.vue

diff --git a/src/components/Tiers.vue b/src/components/Tiers.vue
index 587e50d0..c43d4034 100644
--- a/src/components/Tiers.vue
+++ b/src/components/Tiers.vue
@@ -14,11 +14,17 @@
 						</div>
 						<div class="card-body">
 							<div class="top">
-								<h2>{{ t.price }}</h2>
+								<span class="price" :class="{ 'patreon-red': t.name === 'Free' }">{{
+									t.price
+								}}</span>
 								<em v-if="t.price === 'Free'" class="neutral-2 sub">forever</em>
 								<em v-else class="neutral-2 sub">per month</em>
 							</div>
 							<ul>
+								<li v-for="(benefit, key) in default_benefits" :key="key">
+									<i class="fas fa-check green" aria-hidden="true" />
+									{{ benefit }}
+								</li>
 								<li v-for="(benefit, key) in benefits" :key="key">
 									<i
 										v-if="typeof t.benefits[key] === 'boolean'"
@@ -41,26 +47,52 @@
 										<span v-if="key === 'character_sync'" class="neutral-3">*</span>
 									</span>
 								</li>
-							</ul>
-							<ul class="storage">
-								<li v-for="storage_type in storage" :key="storage_type">
-									<i
-										aria-hidden="true"
-										v-if="t.benefits[storage_type] == 'infinite'"
-										class="green far fa-infinity"
-									/>
-									<span v-else class="green">{{ t.benefits[storage_type] }}</span>
-									<span>
-										{{ storageType(storage_type, t.benefits[storage_type]) }}
-										<span v-if="storage_type === 'encounters'" class="neutral-3">
-											(per campaign)
-										</span>
+								<li>
+									<i class="fas fa-check green" aria-hidden="true" />
+									<span
+										class="d-flex justify-content-between items-center pointer"
+										@click="show_storage = !show_storage"
+									>
+										<span
+											><strong>{{ storage_size[t.name] }}</strong> storage</span
+										>
+										<i
+											class="fas fa-chevron-down"
+											aria-hidden="true"
+											:class="{ open: show_storage }"
+										/>
 									</span>
 								</li>
 							</ul>
+							<q-slide-transition v-show="show_storage">
+								<ul class="storage">
+									<li v-for="storage_type in storage" :key="storage_type">
+										<i
+											aria-hidden="true"
+											v-if="t.benefits[storage_type] == 'infinite'"
+											class="green far fa-infinity"
+										/>
+										<span v-else class="green">{{ t.benefits[storage_type] }}</span>
+										<span>
+											{{ storageType(storage_type, t.benefits[storage_type]) }}
+											<span v-if="storage_type === 'encounters'" class="neutral-3">
+												(per campaign)
+											</span>
+										</span>
+									</li>
+								</ul>
+							</q-slide-transition>
 						</div>
-						<div slot="footer" v-if="t.price != 'Free'">
+						<div slot="footer">
+							<router-link
+								v-if="t.price === 'Free' && !user"
+								class="btn btn-block btn-square bg-patreon-red"
+								to="/sign-up"
+							>
+								Use for Free
+							</router-link>
 							<a
+								v-else
 								:href="'https://www.patreon.com/join/shieldmaidenapp/checkout?rid=' + t['.key']"
 								target="_blank"
 								rel="noopener"
@@ -99,6 +131,7 @@ export default {
 		return {
 			loading: true,
 			show_storage: false,
+			default_benefits: ["Combat tracker", "Encounter builder", "NPC creator", "Spell creator"],
 			benefits: {
 				character_sync: {
 					title: "Character sync",
@@ -112,9 +145,12 @@ export default {
 				import: {
 					title: "Import content",
 				},
-				storage: {
-					title: "Storage",
-				},
+			},
+			storage_size: {
+				Free: "Small",
+				"Folk Hero": "Medium",
+				Noble: "Large",
+				Deity: "Infinite",
 			},
 			legacy_tiers,
 			storage: ["campaigns", "encounters", "players", "npcs", "spells", "reminders", "items"],
@@ -129,7 +165,7 @@ export default {
 		};
 	},
 	computed: {
-		...mapGetters(["tier"]),
+		...mapGetters(["user", "tier"]),
 	},
 	methods: {
 		storageType(type, count) {
@@ -157,12 +193,14 @@ export default {
 		}
 	}
 	.card-body {
-		padding: 0;
+		padding: 0 0 15px 0;
 
 		.top {
 			padding: 15px;
-			h2 {
-				margin-bottom: 0 !important;
+			.price {
+				font-size: 25px;
+				font-weight: bold;
+				margin-right: 5px;
 			}
 			i.sub {
 				display: block;
@@ -180,13 +218,20 @@ export default {
 				line-height: 35px;
 				align-items: center;
 				font-size: 15px;
-				padding: 0 5px 0 15px;
+				padding: 0 15px;
 				color: $neutral-1;
 				margin-bottom: 1px;
+
+				.fa-chevron-down {
+					transition: all 0.2s linear;
+
+					&.open {
+						transform: rotate(-180deg);
+					}
+				}
 			}
 			&.storage {
 				padding-left: 20px;
-				margin-bottom: 15px;
 
 				li {
 					font-size: 13px;
diff --git a/src/components/header/UserMenu.vue b/src/components/header/UserMenu.vue
index fc050bbb..daee9f44 100644
--- a/src/components/header/UserMenu.vue
+++ b/src/components/header/UserMenu.vue
@@ -91,7 +91,13 @@
 			>
 				<div class="bg-neutral-8">
 					<q-list>
-						<q-item clickable v-close-popup href="https://discord.gg/dU59jgvcuq">
+						<q-item
+							clickable
+							v-close-popup
+							href="https://discord.gg/dU59jgvcuq"
+							target="_blank"
+							rel="noopener"
+						>
 							<q-item-section avatar
 								><i aria-hidden="true" class="fab fa-discord"></i
 							></q-item-section>
diff --git a/src/components/home/Builder.vue b/src/components/home/Builder.vue
index 9040408e..bc890a9d 100644
--- a/src/components/home/Builder.vue
+++ b/src/components/home/Builder.vue
@@ -3,9 +3,9 @@
 		<div class="container">
 			<div class="head">
 				<h2>Build great encounters</h2>
-				<span>
+				<div class="text">
 					Our encounter builder is easy to use and lets you use your own custom monsters.
-				</span>
+				</div>
 			</div>
 
 			<video
diff --git a/src/components/home/Campaign.vue b/src/components/home/Campaign.vue
index e6c1e65d..935044ac 100644
--- a/src/components/home/Campaign.vue
+++ b/src/components/home/Campaign.vue
@@ -3,11 +3,11 @@
 		<div class="container">
 			<div class="head">
 				<h2>Campaign Manager</h2>
-				<span>
+				<div class="text">
 					Our tool started out as a combat tracker for Dungeons & Dragons, but it has grown a lot.
 					Over time it has become so much more than that, but if you simply want to run your
 					encounters it is still perfect for just that.
-				</span>
+				</div>
 			</div>
 
 			<div class="row q-col-gutter-xl mb-5">
diff --git a/src/components/home/Feedback.vue b/src/components/home/Feedback.vue
index 0b33de38..675de534 100644
--- a/src/components/home/Feedback.vue
+++ b/src/components/home/Feedback.vue
@@ -3,9 +3,7 @@
 		<div class="container">
 			<div class="head">
 				<h2>User feedback</h2>
-				<span>
-					Our favourite feedback messages
-				</span>
+				<div class="text">Our favourite feedback messages</div>
 			</div>
 			<div class="d-flex justify-center">
 				<q-carousel
@@ -22,8 +20,8 @@
 					class="transparent pb-3"
 				>
 					<q-carousel-slide
-						v-for="({text, link, source, date}, index) in feedback"
-						:name="index" 
+						v-for="({ text, link, source, date }, index) in feedback"
+						:name="index"
 						:key="`slide-${index}`"
 					>
 						<h3 v-html="source" />
@@ -42,124 +40,132 @@
 </template>
 
 <script>
-	export default {
-		name: 'Feedback',
-		data() {
-			return {
-				slide: 0,
-				feedback: [
-					{
-						source: '<i aria-hidden="true" class="fab fa-discord discord-purple"></i> On Discord',
-						text: "Great encounter tracker! I've tried a bunch and this is hands down the best.",
-						link: "https://discordapp.com/channels/654675574488563714/654695745156284472/707949539436527639",
-						date: "7 May 2020"
-					},
-					{
-						source: '<i aria-hidden="true" class="fab fa-discord discord-purple"></i> On Discord',
-						text: "I'm blown away by the quality and the attention to detail that you guys had while creating it. Honestly, "+
+export default {
+	name: "Feedback",
+	data() {
+		return {
+			slide: 0,
+			feedback: [
+				{
+					source: '<i aria-hidden="true" class="fab fa-discord discord-purple"></i> On Discord',
+					text: "Great encounter tracker! I've tried a bunch and this is hands down the best.",
+					link: "https://discordapp.com/channels/654675574488563714/654695745156284472/707949539436527639",
+					date: "7 May 2020",
+				},
+				{
+					source: '<i aria-hidden="true" class="fab fa-discord discord-purple"></i> On Discord',
+					text:
+						"I'm blown away by the quality and the attention to detail that you guys had while creating it. Honestly, " +
 						"I don't think that any of the more popular options [&#8230;] ever come close to the level of quality that Shieldmaiden has!",
-						link: "https://discord.com/channels/654675574488563714/654695745156284472/857324784127180810",
-						date: "23 June 2021"
-					},
-					{
-						source: '<i aria-hidden="true" class="fab fa-patreon patreon-red"></i> On Patreon',
-						text: "Your tool is awesome and exactly what I was searching for. "+
-							"No more paper trash or excel sheets!",
-						link: "https://www.patreon.com/posts/28158979",
-						date: "5 July 2019"
-					},
-					{
-						source: '<i aria-hidden="true" class="fab fa-patreon patreon-red"></i> On Patreon',
-						text: "This app seems like a GODSEND. Seeing what the app is and imagining "+
-							"what it may become is (almost) as exciting at the game itself!",
-						link: "https://www.patreon.com/posts/new-dms-take-40455856",
-						date: "14 August 2020"
-					},
-					{
-						source: '<i aria-hidden="true" class="fab fa-patreon patreon-red"></i> On Patreon',
-						text: "Great app and great help with everything!!! "+
-							"I immediately went for the highest tier because I think that "+
-							"this program is amazing and I'd like to see it grow even more!!!",
-						link: "https://www.patreon.com/posts/28830203",
-						date: "1 August 2019"
-					},
-					{
-						source: '<i aria-hidden="true" class="fab fa-patreon patreon-red"></i> On Patreon',
-						text: "Easily one of the best supplements "+
-							"I've ever seen produced for this game. Keep it up guys, I'm telling "+
-							"everyone about this!",
-						link: "https://www.patreon.com/posts/27234775",
-						date: "30 May 2019"
-					},
-					{
-						source: '<i aria-hidden="true" class="fab fa-discord discord-purple"></i> On Discord',
-						text: "Thank you so much for your rapid updates. You guys literally "+
-							"fixed the hidden NPC name feature IN THE MIDDLE of my session. "+
-							"Hot damn. That is some incredibly fast patching.",
-						link: "https://discordapp.com/channels/654675574488563714/654747817352495130/702699725715144845",
-						date: "23 April 2020"
-					},
-					{
-						source: '<i aria-hidden="true" class="fas fa-envelope blue"></i> In a private message',
-						text: "I cannot tell you how much Shieldmaiden has helped me focus on "+
-							"story and content and less on encounter logistics planning. "+
-							"My players LOVE when I share the damage leaderboards after combat.",
-						date: "7 January 2020"
-					},
-					{
-						source: '<i aria-hidden="true" class="fab fa-discord discord-purple"></i> On Discord',
-						text: "I can't believe this program isn't backed by more people. "+
-							"It's so unbelievably well done and useful.",
-						link: "https://discordapp.com/channels/654675574488563714/654747817352495130/665853124711284738",
-						date: "12 January 2020"
-					},
-					{
-						source: '<i aria-hidden="true" class="fab fa-discord discord-purple"></i> On Discord',
-						text: "I use it all the time and absolutely love it. It's so cool.",
-						link: "https://discord.com/channels/654675574488563714/654747817352495130/666849088406552596",
-						date: "15 January 2020"
-					},
-					// {
-					// 	source: '<i aria-hidden="true" class="fab fa-discord discord-purple"></i> On Discord',
-					// 	text: "This app is great and totally worth the Patreon subscription. "+
-					// 		"I've put together encounters that I was in as a player and started "+
-					// 		"them with player and NPC initiatives all before my DM was able to "+
-					// 		"start the first round using paper init trackers.",
-					// 	link: "https://discordapp.com/channels/654675574488563714/654747817352495130/680486228784709666",
-					// 	date: "21 February 2020"
-					// },
-				]
-			}
-		}
-	}
+					link: "https://discord.com/channels/654675574488563714/654695745156284472/857324784127180810",
+					date: "23 June 2021",
+				},
+				{
+					source: '<i aria-hidden="true" class="fab fa-patreon patreon-red"></i> On Patreon',
+					text:
+						"Your tool is awesome and exactly what I was searching for. " +
+						"No more paper trash or excel sheets!",
+					link: "https://www.patreon.com/posts/28158979",
+					date: "5 July 2019",
+				},
+				{
+					source: '<i aria-hidden="true" class="fab fa-patreon patreon-red"></i> On Patreon',
+					text:
+						"This app seems like a GODSEND. Seeing what the app is and imagining " +
+						"what it may become is (almost) as exciting at the game itself!",
+					link: "https://www.patreon.com/posts/new-dms-take-40455856",
+					date: "14 August 2020",
+				},
+				{
+					source: '<i aria-hidden="true" class="fab fa-patreon patreon-red"></i> On Patreon',
+					text:
+						"Great app and great help with everything!!! " +
+						"I immediately went for the highest tier because I think that " +
+						"this program is amazing and I'd like to see it grow even more!!!",
+					link: "https://www.patreon.com/posts/28830203",
+					date: "1 August 2019",
+				},
+				{
+					source: '<i aria-hidden="true" class="fab fa-patreon patreon-red"></i> On Patreon',
+					text:
+						"Easily one of the best supplements " +
+						"I've ever seen produced for this game. Keep it up guys, I'm telling " +
+						"everyone about this!",
+					link: "https://www.patreon.com/posts/27234775",
+					date: "30 May 2019",
+				},
+				{
+					source: '<i aria-hidden="true" class="fab fa-discord discord-purple"></i> On Discord',
+					text:
+						"Thank you so much for your rapid updates. You guys literally " +
+						"fixed the hidden NPC name feature IN THE MIDDLE of my session. " +
+						"Hot damn. That is some incredibly fast patching.",
+					link: "https://discordapp.com/channels/654675574488563714/654747817352495130/702699725715144845",
+					date: "23 April 2020",
+				},
+				{
+					source: '<i aria-hidden="true" class="fas fa-envelope blue"></i> In a private message',
+					text:
+						"I cannot tell you how much Shieldmaiden has helped me focus on " +
+						"story and content and less on encounter logistics planning. " +
+						"My players LOVE when I share the damage leaderboards after combat.",
+					date: "7 January 2020",
+				},
+				{
+					source: '<i aria-hidden="true" class="fab fa-discord discord-purple"></i> On Discord',
+					text:
+						"I can't believe this program isn't backed by more people. " +
+						"It's so unbelievably well done and useful.",
+					link: "https://discordapp.com/channels/654675574488563714/654747817352495130/665853124711284738",
+					date: "12 January 2020",
+				},
+				{
+					source: '<i aria-hidden="true" class="fab fa-discord discord-purple"></i> On Discord',
+					text: "I use it all the time and absolutely love it. It's so cool.",
+					link: "https://discord.com/channels/654675574488563714/654747817352495130/666849088406552596",
+					date: "15 January 2020",
+				},
+				// {
+				// 	source: '<i aria-hidden="true" class="fab fa-discord discord-purple"></i> On Discord',
+				// 	text: "This app is great and totally worth the Patreon subscription. "+
+				// 		"I've put together encounters that I was in as a player and started "+
+				// 		"them with player and NPC initiatives all before my DM was able to "+
+				// 		"start the first round using paper init trackers.",
+				// 	link: "https://discordapp.com/channels/654675574488563714/654747817352495130/680486228784709666",
+				// 	date: "21 February 2020"
+				// },
+			],
+		};
+	},
+};
 </script>
 
 <style lang="scss" scoped>
-	.feedback {
-		.q-carousel {
-			max-width: 750px;
-			height: 250px;
-			font-size: 12px;
+.feedback {
+	.q-carousel {
+		max-width: 750px;
+		height: 250px;
+		font-size: 12px;
 
-			&__slide {
-				h3 {
-					font-size: 17px !important;
-					line-height: 20px;
-					font-weight: bold;
-					margin-bottom: 10px !important;
-				}
-				p {
-					margin-bottom: 10px !important;
-					line-height: 18px;
-				}
+		&__slide {
+			h3 {
+				font-size: 17px !important;
+				line-height: 20px;
+				font-weight: bold;
+				margin-bottom: 10px !important;
+			}
+			p {
+				margin-bottom: 10px !important;
+				line-height: 18px;
 			}
 		}
 	}
-	@media only screen and (min-width: 900px) {
-		.feedback{
-			.q-carousel {
-				width: 750px;
-			}
+}
+@media only screen and (min-width: 900px) {
+	.feedback {
+		.q-carousel {
+			width: 750px;
 		}
 	}
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/src/components/home/General.vue b/src/components/home/General.vue
index 59b5957a..9ca6b72a 100644
--- a/src/components/home/General.vue
+++ b/src/components/home/General.vue
@@ -3,10 +3,10 @@
 		<div class="container">
 			<div class="head">
 				<h2>We keep track, you focus on the game</h2>
-				<span>
+				<div class="text">
 					We focus on keeping the game on the table by managing everything you need to keep track of
 					during encounters. On top of that we enhance the player experience.
-				</span>
+				</div>
 			</div>
 
 			<div class="row q-col-gutter-xl mb-5">
diff --git a/src/components/home/Pricing.vue b/src/components/home/Pricing.vue
new file mode 100644
index 00000000..050a4a73
--- /dev/null
+++ b/src/components/home/Pricing.vue
@@ -0,0 +1,35 @@
+<template>
+	<div class="pricing">
+		<div class="container">
+			<div class="head">
+				<h2>Pricing</h2>
+				<div class="text">
+					Shieldmaiden has a free tier that gives access to al our core features, including our
+					Combat Tracker and Encounter Builder.
+				</div>
+			</div>
+			<Tiers class="mb-4" />
+			<div class="d-flex justify-center">
+				<router-link class="btn btn-lg bg-patreon-red" to="/patreon"
+					>More about pricing</router-link
+				>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import Tiers from "src/components/Tiers.vue";
+
+export default {
+	name: "Pricing",
+	components: {
+		Tiers,
+	},
+	data() {
+		return {};
+	},
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/home/Share.vue b/src/components/home/Share.vue
index b61904ce..6adb879d 100644
--- a/src/components/home/Share.vue
+++ b/src/components/home/Share.vue
@@ -3,10 +3,10 @@
 		<div class="container">
 			<div class="head">
 				<h2>Share a live initiative list with your players</h2>
-				<span>
+				<div class="text">
 					Show your players a live initiative list of the encounter that updates as you play.
 					Perfect for at the table or if you are hosting a podcast or stream.
-				</span>
+				</div>
 			</div>
 
 			<div class="row q-col-gutter-xl mb-5">
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 838e451f..10024bd5 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -1242,12 +1242,13 @@ html body {
 
 			.head {
 				margin-bottom: 50px;
-				text-align: center;
 
 				h2 {
-					font-size: 30px !important;
+					font-size: 30px;
 					line-height: 50px;
-					text-align: center;
+				}
+				.text {
+					max-width: 600px;
 				}
 			}
 			h3 {
@@ -2998,7 +2999,7 @@ html body {
 	//XL
 	@media only screen and (min-width: $xl-breakpoint) {
 		.container {
-			max-width: 1140px;
+			max-width: 1280px;
 		}
 		.drawer {
 			width: 420px;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index cbfb7c7e..040a6968 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -36,6 +36,20 @@
 				>
 				</span>
 			</section>
+			<section id="pricing" class="bg-neutral-11">
+				<Pricing />
+				<span
+					class="die"
+					:style="{
+						backgroundImage:
+							'url(' +
+							require('src/assets/_img/logo/logo-icon-no-shield-' + diceColors[2] + '.svg') +
+							')',
+						transform: `rotate(${scrolled}deg)`,
+					}"
+				>
+				</span>
+			</section>
 			<section id="general" class="bg-neutral-9">
 				<General />
 				<span
@@ -43,7 +57,7 @@
 					:style="{
 						backgroundImage:
 							'url(' +
-							require('src/assets/_img/logo/logo-icon-no-shield-' + diceColors[2] + '.svg') +
+							require('src/assets/_img/logo/logo-icon-no-shield-' + diceColors[3] + '.svg') +
 							')',
 						transform: `rotate(${scrolled}deg)`,
 					}"
@@ -57,7 +71,7 @@
 					:style="{
 						backgroundImage:
 							'url(' +
-							require('src/assets/_img/logo/logo-icon-no-shield-' + diceColors[3] + '.svg') +
+							require('src/assets/_img/logo/logo-icon-no-shield-' + diceColors[4] + '.svg') +
 							')',
 						transform: `rotate(${scrolled}deg)`,
 					}"
@@ -71,7 +85,7 @@
 					:style="{
 						backgroundImage:
 							'url(' +
-							require('src/assets/_img/logo/logo-icon-no-shield-' + diceColors[4] + '.svg') +
+							require('src/assets/_img/logo/logo-icon-no-shield-' + diceColors[5] + '.svg') +
 							')',
 						transform: `rotate(${scrolled}deg)`,
 					}"
@@ -95,6 +109,7 @@
 import { mapGetters } from "vuex";
 import Header from "src/components/home/Header.vue";
 import Top from "src/components/home/Top.vue";
+import Pricing from "src/components/home/Pricing.vue";
 import Feedback from "src/components/home/Feedback.vue";
 import General from "src/components/home/General.vue";
 import Share from "src/components/home/Share.vue";
@@ -113,6 +128,7 @@ export default {
 		Header,
 		Top,
 		Feedback,
+		Pricing,
 		General,
 		Share,
 		Builder,
diff --git a/src/views/profile/SetUsername.vue b/src/views/profile/SetUsername.vue
index 9c19ff83..59f12fe4 100644
--- a/src/views/profile/SetUsername.vue
+++ b/src/views/profile/SetUsername.vue
@@ -78,6 +78,11 @@ export default {
 					email: this.user.email.toLowerCase(),
 				});
 
+				this.$gtm.trackEvent({
+					event: "sign-up",
+					method: "Set Username",
+				});
+
 				this.$snotify.success("Username saved.", "Critical hit!", {
 					position: "centerTop",
 				});

From 337dbe41420bcc3932a9116671e88394bfa31ec8 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Sat, 2 Nov 2024 13:10:22 +0100
Subject: [PATCH 2/6] Pricing in sidebar

---
 src/components/Sidebar.vue | 6 ++----
 src/components/Tiers.vue   | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 6217b622..c89d10fc 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -196,14 +196,12 @@
 					<hr />
 				</template>
 				<q-list @click="setSideSmallScreen(false)">
-					<q-item clickable to="/patreon">
+					<q-item clickable v-ripple to="/patreon">
 						<q-item-section avatar>
 							<i aria-hidden="true" class="fas fa-coins" />
 						</q-item-section>
 						<q-item-section>
-							<q-btn no-caps color="primary" to="/patreon" class="full-width bg-patreon-red">
-								Subscribe
-							</q-btn>
+							{{ $store.getters.user ? "Get subscription" : "Pricing" }}
 						</q-item-section>
 						<q-tooltip
 							v-if="$store.getters.side_collapsed"
diff --git a/src/components/Tiers.vue b/src/components/Tiers.vue
index c43d4034..a8cb59cd 100644
--- a/src/components/Tiers.vue
+++ b/src/components/Tiers.vue
@@ -131,7 +131,7 @@ export default {
 		return {
 			loading: true,
 			show_storage: false,
-			default_benefits: ["Combat tracker", "Encounter builder", "NPC creator", "Spell creator"],
+			default_benefits: ["Combat tracker", "Encounter builder", "Monster creator", "Spell creator"],
 			benefits: {
 				character_sync: {
 					title: "Character sync",

From f7e15ecacdcaec4704e870317d045b59a2245795 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Sat, 2 Nov 2024 13:41:40 +0100
Subject: [PATCH 3/6] Pricing in header on home

---
 src/components/header/UserMenu.vue | 21 +++------------------
 src/components/home/Header.vue     | 23 +++++++++++++++++++++--
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/components/header/UserMenu.vue b/src/components/header/UserMenu.vue
index daee9f44..8ba359c8 100644
--- a/src/components/header/UserMenu.vue
+++ b/src/components/header/UserMenu.vue
@@ -81,7 +81,7 @@
 				</div>
 			</q-popup-proxy>
 		</div>
-		<button v-else class="btn btn-clear bg-neutral-6 user-btn">
+		<button v-else class="btn btn-clear btn-sm bg-neutral-6 user-btn">
 			<i class="fas fa-user-circle" />
 			<q-popup-proxy
 				:dark="$store.getters.theme === 'dark'"
@@ -91,18 +91,6 @@
 			>
 				<div class="bg-neutral-8">
 					<q-list>
-						<q-item
-							clickable
-							v-close-popup
-							href="https://discord.gg/dU59jgvcuq"
-							target="_blank"
-							rel="noopener"
-						>
-							<q-item-section avatar
-								><i aria-hidden="true" class="fab fa-discord"></i
-							></q-item-section>
-							<q-item-section>Join our Discord</q-item-section>
-						</q-item>
 						<q-item clickable v-close-popup @click="sign_in_dialog = true">
 							<q-item-section avatar
 								><i aria-hidden="true" class="fas fa-sign-in"></i
@@ -194,12 +182,9 @@ export default {
 		}
 	}
 	.user-btn {
-		font-size: 22px;
-		border-radius: 999px;
-		height: 38px;
-		width: 38px;
 		box-sizing: border-box;
-		padding: 0;
+		font-size: 22px;
+		padding: 0 8px;
 	}
 }
 </style>
diff --git a/src/components/home/Header.vue b/src/components/home/Header.vue
index afaf3a40..fe37050f 100644
--- a/src/components/home/Header.vue
+++ b/src/components/home/Header.vue
@@ -3,9 +3,25 @@
 		<div class="container">
 			<div class="d-flex items-center">
 				<img class="logo" :src="require(`../../assets/_img/logo/${logo}`)" alt="Shieldmaiden" />
-				<!-- <span class="dot-app">.app</span> -->
 			</div>
-			<UserMenu> Account </UserMenu>
+			<div class="d-flex justify-content-end items-center">
+				<router-link class="btn btn-sm btn-clear" to="/patreon">
+					Pricing
+					<i class="fas fa-coins ml-1" aria-hidden="true" />
+				</router-link>
+				<a
+					class="btn btn-sm btn-clear"
+					href="https://discord.gg/dU59jgvcuq"
+					target="_blank"
+					rel="noopener"
+				>
+					<i class="fab fa-discord" aria-hidden="true" />
+					<q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 10]">
+						Join our Discord
+					</q-tooltip>
+				</a>
+				<UserMenu />
+			</div>
 		</div>
 	</header>
 </template>
@@ -65,6 +81,9 @@ header {
 			opacity: 0.3;
 			font-size: 12px;
 		}
+		.btn {
+			box-sizing: border-box;
+		}
 	}
 
 	&.scrolled {

From 6a0f2d6449bdee84a4c1690af02adb0af7940390 Mon Sep 17 00:00:00 2001
From: Keyzer <keyroos@gmail.com>
Date: Sat, 2 Nov 2024 13:58:07 +0100
Subject: [PATCH 4/6] Fix refresh on pricing page

---
 src/components/Tiers.vue    | 4 ++--
 src/views/Pages/Patreon.vue | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Tiers.vue b/src/components/Tiers.vue
index a8cb59cd..e29b8121 100644
--- a/src/components/Tiers.vue
+++ b/src/components/Tiers.vue
@@ -85,9 +85,9 @@
 						</div>
 						<div slot="footer">
 							<router-link
-								v-if="t.price === 'Free' && !user"
+								v-if="t.price === 'Free'"
 								class="btn btn-block btn-square bg-patreon-red"
-								to="/sign-up"
+								:to="!user ? '/sign-up' : '/content'"
 							>
 								Use for Free
 							</router-link>
diff --git a/src/views/Pages/Patreon.vue b/src/views/Pages/Patreon.vue
index 08a28dd3..79ab10a6 100644
--- a/src/views/Pages/Patreon.vue
+++ b/src/views/Pages/Patreon.vue
@@ -23,7 +23,9 @@
 					<router-link class="btn" to="/sign-up"> Create a Shieldmaiden account </router-link>
 				</div>
 				<div v-else-if="!userInfo.patreon_id" class="d-flex justify-content-center mb-5">
-					<PatreonLinkButton />
+					<q-no-ssr>
+						<PatreonLinkButton />
+					</q-no-ssr>
 				</div>
 
 				<Tiers class="mb-4" />

From 7bdb35cc39b0648b3d2e3c4a0fc8969e39f00400 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Sat, 2 Nov 2024 16:20:21 +0100
Subject: [PATCH 5/6] Add digital DM screen to default perks

---
 src/components/Tiers.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Tiers.vue b/src/components/Tiers.vue
index e29b8121..9e1ece27 100644
--- a/src/components/Tiers.vue
+++ b/src/components/Tiers.vue
@@ -131,7 +131,13 @@ export default {
 		return {
 			loading: true,
 			show_storage: false,
-			default_benefits: ["Combat tracker", "Encounter builder", "Monster creator", "Spell creator"],
+			default_benefits: [
+				"Combat tracker",
+				"Digital DM Screen",
+				"Encounter builder",
+				"Monster creator",
+				"Spell creator",
+			],
 			benefits: {
 				character_sync: {
 					title: "Character sync",

From 3d8a177b257a14dace4810717588c2cdcfcd2b42 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Sat, 2 Nov 2024 16:49:06 +0100
Subject: [PATCH 6/6] Custom prefix

---
 src/components/Tiers.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Tiers.vue b/src/components/Tiers.vue
index 9e1ece27..38118d3d 100644
--- a/src/components/Tiers.vue
+++ b/src/components/Tiers.vue
@@ -74,6 +74,12 @@
 										/>
 										<span v-else class="green">{{ t.benefits[storage_type] }}</span>
 										<span>
+											<span
+												v-if="['npcs', 'spells', 'reminders', 'items'].includes(storage_type)"
+												class="neutral-3"
+											>
+												Custom
+											</span>
 											{{ storageType(storage_type, t.benefits[storage_type]) }}
 											<span v-if="storage_type === 'encounters'" class="neutral-3">
 												(per campaign)
@@ -133,8 +139,9 @@ export default {
 			show_storage: false,
 			default_benefits: [
 				"Combat tracker",
-				"Digital DM Screen",
 				"Encounter builder",
+				"Digital DM Screen",
+				"Public Initiative List",
 				"Monster creator",
 				"Spell creator",
 			],