From a9578f483c7d01820c4e00ef7fe33e2298bdad3e Mon Sep 17 00:00:00 2001 From: iSuperCoder Date: Thu, 9 Jul 2026 14:53:05 +0800 Subject: [PATCH 1/3] feat: refresh official homepage --- src/components/DownloadSection/constant-en.ts | 2 - src/components/DownloadSection/constant-zh.ts | 2 - src/components/DownloadSection/index.tsx | 23 +- .../DownloadSection/styles.module.css | 724 ++----- src/components/OfficialHeader/index.tsx | 197 ++ .../OfficialHeader/styles.module.css | 275 +++ src/components/PageLayout/Navbar/index.tsx | 325 +-- src/pages/contact.module.css | 432 +++- src/pages/contact.tsx | 226 +- src/pages/download/index.tsx | 1 + src/pages/download/mac-security.tsx | 1 + src/pages/index.module.css | 1830 +++++++++-------- src/pages/index.tsx | 1035 +++++----- .../53b9e256198e5412-s.390ncx5urfkfu.woff2 | Bin 0 -> 7968 bytes .../7178b3e590c64307-s.21jp631_3pja2.woff2 | Bin 0 -> 16540 bytes .../8a480f0b521d4e75-s.1qq4vpdcun5oj.woff2 | Bin 0 -> 14900 bytes .../caa3a2e1cccd8315-s.p.0wgildi0cnwt9.woff2 | Bin 0 -> 29288 bytes .../fef07dbb0973bf53-s.3p2_lha1f2xer.woff2 | Bin 0 -> 7252 bytes 18 files changed, 2797 insertions(+), 2276 deletions(-) create mode 100644 src/components/OfficialHeader/index.tsx create mode 100644 src/components/OfficialHeader/styles.module.css create mode 100644 static/fonts/home/53b9e256198e5412-s.390ncx5urfkfu.woff2 create mode 100644 static/fonts/home/7178b3e590c64307-s.21jp631_3pja2.woff2 create mode 100644 static/fonts/home/8a480f0b521d4e75-s.1qq4vpdcun5oj.woff2 create mode 100644 static/fonts/home/caa3a2e1cccd8315-s.p.0wgildi0cnwt9.woff2 create mode 100644 static/fonts/home/fef07dbb0973bf53-s.3p2_lha1f2xer.woff2 diff --git a/src/components/DownloadSection/constant-en.ts b/src/components/DownloadSection/constant-en.ts index 93dd8f09..c35b6686 100644 --- a/src/components/DownloadSection/constant-en.ts +++ b/src/components/DownloadSection/constant-en.ts @@ -18,7 +18,6 @@ export interface DownloadContent { intelDownloadText: string; appleDownloadUrl: string; appleDownloadText: string; - macSecurityUrl: string; }; }; server: { @@ -70,7 +69,6 @@ const CONTENT: DownloadContent = { intelDownloadText: "for Intel processor", appleDownloadUrl: "https://apk.jit.pro/latest/darwin/arm/JitAI-installer-apple.dmg", appleDownloadText: "for Apple silicon", - macSecurityUrl: "/download/mac-security", }, }, diff --git a/src/components/DownloadSection/constant-zh.ts b/src/components/DownloadSection/constant-zh.ts index 0ec8fb9f..326b8bad 100644 --- a/src/components/DownloadSection/constant-zh.ts +++ b/src/components/DownloadSection/constant-zh.ts @@ -18,7 +18,6 @@ export interface DownloadContent { intelDownloadText: string; appleDownloadUrl: string; appleDownloadText: string; - macSecurityUrl: string; }; }; server: { @@ -67,7 +66,6 @@ const CONTENT: DownloadContent = { intelDownloadText: "Intel芯片安装包", appleDownloadUrl: "https://apk.jit.pro/latest/darwin/arm/JitAI-installer-apple.dmg", appleDownloadText: "Apple芯片安装包", - macSecurityUrl: "/zh/download/mac-security", }, }, diff --git a/src/components/DownloadSection/index.tsx b/src/components/DownloadSection/index.tsx index 0289b6dd..f67c1ca6 100644 --- a/src/components/DownloadSection/index.tsx +++ b/src/components/DownloadSection/index.tsx @@ -1,6 +1,5 @@ import React, { useState, useEffect } from 'react'; import styles from './styles.module.css'; -import globalStyles from '../../pages/index.module.css'; import CONTENT_EN from './constant-en'; import CONTENT_ZH from './constant-zh'; @@ -41,12 +40,15 @@ const DownloadSection: React.FC = ({ currentLocale }) => { }; const handleMacDownload = (url: string) => { - // 先打开安全提示页面 - window.open(url); - // 延迟打开下载链接，避免浏览器拦截 + const iframe = document.createElement("iframe"); + iframe.src = url; + iframe.style.display = "none"; + iframe.setAttribute("aria-hidden", "true"); + document.body.appendChild(iframe); + setTimeout(() => { - window.location.href = CONTENT.desktop.mac.macSecurityUrl; - }, 100); + iframe.remove(); + }, 30000); }; const renderMobileContent = () => ( @@ -96,13 +98,15 @@ const DownloadSection: React.FC = ({ currentLocale }) => {

{CONTENT.desktop.mac.title}

{CONTENT.desktop.mac.description}

- - +
+ + + + {menuOpen ? ( +
+
+ ) : null} + + ); +}; + +const MenuIcon: React.FC = () => ( + +); + +const CloseIcon: React.FC = () => ( + +); + +export default OfficialHeader; diff --git a/src/components/OfficialHeader/styles.module.css b/src/components/OfficialHeader/styles.module.css new file mode 100644 index 00000000..cbd4d2ea --- /dev/null +++ b/src/components/OfficialHeader/styles.module.css @@ -0,0 +1,275 @@ +@font-face { + font-family: "JitHomeGeist"; + font-style: normal; + font-weight: 100 900; + font-display: swap; + src: url("/fonts/home/fef07dbb0973bf53-s.3p2_lha1f2xer.woff2") format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} + +@font-face { + font-family: "JitHomeGeist"; + font-style: normal; + font-weight: 100 900; + font-display: swap; + src: url("/fonts/home/8a480f0b521d4e75-s.1qq4vpdcun5oj.woff2") format("woff2"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +@font-face { + font-family: "JitHomeGeist"; + font-style: normal; + font-weight: 100 900; + font-display: swap; + src: url("/fonts/home/53b9e256198e5412-s.390ncx5urfkfu.woff2") format("woff2"); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +@font-face { + font-family: "JitHomeGeist"; + font-style: normal; + font-weight: 100 900; + font-display: swap; + src: url("/fonts/home/7178b3e590c64307-s.21jp631_3pja2.woff2") format("woff2"); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +@font-face { + font-family: "JitHomeGeist"; + font-style: normal; + font-weight: 100 900; + font-display: swap; + src: url("/fonts/home/caa3a2e1cccd8315-s.p.0wgildi0cnwt9.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +.header, +.mobileLayer { + --home-foreground: #0f172a; + --home-muted: #475569; + --home-border: #e2e8f0; + --home-accent: #4361ee; + --home-font: + "JitHomeGeist", ui-sans-serif, system-ui, -apple-system, + BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", + "Segoe UI Emoji"; + + color: var(--home-foreground); + font-family: var(--home-font); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.header *, +.header *::before, +.header *::after, +.mobileLayer *, +.mobileLayer *::before, +.mobileLayer *::after { + box-sizing: border-box; + font-family: var(--home-font) !important; +} + +.header a, +.mobileLayer a { + color: inherit; + text-decoration: none; +} + +.header button, +.mobileLayer button { + border: 0; + cursor: pointer; + font: inherit; +} + +.shell { + margin: 0 auto; + max-width: 1280px; + min-width: 0; + padding: 0 16px; + width: 100%; +} + +.header { + background: transparent; + left: 0; + position: fixed; + right: 0; + top: 0; + transition: + background-color 300ms ease, + border-color 300ms ease, + backdrop-filter 300ms ease; + z-index: 50; +} + +.headerScrolled { + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(16px); + border-bottom: 1px solid var(--home-border); +} + +.headerInner { + align-items: center; + display: flex; + height: 64px; + justify-content: space-between; +} + +.brand { + align-items: center; + display: flex; + flex-shrink: 0; + gap: 8px; + min-height: 44px; +} + +.brandName { + color: var(--home-foreground); + font-size: 20px; + font-weight: 700; + letter-spacing: 0; +} + +.brandDivider { + background: var(--home-border); + display: none; + height: 18px; + width: 1px; +} + +.brandSubline { + color: var(--home-muted); + display: none; + font-size: 12px; +} + +.desktopNav { + align-items: center; + display: none; + gap: 32px; +} + +.desktopNav a { + color: var(--home-muted); + font-size: 14px; + transition: color 150ms ease; +} + +.desktopNav a:hover { + color: var(--home-foreground); +} + +.headerActions { + align-items: center; + display: none; + gap: 12px; +} + +.navButton { + background: var(--home-accent); + border-radius: 999px; + color: #ffffff !important; + display: inline-flex; + font-size: 14px; + font-weight: 500; + line-height: 1.25; + padding: 8px 20px; + transition: opacity 150ms ease; +} + +.navButton:hover { + opacity: 0.9; +} + +.menuButton { + align-items: center; + background: transparent; + color: var(--home-foreground); + display: inline-flex; + height: 44px; + justify-content: center; + margin-right: -8px; + padding: 8px; + width: 44px; +} + +.mobileLayer { + inset: 0; + position: fixed; + z-index: 40; +} + +.mobileBackdrop { + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(8px); + height: 100%; + inset: 0; + position: fixed; + width: 100%; +} + +.mobileNav { + background: #ffffff; + border-bottom: 1px solid var(--home-border); + display: flex; + flex-direction: column; + gap: 16px; + left: 0; + padding: 24px 16px; + position: fixed; + right: 0; + top: 64px; +} + +.mobileNav > a { + color: var(--home-foreground); + font-size: 16px; + min-height: 44px; + padding: 8px 0; +} + +.mobileDownloadWrap { + border-top: 1px solid var(--home-border); + display: flex; + gap: 12px; + padding-top: 16px; +} + +.mobileDownloadWrap a { + background: var(--home-accent); + border-radius: 999px; + color: #ffffff; + flex: 1; + font-size: 14px; + font-weight: 500; + padding: 12px 16px; + text-align: center; +} + +@media (min-width: 640px) { + .shell { + padding: 0 24px; + } + + .brandDivider, + .brandSubline { + display: inline-block; + } +} + +@media (min-width: 1024px) { + .shell { + padding: 0 32px; + } + + .desktopNav, + .headerActions { + display: flex; + } + + .menuButton { + display: none; + } +} diff --git a/src/components/PageLayout/Navbar/index.tsx b/src/components/PageLayout/Navbar/index.tsx index 699782fa..af477164 100644 --- a/src/components/PageLayout/Navbar/index.tsx +++ b/src/components/PageLayout/Navbar/index.tsx @@ -1,333 +1,16 @@ -import React, { useEffect, useState } from "react"; -import styles from "./styles.module.css"; -import LanguageSwitcher from "../LanguageSwitcher"; -import CONTENT_EN from "./constant-en"; -import CONTENT_ZH from "./constant-zh"; -import { addUTMToUrl } from "../../../utils/utm"; -import { useLocation } from "@docusaurus/router"; +import React from "react"; +import OfficialHeader from "@site/src/components/OfficialHeader"; interface NavbarProps { currentLocale?: string; hideLanguageSwitcher?: boolean; } -const isHomeUrl = (url?: string) => url === "/" || url === "/zh" || url === "/zh/"; - const Navbar: React.FC = ({ currentLocale, - hideLanguageSwitcher, + hideLanguageSwitcher: _hideLanguageSwitcher, }) => { - const { pathname } = useLocation(); - const [scrolled, setScrolled] = useState(false); - const [activeNavItem, setActiveNavItem] = useState("home"); - const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); - const [openMobileDropdown, setOpenMobileDropdown] = useState( - null, - ); - const [isMobile, setIsMobile] = useState(false); - - const CONTENT = currentLocale === "zh" ? CONTENT_ZH : CONTENT_EN; - const shouldShowLanguageSwitcher = !hideLanguageSwitcher; - - useEffect(() => { - const checkMobile = () => { - setIsMobile(window.innerWidth <= 768); - }; - - const handleScroll = () => { - setScrolled(window.scrollY > 50); - }; - - const setCurrentActiveNav = () => { - const currentPath = window.location.pathname; - - const currentItem = CONTENT.navItems.find((item: any) => { - if (item.url === currentPath) return true; - if (isHomeUrl(item.url)) return false; - if ( - Array.isArray(item.children) && - item.children.some((child: any) => { - if (child.url === currentPath) return true; - if (isHomeUrl(child.url)) return false; - return currentPath.startsWith(child.url); - }) - ) { - return true; - } - return item.url && currentPath.startsWith(item.url); - }); - - setActiveNavItem(currentItem?.id || ""); - }; - - checkMobile(); - handleScroll(); - setCurrentActiveNav(); - - window.addEventListener("resize", checkMobile); - window.addEventListener("scroll", handleScroll); - return () => { - window.removeEventListener("scroll", handleScroll); - window.removeEventListener("resize", checkMobile); - }; - }, [CONTENT]); - - useEffect(() => { - if (isMobileMenuOpen) { - document.body.classList.add("menu-open"); - } else { - document.body.classList.remove("menu-open"); - setOpenMobileDropdown(null); - } - - return () => { - document.body.classList.remove("menu-open"); - }; - }, [isMobileMenuOpen]); - - const handleNavClick = (item: any) => { - const rawUrl = - item.type === "dropdown" && item.children?.[0] - ? item.children[0].url - : item.url; - const url = - rawUrl && rawUrl.includes("demo.jit.pro") - ? addUTMToUrl(rawUrl) - : rawUrl; - - if (!url) return; - - if (isMobile) { - window.location.href = url; - setIsMobileMenuOpen(false); - return; - } - - if (item.type === "newTab") { - window.open(url, "_blank"); - } else { - window.location.href = url; - } - }; - - const toggleMobileMenu = () => { - setIsMobileMenuOpen(!isMobileMenuOpen); - }; - - return ( - - ); + return ; }; export default Navbar; diff --git a/src/pages/contact.module.css b/src/pages/contact.module.css index 71c04fb3..b8782148 100644 --- a/src/pages/contact.module.css +++ b/src/pages/contact.module.css @@ -1,4 +1,432 @@ -/* 页面容器 */ -.pageContainer { +@font-face { + font-family: "JitHomeGeist"; + font-style: normal; + font-weight: 100 900; + font-display: swap; + src: url("/fonts/home/fef07dbb0973bf53-s.3p2_lha1f2xer.woff2") format("woff2"); + unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} + +@font-face { + font-family: "JitHomeGeist"; + font-style: normal; + font-weight: 100 900; + font-display: swap; + src: url("/fonts/home/8a480f0b521d4e75-s.1qq4vpdcun5oj.woff2") format("woff2"); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +@font-face { + font-family: "JitHomeGeist"; + font-style: normal; + font-weight: 100 900; + font-display: swap; + src: url("/fonts/home/53b9e256198e5412-s.390ncx5urfkfu.woff2") format("woff2"); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +@font-face { + font-family: "JitHomeGeist"; + font-style: normal; + font-weight: 100 900; + font-display: swap; + src: url("/fonts/home/7178b3e590c64307-s.21jp631_3pja2.woff2") format("woff2"); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +@font-face { + font-family: "JitHomeGeist"; + font-style: normal; + font-weight: 100 900; + font-display: swap; + src: url("/fonts/home/caa3a2e1cccd8315-s.p.0wgildi0cnwt9.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +.contactPage { + --contact-background: #ffffff; + --contact-foreground: #0f172a; + --contact-muted: #475569; + --contact-soft: #f8fafc; + --contact-border: #e2e8f0; + --contact-accent: #4361ee; + --contact-accent-soft: rgba(67, 97, 238, 0.08); + --contact-dark: #0b1120; + --contact-font: + "JitHomeGeist", ui-sans-serif, system-ui, -apple-system, + BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", + "Segoe UI Emoji"; + + background: var(--contact-background); + color: var(--contact-foreground); + font-family: var(--contact-font); min-height: 100vh; + overflow-x: hidden; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.contactPage *, +.contactPage *::before, +.contactPage *::after { + box-sizing: border-box; + font-family: var(--contact-font) !important; +} + +.contactPage a { + color: inherit; + text-decoration: none; +} + +.contactPage h1, +.contactPage h2, +.contactPage p { + margin: 0; +} + +.contactPage button { + border: 0; + cursor: pointer; + font: inherit; +} + +.main { + min-height: 100vh; +} + +.shell { + margin: 0 auto; + max-width: 1120px; + padding: 0 24px; + width: 100%; +} + +.heroSection { + background: var(--contact-soft); + border-bottom: 1px solid var(--contact-border); + padding: 128px 0 72px; +} + +.heroGrid { + align-items: end; + display: grid; + gap: 48px; + grid-template-columns: minmax(0, 1fr) 360px; +} + +.heroCopy { + max-width: 720px; +} + +.eyebrow { + color: var(--contact-accent); + font-size: 14px; + font-weight: 700; + letter-spacing: 0; + margin-bottom: 18px; +} + +.heroCopy h1 { + color: var(--contact-foreground); + font-size: 56px; + font-weight: 400; + letter-spacing: 0; + line-height: 1.08; +} + +.heroDescription { + color: var(--contact-muted); + font-size: 18px; + line-height: 1.7; + margin-top: 24px; + max-width: 620px; +} + +.primaryLink, +.secondaryButton, +.copyButton { + align-items: center; + border-radius: 999px; + display: inline-flex; + font-size: 14px; + font-weight: 500; + justify-content: center; + line-height: 1.25; + min-height: 44px; + padding: 12px 22px; + transition: + background-color 150ms ease, + border-color 150ms ease, + color 150ms ease, + opacity 150ms ease; + white-space: nowrap; +} + +.primaryLink { + background: var(--contact-accent); + color: #ffffff; + gap: 8px; + margin-top: 36px; +} + +.primaryLink:hover { + color: #ffffff; + opacity: 0.9; + text-decoration: none; +} + +.primaryLink svg, +.copyButton svg { + flex: 0 0 auto; + height: 16px; + width: 16px; +} + +.summaryPanel, +.contactCard { + background: rgba(255, 255, 255, 0.92); + border: 1px solid var(--contact-border); + border-radius: 8px; +} + +.summaryPanel { + padding: 28px; +} + +.summaryPanel p { + color: var(--contact-foreground); + font-size: 15px; + font-weight: 700; +} + +.summaryPanel ul { + display: grid; + gap: 16px; + list-style: none; + margin: 20px 0 0; + padding: 0; +} + +.summaryPanel li { + align-items: flex-start; + color: var(--contact-muted); + display: flex; + font-size: 14px; + gap: 10px; + line-height: 1.6; +} + +.summaryPanel li svg { + color: var(--contact-accent); + flex: 0 0 auto; + height: 18px; + margin-top: 2px; + width: 18px; +} + +.contactSection { + padding: 64px 0 96px; +} + +.contactGrid { + align-items: start; + display: grid; + gap: 20px; + grid-template-columns: minmax(0, 1fr) 320px; +} + +.formPanel { + min-width: 0; + overflow: hidden; +} + +.cardHeader { + align-items: flex-start; + display: flex; + gap: 14px; +} + +.cardHeader h2 { + color: var(--contact-foreground); + font-size: 18px; + font-weight: 700; + letter-spacing: 0; + line-height: 1.3; +} + +.cardHeader p { + color: var(--contact-muted); + font-size: 14px; + line-height: 1.6; + margin-top: 6px; +} + +.iconBox { + align-items: center; + background: var(--contact-accent-soft); + border: 1px solid rgba(67, 97, 238, 0.12); + border-radius: 8px; + color: var(--contact-accent); + display: inline-flex; + flex: 0 0 auto; + height: 44px; + justify-content: center; + width: 44px; +} + +.iconBox svg { + height: 20px; + width: 20px; +} + +.formIframe { + border: 0; + display: block; + height: 540px; + width: 100%; +} + +.sideColumn { + display: grid; + gap: 20px; +} + +.contactCard { + padding: 24px; +} + +.qrFrame { + align-items: center; + background: var(--contact-soft); + border: 1px solid var(--contact-border); + border-radius: 8px; + display: flex; + justify-content: center; + margin-top: 22px; + padding: 18px; +} + +.qrFrame img { + aspect-ratio: 1; + display: block; + height: auto; + max-width: 190px; + object-fit: contain; + width: 100%; +} + +.emailLink { + color: var(--contact-accent); + display: block; + font-size: 20px; + font-weight: 700; + line-height: 1.3; + margin-top: 24px; + overflow-wrap: anywhere; +} + +.emailLink:hover { + text-decoration: underline; +} + +.emailActions { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 22px; +} + +.secondaryButton { + background: var(--contact-accent); + color: #ffffff; +} + +.secondaryButton:hover { + color: #ffffff; + opacity: 0.9; + text-decoration: none; +} + +.copyButton { + background: #ffffff; + border: 1px solid var(--contact-border); + color: var(--contact-foreground); + gap: 8px; +} + +.copyButton:hover { + border-color: rgba(67, 97, 238, 0.32); + color: var(--contact-accent); +} + +@media (max-width: 900px) { + .heroSection { + padding: 112px 0 56px; + } + + .heroGrid, + .contactGrid { + grid-template-columns: 1fr; + } + + .summaryPanel, + .sideColumn { + width: 100%; + } +} + +@media (max-width: 640px) { + .shell { + padding: 0 16px; + } + + .heroSection { + padding: 104px 0 44px; + } + + .heroGrid { + gap: 28px; + } + + .heroCopy h1 { + font-size: 38px; + line-height: 1.12; + } + + .heroDescription { + font-size: 16px; + line-height: 1.65; + } + + .contactSection { + padding: 40px 0 64px; + } + + .contactCard, + .summaryPanel { + padding: 20px; + } + + .cardHeader { + gap: 12px; + } + + .iconBox { + height: 40px; + width: 40px; + } + + .formIframe { + height: 620px; + } + + .emailActions { + flex-direction: column; + } + + .primaryLink, + .secondaryButton, + .copyButton { + width: 100%; + } } diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx index d118d963..4c62f5be 100644 --- a/src/pages/contact.tsx +++ b/src/pages/contact.tsx @@ -1,14 +1,232 @@ -import React from "react"; +import React, { useMemo, useState } from "react"; import PageLayout from "@site/src/components/PageLayout"; -import ContactSection from "@site/src/components/CompsContact/ContactSection"; +import { addUTMToUrl } from "@site/src/utils/utm"; +import { + ArrowRight, + Check, + Clipboard, + Mail, + MessageCircle, +} from "lucide-react"; import styles from "./contact.module.css"; +interface ContactExperienceProps { + currentLocale?: string; +} + +const CONTACT_CHANNELS = { + zh: { + formTitle: "在线表单", + wechatTitle: "微信咨询", + wechatDesc: "扫码添加，即时响应", + emailTitle: "邮件联系", + emailSubject: "", + formUrl: "https://wy.jit.pro/whwy/aicrm/s/zhcontactus?is_popup=1", + email: "support@jit.pro", + qrCodeUrl: + "https://jit-www.oss-accelerate.aliyuncs.com/contact_us_wx_qr.jpg", + }, + en: { + formTitle: "Online Form", + wechatTitle: "Wechat", + wechatDesc: "Scan to chat instantly", + emailTitle: "Email Contact", + emailSubject: "", + formUrl: "https://wy.jit.pro/whwy/aicrm/s/contactus?is_popup=1", + email: "support@jit.pro", + qrCodeUrl: + "https://jit-www.oss-accelerate.aliyuncs.com/contact_us_wa_qr.jpg", + }, +}; + +const PAGE_COPY = { + zh: { + eyebrow: "联系我们", + title: "和 JitAI 团队聊聊你的企业 AI 落地计划", + description: + "告诉我们你的业务场景、部署方式和团队现状，我们会尽快给出适合的产品演示、试用和落地建议。", + responseTitle: "你可以咨询", + responseItems: [ + "企业私有化部署", + "AI 数字员工工作流", + "试用、安装与技术支持", + ], + formTitle: "留下需求", + emailHelper: "用于产品咨询、技术支持和合作沟通", + copyEmail: "复制邮箱", + copiedEmail: "已复制", + openMail: "发送邮件", + }, + en: { + eyebrow: "Contact Us", + title: "Talk to the JitAI team about your enterprise AI rollout", + description: + "Share your business scenario, deployment plan, and team setup. We will follow up with a practical demo, trial, or implementation suggestion.", + responseTitle: "We can help with", + responseItems: [ + "Enterprise private deployment", + "AI digital employee workflows", + "Trial, installation, and technical support", + ], + formTitle: "Leave Your Request", + emailHelper: "For product consulting, technical support, and partnerships", + copyEmail: "Copy email", + copiedEmail: "Copied", + openMail: "Send email", + }, +}; + const ContactPage: React.FC = () => { return ( - - + + ); }; +const ContactExperience: React.FC = ({ + currentLocale, +}) => { + const locale = currentLocale === "zh" ? "zh" : "en"; + const contactContent = CONTACT_CHANNELS[locale]; + const copy = PAGE_COPY[locale]; + const [copied, setCopied] = useState(false); + const formUrl = useMemo( + () => addUTMToUrl(contactContent.formUrl), + [contactContent.formUrl], + ); + + const handleCopyEmail = async () => { + try { + await navigator.clipboard.writeText(contactContent.email); + setCopied(true); + window.setTimeout(() => setCopied(false), 2000); + } catch (error) { + console.error("Failed to copy email:", error); + } + }; + + return ( +
+
+
+
+
+

{copy.eyebrow}

+

{copy.title}

+

+ {copy.description} +

+ + {copy.formTitle} + +
+ +
+
+
+ +
+
+
+
+