diff --git a/src/components/CTA.tsx b/src/components/CTA.tsx new file mode 100644 index 0000000..c652381 --- /dev/null +++ b/src/components/CTA.tsx @@ -0,0 +1,63 @@ +import { useAtom } from "jotai/index"; +import recordVideoModalOpen from "~/atoms/recordVideoModalOpen"; +import { usePostHog } from "posthog-js/react"; + +export default function CTA() { + const [, setRecordOpen] = useAtom(recordVideoModalOpen); + const posthog = usePostHog(); + + const openRecordModal = () => { + setRecordOpen(true); + + posthog?.capture("open record video modal", { + cta: "cta section", + }); + }; + + return ( +
+
+
+

+ Ready to improve how your team communicates? +

+
+ +
+ +
+
+
+ ); +} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 088252e..8a7e5b0 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,35 +1,27 @@ +import Link from "next/link"; + export default function Footer() { return (
diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 2299ab1..f5e367e 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -49,62 +49,42 @@ export default function Header() { ))} - - Log in - - <> -
- -
- Open App -
- -
setNavbarOpen(!navbarOpen)} - > - -
-
- -
+ - -
- Overview -
- - -
- Contact -
- - -
- Changelog -
- - -
- Roadmap -
- + Log in + +
setNavbarOpen(!navbarOpen)} + > +
- +
+ +
+ {navigation.map(({ href, name }) => ( + +
+ {name} +
+ + ))} +
); diff --git a/src/components/Paywall.tsx b/src/components/Paywall.tsx index 3b13e40..9d9d744 100644 --- a/src/components/Paywall.tsx +++ b/src/components/Paywall.tsx @@ -92,7 +92,7 @@ export default function Paywall() {
- Monthly + Monthly - - Annually - + Annually 20% Off @@ -118,7 +116,7 @@ export default function Paywall() { className="w-full flex-none rounded-3xl border bg-white shadow-sm" >
-
+
Pro
@@ -167,7 +165,7 @@ export default function Paywall() {
-
+
{feature}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5cb5337..7c438d3 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -11,6 +11,7 @@ import { CheckCircleIcon } from "@heroicons/react/24/outline"; import Footer from "~/components/Footer"; import Header from "~/components/Header"; import Image from "next/image"; +import CTA from "~/components/CTA"; const Home: NextPage = () => { const [, setRecordOpen] = useAtom(recordVideoModalOpen); @@ -299,50 +300,7 @@ const Home: NextPage = () => {
-
-
-
-

- Ready to improve how your team communicates? -

-
- -
- -
-
-
+
diff --git a/src/pages/pricing.tsx b/src/pages/pricing.tsx new file mode 100644 index 0000000..13a1a6d --- /dev/null +++ b/src/pages/pricing.tsx @@ -0,0 +1,178 @@ +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 Tooltip from "~/components/Tooltip"; +import { Disclosure, Transition } from "@headlessui/react"; +import { ChevronUpIcon } from "@heroicons/react/20/solid"; +import CTA from "~/components/CTA"; +import VideoRecordModal from "~/components/VideoRecordModal"; + +export default function Pricing() { + const [billedAnnually, setBilledAnnually] = useState(false); + + return ( + <> + + {"Snapify | Pricing"} + + + +
+
+ + Choose the plan that fits your needs. + +
+ +
+
+ {[ + { + name: "Free", + price: { monthly: 0, annual: 0 }, + features: [ + { + feature: "Unlimited video recording", + description: "Record and share unlimited videos", + }, + { + feature: "10 video uploads", + description: "Upload external videos to your Library", + }, + { + feature: "Remove branding", + description: "Remove Snapify branding from your videos", + }, + ], + }, + { + name: "Pro", + price: { monthly: 5, annual: 4 }, + features: [ + { + feature: "Unlimited videos", + description: "Record and share unlimited videos", + }, + { + feature: "Video uploads", + description: "Upload external videos to your Library", + }, + { + feature: "Remove branding", + description: "Remove Snapify branding from your videos", + }, + ], + }, + ].map(({ name, price, features }) => ( +
+ {name === "Pro" ? ( +
+ Most Popular +
+ ) : null} +
+
+ {name} +
+
+ {billedAnnually ? price.annual : price.monthly} + / mo. +
+
+ {billedAnnually ? "billed annually" : "billed monthly"} +
+
+ +
+
+ {features.map(({ feature, description }) => ( +
+
+ +
+ + +
+ {feature} +
+ +
+ ))} +
+
+ ))} +
+ +
+
+ FAQs +
+
+ {[ + { + question: "What are my payment options?", + answer: + "You can be billed monthly, but save 20% if you pay annually. We currently accept credit card payment. Contact us at hello@snapify.it if you need an alternative payment method.", + }, + { + question: + "What happens when I hit my 10 video limit on the Free plan?", + answer: + "Our Free plan has a limit of 10 videos. To record more than 10 videos, you will need to delete videos or upgrade to the Pro plan.", + }, + ].map(({ answer, question }) => ( + + {({ open }) => ( + <> + + {question} + + + + + {answer} + + + + )} + + ))} +
+
+ + + +