Skip to content

Commit 738c677

Browse files
vfanelleValerie Fanelle
vfanelle
and
Valerie Fanelle
authored
Add sales form to Contact Us > Contact Sales for Emmit (#561)
* Add sales form to Contact Us > Contact Sales for Emmit * Fixing typescript error --------- Co-authored-by: Valerie Fanelle <[email protected]>
1 parent f1d8161 commit 738c677

File tree

2 files changed

+124
-60
lines changed

2 files changed

+124
-60
lines changed

‎app/_components/quick-start-card.tsx‎

Lines changed: 48 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ type QuickStartCardProps = {
1212
icon: React.ElementType;
1313
title: string;
1414
description: string;
15-
href: string;
15+
href?: string;
16+
onClick?: () => void;
1617
code?: string;
1718
};
1819

@@ -21,8 +22,53 @@ export function QuickStartCard({
2122
title,
2223
description,
2324
href,
25+
onClick,
2426
code,
2527
}: QuickStartCardProps) {
28+
const content = (
29+
<>
30+
<CardHeader className="flex flex-row items-center gap-3 p-6">
31+
<div className="rounded-full bg-[#ee175e]/10 p-2">
32+
<Icon className="h-5 w-5 text-[#ee175e]" />
33+
</div>
34+
<CardTitle className="text-gray-900 text-xl tracking-tight dark:text-white">
35+
{title}
36+
</CardTitle>
37+
</CardHeader>
38+
<CardContent className="p-6 pt-0">
39+
<p className="text-gray-600 text-sm leading-relaxed dark:text-gray-300">
40+
{description}
41+
</p>
42+
{code && (
43+
<pre className="mt-1 rounded-md bg-gray-100 p-1 text-gray-800 text-sm dark:bg-gray-900 dark:text-gray-300">
44+
<code>{code}</code>
45+
</pre>
46+
)}
47+
</CardContent>
48+
</>
49+
);
50+
51+
let wrapper: React.ReactElement | null = null;
52+
if (onClick) {
53+
wrapper = (
54+
<button
55+
className="block h-full w-full text-left"
56+
onClick={onClick}
57+
type="button"
58+
>
59+
{content}
60+
</button>
61+
);
62+
} else if (href) {
63+
wrapper = (
64+
<Link className="block h-full" href={href}>
65+
{content}
66+
</Link>
67+
);
68+
} else {
69+
wrapper = null;
70+
}
71+
2672
return (
2773
<motion.div
2874
whileHover={{
@@ -32,26 +78,7 @@ export function QuickStartCard({
3278
whileTap={{ scale: 0.98 }}
3379
>
3480
<Card className="h-full border-gray-800 bg-white/80 backdrop-blur-xs transition-all hover:border-[#ee175e]/30 dark:border-gray-800 dark:bg-[rgba(17,17,17,0.8)]">
35-
<Link className="block h-full" href={href}>
36-
<CardHeader className="flex flex-row items-center gap-3 p-6">
37-
<div className="rounded-full bg-[#ee175e]/10 p-2">
38-
<Icon className="h-5 w-5 text-[#ee175e]" />
39-
</div>
40-
<CardTitle className="text-gray-900 text-xl tracking-tight dark:text-white">
41-
{title}
42-
</CardTitle>
43-
</CardHeader>
44-
<CardContent className="p-6 pt-0">
45-
<p className="text-gray-600 text-sm leading-relaxed dark:text-gray-300">
46-
{description}
47-
</p>
48-
{code && (
49-
<pre className="mt-1 rounded-md bg-gray-100 p-1 text-gray-800 text-sm dark:bg-gray-900 dark:text-gray-300">
50-
<code>{code}</code>
51-
</pre>
52-
)}
53-
</CardContent>
54-
</Link>
81+
{wrapper}
5582
</Card>
5683
</motion.div>
5784
);

‎app/en/home/contact-us/contact-cards.tsx‎

Lines changed: 76 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,85 @@
11
"use client";
22

3-
import { Discord, Github } from "@arcadeai/design-system";
3+
import {
4+
Dialog,
5+
DialogContent,
6+
Discord,
7+
Github,
8+
} from "@arcadeai/design-system";
49
import { HeartPulse, Mail, Shield, Users } from "lucide-react";
10+
import { useEffect, useRef, useState } from "react";
511
import { QuickStartCard } from "../../../_components/quick-start-card";
612

713
export function ContactCards() {
14+
const [isSalesModalOpen, setIsSalesModalOpen] = useState(false);
15+
const scriptLoadedRef = useRef(false);
16+
17+
useEffect(() => {
18+
// Load HubSpot script once
19+
if (!scriptLoadedRef.current) {
20+
const script = document.createElement("script");
21+
script.src = "https://js-na2.hsforms.net/forms/embed/39979532.js";
22+
script.defer = true;
23+
document.body.appendChild(script);
24+
scriptLoadedRef.current = true;
25+
}
26+
}, []);
27+
828
return (
9-
<div className="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
10-
<QuickStartCard
11-
description="Get help with technical issues, account questions, and general inquiries from our support team. Email support is available for customers on paid plans."
12-
href="mailto:[email protected]"
13-
icon={Mail}
14-
title="Email Support"
15-
/>
16-
<QuickStartCard
17-
description="Discuss enterprise plans, pricing, and how Arcade can help your organization build better, safer agents."
18-
href="mailto:[email protected]"
19-
icon={Users}
20-
title="Contact Sales"
21-
/>
22-
<QuickStartCard
23-
description="Join our Discord community for real-time help from the community, to connect with other developers, and stay updated on new features and announcements."
24-
href="https://discord.gg/GUZEMpEZ9p"
25-
icon={Discord}
26-
title="Discord Community"
27-
/>
28-
<QuickStartCard
29-
description="Report bugs, request features, and contribute to Arcade. You can report problems via Github Issues or start a discussion on Github Discussions."
30-
href="https://github.com/ArcadeAI/arcade-mcp"
31-
icon={Github}
32-
title="GitHub Issues & Discussions"
33-
/>
34-
<QuickStartCard
35-
description="Report security vulnerabilities responsibly. Learn about our security research program and disclosure process."
36-
href="/home/security"
37-
icon={Shield}
38-
title="Security Research"
39-
/>
40-
<QuickStartCard
41-
description="Check the current status of Arcade's services, view incident history, and subscribe to updates."
42-
href="https://status.arcade.dev"
43-
icon={HeartPulse}
44-
title="System Status"
45-
/>
46-
</div>
29+
<>
30+
<div className="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
31+
<QuickStartCard
32+
description="Get help with technical issues, account questions, and general inquiries from our support team. Email support is available for customers on paid plans."
33+
href="mailto:[email protected]"
34+
icon={Mail}
35+
title="Email Support"
36+
/>
37+
<QuickStartCard
38+
description="Discuss enterprise plans, pricing, and how Arcade can help your organization build better, safer agents."
39+
icon={Users}
40+
onClick={() => setIsSalesModalOpen(true)}
41+
title="Contact Sales"
42+
/>
43+
<QuickStartCard
44+
description="Join our Discord community for real-time help from the community, to connect with other developers, and stay updated on new features and announcements."
45+
href="https://discord.gg/GUZEMpEZ9p"
46+
icon={Discord}
47+
title="Discord Community"
48+
/>
49+
<QuickStartCard
50+
description="Report bugs, request features, and contribute to Arcade. You can report problems via Github Issues or start a discussion on Github Discussions."
51+
href="https://github.com/ArcadeAI/arcade-mcp"
52+
icon={Github}
53+
title="GitHub Issues & Discussions"
54+
/>
55+
<QuickStartCard
56+
description="Report security vulnerabilities responsibly. Learn about our security research program and disclosure process."
57+
href="/home/security"
58+
icon={Shield}
59+
title="Security Research"
60+
/>
61+
<QuickStartCard
62+
description="Check the current status of Arcade's services, view incident history, and subscribe to updates."
63+
href="https://status.arcade.dev"
64+
icon={HeartPulse}
65+
title="System Status"
66+
/>
67+
</div>
68+
<Dialog
69+
onOpenChange={(open) => !open && setIsSalesModalOpen(false)}
70+
open={isSalesModalOpen}
71+
>
72+
<DialogContent className="border-gray-800 bg-gray-900 sm:max-w-[500px]">
73+
<div className="py-4">
74+
<div
75+
className="hs-form-frame"
76+
data-form-id="aa1d8f09-6368-461d-bb27-d49bc056e3df"
77+
data-portal-id="39979532"
78+
data-region="na2"
79+
/>
80+
</div>
81+
</DialogContent>
82+
</Dialog>
83+
</>
4784
);
4885
}

0 commit comments

Comments
 (0)