feat: create Premium subscription info page

Rule-34 · Jun 19, 2023 · 592562d · 592562d
1 parent 5673e8f
commit 592562d
Showing 1 changed file with 158 additions and 3 deletions.
diff --git a/pages/premium/index.vue b/pages/premium/index.vue
@@ -1,4 +1,22 @@
 <script lang="ts" setup>
+  import { CheckIcon } from '@heroicons/vue/20/solid'
+  import { InformationCircleIcon } from '@heroicons/vue/24/outline'
+  import { completeBooruList } from 'assets/lib/rule-34-shared-resources/src/util/BooruUtils'
+
+  const mainFeatures = [
+    { title: 'Additional Boorus (websites)', hasAdditionalInfo: true },
+    { title: 'Save posts', hasAdditionalInfo: true },
+    { title: 'One-click post download', hasAdditionalInfo: true },
+    { title: 'Post image source finder', hasAdditionalInfo: true },
+    { title: 'Tag collections', hasAdditionalInfo: true },
+    { title: 'Restore last session', hasAdditionalInfo: true },
+    { title: 'Backup your data', hasAdditionalInfo: true },
+    { title: 'Integrated proxy to bypass website blocks', hasAdditionalInfo: true },
+    { title: 'Hide promoted content', hasAdditionalInfo: false },
+    { title: '“Premium” Discord role', hasAdditionalInfo: true },
+    { title: 'Support the development', hasAdditionalInfo: false }
+  ]
+
   definePageMeta({
     middleware: 'auth',
 
@@ -10,9 +28,146 @@
 </script>
 
 <template>
-  <main>
-    <!-- Subscription -->
+  <main class="flex-1">
+    <!-- TODO: Sign in -->
+
+    <!-- Pricing -->
+    <section class="isolate overflow-hidden">
+      <div class="flow-root overflow-hidden py-16 sm:pt-32 lg:pb-0">
+        <div class="container mx-auto max-w-3xl flex-1 px-4 sm:px-6 lg:px-8">
+          <!-- Header -->
+          <div class="relative z-10">
+            <!-- Title -->
+            <h1 class="mx-auto max-w-4xl text-center text-4xl font-bold tracking-tight text-base-content-highlight">
+              Premium
+            </h1>
+
+            <p class="mx-auto mt-4 max-w-2xl text-center text-lg leading-8">
+              <!-- TODO: Improve description -->
+              Enhance your experience with the Premium subscription
+            </p>
+          </div>
+
+          <!-- Body -->
+          <div class="relative mx-auto mt-10 grid max-w-md grid-cols-1 gap-y-8 lg:mx-0 lg:-mb-14 lg:max-w-none">
+            <!-- Background -->
+            <svg
+              aria-hidden="true"
+              class="absolute -bottom-48 left-1/2 h-[64rem] -translate-x-1/2 translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] lg:-top-48 lg:bottom-auto lg:translate-y-0"
+              viewBox="0 0 1208 1024"
+            >
+              <ellipse
+                cx="604"
+                cy="512"
+                fill="url(#d25c25d4-6d43-4bf9-b9ac-1842a30a4867)"
+                rx="604"
+                ry="512"
+              />
+              <defs>
+                <radialGradient id="d25c25d4-6d43-4bf9-b9ac-1842a30a4867">
+                  <stop stop-color="#7775D6" />
+                  <stop
+                    offset="1"
+                    stop-color="#E935C1"
+                  />
+                </radialGradient>
+              </defs>
+            </svg>
+
+            <!-- Tier background -->
+            <div
+              aria-hidden="true"
+              class="hidden lg:absolute lg:inset-x-px lg:bottom-0 lg:top-4 lg:block lg:rounded-t-2xl lg:bg-gray-800/80 lg:ring-1 lg:ring-white/10"
+            />
+
+            <!-- Tier -->
+            <div class="relative rounded-2xl bg-gray-800/80 ring-1 ring-white/10 lg:bg-transparent lg:pb-14 lg:ring-0">
+              <div class="p-8 lg:pt-12 xl:p-10 xl:pt-14">
+                <!-- -->
+
+                <div>
+                  <h2 class="text-2xl font-bold tracking-wide text-base-content-highlight">Premium</h2>
+
+                  <p class="mt-2 whitespace-pre-line text-sm leading-7">
+                    Get access to {{ mainFeatures.length }} exclusive features, including
+                    {{ completeBooruList.length }} additional Boorus!
+                  </p>
+                </div>
+
+                <!-- Features -->
+                <div class="mt-4 flow-root sm:mt-8">
+                  <ol
+                    id="premium-features"
+                    class="space-y-1 divide-y divide-base-0/5"
+                    role="list"
+                  >
+                    <li
+                      v-for="mainFeature in mainFeatures"
+                      :key="mainFeature.title"
+                      class="flex items-center gap-x-3 py-2"
+                    >
+                      <CheckIcon class="h-6 w-5 flex-none text-primary-600" />
+
+                      <span class="flex-auto text-sm leading-6 text-base-content-highlight">
+                        {{ mainFeature.title }}
+                      </span>
+
+                      <!-- TODO: Better linking -->
+                      <a
+                        v-if="mainFeature.hasAdditionalInfo"
+                        :href="`#${mainFeature.title}`"
+                        class="focus-visible:focus-util hover:hover-text-util text-base-content"
+                      >
+                        <span class="sr-only">Learn more about this feature</span>
+
+                        <InformationCircleIcon class="h-5 w-5 flex-none" />
+                      </a>
+                    </li>
+                  </ol>
+                </div>
+
+                <!-- CTA -->
+                <div
+                  class="mt-6 flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between lg:flex-col lg:items-stretch"
+                >
+                  <div class="flex items-center justify-center gap-x-4">
+                    <p class="text-4xl font-bold tracking-tight text-base-content-highlight">€4.9</p>
+
+                    <div class="text-sm leading-5">
+                      <p class="text-base-content">EUR</p>
+                      <p>Billed monthly</p>
+                    </div>
+                  </div>
+
+                  <div class="text-center text-sm leading-6">
+                    ✨ Up to
+
+                    <span
+                      class="inline-flex items-center gap-x-1.5 rounded-full bg-primary-700 px-2 py-0.5 font-medium leading-normal text-primary-200"
+                    >
+                      60% Off
+                    </span>
+
+                    in certain countries ✨
+                  </div>
+
+                  <a
+                    aria-describedby="premium-features"
+                    class="focus-visible:focus-util hover:hover-text-util rounded-md bg-primary-700 px-3 py-2 text-center text-sm font-semibold leading-6 text-base-content-highlight hover:bg-primary-600 focus-visible:ring-offset-2"
+                    href="https://gum.co/Rule34App"
+                  >
+                    Subscribe
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
 
-    <!-- Sign in-->
+    <section>
+      <!-- TODO: GIFs of features -->
+    </section>
   </main>
 </template>