Skip to content

Commit b917fe1

Browse files
ameer2468richiemcilroy
ameer2468
and
richiemcilroy
authored
improvement: enterprise card (#1046)
* wip * table * Update PricingPage.tsx * feat: Small revamp for pricing page UI and feature lists * wip * wip * enterprise * feat: Copy changes --------- Co-authored-by: Richie McIlroy <[email protected]>
1 parent 10bab1f commit b917fe1

File tree

8 files changed

+224
-137
lines changed

8 files changed

+224
-137
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const CommercialArt = memo(
4141
return (
4242
<CommercialRive
4343
className={clsx(
44-
"w-full max-w-[100px] mx-auto h-[80px]",
44+
"w-full max-w-[100px] mx-auto h-[90px]",
4545
props.className,
4646
)}
4747
/>

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

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Button, Switch } from "@cap/ui";
22
import {
33
faBriefcase,
44
faDownload,
5+
faEdit,
56
faMinus,
67
faPlus,
78
faVideo,
@@ -115,30 +116,30 @@ export const CommercialCard = () => {
115116
</div>
116117

117118
<div className="flex flex-wrap gap-5 justify-center items-center p-5 my-8 w-full rounded-xl border xs:gap-3 xs:p-3 xs:rounded-full xs:justify-between bg-gray-3 border-gray-4">
118-
<div className="flex gap-3 justify-center items-center">
119-
<p className="text-base text-gray-12">
119+
<div className="flex gap-2 justify-center items-center">
120+
<p className="text-sm text-gray-12">
120121
{homepageCopy.pricing.commercial.labels.licenses}
121122
</p>
122123
<div className="flex items-center">
123124
<Button
124125
onClick={decrementLicenses}
125-
className="px-1.5 py-1.5 bg-gray-12 hover:bg-gray-11 min-w-fit h-fit"
126+
className="p-1 bg-gray-12 hover:bg-gray-11 min-w-fit h-fit"
126127
aria-label="Decrease license count"
127128
>
128129
<FontAwesomeIcon
129130
icon={faMinus}
130-
className="text-gray-1 size-3"
131+
className="text-gray-1 size-2"
131132
/>
132133
</Button>
133-
<span className="w-8 font-medium tabular-nums text-center text-gray-12">
134+
<span className="w-5 font-medium tabular-nums text-center text-gray-12">
134135
<NumberFlow value={licenses} />
135136
</span>
136137
<Button
137138
onClick={incrementLicenses}
138-
className="px-1.5 py-1.5 bg-gray-12 hover:bg-gray-11 min-w-fit h-fit"
139+
className="p-1 bg-gray-12 hover:bg-gray-11 min-w-fit h-fit"
139140
aria-label="Increase license count"
140141
>
141-
<FontAwesomeIcon icon={faPlus} className="text-gray-1 size-3" />
142+
<FontAwesomeIcon icon={faPlus} className="text-gray-1 size-2" />
142143
</Button>
143144
</div>
144145
</div>
@@ -147,7 +148,7 @@ export const CommercialCard = () => {
147148
<div className="flex gap-2 items-center">
148149
<span
149150
className={clsx(
150-
"text-md",
151+
"text-sm",
151152
isYearly ? "font-medium text-gray-12" : "text-gray-10",
152153
)}
153154
>
@@ -161,7 +162,7 @@ export const CommercialCard = () => {
161162
/>
162163
<span
163164
className={clsx(
164-
"text-md",
165+
"text-sm",
165166
!isYearly ? "font-medium text-gray-12" : "text-gray-10",
166167
)}
167168
>
@@ -172,8 +173,16 @@ export const CommercialCard = () => {
172173
</div>
173174
</div>
174175

175-
<div className="mb-6">
176+
<div className="space-y-6">
176177
<ul className="space-y-3">
178+
<li className="flex items-center text-sm text-gray-12">
179+
<FontAwesomeIcon
180+
icon={faEdit}
181+
className="flex-shrink-0 mr-3 text-gray-12"
182+
style={{ fontSize: "14px", minWidth: "14px" }}
183+
/>
184+
<span>Studio Mode with full editor</span>
185+
</li>
177186
<li className="flex items-center text-sm text-gray-12">
178187
<FontAwesomeIcon
179188
icon={faBriefcase}
@@ -197,7 +206,9 @@ export const CommercialCard = () => {
197206
className="flex-shrink-0 mr-3 text-gray-12"
198207
style={{ fontSize: "14px", minWidth: "14px" }}
199208
/>
200-
<span>Unlimited local recordings</span>
209+
<span>
210+
Unlimited local recordings, shareable links up to 5 minutes
211+
</span>
201212
</li>
202213
<li className="flex items-center text-sm text-gray-12">
203214
<FontAwesomeIcon
@@ -208,18 +219,20 @@ export const CommercialCard = () => {
208219
<span>Export to MP4 or GIF</span>
209220
</li>
210221
</ul>
211-
</div>
212222

213-
<Button
214-
disabled={commercialLoading}
215-
onClick={openCommercialCheckout}
216-
variant="dark"
217-
size="lg"
218-
className="w-full font-medium"
219-
aria-label="Purchase Commercial License"
220-
>
221-
{commercialLoading ? "Loading..." : homepageCopy.pricing.commercial.cta}
222-
</Button>
223+
<Button
224+
disabled={commercialLoading}
225+
onClick={openCommercialCheckout}
226+
variant="dark"
227+
size="lg"
228+
className="w-full font-medium"
229+
aria-label="Purchase Commercial License"
230+
>
231+
{commercialLoading
232+
? "Loading..."
233+
: homepageCopy.pricing.commercial.cta}
234+
</Button>
235+
</div>
223236
</div>
224237
);
225238
};

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Fit, Layout, useRive } from "@rive-app/react-canvas";
2+
import clsx from "clsx";
3+
import { forwardRef, memo, useImperativeHandle } from "react";
4+
5+
export interface EnterpriseArtRef {
6+
playHoverAnimation: () => void;
7+
playDefaultAnimation: () => void;
8+
}
9+
10+
interface EnterpriseArtProps {
11+
className?: string;
12+
}
13+
14+
export const EnterpriseArt = memo(
15+
forwardRef<EnterpriseArtRef, EnterpriseArtProps>(({ className }, ref) => {
16+
const { rive, RiveComponent: EnterpriseRive } = useRive({
17+
src: "/rive/pricing.riv",
18+
artboard: "enterprise",
19+
animations: "idle",
20+
autoplay: false,
21+
layout: new Layout({
22+
fit: Fit.Contain,
23+
}),
24+
});
25+
26+
useImperativeHandle(ref, () => ({
27+
playHoverAnimation: () => {
28+
if (rive) {
29+
rive.play("out");
30+
}
31+
},
32+
playDefaultAnimation: () => {
33+
if (rive) {
34+
rive.play("idle");
35+
}
36+
},
37+
}));
38+
39+
return (
40+
<EnterpriseRive
41+
className={clsx(className, "mx-auto w-full max-w-[200px] h-[120px]")}
42+
/>
43+
);
44+
}),
45+
);

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

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { Button } from "@cap/ui";
2+
import {
3+
faDownload,
4+
faHandshake,
5+
faServer,
6+
faShield,
7+
faUsers,
8+
} from "@fortawesome/free-solid-svg-icons";
9+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
10+
import { useRef } from "react";
11+
import { EnterpriseArt, type EnterpriseArtRef } from "./EnterpriseArt";
12+
13+
export const EnterpriseCard = () => {
14+
const enterpriseArtRef = useRef<EnterpriseArtRef>(null);
15+
// Enterprise features data
16+
const enterpriseFeatures = [
17+
{
18+
icon: faShield,
19+
label: "SLAs & Priority Support",
20+
},
21+
{
22+
icon: faDownload,
23+
label: "Loom Video Importer",
24+
},
25+
{
26+
icon: faHandshake,
27+
label: "Bulk Discounts",
28+
},
29+
{
30+
icon: faServer,
31+
label: "Managed self-hosting",
32+
},
33+
{
34+
icon: faUsers,
35+
label: "SAML SSO Login",
36+
},
37+
{
38+
icon: faShield,
39+
label: "Advanced Security Controls",
40+
},
41+
];
42+
43+
const handleBookCall = () => {
44+
window.open("https://cal.com/cap.so/15min", "_blank");
45+
};
46+
47+
return (
48+
<div
49+
onMouseEnter={() => {
50+
enterpriseArtRef.current?.playHoverAnimation();
51+
}}
52+
onMouseLeave={() => {
53+
enterpriseArtRef.current?.playDefaultAnimation();
54+
}}
55+
className="flex overflow-hidden relative flex-col flex-1 justify-between p-8 text-black rounded-2xl border shadow-lg bg-gray-1 border-gray-5"
56+
>
57+
<div className="flex relative z-10 flex-col flex-1 justify-between space-y-8 h-full">
58+
<div>
59+
<div className="space-y-5 min-h-fit">
60+
<EnterpriseArt ref={enterpriseArtRef} />
61+
<div>
62+
<h3 className="mb-2 text-xl font-semibold text-center text-gray-12">
63+
Cap for Enterprise
64+
</h3>
65+
<p className="mb-4 text-sm font-medium text-center text-gray-11">
66+
Deploy Cap across your organization with enterprise-grade
67+
features, dedicated support, and custom integrations.
68+
</p>
69+
</div>
70+
</div>
71+
</div>
72+
73+
<div className="flex flex-wrap items-center p-3 w-full rounded-full border bg-gray-3 border-gray-4">
74+
<p className="w-full text-lg font-medium text-center text-black">
75+
Contact us for a quote
76+
</p>
77+
</div>
78+
79+
<div className="space-y-6">
80+
<ul className="space-y-3">
81+
{enterpriseFeatures.map((feature) => (
82+
<li
83+
key={feature.label}
84+
className="flex items-center text-sm text-gray-12"
85+
>
86+
<FontAwesomeIcon
87+
icon={feature.icon}
88+
className="flex-shrink-0 mr-3 text-gray-10"
89+
style={{ fontSize: "14px", minWidth: "14px" }}
90+
/>
91+
<span className="text-gray-11">{feature.label}</span>
92+
</li>
93+
))}
94+
</ul>
95+
96+
<Button
97+
variant="gray"
98+
size="lg"
99+
onClick={handleBookCall}
100+
className="w-full font-medium"
101+
aria-label="Book a Call for Enterprise"
102+
>
103+
Book a Call
104+
</Button>
105+
</div>
106+
</div>
107+
</div>
108+
);
109+
};

0 commit comments

Comments
 (0)