re-write features on pricing page and add billingCycle toggle
This commit is contained in:
MarconLP
parent
43325e5635
commit
d7d5152a04
1 changed files with 78 additions and 17 deletions
|
|
@ -2,7 +2,7 @@ import Footer from "~/components/Footer";
|
||||||
import Header from "~/components/Header";
|
import Header from "~/components/Header";
|
||||||
import Head from "next/head";
|
import Head from "next/head";
|
||||||
import { useState } from "react";
|
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 Tooltip from "~/components/Tooltip";
|
||||||
import { Disclosure, Transition } from "@headlessui/react";
|
import { Disclosure, Transition } from "@headlessui/react";
|
||||||
import { ChevronUpIcon } from "@heroicons/react/20/solid";
|
import { ChevronUpIcon } from "@heroicons/react/20/solid";
|
||||||
|
|
@ -15,17 +15,44 @@ export default function Pricing() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<title>{"Snapify | Pricing"}</title>
|
<title>Snapify | Pricing</title>
|
||||||
<meta name="description" content="Generated by create-t3-app" />
|
<meta name="description" content="Generated by create-t3-app" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
<Header />
|
<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">
|
<span className="text-center text-4xl font-bold lg:text-7xl">
|
||||||
Choose the plan that fits your needs.
|
Choose the plan that fits your needs.
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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="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>
|
<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 },
|
price: { monthly: 0, annual: 0 },
|
||||||
features: [
|
features: [
|
||||||
{
|
{
|
||||||
feature: "Unlimited video recording",
|
feature: "Unlimited recording",
|
||||||
description: "Record and share unlimited videos",
|
description:
|
||||||
|
"Make unlimited recordings of your tab, desktop, and any application.",
|
||||||
|
included: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
feature: "10 video uploads",
|
feature: "Limited video library",
|
||||||
description: "Upload external videos to your Library",
|
description:
|
||||||
|
"Store up to 10 recorded videos in your Snapify library.",
|
||||||
|
included: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
feature: "Remove branding",
|
feature: "Video download",
|
||||||
description: "Remove Snapify branding from your videos",
|
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 },
|
price: { monthly: 5, annual: 4 },
|
||||||
features: [
|
features: [
|
||||||
{
|
{
|
||||||
feature: "Unlimited videos",
|
feature: "Unlimited recording",
|
||||||
description: "Record and share unlimited videos",
|
description:
|
||||||
|
"Make unlimited recordings of your tab, desktop, and any application.",
|
||||||
|
included: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
feature: "Video uploads",
|
feature: "Unlimited video library",
|
||||||
description: "Upload external videos to your Library",
|
description:
|
||||||
|
"Store as many recorded videos as you want in your Snapify library.",
|
||||||
|
included: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
feature: "Remove branding",
|
feature: "Video download",
|
||||||
description: "Remove Snapify branding from your videos",
|
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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-4 flex flex-col gap-2 pb-8">
|
<div className="mt-4 flex flex-col gap-2 pb-8">
|
||||||
{features.map(({ feature, description }) => (
|
{features.map(({ feature, description, included }) => (
|
||||||
<div
|
<div
|
||||||
key={feature}
|
key={feature}
|
||||||
className="flex items-center gap-2 text-gray-500"
|
className="flex items-center gap-2 text-gray-500"
|
||||||
>
|
>
|
||||||
<div className="ml-6 h-5 w-5 flex-none">
|
<div className="ml-6 h-5 w-5 flex-none">
|
||||||
<CheckIcon />
|
{included ? <CheckIcon /> : <XMarkIcon />}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Tooltip title={description}>
|
<Tooltip title={description}>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue