WIP(frontend): draft of main subs page view

This commit is contained in:
Kalista Payne
2024-09-20 12:24:21 -05:00
parent 0102b29d59
commit cd752fbdce
16 changed files with 897 additions and 502 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 277 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.0 KiB

@@ -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;
}
@@ -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;
}
@@ -0,0 +1,32 @@
<svg width="40" height="16" viewBox="0 0 40 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3333 5.33333L12 8L17.3333 10.6667L20 16L22.6667 10.6667L28 8L22.6667 5.33333L20 0L17.3333 5.33333Z" fill="#BDA8FF"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M25 7.99984L21.6667 9.6665L20 7.99984L25 7.99984Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M20 3L21.6666 6.33333L20 8V3Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M15 8L18.3333 6.33333L20 8L15 8Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M20 13L18.3333 9.66667L20 8V13Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M15 7.99984L18.3333 9.6665L20 7.99984L15 7.99984Z" fill="#925CF3"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M20 3L18.3333 6.33333L20 8V3Z" fill="#925CF3"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M25 8L21.6667 6.33333L20 8L25 8Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M20 13L21.6666 9.66667L20 8V13Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M20.7999 7.20041L22.3333 8.00041L20.7999 8.80041L19.9999 10.3337L19.1999 8.80041L17.6666 8.00041L19.1999 7.20041L19.9999 5.66707L20.7999 7.20041Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66667 6.66667L0 8L2.66667 9.33333L4 12L5.33333 9.33333L8 8L5.33333 6.66667L4 4L2.66667 6.66667Z" fill="#925CF3"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M6.49976 7.99967L4.83309 8.83301L3.99976 7.99967H6.49976Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M3.99998 5.5L4.83331 7.16667L3.99998 8L3.99998 5.5Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8L3.16667 7.16667L4 8H1.5Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M4 10.5L3.16667 8.83333L4 8V10.5Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M1.50018 7.99967L3.16685 8.83301L4.00018 7.99967H1.50018Z" fill="#6133B4"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M4 5.5L3.16667 7.16667L4 8V5.5Z" fill="#6133B4"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M6.5 8L4.83333 7.16667L4 8H6.5Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M3.99998 10.5L4.83331 8.83333L3.99998 8L3.99998 10.5Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M4.40002 7.59935L5.16669 7.99935L4.40002 8.39935L4.00002 9.16602L3.60002 8.39935L2.83335 7.99935L3.60002 7.59935L4.00002 6.83268L4.40002 7.59935Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.6667 6.66667L32 8L34.6667 9.33333L36 12L37.3333 9.33333L40 8L37.3333 6.66667L36 4L34.6667 6.66667Z" fill="#925CF3"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M38.4998 7.99967L36.8331 8.83301L35.9998 7.99967H38.4998Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M36 5.5L36.8333 7.16667L36 8V5.5Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M33.5 8L35.1667 7.16667L36 8H33.5Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M36 10.5L35.1667 8.83333L36 8V10.5Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M33.5002 7.99967L35.1668 8.83301L36.0002 7.99967H33.5002Z" fill="#6133B4"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M36 5.5L35.1667 7.16667L36 8V5.5Z" fill="#6133B4"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M38.5 8L36.8333 7.16667L36 8H38.5Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M36 10.5L36.8333 8.83333L36 8V10.5Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M36.4 7.59935L37.1667 7.99935L36.4 8.39935L36 9.16602L35.6 8.39935L34.8334 7.99935L35.6 7.59935L36 6.83268L36.4 7.59935Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

@@ -0,0 +1,9 @@
<svg width="1440" height="274" viewBox="0 0 1440 274" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1440 0H0L2.60432e-06 202.882C2.60432e-06 202.882 0.000148328 206.692 0.000729304 209.294C17.985 210.781 36.2503 212.362 54.9068 213.977C190.11 225.682 345.853 239.164 564 231.329C790.061 223.209 906.625 234.624 1043.17 247.995C1145.82 258.047 1259.76 269.204 1440 274L1440 0Z" fill="url(#paint0_linear_1324_709)"/>
<defs>
<linearGradient id="paint0_linear_1324_709" x1="0" y1="0" x2="315.968" y2="748.496" gradientUnits="userSpaceOnUse">
<stop stop-color="#6133B4"/>
<stop offset="1" stop-color="#4F2A93"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 652 B

@@ -1,7 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 31">
<g fill="none" fill-rule="evenodd">
<path fill="#FFF" d="M120.876 24.007a2.27 2.27 0 0 0-3.183.41 4.595 4.595 0 0 1-3.663 1.804 4.62 4.62 0 0 1-4.613-4.335c-.005-.35-.009-2.864-.009-3.19a4.627 4.627 0 0 1 4.622-4.622c1.28 0 2.47.51 3.353 1.44a2.269 2.269 0 0 0 3.29-3.125 9.2 9.2 0 0 0-6.643-2.853c-5.05 0-9.16 4.109-9.16 9.16 0 .03.002 3.175.014 3.406a9.158 9.158 0 0 0 9.146 8.657 9.1 9.1 0 0 0 7.257-3.57 2.27 2.27 0 0 0-.411-3.182M134.373 26.221a4.62 4.62 0 0 1-4.613-4.333c-.005-.353-.008-2.877-.008-3.193a4.627 4.627 0 0 1 4.621-4.622 4.627 4.627 0 0 1 4.622 4.622c0 .328-.003 2.84-.009 3.189a4.618 4.618 0 0 1-4.613 4.337m6.891-17.078a2.264 2.264 0 0 0-2.19 1.706 9.095 9.095 0 0 0-4.7-1.313c-5.051 0-9.16 4.109-9.16 9.16 0 .031.001 3.173.013 3.406a9.158 9.158 0 0 0 9.146 8.657 9.118 9.118 0 0 0 4.81-1.37 2.268 2.268 0 0 0 4.35-.899V11.412a2.27 2.27 0 0 0-2.269-2.269M30.546 26.221a4.62 4.62 0 0 1-4.613-4.335c-.006-.35-.01-2.863-.01-3.19a4.627 4.627 0 0 1 4.623-4.623 4.627 4.627 0 0 1 4.622 4.622c0 .328-.004 2.84-.01 3.189a4.618 4.618 0 0 1-4.612 4.337m6.89-17.078a2.264 2.264 0 0 0-2.19 1.706 9.095 9.095 0 0 0-4.7-1.313c-5.052 0-9.16 4.109-9.16 9.16 0 .031 0 3.174.013 3.406a9.158 9.158 0 0 0 9.147 8.657 9.118 9.118 0 0 0 4.809-1.37 2.268 2.268 0 0 0 4.35-.899V11.412a2.27 2.27 0 0 0-2.269-2.269M70.84 9.143a2.27 2.27 0 0 0-2.27 2.27V28.49a2.27 2.27 0 0 0 4.539 0V11.412a2.27 2.27 0 0 0-2.27-2.269M97.563 9.143a2.27 2.27 0 0 0-2.27 2.27V28.49a2.27 2.27 0 0 0 4.538 0V11.412a2.27 2.27 0 0 0-2.268-2.269M59.066 21.888a4.62 4.62 0 0 1-4.613 4.333 4.62 4.62 0 0 1-4.613-4.338c-.006-.35-.009-2.86-.009-3.187a4.627 4.627 0 0 1 4.622-4.622 4.627 4.627 0 0 1 4.622 4.622c0 .315-.004 2.84-.009 3.192M54.453 9.536a9.089 9.089 0 0 0-4.622 1.265V2.33a2.27 2.27 0 0 0-4.537 0V28.49a2.269 2.269 0 0 0 4.35.9 9.117 9.117 0 0 0 4.81 1.37 9.16 9.16 0 0 0 9.146-8.666c.011-.224.013-3.367.013-3.398 0-5.052-4.11-9.16-9.16-9.16M8.92 9.536a9.143 9.143 0 0 0-4.382 1.11V2.33A2.27 2.27 0 0 0 0 2.33v26.16a2.269 2.269 0 1 0 4.538 0V16.763c.173-.147.333-.314.46-.516a4.601 4.601 0 0 1 3.921-2.173 4.627 4.627 0 0 1 4.622 4.622c0 .415-.004 9.233-.01 9.738a2.27 2.27 0 0 0 4.535.172c.01-.225.012-9.814.012-9.91 0-5.052-4.108-9.16-9.159-9.16M88.95 9.143h-2.648V2.33a2.27 2.27 0 0 0-4.538 0v6.813h-2.647a2.27 2.27 0 0 0 0 4.538h2.647V28.49a2.27 2.27 0 0 0 4.538 0V13.681h2.647a2.27 2.27 0 0 0 0-4.538"/>
<path fill="#FF6066" d="M73.025 2.33a2.27 2.27 0 1 1-4.538 0 2.27 2.27 0 0 1 4.538 0"/>
<path fill="#4FB5E8" d="M99.748 2.33a2.27 2.27 0 1 1-4.539 0 2.27 2.27 0 0 1 4.539 0"/>
</g>
<svg width="217" height="48" viewBox="0 0 217 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M108.785 0.0195312C106.343 0.0195312 104.355 1.99967 104.355 4.44184C104.355 6.88401 106.343 8.86415 108.785 8.86415C111.227 8.86415 113.215 6.87668 113.215 4.44184C113.215 2.007 111.227 0.0195312 108.785 0.0195312Z" fill="#FF6165"/>
<path d="M148.564 0.0195312C146.121 0.0195312 144.134 1.99967 144.134 4.44184C144.134 6.88401 146.121 8.86415 148.564 8.86415C151.006 8.86415 152.993 6.87668 152.993 4.44184C152.993 2.007 151.006 0.0195312 148.564 0.0195312Z" fill="#50B5E9"/>
<path d="M184.2 42.1989C181.332 45.8879 177.005 48 172.319 48C164.355 48 157.776 41.8176 157.344 33.9264C157.322 33.5303 157.322 28.8367 157.322 28.7927C157.322 20.5788 164.047 13.8976 172.319 13.8976C176.411 13.8976 180.379 15.5917 183.195 18.54C184.053 19.4347 184.515 20.6154 184.478 21.8548C184.449 23.0943 183.928 24.2457 183.019 25.0964C181.156 26.8565 178.201 26.7759 176.426 24.9277C175.341 23.7983 173.881 23.1749 172.312 23.1749C169.188 23.1749 166.65 25.6904 166.65 28.7853C166.65 29.2694 166.65 32.995 166.665 33.5083C166.841 36.4052 169.327 38.7154 172.312 38.7154C174.087 38.7154 175.722 37.916 176.8 36.5225C178.369 34.4984 181.31 34.1244 183.342 35.6865C184.332 36.4419 184.962 37.5346 185.124 38.7667C185.285 39.9988 184.948 41.2162 184.192 42.1989H184.2ZM216.82 18.4739V43.4164C216.82 45.9392 214.774 47.9927 212.258 47.9927C210.916 47.9927 209.669 47.3986 208.819 46.4159C206.787 47.45 204.543 47.9927 202.262 47.9927C194.533 47.9927 188.145 41.9129 187.727 34.1464C187.705 33.7577 187.705 29.152 187.705 29.1007C187.705 21.0261 194.239 14.4623 202.262 14.4623C204.419 14.4623 206.545 14.9537 208.503 15.8924C209.332 14.6677 210.726 13.8903 212.266 13.8903C214.781 13.8903 216.827 15.9438 216.827 18.4666L216.82 18.4739ZM207.689 33.721C207.697 33.1196 207.704 29.5774 207.704 29.108C207.704 26.0791 205.262 23.6223 202.262 23.6223C199.263 23.6223 196.821 26.0865 196.821 29.108C196.821 29.5701 196.821 33.2443 196.836 33.7577C197.004 36.5812 199.395 38.84 202.262 38.84C205.13 38.84 207.506 36.5959 207.689 33.721ZM63.3042 18.4739V43.4164C63.3042 45.9392 61.2581 47.9927 58.7426 47.9927C57.4006 47.9927 56.1539 47.3986 55.3032 46.4159C53.2717 47.45 51.0276 47.9927 48.7469 47.9927C41.0099 47.9927 34.6296 41.9129 34.2115 34.1464C34.1895 33.8017 34.1895 30.2008 34.1895 29.1007C34.1895 21.0261 40.7238 14.4623 48.7469 14.4623C50.903 14.4623 53.0371 14.9537 54.9878 15.8924C55.8165 14.6677 57.2099 13.8903 58.75 13.8903C61.2654 13.8903 63.3115 15.9438 63.3115 18.4666L63.3042 18.4739ZM48.7469 23.6223C45.7474 23.6223 43.3053 26.0865 43.3053 29.108C43.3053 29.5847 43.3053 33.237 43.32 33.7503C43.4886 36.5812 45.8794 38.84 48.7469 38.84C51.6143 38.84 53.9904 36.5959 54.1738 33.721C54.1811 33.1196 54.1884 29.5847 54.1884 29.108C54.1884 26.0791 51.7463 23.6223 48.7469 23.6223ZM108.78 14.1396C106.338 14.1396 104.351 16.1931 104.351 18.716V43.4164C104.351 45.9392 106.338 47.9927 108.78 47.9927C111.222 47.9927 113.21 45.9392 113.21 43.4164V18.716C113.21 16.1931 111.222 14.1396 108.78 14.1396ZM148.558 14.1396C146.116 14.1396 144.129 16.1931 144.129 18.716V43.4164C144.129 45.9392 146.116 47.9927 148.558 47.9927C151 47.9927 152.988 45.9392 152.988 43.4164V18.716C152.988 16.1931 151 14.1396 148.558 14.1396ZM98.7551 28.866C98.7551 28.91 98.7551 33.5817 98.7331 33.9704C98.3151 41.8396 91.9275 48 84.1978 48C81.917 48 79.6729 47.45 77.6415 46.4012C76.7908 47.3986 75.5441 48 74.1947 48C71.6792 48 69.6331 45.9245 69.6331 43.3797V4.62032C69.6331 2.07548 71.6792 0 74.1947 0C76.7101 0 78.7562 2.07548 78.7562 4.62032V15.1224C80.487 14.411 82.3351 14.037 84.1978 14.037C92.2282 14.037 98.7551 20.6888 98.7551 28.866ZM84.1978 23.285C81.1983 23.285 78.7562 25.7858 78.7562 28.866C78.7562 29.35 78.7562 33.0536 78.7709 33.5743C78.9469 36.4565 81.3303 38.752 84.1978 38.752C87.0653 38.752 89.434 36.4712 89.6247 33.5523C89.6247 32.929 89.6394 29.328 89.6394 28.866C89.6394 25.7858 87.1973 23.285 84.1978 23.285ZM14.3887 14.037C12.6139 14.037 10.8612 14.3597 9.21109 14.9757V4.62766C9.21109 2.08281 7.14299 0.00733401 4.60554 0.00733401C2.06809 0.00733401 0 2.08281 0 4.62766V43.3797C0 45.9319 2.06809 48 4.60554 48C7.14299 48 9.21109 45.9245 9.21109 43.3797V26.5412C9.40176 26.3358 11.1178 23.285 14.3887 23.285C17.4395 23.285 19.9182 25.7858 19.9182 28.866C19.9182 29.482 19.9182 42.529 19.9036 43.2623C19.8376 45.7852 21.759 47.868 24.2524 47.9927C24.3404 47.9927 24.4211 47.9927 24.5091 47.9927C26.9586 47.9927 28.9753 46.0639 29.1 43.607C29.122 43.2257 29.122 29.0053 29.122 28.866C29.122 20.6888 22.5144 14.037 14.3887 14.037ZM136.399 14.037H133.7V4.62032C133.7 2.07548 131.61 0 129.036 0C126.462 0 124.372 2.07548 124.372 4.62032V14.037H121.673C119.106 14.037 117.009 16.1125 117.009 18.6646C117.009 21.2168 119.099 23.285 121.673 23.285H124.372V43.3797C124.372 45.9319 126.462 48 129.036 48C131.61 48 133.7 45.9245 133.7 43.3797V23.285H136.399C138.973 23.285 141.063 21.2095 141.063 18.6646C141.063 16.1198 138.973 14.037 136.399 14.037Z" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

@@ -0,0 +1,9 @@
<svg width="38" height="44" viewBox="0 0 38 44" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="38" height="44" fill="url(#pattern0_1325_164)"/>
<defs>
<pattern id="pattern0_1325_164" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1325_164" transform="scale(0.0263158 0.0227273)"/>
</pattern>
<image id="image0_1325_164" width="38" height="44" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAsCAYAAAAJpsrIAAAAAXNSR0IArs4c6QAAAn5JREFUWAnV1T1uFEEUBOAJwDEHICBFWomEE5BwDbiCAydOLRGSkRGQOOIYRGRIyEcgIbGFZIeN2tpvtBRqesx4lwbpqfb9Vm0xO56mzr9y87bUaI09fjCVGq2+em+ux+POjL2FHqFDvbkejzvT9fdXpcaLzXQbc2P7AdHp5qLUkPfmpunW3d8cxoM378y5AQtzY/uBkIMLuzifSg2CCE1Bn95flRrq5qH68dPPpYZ5zrlrPnnVZ8wBBxBxCpH6fGD7Qf3ehPkvJNDDiYiwFNwSZs4X4Zi7ePDmnTk3YMGBfy6MQgKhbw4JJ9geVDdnD7oL7XXRAnQQIiQgD6qbswfdhbm/OHcgiQjIQ+qE2HMn5/86dxABQgLysLo5e+7k/OrcYYiYEKhuDq4W0DqAABJAEFQ3B1t3V9cRv35+Xmp4gbbw7Nm3UsP7a7WA1oHhhKUgjnHi45vLshvqHIPqrS9+5/rBhSHsKTXHKe5w4MPJZdkNdXN3dgzhMMIIyj/SBOonbp48KjV23amfXx4d/RLZ56D7TUQ4rDAvQgI54lnyfpJDc+9OvpQ/BQOaDmXDwrDCfnx9WGpwwK8nnco8nbOfmIZ0c44NJ4xyAjkC0zlznIKezXwk5PbwLUaLBMHhhHEiBfoC+hyB6Zy6vcVOGbRICGI558zpI4Z7E4aQIEiQ3JwfDWGJ+vYZsRgtIiQA6svNIU5Bcn37iwUZtIgQEqIv14cEeH/J8xHAtxgRI4KE6Mv1ISH3Lsw3IAAiJkhdrg8J01/t2PDCUiAnOCBvObc3x4YXlgI5lMhJuHfHhhdGYCLnPHMc8ys8mHP/jTBCOZfY6qvvHVOQHLEcqvfwJ8mbnKIO4lmnAAAAAElFTkSuQmCC"/>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@@ -0,0 +1,52 @@
<svg width="41" height="61" viewBox="0 0 41 61" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.53642 4.26827L12.8046 6.40237L8.53642 8.53648L6.40232 12.8047L4.26821 8.53648L0 6.40237L4.26821 4.26827L6.40232 5.72205e-05L8.53642 4.26827Z" fill="#6133B4"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M2.40088 6.40239L5.06851 7.73621L6.40233 6.40239H2.40088Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M6.4023 2.4009L5.06848 5.06853L6.4023 6.40234V2.4009Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M10.4038 6.40234L7.73616 5.06853L6.40234 6.40234L10.4038 6.40234Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M6.40234 10.4038L7.73616 7.73618L6.40234 6.40236L6.40234 10.4038Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M10.4038 6.40239L7.73616 7.73621L6.40234 6.40239H10.4038Z" fill="#4F2A93"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M6.40234 2.4009L7.73616 5.06853L6.40234 6.40234L6.40234 2.4009Z" fill="#4F2A93"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M2.40088 6.40234L5.06851 5.06853L6.40233 6.40234L2.40088 6.40234Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M6.4023 10.4038L5.06848 7.73618L6.4023 6.40236V10.4038Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M5.76208 5.7622L4.53497 6.40243L5.76208 7.04267L6.40232 8.26978L7.04255 7.04267L8.26966 6.40243L7.04255 5.7622L6.40232 4.53509L5.76208 5.7622Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.5385 14.2663L39.8368 15.4154L37.5385 16.5645L36.3894 18.8628L35.2402 16.5645L32.942 15.4154L35.2402 14.2663L36.3894 11.968L37.5385 14.2663Z" fill="#925CF3"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M34.2347 15.4153L35.6712 16.1335L36.3894 15.4153H34.2347Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M36.3894 13.2608L35.6711 14.6972L36.3894 15.4154V13.2608Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M38.544 15.4154L37.1076 14.6972L36.3893 15.4154H38.544Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M36.3893 17.5701L37.1076 16.1337L36.3893 15.4154V17.5701Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M38.544 15.4153L37.1076 16.1335L36.3893 15.4153H38.544Z" fill="#6133B4"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M36.3893 13.2608L37.1076 14.6972L36.3893 15.4154V13.2608Z" fill="#6133B4"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M34.2347 15.4154L35.6712 14.6972L36.3894 15.4154H34.2347Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M36.3894 17.5701L35.6711 16.1337L36.3894 15.4154V17.5701Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M36.0446 15.0707L35.3839 15.4154L36.0446 15.7601L36.3893 16.4209L36.7341 15.7601L37.3948 15.4154L36.7341 15.0707L36.3893 14.4099L36.0446 15.0707Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5354 28.2693L25.7885 30.8959L20.5354 33.5225L17.9088 38.7756L15.2822 33.5225L10.029 30.8959L15.2822 28.2693L17.9088 23.0161L20.5354 28.2693Z" fill="#BDA8FF"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M12.9839 30.8959L16.2671 32.5375L17.9087 30.8959H12.9839Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.9088 25.971L16.2672 29.2543L17.9088 30.8959V25.971Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M22.8336 30.8959L19.5504 29.2543L17.9088 30.8959H22.8336Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.9088 35.8207L19.5504 32.5374L17.9088 30.8958V35.8207Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M22.8336 30.8959L19.5504 32.5375L17.9088 30.8959H22.8336Z" fill="#925CF3"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17.9088 25.971L19.5504 29.2543L17.9088 30.8959V25.971Z" fill="#925CF3"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M12.9839 30.8959L16.2671 29.2543L17.9087 30.8959H12.9839Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17.9088 35.8207L16.2672 32.5374L17.9088 30.8958V35.8207Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17.1208 30.1078L15.6105 30.8958L17.1208 31.6838L17.9087 33.1941L18.6967 31.6838L20.207 30.8958L18.6967 30.1078L17.9087 28.5976L17.1208 30.1078Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.53742 54.2673L10.8207 55.9089L7.53742 57.5505L5.8958 60.8337L4.25419 57.5505L0.970947 55.9089L4.25419 54.2673L5.8958 50.984L7.53742 54.2673Z" fill="#925CF3"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M2.81775 55.9089L4.86977 56.9349L5.89579 55.9089H2.81775Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M5.89582 52.8309L4.86981 54.8829L5.89582 55.9089V52.8309Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M8.97385 55.9089L6.92183 54.8829L5.89581 55.9089H8.97385Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M5.89581 58.9869L6.92183 56.9349L5.89581 55.9089V58.9869Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M8.97385 55.9089L6.92183 56.9349L5.89581 55.9089H8.97385Z" fill="#6133B4"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M5.89581 52.8309L6.92183 54.8829L5.89581 55.9089V52.8309Z" fill="#6133B4"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M2.81775 55.9089L4.86977 54.8829L5.89579 55.9089H2.81775Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M5.89582 58.9869L4.86981 56.9349L5.89582 55.9089V58.9869Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M5.40334 55.4164L4.45941 55.9089L5.40334 56.4014L5.89583 57.3453L6.38831 56.4014L7.33225 55.9089L6.38831 55.4164L5.89583 54.4725L5.40334 55.4164Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.5374 44.2673L40.8207 45.9089L37.5374 47.5505L35.8958 50.8337L34.2542 47.5505L30.9709 45.9089L34.2542 44.2673L35.8958 40.984L37.5374 44.2673Z" fill="#6133B4"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M32.8177 45.9089L34.8698 46.9349L35.8958 45.9089H32.8177Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M35.8958 42.8309L34.8698 44.8829L35.8958 45.9089V42.8309Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M38.9738 45.9089L36.9218 44.8829L35.8958 45.9089H38.9738Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M35.8958 48.9869L36.9218 46.9349L35.8958 45.9089V48.9869Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M38.9738 45.9089L36.9218 46.9349L35.8958 45.9089H38.9738Z" fill="#4F2A93"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M35.8958 42.8309L36.9218 44.8829L35.8958 45.9089V42.8309Z" fill="#4F2A93"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M32.8177 45.9089L34.8698 44.8829L35.8958 45.9089H32.8177Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M35.8958 48.9869L34.8698 46.9349L35.8958 45.9089V48.9869Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M35.4033 45.4164L34.4594 45.9089L35.4033 46.4014L35.8958 47.3453L36.3883 46.4014L37.3322 45.9089L36.3883 45.4164L35.8958 44.4725L35.4033 45.4164Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 7.6 KiB

@@ -0,0 +1,19 @@
<svg width="60" height="58" viewBox="0 0 60 58" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="38" y="6" width="22" height="26" fill="url(#pattern0_1327_256)"/>
<rect width="26" height="26" fill="url(#pattern1_1327_256)"/>
<rect x="8" y="36" width="30" height="22" fill="url(#pattern2_1327_256)"/>
<defs>
<pattern id="pattern0_1327_256" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1327_256" transform="scale(0.0454545 0.0384615)"/>
</pattern>
<pattern id="pattern1_1327_256" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image1_1327_256" transform="scale(0.0384615)"/>
</pattern>
<pattern id="pattern2_1327_256" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image2_1327_256" transform="scale(0.0333333 0.0454545)"/>
</pattern>
<image id="image0_1327_256" width="22" height="26" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAaCAYAAACzdqxAAAAAAXNSR0IArs4c6QAAAQlJREFUSA290k1qwlAUxfFsp+soXYdzoeAaWqFbcSx14LTQSbuAjruLVgdPnvArcsIjRlOFy8n9+t9jSNcN/B7u7stpDIyf3z6F1ufzN2MyQfvf91LjZ7s6RvZjvZ3m4tVgwN36q9TgkKrT7+ePUsNe06oBi4BUnQ6CE2iBAqXqU5w/5woWDVL1VH2K0wMbAHibfZYa6i01dzsw6y7m5+UfcMxhS3FwO4XJwICc5efFaeqg45uB05m85VCdwd679SqAUgFa2gQDWTQoT82+vOd4crALLtKszx8XpUarb76nFqgB+cVgoFTgp+VLqSHPudE50L+B16+bUsOh0Q5zAWhysEMOyCfTseADSSC3nu5iFacAAAAASUVORK5CYII="/>
<image id="image1_1327_256" width="26" height="26" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAASlJREFUSA3F1DFOw0AQBVDTRhSp6RHUaVLQcAWOECkNR6HiPtRcJl1KqBZtpEfxjbWrxA6WRl8znvl//q7lYYjnbnNb/gpt+e75fV1qqOtrooFEg1k/WygJ73c3pQYB+cUC/y6UTjh6225Ljd0wnMKi3ZhHNZsQYohYvv94LDXUOTm+vpQaXw9Pp1CfdIQQIpRfLIQQOnvEMOv6OWk6MwCTcHYhRwRTwAKJ7uT781BqcKj+e1ecEICzCyGmvFmtSg2bE7Rpbq7P+8m7upoQJ5AjZ5wb2xymg3Q8+ce4upCNc8OWA3Ow6Ujj4kLuiCBsCafjpqPFhaa+vl5hjvX7uPCOUIMB6Agh4sz14xkJZEEjdOaIWmgueUe5RriYUCoT7MWc7857BfQh/gFCaNQahl2u3gAAAABJRU5ErkJggg=="/>
<image id="image2_1327_256" width="30" height="22" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAAAXNSR0IArs4c6QAAARRJREFUSA3F08FtAjEUBFCagAYSKd3QAsUgcUkDqSO31JBjLrnSBlJk5MOD1Wgt7Ro5IH2N/cee+bPsbjaDf68vb2Vag+3u8lPTur4zK1cpZJ8y+h+H71LLPs8t3hNITAF8tzEB+PlzKdP6Pf+VWvjE0/6r1Fo9QApNTet6uDHD4/u5zBXeoJm0OzHhOdPawz9sTIBgGnrEyevvtttSi05ivoy3vYMpbAAGyes/bEzIf8YItgYx+C3J0oWLw4wZJHpUkkksoX4inl4zqAOJ/2bsO4MSGkgyifBQ3/lmUoSDDCFB/HDjNGQMDQC9fHgoWBMdbCXFQ4aw29hEhA1gj4f6ifjVSOhpxgZYPXnvBYawV2fpvStxGFyuIXWsWQAAAABJRU5ErkJggg=="/>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

@@ -1,26 +1,29 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 44">
<g fill="none" fill-rule="evenodd">
<path fill="#24CC8F" d="M2.782 35.927l1.867-8.397 12.887-5.47 7.338 4.49-5.967 16.655z"/>
<path fill="#FFF" d="M9.147 33.008L6.351 28.98l5.523-2.344zM18.352 29.1l-.955-4.808-5.523 2.344z" opacity=".25"/>
<path fill="#FFF" d="M9.147 33.008l2.727-6.372 6.478 2.465zM5.097 34.727L6.35 28.98l2.796 4.028z" opacity=".5"/>
<path fill="#1B996B" d="M22.402 27.382l-5.005-3.09.955 4.809zM5.097 34.727l4.05-1.719 8.627 7.528z" opacity=".35"/>
<path fill="#FFF" d="M22.402 27.382l-4.05 1.719-.578 11.435z" opacity=".5"/>
<path fill="#FFF" d="M9.147 33.008l9.205-3.907-.578 11.435z" opacity=".25"/>
<g>
<path fill="#24CC8F" d="M23.248 7.266l4.784-3.162 8.714 3.345 1.44 5.55-10.575 5.225z"/>
<path fill="#FFF" d="M27.653 8.814l.524-3.227 3.734 1.434zM33.876 11.203l1.77-2.749-3.735-1.433z" opacity=".25"/>
<path fill="#FFF" d="M27.653 8.814L31.91 7.02l1.965 4.182zM24.914 7.763l3.263-2.176-.524 3.227z" opacity=".5"/>
<path fill="#1B996B" d="M36.615 12.254l-.97-3.8-1.769 2.749zM24.914 7.763l2.739 1.05.65 7.606z" opacity=".35"/>
<path fill="#FFF" d="M36.615 12.254l-2.739-1.051-5.572 5.216z" opacity=".5"/>
<path fill="#FFF" d="M27.653 8.814l6.223 2.389-5.572 5.216z" opacity=".25"/>
</g>
<g>
<path fill="#24CC8F" d="M.815 5.996l1.58-4L9.185.301l3.273 2.791-4.25 7.758z"/>
<path fill="#FFF" d="M4.187 5.052L3.121 2.845l2.911-.726zM9.039 3.843l-.096-2.45-2.91.726z" opacity=".25"/>
<path fill="#FFF" d="M4.187 5.052L6.032 2.12 9.04 3.843zM2.053 5.585l1.068-2.74 1.066 2.207z" opacity=".5"/>
<path fill="#1B996B" d="M11.173 3.31l-2.23-1.917.096 2.45zM2.053 5.585l2.134-.533L7.86 9.445z" opacity=".35"/>
<path fill="#FFF" d="M11.173 3.31l-2.134.533-1.18 5.602z" opacity=".5"/>
<path fill="#FFF" d="M4.187 5.052l4.852-1.21-1.18 5.603z" opacity=".25"/>
</g>
</g>
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.89107 26.3989L14.4076 18.6441L33.6795 23.9114L37.9287 35.4286L16.5188 48.8092L4.89107 26.3989Z" fill="#24CC8F"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M14.6023 28.7572L15.0317 21.7734L23.2911 24.0309L14.6023 28.7572Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M28.368 32.5196L31.5505 26.2883L23.2911 24.0309L28.368 32.5196Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M14.6023 28.7573L23.2911 24.031L28.368 32.5197L14.6023 28.7573Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M8.54539 27.1018L15.0317 21.7735L14.6023 28.7572L8.54539 27.1018Z" fill="white"/>
<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M34.4249 34.1751L31.5505 26.2883L28.368 32.5196L34.4249 34.1751Z" fill="#1B996B"/>
<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M8.54541 27.1018L14.6023 28.7572L17.6099 44.8171L8.54541 27.1018Z" fill="#1B996B"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M34.4249 34.175L28.368 32.5196L17.6099 44.8171L34.4249 34.175Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M14.6023 28.7573L28.368 32.5197L17.6099 44.8172L14.6023 28.7573Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2974 3.46554L14.2627 0.349942L21.1938 1.32978L23.1792 5.14526L16.3285 10.7414L11.2974 3.46554Z" fill="#24CC8F"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M14.7769 3.85639L14.6178 1.41003L17.5882 1.82996L14.7769 3.85639Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M19.7277 4.55627L20.5587 2.24989L17.5883 1.82996L19.7277 4.55627Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M14.7769 3.85647L17.5882 1.83004L19.7277 4.55636L14.7769 3.85647Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M12.5986 3.54849L14.6178 1.41008L14.7769 3.85644L12.5986 3.54849Z" fill="white"/>
<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M21.906 4.86425L20.5587 2.24992L19.7277 4.5563L21.906 4.86425Z" fill="#1B996B"/>
<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M12.5986 3.54846L14.7769 3.85641L16.5314 9.30565L12.5986 3.54846Z" fill="#1B996B"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M21.906 4.86431L19.7277 4.55636L16.5314 9.30572L21.906 4.86431Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M14.7769 3.85645L19.7277 4.55633L16.5314 9.30568L14.7769 3.85645Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8389 13.9788L33.0633 6.97062L44.4487 3.28717L50.3566 7.66432L44.0181 21.3937L30.8389 13.9788Z" fill="#24CC8F"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M36.4789 11.9744L34.4028 8.33398L39.2822 6.75536L36.4789 11.9744Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M44.6113 9.3434L44.1617 5.17675L39.2822 6.75537L44.6113 9.3434Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M36.4789 11.9745L39.2822 6.75541L44.6113 9.34344L36.4789 11.9745Z" fill="white"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M32.9007 13.1321L34.4028 8.33396L36.4789 11.9744L32.9007 13.1321Z" fill="white"/>
<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M48.1896 8.18571L44.1617 5.17672L44.6113 9.34337L48.1896 8.18571Z" fill="#1B996B"/>
<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M32.9007 13.1321L36.4789 11.9744L43.2551 19.0353L32.9007 13.1321Z" fill="#1B996B"/>
<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M48.1896 8.18576L44.6113 9.34342L43.2551 19.0353L48.1896 8.18576Z" fill="white"/>
<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M36.4789 11.9745L44.6113 9.34345L43.2551 19.0353L36.4789 11.9745Z" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

@@ -1,26 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 47">
<g fill="none" fill-rule="evenodd">
<path fill="#A9DCF6" fill-opacity=".8" d="M25.955 43.329l-.999 2.352a.939.939 0 0 1-.644.555c-3.194.747-9.918-2.107-11.6-4.923a.941.941 0 0 1-.047-.85l.998-2.351c.911-2.146 2.886-3.738 5.074-4.257a.957.957 0 0 0 .607-1.429c-1.147-1.934-1.374-4.46-.463-6.606l.998-2.352a.937.937 0 0 1 .643-.555c3.195-.746 9.919 2.108 11.6 4.924a.935.935 0 0 1 .049.848l-.999 2.353c-.91 2.145-2.886 3.737-5.074 4.256a.957.957 0 0 0-.606 1.429c1.146 1.934 1.373 4.46.463 6.606"/>
<path fill="#FFF" fill-opacity=".9" d="M26.145 25.795c-1.997-.848-3.705-1.145-4.72-1.087l-.788 1.857c-.656 1.547-.524 3.42.347 4.889.466.786.532 1.753.178 2.588a2.881 2.881 0 0 1-1.983 1.669c-1.664.395-3.103 1.6-3.76 3.146l-.788 1.858c.663.77 2.063 1.792 4.06 2.64 1.996.847 3.705 1.144 4.719 1.086l.789-1.858c.656-1.545.523-3.418-.348-4.887a2.883 2.883 0 0 1-.178-2.588 2.886 2.886 0 0 1 1.984-1.67c1.663-.394 3.103-1.6 3.759-3.146l.788-1.857c-.662-.77-2.063-1.793-4.06-2.64"/>
<path fill="#9A62FF" d="M25.383 27.029c1.497.636 3.026 1.448 2.883 1.825-.112.305-.366.882-1.844.982-1.436.098-2.123 1.1-2.765.828-.746-.317-.521-.966-1.166-1.98-.664-1.043-.444-1.979-.287-2.32.219-.473 1.681.03 3.179.665"/>
<path fill="#4F2A93" d="M22.491 28.685c-.664-1.044-.444-1.98-.287-2.32.173-.376 1.126-.139 2.26.292-.382.027-.93.194-1.114.902-.19.738.576 1.97.14 2.507a.755.755 0 0 1-.29.223c-.231-.363-.257-.894-.709-1.604"/>
<path fill="#9A62FF" d="M21.74 36.173c.455.193.22 1.074.662 1.871.543.978.984 2.084.72 3.294-.218.998-.425 1.046-.664 1.021-.238-.024-1.979-.438-3.425-1.454-1.447-1.016-2.062-2.025-1.633-2.608.409-.556 1.079-.893 2.157-1.154 1.032-.25 1.727-1.164 2.182-.97"/>
<path fill="#4F2A93" d="M22.458 42.36c-.24-.025-1.98-.439-3.425-1.455-1.15-.807-1.774-1.61-1.766-2.2a.138.138 0 0 1 .019-.027c.233-.302 1.651.06 3.193 1.031 1.47.925 2.526 1.988 2.271 2.573-.093.085-.19.088-.292.077"/>
<g>
<path fill="#A9DCF6" fill-opacity=".8" d="M12.754 15.163l.61 1.59a.626.626 0 0 1-.052.565c-1.185 1.837-5.732 3.582-7.843 3.01a.627.627 0 0 1-.415-.385l-.61-1.59c-.558-1.45-.348-3.129.461-4.39a.638.638 0 0 0-.37-.967c-1.446-.397-2.725-1.503-3.282-2.954l-.61-1.59a.625.625 0 0 1 .05-.564c1.187-1.837 5.734-3.582 7.844-3.01a.623.623 0 0 1 .416.384l.61 1.59c.557 1.45.347 3.129-.462 4.39a.638.638 0 0 0 .371.967c1.446.397 2.725 1.503 3.282 2.954"/>
<path fill="#FFF" fill-opacity=".9" d="M4.725 6.666c-1.35.518-2.307 1.167-2.767 1.665l.482 1.255c.402 1.046 1.333 1.883 2.43 2.184a1.922 1.922 0 0 1 1.284 1.159 1.92 1.92 0 0 1-.178 1.719c-.615.96-.747 2.204-.346 3.249l.483 1.256c.674.062 1.82-.096 3.17-.614 1.349-.518 2.306-1.167 2.765-1.664l-.482-1.257c-.401-1.044-1.332-1.881-2.43-2.182a1.922 1.922 0 0 1-1.284-1.16 1.924 1.924 0 0 1 .178-1.72c.615-.958.747-2.203.346-3.248l-.482-1.256c-.674-.062-1.82.096-3.17.614"/>
<path fill="#9A62FF" d="M4.93 7.61c1.013-.388 2.122-.706 2.229-.46.087.199.233.593-.43 1.325-.643.713-.508 1.512-.942 1.678-.505.194-.698-.222-1.476-.41-.802-.192-1.13-.743-1.212-.979-.115-.328.82-.765 1.832-1.153"/>
<path fill="#4F2A93" d="M4.31 9.744c-.801-.193-1.129-.743-1.211-.98-.091-.26.476-.587 1.219-.906-.17.19-.357.524-.116.948.25.443 1.188.678 1.228 1.138a.503.503 0 0 1-.036.241c-.28-.067-.537-.31-1.083-.44"/>
<path fill="#9A62FF" d="M7.418 13.683c.308-.118.603.413 1.185.59.713.218 1.436.544 1.87 1.247.358.58.28.698.154.797-.125.099-1.15.706-2.315.889-1.165.183-1.926-.016-1.991-.495-.061-.455.104-.927.5-1.552.38-.598.289-1.358.597-1.476"/>
<path fill="#4F2A93" d="M10.628 16.317c-.126.1-1.152.707-2.316.89-.926.144-1.597.048-1.866-.238a.092.092 0 0 1-.004-.022c-.027-.253.82-.736 2.01-.984 1.132-.237 2.132-.217 2.28.182-.006.084-.05.13-.104.172"/>
</g>
<g>
<path fill="#A9DCF6" fill-opacity=".8" d="M32.605 10.804l-.31 1.24a.47.47 0 0 1-.275.324c-1.518.619-5.062-.265-6.113-1.524a.47.47 0 0 1-.09-.416l.31-1.24c.281-1.13 1.132-2.07 2.172-2.498a.479.479 0 0 0 .188-.753c-.718-.866-1.027-2.096-.745-3.226l.309-1.24a.469.469 0 0 1 .274-.324c1.519-.619 5.063.265 6.113 1.524.097.114.127.27.09.415l-.308 1.24c-.282 1.13-1.133 2.071-2.173 2.498a.479.479 0 0 0-.188.754c.718.865 1.027 2.095.746 3.226"/>
<path fill="#FFF" fill-opacity=".9" d="M31.327 2.13c-1.052-.262-1.92-.276-2.416-.168l-.244.98c-.203.814.009 1.729.554 2.386.292.352.4.824.29 1.264a1.44 1.44 0 0 1-.849.98 2.762 2.762 0 0 0-1.61 1.847l-.244.98c.387.328 1.16.723 2.211.986 1.052.262 1.92.275 2.416.167l.244-.98a2.761 2.761 0 0 0-.554-2.385 1.442 1.442 0 0 1-.29-1.265c.11-.44.427-.806.849-.98a2.76 2.76 0 0 0 1.61-1.847l.244-.979c-.387-.328-1.159-.724-2.211-.986"/>
<path fill="#9A62FF" d="M31.047 2.799c.79.197 1.608.478 1.567.676-.032.159-.112.464-.834.629-.701.16-.962.71-1.3.625-.394-.098-.334-.436-.731-.886-.41-.464-.375-.943-.324-1.124.071-.25.833-.117 1.622.08"/>
<path fill="#4F2A93" d="M29.749 3.843c-.41-.464-.375-.943-.324-1.124.056-.198.546-.156 1.139-.032-.186.044-.444.169-.48.533-.036.38.44.927.266 1.227a.378.378 0 0 1-.126.133c-.143-.161-.197-.422-.475-.737"/>
<path fill="#9A62FF" d="M29.963 7.6c.24.06.193.513.474.872.344.44.648.952.613 1.57-.03.51-.128.55-.248.556-.12.007-1.012-.061-1.805-.45-.794-.388-1.177-.838-1.01-1.16.158-.306.462-.525.974-.739.49-.204.762-.71 1.002-.65"/>
<path fill="#4F2A93" d="M30.802 10.599c-.12.006-1.012-.062-1.806-.45-.63-.31-1.002-.657-1.043-.949a.069.069 0 0 1 .007-.015c.091-.167.82-.1 1.657.26.798.341 1.403.784 1.323 1.092-.04.05-.087.059-.138.062"/>
</g>
</g>
<svg width="39" height="54" viewBox="0 0 39 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.2715 47.841L27.8997 51.0729C27.7389 51.4515 27.4157 51.7423 27.014 51.8357C22.6266 52.8619 13.3878 48.9402 11.0765 45.0707C10.8663 44.7175 10.8509 44.283 11.0117 43.9044L12.3835 40.6724C13.6347 37.7249 16.3485 35.5378 19.3549 34.8248C20.2332 34.6169 20.6488 33.6376 20.1883 32.8614C18.6128 30.2035 18.3009 26.732 19.552 23.7844L20.9239 20.5525C21.0846 20.1739 21.4079 19.8832 21.8073 19.7906C26.1963 18.7652 35.4351 22.6868 37.7447 26.5557C37.9572 26.9079 37.9726 27.3425 37.8119 27.7211L36.4401 30.953C35.1889 33.9005 32.475 36.0876 29.4687 36.8006C28.5904 37.0086 28.1747 37.9879 28.6352 38.7641C30.2107 41.4219 30.5227 44.8934 29.2715 47.841Z" fill="#A9DCF6" fill-opacity="0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.5322 23.7497C26.7892 22.5854 24.4416 22.1772 23.0484 22.257L21.9654 24.8083C21.0635 26.9331 21.2456 29.5067 22.4422 31.5248C23.0826 32.6056 23.1732 33.9336 22.6863 35.0807C22.1994 36.2277 21.1812 37.0852 19.9611 37.3743C17.6759 37.9164 15.6981 39.5731 14.7969 41.6963L13.7132 44.2492C14.6236 45.3069 16.548 46.712 19.2911 47.8764C22.0341 49.0407 24.3817 49.4489 25.7749 49.3691L26.8586 46.8162C27.7598 44.693 27.5777 42.1194 26.3811 40.1013C25.7407 39.0206 25.6501 37.6925 26.137 36.5454C26.6239 35.3984 27.6421 34.541 28.8628 34.2503C31.1474 33.7098 33.1252 32.053 34.0271 29.9282L35.1101 27.3769C34.1996 26.3192 32.2753 24.9141 29.5322 23.7497Z" fill="white" fill-opacity="0.9"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.4856 25.4452C30.5433 26.3187 32.6433 27.4344 32.4477 27.9529C32.2926 28.3716 31.9446 29.1647 29.9141 29.3021C27.9411 29.4375 26.9965 30.8145 26.1146 30.4401C25.089 30.0048 25.3981 29.1122 24.5127 27.7201C23.5998 26.2862 23.9023 25.0005 24.1181 24.5322C24.4189 23.8812 26.4279 24.5718 28.4856 25.4452Z" fill="#9A62FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5124 27.7203C23.5995 26.2864 23.902 25.0008 24.1178 24.5324C24.3555 24.0168 25.6652 24.3427 27.2224 24.9339C26.699 24.9719 25.9442 25.2001 25.693 26.1739C25.4303 27.188 26.4845 28.8798 25.8843 29.6187C25.7681 29.7636 25.6326 29.8607 25.4865 29.925C25.1685 29.4261 25.1331 28.6965 24.5124 27.7203Z" fill="#4F2A93"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4797 38.0086C24.1059 38.2744 23.7824 39.4852 24.3904 40.5804C25.1366 41.9228 25.7414 43.4428 25.3785 45.1063C25.0797 46.4765 24.7953 46.5424 24.4665 46.5084C24.1394 46.4752 21.7484 45.9071 19.7617 44.5113C17.7733 43.1149 16.9287 41.7288 17.518 40.9269C18.0793 40.164 19 39.7007 20.4816 39.3417C21.8998 38.999 22.8534 37.7428 23.4797 38.0086Z" fill="#9A62FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.467 46.509C24.1383 46.4751 21.7473 45.907 19.7605 44.5113C18.1804 43.4012 17.3231 42.2982 17.3349 41.4887C17.3426 41.475 17.3503 41.4613 17.3605 41.4506C17.6815 41.0363 19.6294 41.5332 21.7477 42.8679C23.7671 44.138 25.2191 45.599 24.8686 46.4024C24.7398 46.5193 24.6079 46.5236 24.467 46.509Z" fill="#4F2A93"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8803 22.4748L13.0712 24.6344C13.0936 24.8874 13.0019 25.1397 12.8101 25.3073C10.7172 27.1406 4.54355 27.6865 2.16031 26.249C1.9432 26.1175 1.80861 25.8852 1.78624 25.6322L1.59529 23.4726C1.42114 21.5029 2.26494 19.5229 3.69621 18.2613C4.11444 17.893 4.05658 17.2386 3.5802 16.9493C1.94977 15.9584 0.771638 14.1572 0.597488 12.1876L0.406536 10.0279C0.384166 9.77492 0.475899 9.52258 0.666679 9.35616C2.76071 7.52275 8.93431 6.97689 11.3165 8.41452C11.5346 8.54479 11.6692 8.77712 11.6915 9.03012L11.8825 11.1898C12.0566 13.1594 11.2128 15.1394 9.78156 16.401C9.36333 16.7693 9.42119 17.4238 9.89756 17.713C11.528 18.7039 12.7061 20.5051 12.8803 22.4748Z" fill="#A9DCF6" fill-opacity="0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.02615 9.27039C4.19318 9.43245 2.79533 9.89173 2.05923 10.3398L2.20997 12.0447C2.33551 13.4645 3.18214 14.8141 4.4203 15.5665C5.08317 15.9694 5.51817 16.6668 5.58595 17.4333C5.65372 18.1998 5.34784 18.9628 4.76693 19.4746C3.67901 20.4337 3.08233 21.9109 3.20777 23.3297L3.35861 25.0356C4.16191 25.3476 5.61866 25.5545 7.45163 25.3924C9.2846 25.2303 10.6825 24.7711 11.4186 24.323L11.2677 22.617C11.1423 21.1983 10.2956 19.8487 9.05748 19.0963C8.39461 18.6934 7.95961 17.996 7.89184 17.2295C7.82406 16.463 8.12994 15.7 8.71076 15.1871C9.79877 14.2291 10.3955 12.7519 10.2699 11.332L10.1192 9.62718C9.31587 9.31519 7.85912 9.10832 6.02615 9.27039Z" fill="white" fill-opacity="0.9"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.94818 10.4983C7.32318 10.3767 8.7916 10.3749 8.83559 10.7142C8.87266 10.9875 8.91336 11.5207 7.84673 12.1853C6.81082 12.832 6.69593 13.8567 6.10664 13.9088C5.42128 13.9694 5.33053 13.3933 4.44377 12.8918C3.52987 12.3754 3.32137 11.587 3.30294 11.2691C3.27784 10.8269 4.57319 10.6199 5.94818 10.4983Z" fill="#9A62FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.44368 12.892C3.52978 12.3757 3.32128 11.5872 3.30285 11.2693C3.28266 10.9193 4.09102 10.7165 5.1113 10.5865C4.83716 10.7592 4.49205 11.1028 4.63795 11.7064C4.78931 12.3353 5.8551 12.9512 5.74257 13.5281C5.72134 13.6408 5.6757 13.7331 5.61477 13.8105C5.29657 13.631 5.06544 13.2437 4.44368 12.892Z" fill="#4F2A93"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.86862 18.7985C7.2871 18.7615 7.46241 19.5152 8.11175 19.9355C8.90824 20.4504 9.67927 21.103 9.96455 22.115C10.1996 22.9484 10.0638 23.067 9.87478 23.1439C9.68684 23.2208 8.21892 23.6056 6.73087 23.4219C5.24175 23.2383 4.37897 22.7283 4.46722 22.1201C4.55161 21.5413 4.91878 21.0215 5.62194 20.3956C6.29524 19.797 6.45015 18.8355 6.86862 18.7985Z" fill="#9A62FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.87521 23.1441C9.68621 23.2211 8.21829 23.6059 6.73023 23.4222C5.54676 23.2762 4.75927 22.924 4.53061 22.4795C4.53083 22.4698 4.53104 22.4601 4.53349 22.4512C4.58813 22.1323 5.79395 21.8374 7.33593 21.9495C8.80526 22.0553 10.0208 22.4298 10.0631 22.9694C10.0269 23.0705 9.95622 23.1111 9.87521 23.1441Z" fill="#4F2A93"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.9597 9.01912L34.5713 10.2909C34.6429 10.4399 34.6449 10.6147 34.5665 10.7608C33.7119 12.3575 30.0762 14.1058 28.2947 13.7765C28.1323 13.7463 27.9971 13.6356 27.9254 13.4866L27.3139 12.2148C26.7561 11.0549 26.8161 9.65517 27.3987 8.5584C27.569 8.2381 27.3837 7.85272 27.0272 7.78575C25.8067 7.55599 24.676 6.72887 24.1182 5.56895L23.5066 4.29712C23.435 4.14812 23.433 3.97336 23.5111 3.82823C24.3663 2.23116 28.002 0.48293 29.7828 0.812446C29.9456 0.841791 30.0808 0.952458 30.1525 1.10146L30.764 2.37329C31.3218 3.53321 31.2618 4.93289 30.6792 6.02966C30.5089 6.34996 30.6942 6.73535 31.0507 6.80232C32.2712 7.03207 33.4019 7.85919 33.9597 9.01912Z" fill="#A9DCF6" fill-opacity="0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.7563 2.54696C25.6769 3.06602 24.9306 3.66635 24.585 4.10812L25.0678 5.11213C25.4698 5.94828 26.2951 6.5763 27.2218 6.75067C27.7181 6.84413 28.143 7.16925 28.36 7.62065C28.5771 8.07205 28.5657 8.60697 28.3292 9.05198C27.8864 9.8857 27.8617 10.9224 28.2634 11.758L28.7465 12.7626C29.3074 12.7685 30.2423 12.5604 31.3217 12.0414C32.4012 11.5223 33.1474 10.922 33.4931 10.4802L33.01 9.47556C32.6082 8.64004 31.783 8.01202 30.8562 7.83765C30.36 7.74419 29.9351 7.41907 29.718 6.96767C29.5009 6.51628 29.5123 5.98136 29.7485 5.53571C30.1917 4.70262 30.2164 3.66588 29.8143 2.82973L29.3315 1.82572C28.7706 1.81987 27.8358 2.0279 26.7563 2.54696Z" fill="white" fill-opacity="0.9"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.9904 3.31291C27.8001 2.92355 28.6943 2.58571 28.7989 2.78233C28.8841 2.94028 29.0312 3.25581 28.5338 3.90522C28.051 4.53676 28.216 5.18735 27.869 5.35422C27.4654 5.5483 27.278 5.21811 26.6228 5.11596C25.9476 5.011 25.6398 4.57848 25.5557 4.38904C25.439 4.12546 26.1806 3.70228 26.9904 3.31291Z" fill="#9A62FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.6228 5.11609C25.9476 5.01113 25.6398 4.57861 25.5557 4.38917C25.4631 4.18057 25.9091 3.8717 26.5008 3.55853C26.3734 3.72661 26.242 4.01506 26.4692 4.3493C26.7057 4.69772 27.4962 4.82848 27.5599 5.20575C27.5728 5.27927 27.5662 5.34594 27.5468 5.40711C27.3118 5.37072 27.0822 5.18777 26.6228 5.11609Z" fill="#4F2A93"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.4545 8.15813C29.7009 8.03962 29.9806 8.4586 30.4725 8.56572C31.0758 8.69672 31.6951 8.91751 32.101 9.46854C32.4353 9.92237 32.3797 10.0257 32.2823 10.116C32.1854 10.2059 31.3794 10.7769 30.4308 11.0062C29.4815 11.2359 28.839 11.123 28.7533 10.7323C28.672 10.3604 28.7764 9.9595 29.0613 9.41694C29.3342 8.89791 29.208 8.27663 29.4545 8.15813Z" fill="#9A62FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.2826 10.1159C32.1851 10.2062 31.3791 10.7772 30.4305 11.0065C29.676 11.1889 29.1155 11.155 28.8743 10.9366C28.8722 10.9307 28.8701 10.9247 28.8696 10.9188C28.8297 10.7119 29.4967 10.2558 30.4617 9.97051C31.3811 9.69797 32.2074 9.64738 32.3569 9.96638C32.3581 10.0363 32.3243 10.0773 32.2826 10.1159Z" fill="#4F2A93"/>
</svg>

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

@@ -1,350 +1,392 @@
<template>
<div class="standard-page pt-0 px-0">
<div v-if="!hasSubscription && !hasCanceledSubscription">
<div class="row mt-3">
<div class="block-header mx-auto">
{{ $t('support') }}
</div>
</div>
<div class="row mb-5">
<div
v-once
class="svg-icon svg-logo mx-auto mt-1"
v-html="icons.logo"
></div>
</div>
<div class="d-flex justify-content-center">
<div>
<div class="row col-12 ml-1">
<h2> {{ $t('subscribersReceiveBenefits') }} </h2>
</div>
<div class="row">
<div class="col-2">
<div
v-once
class="svg-icon svg-gems ml-3 mt-1"
v-html="icons.subscriberGems"
></div>
</div>
<div class="col-10">
<h3> {{ $t('buyGemsGold') }} </h3>
<p> {{ $t('subscriptionBenefit1') }} </p>
</div>
</div>
<div class="row">
<div class="col-2">
<div
v-once
class="svg-icon svg-hourglasses ml-3 mt-1"
v-html="icons.subscriberHourglasses"
></div>
</div>
<div class="col-10">
<h3> {{ $t('mysticHourglassesTooltip') }} </h3>
<p> {{ $t('subscriptionBenefit6') }} </p>
</div>
</div>
<div class="row">
<div class="col-2">
<Sprite
:image-name="currentMysterySet"
class="mt-n1"
/>
</div>
<div class="col-10">
<h3> {{ $t('monthlyMysteryItems') }} </h3>
<p> {{ $t('subscriptionBenefit4') }} </p>
</div>
</div>
<div class="row">
<div class="col-2">
<div class="Pet-Jackalope-RoyalPurple"></div>
</div>
<div class="col-10">
<h3> {{ $t('exclusiveJackalopePet') }} </h3>
<p> {{ $t('subscriptionBenefit5') }} </p>
</div>
</div>
<div class="row">
<div class="col-2">
<div class="image-foods ml-2 mt-2"></div>
</div>
<div class="col-10">
<h3> {{ $t('doubleDropCap') }} </h3>
<p> {{ $t('subscriptionBenefit3') }} </p>
</div>
</div>
</div>
<div class="flex-spacer"></div>
<div>
<div class="subscribe-card d-flex flex-column">
<subscription-options class="mb-4" />
</div>
</div>
</div>
</div>
<div
v-if="hasSubscription"
class="d-flex flex-column align-items-center"
>
<h1 class="mt-4 mx-auto">
{{ $t('subscription') }}
</h1>
<div class="subscribe-card mx-auto">
<div
v-if="hasSubscription && !hasCanceledSubscription"
class="d-flex flex-column align-items-center pt-4"
<div>
<div class="pt-0 px-0">
<div v-if="!hasSubscription && !hasCanceledSubscription">
<div class="d-flex flex-column justify-content-center align-items-center
gradient-swoop mb-3"
>
<div class="round-container bg-green-10 d-flex align-items-center justify-content-center">
<p class="white block-header mb-2">
{{ $t('subscribeTo').toUpperCase() }}
</p>
<div
class="d-flex justify-content-center align-items-center mb-4"
>
<div
v-once
class="svg-icon svg-check"
v-html="icons.checkmarkIcon"
></div>
</div>
<h2 class="green-10 mx-auto mb-75">
{{ $t('youAreSubscribed') }}
</h2>
<div
v-if="hasGroupPlan"
class="mx-5 mb-4 text-center"
>
{{ $t('youHaveGroupPlan') }}
</div>
<div
v-else
class="w-55 text-center"
v-html="$t('paymentSubBillingWithMethod', {
amount: purchasedPlanIdInfo.price,
months: purchasedPlanIdInfo.months,
paymentMethod: purchasedPlanIdInfo.plan
})"
>
</div>
<div
v-if="canEditCardDetails"
class="mt-4 text-center"
>
<div class="font-weight-bold gray-10 mb-2">
{{ $t('needToUpdateCard') }}
class="svg-icon flip"
v-html="icons.purpleStars"
>
</div>
<button
class="btn btn-primary btn-update-card
d-flex justify-content-center align-items-center mb-4"
@click="redirectToStripeEdit()"
<div
v-once
class="svg-icon svg-wordmark mx-4"
v-html="icons.wordmark"
>
</div>
<div
v-once
class="svg-icon"
v-html="icons.purpleStars"
>
</div>
</div>
<h2 class="white final-header">
{{ $t('subscribersReceiveBenefits') }}
</h2>
</div>
<div class="d-flex justify-content-center">
<div class="d-flex flex-column mr-4">
<div class="d-flex mb-3 align-items-center">
<div class="sub-benefit bg-gray-600 d-flex mr-4">
<div
v-once
class="svg-icon svg-gems m-auto"
v-html="icons.subscriberGems"
></div>
</div>
<div class="w-330p my-auto">
<h3 class="mb-1"> {{ $t('buyGemsGold') }} </h3>
<p> {{ $t('subscriptionBenefit1') }} </p>
</div>
</div>
<div class="d-flex mb-3 align-items-center">
<div class="sub-benefit bg-gray-600 d-flex mr-4">
<Sprite
:image-name="currentMysterySet"
class="m-auto"
/>
</div>
<div class="w-330p my-auto">
<h3> {{ $t('monthlyMysteryItems') }} </h3>
<p> {{ $t('subscriptionBenefit4', {
month,
currentMysterySetName,
}) }} </p>
</div>
</div>
<div class="d-flex mb-3 align-items-center">
<div class="sub-benefit bg-gray-600 d-flex mr-4">
<div
v-once
class="svg-icon svg-hourglasses m-auto"
v-html="icons.subscriberHourglasses"
></div>
</div>
<div class="w-330p my-auto">
<h3> {{ $t('mysticHourglassesTooltip') }} </h3>
<p> {{ $t('subscriptionBenefit6') }} </p>
</div>
</div>
<div class="d-flex mb-3 align-items-center">
<div class="sub-benefit bg-gray-600 d-flex mr-4">
<div
v-once
class="svg-icon svg-jackalope m-auto"
v-html="icons.jackalope"
></div>
</div>
<div class="w-330p my-auto">
<h3> {{ $t('exclusiveJackalopePet') }} </h3>
<p> {{ $t('subscriptionBenefit5') }} </p>
</div>
</div>
<div class="d-flex mb-3 align-items-center">
<div class="sub-benefit bg-gray-600 d-flex mr-4">
<div
v-once
class="svg-icon svg-food m-auto"
v-html="icons.subscriberFood"
></div>
</div>
<div class="w-330p my-auto">
<h3> {{ $t('doubleDropCap') }} </h3>
<p> {{ $t('subscriptionBenefit3') }} </p>
</div>
</div>
</div>
<div>
<div class="my-auto d-flex flex-column">
<subscription-options class="mb-4" />
</div>
</div>
</div>
</div>
<div
v-if="hasSubscription"
class="d-flex flex-column align-items-center"
>
<h1 class="mt-4 mx-auto">
{{ $t('subscription') }}
</h1>
<div class="mx-auto">
<div
v-if="hasSubscription && !hasCanceledSubscription"
class="d-flex flex-column align-items-center pt-4"
>
<div class="round-container bg-green-10
d-flex align-items-center justify-content-center"
>
<div
v-once
class="svg-icon svg-credit-card mr-2"
v-html="icons.creditCardIcon"
class="svg-icon svg-check"
v-html="icons.checkmarkIcon"
></div>
<div>{{ $t('subUpdateCard') }}</div>
</button>
</div>
<div
v-else
class="svg-icon mb-4"
:class="paymentMethodLogo.class"
v-html="paymentMethodLogo.icon"
>
</div>
<div
v-if="purchasedPlanExtraMonthsDetails.months > 0"
class="extra-months green-10 py-2 px-3 mb-4"
v-html="$t('purchasedPlanExtraMonths',
{months: purchasedPlanExtraMonthsDetails.months})"
>
</div>
</div>
<div
v-if="hasGiftSubscription"
class="d-flex flex-column align-items-center mt-4"
>
<div class="round-container bg-green-10 d-flex align-items-center justify-content-center">
</div>
<h2 class="green-10 mx-auto mb-75">
{{ $t('youAreSubscribed') }}
</h2>
<div
v-once
class="svg-icon svg-check"
v-html="icons.checkmarkIcon"
></div>
v-if="hasGroupPlan"
class="mx-5 mb-4 text-center"
>
{{ $t('youHaveGroupPlan') }}
</div>
<div
v-else
class="w-55 text-center"
v-html="$t('paymentSubBillingWithMethod', {
amount: purchasedPlanIdInfo.price,
months: purchasedPlanIdInfo.months,
paymentMethod: purchasedPlanIdInfo.plan
})"
>
</div>
<div
v-if="canEditCardDetails"
class="mt-4 text-center"
>
<div class="font-weight-bold gray-10 mb-2">
{{ $t('needToUpdateCard') }}
</div>
<button
class="btn btn-primary btn-update-card
d-flex justify-content-center align-items-center mb-4"
@click="redirectToStripeEdit()"
>
<div
v-once
class="svg-icon svg-credit-card mr-2"
v-html="icons.creditCardIcon"
></div>
<div>{{ $t('subUpdateCard') }}</div>
</button>
</div>
<div
v-else
class="svg-icon mb-4"
:class="paymentMethodLogo.class"
v-html="paymentMethodLogo.icon"
>
</div>
<div
v-if="purchasedPlanExtraMonthsDetails.months > 0"
class="extra-months green-10 py-2 px-3 mb-4"
v-html="$t('purchasedPlanExtraMonths',
{months: purchasedPlanExtraMonthsDetails.months})"
>
</div>
</div>
<h2 class="green-10 mx-auto mb-75">
{{ $t('youAreSubscribed') }}
</h2>
<div
class="mx-4 text-center mb-4 lh-71"
v-if="hasGiftSubscription"
class="d-flex flex-column align-items-center mt-4"
>
<span v-once>
{{ $t('haveNonRecurringSub') }}
</span>
<span
<div class="round-container bg-green-10
d-flex align-items-center justify-content-center"
>
<div
v-once
class="svg-icon svg-check"
v-html="icons.checkmarkIcon"
></div>
</div>
<h2 class="green-10 mx-auto mb-75">
{{ $t('youAreSubscribed') }}
</h2>
<div
class="mx-4 text-center mb-4 lh-71"
>
<span v-once>
{{ $t('haveNonRecurringSub') }}
</span>
<span
v-once
v-html="$t('subscriptionInactiveDate', {date: subscriptionEndDate})"
>
</span>
</div>
<h2 v-once>
{{ $t('switchToRecurring') }}
</h2>
<small
v-once
class="mx-4 mb-3 text-center"
>
{{ $t('continueGiftSubBenefits') }}
</small>
<subscription-options
:note="'subscriptionCreditConversion'"
class="w-100 mb-2"
/>
</div>
<div
v-else-if="hasCanceledSubscription"
class="d-flex flex-column align-items-center mt-4"
>
<div class="round-container bg-gray-300
d-flex align-items-center justify-content-center"
>
<div
v-once
class="svg-icon svg-close"
v-html="icons.closeIcon"
></div>
</div>
<h2 class="gray-50">
{{ $t('subscriptionCanceled') }}
</h2>
<div
class="w-75 text-center mb-4"
v-html="$t('subscriptionInactiveDate', {date: subscriptionEndDate})"
>
</span>
</div>
<h2>{{ $t('readyToResubscribe') }}</h2>
<subscription-options class="w-100 mb-2" />
</div>
<h2 v-once>
{{ $t('switchToRecurring') }}
</h2>
<small
v-once
class="mx-4 mb-3 text-center"
<div
v-if="hasSubscription"
class="bg-gray-700 py-3 mb-3 text-center"
>
{{ $t('continueGiftSubBenefits') }}
</small>
<subscription-options
:note="'subscriptionCreditConversion'"
class="w-100 mb-2"
/>
</div>
<div
v-else-if="hasCanceledSubscription"
class="d-flex flex-column align-items-center mt-4"
>
<div class="round-container bg-gray-300 d-flex align-items-center justify-content-center">
<div class="header-mini mb-3">
{{ $t('subscriptionStats') }}
</div>
<div class="d-flex">
<div class="stat-column">
<div class="d-flex justify-content-center align-items-center">
<div
v-once
class="svg-icon svg-calendar mr-1"
v-html="icons.calendarIcon"
>
</div>
<div class="number-heavy">
{{ user.purchased.plan.consecutive.count }}
</div>
</div>
<div class="stats-label">
{{ $t('subMonths') }}
</div>
</div>
<div class="stats-spacer"></div>
<div class="stat-column">
<div class="d-flex justify-content-center align-items-center">
<div
v-once
class="svg-icon svg-gem mr-1"
v-html="icons.gemIcon"
>
</div>
<div class="number-heavy">
{{ gemCap }}
</div>
</div>
<div class="stats-label">
{{ $t('gemCap') }}
</div>
</div>
<div class="stats-spacer"></div>
<div class="stat-column">
<div class="d-flex justify-content-center align-items-center">
<div
v-once
class="svg-icon svg-hourglass mt-1 mr-1"
v-html="icons.hourglassIcon"
>
</div>
<div class="number-heavy">
{{ nextHourGlass }}
</div>
</div>
<div class="stats-label">
{{ $t('nextHourglass') }}*
</div>
</div>
</div>
<div
v-once
class="svg-icon svg-close"
v-html="icons.closeIcon"
></div>
</div>
<h2 class="gray-50">
{{ $t('subscriptionCanceled') }}
</h2>
<div
class="w-75 text-center mb-4"
v-html="$t('subscriptionInactiveDate', {date: subscriptionEndDate})"
>
</div>
<h2>{{ $t('readyToResubscribe') }}</h2>
<subscription-options class="w-100 mb-2" />
</div>
<div
v-if="hasSubscription"
class="bg-gray-700 py-3 mb-3 text-center"
>
<div class="header-mini mb-3">
{{ $t('subscriptionStats') }}
</div>
<div class="d-flex">
<div class="stat-column">
<div class="d-flex justify-content-center align-items-center">
<div
v-once
class="svg-icon svg-calendar mr-1"
v-html="icons.calendarIcon"
>
</div>
<div class="number-heavy">
{{ user.purchased.plan.consecutive.count }}
</div>
</div>
<div class="stats-label">
{{ $t('subMonths') }}
</div>
</div>
<div class="stats-spacer"></div>
<div class="stat-column">
<div class="d-flex justify-content-center align-items-center">
<div
v-once
class="svg-icon svg-gem mr-1"
v-html="icons.gemIcon"
>
</div>
<div class="number-heavy">
{{ gemCap }}
</div>
</div>
<div class="stats-label">
{{ $t('gemCap') }}
</div>
</div>
<div class="stats-spacer"></div>
<div class="stat-column">
<div class="d-flex justify-content-center align-items-center">
<div
v-once
class="svg-icon svg-hourglass mt-1 mr-1"
v-html="icons.hourglassIcon"
>
</div>
<div class="number-heavy">
{{ nextHourGlass }}
</div>
</div>
<div class="stats-label">
{{ $t('nextHourglass') }}*
</div>
class="mt-4 nextHourglassDescription"
>
*{{ $t('nextHourglassDescription') }}
</div>
</div>
<div
v-once
class="mt-4 nextHourglassDescription"
>
*{{ $t('nextHourglassDescription') }}
</div>
</div>
<div class="d-flex flex-column justify-content-center align-items-center mb-3">
<div
v-once
class="svg-icon svg-heart mb-2"
v-html="icons.heartIcon"
>
</div>
<div class="thanks-for-support">
{{ $t('giftSubscriptionText4') }}
<div class="d-flex flex-column justify-content-center align-items-center mb-3">
<div
v-once
class="svg-icon svg-heart mb-2"
v-html="icons.heartIcon"
>
</div>
<div class="thanks-for-support">
{{ $t('giftSubscriptionText4') }}
</div>
</div>
</div>
</div>
</div>
<div
v-if="hasSubscription && !hasCanceledSubscription"
class="d-flex flex-column align-items-center mt-3"
>
<div class="cancel-card p-4 text-center">
<h2 class="maroon-50">
{{ $t('cancelYourSubscription') }}
</h2>
<div v-if="hasGroupPlan">
{{ $t('cancelSubInfoGroupPlan') }}
</div>
<div
v-if="!hasGroupPlan && !canCancelSubscription"
v-html="$t(`cancelSubInfo${user.purchased.plan.paymentMethod}`)"
>
</div>
<div
v-if="canCancelSubscription"
v-html="$t('cancelSubAlternatives')"
>
</div>
<div
class="btn btn-danger mt-4"
:class="{disabled: !canCancelSubscription}"
:disabled="!canCancelSubscription"
@click="cancelSubscriptionConfirm({canCancel: canCancelSubscription})"
>
{{ $t('cancelSub') }}
</div>
</div>
</div>
<div class="d-flex flex-column align-items-center mt-4">
<div
v-once
class="svg-icon svg-gift-box m-auto"
v-html="icons.giftBox"
v-if="hasSubscription && !hasCanceledSubscription"
class="d-flex flex-column align-items-center mt-3"
>
<div class="cancel-card p-4 text-center">
<h2 class="maroon-50">
{{ $t('cancelYourSubscription') }}
</h2>
<div v-if="hasGroupPlan">
{{ $t('cancelSubInfoGroupPlan') }}
</div>
<div
v-if="!hasGroupPlan && !canCancelSubscription"
v-html="$t(`cancelSubInfo${user.purchased.plan.paymentMethod}`)"
>
</div>
<div
v-if="canCancelSubscription"
v-html="$t('cancelSubAlternatives')"
>
</div>
<div
class="btn btn-danger mt-4"
:class="{disabled: !canCancelSubscription}"
:disabled="!canCancelSubscription"
@click="cancelSubscriptionConfirm({canCancel: canCancelSubscription})"
>
{{ $t('cancelSub') }}
</div>
</div>
</div>
<div class="muted mx-auto mt-3 mb-1">
{{ $t('giftSubscription') }}
</div>
<div class="d-flex flex-column justify-content-center">
<div class="d-flex justify-content-center">
<div class="purple-bar my-auto"></div>
<div
v-once
class="svg-icon mx-2"
v-html="icons.dividerStars"
></div>
<div class="purple-bar my-auto"></div>
</div>
<div class="d-flex flex-column align-items-center mt-3">
<div
v-once
class="svg-icon svg-gift-box mb-2"
v-html="icons.giftBox"
>
</div>
<p class="purple-300 mb-3">
{{ $t('giftSubscription') }}
</p>
<button class="btn btn-secondary mb-5" @click="showSelectUser()">
{{ $t('giftASubscription') }}
</button>
</div>
<a
class="mx-auto"
@click="showSelectUser()"
>
{{ $t('giftASubscription') }}
</a>
</div>
</div>
</template>
@@ -360,8 +402,13 @@
color: $purple-200;
}
h3 {
line-height: 24px;
}
p {
max-width: 21rem;
margin-bottom: 0px;
line-height: 24px;
}
small {
@@ -374,22 +421,14 @@
font-size: 16px;
}
.bg-green-10 {
background-color: $green-10;
}
.bg-gray-300 {
background-color: $gray-300;
}
.bg-gray-700 {
background-color: $gray-700;
}
.block-header {
color: $purple-200;
letter-spacing: 0.25rem;
font-size: 20px;
letter-spacing: 1ch;
font-weight: 700;
top: 24px;
}
.btn-secondary {
width: 448px;
}
.btn-update-card {
@@ -419,20 +458,19 @@
border: 1px solid $green-50;
}
.flex-spacer {
width: 4rem;
.final-header {
margin-bottom: 70px;
}
.gray-10 {
color: $gray-10;
.flip {
filter: flipH;
transform: scaleX(-1);
}
.gray-50 {
color: $gray-50;
}
.green-10 {
color: $green-10;
.gradient-swoop {
background-image: url('@/assets/svg/gradient-swoop.svg');
height: 274px;
width: 1440px;
}
.header-mini {
@@ -440,21 +478,10 @@
font-weight: bold;
}
.image-foods {
background: url(~@/assets/images/subscriber-food.png);
background-size: contain;
width: 46px;
height: 49px;
}
.lh-71 {
line-height: 1.71;
}
.maroon-50 {
color: $maroon-50;
}
.muted {
font-size: 14px;
color: $gray-200;
@@ -467,9 +494,14 @@
color: $gray-50;
}
.Pet-Jackalope-RoyalPurple {
margin-top: -1.75rem;
transform: scale(0.75);
.position-absolute {
position: absolute;
}
.purple-bar {
background-color: $purple-400;
height: 1px;
width: 432px;
}
.round-container {
@@ -494,11 +526,10 @@
background-color: $gray-500;
}
.subscribe-card {
width: 28rem;
.sub-benefit {
width: 94px;
height: 94px;
border-radius: 8px;
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
background-color: $white;
}
.svg-amazon-pay {
@@ -517,11 +548,6 @@
margin-right: 2px;
}
.svg-heart {
width: 24px;
height: 24px;
}
.svg-check {
width: 36px;
color: $white;
@@ -542,6 +568,11 @@
height: 16px;
}
.svg-food {
width: 60px;
height: 58px;
}
.svg-gem {
width: 24px;
height: 24px;
@@ -550,8 +581,13 @@
}
.svg-gems {
width: 42px;
height: 52px;
width: 54px;
height: 54px;
}
.svg-gift-box {
width: 24px;
height: 24px;
}
.svg-google-pay {
@@ -559,6 +595,11 @@
height: 40px;
}
.svg-heart {
width: 24px;
height: 24px;
}
.svg-hourglass {
width: 24px;
height: 24px;
@@ -566,14 +607,14 @@
margin-right: 2px;
}
.svg-gift-box {
width: 32px;
height: 32px;
.svg-hourglasses {
width: 39px;
height: 54px;
}
.svg-hourglasses {
width: 43px;
height: 53px;
.svg-jackalope {
width: 38px;
height: 44px;
}
.svg-logo {
@@ -586,6 +627,10 @@
height: 40px;
}
.w-330p {
width: 330px;
}
.w-55 {
width: 55%;
}
@@ -635,15 +680,20 @@ import calendarIcon from '@/assets/svg/calendar-purple.svg';
import checkmarkIcon from '@/assets/svg/check.svg';
import closeIcon from '@/assets/svg/close.svg';
import creditCardIcon from '@/assets/svg/credit-card-icon.svg';
import dividerStars from '@/assets/svg/divider-stars.svg';
import gemIcon from '@/assets/svg/gem.svg';
import giftBox from '@/assets/svg/gift-purple.svg';
import googlePayLogo from '@/assets/svg/google-pay-logo.svg';
import heartIcon from '@/assets/svg/health.svg';
import hourglassIcon from '@/assets/svg/hourglass.svg';
import jackalope from '@/assets/svg/jackalope.svg';
import logo from '@/assets/svg/habitica-logo-purple.svg';
import paypalLogo from '@/assets/svg/paypal-logo.svg';
import purpleStars from '@/assets/svg/stars-purple.svg';
import subscriberFood from '@/assets/svg/subscriber-food.svg';
import subscriberGems from '@/assets/svg/subscriber-gems.svg';
import subscriberHourglasses from '@/assets/svg/subscriber-hourglasses.svg';
import wordmark from '@/assets/svg/habitica-logo.svg';
export default {
components: {
@@ -678,15 +728,20 @@ export default {
checkmarkIcon,
closeIcon,
creditCardIcon,
dividerStars,
gemIcon,
giftBox,
googlePayLogo,
heartIcon,
hourglassIcon,
jackalope,
logo,
paypalLogo,
purpleStars,
subscriberFood,
subscriberGems,
subscriberHourglasses,
wordmark,
}),
};
},
@@ -766,6 +821,12 @@ export default {
&& !this.hasGroupPlan
);
},
month () {
return moment().format('MMMM');
},
currentMysterySetName () {
return this.$t(`mysterySet${moment().format('YYYYMM')}`);
},
currentMysterySet () {
return `shop_set_mystery_${moment().format('YYYYMM')}`;
},
@@ -1,17 +1,32 @@
<template>
<div id="subscription-form">
<b-form-group class="mb-3 w-100 h-100">
<div class="mb-3 w-100 h-100">
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<b-form-radio
<div
v-for="block in subscriptionBlocksOrdered"
v-if="block.target !== 'group' && block.canSubscribe === true"
:key="block.key"
v-model="subscription.key"
:value="block.key"
class="subscribe-option pt-2 pl-5 pb-3 mb-0"
:class="{selected: subscription.key === block.key}"
@click.native="updateSubscriptionData(block.key)"
class="subscribe-option mb-2 d-flex"
:class="{selected: subscription.key === block.key, final: block.months === 12}"
@click="updateSubscriptionData(block.key)"
>
<div
v-if="subscription.key === block.key"
class="selected-corner"
>
</div>
<div
class="svg svg-icon svg-check color m-2"
v-html="icons.check"
>
</div>
<div
v-if="block.months === 12"
class="ribbon mt-3 d-flex align-items-center"
>
<small class="bold teal-1"> {{ $t('popular') }} </small>
</div>
<!-- eslint-enable vue/no-use-v-if-with-v-for -->
<div
v-if="userReceivingGift && userReceivingGift._id"
@@ -19,19 +34,77 @@
v-html="$t('giftSubscriptionRateText', {price: block.price, months: block.months})"
>
</div>
<div
v-else
class="subscription-text ml-2 mb-1"
v-html="$t('subscriptionRateText', {price: block.price, months: block.months})"
>
<div v-else class="w-100">
<div class="ml-5" v-if="block.months < 12">
<h2 class="mt-3 mb-1"> ${{ block.price }}.00 USD </h2>
<small
v-if="block.months < 2"
class="bold mb-2"
>
{{ $t('recurringMonthly') }}
</small>
<small
v-else
class="bold mb-2"
>
{{ $t('recurringNMonthly', { length: block.months }) }}
</small>
<div class="d-flex flex-column">
<div class="d-flex align-items-center mb-1">
<div
class="svg svg-icon svg-plus gray-300 color mr-1"
v-html="icons.plus"
>
</div>
<div class="small" v-html="$t('unlockNGems', { count: 24 })"></div>
</div>
<div class="d-flex align-items-center">
<div
class="svg svg-icon svg-plus gray-300 color mr-1"
v-html="icons.plus"
>
</div>
<div class="small" v-html="$t('earn2Gems')"></div>
</div>
</div>
</div>
<div v-else>
<div class="bg-white py-3 pl-5">
<div class="d-flex align-items-center mb-1">
<h2 class="teal-10 mr-2 my-auto"> ${{ block.price }}.00 USD </h2>
<strike class="gray-200">$60.00 USD</strike>
</div>
<small class="bold teal-1 mb-2">
{{ $t('recurringNMonthly', { length: block.months }) }}
</small>
<div class="d-flex flex-column">
<div class="d-flex align-items-center mb-1">
<div
class="svg svg-icon svg-plus yellow-10 color mr-1"
v-html="icons.plus"
>
</div>
<div class="small teal-1" v-html="$t('unlockNGems', { count: 50 })"></div>
</div>
<div class="d-flex align-items-center">
<div
class="svg svg-icon svg-plus yellow-10 color mr-1"
v-html="icons.plus"
>
</div>
<div class="small teal-1" v-html="$t('maxGemCap')"></div>
</div>
</div>
</div>
<div
class="gradient-banner text-center"
>
<small class="mt-3" v-html="$t('immediate12Hourglasses')"></small>
</div>
</div>
</div>
<div
class="ml-2"
v-html="subscriptionBubbles(block.key)"
>
</div>
</b-form-radio>
</b-form-group>
</div>
</div>
<div class="mx-4 mb-4 text-center">
<small
v-if="note"
@@ -51,20 +124,26 @@
})"
:amazon-data="{type: 'single', gift, giftedTo: userReceivingGift._id, receiverName}"
/>
<payments-buttons
<button
v-else
:disabled="!subscription.key"
:stripe-fn="() => redirectToStripe({
subscription: subscription.key,
coupon: subscription.coupon,
})"
:paypal-fn="() => openPaypal({url: paypalPurchaseLink, type: 'subscription'})"
:amazon-data="{
type: 'subscription',
subscription: subscription.key,
coupon: subscription.coupon
}"
/>
class="btn btn-primary w-100"
@click="$root.$emit('bv::show::modal', 'buy-subscription')"
> {{ $t('subscribe') }} </button>
<b-modal
id="buy-subscription"
size="md"
:hide-header="true"
:hide-footer="true"
>
<payments-buttons
:disabled="!subscription.key"
:stripe-fn="() => redirectToStripe({
subscription: subscription.key,
coupon: subscription.coupon,
})"
:paypal-fn="() => openPaypal({url: paypalPurchaseLink, type: 'subscription'})"
/>
</b-modal>
</div>
</template>
@@ -77,9 +156,13 @@
margin-top: 0.75rem;
}
.selected {
background-color: rgba(213, 200, 255, 0.32);
.discount-bubble {
background-color: $green-10;
color: $white;
}
.selected {
outline: 2px solid $purple-300;
.subscription-bubble {
background-color: $purple-300;
color: $white;
@@ -102,9 +185,8 @@
color: $gray-200;
}
.discount-bubble {
background-color: $green-10;
color: $white;
.teal-1 strong {
color: $yellow-5 !important;
}
}
</style>
@@ -112,20 +194,82 @@
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
small {
small, .small {
color: $gray-100;
display: inline-block;
font-size: 12px ;
font-weight: normal;
line-height: 1.33;
line-height: 16px;
&.bold {
font-weight: 700;
}
}
strike {
line-height: 24px;
}
.gradient-banner {
padding-left: 100px;
padding-right: 100px;
small {
color: $teal-1;
}
}
.ribbon {
height: 24px;
width: fit-content;
background: linear-gradient(90deg, rgba(119, 244, 199, 1), rgba(114, 207, 255, 1));
border-radius: 4px;
clip-path: polygon(0px 0px, calc(100% + 1px) 0px, calc(100% + 1px) calc(100% + 1px),
0px calc(100% + 3px), 4px 50%);
box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
position: absolute;
right: -4px;
padding-left: 12px;
padding-right: 10px;
}
.selected-corner {
border-color: $purple-300 transparent transparent transparent;
border-style: solid;
border-width: 48px 48px 0 0;
border-top-left-radius: 4px;
position: absolute;
}
.subscribe-option {
background-color: $gray-700;
width: 448px;
height: 120px;
border-radius: 8px;
box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
position: relative;
&:not(:last-of-type) {
border-bottom: 1px solid $gray-600;
&.final {
height: 184px;
background: linear-gradient(90deg, rgba(119, 244, 199, 1), rgba(114, 207, 255, 1));
}
h2 {
font-family: 'Roboto', sans-serif;
line-height: 24px;
color: $gray-50;
}
}
.svg-check {
width: 16px;
height: 16px;
position: absolute;
color: $white;
}
.svg-plus {
width: 10px;
height: 10px;
}
</style>
@@ -136,6 +280,8 @@ import sortBy from 'lodash/sortBy';
import subscriptionBlocks from '@/../../common/script/content/subscriptionBlocks';
import paymentsButtons from '@/components/payments/buttons/list';
import paymentsMixin from '../../mixins/payments';
import check from '@/assets/svg/check.svg';
import plus from '@/assets/svg/positive.svg';
export default {
components: {
@@ -160,13 +306,17 @@ export default {
},
data () {
return {
subscription: {
key: 'basic_earned',
},
gift: {
type: 'subscription',
subscription: { key: 'basic_earned' },
},
icons: Object.freeze({
check,
plus,
}),
subscription: {
key: 'basic_12mo',
},
};
},
computed: {
@@ -193,7 +343,7 @@ export default {
},
updateSubscriptionData (key) {
this.subscription.key = key;
if (this.userReceivingGift._id) this.gift.subscription.key = key;
if (this.userReceivingGift?._id) this.gift.subscription.key = key;
},
},
};
+10 -4
View File
@@ -46,10 +46,13 @@
</div>
</div>
<div
class="col-12 d-flex "
:class="{'justify-content-center': applyNarrowView}"
class="col-12 d-flex"
:class="{'justify-content-center': applyNarrowView || maxWidthView}"
>
<div :class="{'settings-content': applyNarrowView, 'full-width-content': !applyNarrowView}">
<div :class="{
'settings-content': applyNarrowView,
'full-width-content': !applyNarrowView && !maxWidthView,
}">
<router-view />
</div>
</div>
@@ -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: {
+20 -10
View File
@@ -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 Travelers 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 <strong><%= count %> Gems</strong> per month instantly",
"earn2Gems": "Earn <strong>+2 Gems</strong> every month you're subscribed",
"maxGemCap": "Max <strong>Gem Cap</strong>",
"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 <strong>12 Mystic Hourglasses</strong> immediately after your first 12-month subscription!",
"subscribe": "Subscribe"
}