Skip to content

Commit b4297f4

Browse files
ameer2468ameer2468
committed
enterprise
1 parent da243dd commit b4297f4

File tree

5 files changed

+116
-49
lines changed

5 files changed

+116
-49
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: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ export const CommercialCard = () => {
172172
</div>
173173
</div>
174174

175-
<div className="mb-6">
175+
<div className="space-y-6">
176176
<ul className="space-y-3">
177177
<li className="flex items-center text-sm text-gray-12">
178178
<FontAwesomeIcon
@@ -208,18 +208,20 @@ export const CommercialCard = () => {
208208
<span>Export to MP4 or GIF</span>
209209
</li>
210210
</ul>
211-
</div>
212211

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>
212+
<Button
213+
disabled={commercialLoading}
214+
onClick={openCommercialCheckout}
215+
variant="dark"
216+
size="lg"
217+
className="w-full font-medium"
218+
aria-label="Purchase Commercial License"
219+
>
220+
{commercialLoading
221+
? "Loading..."
222+
: homepageCopy.pricing.commercial.cta}
223+
</Button>
224+
</div>
223225
</div>
224226
);
225227
};

‎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: 56 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@ import {
77
faUsers,
88
} from "@fortawesome/free-solid-svg-icons";
99
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
10+
import { useRef } from "react";
11+
import { EnterpriseArt, EnterpriseArtRef } from "./EnterpriseArt";
1012

1113
export const EnterpriseCard = () => {
14+
const enterpriseArtRef = useRef<EnterpriseArtRef>(null);
1215
// Enterprise features data
1316
const enterpriseFeatures = [
1417
{
@@ -42,47 +45,64 @@ export const EnterpriseCard = () => {
4245
};
4346

4447
return (
45-
<div 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">
46-
<div className="flex relative z-10 flex-col justify-between h-full">
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">
4758
<div>
48-
<div className="md:h-[180px]">
49-
<h3 className="mb-2 text-xl font-semibold text-center text-gray-12">
50-
Cap for Enterprise
51-
</h3>
52-
<p className="mb-4 text-sm font-medium text-center text-gray-11">
53-
Deploy Cap across your organization with enterprise-grade
54-
features, dedicated support, and custom integrations.
55-
</p>
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>
5670
</div>
71+
</div>
5772

58-
<div className="mb-6">
59-
<ul className="space-y-3">
60-
{enterpriseFeatures.slice(0, 4).map((feature) => (
61-
<li
62-
key={feature.label}
63-
className="flex items-center text-sm text-gray-12"
64-
>
65-
<FontAwesomeIcon
66-
icon={feature.icon}
67-
className="flex-shrink-0 mr-3 text-gray-10"
68-
style={{ fontSize: "14px", minWidth: "14px" }}
69-
/>
70-
<span className="text-gray-11">{feature.label}</span>
71-
</li>
72-
))}
73-
</ul>
74-
</div>
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>
7577
</div>
7678

77-
<Button
78-
variant="gray"
79-
size="lg"
80-
onClick={handleBookCall}
81-
className="w-full font-medium"
82-
aria-label="Book a Call for Enterprise"
83-
>
84-
Book a Call
85-
</Button>
79+
<div className="space-y-6">
80+
<ul className="space-y-3">
81+
{enterpriseFeatures.slice(0, 4).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>
86106
</div>
87107
</div>
88108
);

‎apps/web/public/rive/pricing.riv‎

6.34 KB
Binary file not shown.

0 commit comments

Comments
 (0)