From d08cda8b1557bfabf6df1cc21038d9f308a322ed Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Sun, 18 Jan 2026 13:25:05 +0100
Subject: [PATCH 01/17] implement hold and submit button

---
 .../src/components/HoldButton/index.tsx       | 82 +++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 apps/frontend/src/components/HoldButton/index.tsx

diff --git a/apps/frontend/src/components/HoldButton/index.tsx b/apps/frontend/src/components/HoldButton/index.tsx
new file mode 100644
index 000000000..c7177abba
--- /dev/null
+++ b/apps/frontend/src/components/HoldButton/index.tsx
@@ -0,0 +1,82 @@
+import { useCallback, useRef, useState } from "react";
+import { cn } from "../../helpers/cn";
+
+interface HoldButtonProps {
+  children: React.ReactNode;
+  onComplete: () => void;
+  onHoldStart?: () => Promise<boolean> | boolean;
+  duration?: number;
+  disabled?: boolean;
+  error?: boolean;
+  className?: string;
+  holdClassName?: string;
+}
+
+export function HoldButton({
+  children,
+  onComplete,
+  onHoldStart,
+  duration = 2000,
+  disabled = false,
+  error = false,
+  className,
+  holdClassName
+}: HoldButtonProps) {
+  const [isHolding, setIsHolding] = useState(false);
+  const holdTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handlePointerDown = useCallback(async () => {
+    if (disabled) return;
+
+    if (onHoldStart) {
+      const canProceed = await onHoldStart();
+      if (!canProceed) return;
+    }
+
+    setIsHolding(true);
+    holdTimeoutRef.current = setTimeout(() => {
+      setIsHolding(false);
+      onComplete();
+    }, duration);
+  }, [disabled, onHoldStart, onComplete, duration]);
+
+  const handlePointerUp = useCallback(() => {
+    setIsHolding(false);
+    if (holdTimeoutRef.current) {
+      clearTimeout(holdTimeoutRef.current);
+      holdTimeoutRef.current = null;
+    }
+  }, []);
+
+  return (
+    <button
+      className={cn(
+        "relative flex h-12 w-full cursor-pointer select-none items-center justify-center gap-2 overflow-hidden rounded-lg bg-gray-100 font-medium text-gray-500 transition-transform duration-150 ease-out active:scale-[0.98]",
+        error && "ring-2 ring-red-800",
+        disabled && "cursor-not-allowed bg-gray-100 text-gray-300",
+        className
+      )}
+      disabled={disabled}
+      onPointerDown={handlePointerDown}
+      onPointerLeave={handlePointerUp}
+      onPointerUp={handlePointerUp}
+      type="button"
+    >
+      {children}
+      <div
+        aria-hidden="true"
+        className={cn(
+          "pointer-events-none absolute inset-0 flex items-center justify-center gap-2 rounded-lg transition-[clip-path]",
+          holdClassName
+        )}
+        style={{
+          clipPath: isHolding ? "inset(0px 0px 0px 0px)" : "inset(0px 100% 0px 0px)",
+          transitionDuration: isHolding ? `${duration}ms` : "150ms",
+          transitionTimingFunction: isHolding ? "linear" : "ease-out"
+        }}
+      >
+        {children}
+      </div>
+    </button>
+  );
+}

From db9ff5d5471dc0260bd5240a2b5102fb935a53db Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Sun, 18 Jan 2026 13:55:36 +0100
Subject: [PATCH 02/17] create TextArea component

---
 .../src/components/TextArea/index.tsx         | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 apps/frontend/src/components/TextArea/index.tsx

diff --git a/apps/frontend/src/components/TextArea/index.tsx b/apps/frontend/src/components/TextArea/index.tsx
new file mode 100644
index 000000000..bc47396b2
--- /dev/null
+++ b/apps/frontend/src/components/TextArea/index.tsx
@@ -0,0 +1,20 @@
+import { TextareaHTMLAttributes } from "react";
+import { UseFormRegisterReturn } from "react-hook-form";
+import { cn } from "../../helpers/cn";
+
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  register?: UseFormRegisterReturn;
+  error?: boolean;
+}
+
+export const TextArea = ({ className, register, error, ...rest }: TextAreaProps) => (
+  <textarea
+    className={cn(
+      "input-vortex-primary input-ghost w-full resize-none rounded-lg border p-2",
+      error ? "border-red-800" : "border-neutral-300",
+      className
+    )}
+    {...register}
+    {...rest}
+  />
+);

From 609242221df9b4a579463a9c17c39dfc787b47d9 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Sun, 18 Jan 2026 13:56:07 +0100
Subject: [PATCH 03/17] implement useContactForm hook for contact-sales page

---
 apps/frontend/src/hooks/useContactForm.ts | 42 +++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 apps/frontend/src/hooks/useContactForm.ts

diff --git a/apps/frontend/src/hooks/useContactForm.ts b/apps/frontend/src/hooks/useContactForm.ts
new file mode 100644
index 000000000..a235a5b94
--- /dev/null
+++ b/apps/frontend/src/hooks/useContactForm.ts
@@ -0,0 +1,42 @@
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import * as yup from "yup";
+
+const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+const createContactFormSchema = (t: (key: string) => string) =>
+  yup.object({
+    email: yup
+      .string()
+      .required(t("pages.contact.validation.emailRequired"))
+      .matches(EMAIL_REGEX, t("pages.contact.validation.emailFormat")),
+    fullName: yup.string().required(t("pages.contact.validation.fullNameRequired")),
+    inquiry: yup.string().required(t("pages.contact.validation.inquiryRequired")),
+    privacyPolicyAccepted: yup
+      .boolean()
+      .oneOf([true], t("pages.contact.validation.privacyPolicyRequired"))
+      .required(t("pages.contact.validation.privacyPolicyRequired")),
+    projectName: yup.string().required(t("pages.contact.validation.projectNameRequired"))
+  });
+
+export type ContactFormData = yup.InferType<ReturnType<typeof createContactFormSchema>>;
+
+export function useContactForm() {
+  const { t } = useTranslation();
+  const schema = createContactFormSchema(t);
+
+  const form = useForm<ContactFormData>({
+    defaultValues: {
+      email: "",
+      fullName: "",
+      inquiry: "",
+      privacyPolicyAccepted: false,
+      projectName: ""
+    },
+    mode: "onChange",
+    resolver: yupResolver(schema)
+  });
+
+  return { form, schema };
+}

From bd603ef75ddd736e130f0880f0948a9f21fbd214 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Sun, 18 Jan 2026 13:56:39 +0100
Subject: [PATCH 04/17] create ContactForm

---
 .../components/ContactForm/ContactInfo.tsx    |  49 +++++++
 .../src/components/ContactForm/index.tsx      | 138 ++++++++++++++++++
 2 files changed, 187 insertions(+)
 create mode 100644 apps/frontend/src/components/ContactForm/ContactInfo.tsx
 create mode 100644 apps/frontend/src/components/ContactForm/index.tsx

diff --git a/apps/frontend/src/components/ContactForm/ContactInfo.tsx b/apps/frontend/src/components/ContactForm/ContactInfo.tsx
new file mode 100644
index 000000000..039d51e9b
--- /dev/null
+++ b/apps/frontend/src/components/ContactForm/ContactInfo.tsx
@@ -0,0 +1,49 @@
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
+import { useTranslation } from "react-i18next";
+import Telegram from "../../assets/socials/telegram.svg";
+
+export function ContactInfo() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="rounded-lg bg-base-100 p-8">
+      <h2 className="mb-6 font-bold text-2xl text-gray-900">{t("pages.contact.info.title")}</h2>
+
+      <ul className="mb-8 space-y-3 text-gray-700">
+        <li className="flex items-center gap-3">
+          <CheckIcon />
+          {t("pages.contact.info.requestDemo")}
+        </li>
+        <li className="flex items-center gap-3">
+          <CheckIcon />
+          {t("pages.contact.info.onboardingHelp")}
+        </li>
+        <li className="flex items-center gap-3">
+          <CheckIcon />
+          {t("pages.contact.info.integrationHelp")}
+        </li>
+      </ul>
+
+      <div className="border-gray-200 border-t pt-6">
+        <p className="mb-3 text-gray-700">{t("pages.contact.info.technicalQuestions")}</p>
+        <a
+          className="group flex items-center gap-2 text-blue-600 transition-colors hover:text-blue-800"
+          href="https://t.me/vortex_fi"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          {t("pages.contact.info.supportLink")}
+          <ChevronRightIcon className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+        </a>
+      </div>
+    </div>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg className="h-5 w-5 flex-shrink-0 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} />
+    </svg>
+  );
+}
diff --git a/apps/frontend/src/components/ContactForm/index.tsx b/apps/frontend/src/components/ContactForm/index.tsx
new file mode 100644
index 000000000..677e8b2d7
--- /dev/null
+++ b/apps/frontend/src/components/ContactForm/index.tsx
@@ -0,0 +1,138 @@
+import { useMutation } from "@tanstack/react-query";
+import { motion } from "motion/react";
+import { useTranslation } from "react-i18next";
+import { cn } from "../../helpers/cn";
+import { useContactForm } from "../../hooks/useContactForm";
+import { submitContactForm } from "../../services/api/contact.service";
+import { Field } from "../Field";
+import { HoldButton } from "../HoldButton";
+import { TextArea } from "../TextArea";
+
+export function ContactForm() {
+  const { t, i18n } = useTranslation();
+  const { form } = useContactForm();
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting, isValid },
+    reset
+  } = form;
+
+  const { mutate, isPending, isSuccess, isError } = useMutation({
+    mutationFn: submitContactForm,
+    onSuccess: () => {
+      reset();
+    }
+  });
+
+  const onSubmit = handleSubmit(data => {
+    mutate({
+      email: data.email,
+      fullName: data.fullName,
+      inquiry: data.inquiry,
+      projectName: data.projectName,
+      timestamp: new Date().toISOString()
+    });
+  });
+
+  const loading = isPending || isSubmitting;
+
+  return (
+    <form className="space-y-2" onSubmit={e => e.preventDefault()}>
+      <FormField label={t("pages.contact.form.fullName")}>
+        <Field disabled={loading} placeholder={t("pages.contact.form.fullNamePlaceholder")} register={register("fullName")} />
+      </FormField>
+
+      <FormField label={t("pages.contact.form.email")}>
+        <Field
+          disabled={loading}
+          placeholder={t("pages.contact.form.emailPlaceholder")}
+          register={register("email")}
+          type="email"
+        />
+      </FormField>
+
+      <FormField label={t("pages.contact.form.projectName")}>
+        <Field
+          disabled={loading}
+          placeholder={t("pages.contact.form.projectNamePlaceholder")}
+          register={register("projectName")}
+        />
+      </FormField>
+
+      <FormField label={t("pages.contact.form.inquiry")}>
+        <TextArea
+          disabled={loading}
+          placeholder={t("pages.contact.form.inquiryPlaceholder")}
+          register={register("inquiry")}
+          rows={4}
+        />
+      </FormField>
+
+      <div className="flex items-start gap-2 pt-1">
+        <input
+          type="checkbox"
+          {...register("privacyPolicyAccepted")}
+          className="checkbox checkbox-primary checkbox-sm mt-0.5"
+          disabled={loading}
+        />
+        <label className="text-gray-500 text-sm">
+          {t("pages.contact.form.privacyPolicy")}{" "}
+          <a
+            className="text-blue-600 underline hover:text-blue-800"
+            href={`/${i18n.language}/privacy-policy`}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            {t("pages.contact.form.privacyPolicyLink")}
+          </a>
+        </label>
+      </div>
+
+      <div className="border-gray-200 border-b pt-2 pb-4">
+        <HoldButton
+          className={cn(loading && "bg-primary text-white")}
+          disabled={loading || !isValid}
+          holdClassName="bg-primary text-white"
+          onComplete={onSubmit}
+        >
+          {loading ? <span className="loading loading-spinner loading-sm" /> : t("pages.contact.form.holdToSubmit")}
+        </HoldButton>
+      </div>
+
+      {isSuccess && (
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          className="rounded-md bg-green-50 p-3 text-center text-green-800 text-sm"
+          initial={{ opacity: 0, y: -10 }}
+        >
+          {t("pages.contact.success")}
+        </motion.div>
+      )}
+
+      {isError && (
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          className="rounded-md bg-red-50 p-3 text-center text-red-800 text-sm"
+          initial={{ opacity: 0, y: -10 }}
+        >
+          {t("pages.contact.error")}
+        </motion.div>
+      )}
+    </form>
+  );
+}
+
+interface FormFieldProps {
+  label: string;
+  children: React.ReactNode;
+}
+
+function FormField({ label, children }: FormFieldProps) {
+  return (
+    <div>
+      <label className="mb-1 block font-medium text-gray-600 text-xs">{label}</label>
+      {children}
+    </div>
+  );
+}

From e7f672b90fa936ce852e8706a235c8162e7d2aa6 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Sun, 18 Jan 2026 13:57:05 +0100
Subject: [PATCH 05/17] create contact page

---
 apps/frontend/src/pages/contact/index.tsx | 28 +++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 apps/frontend/src/pages/contact/index.tsx

diff --git a/apps/frontend/src/pages/contact/index.tsx b/apps/frontend/src/pages/contact/index.tsx
new file mode 100644
index 000000000..89ce4a84c
--- /dev/null
+++ b/apps/frontend/src/pages/contact/index.tsx
@@ -0,0 +1,28 @@
+import { useTranslation } from "react-i18next";
+import { ContactForm } from "../../components/ContactForm";
+import { ContactInfo } from "../../components/ContactForm/ContactInfo";
+
+export function ContactPage() {
+  const { t } = useTranslation();
+
+  return (
+    <main className="container mx-auto max-w-6xl px-4 py-20 md:px-10">
+      <div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
+        <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-xs">
+          <h1 className="mb-4 border-gray-200 border-b pb-4 font-bold text-xl">{t("pages.contact.title")}</h1>
+          <ContactForm />
+          <p className="mt-4 pt-4 text-gray-500 text-sm">
+            {t("pages.contact.emailUs")}{" "}
+            <a className="text-blue-600 hover:underline" href="mailto:sales@vortexfinance.co">
+              sales@vortexfinance.co
+            </a>
+          </p>
+        </div>
+
+        <div className="lg:pl-8">
+          <ContactInfo />
+        </div>
+      </div>
+    </main>
+  );
+}

From 78d7a90a35410eb568f8c60572fe4e782c439ac7 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Sun, 18 Jan 2026 13:57:36 +0100
Subject: [PATCH 06/17] connect contact page to routing

---
 apps/frontend/src/routes/{-$locale}/contact.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 apps/frontend/src/routes/{-$locale}/contact.tsx

diff --git a/apps/frontend/src/routes/{-$locale}/contact.tsx b/apps/frontend/src/routes/{-$locale}/contact.tsx
new file mode 100644
index 000000000..6a5093f92
--- /dev/null
+++ b/apps/frontend/src/routes/{-$locale}/contact.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { BaseLayout } from "../../layouts";
+import { ContactPage } from "../../pages/contact";
+
+export const Route = createFileRoute("/{-$locale}/contact")({
+  component: ContactRouteComponent
+});
+
+function ContactRouteComponent() {
+  return <BaseLayout main={<ContactPage />} />;
+}

From 5608ff873d199601a1ed6d848e09ed5f1e9a8d34 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Sun, 18 Jan 2026 14:03:09 +0100
Subject: [PATCH 07/17] implement contact.controller

---
 .../src/api/controllers/contact.controller.ts | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 apps/api/src/api/controllers/contact.controller.ts

diff --git a/apps/api/src/api/controllers/contact.controller.ts b/apps/api/src/api/controllers/contact.controller.ts
new file mode 100644
index 000000000..083b369dc
--- /dev/null
+++ b/apps/api/src/api/controllers/contact.controller.ts
@@ -0,0 +1,32 @@
+import type { SubmitContactErrorResponse, SubmitContactResponse } from "@vortexfi/shared";
+import type { Request, Response } from "express";
+import { config } from "../../config";
+import { storeDataInGoogleSpreadsheet } from "./googleSpreadSheet.controller";
+
+enum ContactSheetHeaders {
+  Timestamp = "timestamp",
+  FullName = "fullName",
+  Email = "email",
+  ProjectName = "projectName",
+  Inquiry = "inquiry"
+}
+
+const CONTACT_SHEET_HEADER_VALUES = [
+  ContactSheetHeaders.Timestamp,
+  ContactSheetHeaders.FullName,
+  ContactSheetHeaders.Email,
+  ContactSheetHeaders.ProjectName,
+  ContactSheetHeaders.Inquiry
+];
+
+export { CONTACT_SHEET_HEADER_VALUES };
+
+export const submitContact = async (
+  req: Request,
+  res: Response<SubmitContactResponse | SubmitContactErrorResponse>
+): Promise<void> => {
+  if (!config.spreadsheet.contactSheetId) {
+    throw new Error("Contact sheet ID is not configured");
+  }
+  await storeDataInGoogleSpreadsheet(req, res, config.spreadsheet.contactSheetId, CONTACT_SHEET_HEADER_VALUES);
+};

From 36f8609a6a88d42f861e8e7d21e6f074d3fbac3b Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Sun, 18 Jan 2026 14:05:12 +0100
Subject: [PATCH 08/17] implement contact.service

---
 apps/frontend/src/services/api/contact.service.ts | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 apps/frontend/src/services/api/contact.service.ts

diff --git a/apps/frontend/src/services/api/contact.service.ts b/apps/frontend/src/services/api/contact.service.ts
new file mode 100644
index 000000000..efbc7b968
--- /dev/null
+++ b/apps/frontend/src/services/api/contact.service.ts
@@ -0,0 +1,6 @@
+import { SubmitContactRequest, SubmitContactResponse } from "@vortexfi/shared";
+import { apiRequest } from "./api-client";
+
+export async function submitContactForm(data: SubmitContactRequest): Promise<SubmitContactResponse> {
+  return apiRequest<SubmitContactResponse>("post", "/contact/submit", data);
+}

From ee4c7d03c5bdd9ce7e4ec6ae7575c8dadeb091e7 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Sun, 18 Jan 2026 14:05:38 +0100
Subject: [PATCH 09/17] create contact.endpoints

---
 .../shared/src/endpoints/contact.endpoints.ts   | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 packages/shared/src/endpoints/contact.endpoints.ts

diff --git a/packages/shared/src/endpoints/contact.endpoints.ts b/packages/shared/src/endpoints/contact.endpoints.ts
new file mode 100644
index 000000000..8bb456b32
--- /dev/null
+++ b/packages/shared/src/endpoints/contact.endpoints.ts
@@ -0,0 +1,17 @@
+// POST /contact/submit
+export interface SubmitContactRequest {
+  timestamp: string;
+  fullName: string;
+  email: string;
+  projectName: string;
+  inquiry: string;
+}
+
+export interface SubmitContactResponse {
+  message: string;
+}
+
+export interface SubmitContactErrorResponse {
+  error: string;
+  details?: string;
+}

From d32722e90da1da1b87bd8a4d6e36fa825f590dc9 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Sun, 18 Jan 2026 14:06:03 +0100
Subject: [PATCH 10/17] create contact.route

---
 apps/api/src/api/routes/v1/contact.route.ts | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 apps/api/src/api/routes/v1/contact.route.ts

diff --git a/apps/api/src/api/routes/v1/contact.route.ts b/apps/api/src/api/routes/v1/contact.route.ts
new file mode 100644
index 000000000..e5883b19e
--- /dev/null
+++ b/apps/api/src/api/routes/v1/contact.route.ts
@@ -0,0 +1,9 @@
+import { Router } from "express";
+import * as contactController from "../../controllers/contact.controller";
+import { validateContactInput } from "../../middlewares/validators";
+
+const router: Router = Router({ mergeParams: true });
+
+router.route("/submit").post(validateContactInput, contactController.submitContact);
+
+export default router;

From 88c197d6e434f67aaaa5fc4f54a2eec76ed3da49 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Sun, 18 Jan 2026 14:08:34 +0100
Subject: [PATCH 11/17] apply formatting

---
 .../src/api/controllers/metrics.controller.ts |  2 +-
 apps/api/src/api/middlewares/validators.ts    |  2 +
 apps/api/src/api/routes/v1/index.ts           |  6 +++
 .../handlers/distribute-fees-handler.ts       |  2 +-
 apps/api/src/config/vars.ts                   |  2 +
 apps/frontend/App.css                         | 25 ++++++++++++
 .../src/components/Accordion/index.tsx        |  2 +-
 .../components/Avenia/AveniaField/index.tsx   |  2 +-
 .../components/CallToActionSection/index.tsx  | 39 ++++++++++---------
 .../src/components/ComparisonSlider/index.tsx | 10 ++---
 apps/frontend/src/components/Field/index.tsx  |  9 ++++-
 apps/frontend/src/components/Footer/index.tsx |  2 +-
 apps/frontend/src/routeTree.gen.ts            | 22 +++++++++++
 .../sections/business/GotQuestions/index.tsx  |  4 +-
 .../src/sections/business/Hero/index.tsx      | 26 ++++++-------
 .../individuals/GotQuestions/index.tsx        |  2 +
 apps/frontend/src/services/api/index.ts       |  1 +
 .../stories/AveniaLivenessStep.stories.tsx    |  4 +-
 .../RampFollowUpRedirectStep.stories.tsx      |  2 +-
 apps/frontend/src/translations/en.json        | 37 ++++++++++++++++++
 apps/frontend/src/translations/pt.json        | 37 ++++++++++++++++++
 .../src/rebalance/brla-to-axlusdc/index.ts    |  2 +-
 packages/shared/src/endpoints/index.ts        |  1 +
 .../src/services/pendulum/apiManager.ts       |  2 +-
 packages/shared/src/tokens/constants/misc.ts  |  2 +-
 25 files changed, 195 insertions(+), 50 deletions(-)

diff --git a/apps/api/src/api/controllers/metrics.controller.ts b/apps/api/src/api/controllers/metrics.controller.ts
index 387ce1056..b084712e3 100644
--- a/apps/api/src/api/controllers/metrics.controller.ts
+++ b/apps/api/src/api/controllers/metrics.controller.ts
@@ -62,7 +62,7 @@ const zeroVolume = (key: string, keyName: "day" | "month"): any => ({
 });
 
 async function getMonthlyVolumes(): Promise<MonthlyVolume[]> {
-  const cacheKey = `monthly`;
+  const cacheKey = "monthly";
   const cached = cache.get<MonthlyVolume[]>(cacheKey);
   if (cached) return cached;
 
diff --git a/apps/api/src/api/middlewares/validators.ts b/apps/api/src/api/middlewares/validators.ts
index 193af3f08..be3c45755 100644
--- a/apps/api/src/api/middlewares/validators.ts
+++ b/apps/api/src/api/middlewares/validators.ts
@@ -20,6 +20,7 @@ import {
 } from "@vortexfi/shared";
 import { RequestHandler } from "express";
 import httpStatus from "http-status";
+import { CONTACT_SHEET_HEADER_VALUES } from "../controllers/contact.controller";
 import { EMAIL_SHEET_HEADER_VALUES } from "../controllers/email.controller";
 import { RATING_SHEET_HEADER_VALUES } from "../controllers/rating.controller";
 import { FLOW_HEADERS } from "../controllers/storage.controller";
@@ -261,6 +262,7 @@ const validateRequestBodyValues =
   };
 
 export const validateStorageInput = validateRequestBodyValuesForTransactionStore();
+export const validateContactInput = validateRequestBodyValues(CONTACT_SHEET_HEADER_VALUES);
 export const validateEmailInput = validateRequestBodyValues(EMAIL_SHEET_HEADER_VALUES);
 export const validateRatingInput = validateRequestBodyValues(RATING_SHEET_HEADER_VALUES);
 export const validateExecuteXCM = validateRequestBodyValues(["id", "payload"]);
diff --git a/apps/api/src/api/routes/v1/index.ts b/apps/api/src/api/routes/v1/index.ts
index 021d3ce1f..bbe92e349 100644
--- a/apps/api/src/api/routes/v1/index.ts
+++ b/apps/api/src/api/routes/v1/index.ts
@@ -4,6 +4,7 @@ import { sendStatusWithPk as sendPendulumStatusWithPk } from "../../controllers/
 import { sendStatusWithPk as sendStellarStatusWithPk } from "../../controllers/stellar.controller";
 import partnerApiKeysRoutes from "./admin/partner-api-keys.route";
 import brlaRoutes from "./brla.route";
+import contactRoutes from "./contact.route";
 import countriesRoutes from "./countries.route";
 import cryptocurrenciesRoutes from "./cryptocurrencies.route";
 import emailRoutes from "./email.route";
@@ -85,6 +86,11 @@ router.use("/pendulum", pendulumRoutes);
  */
 router.use("/storage", storageRoutes);
 
+/**
+ * POST v1/contact
+ */
+router.use("/contact", contactRoutes);
+
 /**
  * POST v1/email
  */
diff --git a/apps/api/src/api/services/phases/handlers/distribute-fees-handler.ts b/apps/api/src/api/services/phases/handlers/distribute-fees-handler.ts
index ad7fbcd42..1c919777c 100644
--- a/apps/api/src/api/services/phases/handlers/distribute-fees-handler.ts
+++ b/apps/api/src/api/services/phases/handlers/distribute-fees-handler.ts
@@ -64,7 +64,7 @@ export class DistributeFeesHandler extends BasePhaseHandler {
       logger.info(`Found existing distribute fee hash for ramp ${state.id}: ${existingHash}`);
 
       const status = await this.checkExtrinsicStatus(existingHash).catch((_: unknown) => {
-        throw this.createRecoverableError(`Failed to check extrinsic status`);
+        throw this.createRecoverableError("Failed to check extrinsic status");
       });
 
       if (status === ExtrinsicStatus.Success) {
diff --git a/apps/api/src/config/vars.ts b/apps/api/src/config/vars.ts
index 68b5af9d1..da8fd46aa 100644
--- a/apps/api/src/config/vars.ts
+++ b/apps/api/src/config/vars.ts
@@ -18,6 +18,7 @@ interface SpreadsheetConfig {
   googleCredentials: GoogleCredentials;
   storageSheetId: string | undefined;
   emailSheetId: string | undefined;
+  contactSheetId: string | undefined;
   ratingSheetId: string | undefined;
 }
 
@@ -98,6 +99,7 @@ export const config: Config = {
   rateLimitNumberOfProxies: process.env.RATE_LIMIT_NUMBER_OF_PROXIES || 1,
   rateLimitWindowMinutes: process.env.RATE_LIMIT_WINDOW_MINUTES || 1,
   spreadsheet: {
+    contactSheetId: process.env.GOOGLE_CONTACT_SPREADSHEET_ID,
     emailSheetId: process.env.GOOGLE_EMAIL_SPREADSHEET_ID,
     googleCredentials: {
       email: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
diff --git a/apps/frontend/App.css b/apps/frontend/App.css
index 1f003454e..22ff79d46 100644
--- a/apps/frontend/App.css
+++ b/apps/frontend/App.css
@@ -117,6 +117,11 @@
 
 .btn-vortex-primary {
   @apply bg-blue-700 text-white rounded-[var(--radius-field)] border border-blue-700 cursor-pointer;
+  transition: scale 0.1s ease-in-out;
+}
+
+.btn-vortex-primary:active {
+  scale: 0.98;
 }
 
 .btn-vortex-primary:hover {
@@ -134,6 +139,11 @@
   @apply border;
   @apply border-gray-300;
   @apply duration-200;
+  transition: scale 0.1s ease-in-out;
+}
+
+.btn-vortex-accent:active {
+  scale: 0.98;
 }
 
 .btn-vortex-accent:hover {
@@ -149,6 +159,11 @@
   @apply border;
   @apply border-blue-700;
   @apply cursor-pointer;
+  transition: scale 0.1s ease-in-out;
+}
+
+.btn-vortex-primary-inverse:active {
+  scale: 0.98;
 }
 
 .btn-vortex-primary-inverse:hover {
@@ -175,6 +190,11 @@
   @apply bg-pink-600;
   @apply border-pink-600;
   @apply shadow-none;
+  transition: scale 0.1s ease-in-out;
+}
+
+.btn-vortex-secondary:active {
+  scale: 0.98;
 }
 
 .btn-vortex-secondary:hover {
@@ -191,6 +211,11 @@
   @apply border;
   @apply border-red-600;
   @apply shadow-none;
+  transition: scale 0.1s ease-in-out;
+}
+
+.btn-vortex-danger:active {
+  scale: 0.98;
 }
 
 .btn-vortex-danger:hover {
diff --git a/apps/frontend/src/components/Accordion/index.tsx b/apps/frontend/src/components/Accordion/index.tsx
index 913d28a3d..6da07d247 100644
--- a/apps/frontend/src/components/Accordion/index.tsx
+++ b/apps/frontend/src/components/Accordion/index.tsx
@@ -90,7 +90,7 @@ const AccordionTrigger: FC<AccordionTriggerProps> = ({ children, className = "",
     <motion.div className="flex" layout>
       <motion.button
         className={cn(
-          "w-full px-6 py-4 text-left font-medium text-base text-gray-900 transition-all cursor-pointer duration-200 hover:text-blue-700 focus:outline-none md:text-lg",
+          "w-full cursor-pointer px-6 py-4 text-left font-medium text-base text-gray-900 transition-all duration-200 hover:text-blue-700 focus:outline-none md:text-lg",
           className
         )}
         onClick={() => toggleValue(value)}
diff --git a/apps/frontend/src/components/Avenia/AveniaField/index.tsx b/apps/frontend/src/components/Avenia/AveniaField/index.tsx
index 207c6d3b3..8b038926f 100644
--- a/apps/frontend/src/components/Avenia/AveniaField/index.tsx
+++ b/apps/frontend/src/components/Avenia/AveniaField/index.tsx
@@ -73,7 +73,7 @@ export const AveniaField: FC<AveniaFieldProps> = ({ id, label, index, validation
       <div className="relative">
         <Field className={cn("w-full p-2", errors[id] && "border border-red-800")} id={id} register={register(id)} {...rest} />
         {id === ExtendedAveniaFieldOptions.BIRTHDATE && (
-          <CalendarDaysIcon className="absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-600 pointer-events-none" />
+          <CalendarDaysIcon className="-translate-y-1/2 pointer-events-none absolute top-1/2 right-3 h-5 w-5 text-gray-600" />
         )}
       </div>
       {errorMessage && <span className="mt-1 text-red-800 text-sm">{errorMessage}</span>}
diff --git a/apps/frontend/src/components/CallToActionSection/index.tsx b/apps/frontend/src/components/CallToActionSection/index.tsx
index 6f9472cfa..613cb7106 100644
--- a/apps/frontend/src/components/CallToActionSection/index.tsx
+++ b/apps/frontend/src/components/CallToActionSection/index.tsx
@@ -1,4 +1,5 @@
 import { PlayCircleIcon } from "@heroicons/react/20/solid";
+import { Link } from "@tanstack/react-router";
 import { motion } from "motion/react";
 import { ReactNode } from "react";
 import PLANET from "../../assets/planet.svg";
@@ -8,22 +9,24 @@ interface CallToActionSectionProps {
   description: string;
   buttonText: string;
   buttonUrl?: string;
+  isExternal?: boolean;
 }
 
-/**
- * CallToActionSection - Reusable CTA section with animated planet background
- * Features:
- * - Animated planet image with hover effects
- * - Flexible title (string or ReactNode for custom styling)
- * - Responsive layout
- * - Configurable button text and URL
- */
 export const CallToActionSection = ({
   title,
   description,
   buttonText,
-  buttonUrl = "https://forms.gle/dKh8ckXheRPdRa398"
+  buttonUrl = "",
+  isExternal = true
 }: CallToActionSectionProps) => {
+  const buttonClassName = "btn btn-vortex-secondary mx-auto flex items-center gap-2 rounded-3xl px-6 md:mx-0";
+  const buttonContent = (
+    <>
+      <span>{buttonText}</span>
+      <PlayCircleIcon aria-hidden="true" className="w-5 group-hover:text-pink-600" />
+    </>
+  );
+
   return (
     <section className="overflow-hidden bg-blue-900 px-4 py-32 text-white md:px-10">
       <div className="relative mx-auto flex flex-col justify-between sm:container md:flex-row">
@@ -45,15 +48,15 @@ export const CallToActionSection = ({
         </div>
         <div className="z-10 flex flex-col justify-center md:w-1/2 md:items-end">
           <p className="mt-3 mb-4 text-center text-body-lg md:mt-0 md:text-end">{description}</p>
-          <a
-            className="btn btn-vortex-secondary mx-auto flex items-center gap-2 rounded-3xl px-6 md:mx-0"
-            href={buttonUrl}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <span>{buttonText}</span>
-            <PlayCircleIcon aria-hidden="true" className="w-5 group-hover:text-pink-600" />
-          </a>
+          {isExternal ? (
+            <a className={buttonClassName} href={buttonUrl} rel="noopener noreferrer" target="_blank">
+              {buttonContent}
+            </a>
+          ) : (
+            <Link className={buttonClassName} to={buttonUrl}>
+              {buttonContent}
+            </Link>
+          )}
         </div>
       </div>
     </section>
diff --git a/apps/frontend/src/components/ComparisonSlider/index.tsx b/apps/frontend/src/components/ComparisonSlider/index.tsx
index 0dfb9bcd5..4e344240f 100644
--- a/apps/frontend/src/components/ComparisonSlider/index.tsx
+++ b/apps/frontend/src/components/ComparisonSlider/index.tsx
@@ -62,20 +62,20 @@ export const ComparisonSlider: React.FC<ComparisonSliderProps> = ({
 
   return (
     <div
-      className={`relative h-full overflow-hidden select-none group touch-none ${className}`}
+      className={`group relative h-full touch-none select-none overflow-hidden ${className}`}
       onMouseDown={handleMouseDown}
       onTouchStart={handleTouchStart}
       ref={containerRef}
     >
       <img
         alt={beforeAlt}
-        className="absolute top-0 left-0 w-full h-full object-contain pointer-events-none select-none"
+        className="pointer-events-none absolute top-0 left-0 h-full w-full select-none object-contain"
         draggable={false}
         src={beforeImage}
       />
       <img
         alt={afterAlt}
-        className="absolute top-0 left-0 w-full h-full object-contain pointer-events-none select-none"
+        className="pointer-events-none absolute top-0 left-0 h-full w-full select-none object-contain"
         draggable={false}
         src={afterImage}
         style={{
@@ -83,10 +83,10 @@ export const ComparisonSlider: React.FC<ComparisonSliderProps> = ({
         }}
       />
       <div
-        className="absolute top-0 bottom-0 w-1 bg-white cursor-ew-resize z-20 group-hover:scale-110 transition-transform"
+        className="absolute top-0 bottom-0 z-20 w-1 cursor-ew-resize bg-white transition-transform group-hover:scale-110"
         style={{ left: `${sliderPosition}%` }}
       >
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-lg">
+        <div className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-lg">
           <svg
             className="text-gray-600"
             fill="none"
diff --git a/apps/frontend/src/components/Field/index.tsx b/apps/frontend/src/components/Field/index.tsx
index 1388288c6..a5c71dda4 100644
--- a/apps/frontend/src/components/Field/index.tsx
+++ b/apps/frontend/src/components/Field/index.tsx
@@ -4,11 +4,16 @@ import { cn } from "../../helpers/cn";
 
 export interface FieldProps extends InputHTMLAttributes<HTMLInputElement> {
   register?: UseFormRegisterReturn;
+  error?: boolean;
 }
 
-export const Field = ({ className, register, ...rest }: FieldProps) => (
+export const Field = ({ className, register, error, ...rest }: FieldProps) => (
   <input
-    className={cn("input-vortex-primary input-ghost w-full rounded-lg border-1 border-neutral-300 p-2", className)}
+    className={cn(
+      "input-vortex-primary input-ghost w-full rounded-lg border p-2",
+      error ? "border-red-800" : "border-neutral-300",
+      className
+    )}
     {...register}
     {...rest}
   />
diff --git a/apps/frontend/src/components/Footer/index.tsx b/apps/frontend/src/components/Footer/index.tsx
index 0827d0e7d..d4826de8e 100644
--- a/apps/frontend/src/components/Footer/index.tsx
+++ b/apps/frontend/src/components/Footer/index.tsx
@@ -149,7 +149,7 @@ export function Footer() {
           </FooterSection>
 
           <FooterSection title={t("components.footer.business.title")}>
-            <FooterLink href="mailto:business@vortexfinance.co">{t("components.footer.business.contactSales")}</FooterLink>
+            <FooterLink href={`/${i18n.language}/contact`}>{t("components.footer.business.contactSales")}</FooterLink>
             <FooterLink href="mailto:support@vortexfinance.co">{t("components.footer.business.contactSupport")}</FooterLink>
           </FooterSection>
 
diff --git a/apps/frontend/src/routeTree.gen.ts b/apps/frontend/src/routeTree.gen.ts
index 6b6b74ea4..5fab317e9 100644
--- a/apps/frontend/src/routeTree.gen.ts
+++ b/apps/frontend/src/routeTree.gen.ts
@@ -15,6 +15,7 @@ import { Route as Char123LocaleChar125WidgetRouteImport } from './routes/{-$loca
 import { Route as Char123LocaleChar125TermsAndConditionsFullRouteImport } from './routes/{-$locale}/terms-and-conditions-full'
 import { Route as Char123LocaleChar125TermsAndConditionsRouteImport } from './routes/{-$locale}/terms-and-conditions'
 import { Route as Char123LocaleChar125PrivacyPolicyRouteImport } from './routes/{-$locale}/privacy-policy'
+import { Route as Char123LocaleChar125ContactRouteImport } from './routes/{-$locale}/contact'
 import { Route as Char123LocaleChar125BusinessRouteImport } from './routes/{-$locale}/business'
 
 const Char123LocaleChar125Route = Char123LocaleChar125RouteImport.update({
@@ -52,6 +53,12 @@ const Char123LocaleChar125PrivacyPolicyRoute =
     path: '/privacy-policy',
     getParentRoute: () => Char123LocaleChar125Route,
   } as any)
+const Char123LocaleChar125ContactRoute =
+  Char123LocaleChar125ContactRouteImport.update({
+    id: '/contact',
+    path: '/contact',
+    getParentRoute: () => Char123LocaleChar125Route,
+  } as any)
 const Char123LocaleChar125BusinessRoute =
   Char123LocaleChar125BusinessRouteImport.update({
     id: '/business',
@@ -62,6 +69,7 @@ const Char123LocaleChar125BusinessRoute =
 export interface FileRoutesByFullPath {
   '/{-$locale}': typeof Char123LocaleChar125RouteWithChildren
   '/{-$locale}/business': typeof Char123LocaleChar125BusinessRoute
+  '/{-$locale}/contact': typeof Char123LocaleChar125ContactRoute
   '/{-$locale}/privacy-policy': typeof Char123LocaleChar125PrivacyPolicyRoute
   '/{-$locale}/terms-and-conditions': typeof Char123LocaleChar125TermsAndConditionsRoute
   '/{-$locale}/terms-and-conditions-full': typeof Char123LocaleChar125TermsAndConditionsFullRoute
@@ -70,6 +78,7 @@ export interface FileRoutesByFullPath {
 }
 export interface FileRoutesByTo {
   '/{-$locale}/business': typeof Char123LocaleChar125BusinessRoute
+  '/{-$locale}/contact': typeof Char123LocaleChar125ContactRoute
   '/{-$locale}/privacy-policy': typeof Char123LocaleChar125PrivacyPolicyRoute
   '/{-$locale}/terms-and-conditions': typeof Char123LocaleChar125TermsAndConditionsRoute
   '/{-$locale}/terms-and-conditions-full': typeof Char123LocaleChar125TermsAndConditionsFullRoute
@@ -80,6 +89,7 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/{-$locale}': typeof Char123LocaleChar125RouteWithChildren
   '/{-$locale}/business': typeof Char123LocaleChar125BusinessRoute
+  '/{-$locale}/contact': typeof Char123LocaleChar125ContactRoute
   '/{-$locale}/privacy-policy': typeof Char123LocaleChar125PrivacyPolicyRoute
   '/{-$locale}/terms-and-conditions': typeof Char123LocaleChar125TermsAndConditionsRoute
   '/{-$locale}/terms-and-conditions-full': typeof Char123LocaleChar125TermsAndConditionsFullRoute
@@ -91,6 +101,7 @@ export interface FileRouteTypes {
   fullPaths:
     | '/{-$locale}'
     | '/{-$locale}/business'
+    | '/{-$locale}/contact'
     | '/{-$locale}/privacy-policy'
     | '/{-$locale}/terms-and-conditions'
     | '/{-$locale}/terms-and-conditions-full'
@@ -99,6 +110,7 @@ export interface FileRouteTypes {
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/{-$locale}/business'
+    | '/{-$locale}/contact'
     | '/{-$locale}/privacy-policy'
     | '/{-$locale}/terms-and-conditions'
     | '/{-$locale}/terms-and-conditions-full'
@@ -108,6 +120,7 @@ export interface FileRouteTypes {
     | '__root__'
     | '/{-$locale}'
     | '/{-$locale}/business'
+    | '/{-$locale}/contact'
     | '/{-$locale}/privacy-policy'
     | '/{-$locale}/terms-and-conditions'
     | '/{-$locale}/terms-and-conditions-full'
@@ -163,6 +176,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof Char123LocaleChar125PrivacyPolicyRouteImport
       parentRoute: typeof Char123LocaleChar125Route
     }
+    '/{-$locale}/contact': {
+      id: '/{-$locale}/contact'
+      path: '/contact'
+      fullPath: '/{-$locale}/contact'
+      preLoaderRoute: typeof Char123LocaleChar125ContactRouteImport
+      parentRoute: typeof Char123LocaleChar125Route
+    }
     '/{-$locale}/business': {
       id: '/{-$locale}/business'
       path: '/business'
@@ -175,6 +195,7 @@ declare module '@tanstack/react-router' {
 
 interface Char123LocaleChar125RouteChildren {
   Char123LocaleChar125BusinessRoute: typeof Char123LocaleChar125BusinessRoute
+  Char123LocaleChar125ContactRoute: typeof Char123LocaleChar125ContactRoute
   Char123LocaleChar125PrivacyPolicyRoute: typeof Char123LocaleChar125PrivacyPolicyRoute
   Char123LocaleChar125TermsAndConditionsRoute: typeof Char123LocaleChar125TermsAndConditionsRoute
   Char123LocaleChar125TermsAndConditionsFullRoute: typeof Char123LocaleChar125TermsAndConditionsFullRoute
@@ -184,6 +205,7 @@ interface Char123LocaleChar125RouteChildren {
 
 const Char123LocaleChar125RouteChildren: Char123LocaleChar125RouteChildren = {
   Char123LocaleChar125BusinessRoute: Char123LocaleChar125BusinessRoute,
+  Char123LocaleChar125ContactRoute: Char123LocaleChar125ContactRoute,
   Char123LocaleChar125PrivacyPolicyRoute:
     Char123LocaleChar125PrivacyPolicyRoute,
   Char123LocaleChar125TermsAndConditionsRoute:
diff --git a/apps/frontend/src/sections/business/GotQuestions/index.tsx b/apps/frontend/src/sections/business/GotQuestions/index.tsx
index 7138df5e1..9179ceec4 100644
--- a/apps/frontend/src/sections/business/GotQuestions/index.tsx
+++ b/apps/frontend/src/sections/business/GotQuestions/index.tsx
@@ -2,12 +2,14 @@ import { Trans, useTranslation } from "react-i18next";
 import { CallToActionSection } from "../../../components/CallToActionSection";
 
 export const GotQuestions = () => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   return (
     <CallToActionSection
       buttonText={t("sections.gotQuestions.contactSales")}
+      buttonUrl={`/${i18n.language}/contact`}
       description={t("sections.gotQuestions.description")}
+      isExternal={false}
       title={
         <Trans i18nKey="sections.gotQuestions.getStartedTitle">
           <span className="font-bold text-blue-400" />
diff --git a/apps/frontend/src/sections/business/Hero/index.tsx b/apps/frontend/src/sections/business/Hero/index.tsx
index 28dc37281..f880839fd 100644
--- a/apps/frontend/src/sections/business/Hero/index.tsx
+++ b/apps/frontend/src/sections/business/Hero/index.tsx
@@ -1,4 +1,5 @@
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid";
+import { Link } from "@tanstack/react-router";
 import { motion } from "motion/react";
 import { useTranslation } from "react-i18next";
 import WidgetSnippetImageEUR from "../../../assets/metawallet-vortex.png";
@@ -37,19 +38,18 @@ export function Hero() {
             </motion.p>
 
             <div className="mt-2 flex justify-center gap-x-4 lg:justify-start">
-              <motion.a
-                animate="visible"
-                aria-label={t("pages.business.hero.contactUs")}
-                className="btn btn-vortex-primary w-1/2 sm:w-1/3 lg:w-1/2 xl:w-2/5"
-                custom={0.55}
-                href="mailto:business@vortexfinance.co"
-                initial={reducedMotion ? "visible" : "hidden"}
-                rel="noopener noreferrer"
-                target="_blank"
-                variants={fadeInUp}
-              >
-                {t("pages.business.hero.contactUs")} <ArrowTopRightOnSquareIcon aria-hidden="true" className="h-4 w-4" />
-              </motion.a>
+              <Link className="w-1/2 sm:w-1/3 lg:w-1/2 xl:w-2/5" to="/{-$locale}/contact">
+                <motion.div
+                  animate="visible"
+                  aria-label={t("pages.business.hero.contactUs")}
+                  className="btn btn-vortex-primary w-full"
+                  custom={0.55}
+                  initial={reducedMotion ? "visible" : "hidden"}
+                  variants={fadeInUp}
+                >
+                  {t("pages.business.hero.contactUs")} <ArrowTopRightOnSquareIcon aria-hidden="true" className="h-4 w-4" />
+                </motion.div>
+              </Link>
               <motion.a
                 animate="visible"
                 aria-label={t("pages.business.hero.readDocs")}
diff --git a/apps/frontend/src/sections/individuals/GotQuestions/index.tsx b/apps/frontend/src/sections/individuals/GotQuestions/index.tsx
index 4f5e38faa..46879bb80 100644
--- a/apps/frontend/src/sections/individuals/GotQuestions/index.tsx
+++ b/apps/frontend/src/sections/individuals/GotQuestions/index.tsx
@@ -7,7 +7,9 @@ export const GotQuestions = () => {
   return (
     <CallToActionSection
       buttonText={t("sections.gotQuestions.contactUs")}
+      buttonUrl="https://forms.gle/dKh8ckXheRPdRa398"
       description={t("sections.gotQuestions.description")}
+      isExternal={true}
       title={
         <Trans i18nKey="sections.gotQuestions.title">
           Got Questions? <br /> We're here to help!
diff --git a/apps/frontend/src/services/api/index.ts b/apps/frontend/src/services/api/index.ts
index ffa971d44..69fd9c7a5 100644
--- a/apps/frontend/src/services/api/index.ts
+++ b/apps/frontend/src/services/api/index.ts
@@ -1,5 +1,6 @@
 export * from "./api-client";
 export * from "./brla.service";
+export * from "./contact.service";
 export * from "./email.service";
 export * from "./maintenance.service";
 export * from "./moonbeam.service";
diff --git a/apps/frontend/src/stories/AveniaLivenessStep.stories.tsx b/apps/frontend/src/stories/AveniaLivenessStep.stories.tsx
index be1bb7e39..28a2989a4 100644
--- a/apps/frontend/src/stories/AveniaLivenessStep.stories.tsx
+++ b/apps/frontend/src/stories/AveniaLivenessStep.stories.tsx
@@ -2,14 +2,14 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { AveniaLivenessStep } from "../components/widget-steps/AveniaLivenessStep";
 
 // Create mock Avenia KYC actor
-const createMockAveniaKycActor = (livenessCheckOpened: boolean = false) => ({
+const createMockAveniaKycActor = (livenessCheckOpened = false) => ({
   send: (event: any) => {
     console.log("Avenia KYC event:", event);
   }
 });
 
 // Create mock Avenia state
-const createMockAveniaState = (livenessCheckOpened: boolean = false, livenessUrl: string = "https://example.com/liveness") => ({
+const createMockAveniaState = (livenessCheckOpened = false, livenessUrl = "https://example.com/liveness") => ({
   context: {
     documentUploadIds: {
       livenessUrl: livenessUrl
diff --git a/apps/frontend/src/stories/RampFollowUpRedirectStep.stories.tsx b/apps/frontend/src/stories/RampFollowUpRedirectStep.stories.tsx
index c3ce76e0f..beb7999c5 100644
--- a/apps/frontend/src/stories/RampFollowUpRedirectStep.stories.tsx
+++ b/apps/frontend/src/stories/RampFollowUpRedirectStep.stories.tsx
@@ -3,7 +3,7 @@ import { RampFollowUpRedirectStep } from "../components/widget-steps/RampFollowU
 import { RampStateContext } from "../contexts/rampState";
 
 // Helper to create a complete snapshot
-const createSnapshot = (callbackUrl: string = "https://example.com/callback") => ({
+const createSnapshot = (callbackUrl = "https://example.com/callback") => ({
   children: {},
   context: {
     apiKey: undefined,
diff --git a/apps/frontend/src/translations/en.json b/apps/frontend/src/translations/en.json
index 297266b69..c7ecce4a9 100644
--- a/apps/frontend/src/translations/en.json
+++ b/apps/frontend/src/translations/en.json
@@ -591,6 +591,43 @@
         "title2": " Everything handled."
       }
     },
+    "contact": {
+      "emailUs": "You can also email us at",
+      "error": "Something went wrong. Please try again.",
+      "form": {
+        "email": "Email",
+        "emailPlaceholder": "your@email.com",
+        "fullName": "Full name",
+        "fullNamePlaceholder": "Enter your full name",
+        "holdToSubmit": "Hold to submit",
+        "inquiry": "Tell us more about your inquiry",
+        "inquiryPlaceholder": "Describe your project and how we can help...",
+        "privacyPolicy": "I agree to Vortex",
+        "privacyPolicyLink": "Privacy Policy",
+        "projectName": "Project name",
+        "projectNamePlaceholder": "Enter your project name",
+        "submit": "Submit"
+      },
+      "info": {
+        "integrationHelp": "Get integration help",
+        "onboardingHelp": "Get onboarding help",
+        "requestDemo": "Request a demo",
+        "supportLink": "Contact support",
+        "technicalQuestions": "Technical issues or product questions?",
+        "title": "Contact sales"
+      },
+      "success": "Thank you! We'll be in touch soon.",
+      "title": "Tell us how to help",
+      "validation": {
+        "emailFormat": "Please enter a valid email address",
+        "emailRequired": "Email is required",
+        "fullNameRequired": "Full name is required",
+        "inquiryMinLength": "Please provide more details (at least 10 characters)",
+        "inquiryRequired": "Please tell us about your inquiry",
+        "privacyPolicyRequired": "You must accept the privacy policy",
+        "projectNameRequired": "Project name is required"
+      }
+    },
     "failure": {
       "contactedSupport": "Ready to try again?",
       "contactSupport": {
diff --git a/apps/frontend/src/translations/pt.json b/apps/frontend/src/translations/pt.json
index 0734d69cd..7f8d3657f 100644
--- a/apps/frontend/src/translations/pt.json
+++ b/apps/frontend/src/translations/pt.json
@@ -587,6 +587,43 @@
         "title": "Uma integração. Tudo resolvido."
       }
     },
+    "contact": {
+      "emailUs": "Você também pode nos enviar um e-mail para",
+      "error": "Algo deu errado. Por favor, tente novamente.",
+      "form": {
+        "email": "E-mail",
+        "emailPlaceholder": "seu@email.com",
+        "fullName": "Nome completo",
+        "fullNamePlaceholder": "Digite seu nome completo",
+        "holdToSubmit": "Segure para enviar",
+        "inquiry": "Conte-nos mais sobre sua consulta",
+        "inquiryPlaceholder": "Descreva seu projeto e como podemos ajudar...",
+        "privacyPolicy": "Eu concordo com a",
+        "privacyPolicyLink": "Política de Privacidade",
+        "projectName": "Nome do projeto",
+        "projectNamePlaceholder": "Digite o nome do seu projeto",
+        "submit": "Enviar"
+      },
+      "info": {
+        "integrationHelp": "Obter ajuda de integração",
+        "onboardingHelp": "Obter ajuda de onboarding",
+        "requestDemo": "Solicitar uma demonstração",
+        "supportLink": "Contatar suporte",
+        "technicalQuestions": "Problemas técnicos ou dúvidas sobre o produto?",
+        "title": "Fale com vendas"
+      },
+      "success": "Obrigado! Entraremos em contato em breve.",
+      "title": "Conte-nos como podemos ajudar",
+      "validation": {
+        "emailFormat": "Por favor, insira um e-mail válido",
+        "emailRequired": "E-mail é obrigatório",
+        "fullNameRequired": "Nome completo é obrigatório",
+        "inquiryMinLength": "Por favor, forneça mais detalhes (pelo menos 10 caracteres)",
+        "inquiryRequired": "Por favor, conte-nos sobre sua consulta",
+        "privacyPolicyRequired": "Você deve aceitar a política de privacidade",
+        "projectNameRequired": "Nome do projeto é obrigatório"
+      }
+    },
     "failure": {
       "contactedSupport": "Já falou com o suporte e quer iniciar uma nova transação?",
       "contactSupport": {
diff --git a/apps/rebalancer/src/rebalance/brla-to-axlusdc/index.ts b/apps/rebalancer/src/rebalance/brla-to-axlusdc/index.ts
index 8bd5215d4..7ab5c4a65 100644
--- a/apps/rebalancer/src/rebalance/brla-to-axlusdc/index.ts
+++ b/apps/rebalancer/src/rebalance/brla-to-axlusdc/index.ts
@@ -17,7 +17,7 @@ import {
 /// Takes care of rebalancing an overfull BRLA pool on Pendulum with the axl.USDC pool on Pendulum.
 /// @param amountAxlUsdc - The amount of USDC.axl to swap to BRLA initially.
 /// @param forceRestart - If true, ignores any previous state and starts a new rebalance.
-export async function rebalanceBrlaToUsdcAxl(amountAxlUsdc: string, forceRestart: boolean = false) {
+export async function rebalanceBrlaToUsdcAxl(amountAxlUsdc: string, forceRestart = false) {
   console.log(`Starting rebalance from BRLA to USDC.axl with amount: ${amountAxlUsdc}`);
 
   const stateManager = new StateManager();
diff --git a/packages/shared/src/endpoints/index.ts b/packages/shared/src/endpoints/index.ts
index b312f619c..ab3da06cc 100644
--- a/packages/shared/src/endpoints/index.ts
+++ b/packages/shared/src/endpoints/index.ts
@@ -1,5 +1,6 @@
 // Export all endpoint types
 export * from "./brla.endpoints";
+export * from "./contact.endpoints";
 export * from "./email.endpoints";
 export * from "./monerium";
 export * from "./moonbeam.endpoints";
diff --git a/packages/shared/src/services/pendulum/apiManager.ts b/packages/shared/src/services/pendulum/apiManager.ts
index 4a4d10f4b..10094b50e 100644
--- a/packages/shared/src/services/pendulum/apiManager.ts
+++ b/packages/shared/src/services/pendulum/apiManager.ts
@@ -128,7 +128,7 @@ export class ApiManager {
     const usedIndices = uuid ? this.usedRpcIndices.get(uuid) || new Set<number>() : null;
 
     // Get available indices: all if no UUID, unused ones if UUID provided
-    let availableIndices = uuid
+    const availableIndices = uuid
       ? network.wsUrls.map((_, index) => index).filter(index => !usedIndices!.has(index))
       : network.wsUrls.map((_, index) => index);
 
diff --git a/packages/shared/src/tokens/constants/misc.ts b/packages/shared/src/tokens/constants/misc.ts
index de0aaecf3..848f5b1d0 100644
--- a/packages/shared/src/tokens/constants/misc.ts
+++ b/packages/shared/src/tokens/constants/misc.ts
@@ -23,5 +23,5 @@ export const ERC20_EURE_POLYGON_V1: `0x${string}` = "0x18ec0A6E18E5bc3784fDd3a36
 // V2 is used for the permit - transferFrom flow.
 // The token balances are synced between both contracts.
 export const ERC20_EURE_POLYGON_V2: `0x${string}` = "0xE0aEa583266584DafBB3f9C3211d5588c73fEa8d"; // EUR.e on Polygon V2
-export const ERC20_EURE_POLYGON_TOKEN_NAME = `Monerium EURe`;
+export const ERC20_EURE_POLYGON_TOKEN_NAME = "Monerium EURe";
 export const ERC20_EURE_POLYGON_DECIMALS = 18; // EUR.e on Polygon has 18 decimals

From f1595869add5f18b1ba59bb5cd0bbeff048640f5 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Thu, 22 Jan 2026 11:29:12 +0100
Subject: [PATCH 12/17] improve /contact animations and accessibility

---
 .../components/ContactForm/ContactInfo.tsx    |  32 +-
 .../src/components/ContactForm/index.tsx      | 278 ++++++++++++++----
 apps/frontend/src/pages/contact/index.tsx     |  37 ++-
 3 files changed, 275 insertions(+), 72 deletions(-)

diff --git a/apps/frontend/src/components/ContactForm/ContactInfo.tsx b/apps/frontend/src/components/ContactForm/ContactInfo.tsx
index 039d51e9b..807af413b 100644
--- a/apps/frontend/src/components/ContactForm/ContactInfo.tsx
+++ b/apps/frontend/src/components/ContactForm/ContactInfo.tsx
@@ -1,39 +1,43 @@
 import { ChevronRightIcon } from "@heroicons/react/24/outline";
 import { useTranslation } from "react-i18next";
-import Telegram from "../../assets/socials/telegram.svg";
 
 export function ContactInfo() {
   const { t } = useTranslation();
 
   return (
-    <div className="rounded-lg bg-base-100 p-8">
-      <h2 className="mb-6 font-bold text-2xl text-gray-900">{t("pages.contact.info.title")}</h2>
+    <div className="rounded-xl bg-gray-50 p-6 md:p-8">
+      <h2 className="mb-6 font-bold text-xl text-gray-900" style={{ textWrap: "balance" }}>
+        {t("pages.contact.info.title")}
+      </h2>
 
       <ul className="mb-8 space-y-3 text-gray-700">
         <li className="flex items-center gap-3">
           <CheckIcon />
-          {t("pages.contact.info.requestDemo")}
+          <span>{t("pages.contact.info.requestDemo")}</span>
         </li>
         <li className="flex items-center gap-3">
           <CheckIcon />
-          {t("pages.contact.info.onboardingHelp")}
+          <span>{t("pages.contact.info.onboardingHelp")}</span>
         </li>
         <li className="flex items-center gap-3">
           <CheckIcon />
-          {t("pages.contact.info.integrationHelp")}
+          <span>{t("pages.contact.info.integrationHelp")}</span>
         </li>
       </ul>
 
       <div className="border-gray-200 border-t pt-6">
-        <p className="mb-3 text-gray-700">{t("pages.contact.info.technicalQuestions")}</p>
+        <p className="mb-3 text-gray-600 text-sm">{t("pages.contact.info.technicalQuestions")}</p>
         <a
-          className="group flex items-center gap-2 text-blue-600 transition-colors hover:text-blue-800"
+          className="group inline-flex min-h-[44px] items-center gap-2 text-blue-600 transition-colors duration-150 ease-out hover:text-blue-700"
           href="https://t.me/vortex_fi"
           rel="noopener noreferrer"
           target="_blank"
         >
-          {t("pages.contact.info.supportLink")}
-          <ChevronRightIcon className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+          <span className="font-medium">{t("pages.contact.info.supportLink")}</span>
+          <ChevronRightIcon
+            aria-hidden="true"
+            className="h-4 w-4 transition-transform duration-150 ease-out group-hover:translate-x-0.5"
+          />
         </a>
       </div>
     </div>
@@ -42,7 +46,13 @@ export function ContactInfo() {
 
 function CheckIcon() {
   return (
-    <svg className="h-5 w-5 flex-shrink-0 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <svg
+      aria-hidden="true"
+      className="h-5 w-5 flex-shrink-0 text-blue-600"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
       <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} />
     </svg>
   );
diff --git a/apps/frontend/src/components/ContactForm/index.tsx b/apps/frontend/src/components/ContactForm/index.tsx
index 677e8b2d7..faddcbbe0 100644
--- a/apps/frontend/src/components/ContactForm/index.tsx
+++ b/apps/frontend/src/components/ContactForm/index.tsx
@@ -1,30 +1,43 @@
 import { useMutation } from "@tanstack/react-query";
-import { motion } from "motion/react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { cn } from "../../helpers/cn";
 import { useContactForm } from "../../hooks/useContactForm";
 import { submitContactForm } from "../../services/api/contact.service";
-import { Field } from "../Field";
 import { HoldButton } from "../HoldButton";
-import { TextArea } from "../TextArea";
+
+const EASE_OUT = [0.25, 0.46, 0.45, 0.94] as const;
 
 export function ContactForm() {
   const { t, i18n } = useTranslation();
   const { form } = useContactForm();
+  const formRef = useRef<HTMLFormElement>(null);
+  const shouldReduceMotion = useReducedMotion();
+
   const {
     register,
     handleSubmit,
-    formState: { isSubmitting, isValid },
+    formState: { isSubmitting, isValid, errors, touchedFields },
     reset
   } = form;
 
-  const { mutate, isPending, isSuccess, isError } = useMutation({
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const { mutate, isPending, isError } = useMutation({
     mutationFn: submitContactForm,
     onSuccess: () => {
       reset();
+      setShowSuccess(true);
     }
   });
 
+  useEffect(() => {
+    if (!showSuccess) return;
+    const timeout = setTimeout(() => setShowSuccess(false), 5000);
+    return () => clearTimeout(timeout);
+  }, [showSuccess]);
+
   const onSubmit = handleSubmit(data => {
     mutate({
       email: data.email,
@@ -35,104 +48,265 @@ export function ContactForm() {
     });
   });
 
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+        e.preventDefault();
+        if (isValid && !isPending && !isSubmitting) {
+          onSubmit();
+        }
+      }
+    },
+    [isValid, isPending, isSubmitting, onSubmit]
+  );
+
   const loading = isPending || isSubmitting;
 
+  const formId = useId();
+
   return (
-    <form className="space-y-2" onSubmit={e => e.preventDefault()}>
-      <FormField label={t("pages.contact.form.fullName")}>
-        <Field disabled={loading} placeholder={t("pages.contact.form.fullNamePlaceholder")} register={register("fullName")} />
+    <form className="space-y-4" onKeyDown={handleKeyDown} onSubmit={e => e.preventDefault()} ref={formRef}>
+      <FormField
+        error={touchedFields.fullName ? errors.fullName?.message : undefined}
+        htmlFor={`${formId}-fullName`}
+        label={t("pages.contact.form.fullName")}
+      >
+        <input
+          {...register("fullName")}
+          autoComplete="name"
+          className={cn(
+            "w-full rounded-lg border bg-white px-3 py-2.5 text-base text-gray-900 outline-none",
+            "transition-[border-color,box-shadow] duration-150 ease-out",
+            "placeholder:text-gray-400",
+            "focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20",
+            "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
+            touchedFields.fullName && errors.fullName ? "border-red-500" : "border-gray-200"
+          )}
+          disabled={loading}
+          id={`${formId}-fullName`}
+          placeholder={t("pages.contact.form.fullNamePlaceholder")}
+          spellCheck={false}
+        />
       </FormField>
 
-      <FormField label={t("pages.contact.form.email")}>
-        <Field
+      <FormField
+        error={touchedFields.email ? errors.email?.message : undefined}
+        htmlFor={`${formId}-email`}
+        label={t("pages.contact.form.email")}
+      >
+        <input
+          {...register("email")}
+          autoComplete="email"
+          className={cn(
+            "w-full rounded-lg border bg-white px-3 py-2.5 text-base text-gray-900 outline-none",
+            "transition-[border-color,box-shadow] duration-150 ease-out",
+            "placeholder:text-gray-400",
+            "focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20",
+            "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
+            touchedFields.email && errors.email ? "border-red-500" : "border-gray-200"
+          )}
           disabled={loading}
+          id={`${formId}-email`}
           placeholder={t("pages.contact.form.emailPlaceholder")}
-          register={register("email")}
           type="email"
         />
       </FormField>
 
-      <FormField label={t("pages.contact.form.projectName")}>
-        <Field
+      <FormField
+        error={touchedFields.projectName ? errors.projectName?.message : undefined}
+        htmlFor={`${formId}-projectName`}
+        label={t("pages.contact.form.projectName")}
+      >
+        <input
+          {...register("projectName")}
+          autoComplete="organization"
+          className={cn(
+            "w-full rounded-lg border bg-white px-3 py-2.5 text-base text-gray-900 outline-none",
+            "transition-[border-color,box-shadow] duration-150 ease-out",
+            "placeholder:text-gray-400",
+            "focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20",
+            "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
+            touchedFields.projectName && errors.projectName ? "border-red-500" : "border-gray-200"
+          )}
           disabled={loading}
+          id={`${formId}-projectName`}
           placeholder={t("pages.contact.form.projectNamePlaceholder")}
-          register={register("projectName")}
+          spellCheck={false}
         />
       </FormField>
 
-      <FormField label={t("pages.contact.form.inquiry")}>
-        <TextArea
+      <FormField
+        error={touchedFields.inquiry ? errors.inquiry?.message : undefined}
+        htmlFor={`${formId}-inquiry`}
+        label={t("pages.contact.form.inquiry")}
+      >
+        <textarea
+          {...register("inquiry")}
+          className={cn(
+            "w-full resize-none rounded-lg border bg-white px-3 py-2.5 text-base text-gray-900 outline-none",
+            "transition-[border-color,box-shadow] duration-150 ease-out",
+            "placeholder:text-gray-400",
+            "focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20",
+            "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
+            touchedFields.inquiry && errors.inquiry ? "border-red-500" : "border-gray-200"
+          )}
           disabled={loading}
+          id={`${formId}-inquiry`}
           placeholder={t("pages.contact.form.inquiryPlaceholder")}
-          register={register("inquiry")}
           rows={4}
         />
       </FormField>
 
-      <div className="flex items-start gap-2 pt-1">
-        <input
-          type="checkbox"
-          {...register("privacyPolicyAccepted")}
-          className="checkbox checkbox-primary checkbox-sm mt-0.5"
-          disabled={loading}
-        />
-        <label className="text-gray-500 text-sm">
+      <label className="flex cursor-pointer select-none items-start gap-3 py-1">
+        <span className="relative mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center">
+          <input
+            {...register("privacyPolicyAccepted")}
+            className="peer sr-only"
+            disabled={loading}
+            id={`${formId}-privacy`}
+            type="checkbox"
+          />
+          <span
+            className={cn(
+              "flex h-5 w-5 items-center justify-center rounded border-2 transition-colors duration-150 ease-out",
+              "peer-checked:border-blue-600 peer-checked:bg-blue-600",
+              "peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500/20 peer-focus-visible:ring-offset-1",
+              "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+              touchedFields.privacyPolicyAccepted && errors.privacyPolicyAccepted ? "border-red-500" : "border-gray-300"
+            )}
+          >
+            <svg
+              aria-hidden="true"
+              className="h-3 w-3 text-white opacity-0 transition-opacity duration-100 peer-checked:opacity-100"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={3}
+              viewBox="0 0 24 24"
+            >
+              <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </span>
+        </span>
+        <span className="text-gray-600 text-sm leading-tight">
           {t("pages.contact.form.privacyPolicy")}{" "}
           <a
-            className="text-blue-600 underline hover:text-blue-800"
+            className="text-blue-600 underline decoration-blue-600/30 underline-offset-2 transition-colors duration-150 ease-out hover:text-blue-700 hover:decoration-blue-700/50"
             href={`/${i18n.language}/privacy-policy`}
+            onClick={e => e.stopPropagation()}
             rel="noopener noreferrer"
             target="_blank"
           >
             {t("pages.contact.form.privacyPolicyLink")}
           </a>
-        </label>
-      </div>
+        </span>
+      </label>
 
-      <div className="border-gray-200 border-b pt-2 pb-4">
+      <div className="pt-2">
         <HoldButton
-          className={cn(loading && "bg-primary text-white")}
+          className={cn("touch-manipulation", loading && "bg-primary text-white")}
           disabled={loading || !isValid}
           holdClassName="bg-primary text-white"
           onComplete={onSubmit}
         >
-          {loading ? <span className="loading loading-spinner loading-sm" /> : t("pages.contact.form.holdToSubmit")}
+          {loading ? (
+            <span className="flex items-center gap-2">
+              <svg aria-hidden="true" className="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path
+                  className="opacity-75"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span>Sending...</span>
+            </span>
+          ) : (
+            t("pages.contact.form.holdToSubmit")
+          )}
         </HoldButton>
       </div>
 
-      {isSuccess && (
-        <motion.div
-          animate={{ opacity: 1, y: 0 }}
-          className="rounded-md bg-green-50 p-3 text-center text-green-800 text-sm"
-          initial={{ opacity: 0, y: -10 }}
-        >
-          {t("pages.contact.success")}
-        </motion.div>
-      )}
-
-      {isError && (
-        <motion.div
-          animate={{ opacity: 1, y: 0 }}
-          className="rounded-md bg-red-50 p-3 text-center text-red-800 text-sm"
-          initial={{ opacity: 0, y: -10 }}
-        >
-          {t("pages.contact.error")}
-        </motion.div>
-      )}
+      <AnimatePresence mode="wait">
+        {showSuccess && (
+          <motion.div
+            animate={{ opacity: 1, y: 0 }}
+            className="flex items-center gap-3 rounded-lg bg-green-50 p-3 text-green-800 text-sm shadow-[0_0_0_1px_rgba(34,197,94,0.2)]"
+            exit={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: -8 }}
+            initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 8 }}
+            role="status"
+            transition={{ duration: 0.2, ease: EASE_OUT }}
+          >
+            <svg
+              aria-hidden="true"
+              className="h-5 w-5 flex-shrink-0 text-green-600"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              viewBox="0 0 24 24"
+            >
+              <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+            <span>{t("pages.contact.success")}</span>
+          </motion.div>
+        )}
+
+        {isError && (
+          <motion.div
+            animate={{ opacity: 1, y: 0 }}
+            className="flex items-center gap-3 rounded-lg bg-red-50 p-3 text-red-800 text-sm shadow-[0_0_0_1px_rgba(239,68,68,0.2)]"
+            exit={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: -8 }}
+            initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 8 }}
+            role="alert"
+            transition={{ duration: 0.2, ease: EASE_OUT }}
+          >
+            <svg
+              aria-hidden="true"
+              className="h-5 w-5 flex-shrink-0 text-red-600"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              viewBox="0 0 24 24"
+            >
+              <path d="M6 18L18 6M6 6l12 12" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+            <span>{t("pages.contact.error")}</span>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </form>
   );
 }
 
 interface FormFieldProps {
   label: string;
+  htmlFor: string;
   children: React.ReactNode;
+  error?: string;
 }
 
-function FormField({ label, children }: FormFieldProps) {
+function FormField({ label, htmlFor, children, error }: FormFieldProps) {
+  const shouldReduceMotion = useReducedMotion();
+
   return (
     <div>
-      <label className="mb-1 block font-medium text-gray-600 text-xs">{label}</label>
+      <label className="mb-1.5 block font-medium text-gray-700 text-sm" htmlFor={htmlFor}>
+        {label}
+      </label>
       {children}
+      <AnimatePresence>
+        {error && (
+          <motion.p
+            animate={{ height: "auto", opacity: 1 }}
+            className="mt-1 text-red-600 text-xs"
+            exit={{ height: 0, opacity: 0 }}
+            initial={shouldReduceMotion ? { opacity: 0 } : { height: 0, opacity: 0 }}
+            role="alert"
+            transition={{ duration: 0.15, ease: EASE_OUT }}
+          >
+            {error}
+          </motion.p>
+        )}
+      </AnimatePresence>
     </div>
   );
 }
diff --git a/apps/frontend/src/pages/contact/index.tsx b/apps/frontend/src/pages/contact/index.tsx
index 89ce4a84c..57960241d 100644
--- a/apps/frontend/src/pages/contact/index.tsx
+++ b/apps/frontend/src/pages/contact/index.tsx
@@ -1,27 +1,46 @@
+import { motion, useReducedMotion } from "motion/react";
 import { useTranslation } from "react-i18next";
 import { ContactForm } from "../../components/ContactForm";
 import { ContactInfo } from "../../components/ContactForm/ContactInfo";
 
 export function ContactPage() {
   const { t } = useTranslation();
+  const shouldReduceMotion = useReducedMotion();
 
   return (
-    <main className="container mx-auto max-w-6xl px-4 py-20 md:px-10">
-      <div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
-        <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-xs">
-          <h1 className="mb-4 border-gray-200 border-b pb-4 font-bold text-xl">{t("pages.contact.title")}</h1>
+    <main className="container mx-auto max-w-6xl px-4 py-16 md:px-10 md:py-20">
+      <div className="grid grid-cols-1 items-start gap-10 lg:grid-cols-2 lg:gap-12">
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          className="rounded-xl bg-white p-6 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_4px_12px_rgba(0,0,0,0.05)] md:p-8"
+          initial={shouldReduceMotion ? false : { opacity: 0, y: 12 }}
+          transition={{ duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] }}
+        >
+          <h1 className="mb-6 font-bold text-gray-900 text-xl" style={{ textWrap: "balance" }}>
+            {t("pages.contact.title")}
+          </h1>
+
           <ContactForm />
-          <p className="mt-4 pt-4 text-gray-500 text-sm">
+
+          <p className="mt-6 border-gray-100 border-t pt-6 text-gray-500 text-sm">
             {t("pages.contact.emailUs")}{" "}
-            <a className="text-blue-600 hover:underline" href="mailto:sales@vortexfinance.co">
+            <a
+              className="text-blue-600 underline decoration-blue-600/30 underline-offset-2 transition-colors duration-150 ease-out hover:text-blue-700 hover:decoration-blue-700/50"
+              href="mailto:sales@vortexfinance.co"
+            >
               sales@vortexfinance.co
             </a>
           </p>
-        </div>
+        </motion.div>
 
-        <div className="lg:pl-8">
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          className="lg:sticky lg:top-8"
+          initial={shouldReduceMotion ? false : { opacity: 0, y: 12 }}
+          transition={{ delay: shouldReduceMotion ? 0 : 0.1, duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] }}
+        >
           <ContactInfo />
-        </div>
+        </motion.div>
       </div>
     </main>
   );

From 6354cafe2f90a8c96aaa0333dd785a198281b173 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Thu, 22 Jan 2026 11:39:55 +0100
Subject: [PATCH 13/17] refactor contact styles

---
 .../src/components/ContactForm/index.tsx      | 267 ++++++++----------
 .../src/components/HoldButton/index.tsx       |   2 +-
 2 files changed, 114 insertions(+), 155 deletions(-)

diff --git a/apps/frontend/src/components/ContactForm/index.tsx b/apps/frontend/src/components/ContactForm/index.tsx
index faddcbbe0..7dfbcd5d8 100644
--- a/apps/frontend/src/components/ContactForm/index.tsx
+++ b/apps/frontend/src/components/ContactForm/index.tsx
@@ -5,9 +5,11 @@ import { useTranslation } from "react-i18next";
 import { cn } from "../../helpers/cn";
 import { useContactForm } from "../../hooks/useContactForm";
 import { submitContactForm } from "../../services/api/contact.service";
+import { Field } from "../Field";
 import { HoldButton } from "../HoldButton";
+import { TextArea } from "../TextArea";
 
-const EASE_OUT = [0.25, 0.46, 0.45, 0.94] as const;
+type ButtonState = "idle" | "loading" | "success" | "error";
 
 export function ContactForm() {
   const { t, i18n } = useTranslation();
@@ -22,21 +24,31 @@ export function ContactForm() {
     reset
   } = form;
 
-  const [showSuccess, setShowSuccess] = useState(false);
+  const [buttonState, setButtonState] = useState<ButtonState>("idle");
 
-  const { mutate, isPending, isError } = useMutation({
+  const { mutate, isPending } = useMutation({
     mutationFn: submitContactForm,
+    onError: () => {
+      setButtonState("error");
+    },
     onSuccess: () => {
       reset();
-      setShowSuccess(true);
+      setButtonState("success");
     }
   });
 
   useEffect(() => {
-    if (!showSuccess) return;
-    const timeout = setTimeout(() => setShowSuccess(false), 5000);
-    return () => clearTimeout(timeout);
-  }, [showSuccess]);
+    if (buttonState === "success" || buttonState === "error") {
+      const timeout = setTimeout(() => setButtonState("idle"), 3000);
+      return () => clearTimeout(timeout);
+    }
+  }, [buttonState]);
+
+  useEffect(() => {
+    if (isPending || isSubmitting) {
+      setButtonState("loading");
+    }
+  }, [isPending, isSubmitting]);
 
   const onSubmit = handleSubmit(data => {
     mutate({
@@ -61,30 +73,36 @@ export function ContactForm() {
   );
 
   const loading = isPending || isSubmitting;
-
   const formId = useId();
 
+  const buttonCopy: Record<ButtonState, string> = {
+    error: t("pages.contact.error"),
+    idle: t("pages.contact.form.holdToSubmit"),
+    loading: "Sending…",
+    success: t("pages.contact.success")
+  };
+
+  const getButtonClassName = () => {
+    if (buttonState === "success") return "bg-green-500 text-white";
+    if (buttonState === "error") return "bg-red-300 text-red-800";
+    if (loading) return "bg-primary text-white";
+    return "";
+  };
+
   return (
-    <form className="space-y-4" onKeyDown={handleKeyDown} onSubmit={e => e.preventDefault()} ref={formRef}>
+    <form className="space-y-2" onKeyDown={handleKeyDown} onSubmit={e => e.preventDefault()} ref={formRef}>
       <FormField
         error={touchedFields.fullName ? errors.fullName?.message : undefined}
         htmlFor={`${formId}-fullName`}
         label={t("pages.contact.form.fullName")}
       >
-        <input
-          {...register("fullName")}
+        <Field
           autoComplete="name"
-          className={cn(
-            "w-full rounded-lg border bg-white px-3 py-2.5 text-base text-gray-900 outline-none",
-            "transition-[border-color,box-shadow] duration-150 ease-out",
-            "placeholder:text-gray-400",
-            "focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20",
-            "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
-            touchedFields.fullName && errors.fullName ? "border-red-500" : "border-gray-200"
-          )}
           disabled={loading}
+          error={touchedFields.fullName && !!errors.fullName}
           id={`${formId}-fullName`}
           placeholder={t("pages.contact.form.fullNamePlaceholder")}
+          register={register("fullName")}
           spellCheck={false}
         />
       </FormField>
@@ -94,20 +112,13 @@ export function ContactForm() {
         htmlFor={`${formId}-email`}
         label={t("pages.contact.form.email")}
       >
-        <input
-          {...register("email")}
+        <Field
           autoComplete="email"
-          className={cn(
-            "w-full rounded-lg border bg-white px-3 py-2.5 text-base text-gray-900 outline-none",
-            "transition-[border-color,box-shadow] duration-150 ease-out",
-            "placeholder:text-gray-400",
-            "focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20",
-            "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
-            touchedFields.email && errors.email ? "border-red-500" : "border-gray-200"
-          )}
           disabled={loading}
+          error={touchedFields.email && !!errors.email}
           id={`${formId}-email`}
           placeholder={t("pages.contact.form.emailPlaceholder")}
+          register={register("email")}
           type="email"
         />
       </FormField>
@@ -117,20 +128,13 @@ export function ContactForm() {
         htmlFor={`${formId}-projectName`}
         label={t("pages.contact.form.projectName")}
       >
-        <input
-          {...register("projectName")}
+        <Field
           autoComplete="organization"
-          className={cn(
-            "w-full rounded-lg border bg-white px-3 py-2.5 text-base text-gray-900 outline-none",
-            "transition-[border-color,box-shadow] duration-150 ease-out",
-            "placeholder:text-gray-400",
-            "focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20",
-            "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
-            touchedFields.projectName && errors.projectName ? "border-red-500" : "border-gray-200"
-          )}
           disabled={loading}
+          error={touchedFields.projectName && !!errors.projectName}
           id={`${formId}-projectName`}
           placeholder={t("pages.contact.form.projectNamePlaceholder")}
+          register={register("projectName")}
           spellCheck={false}
         />
       </FormField>
@@ -140,139 +144,93 @@ export function ContactForm() {
         htmlFor={`${formId}-inquiry`}
         label={t("pages.contact.form.inquiry")}
       >
-        <textarea
-          {...register("inquiry")}
-          className={cn(
-            "w-full resize-none rounded-lg border bg-white px-3 py-2.5 text-base text-gray-900 outline-none",
-            "transition-[border-color,box-shadow] duration-150 ease-out",
-            "placeholder:text-gray-400",
-            "focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20",
-            "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
-            touchedFields.inquiry && errors.inquiry ? "border-red-500" : "border-gray-200"
-          )}
+        <TextArea
           disabled={loading}
+          error={touchedFields.inquiry && !!errors.inquiry}
           id={`${formId}-inquiry`}
           placeholder={t("pages.contact.form.inquiryPlaceholder")}
+          register={register("inquiry")}
           rows={4}
         />
       </FormField>
 
-      <label className="flex cursor-pointer select-none items-start gap-3 py-1">
-        <span className="relative mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center">
-          <input
-            {...register("privacyPolicyAccepted")}
-            className="peer sr-only"
-            disabled={loading}
-            id={`${formId}-privacy`}
-            type="checkbox"
-          />
-          <span
-            className={cn(
-              "flex h-5 w-5 items-center justify-center rounded border-2 transition-colors duration-150 ease-out",
-              "peer-checked:border-blue-600 peer-checked:bg-blue-600",
-              "peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500/20 peer-focus-visible:ring-offset-1",
-              "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-              touchedFields.privacyPolicyAccepted && errors.privacyPolicyAccepted ? "border-red-500" : "border-gray-300"
-            )}
-          >
-            <svg
-              aria-hidden="true"
-              className="h-3 w-3 text-white opacity-0 transition-opacity duration-100 peer-checked:opacity-100"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={3}
-              viewBox="0 0 24 24"
-            >
-              <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-          </span>
-        </span>
-        <span className="text-gray-600 text-sm leading-tight">
+      <div className="flex items-start gap-2 pt-1">
+        <input
+          {...register("privacyPolicyAccepted")}
+          className="checkbox checkbox-primary checkbox-sm mt-0.5"
+          disabled={loading}
+          id={`${formId}-privacy`}
+          type="checkbox"
+        />
+        <label className="text-gray-500 text-sm" htmlFor={`${formId}-privacy`}>
           {t("pages.contact.form.privacyPolicy")}{" "}
           <a
-            className="text-blue-600 underline decoration-blue-600/30 underline-offset-2 transition-colors duration-150 ease-out hover:text-blue-700 hover:decoration-blue-700/50"
+            className="text-blue-600 underline hover:text-blue-800"
             href={`/${i18n.language}/privacy-policy`}
-            onClick={e => e.stopPropagation()}
             rel="noopener noreferrer"
             target="_blank"
           >
             {t("pages.contact.form.privacyPolicyLink")}
           </a>
-        </span>
-      </label>
+        </label>
+      </div>
 
-      <div className="pt-2">
+      <div className="border-gray-200 border-b pt-2 pb-4">
         <HoldButton
-          className={cn("touch-manipulation", loading && "bg-primary text-white")}
-          disabled={loading || !isValid}
+          className={cn("touch-manipulation", getButtonClassName())}
+          disabled={loading || !isValid || buttonState === "success"}
+          error={buttonState === "error"}
           holdClassName="bg-primary text-white"
           onComplete={onSubmit}
         >
-          {loading ? (
-            <span className="flex items-center gap-2">
-              <svg aria-hidden="true" className="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
-                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                <path
-                  className="opacity-75"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                  fill="currentColor"
-                />
-              </svg>
-              <span>Sending...</span>
-            </span>
-          ) : (
-            t("pages.contact.form.holdToSubmit")
-          )}
+          <AnimatePresence initial={false} mode="popLayout">
+            <motion.span
+              animate={{ opacity: 1, y: 0 }}
+              className="flex items-center justify-center gap-2"
+              exit={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 25 }}
+              initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: -25 }}
+              key={buttonState}
+              transition={{ bounce: 0, duration: 0.3, type: "spring" }}
+            >
+              {buttonState === "loading" && (
+                <svg aria-hidden="true" className="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path
+                    className="opacity-75"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    fill="currentColor"
+                  />
+                </svg>
+              )}
+              {buttonState === "success" && (
+                <svg
+                  aria-hidden="true"
+                  className="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2.5}
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              )}
+              {buttonState === "error" && (
+                <svg
+                  aria-hidden="true"
+                  className="h-4 w-4"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2.5}
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M6 18L18 6M6 6l12 12" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              )}
+              {buttonCopy[buttonState]}
+            </motion.span>
+          </AnimatePresence>
         </HoldButton>
       </div>
-
-      <AnimatePresence mode="wait">
-        {showSuccess && (
-          <motion.div
-            animate={{ opacity: 1, y: 0 }}
-            className="flex items-center gap-3 rounded-lg bg-green-50 p-3 text-green-800 text-sm shadow-[0_0_0_1px_rgba(34,197,94,0.2)]"
-            exit={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: -8 }}
-            initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 8 }}
-            role="status"
-            transition={{ duration: 0.2, ease: EASE_OUT }}
-          >
-            <svg
-              aria-hidden="true"
-              className="h-5 w-5 flex-shrink-0 text-green-600"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-              viewBox="0 0 24 24"
-            >
-              <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-            <span>{t("pages.contact.success")}</span>
-          </motion.div>
-        )}
-
-        {isError && (
-          <motion.div
-            animate={{ opacity: 1, y: 0 }}
-            className="flex items-center gap-3 rounded-lg bg-red-50 p-3 text-red-800 text-sm shadow-[0_0_0_1px_rgba(239,68,68,0.2)]"
-            exit={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: -8 }}
-            initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 8 }}
-            role="alert"
-            transition={{ duration: 0.2, ease: EASE_OUT }}
-          >
-            <svg
-              aria-hidden="true"
-              className="h-5 w-5 flex-shrink-0 text-red-600"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-              viewBox="0 0 24 24"
-            >
-              <path d="M6 18L18 6M6 6l12 12" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-            <span>{t("pages.contact.error")}</span>
-          </motion.div>
-        )}
-      </AnimatePresence>
     </form>
   );
 }
@@ -284,12 +242,14 @@ interface FormFieldProps {
   error?: string;
 }
 
+const EASE_OUT = [0.25, 0.46, 0.45, 0.94] as const;
+
 function FormField({ label, htmlFor, children, error }: FormFieldProps) {
   const shouldReduceMotion = useReducedMotion();
 
   return (
     <div>
-      <label className="mb-1.5 block font-medium text-gray-700 text-sm" htmlFor={htmlFor}>
+      <label className="mb-1 block font-medium text-gray-600 text-xs" htmlFor={htmlFor}>
         {label}
       </label>
       {children}
@@ -297,10 +257,9 @@ function FormField({ label, htmlFor, children, error }: FormFieldProps) {
         {error && (
           <motion.p
             animate={{ height: "auto", opacity: 1 }}
-            className="mt-1 text-red-600 text-xs"
+            className="mt-1 overflow-hidden text-red-600 text-xs"
             exit={{ height: 0, opacity: 0 }}
             initial={shouldReduceMotion ? { opacity: 0 } : { height: 0, opacity: 0 }}
-            role="alert"
             transition={{ duration: 0.15, ease: EASE_OUT }}
           >
             {error}
diff --git a/apps/frontend/src/components/HoldButton/index.tsx b/apps/frontend/src/components/HoldButton/index.tsx
index c7177abba..0f3b7c97e 100644
--- a/apps/frontend/src/components/HoldButton/index.tsx
+++ b/apps/frontend/src/components/HoldButton/index.tsx
@@ -51,7 +51,7 @@ export function HoldButton({
   return (
     <button
       className={cn(
-        "relative flex h-12 w-full cursor-pointer select-none items-center justify-center gap-2 overflow-hidden rounded-lg bg-gray-100 font-medium text-gray-500 transition-transform duration-150 ease-out active:scale-[0.98]",
+        "relative flex h-12 w-full cursor-pointer select-none items-center justify-center gap-2 overflow-hidden rounded-lg bg-blue-100 font-medium text-gray-500 transition-transform duration-150 ease-out active:scale-[0.98]",
         error && "ring-2 ring-red-800",
         disabled && "cursor-not-allowed bg-gray-100 text-gray-300",
         className

From c0bdb87ae8c5eab8473b80aa79860538734bbcf1 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Thu, 22 Jan 2026 11:42:34 +0100
Subject: [PATCH 14/17] improve Hold to Submit error styles

---
 apps/frontend/src/components/HoldButton/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/frontend/src/components/HoldButton/index.tsx b/apps/frontend/src/components/HoldButton/index.tsx
index 0f3b7c97e..6d5ca7d0e 100644
--- a/apps/frontend/src/components/HoldButton/index.tsx
+++ b/apps/frontend/src/components/HoldButton/index.tsx
@@ -52,7 +52,6 @@ export function HoldButton({
     <button
       className={cn(
         "relative flex h-12 w-full cursor-pointer select-none items-center justify-center gap-2 overflow-hidden rounded-lg bg-blue-100 font-medium text-gray-500 transition-transform duration-150 ease-out active:scale-[0.98]",
-        error && "ring-2 ring-red-800",
         disabled && "cursor-not-allowed bg-gray-100 text-gray-300",
         className
       )}

From ea842dfff9417fad942fcb73e7e938727223a75a Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Tue, 10 Feb 2026 19:42:30 +0100
Subject: [PATCH 15/17] optimize ToastPopover by using useSyncExternalStore

---
 .../src/components/ToastPopover/index.tsx     | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/apps/frontend/src/components/ToastPopover/index.tsx b/apps/frontend/src/components/ToastPopover/index.tsx
index dfb856da2..e653d6237 100644
--- a/apps/frontend/src/components/ToastPopover/index.tsx
+++ b/apps/frontend/src/components/ToastPopover/index.tsx
@@ -1,22 +1,28 @@
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 import { ToastContainer, ToastContainerProps, ToastItem, toast } from "react-toastify";
 import { Popover } from "../Popover";
 
-export function useHasActiveToasts() {
-  const [activeToasts, setActiveToasts] = useState<ToastItem[]>([]);
-  useEffect(() => {
-    const unsubscribe = toast.onChange((payload: ToastItem) => {
-      if (payload.status === "added") {
-        setActiveToasts(prev => [...prev, payload]);
-      }
-      if (payload.status === "removed") {
-        setActiveToasts(prev => prev.filter(t => t.id !== payload.id));
-      }
-    });
-    return () => unsubscribe();
-  }, []);
+const activeToastIds = new Set<ToastItem["id"]>();
+
+function subscribe(callback: () => void) {
+  return toast.onChange((payload: ToastItem) => {
+    if (payload.status === "added" && !activeToastIds.has(payload.id)) {
+      activeToastIds.add(payload.id);
+      callback();
+    }
+    if (payload.status === "removed" && activeToastIds.has(payload.id)) {
+      activeToastIds.delete(payload.id);
+      callback();
+    }
+  });
+}
 
-  return activeToasts.length > 0;
+function getSnapshot() {
+  return activeToastIds.size;
+}
+
+export function useHasActiveToasts() {
+  return useSyncExternalStore(subscribe, getSnapshot) > 0;
 }
 
 export const ToastPopover = (props: ToastContainerProps) => {

From 1974e176eed433e24ad4d8104f174b98f3d15a71 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Tue, 10 Feb 2026 19:45:45 +0100
Subject: [PATCH 16/17] Update GotQuestions url to the contact page

---
 .../frontend/src/sections/individuals/GotQuestions/index.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/sections/individuals/GotQuestions/index.tsx b/apps/frontend/src/sections/individuals/GotQuestions/index.tsx
index 46879bb80..8845e0e20 100644
--- a/apps/frontend/src/sections/individuals/GotQuestions/index.tsx
+++ b/apps/frontend/src/sections/individuals/GotQuestions/index.tsx
@@ -2,14 +2,13 @@ import { Trans, useTranslation } from "react-i18next";
 import { CallToActionSection } from "../../../components/CallToActionSection";
 
 export const GotQuestions = () => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   return (
     <CallToActionSection
       buttonText={t("sections.gotQuestions.contactUs")}
-      buttonUrl="https://forms.gle/dKh8ckXheRPdRa398"
+      buttonUrl={`/${i18n.language}/contact`}
       description={t("sections.gotQuestions.description")}
-      isExternal={true}
       title={
         <Trans i18nKey="sections.gotQuestions.title">
           Got Questions? <br /> We're here to help!

From 5c10d38e4a3588d00a2a109b1bc8e3ab7cdb1998 Mon Sep 17 00:00:00 2001
From: Kacper Szarkiewicz <szarkiewiczmail@gmail.com>
Date: Tue, 10 Feb 2026 19:46:51 +0100
Subject: [PATCH 17/17] remove externalUrl icon from contact us /business

---
 apps/frontend/src/sections/business/Hero/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/sections/business/Hero/index.tsx b/apps/frontend/src/sections/business/Hero/index.tsx
index f880839fd..b51d17b5c 100644
--- a/apps/frontend/src/sections/business/Hero/index.tsx
+++ b/apps/frontend/src/sections/business/Hero/index.tsx
@@ -47,7 +47,7 @@ export function Hero() {
                   initial={reducedMotion ? "visible" : "hidden"}
                   variants={fadeInUp}
                 >
-                  {t("pages.business.hero.contactUs")} <ArrowTopRightOnSquareIcon aria-hidden="true" className="h-4 w-4" />
+                  {t("pages.business.hero.contactUs")}
                 </motion.div>
               </Link>
               <motion.a