Skip to content

improvement: plans comparison & updated UI of pricing #1031

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Sep 18, 2025
Merged

improvement: plans comparison & updated UI of pricing #1031

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
df74d08
wip
ameer2468 Sep 18, 2025
206ed0d
table
ameer2468 Sep 18, 2025
c33949e
Update PricingPage.tsx
ameer2468 Sep 18, 2025
897fcc0
Merge branch 'main' into compare-plans
richiemcilroy Sep 18, 2025
617ec79
feat: Small revamp for pricing page UI and feature lists
richiemcilroy Sep 18, 2025
03614f0
formatting
ameer2468 Sep 18, 2025
186ab49
formatting
ameer2468 Sep 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions apps/web/components/icons/QuestionMarkIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
interface QuestionMarkIconProps {
className?: string;
}

export const QuestionMarkIcon = ({ className }: QuestionMarkIconProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className={className}
viewBox="0 0 24 24"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"></path>
</svg>
);
};
14 changes: 12 additions & 2 deletions apps/web/components/pages/HomePage/Pricing/CommercialArt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
import { Fit, Layout, useRive } from "@rive-app/react-canvas";
import clsx from "clsx";
import { forwardRef, memo, useImperativeHandle } from "react";

export interface CommercialArtRef {
playHoverAnimation: () => void;
playDefaultAnimation: () => void;
}

interface Props {
className?: string;
}

export const CommercialArt = memo(
forwardRef<CommercialArtRef>((_, ref) => {
forwardRef<CommercialArtRef, Props>((props, ref) => {
const { rive, RiveComponent: CommercialRive } = useRive({
src: "/rive/pricing.riv",
artboard: "commercial",
Expand All @@ -34,7 +39,12 @@ export const CommercialArt = memo(
}));

return (
<CommercialRive className="w-full max-w-[200px] mx-auto h-[175px]" />
<CommercialRive
className={clsx(
"w-full max-w-[100px] mx-auto h-[80px]",
props.className,
)}
/>
);
}),
);
75 changes: 52 additions & 23 deletions apps/web/components/pages/HomePage/Pricing/CommercialCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
import { Button, Switch } from "@cap/ui";
import { faCheck, faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
import {
faBriefcase,
faDownload,
faMinus,
faPlus,
faVideo,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import NumberFlow from "@number-flow/react";
import clsx from "clsx";
import { useRef, useState } from "react";
import { toast } from "sonner";
import { homepageCopy } from "../../../../data/homepage-copy";
import { QuestionMarkIcon } from "../../../icons/QuestionMarkIcon";
import { CommercialArt, type CommercialArtRef } from "./CommercialArt";

export const CommercialCard = () => {
Expand Down Expand Up @@ -64,42 +71,42 @@ export const CommercialCard = () => {
className="flex flex-col flex-1 justify-between p-8 rounded-2xl border shadow-lg bg-gray-1 border-gray-5"
>
<div>
<div className="md:h-[300px]">
<div>
<CommercialArt ref={commercialArtRef} />
<h3 className="mb-2 text-2xl text-center text-gray-12">
<h3 className="mb-2 text-xl font-semibold text-center text-gray-12">
{homepageCopy.pricing.commercial.title}
</h3>
<p className="mb-2 text-base text-center text-gray-10 w-full max-w-[285px] mx-auto">
<p className="mb-3 text-sm text-center text-gray-11 w-full max-w-[285px] mx-auto font-medium">
{homepageCopy.pricing.commercial.description}
</p>
<div className="text-center">
<div className="mb-6 text-center">
<a
href="/docs/commercial-license"
className="text-sm underline text-gray-10 hover:text-gray-12"
className="text-xs underline text-gray-10 hover:text-gray-12"
>
Learn more about the commercial license here
</a>
</div>
</div>

<div className="mb-6 text-center">
<span className="text-5xl tabular-nums text-gray-12">
<span className="text-3xl tabular-nums text-gray-12">
$<NumberFlow value={currentPrice} />
</span>
<span className="text-lg tabular-nums text-gray-10">
<span className="text-base tabular-nums text-gray-10">
{" "}
/ {billingCycleText}
</span>
{isYearly ? (
<p className="text-lg tabular-nums text-gray-10">
<p className="text-sm tabular-nums text-gray-10">
or, $
<NumberFlow
value={licenses * COMMERCIAL_LICENSE_LIFETIME_PRICE}
/>{" "}
one-time payment
</p>
) : (
<p className="text-lg tabular-nums text-gray-10">
<p className="text-sm tabular-nums text-gray-10">
or, $
<NumberFlow value={licenses * COMMERCIAL_LICENSE_YEARLY_PRICE} />{" "}
/ year
Expand Down Expand Up @@ -163,21 +170,43 @@ export const CommercialCard = () => {
</div>
</div>
</div>
</div>

<ul className="mb-8 space-y-4">
{homepageCopy.pricing.commercial.features.map((feature) => (
<li
key={feature}
className="flex items-start text-base text-gray-12"
<div className="mb-6">
<ul className="space-y-3">
<li className="flex items-center text-sm text-gray-12">
<FontAwesomeIcon
icon={faBriefcase}
className="flex-shrink-0 mr-3 text-gray-12"
style={{ fontSize: "14px", minWidth: "14px" }}
/>
<span>Commercial usage</span>
<a
href="/docs/commercial-license"
target="_blank"
rel="noopener noreferrer"
className="ml-1.5 text-gray-10 hover:text-gray-12 transition-colors"
aria-label="Learn more about commercial license"
>
<FontAwesomeIcon
icon={faCheck}
className="mr-3 mt-0.5 text-gray-12 flex-shrink-0"
style={{ fontSize: "18px", minWidth: "18px" }}
/>
<span className="leading-6">{feature}</span>
</li>
))}
<QuestionMarkIcon className="size-3.5" />
</a>
</li>
<li className="flex items-center text-sm text-gray-12">
<FontAwesomeIcon
icon={faVideo}
className="flex-shrink-0 mr-3 text-gray-12"
style={{ fontSize: "14px", minWidth: "14px" }}
/>
<span>Unlimited local recordings</span>
</li>
<li className="flex items-center text-sm text-gray-12">
<FontAwesomeIcon
icon={faDownload}
className="flex-shrink-0 mr-3 text-gray-12"
style={{ fontSize: "14px", minWidth: "14px" }}
/>
<span>Export to MP4 or GIF</span>
</li>
</ul>
</div>

Expand Down
5 changes: 1 addition & 4 deletions apps/web/components/pages/HomePage/Pricing/ProArt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,7 @@ export const ProArt = memo(

return (
<ProRive
className={clsx(
className,
"relative bottom-5 mx-auto w-full max-w-[210px] h-[195px]",
)}
className={clsx(className, "mx-auto w-full max-w-[100px] h-[80px]")}
/>
);
}),
Expand Down
81 changes: 60 additions & 21 deletions apps/web/components/pages/HomePage/Pricing/ProCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import { Button, Switch } from "@cap/ui";
import { getProPlanId } from "@cap/utils";
import { faCheck, faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
import {
faCloud,
faLink,
faMagic,
faMinus,
faPlus,
faUsers,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import NumberFlow from "@number-flow/react";
import clsx from "clsx";
import { useRouter } from "next/navigation";
import { useRef, useState } from "react";
import { toast } from "sonner";
import { homepageCopy } from "../../../../data/homepage-copy";
Expand All @@ -16,7 +22,6 @@ export const ProCard = () => {
const [proLoading, setProLoading] = useState(false);
const [guestLoading, setGuestLoading] = useState(false);
const proArtRef = useRef<ProArtRef>(null);
const { push } = useRouter();

const CAP_PRO_ANNUAL_PRICE_PER_USER = homepageCopy.pricing.pro.pricing.annual;
const CAP_PRO_MONTHLY_PRICE_PER_USER =
Expand Down Expand Up @@ -109,30 +114,30 @@ export const ProCard = () => {
{homepageCopy.pricing.pro.badge}
</span>
</div>
<div className="md:h-[300px]">
<div className="md:h-[180px]">
<ProArt ref={proArtRef} />
<h3 className="mb-2 text-2xl text-center">
<h3 className="mb-2 text-xl font-semibold text-center">
{homepageCopy.pricing.pro.title}
</h3>
<p className="mb-6 text-base text-center text-gray-8">
<p className="mb-4 text-sm font-medium text-center text-gray-9">
{homepageCopy.pricing.pro.description}
</p>
</div>

<div className="mb-6 text-center">
<span className="mr-2 text-5xl tabular-nums text-gray-1">
<span className="mr-2 text-3xl tabular-nums text-gray-1">
$<NumberFlow suffix="/mo" value={currentTotalPricePro} />
</span>
<span className="text-lg tabular-nums text-gray-8">
<span className="text-base tabular-nums text-gray-8">
{" "}
{billingCycleTextPro}
</span>
{isAnnually ? (
<p className="text-lg text-gray-8">
<p className="text-sm text-gray-8">
or,{" "}
<NumberFlow
value={CAP_PRO_MONTHLY_PRICE_PER_USER * users}
className="text-lg tabular-nums"
className="text-sm tabular-nums"
format={{
notation: "compact",
style: "currency",
Expand All @@ -145,18 +150,18 @@ export const ProCard = () => {
) : (
<>
for{" "}
<NumberFlow value={users} className="text-lg tabular-nums" />{" "}
<NumberFlow value={users} className="text-sm tabular-nums" />{" "}
users,{" "}
</>
)}
billed monthly
</p>
) : (
<p className="text-lg text-gray-8">
<p className="text-sm text-gray-8">
or,{" "}
<NumberFlow
value={CAP_PRO_ANNUAL_PRICE_PER_USER * users}
className="text-lg tabular-nums"
className="text-sm tabular-nums"
format={{
notation: "compact",
style: "currency",
Expand All @@ -169,7 +174,7 @@ export const ProCard = () => {
) : (
<>
for{" "}
<NumberFlow value={users} className="text-lg tabular-nums" />{" "}
<NumberFlow value={users} className="text-sm tabular-nums" />{" "}
users,{" "}
</>
)}
Expand Down Expand Up @@ -237,14 +242,48 @@ export const ProCard = () => {
</div>
</div>
</div>
</div>

<ul className="mb-8 space-y-3 text-base">
{homepageCopy.pricing.pro.features.map((feature) => (
<li key={feature} className="flex items-center text-gray-1">
<FontAwesomeIcon icon={faCheck} className="mr-2 text-gray-1" />
{feature}
</li>
))}
<div className="mb-6">
<ul className="space-y-3">
<li className="flex items-center text-sm text-gray-1">
<FontAwesomeIcon
icon={faCloud}
className="flex-shrink-0 mr-3 text-gray-4"
style={{ fontSize: "14px", minWidth: "14px" }}
/>
<span className="text-gray-4">
Unlimited cloud storage & shareable links
</span>
</li>
<li className="flex items-center text-sm text-gray-1">
<FontAwesomeIcon
icon={faMagic}
className="flex-shrink-0 mr-3 text-gray-4"
style={{ fontSize: "14px", minWidth: "14px" }}
/>
<span className="text-gray-4">
Automatic AI title, transcription, summary, and chapter generation
</span>
</li>
<li className="flex items-center text-sm">
<FontAwesomeIcon
icon={faLink}
className="flex-shrink-0 mr-3 text-gray-4"
style={{ fontSize: "14px", minWidth: "14px" }}
/>
<span className="text-gray-4">
Connect a custom domain, e.g. cap.yourdomain.com
</span>
</li>
<li className="flex items-center text-sm text-gray-1">
<FontAwesomeIcon
icon={faUsers}
className="flex-shrink-0 mr-3 text-gray-4"
style={{ fontSize: "14px", minWidth: "14px" }}
/>
<span className="text-gray-4">Shared team spaces</span>
</li>
</ul>
</div>

Expand Down
Loading
Loading