admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

re-write features on pricing page and add billingCycle toggle

Browse source
This commit is contained in:
MarconLP 2023-05-01 21:49:16 +02:00
parent 43325e5635
commit d7d5152a04
No known key found for this signature in database
GPG key ID: A08A9C8B623F5EA5
1 changed files with 78 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
src/pages/pricing.tsx
View file

@ -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 (
<>
<Head>
<title>{"Snapify | Pricing"}</title>
<title>Snapify | Pricing</title>
<meta name="description" content="Generated by create-t3-app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Header />
<div className="my-20 flex h-40 items-center justify-center sm:mx-10 lg:mx-20">
<div className="my-20 flex h-40 flex-col items-center justify-center sm:mx-10 lg:mx-20">
<span className="text-center text-4xl font-bold lg:text-7xl">
Choose the plan that fits your needs.
</span>
</div>
<div className="-mt-10 mb-10 flex flex-col items-center justify-center sm:mx-10 lg:mx-20">
<div className="z-20 mt-4 flex items-center gap-2 lg:mt-8">
<div
className="relative flex w-full rounded-full border border-[#b0b0b0] bg-gray-200/70"
onClick={() => setBilledAnnually(!billedAnnually)}
>
<button
className={`rounded-full border border-gray-200 px-4 py-2 text-sm font-medium text-gray-900 shadow-sm transition focus:z-10 focus:outline-none focus:ring-0 sm:w-auto ${
billedAnnually ? "" : "bg-white"
}`}
>
<span>Monthly</span>
</button>
<button
className={`ml-0.5 rounded-full border border-transparent px-4 py-2 text-sm font-medium text-gray-700 transition duration-150 focus:z-10 focus:ring-0 sm:w-auto ${
billedAnnually ? "bg-white" : ""
}`}
>
<span>Annual</span>
<span className="ml-2 rounded-lg bg-neutral-200 p-1 text-xs font-normal">
-20%
</span>
</button>
</div>
</div>
</div>
<div className="relative mx-4 mb-20 flex flex-col items-center justify-center gap-12 md:flex-row md:gap-4 lg:mx-16 lg:gap-16">
<div className="absolute left-[calc(50%_-_calc(min(75vw,500px)_/_2))] h-[min(75vw,500px)] w-[min(75vw,500px)] bg-[radial-gradient(circle_at_center,#666_0,#fff_100%)] opacity-80 blur-[calc(0.5_*_min(75vw,500px))]"></div>
{[
@ -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() {
</button>
</div>
<div className="mt-4 flex flex-col gap-2 pb-8">
{features.map(({ feature, description }) => (
{features.map(({ feature, description, included }) => (
<div
key={feature}
className="flex items-center gap-2 text-gray-500"
>
<div className="ml-6 h-5 w-5 flex-none">
<CheckIcon />
{included ? <CheckIcon /> : <XMarkIcon />}
</div>
<Tooltip title={description}>