From d7d5152a042d880d1b4df6edeb0134be69a4b964 Mon Sep 17 00:00:00 2001 From: MarconLP <13001502+MarconLP@users.noreply.github.com> Date: Mon, 1 May 2023 21:49:16 +0200 Subject: [PATCH] re-write features on pricing page and add billingCycle toggle --- src/pages/pricing.tsx | 95 +++++++++++++++++++++++++++++++++++-------- 1 file changed, 78 insertions(+), 17 deletions(-) diff --git a/src/pages/pricing.tsx b/src/pages/pricing.tsx index 13a1a6d..7d9b867 100644 --- a/src/pages/pricing.tsx +++ b/src/pages/pricing.tsx @@ -2,7 +2,7 @@ import Footer from "~/components/Footer"; import Header from "~/components/Header"; import Head from "next/head"; import { useState } from "react"; -import { CheckIcon } from "@heroicons/react/20/solid"; +import { CheckIcon, XMarkIcon } from "@heroicons/react/20/solid"; import Tooltip from "~/components/Tooltip"; import { Disclosure, Transition } from "@headlessui/react"; import { ChevronUpIcon } from "@heroicons/react/20/solid"; @@ -15,17 +15,44 @@ export default function Pricing() { return ( <> - {"Snapify | Pricing"} + Snapify | Pricing
-
+
Choose the plan that fits your needs.
+
+
+
setBilledAnnually(!billedAnnually)} + > + + +
+
+
+
{[ @@ -34,16 +61,33 @@ export default function Pricing() { price: { monthly: 0, annual: 0 }, features: [ { - feature: "Unlimited video recording", - description: "Record and share unlimited videos", + feature: "Unlimited recording", + description: + "Make unlimited recordings of your tab, desktop, and any application.", + included: true, }, { - feature: "10 video uploads", - description: "Upload external videos to your Library", + feature: "Limited video library", + description: + "Store up to 10 recorded videos in your Snapify library.", + included: true, }, { - feature: "Remove branding", - description: "Remove Snapify branding from your videos", + feature: "Video download", + description: + "Download your recorded videos for offline viewing or sharing with others.", + included: true, + }, + { + feature: "External video upload", + description: + "Upload videos recorded using other tools or platforms to your Snapify library.", + included: false, + }, + { + feature: "Custom branding", + description: "Remove Snapify branding from your videos.", + included: false, }, ], }, @@ -52,16 +96,33 @@ export default function Pricing() { price: { monthly: 5, annual: 4 }, features: [ { - feature: "Unlimited videos", - description: "Record and share unlimited videos", + feature: "Unlimited recording", + description: + "Make unlimited recordings of your tab, desktop, and any application.", + included: true, }, { - feature: "Video uploads", - description: "Upload external videos to your Library", + feature: "Unlimited video library", + description: + "Store as many recorded videos as you want in your Snapify library.", + included: true, }, { - feature: "Remove branding", - description: "Remove Snapify branding from your videos", + feature: "Video download", + description: + "Download your recorded videos for offline viewing or sharing with others.", + included: true, + }, + { + feature: "External video upload", + description: + "Upload videos recorded using other tools or platforms to your Snapify library.", + included: true, + }, + { + feature: "Custom branding", + description: "Remove Snapify branding from your videos.", + included: true, }, ], }, @@ -95,13 +156,13 @@ export default function Pricing() {
- {features.map(({ feature, description }) => ( + {features.map(({ feature, description, included }) => (
- + {included ? : }