From 9788b46fee700d617a0e556f624698ffff122b70 Mon Sep 17 00:00:00 2001
From: Pascal Senn <pascal@chillicream.com>
Date: Mon, 22 Sep 2025 22:39:40 +0200
Subject: [PATCH 1/2] feat(website): add contact form

---
 website/src/components/misc/index.ts          |   1 +
 website/src/components/misc/support-form.tsx  | 245 ++++++++++++++++++
 website/src/hooks/index.ts                    |   2 +
 website/src/hooks/use-form-submission.ts      |  96 +++++++
 website/src/hooks/use-support-form.ts         | 153 +++++++++++
 website/src/pages/services/support.tsx        |  19 +-
 .../src/pages/services/support/contact.tsx    |  33 +++
 .../src/pages/services/support/thank-you.tsx  | 124 +++++++++
 website/src/types/support.ts                  |   3 +
 website/src/utils/url-helpers.ts              |  58 +++++
 10 files changed, 723 insertions(+), 11 deletions(-)
 create mode 100644 website/src/components/misc/support-form.tsx
 create mode 100644 website/src/hooks/use-form-submission.ts
 create mode 100644 website/src/hooks/use-support-form.ts
 create mode 100644 website/src/pages/services/support/contact.tsx
 create mode 100644 website/src/pages/services/support/thank-you.tsx
 create mode 100644 website/src/types/support.ts
 create mode 100644 website/src/utils/url-helpers.ts

diff --git a/website/src/components/misc/index.ts b/website/src/components/misc/index.ts
index d79856e55c1..4147f9f0feb 100644
--- a/website/src/components/misc/index.ts
+++ b/website/src/components/misc/index.ts
@@ -17,3 +17,4 @@ export * from "./seo";
 export * from "./spinner";
 export * from "./sr-only";
 export * from "./support-card";
+export * from "./support-form";
diff --git a/website/src/components/misc/support-form.tsx b/website/src/components/misc/support-form.tsx
new file mode 100644
index 00000000000..fddfc7ede14
--- /dev/null
+++ b/website/src/components/misc/support-form.tsx
@@ -0,0 +1,245 @@
+import { useFormSubmission, useSupportForm } from "@/hooks";
+import { FONT_FAMILY_HEADING, THEME_COLORS } from "@/style";
+import { SUPPORT_PLANS, SupportPlan } from "@/types/support";
+import React, { FC, FormEvent } from "react";
+import styled from "styled-components";
+import { Button } from "./button";
+
+interface SupportFormProps {
+  readonly className?: string;
+  readonly initialPlan?: SupportPlan;
+}
+
+export const SupportForm: FC<SupportFormProps> = ({
+  className,
+  initialPlan = "Startup",
+}) => {
+  const { formData, errors, updateField, validateForm } = useSupportForm({
+    initialPlan,
+  });
+
+  const { isSubmitting, submitForm } = useFormSubmission();
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    await submitForm(formData);
+  };
+
+  return (
+    <FormContainer className={className}>
+      <FormTitle>Contact Support</FormTitle>
+      <FormDescription>
+        Fill out the form below and we'll get back to you as soon as possible.
+      </FormDescription>
+
+      <Form onSubmit={handleSubmit}>
+        <FormGroup>
+          <Label htmlFor="name">Name *</Label>
+          <Input
+            id="name"
+            type="text"
+            value={formData.name}
+            onChange={(e) => updateField("name", e.target.value)}
+            $hasError={!!errors.name}
+            disabled={isSubmitting}
+          />
+          {errors.name && <ErrorText>{errors.name}</ErrorText>}
+        </FormGroup>
+
+        <FormGroup>
+          <Label htmlFor="email">Email *</Label>
+          <Input
+            id="email"
+            type="email"
+            value={formData.email}
+            onChange={(e) => updateField("email", e.target.value)}
+            $hasError={!!errors.email}
+            disabled={isSubmitting}
+          />
+          {errors.email && <ErrorText>{errors.email}</ErrorText>}
+        </FormGroup>
+
+        <FormGroup>
+          <Label htmlFor="company">Company *</Label>
+          <Input
+            id="company"
+            type="text"
+            value={formData.company}
+            onChange={(e) => updateField("company", e.target.value)}
+            $hasError={!!errors.company}
+            disabled={isSubmitting}
+          />
+          {errors.company && <ErrorText>{errors.company}</ErrorText>}
+        </FormGroup>
+
+        <FormGroup>
+          <Label htmlFor="supportPlan">Support Plan</Label>
+          <Select
+            id="supportPlan"
+            value={formData.supportPlan}
+            onChange={(e) => updateField("supportPlan", e.target.value)}
+            disabled={isSubmitting}
+          >
+            {SUPPORT_PLANS.map((plan) => (
+              <option key={plan} value={plan}>
+                {plan}
+              </option>
+            ))}
+          </Select>
+        </FormGroup>
+
+        <FormGroup>
+          <Label htmlFor="message">Message *</Label>
+          <TextArea
+            id="message"
+            rows={5}
+            value={formData.message}
+            onChange={(e) => updateField("message", e.target.value)}
+            $hasError={!!errors.message}
+            disabled={isSubmitting}
+            placeholder="Please describe how we can help you..."
+          />
+          {errors.message && <ErrorText>{errors.message}</ErrorText>}
+        </FormGroup>
+
+        <SubmitButton type="submit" disabled={isSubmitting}>
+          {isSubmitting ? "Sending..." : "Send Message"}
+        </SubmitButton>
+      </Form>
+    </FormContainer>
+  );
+};
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  border: 1px solid ${THEME_COLORS.boxBorder};
+  border-radius: var(--box-border-radius);
+  padding: 40px;
+  backdrop-filter: blur(2px);
+  background-image: linear-gradient(
+    to right bottom,
+    #379dc83d,
+    #2b80ad3d,
+    #2263903d,
+    #1a48743d,
+    #112f573d
+  );
+  max-width: 600px;
+  margin: 0 auto;
+`;
+
+const FormTitle = styled.h3`
+  margin: 0 0 16px 0;
+  color: ${THEME_COLORS.heading};
+  font-family: ${FONT_FAMILY_HEADING};
+`;
+
+const FormDescription = styled.p.attrs({
+  className: "text-2",
+})`
+  margin: 0 0 32px 0;
+  color: ${THEME_COLORS.text};
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;
+
+const FormGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Label = styled.label`
+  margin-bottom: 8px;
+  color: ${THEME_COLORS.text};
+  font-weight: 500;
+  font-size: 0.875rem;
+`;
+
+const baseInputStyles = `
+  padding: 12px 16px;
+  border: 1px solid ${THEME_COLORS.boxBorder};
+  border-radius: var(--border-radius);
+  background-color: rgba(255, 255, 255, 0.05);
+  color: ${THEME_COLORS.text};
+  font-size: 1rem;
+  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
+
+  &:focus {
+    outline: none;
+    border-color: ${THEME_COLORS.primary};
+    background-color: rgba(255, 255, 255, 0.08);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &::placeholder {
+    color: ${THEME_COLORS.text}80;
+  }
+`;
+
+const Input = styled.input<{ $hasError?: boolean }>`
+  ${baseInputStyles}
+
+  ${({ $hasError }) =>
+    $hasError &&
+    `
+    border-color: #ef4444;
+
+    &:focus {
+      border-color: #ef4444;
+    }
+  `}
+`;
+
+const TextArea = styled.textarea<{ $hasError?: boolean }>`
+  ${baseInputStyles}
+  resize: vertical;
+  min-height: 120px;
+
+  ${({ $hasError }) =>
+    $hasError &&
+    `
+    border-color: #ef4444;
+
+    &:focus {
+      border-color: #ef4444;
+    }
+  `}
+`;
+
+const Select = styled.select`
+  ${baseInputStyles}
+  cursor: pointer;
+`;
+
+const ErrorText = styled.span`
+  margin-top: 4px;
+  color: #ef4444;
+  font-size: 0.875rem;
+`;
+
+const SubmitButton = styled(Button)`
+  align-self: flex-start;
+  padding: 12px 32px;
+  font-size: 1rem;
+  font-weight: 600;
+  margin-top: 16px;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+`;
diff --git a/website/src/hooks/index.ts b/website/src/hooks/index.ts
index b2c9a8c49f9..9b8c7ef5ae3 100644
--- a/website/src/hooks/index.ts
+++ b/website/src/hooks/index.ts
@@ -1 +1,3 @@
 export * from "./use-animation-intersection-observer";
+export * from "./use-form-submission";
+export * from "./use-support-form";
diff --git a/website/src/hooks/use-form-submission.ts b/website/src/hooks/use-form-submission.ts
new file mode 100644
index 00000000000..7ef5af649bb
--- /dev/null
+++ b/website/src/hooks/use-form-submission.ts
@@ -0,0 +1,96 @@
+import { SupportPlan } from "@/types/support";
+import { navigate } from "gatsby";
+import { useCallback, useState } from "react";
+
+export interface SupportFormData {
+  name: string;
+  email: string;
+  company: string;
+  message: string;
+  supportPlan: SupportPlan;
+}
+
+export interface SupportFormErrors {
+  name?: string;
+  email?: string;
+  company?: string;
+  message?: string;
+  supportPlan?: string;
+}
+
+interface UseFormSubmissionProps {
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+}
+
+interface UseFormSubmissionReturn {
+  isSubmitting: boolean;
+  submitForm: (data: SupportFormData) => Promise<void>;
+}
+
+/**
+ * Custom hook for handling form submission
+ */
+export function useFormSubmission({
+  onSuccess,
+  onError,
+}: UseFormSubmissionProps = {}): UseFormSubmissionReturn {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const submitForm = useCallback(
+    async (data: SupportFormData): Promise<void> => {
+      setIsSubmitting(true);
+
+      try {
+        const submissionData = {
+          Name: data.name,
+          Email: data.email,
+          Company: data.company,
+          SupportPlan: data.supportPlan,
+          Message: data.message,
+        };
+
+        const response = await fetch(
+          "https://forms.chillicream.com/api/SupportForm",
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(submissionData),
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        if (onSuccess) {
+          onSuccess();
+        } else {
+          navigate("/services/support/thank-you");
+        }
+      } catch (error) {
+        const errorObj =
+          error instanceof Error ? error : new Error("Unknown error occurred");
+
+        if (onError) {
+          onError(errorObj);
+        } else {
+          console.error("Form submission error:", errorObj);
+          alert(
+            "There was an error submitting your request. Please try again."
+          );
+        }
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [onSuccess, onError]
+  );
+
+  return {
+    isSubmitting,
+    submitForm,
+  };
+}
diff --git a/website/src/hooks/use-support-form.ts b/website/src/hooks/use-support-form.ts
new file mode 100644
index 00000000000..a8ae56e1c16
--- /dev/null
+++ b/website/src/hooks/use-support-form.ts
@@ -0,0 +1,153 @@
+import { SupportPlan } from "@/types/support";
+import { useCallback, useState } from "react";
+import { SupportFormData, SupportFormErrors } from "./use-form-submission";
+
+interface UseSupportFormProps {
+  initialPlan?: SupportPlan;
+}
+
+interface UseSupportFormReturn {
+  formData: SupportFormData;
+  errors: SupportFormErrors;
+  isValid: boolean;
+  updateField: (field: keyof SupportFormData, value: string) => void;
+  validateForm: () => boolean;
+  resetForm: () => void;
+}
+
+/**
+ * Custom hook for managing support form state and validation
+ */
+export function useSupportForm({
+  initialPlan = "Startup",
+}: UseSupportFormProps = {}): UseSupportFormReturn {
+  const [formData, setFormData] = useState<SupportFormData>({
+    name: "",
+    email: "",
+    company: "",
+    message: "",
+    supportPlan: initialPlan,
+  });
+
+  const [errors, setErrors] = useState<SupportFormErrors>({});
+
+  const updateField = useCallback(
+    (field: keyof SupportFormData, value: string) => {
+      setFormData((prev: SupportFormData) => ({ ...prev, [field]: value }));
+
+      if (errors[field]) {
+        setErrors((prev: SupportFormErrors) => {
+          const newErrors = { ...prev };
+          delete newErrors[field];
+          return newErrors;
+        });
+      }
+    },
+    [errors]
+  );
+
+  const validateForm = useCallback((): boolean => {
+    const formErrors = validateSupportForm(formData);
+    setErrors(formErrors);
+    return !hasFormErrors(formErrors);
+  }, [formData]);
+
+  const resetForm = useCallback(() => {
+    setFormData({
+      name: "",
+      email: "",
+      company: "",
+      message: "",
+      supportPlan: initialPlan,
+    });
+    setErrors({});
+  }, [initialPlan]);
+
+  return {
+    formData,
+    errors,
+    isValid: !hasFormErrors(errors),
+    updateField,
+    validateForm,
+    resetForm,
+  };
+}
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export function validateField(
+  fieldName: keyof SupportFormData,
+  value: string
+): string | undefined {
+  switch (fieldName) {
+    case "name":
+      return validateName(value);
+    case "email":
+      return validateEmail(value);
+    case "company":
+      return validateCompany(value);
+    default:
+      return undefined;
+  }
+}
+
+/**
+ * Validates the entire form data
+ */
+export function validateSupportForm(data: SupportFormData): SupportFormErrors {
+  const errors: SupportFormErrors = {};
+
+  const nameError = validateName(data.name);
+  if (nameError) {
+    errors.name = nameError;
+  }
+
+  const emailError = validateEmail(data.email);
+  if (emailError) {
+    errors.email = emailError;
+  }
+
+  const companyError = validateCompany(data.company);
+  if (companyError) {
+    errors.company = companyError;
+  }
+
+  return errors;
+}
+
+/**
+ * Checks if the form has any validation errors
+ */
+export function hasFormErrors(errors: SupportFormErrors): boolean {
+  return Object.keys(errors).length > 0;
+}
+
+function validateName(name: string): string | undefined {
+  if (!name.trim()) {
+    return "Name is required";
+  }
+  if (name.trim().length < 2) {
+    return "Name must be at least 2 characters";
+  }
+  return undefined;
+}
+
+function validateEmail(email: string): string | undefined {
+  if (!email.trim()) {
+    return "Email is required";
+  }
+  if (!EMAIL_REGEX.test(email)) {
+    return "Please enter a valid email address";
+  }
+  return undefined;
+}
+
+function validateCompany(company: string): string | undefined {
+  if (!company.trim()) {
+    return "Company is required";
+  }
+  if (company.trim().length < 2) {
+    return "Company name must be at least 2 characters";
+  }
+  return undefined;
+}
diff --git a/website/src/pages/services/support.tsx b/website/src/pages/services/support.tsx
index 1bf1d07069b..630fba05820 100644
--- a/website/src/pages/services/support.tsx
+++ b/website/src/pages/services/support.tsx
@@ -51,8 +51,8 @@ const SupportPage: FC = () => {
               description:
                 "For personal or non-commercial projects, to start hacking.",
               features: ["Public Slack Channel"],
-              ctaText: "Join Slack",
-              ctaLink: "https://slack.chillicream.com/",
+              ctaText: "Contact Us",
+              ctaLink: "/services/support/contact?plan=Community",
             },
             {
               title: "Startup",
@@ -61,9 +61,8 @@ const SupportPage: FC = () => {
               description:
                 "For small teams with moderate bandwidth and projects of low to medium complexity.",
               features: ["Private Slack Channel", "2 critical incidents"],
-              ctaText: "Contact Sales",
-              ctaLink:
-                "mailto:contact@chillicream.com?subject=Startup Support Plan",
+              ctaText: "Contact Us",
+              ctaLink: "/services/support/contact?plan=Startup",
             },
             {
               title: "Business",
@@ -76,9 +75,8 @@ const SupportPage: FC = () => {
                 "2 non-critical incidents",
                 "Email support",
               ],
-              ctaText: "Contact Sales",
-              ctaLink:
-                "mailto:contact@chillicream.com?subject=Business Support Plan",
+              ctaText: "Contact Us",
+              ctaLink: "/services/support/contact?plan=Business",
             },
             {
               title: "Enterprise",
@@ -93,9 +91,8 @@ const SupportPage: FC = () => {
                 "Dedicated account manager",
                 "Status reviews",
               ],
-              ctaText: "Contact Sales",
-              ctaLink:
-                "mailto:contact@chillicream.com?subject=Enterprise Support Plan",
+              ctaText: "Contact Us",
+              ctaLink: "/services/support/contact?plan=Enterprise",
             },
           ]}
         />
diff --git a/website/src/pages/services/support/contact.tsx b/website/src/pages/services/support/contact.tsx
new file mode 100644
index 00000000000..4be9501c78d
--- /dev/null
+++ b/website/src/pages/services/support/contact.tsx
@@ -0,0 +1,33 @@
+import { SiteLayout } from "@/components/layout";
+import { ContentSection, SEO, SupportForm } from "@/components/misc";
+import {
+  MostRecentBlogPostsSection,
+  NewsletterSection,
+} from "@/components/widgets";
+import { SUPPORT_PLANS, SupportPlan } from "@/types/support";
+import { getValidatedQueryParam } from "@/utils/url-helpers";
+import React, { FC, useEffect, useState } from "react";
+
+const SupportContactPage: FC = () => {
+  const [selectedPlan, setSelectedPlan] = useState<SupportPlan>("Startup");
+
+  useEffect(() => {
+    const planFromUrl = getValidatedQueryParam("plan", SUPPORT_PLANS);
+    if (planFromUrl) {
+      setSelectedPlan(planFromUrl);
+    }
+  }, []);
+
+  return (
+    <SiteLayout>
+      <SEO title="Contact Support" />
+      <ContentSection noBackground titleSpace="small">
+        <SupportForm initialPlan={selectedPlan} />
+      </ContentSection>
+      <NewsletterSection />
+      <MostRecentBlogPostsSection />
+    </SiteLayout>
+  );
+};
+
+export default SupportContactPage;
diff --git a/website/src/pages/services/support/thank-you.tsx b/website/src/pages/services/support/thank-you.tsx
new file mode 100644
index 00000000000..69e96e6be95
--- /dev/null
+++ b/website/src/pages/services/support/thank-you.tsx
@@ -0,0 +1,124 @@
+import { SiteLayout } from "@/components/layout";
+import { ContentSection, Link, SEO } from "@/components/misc";
+import {
+  MostRecentBlogPostsSection,
+  NewsletterSection,
+} from "@/components/widgets";
+import { FONT_FAMILY_HEADING, THEME_COLORS } from "@/style";
+import React, { FC } from "react";
+import styled from "styled-components";
+
+const SupportThankYouPage: FC = () => {
+  return (
+    <SiteLayout>
+      <SEO title="Thank You - Support Request Submitted" />
+      <ContentSection noBackground titleSpace="large">
+        <ThankYouContainer>
+          <ThankYouTitle>Thanks for reaching out!</ThankYouTitle>
+
+          <ThankYouMessage>
+            We've received your support request and our team will review it
+            shortly. You should expect to hear back from us within the next
+            business day.
+          </ThankYouMessage>
+
+          <ThankYouMessage>
+            In the meantime, you might find these resources helpful:
+          </ThankYouMessage>
+
+          <ActionButtons>
+            <ActionButton to="/docs">Documentation</ActionButton>
+            <ActionButton to="/services/support">Support Plans</ActionButton>
+            <ActionButton to="https://slack.chillicream.com/">
+              Join Our Slack
+            </ActionButton>
+          </ActionButtons>
+        </ThankYouContainer>
+      </ContentSection>
+      <NewsletterSection />
+      <MostRecentBlogPostsSection />
+    </SiteLayout>
+  );
+};
+
+const ThankYouContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 40px;
+  border: 1px solid ${THEME_COLORS.boxBorder};
+  border-radius: var(--box-border-radius);
+  backdrop-filter: blur(2px);
+  background-image: linear-gradient(
+    to right bottom,
+    #379dc83d,
+    #2b80ad3d,
+    #2263903d,
+    #1a48743d,
+    #112f573d
+  );
+`;
+
+const ThankYouTitle = styled.h2`
+  margin: 0 0 24px 0;
+  color: ${THEME_COLORS.heading};
+`;
+
+const ThankYouMessage = styled.p.attrs({
+  className: "text-2",
+})`
+  margin: 0 0 16px 0;
+  color: ${THEME_COLORS.text};
+  line-height: 1.6;
+`;
+
+const ActionButtons = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 32px;
+  width: 100%;
+
+  @media only screen and (min-width: 768px) {
+    flex-direction: row;
+    justify-content: center;
+    gap: 24px;
+  }
+`;
+
+const ActionButton = styled(Link)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: var(--border-radius);
+  height: 48px;
+  padding: 0 24px;
+  border: 2px solid ${THEME_COLORS.primaryButtonBorder};
+  color: ${THEME_COLORS.primaryButtonText};
+  background-color: ${THEME_COLORS.primaryButton};
+  font-family: ${FONT_FAMILY_HEADING};
+  font-size: 1rem;
+  text-decoration: none;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+
+  :hover {
+    border-color: ${THEME_COLORS.primaryButtonBorder};
+    color: ${THEME_COLORS.primaryButtonHoverText};
+    background-color: ${THEME_COLORS.primaryButtonHover};
+  }
+
+  @media only screen and (min-width: 768px) {
+    flex: 0 1 auto;
+    min-width: 180px;
+  }
+`;
+
+export default SupportThankYouPage;
diff --git a/website/src/types/support.ts b/website/src/types/support.ts
new file mode 100644
index 00000000000..08ef396487e
--- /dev/null
+++ b/website/src/types/support.ts
@@ -0,0 +1,3 @@
+export const SUPPORT_PLANS = ["Startup", "Business", "Enterprise"] as const;
+
+export type SupportPlan = typeof SUPPORT_PLANS[number];
diff --git a/website/src/utils/url-helpers.ts b/website/src/utils/url-helpers.ts
new file mode 100644
index 00000000000..511e4cdf1de
--- /dev/null
+++ b/website/src/utils/url-helpers.ts
@@ -0,0 +1,58 @@
+/**
+ * Utility functions for working with URL parameters
+ */
+
+/**
+ * Gets a query parameter value from the current URL
+ * @param paramName - The name of the parameter to retrieve
+ * @returns The parameter value or null if not found
+ */
+export function getQueryParam(paramName: string): string | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  const urlParams = new URLSearchParams(window.location.search);
+  return urlParams.get(paramName);
+}
+
+/**
+ * Gets a query parameter value and validates it against allowed values
+ * @param paramName - The name of the parameter to retrieve
+ * @param allowedValues - Array of allowed values
+ * @returns The parameter value if valid, or null if invalid/not found
+ */
+export function getValidatedQueryParam<T extends string>(
+  paramName: string,
+  allowedValues: readonly T[]
+): T | null {
+  const value = getQueryParam(paramName);
+
+  if (value && allowedValues.includes(value as T)) {
+    return value as T;
+  }
+
+  return null;
+}
+
+/**
+ * Builds a URL with query parameters
+ * @param baseUrl - The base URL
+ * @param params - Object containing parameter key-value pairs
+ * @returns The complete URL with query parameters
+ */
+export function buildUrlWithParams(
+  baseUrl: string,
+  params: Record<string, string | number>
+): string {
+  const url = new URL(
+    baseUrl,
+    typeof window !== "undefined" ? window.location.origin : ""
+  );
+
+  Object.entries(params).forEach(([key, value]) => {
+    url.searchParams.set(key, String(value));
+  });
+
+  return url.pathname + url.search;
+}

From eb9c7d5b855211cb35327ad40f7fc783d3112d58 Mon Sep 17 00:00:00 2001
From: Pascal Senn <pascal@chillicream.com>
Date: Mon, 22 Sep 2025 22:41:47 +0200
Subject: [PATCH 2/2] feat(website): add contact form

---
 website/src/pages/services/support.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/src/pages/services/support.tsx b/website/src/pages/services/support.tsx
index 630fba05820..dbd66b5206b 100644
--- a/website/src/pages/services/support.tsx
+++ b/website/src/pages/services/support.tsx
@@ -51,8 +51,8 @@ const SupportPage: FC = () => {
               description:
                 "For personal or non-commercial projects, to start hacking.",
               features: ["Public Slack Channel"],
-              ctaText: "Contact Us",
-              ctaLink: "/services/support/contact?plan=Community",
+              ctaText: "Join Slack",
+              ctaLink: "https://slack.chillicream.com/",
             },
             {
               title: "Startup",