Dokploy/website
1
0
Fork 0
mirror of https://github.com/Dokploy/website.git synced 2026-06-15 20:25:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement new contact form and modal for improved user inquiries

Browse Source 
- Introduced a new ContactForm component to streamline user inquiries with validation and submission handling.
- Added ContactFormModal to encapsulate the contact form in a modal dialog, enhancing user experience.
- Updated the Pricing component to include a button that opens the contact modal for enterprise inquiries.
- Refactored the ContactPage to utilize the new ContactForm component, simplifying the code and improving maintainability.
- Updated TypeScript configuration to include additional type definitions for better type safety.
This commit is contained in:
Mauricio Siu
2025-12-08 14:37:47 -06:00
parent 0a5e3a160e
commit 66bcafa9cc
7 changed files with 775 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

372
apps/website/app/contact/page.tsx
View File

@@ -1,147 +1,13 @@
"use client";
import { Container } from "@/components/Container";
import { trackGAEvent } from "@/components/analitycs";
import { ContactForm } from "@/components/ContactForm";
import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";
import { useState } from "react";
interface ContactFormData {
inquiryType: "" | "support" | "sales" | "other";
deploymentType: "" | "cloud" | "self-hosted";
firstName: string;
lastName: string;
email: string;
company: string;
message: string;
}
export default function ContactPage() {
const [isSubmitting, setIsSubmitting] = useState(false);
const [isSubmitted, setIsSubmitted] = useState(false);
const [formData, setFormData] = useState<ContactFormData>({
inquiryType: "",
deploymentType: "",
firstName: "",
lastName: "",
email: "",
company: "",
message: "",
});
const [errors, setErrors] = useState<Record<string, string>>({});
const validateForm = (): boolean => {
const newErrors: Record<string, string> = {};
if (!formData.inquiryType) {
newErrors.inquiryType = "Please select what we can help you with";
}
if (formData.inquiryType === "support" && !formData.deploymentType) {
newErrors.deploymentType = "Please select your deployment type";
}
if (!formData.firstName.trim()) {
newErrors.firstName = "First name is required";
}
if (!formData.lastName.trim()) {
newErrors.lastName = "Last name is required";
}
if (!formData.email.trim()) {
newErrors.email = "Email is required";
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
newErrors.email = "Please enter a valid email address";
}
if (!formData.company.trim()) {
newErrors.company = "Company name is required";
}
if (!formData.message.trim()) {
newErrors.message = "Message is required";
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!validateForm()) {
return;
}
// Prevent submission for self-hosted support requests
if (
formData.inquiryType === "support" &&
formData.deploymentType === "self-hosted"
) {
return;
}
setIsSubmitting(true);
try {
const response = await fetch("/api/contact", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
});
if (response.ok) {
trackGAEvent({
action: "Contact Form Submitted",
category: "Contact",
label: formData.inquiryType,
});
setFormData({
inquiryType: "",
deploymentType: "",
firstName: "",
lastName: "",
email: "",
company: "",
message: "",
});
setErrors({});
setIsSubmitted(true);
} else {
throw new Error("Failed to submit form");
}
} catch (error) {
console.error("Error submitting form:", error);
alert("There was an error sending your message. Please try again.");
} finally {
setIsSubmitting(false);
}
};
const handleInputChange = (field: keyof ContactFormData, value: any) => {
setFormData((prev) => {
const updated = { ...prev, [field]: value };
// Reset deploymentType when inquiryType changes and is not support
if (field === "inquiryType" && value !== "support") {
updated.deploymentType = "";
}
return updated;
});
if (errors[field]) {
setErrors((prev) => {
const newErrors = { ...prev };
delete newErrors[field];
return newErrors;
});
}
};
if (isSubmitted) {
return (
@@ -156,9 +22,13 @@ export default function ContactPage() {
possible.
</p>
<div className="mt-10">
<Button onClick={() => setIsSubmitted(false)} variant="outline">
<button
type="button"
onClick={() => setIsSubmitted(false)}
className="rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground"
>
Send Another Message
</Button>
</button>
</div>
</div>
</Container>
@@ -192,231 +62,9 @@ export default function ContactPage() {
</p>
</div>
<form onSubmit={handleSubmit} className="mt-16 space-y-6">
<div className="space-y-2">
<label
htmlFor="inquiryType"
className="block text-sm font-medium text-foreground"
>
What can we help you with today?{" "}
<span className="text-red-500">*</span>
</label>
<Select
value={formData.inquiryType}
onValueChange={(value) =>
handleInputChange(
"inquiryType",
value as "support" | "sales" | "other",
)
}
>
<SelectTrigger className="bg-input">
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
<SelectItem value="support">Support</SelectItem>
<SelectItem value="sales">Sales</SelectItem>
<SelectItem value="other">Other</SelectItem>
</SelectContent>
</Select>
{errors.inquiryType && (
<p className="text-sm text-red-600">{errors.inquiryType}</p>
)}
</div>
{formData.inquiryType === "support" && (
<div className="space-y-2">
<label
htmlFor="deploymentType"
className="block text-sm font-medium text-foreground"
>
What version of Dokploy are you using?{" "}
<span className="text-red-500">*</span>
</label>
<Select
value={formData.deploymentType}
onValueChange={(value) =>
handleInputChange(
"deploymentType",
value as "cloud" | "self-hosted",
)
}
>
<SelectTrigger className="bg-input">
<SelectValue placeholder="Select deployment type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="cloud">Cloud Version</SelectItem>
<SelectItem value="self-hosted">Self Hosted</SelectItem>
</SelectContent>
</Select>
{errors.deploymentType && (
<p className="text-sm text-red-600">
{errors.deploymentType}
</p>
)}
{formData.deploymentType === "self-hosted" && (
<div className="mt-4 rounded-lg border border-amber-500/50 bg-amber-500/10 p-4">
<h3 className="mb-2 text-sm font-semibold text-amber-500">
Self-Hosted Support
</h3>
<p className="mb-3 text-sm text-muted-foreground">
We currently don't provide direct support for self-hosted
deployments through this form. However, our community is
here to help!
</p>
<div className="space-y-2 text-sm">
<p className="text-muted-foreground">
Please use one of these channels to get assistance:
</p>
<ul className="ml-4 list-disc space-y-1 text-muted-foreground">
<li>
Join our{" "}
<a
href="https://discord.gg/2tBnJ3jDJc"
target="_blank"
rel="noopener noreferrer"
className="text-primary underline hover:text-primary/80"
>
Discord community
</a>{" "}
for real-time help
</li>
<li>
Open a discussion on{" "}
<a
href="https://github.com/Dokploy/dokploy/discussions"
target="_blank"
rel="noopener noreferrer"
className="text-primary underline hover:text-primary/80"
>
GitHub Discussions
</a>
</li>
</ul>
</div>
</div>
)}
</div>
)}
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
<div className="space-y-2">
<label
htmlFor="firstName"
className="block text-sm font-medium text-foreground"
>
First Name <span className="text-red-500">*</span>
</label>
<Input
id="firstName"
type="text"
value={formData.firstName}
onChange={(e) =>
handleInputChange("firstName", e.target.value)
}
placeholder="Your first name"
/>
{errors.firstName && (
<p className="text-sm text-red-600">{errors.firstName}</p>
)}
</div>
<div className="space-y-2">
<label
htmlFor="lastName"
className="block text-sm font-medium text-foreground"
>
Last Name <span className="text-red-500">*</span>
</label>
<Input
id="lastName"
type="text"
value={formData.lastName}
onChange={(e) =>
handleInputChange("lastName", e.target.value)
}
placeholder="Your last name"
/>
{errors.lastName && (
<p className="text-sm text-red-600">{errors.lastName}</p>
)}
</div>
</div>
<div className="space-y-2">
<label
htmlFor="email"
className="block text-sm font-medium text-foreground"
>
Email <span className="text-red-500">*</span>
</label>
<Input
id="email"
type="email"
value={formData.email}
onChange={(e) => handleInputChange("email", e.target.value)}
placeholder="your.email@company.com"
/>
{errors.email && (
<p className="text-sm text-red-600">{errors.email}</p>
)}
</div>
<div className="space-y-2">
<label
htmlFor="company"
className="block text-sm font-medium text-foreground"
>
Company Name <span className="text-red-500">*</span>
</label>
<Input
id="company"
type="text"
value={formData.company}
onChange={(e) => handleInputChange("company", e.target.value)}
placeholder="Your company name"
/>
{errors.company && (
<p className="text-sm text-red-600">{errors.company}</p>
)}
</div>
<div className="space-y-2">
<label
htmlFor="message"
className="block text-sm font-medium text-foreground"
>
How can we help? <span className="text-red-500">*</span>
</label>
<textarea
id="message"
value={formData.message}
onChange={(e) => handleInputChange("message", e.target.value)}
placeholder="Tell us more about your inquiry..."
rows={6}
className="flex w-full resize-none rounded-md border border-input bg-background bg-input px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
{errors.message && (
<p className="text-sm text-red-600">{errors.message}</p>
)}
</div>
<div className="flex justify-end">
<Button
type="submit"
disabled={
isSubmitting ||
(formData.inquiryType === "support" &&
formData.deploymentType === "self-hosted")
}
className="min-w-[120px]"
>
{isSubmitting ? "Sending..." : "Send Message"}
</Button>
</div>
</form>
<div className="mt-16">
<ContactForm onSuccess={() => setIsSubmitted(true)} />
</div>
</div>
</Container>
</div>

421
apps/website/components/ContactForm.tsx Normal file
View File

@@ -0,0 +1,421 @@
"use client";
import { trackGAEvent } from "@/components/analitycs";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { useState } from "react";
interface ContactFormData {
inquiryType: "" | "support" | "sales" | "other";
deploymentType: "" | "cloud" | "self-hosted";
firstName: string;
lastName: string;
email: string;
company: string;
message: string;
}
interface ContactFormProps {
defaultInquiryType?: "" | "support" | "sales" | "other";
onSuccess?: () => void;
onCancel?: () => void;
showCancelButton?: boolean;
hideInquiryType?: boolean;
}
export function ContactForm({
defaultInquiryType = "",
onSuccess,
onCancel,
showCancelButton = false,
hideInquiryType = false,
}: ContactFormProps) {
const [isSubmitting, setIsSubmitting] = useState(false);
const [isSubmitted, setIsSubmitted] = useState(false);
const [formData, setFormData] = useState<ContactFormData>({
inquiryType: defaultInquiryType || "",
deploymentType: "",
firstName: "",
lastName: "",
email: "",
company: "",
message: "",
});
const [errors, setErrors] = useState<Record<string, string>>({});
const validateForm = (): boolean => {
const newErrors: Record<string, string> = {};
if (!hideInquiryType && !formData.inquiryType) {
newErrors.inquiryType = "Please select what we can help you with";
}
if (formData.inquiryType === "support" && !formData.deploymentType) {
newErrors.deploymentType = "Please select your deployment type";
}
if (!formData.firstName.trim()) {
newErrors.firstName = "First name is required";
}
if (!formData.lastName.trim()) {
newErrors.lastName = "Last name is required";
}
if (!formData.email.trim()) {
newErrors.email = "Email is required";
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
newErrors.email = "Please enter a valid email address";
}
if (!formData.company.trim()) {
newErrors.company = "Company name is required";
}
if (!formData.message.trim()) {
newErrors.message = "Message is required";
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!validateForm()) {
return;
}
// Prevent submission for self-hosted support requests
if (
formData.inquiryType === "support" &&
formData.deploymentType === "self-hosted"
) {
return;
}
setIsSubmitting(true);
try {
const response = await fetch("/api/contact", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
});
if (response.ok) {
trackGAEvent({
action: "Contact Form Submitted",
category: "Contact",
label: formData.inquiryType,
});
setFormData({
inquiryType: defaultInquiryType || "",
deploymentType: "",
firstName: "",
lastName: "",
email: "",
company: "",
message: "",
});
setErrors({});
setIsSubmitted(true);
if (onSuccess) {
onSuccess();
}
} else {
throw new Error("Failed to submit form");
}
} catch (error) {
console.error("Error submitting form:", error);
alert("There was an error sending your message. Please try again.");
} finally {
setIsSubmitting(false);
}
};
const handleInputChange = (field: keyof ContactFormData, value: any) => {
setFormData((prev) => {
const updated = { ...prev, [field]: value };
// Reset deploymentType when inquiryType changes and is not support
if (field === "inquiryType" && value !== "support") {
updated.deploymentType = "";
}
return updated;
});
if (errors[field]) {
setErrors((prev) => {
const newErrors = { ...prev };
delete newErrors[field];
return newErrors;
});
}
};
if (isSubmitted) {
return (
<div className="text-center">
<h2 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
Thank you for contacting us!
</h2>
<p className="mt-4 text-lg leading-8 text-muted-foreground">
We've received your message and will get back to you as soon as
possible.
</p>
{onCancel && (
<div className="mt-6">
<Button onClick={onCancel} variant="outline">
Close
</Button>
</div>
)}
</div>
);
}
return (
<form onSubmit={handleSubmit} className="space-y-6">
{!hideInquiryType && (
<div className="space-y-2">
<label
htmlFor="inquiryType"
className="block text-sm font-medium text-foreground"
>
What can we help you with today?{" "}
<span className="text-red-500">*</span>
</label>
<Select
value={formData.inquiryType}
onValueChange={(value) =>
handleInputChange(
"inquiryType",
value as "support" | "sales" | "other",
)
}
>
<SelectTrigger className="bg-input">
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
<SelectItem value="support">Support</SelectItem>
<SelectItem value="sales">Sales</SelectItem>
<SelectItem value="other">Other</SelectItem>
</SelectContent>
</Select>
{errors.inquiryType && (
<p className="text-sm text-red-600">{errors.inquiryType}</p>
)}
</div>
)}
{formData.inquiryType === "support" && (
<div className="space-y-2">
<label
htmlFor="deploymentType"
className="block text-sm font-medium text-foreground"
>
What version of Dokploy are you using?{" "}
<span className="text-red-500">*</span>
</label>
<Select
value={formData.deploymentType}
onValueChange={(value) =>
handleInputChange(
"deploymentType",
value as "cloud" | "self-hosted",
)
}
>
<SelectTrigger className="bg-input">
<SelectValue placeholder="Select deployment type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="cloud">Cloud Version</SelectItem>
<SelectItem value="self-hosted">Self Hosted</SelectItem>
</SelectContent>
</Select>
{errors.deploymentType && (
<p className="text-sm text-red-600">
{errors.deploymentType}
</p>
)}
{formData.deploymentType === "self-hosted" && (
<div className="mt-4 rounded-lg border border-amber-500/50 bg-amber-500/10 p-4">
<h3 className="mb-2 text-sm font-semibold text-amber-500">
Self-Hosted Support
</h3>
<p className="mb-3 text-sm text-muted-foreground">
We currently don't provide direct support for self-hosted
deployments through this form. However, our community is here to
help!
</p>
<div className="space-y-2 text-sm">
<p className="text-muted-foreground">
Please use one of these channels to get assistance:
</p>
<ul className="ml-4 list-disc space-y-1 text-muted-foreground">
<li>
Join our{" "}
<a
href="https://discord.gg/2tBnJ3jDJc"
target="_blank"
rel="noopener noreferrer"
className="text-primary underline hover:text-primary/80"
>
Discord community
</a>{" "}
for real-time help
</li>
<li>
Open a discussion on{" "}
<a
href="https://github.com/Dokploy/dokploy/discussions"
target="_blank"
rel="noopener noreferrer"
className="text-primary underline hover:text-primary/80"
>
GitHub Discussions
</a>
</li>
</ul>
</div>
</div>
)}
</div>
)}
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
<div className="space-y-2">
<label
htmlFor="firstName"
className="block text-sm font-medium text-foreground"
>
First Name <span className="text-red-500">*</span>
</label>
<Input
id="firstName"
type="text"
value={formData.firstName}
onChange={(e) =>
handleInputChange("firstName", e.target.value)
}
placeholder="Your first name"
/>
{errors.firstName && (
<p className="text-sm text-red-600">{errors.firstName}</p>
)}
</div>
<div className="space-y-2">
<label
htmlFor="lastName"
className="block text-sm font-medium text-foreground"
>
Last Name <span className="text-red-500">*</span>
</label>
<Input
id="lastName"
type="text"
value={formData.lastName}
onChange={(e) =>
handleInputChange("lastName", e.target.value)
}
placeholder="Your last name"
/>
{errors.lastName && (
<p className="text-sm text-red-600">{errors.lastName}</p>
)}
</div>
</div>
<div className="space-y-2">
<label
htmlFor="email"
className="block text-sm font-medium text-foreground"
>
Email <span className="text-red-500">*</span>
</label>
<Input
id="email"
type="email"
value={formData.email}
onChange={(e) => handleInputChange("email", e.target.value)}
placeholder="your.email@company.com"
/>
{errors.email && (
<p className="text-sm text-red-600">{errors.email}</p>
)}
</div>
<div className="space-y-2">
<label
htmlFor="company"
className="block text-sm font-medium text-foreground"
>
Company Name <span className="text-red-500">*</span>
</label>
<Input
id="company"
type="text"
value={formData.company}
onChange={(e) => handleInputChange("company", e.target.value)}
placeholder="Your company name"
/>
{errors.company && (
<p className="text-sm text-red-600">{errors.company}</p>
)}
</div>
<div className="space-y-2">
<label
htmlFor="message"
className="block text-sm font-medium text-foreground"
>
How can we help? <span className="text-red-500">*</span>
</label>
<textarea
id="message"
value={formData.message}
onChange={(e) => handleInputChange("message", e.target.value)}
placeholder="Tell us more about your inquiry..."
rows={6}
className="flex w-full resize-none rounded-md border border-input bg-background bg-input px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
{errors.message && (
<p className="text-sm text-red-600">{errors.message}</p>
)}
</div>
<div className="flex justify-end gap-2">
{showCancelButton && onCancel && (
<Button
type="button"
variant="outline"
onClick={onCancel}
disabled={isSubmitting}
>
Cancel
</Button>
)}
<Button
type="submit"
disabled={
isSubmitting ||
(formData.inquiryType === "support" &&
formData.deploymentType === "self-hosted")
}
className="min-w-[120px]"
>
{isSubmitting ? "Sending..." : "Send Message"}
</Button>
</div>
</form>
);
}

53
apps/website/components/ContactFormModal.tsx Normal file
View File

@@ -0,0 +1,53 @@
"use client";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { ContactForm } from "./ContactForm";
interface ContactFormModalProps {
open: boolean;
onOpenChange: (open: boolean) => void;
defaultInquiryType?: "support" | "sales" | "other";
}
export function ContactFormModal({
open,
onOpenChange,
defaultInquiryType = "sales",
}: ContactFormModalProps) {
const handleSuccess = () => {
// Close modal after a short delay to show success message
setTimeout(() => {
onOpenChange(false);
}, 2000);
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-h-[90vh] max-w-3xl overflow-y-auto">
<DialogHeader>
<DialogTitle>Contact Sales</DialogTitle>
<DialogDescription>
Get in touch with our team. We're here to help with any questions
about Dokploy Enterprise Services.
</DialogDescription>
</DialogHeader>
<div className="mt-4">
<ContactForm
defaultInquiryType={defaultInquiryType}
onSuccess={handleSuccess}
onCancel={() => onOpenChange(false)}
showCancelButton={true}
hideInquiryType={true}
/>
</div>
</DialogContent>
</Dialog>
);
}

73
apps/website/components/pricing.tsx
View File

@@ -15,7 +15,9 @@ import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { Container } from "./Container";
import { ContactFormModal } from "./ContactFormModal";
import { Badge } from "./ui/badge";
import AnimatedGradientText from "./ui/animated-gradient-text";
import { Button, buttonVariants } from "./ui/button";
import HeroVideoDialog from "./ui/hero-video-dialog";
import { NumberInput } from "./ui/input";
@@ -89,6 +91,7 @@ export function Pricing() {
const featured = true;
const [openVideo, setOpenVideo] = useState(false);
const [openContactModal, setOpenContactModal] = useState(false);
return (
<section
id="pricing"
@@ -138,15 +141,16 @@ export function Pricing() {
<TabsTrigger value="annual">Annual</TabsTrigger>
</TabsList>
</Tabs>
<div className="mx-auto flex max-w-4xl gap-4 max-sm:flex-wrap-reverse max-sm:justify-center sm:flex-row-reverse">
<section
className={clsx(
"flex max-w-sm flex-col rounded-3xl border-2 border-dashed border-muted px-4",
featured
? "order-first border bg-black py-8 lg:order-none"
: "lg:py-8",
)}
>
<div className="mx-auto flex max-w-4xl flex-col gap-8">
<div className="flex gap-4 max-sm:flex-wrap max-sm:justify-center sm:flex-row">
<section
className={clsx(
"flex max-w-sm flex-col rounded-3xl border-2 border-dashed border-muted px-4",
featured
? "order-first border bg-black py-8 lg:order-none"
: "lg:py-8",
)}
>
<div className="flex flex-row items-center gap-2">
<p className=" text-2xl font-semibold tracking-tight text-primary ">
Free
@@ -366,10 +370,61 @@ export function Pricing() {
</div>
</div>
</section>
</div>
<div className="flex justify-center">
<section
className={clsx(
"flex w-full max-w-4xl flex-col rounded-3xl border-2 border-dashed border-muted px-4 py-4",
)}
>
<div className="flex flex-row items-center justify-start gap-3 w-fit">
<p className="text-xl font-semibold tracking-tight text-primary">
Enterprise
</p>
<AnimatedGradientText className="text-xs">
Premium ✨
</AnimatedGradientText>
</div>
<h3 className="mt-3 text-base font-medium text-white">
Enterprise Support & Services
</h3>
<p className="text-sm text-muted-foreground">
Custom solutions and dedicated support for your organization.
</p>
<ul className="mt-3 grid grid-cols-2 gap-y-1 text-sm text-slate-200">
{[
"SLA Guarantees / Priority Support",
"Aditional Security & Governance",
"Custom Solutions",
"Private Labeling",
].map((feature) => (
<li key={feature} className="flex text-muted-foreground">
<CheckIcon />
<span className="ml-2">{feature}</span>
</li>
))}
</ul>
<div className="mt-4 flex flex-col gap-2">
<Button
onClick={() => setOpenContactModal(true)}
className="w-full"
>
Get in touch
</Button>
</div>
</section>
</div>
</div>
</div>
</div>
</Container>
<ContactFormModal
open={openContactModal}
onOpenChange={setOpenContactModal}
defaultInquiryType="sales"
/>
</section>
);
}

1
apps/website/package.json
View File

@@ -26,6 +26,7 @@
"@radix-ui/react-tooltip": "^1.1.3",
"@tabler/icons-react": "3.21.0",
"@tryghost/content-api": "^1.11.21",
"@radix-ui/react-dialog":"1.1.15",
"@types/node": "20.4.6",
"@types/turndown": "^5.0.5",
"autoprefixer": "^10.4.12",

66
apps/website/tsconfig.json
View File

@@ -1,28 +1,42 @@
{
"compilerOptions": {
"target": "es6",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
"compilerOptions": {
"target": "es6",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": [
"./*"
]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
".next/dev/types/**/*.ts"
],
"exclude": [
"node_modules"
]
}

186
pnpm-lock.yaml generated
View File

@@ -121,6 +121,9 @@ importers:
'@radix-ui/react-avatar':
specifier: ^1.1.1
version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@radix-ui/react-dialog':
specifier: 1.1.15
version: 1.1.15(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@radix-ui/react-scroll-area':
specifier: ^1.2.0
version: 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -5321,6 +5324,12 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-compose-refs@1.1.2(@types/react@18.3.5)(react@18.2.0)':
dependencies:
react: 18.2.0
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-compose-refs@1.1.2(@types/react@18.3.5)(react@19.2.1)':
dependencies:
react: 19.2.1
@@ -5339,12 +5348,40 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-context@1.1.2(@types/react@18.3.5)(react@18.2.0)':
dependencies:
react: 18.2.0
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-context@1.1.2(@types/react@18.3.5)(react@19.2.1)':
dependencies:
react: 19.2.1
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-dialog@1.1.15(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies:
'@radix-ui/primitive': 1.1.3
'@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.5)(react@18.2.0)
'@radix-ui/react-context': 1.1.2(@types/react@18.3.5)(react@18.2.0)
'@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.5)(react@18.2.0)
'@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@radix-ui/react-id': 1.1.1(@types/react@18.3.5)(react@18.2.0)
'@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@radix-ui/react-slot': 1.2.3(@types/react@18.3.5)(react@18.2.0)
'@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.5)(react@18.2.0)
aria-hidden: 1.2.4
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
react-remove-scroll: 2.7.2(@types/react@18.3.5)(react@18.2.0)
optionalDependencies:
'@types/react': 18.3.5
'@types/react-dom': 18.3.0
'@radix-ui/react-dialog@1.1.15(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
dependencies:
'@radix-ui/primitive': 1.1.3
@@ -5405,6 +5442,19 @@ snapshots:
'@types/react': 18.3.5
'@types/react-dom': 18.3.0
'@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies:
'@radix-ui/primitive': 1.1.3
'@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.5)(react@18.2.0)
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.5)(react@18.2.0)
'@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.3.5)(react@18.2.0)
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
optionalDependencies:
'@types/react': 18.3.5
'@types/react-dom': 18.3.0
'@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
dependencies:
'@radix-ui/primitive': 1.1.3
@@ -5439,6 +5489,12 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-focus-guards@1.1.3(@types/react@18.3.5)(react@18.2.0)':
dependencies:
react: 18.2.0
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-focus-guards@1.1.3(@types/react@18.3.5)(react@19.2.1)':
dependencies:
react: 19.2.1
@@ -5456,6 +5512,17 @@ snapshots:
'@types/react': 18.3.5
'@types/react-dom': 18.3.0
'@radix-ui/react-focus-scope@1.1.7(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies:
'@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.5)(react@18.2.0)
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.5)(react@18.2.0)
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
optionalDependencies:
'@types/react': 18.3.5
'@types/react-dom': 18.3.0
'@radix-ui/react-focus-scope@1.1.7(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
dependencies:
'@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.5)(react@19.2.1)
@@ -5474,6 +5541,13 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-id@1.1.1(@types/react@18.3.5)(react@18.2.0)':
dependencies:
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.5)(react@18.2.0)
react: 18.2.0
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-id@1.1.1(@types/react@18.3.5)(react@19.2.1)':
dependencies:
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.5)(react@19.2.1)
@@ -5608,6 +5682,16 @@ snapshots:
'@types/react': 18.3.5
'@types/react-dom': 18.3.0
'@radix-ui/react-portal@1.1.9(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies:
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.5)(react@18.2.0)
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
optionalDependencies:
'@types/react': 18.3.5
'@types/react-dom': 18.3.0
'@radix-ui/react-portal@1.1.9(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
dependencies:
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
@@ -5628,6 +5712,16 @@ snapshots:
'@types/react': 18.3.5
'@types/react-dom': 18.3.0
'@radix-ui/react-presence@1.1.5(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies:
'@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.5)(react@18.2.0)
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.5)(react@18.2.0)
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
optionalDependencies:
'@types/react': 18.3.5
'@types/react-dom': 18.3.0
'@radix-ui/react-presence@1.1.5(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
dependencies:
'@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.5)(react@19.2.1)
@@ -5647,6 +5741,15 @@ snapshots:
'@types/react': 18.3.5
'@types/react-dom': 18.3.0
'@radix-ui/react-primitive@2.1.3(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies:
'@radix-ui/react-slot': 1.2.3(@types/react@18.3.5)(react@18.2.0)
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
optionalDependencies:
'@types/react': 18.3.5
'@types/react-dom': 18.3.0
'@radix-ui/react-primitive@2.1.3(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
dependencies:
'@radix-ui/react-slot': 1.2.3(@types/react@18.3.5)(react@19.2.1)
@@ -5789,6 +5892,13 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-slot@1.2.3(@types/react@18.3.5)(react@18.2.0)':
dependencies:
'@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.5)(react@18.2.0)
react: 18.2.0
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-slot@1.2.3(@types/react@18.3.5)(react@19.2.1)':
dependencies:
'@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.5)(react@19.2.1)
@@ -5876,6 +5986,12 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.3.5)(react@18.2.0)':
dependencies:
react: 18.2.0
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.3.5)(react@19.2.1)':
dependencies:
react: 19.2.1
@@ -5889,6 +6005,14 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.3.5)(react@18.2.0)':
dependencies:
'@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.5)(react@18.2.0)
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.5)(react@18.2.0)
react: 18.2.0
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.3.5)(react@19.2.1)':
dependencies:
'@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.3.5)(react@19.2.1)
@@ -5897,6 +6021,13 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-use-effect-event@0.0.2(@types/react@18.3.5)(react@18.2.0)':
dependencies:
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.5)(react@18.2.0)
react: 18.2.0
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-use-effect-event@0.0.2(@types/react@18.3.5)(react@19.2.1)':
dependencies:
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.5)(react@19.2.1)
@@ -5911,6 +6042,13 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-use-escape-keydown@1.1.1(@types/react@18.3.5)(react@18.2.0)':
dependencies:
'@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.5)(react@18.2.0)
react: 18.2.0
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-use-escape-keydown@1.1.1(@types/react@18.3.5)(react@19.2.1)':
dependencies:
'@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.5)(react@19.2.1)
@@ -5924,6 +6062,12 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.3.5)(react@18.2.0)':
dependencies:
react: 18.2.0
optionalDependencies:
'@types/react': 18.3.5
'@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.3.5)(react@19.2.1)':
dependencies:
react: 19.2.1
@@ -8228,6 +8372,14 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.5
react-remove-scroll-bar@2.3.8(@types/react@18.3.5)(react@18.2.0):
dependencies:
react: 18.2.0
react-style-singleton: 2.2.3(@types/react@18.3.5)(react@18.2.0)
tslib: 2.8.1
optionalDependencies:
'@types/react': 18.3.5
react-remove-scroll-bar@2.3.8(@types/react@18.3.5)(react@19.2.1):
dependencies:
react: 19.2.1
@@ -8247,6 +8399,17 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.5
react-remove-scroll@2.7.2(@types/react@18.3.5)(react@18.2.0):
dependencies:
react: 18.2.0
react-remove-scroll-bar: 2.3.8(@types/react@18.3.5)(react@18.2.0)
react-style-singleton: 2.2.3(@types/react@18.3.5)(react@18.2.0)
tslib: 2.8.1
use-callback-ref: 1.3.3(@types/react@18.3.5)(react@18.2.0)
use-sidecar: 1.1.3(@types/react@18.3.5)(react@18.2.0)
optionalDependencies:
'@types/react': 18.3.5
react-remove-scroll@2.7.2(@types/react@18.3.5)(react@19.2.1):
dependencies:
react: 19.2.1
@@ -8267,6 +8430,14 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.5
react-style-singleton@2.2.3(@types/react@18.3.5)(react@18.2.0):
dependencies:
get-nonce: 1.0.1
react: 18.2.0
tslib: 2.8.1
optionalDependencies:
'@types/react': 18.3.5
react-style-singleton@2.2.3(@types/react@18.3.5)(react@19.2.1):
dependencies:
get-nonce: 1.0.1
@@ -8827,6 +8998,13 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.5
use-callback-ref@1.3.3(@types/react@18.3.5)(react@18.2.0):
dependencies:
react: 18.2.0
tslib: 2.8.1
optionalDependencies:
'@types/react': 18.3.5
use-callback-ref@1.3.3(@types/react@18.3.5)(react@19.2.1):
dependencies:
react: 19.2.1
@@ -8842,6 +9020,14 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.5
use-sidecar@1.1.3(@types/react@18.3.5)(react@18.2.0):
dependencies:
detect-node-es: 1.1.0
react: 18.2.0
tslib: 2.8.1
optionalDependencies:
'@types/react': 18.3.5
use-sidecar@1.1.3(@types/react@18.3.5)(react@19.2.1):
dependencies:
detect-node-es: 1.1.0