Show benefits for supporters

pages/shop/shop.pixy

@@ -6,6 +6,39 @@ component Shop(items []*arn.ShopItem, itemPopularity map[string]int, user *arn.U
 	.shop-items
 		each item in items
 			ShopItem(item, itemPopularity[item.ID])
+	
+	#pro-benefits-footer.buttons.mountable
+		button.pro-benefits-button.action(data-action="toggleFade", data-trigger="click", data-element-id="pro-benefits")
+			RawIcon("question-circle")
+			p View benefits of PRO accounts
+	
+	#pro-benefits.fade.fade-out
+		h3.pro-benefits-header.mountable PRO accounts let you...
+
+		ul
+			li.pro-benefit.mountable
+				Icon("check")
+				span Access the dark theme
+
+			li.pro-benefit.mountable 
+				Icon("check")
+				span Customize your cover image
+
+			li.pro-benefit.mountable 
+				Icon("check")
+				span Secure a spot on the supporters page
+
+			li.pro-benefit.mountable 
+				Icon("check")
+				span Show a star near your avatar
+
+			li.pro-benefit.mountable 
+				Icon("check")
+				span Receive the supporter role on the Discord server
+
+			li.pro-benefit.mountable 
+				Icon("check")
+				span ...and many more luxury features in the future.
 
 component ShopTabs(user *arn.User)
 	.tabs

pages/shop/shop.scarlet

@@ -59,4 +59,35 @@ const item-color-anime-support-ticket = hsl(217, 64%, 50%)
 
 	.icon-diamond
 		margin-left 0.3rem
-		margin-right 0
+		margin-right 0
+
+#pro-benefits-footer
+	margin-top 3rem
+
+.pro-benefits-button
+	vertical
+	color hsla(text-color-h, text-color-s, text-color-l, 0.5)
+	background transparent
+	border none
+	font-size 0.8rem
+
+	:hover
+		background transparent
+		border none
+		color link-hover-color
+
+#pro-benefits
+	margin 0 auto
+	margin-top 2rem
+	width 100%
+	max-width 400px
+
+.pro-benefits-header
+	text-align center
+	margin-bottom 1rem
+
+.pro-benefit
+	list-style-type none
+
+	.icon
+		color like-color

scripts/Actions/Shop.ts

@@ -33,6 +33,18 @@ export function chargeUp(arn: AnimeNotifier, button: HTMLElement) {
 	.then(() => arn.loading(false))
 }
 
+// Toggle fade
+export function toggleFade(arn: AnimeNotifier, button: HTMLElement) {
+	let elementId = button.dataset.elementId
+	let element = document.getElementById(elementId)
+
+	if(element.classList.contains("fade-out")) {
+		element.classList.remove("fade-out")
+	} else {
+		element.classList.add("fade-out")
+	}
+}
+
 // Buy item
 export function buyItem(arn: AnimeNotifier, button: HTMLElement) {
 	let itemId = button.dataset.itemId