Show pricing on homepage (#295)

HarmlessKey · Nov 2, 2024 · a8a1791 · a8a1791
2 parents cefdc2a + 3d8a177
commit a8a1791
Show file tree

Hide file tree

Showing 14 changed files with 306 additions and 175 deletions.
diff --git 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
@@ -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,58 @@
 										<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>
+											<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)
+											</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'"
+								class="btn btn-block btn-square bg-patreon-red"
+								:to="!user ? '/sign-up' : '/content'"
+							>
+								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 +137,14 @@ export default {
 		return {
 			loading: true,
 			show_storage: false,
+			default_benefits: [
+				"Combat tracker",
+				"Encounter builder",
+				"Digital DM Screen",
+				"Public Initiative List",
+				"Monster creator",
+				"Spell creator",
+			],
 			benefits: {
 				character_sync: {
 					title: "Character sync",
@@ -112,9 +158,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 +178,7 @@ export default {
 		};
 	},
 	computed: {
-		...mapGetters(["tier"]),
+		...mapGetters(["user", "tier"]),
 	},
 	methods: {
 		storageType(type, count) {
@@ -157,12 +206,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 +231,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
@@ -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,12 +91,6 @@
 			>
 				<div class="bg-neutral-8">
 					<q-list>
-						<q-item clickable v-close-popup href="https://discord.gg/dU59jgvcuq">
-							<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
@@ -188,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/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
@@ -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">