mirror of
https://github.com/multica-ai/multica.git
synced 2026-06-17 11:48:42 +02:00
fix(landing): scroll to success card and simplify CTA on contact sales (#3057)
After submit, the tall form collapses into the much shorter success card; the browser keeps the scroll offset so the user lands on the footer and has to scroll up to see the confirmation. Scroll the page back to the success card on success. Also shorten the awkward "Back to multica.ai" / "返回 multica.ai" CTA to "Back to home" / "返回首页". MUL-2493 Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useId, useMemo, useState } from "react";
|
||||
import { useEffect, useId, useMemo, useRef, useState } from "react";
|
||||
import { LandingHeader } from "./landing-header";
|
||||
import { LandingFooter } from "./landing-footer";
|
||||
import { useLocale } from "../i18n";
|
||||
@@ -64,9 +64,22 @@ export function ContactSalesPageClient() {
|
||||
|
||||
const [form, setForm] = useState<FormState>(EMPTY_FORM);
|
||||
const [state, setState] = useState<SubmitState>({ status: "idle" });
|
||||
const successAnchorRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const isBusy = state.status === "submitting";
|
||||
|
||||
// After a successful submit, the tall form collapses into the much shorter
|
||||
// success card. The browser keeps the scroll offset, which lands the user
|
||||
// on the footer — they have to scroll up to see the confirmation. Pull the
|
||||
// page back so the thank-you message is in view.
|
||||
useEffect(() => {
|
||||
if (state.status !== "success") return;
|
||||
successAnchorRef.current?.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
});
|
||||
}, [state.status]);
|
||||
|
||||
const emailDomain = useMemo(() => {
|
||||
const at = form.businessEmail.lastIndexOf("@");
|
||||
if (at < 0) return "";
|
||||
@@ -148,7 +161,10 @@ export function ContactSalesPageClient() {
|
||||
<>
|
||||
<LandingHeader variant="light" />
|
||||
<main className="bg-[#f7f8fa] text-[#0a0d12]">
|
||||
<div className="mx-auto max-w-[760px] px-4 py-12 sm:px-6 sm:py-16 lg:py-20">
|
||||
<div
|
||||
ref={successAnchorRef}
|
||||
className="mx-auto max-w-[760px] px-4 py-12 sm:px-6 sm:py-16 lg:py-20"
|
||||
>
|
||||
<div className="mb-8 text-center">
|
||||
<p className="text-[12px] font-semibold uppercase tracking-[0.12em] text-[#0a0d12]/45">
|
||||
{c.eyebrow}
|
||||
|
||||
@@ -1471,7 +1471,7 @@ export function createEnDict(allowSignup: boolean): LandingDict {
|
||||
title: "Thanks — we got it.",
|
||||
message:
|
||||
"A member of the Multica team will respond within three business days. In the meantime, feel free to explore the docs or star us on GitHub.",
|
||||
cta: "Back to multica.ai",
|
||||
cta: "Back to home",
|
||||
},
|
||||
errors: {
|
||||
generic: "Something went wrong — please try again in a moment.",
|
||||
|
||||
@@ -1468,7 +1468,7 @@ export function createZhDict(allowSignup: boolean): LandingDict {
|
||||
title: "已收到,谢谢!",
|
||||
message:
|
||||
"Multica 团队会在三个工作日内回复你。在此期间,欢迎查看我们的文档,或在 GitHub 上为我们点个 Star。",
|
||||
cta: "返回 multica.ai",
|
||||
cta: "返回首页",
|
||||
},
|
||||
errors: {
|
||||
generic: "提交失败,请稍后再试。",
|
||||
|
||||
Reference in New Issue
Block a user