checkpoint: before i18n implementation
This commit is contained in:
Leon-in
@@ -1,5 +1,19 @@
|
||||
import Link from "next/link"
|
||||
import ContactForm from "@/components/ContactForm"
|
||||
import { CONTACT_CHANNELS, SITE_BRAND } from "@/lib/site-content"
|
||||
|
||||
const HERO_CHANNELS = [
|
||||
{
|
||||
...CONTACT_CHANNELS[0],
|
||||
headline: "申请产品演示",
|
||||
icon: "mail",
|
||||
},
|
||||
{
|
||||
...CONTACT_CHANNELS[1],
|
||||
headline: "私有化与采购",
|
||||
icon: "phone",
|
||||
},
|
||||
] as const
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
@@ -7,14 +21,17 @@ export default function HeroSection() {
|
||||
<div className="w-layout-blockcontainer container-default w-container">
|
||||
<div className="w-layout-grid contact-grid">
|
||||
<div data-w-id="f1d777b6-f289-d52f-017b-af3a4a212cde" style={{"opacity": "0", "filter": "blur(8px)"}} className="inner-container _430px _100-tablet">
|
||||
<div className="subtitle">Get in touch</div>
|
||||
<div className="subtitle">Contact</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<h1>
|
||||
Contact us</h1>
|
||||
和 {SITE_BRAND} 团队聊聊你的真实场景
|
||||
</h1>
|
||||
</div>
|
||||
<div className="mg-top-4x-extra-small">
|
||||
<p>
|
||||
ipsum dolor sit amet consectetur laculis nunc risus sed eu eget quam sodales adipiscing purus erat quisque arcu adipiscing. </p>
|
||||
无论你想申请试用、评估企业方案，还是讨论 Skills / 插件生态，都建议先把团队背景、
|
||||
代码栈、交付约束和预期目标告诉我们，后续沟通会更高效。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="w-node-_77c06870-1d0c-5ed5-aea2-38d8dab4dc54-60eb3ba7" className="position-relative---z-index-2">
|
||||
@@ -36,80 +53,77 @@ export default function HeroSection() {
|
||||
</div>
|
||||
<div id="w-node-a2c7d873-a197-1a9e-135d-10f912dd9a40-60eb3ba7" data-w-id="a2c7d873-a197-1a9e-135d-10f912dd9a40" style={{"opacity": "0", "filter": "blur(8px)"}} className="inner-container _430px _100-tablet">
|
||||
<div className="w-layout-grid contact-links-grid">
|
||||
<div className="corner-gradient-container">
|
||||
<a data-w-id="15c69e95-b060-7429-fd6f-a7d6b84c5b9f" href="mailto:info@quantumlab.com" className="contact-v1-link w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="contact-icon-wrapper">
|
||||
<div style={{"width": "0%", "height": "100%"}} className="contact-icon-bg">
|
||||
{HERO_CHANNELS.map((channel) => {
|
||||
const isExternal = channel.href.startsWith("http")
|
||||
|
||||
const content = (
|
||||
<>
|
||||
<div className="contact-icon-wrapper">
|
||||
<div style={{"width": "0%", "height": "100%"}} className="contact-icon-bg">
|
||||
</div>
|
||||
{channel.icon === "mail" ? (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24" fill="none" className="contact-icon">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M0 2H24V4.31556L12.0001 10.861L0 4.31546V2ZM0 6.59364V22H24V6.59373L12.0001 13.1391L0 6.59364Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
) : (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 32 33" fill="none" className="contact-icon">
|
||||
<g clipPath="url(#contact-hero-phone)">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M17.4208 23.0719L19.6275 19.3745L20.2074 18.403L21.2951 18.7137L30.7718 21.4215L31.9775 21.7659L31.8283 23.011L30.907 30.7015L30.7429 32.0718L29.3648 31.9954C24.7899 31.7419 20.2596 30.4521 16.1565 28.1239C13.8427 26.8111 11.6667 25.1692 9.69696 23.1995C7.72725 21.2298 6.08529 19.0538 4.77246 16.74C2.44438 12.6369 1.15446 8.1065 0.901036 3.53162L0.824707 2.1536L2.19504 1.98942L9.8854 1.06812L11.1305 0.918945L11.4751 2.12475L14.1827 11.6014L14.4934 12.6892L13.522 13.269L9.82445 15.4758C10.8063 16.9482 11.9474 18.3468 13.2482 19.6476C14.5492 20.9486 15.9481 22.0899 17.4208 23.0719Z" fill="currentColor">
|
||||
</path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="contact-hero-phone">
|
||||
<rect width="32" height="32" fill="white" transform="translate(0 0.5)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24" fill="none" className="contact-icon">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M0 2H24V4.31556L12.0001 10.861L0 4.31546V2ZM0 6.59364V22H24V6.59373L12.0001 13.1391L0 6.59364Z" fill="currentColor">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="contact-v1-link-content">
|
||||
<div>Email address</div>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<div className="display-2 medium text-titles">info@quantumlab.com</div>
|
||||
<div className="contact-v1-link-content">
|
||||
<div>{channel.title}</div>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<div className="display-2 medium text-titles">{channel.headline}</div>
|
||||
</div>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<p>{channel.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bottom-right-button-wrapper">
|
||||
<div className="icon-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
|
||||
<path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
return (
|
||||
<div key={channel.title} className={`corner-gradient-container${channel.icon === "phone" ? " row" : ""}`}>
|
||||
{isExternal ? (
|
||||
<a data-w-id={`contact-channel-${channel.title}`} href={channel.href} className="contact-v1-link w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
{content}
|
||||
</a>
|
||||
) : (
|
||||
<Link href={channel.href} className="contact-v1-link w-inline-block">
|
||||
{content}
|
||||
</Link>
|
||||
)}
|
||||
<div data-wf--corner-gradient-outline--variant="small" className="corner-gradient-wrapper">
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-left">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-left">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-right">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bottom-right-button-wrapper">
|
||||
<div className="icon-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
|
||||
<path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div data-wf--corner-gradient-outline--variant="small" className="corner-gradient-wrapper">
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-left">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-left">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-right">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="corner-gradient-container row">
|
||||
<a data-w-id="4e3cabf1-a0a7-6659-c002-9e212a09258e" href="tel:(123)456-7890" className="contact-v1-link w-inline-block" target="_blank" rel="noopener noreferrer">
|
||||
<div className="contact-icon-wrapper">
|
||||
<div style={{"width": "0%", "height": "100%"}} className="contact-icon-bg">
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 32 33" fill="none" className="contact-icon">
|
||||
<g clipPath="url(#clip0_16077_4034)">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M17.4208 23.0719L19.6275 19.3745L20.2074 18.403L21.2951 18.7137L30.7718 21.4215L31.9775 21.7659L31.8283 23.011L30.907 30.7015L30.7429 32.0718L29.3648 31.9954C24.7899 31.7419 20.2596 30.4521 16.1565 28.1239C13.8427 26.8111 11.6667 25.1692 9.69696 23.1995C7.72725 21.2298 6.08529 19.0538 4.77246 16.74C2.44438 12.6369 1.15446 8.1065 0.901036 3.53162L0.824707 2.1536L2.19504 1.98942L9.8854 1.06812L11.1305 0.918945L11.4751 2.12475L14.1827 11.6014L14.4934 12.6892L13.522 13.269L9.82445 15.4758C10.8063 16.9482 11.9474 18.3468 13.2482 19.6476C14.5492 20.9486 15.9481 22.0899 17.4208 23.0719Z" fill="currentColor">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="contact-v1-link-content">
|
||||
<div>Phone number</div>
|
||||
<div className="mg-top-5x-extra-small">
|
||||
<div className="display-2 medium text-titles">(123) 456-7890</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bottom-right-button-wrapper">
|
||||
<div className="icon-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
|
||||
<path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div data-wf--corner-gradient-outline--variant="small" className="corner-gradient-wrapper">
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-left">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-left">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 top-right">
|
||||
</div>
|
||||
<div className="corner-gradient-horizontal w-variant-8f36765c-221f-a254-35b4-28a5852d67d7 bottom-right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user