diff --git a/website/client/src/assets/images/gradient-swoop.png b/website/client/src/assets/images/gradient-swoop.png new file mode 100644 index 0000000000..2e82b8e476 Binary files /dev/null and b/website/client/src/assets/images/gradient-swoop.png differ diff --git a/website/client/src/assets/images/subscriber-food.png b/website/client/src/assets/images/subscriber-food.png deleted file mode 100644 index 88fc52f7cc..0000000000 Binary files a/website/client/src/assets/images/subscriber-food.png and /dev/null differ diff --git a/website/client/src/assets/scss/colors.scss b/website/client/src/assets/scss/colors.scss index 9ee2894a5a..4e1536efa2 100644 --- a/website/client/src/assets/scss/colors.scss +++ b/website/client/src/assets/scss/colors.scss @@ -78,15 +78,3 @@ $gold-color: #FFA624; $hourglass-color: #2995CD; $purple-task: #925cf3; - -.gray-200 { - color: $gray-200 !important; -} - -.purple-300 { - color: $purple-300 !important; -} - -.white { - color: $white !important; -} diff --git a/website/client/src/assets/scss/typography.scss b/website/client/src/assets/scss/typography.scss index 970fd41737..fac98c57d7 100644 --- a/website/client/src/assets/scss/typography.scss +++ b/website/client/src/assets/scss/typography.scss @@ -86,3 +86,67 @@ h4 { .opacity-75 { opacity: 0.75; } + +.bg-gray-300 { + background-color: $gray-300 !important; +} + +.bg-gray-600 { + background-color: $gray-600 !important; +} + +.bg-gray-700 { + background-color: $gray-700 !important; +} + +.bg-green-10 { + background-color: $green-10 !important; +} + +.bg-white { + background-color: $white !important; +} + +.gray-10 { + color: $gray-10 !important; +} + +.gray-50 { + color: $gray-50 !important; +} + +.gray-200 { + color: $gray-200 !important; +} + +.gray-300 { + color: $gray-300 !important; +} + +.green-10 { + color: $green-10 !important; +} + +.maroon-50 { + color: $maroon-50 !important; +} + +.purple-300 { + color: $purple-300 !important; +} + +.teal-1 { + color: $teal-1 !important; +} + +.teal-10 { + color: $teal-10 !important; +} + +.yellow-10 { + color: $yellow-10 !important; +} + +.white { + color: $white !important; +} diff --git a/website/client/src/assets/svg/divider-stars.svg b/website/client/src/assets/svg/divider-stars.svg new file mode 100644 index 0000000000..648001dab4 --- /dev/null +++ b/website/client/src/assets/svg/divider-stars.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/client/src/assets/svg/gradient-swoop.svg b/website/client/src/assets/svg/gradient-swoop.svg new file mode 100644 index 0000000000..70a2e21576 --- /dev/null +++ b/website/client/src/assets/svg/gradient-swoop.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/website/client/src/assets/svg/habitica-logo.svg b/website/client/src/assets/svg/habitica-logo.svg index 54b2acc5a1..01d80fb183 100644 --- a/website/client/src/assets/svg/habitica-logo.svg +++ b/website/client/src/assets/svg/habitica-logo.svg @@ -1,7 +1,5 @@ - - - - - - + + + + diff --git a/website/client/src/assets/svg/jackalope.svg b/website/client/src/assets/svg/jackalope.svg new file mode 100644 index 0000000000..5e351c4955 --- /dev/null +++ b/website/client/src/assets/svg/jackalope.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/website/client/src/assets/svg/stars-purple.svg b/website/client/src/assets/svg/stars-purple.svg new file mode 100644 index 0000000000..a6c799848d --- /dev/null +++ b/website/client/src/assets/svg/stars-purple.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/client/src/assets/svg/subscriber-food.svg b/website/client/src/assets/svg/subscriber-food.svg new file mode 100644 index 0000000000..7991bab49f --- /dev/null +++ b/website/client/src/assets/svg/subscriber-food.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/website/client/src/assets/svg/subscriber-gems.svg b/website/client/src/assets/svg/subscriber-gems.svg index e57077f7d8..844f13598e 100644 --- a/website/client/src/assets/svg/subscriber-gems.svg +++ b/website/client/src/assets/svg/subscriber-gems.svg @@ -1,26 +1,29 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/client/src/assets/svg/subscriber-hourglasses.svg b/website/client/src/assets/svg/subscriber-hourglasses.svg index 79e993b4c6..27d8c94822 100644 --- a/website/client/src/assets/svg/subscriber-hourglasses.svg +++ b/website/client/src/assets/svg/subscriber-hourglasses.svg @@ -1,26 +1,20 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + diff --git a/website/client/src/components/settings/subscription.vue b/website/client/src/components/settings/subscription.vue index eb867af721..ed38c7b7d5 100644 --- a/website/client/src/components/settings/subscription.vue +++ b/website/client/src/components/settings/subscription.vue @@ -1,350 +1,392 @@
-
-
-
- {{ $t('support') }} -
-
-
- -
-
-
-
-

{{ $t('subscribersReceiveBenefits') }}

-
-
-
-
-
-
-

{{ $t('buyGemsGold') }}

-

{{ $t('subscriptionBenefit1') }}

-
-
-
-
-
-
-
-

{{ $t('mysticHourglassesTooltip') }}

-

{{ $t('subscriptionBenefit6') }}

-
-
-
-
- -
-
-

{{ $t('monthlyMysteryItems') }}

-

{{ $t('subscriptionBenefit4') }}

-
-
-
-
-
-
-
-

{{ $t('exclusiveJackalopePet') }}

-

{{ $t('subscriptionBenefit5') }}

-
-
-
-
-
-
-
-

{{ $t('doubleDropCap') }}

-

{{ $t('subscriptionBenefit3') }}

-
-
-
-
-
- -
-
-
-
-

- {{ $t('subscription') }} -

-
-
+
@@ -207,8 +210,11 @@ export default { if (!this.currentEvent || !this.currentEvent.promo) return 'none'; return this.currentEvent.promo; }, + maxWidthView () { + return this.$route.name === 'subscription'; + }, applyNarrowView () { - return !['subscription', 'transactions'].includes(this.$route.name); + return !this.maxWidthView && this.$route.name !== 'transactions'; }, }, methods: { diff --git a/website/common/locales/en/subscriber.json b/website/common/locales/en/subscriber.json index 4a805882b8..cc6ed07afb 100644 --- a/website/common/locales/en/subscriber.json +++ b/website/common/locales/en/subscriber.json @@ -7,12 +7,12 @@ "howManyGemsSend":"How many Gems would you like to send?", "needToPurchaseGems": "Need to purchase Gems as a gift?", "wantToSendOwnGems": "Want to send your own Gems?", - "buyGemsGold": "Buy Gems with Gold", + "buyGemsGold": "Free Monthly Gems", "mustSubscribeToPurchaseGems": "Must subscribe to purchase gems with GP", "reachedGoldToGemCapQuantity": "Your requested amount <%= quantity %> exceeds the amount you can buy for this month (<%= convCap %>). The full amount becomes available within the first three days of each month. Thanks for subscribing!", "mysteryItem": "Exclusive monthly items", "mysteryItemText": "Each month you will receive a unique cosmetic item for your avatar! Plus, for every three months of consecutive subscription, the Mysterious Time Travelers will grant you access to historic (and futuristic!) cosmetic items.", - "exclusiveJackalopePet": "Exclusive pet", + "exclusiveJackalopePet": "Special Pet", "giftSubscription": "Want to gift the benefits of a subscription to someone else?", "giftASubscription": "Gift a Subscription", "giftSubscriptionText4": "Thanks for supporting Habitica!", @@ -199,22 +199,24 @@ "choosePaymentMethod": "Choose your payment method", "support": "Support", "supportHabitica": "Support Habitica", + "subscribeTo": "Subscribe To", "gemBenefitLeadin": "What can you buy with Gems?", "gemBenefit1": "Unique and fashionable costumes for your avatar.", "gemBenefit2": "Backgrounds to immerse your avatar in the world of Habitica!", "gemBenefit3": "Exciting Quest chains that drop pet eggs.", "gemBenefit4": "Reset your avatar's Stat Points and change its Class.", "usuallyGems": "Usually <%= originalGems %>", - "subscriptionBenefit1": "Alexander the Merchant will now sell you Gems from the Market for 20 Gold each!", - "subscriptionBenefit3": "Discover even more items in Habitica with a 2x daily drop-cap.", - "subscriptionBenefit4": "Unique cosmetic item for you to decorate your avatar each month.", - "subscriptionBenefit5": "Receive the Royal Purple Jackalope pet when you become a new subscriber.", - "subscriptionBenefit6": "Earn Mystic Hourglasses to purchase items in the Time Traveler’s Shop!", + "subscriptionBenefit1": "Get up to 50 Gold-purchasable Gems in the Market to buy Quests, Customizations, Pets, and more!", + "subscriptionBenefit3": "Find double the Eggs, Hatching Potions, and Food each day to grow your Pet collection!", + "subscriptionBenefit4": "Stay decked out in the latest exclusive gear. Subscribe now to get <%= month %>’s <%= currentMysterySetName %>!", + "subscriptionBenefit5": "Get the exclusive Royal Purple Jackalope when you subscribe today!", + "subscriptionBenefit6": "Never miss an item with 1 Mystic Hourglass a month to use in the Time Travelers Shop!", "purchaseAll": "Purchase Set", "gemsRemaining": "remaining", "notEnoughGemsToBuy": "No more Gems available for purchase this month. More will become available within the first 3 days of each month.", - "subscribersReceiveBenefits": "Subscribers receive these useful benefits!", - "monthlyMysteryItems": "Monthly Mystery Items", + "subscribersReceiveBenefits": "Stay motivated with even more rewards when you subscribe", + "monthlyMysteryItems": "Limited Monthly Gear Sets", + "monthlyMysticHourglass": "Monthly Mystic Hourglass", "doubleDropCap": "Double the Drops", "youAreSubscribed": "You are subscribed to Habitica", "dropCapReached": "You found all items for the day!", @@ -233,7 +235,15 @@ "sendAGift": "Send Gift", "haveNonRecurringSub": "You have a non-recurring gift subscription.", "switchToRecurring": "Switch to a recurring subscription?", + "recurringMonthly": "Recurring every month", + "recurringNMonthly": "Recurring every <%= length %> months", + "unlockNGems": "Unlock <%= count %> Gems per month instantly", + "earn2Gems": "Earn +2 Gems every month you're subscribed", + "maxGemCap": "Max Gem Cap", "continueGiftSubBenefits": "Want to continue your benefits? You can start a new subscription before your gifted one runs out to keep your benefits active.", "subscriptionCreditConversion": "Starting a new subscription will convert any remaining months to credit that will be used after the recurring subscription is canceled.", - "monthlyGems": "Monthly Gems:" + "monthlyGems": "Monthly Gems:", + "popular": "Popular", + "immediate12Hourglasses": "Get 12 Mystic Hourglasses immediately after your first 12-month subscription!", + "subscribe": "Subscribe" }