Skip to content

Commit d752580

Browse files
ameer2468richiemcilroy
ameer2468
and
richiemcilroy
authored
improvement: plans comparison & updated UI of pricing (#1031)
* wip * table * Update PricingPage.tsx * feat: Small revamp for pricing page UI and feature lists * formatting * formatting --------- Co-authored-by: Richie McIlroy <[email protected]>
1 parent 37e680d commit d752580

File tree

8 files changed

+667
-80
lines changed

8 files changed

+667
-80
lines changed

‎apps/web/components/icons/QuestionMarkIcon.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
interface QuestionMarkIconProps {
2+
className?: string;
3+
}
4+
5+
export const QuestionMarkIcon = ({ className }: QuestionMarkIconProps) => {
6+
return (
7+
<svg
8+
xmlns="http://www.w3.org/2000/svg"
9+
width="24"
10+
height="24"
11+
fill="none"
12+
stroke="currentColor"
13+
strokeLinecap="round"
14+
strokeLinejoin="round"
15+
strokeWidth="2"
16+
className={className}
17+
viewBox="0 0 24 24"
18+
>
19+
<circle cx="12" cy="12" r="10"></circle>
20+
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"></path>
21+
</svg>
22+
);
23+
};

‎apps/web/components/pages/HomePage/Pricing/CommercialArt.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
import { Fit, Layout, useRive } from "@rive-app/react-canvas";
2+
import clsx from "clsx";
23
import { forwardRef, memo, useImperativeHandle } from "react";
34

45
export interface CommercialArtRef {
56
playHoverAnimation: () => void;
67
playDefaultAnimation: () => void;
78
}
89

10+
interface Props {
11+
className?: string;
12+
}
13+
914
export const CommercialArt = memo(
10-
forwardRef<CommercialArtRef>((_, ref) => {
15+
forwardRef<CommercialArtRef, Props>((props, ref) => {
1116
const { rive, RiveComponent: CommercialRive } = useRive({
1217
src: "/rive/pricing.riv",
1318
artboard: "commercial",
@@ -34,7 +39,12 @@ export const CommercialArt = memo(
3439
}));
3540

3641
return (
37-
<CommercialRive className="w-full max-w-[200px] mx-auto h-[175px]" />
42+
<CommercialRive
43+
className={clsx(
44+
"w-full max-w-[100px] mx-auto h-[80px]",
45+
props.className,
46+
)}
47+
/>
3848
);
3949
}),
4050
);

‎apps/web/components/pages/HomePage/Pricing/CommercialCard.tsx‎

Lines changed: 52 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
import { Button, Switch } from "@cap/ui";
2-
import { faCheck, faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
2+
import {
3+
faBriefcase,
4+
faDownload,
5+
faMinus,
6+
faPlus,
7+
faVideo,
8+
} from "@fortawesome/free-solid-svg-icons";
39
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
410
import NumberFlow from "@number-flow/react";
511
import clsx from "clsx";
612
import { useRef, useState } from "react";
713
import { toast } from "sonner";
814
import { homepageCopy } from "../../../../data/homepage-copy";
15+
import { QuestionMarkIcon } from "../../../icons/QuestionMarkIcon";
916
import { CommercialArt, type CommercialArtRef } from "./CommercialArt";
1017

1118
export const CommercialCard = () => {
@@ -64,42 +71,42 @@ export const CommercialCard = () => {
6471
className="flex flex-col flex-1 justify-between p-8 rounded-2xl border shadow-lg bg-gray-1 border-gray-5"
6572
>
6673
<div>
67-
<div className="md:h-[300px]">
74+
<div>
6875
<CommercialArt ref={commercialArtRef} />
69-
<h3 className="mb-2 text-2xl text-center text-gray-12">
76+
<h3 className="mb-2 text-xl font-semibold text-center text-gray-12">
7077
{homepageCopy.pricing.commercial.title}
7178
</h3>
72-
<p className="mb-2 text-base text-center text-gray-10 w-full max-w-[285px] mx-auto">
79+
<p className="mb-3 text-sm text-center text-gray-11 w-full max-w-[285px] mx-auto font-medium">
7380
{homepageCopy.pricing.commercial.description}
7481
</p>
75-
<div className="text-center">
82+
<div className="mb-6 text-center">
7683
<a
7784
href="/docs/commercial-license"
78-
className="text-sm underline text-gray-10 hover:text-gray-12"
85+
className="text-xs underline text-gray-10 hover:text-gray-12"
7986
>
8087
Learn more about the commercial license here
8188
</a>
8289
</div>
8390
</div>
8491

8592
<div className="mb-6 text-center">
86-
<span className="text-5xl tabular-nums text-gray-12">
93+
<span className="text-3xl tabular-nums text-gray-12">
8794
$<NumberFlow value={currentPrice} />
8895
</span>
89-
<span className="text-lg tabular-nums text-gray-10">
96+
<span className="text-base tabular-nums text-gray-10">
9097
{" "}
9198
/ {billingCycleText}
9299
</span>
93100
{isYearly ? (
94-
<p className="text-lg tabular-nums text-gray-10">
101+
<p className="text-sm tabular-nums text-gray-10">
95102
or, $
96103
<NumberFlow
97104
value={licenses * COMMERCIAL_LICENSE_LIFETIME_PRICE}
98105
/>{" "}
99106
one-time payment
100107
</p>
101108
) : (
102-
<p className="text-lg tabular-nums text-gray-10">
109+
<p className="text-sm tabular-nums text-gray-10">
103110
or, $
104111
<NumberFlow value={licenses * COMMERCIAL_LICENSE_YEARLY_PRICE} />{" "}
105112
/ year
@@ -163,21 +170,43 @@ export const CommercialCard = () => {
163170
</div>
164171
</div>
165172
</div>
173+
</div>
166174

167-
<ul className="mb-8 space-y-4">
168-
{homepageCopy.pricing.commercial.features.map((feature) => (
169-
<li
170-
key={feature}
171-
className="flex items-start text-base text-gray-12"
175+
<div className="mb-6">
176+
<ul className="space-y-3">
177+
<li className="flex items-center text-sm text-gray-12">
178+
<FontAwesomeIcon
179+
icon={faBriefcase}
180+
className="flex-shrink-0 mr-3 text-gray-12"
181+
style={{ fontSize: "14px", minWidth: "14px" }}
182+
/>
183+
<span>Commercial usage</span>
184+
<a
185+
href="/docs/commercial-license"
186+
target="_blank"
187+
rel="noopener noreferrer"
188+
className="ml-1.5 text-gray-10 hover:text-gray-12 transition-colors"
189+
aria-label="Learn more about commercial license"
172190
>
173-
<FontAwesomeIcon
174-
icon={faCheck}
175-
className="mr-3 mt-0.5 text-gray-12 flex-shrink-0"
176-
style={{ fontSize: "18px", minWidth: "18px" }}
177-
/>
178-
<span className="leading-6">{feature}</span>
179-
</li>
180-
))}
191+
<QuestionMarkIcon className="size-3.5" />
192+
</a>
193+
</li>
194+
<li className="flex items-center text-sm text-gray-12">
195+
<FontAwesomeIcon
196+
icon={faVideo}
197+
className="flex-shrink-0 mr-3 text-gray-12"
198+
style={{ fontSize: "14px", minWidth: "14px" }}
199+
/>
200+
<span>Unlimited local recordings</span>
201+
</li>
202+
<li className="flex items-center text-sm text-gray-12">
203+
<FontAwesomeIcon
204+
icon={faDownload}
205+
className="flex-shrink-0 mr-3 text-gray-12"
206+
style={{ fontSize: "14px", minWidth: "14px" }}
207+
/>
208+
<span>Export to MP4 or GIF</span>
209+
</li>
181210
</ul>
182211
</div>
183212

‎apps/web/components/pages/HomePage/Pricing/ProArt.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,7 @@ export const ProArt = memo(
4040

4141
return (
4242
<ProRive
43-
className={clsx(
44-
className,
45-
"relative bottom-5 mx-auto w-full max-w-[210px] h-[195px]",
46-
)}
43+
className={clsx(className, "mx-auto w-full max-w-[100px] h-[80px]")}
4744
/>
4845
);
4946
}),

‎apps/web/components/pages/HomePage/Pricing/ProCard.tsx‎

Lines changed: 60 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
import { Button, Switch } from "@cap/ui";
22
import { getProPlanId } from "@cap/utils";
3-
import { faCheck, faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
3+
import {
4+
faCloud,
5+
faLink,
6+
faMagic,
7+
faMinus,
8+
faPlus,
9+
faUsers,
10+
} from "@fortawesome/free-solid-svg-icons";
411
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
512
import NumberFlow from "@number-flow/react";
613
import clsx from "clsx";
7-
import { useRouter } from "next/navigation";
814
import { useRef, useState } from "react";
915
import { toast } from "sonner";
1016
import { homepageCopy } from "../../../../data/homepage-copy";
@@ -16,7 +22,6 @@ export const ProCard = () => {
1622
const [proLoading, setProLoading] = useState(false);
1723
const [guestLoading, setGuestLoading] = useState(false);
1824
const proArtRef = useRef<ProArtRef>(null);
19-
const { push } = useRouter();
2025

2126
const CAP_PRO_ANNUAL_PRICE_PER_USER = homepageCopy.pricing.pro.pricing.annual;
2227
const CAP_PRO_MONTHLY_PRICE_PER_USER =
@@ -109,30 +114,30 @@ export const ProCard = () => {
109114
{homepageCopy.pricing.pro.badge}
110115
</span>
111116
</div>
112-
<div className="md:h-[300px]">
117+
<div className="md:h-[180px]">
113118
<ProArt ref={proArtRef} />
114-
<h3 className="mb-2 text-2xl text-center">
119+
<h3 className="mb-2 text-xl font-semibold text-center">
115120
{homepageCopy.pricing.pro.title}
116121
</h3>
117-
<p className="mb-6 text-base text-center text-gray-8">
122+
<p className="mb-4 text-sm font-medium text-center text-gray-9">
118123
{homepageCopy.pricing.pro.description}
119124
</p>
120125
</div>
121126

122127
<div className="mb-6 text-center">
123-
<span className="mr-2 text-5xl tabular-nums text-gray-1">
128+
<span className="mr-2 text-3xl tabular-nums text-gray-1">
124129
$<NumberFlow suffix="/mo" value={currentTotalPricePro} />
125130
</span>
126-
<span className="text-lg tabular-nums text-gray-8">
131+
<span className="text-base tabular-nums text-gray-8">
127132
{" "}
128133
{billingCycleTextPro}
129134
</span>
130135
{isAnnually ? (
131-
<p className="text-lg text-gray-8">
136+
<p className="text-sm text-gray-8">
132137
or,{" "}
133138
<NumberFlow
134139
value={CAP_PRO_MONTHLY_PRICE_PER_USER * users}
135-
className="text-lg tabular-nums"
140+
className="text-sm tabular-nums"
136141
format={{
137142
notation: "compact",
138143
style: "currency",
@@ -145,18 +150,18 @@ export const ProCard = () => {
145150
) : (
146151
<>
147152
for{" "}
148-
<NumberFlow value={users} className="text-lg tabular-nums" />{" "}
153+
<NumberFlow value={users} className="text-sm tabular-nums" />{" "}
149154
users,{" "}
150155
</>
151156
)}
152157
billed monthly
153158
</p>
154159
) : (
155-
<p className="text-lg text-gray-8">
160+
<p className="text-sm text-gray-8">
156161
or,{" "}
157162
<NumberFlow
158163
value={CAP_PRO_ANNUAL_PRICE_PER_USER * users}
159-
className="text-lg tabular-nums"
164+
className="text-sm tabular-nums"
160165
format={{
161166
notation: "compact",
162167
style: "currency",
@@ -169,7 +174,7 @@ export const ProCard = () => {
169174
) : (
170175
<>
171176
for{" "}
172-
<NumberFlow value={users} className="text-lg tabular-nums" />{" "}
177+
<NumberFlow value={users} className="text-sm tabular-nums" />{" "}
173178
users,{" "}
174179
</>
175180
)}
@@ -237,14 +242,48 @@ export const ProCard = () => {
237242
</div>
238243
</div>
239244
</div>
245+
</div>
240246

241-
<ul className="mb-8 space-y-3 text-base">
242-
{homepageCopy.pricing.pro.features.map((feature) => (
243-
<li key={feature} className="flex items-center text-gray-1">
244-
<FontAwesomeIcon icon={faCheck} className="mr-2 text-gray-1" />
245-
{feature}
246-
</li>
247-
))}
247+
<div className="mb-6">
248+
<ul className="space-y-3">
249+
<li className="flex items-center text-sm text-gray-1">
250+
<FontAwesomeIcon
251+
icon={faCloud}
252+
className="flex-shrink-0 mr-3 text-gray-4"
253+
style={{ fontSize: "14px", minWidth: "14px" }}
254+
/>
255+
<span className="text-gray-4">
256+
Unlimited cloud storage & shareable links
257+
</span>
258+
</li>
259+
<li className="flex items-center text-sm text-gray-1">
260+
<FontAwesomeIcon
261+
icon={faMagic}
262+
className="flex-shrink-0 mr-3 text-gray-4"
263+
style={{ fontSize: "14px", minWidth: "14px" }}
264+
/>
265+
<span className="text-gray-4">
266+
Automatic AI title, transcription, summary, and chapter generation
267+
</span>
268+
</li>
269+
<li className="flex items-center text-sm">
270+
<FontAwesomeIcon
271+
icon={faLink}
272+
className="flex-shrink-0 mr-3 text-gray-4"
273+
style={{ fontSize: "14px", minWidth: "14px" }}
274+
/>
275+
<span className="text-gray-4">
276+
Connect a custom domain, e.g. cap.yourdomain.com
277+
</span>
278+
</li>
279+
<li className="flex items-center text-sm text-gray-1">
280+
<FontAwesomeIcon
281+
icon={faUsers}
282+
className="flex-shrink-0 mr-3 text-gray-4"
283+
style={{ fontSize: "14px", minWidth: "14px" }}
284+
/>
285+
<span className="text-gray-4">Shared team spaces</span>
286+
</li>
248287
</ul>
249288
</div>
250289

0 commit comments

Comments
 (0)