Files
dalcode-website/components/contact/FormSection.tsx
T
Leon-in ded6c67a36 fix: dark mode contrast and visibility issues
Override --font--colors--title-dm/paragraph-dm variables that resolved
to near-black after neutral color inversion. Add comprehensive dark
mode overrides for header nav links (#222 hardcoded), footer text/links/
borders, cards, CTA sections, contact page elements, and more.

Remove inline color styles from contact components that blocked CSS
dark mode overrides. Fix truncated about section text and add w-mod-ix3
class to html element.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-27 00:08:19 +08:00

92 lines
5.3 KiB
TypeScript

import LottiePlayer from "@/components/LottiePlayer"
import Link from "next/link"
export default function FormSection() {
return (
<section className="section-small bg-neutral">
<div className="w-layout-blockcontainer container-default w-container">
<div data-w-id="37f8537e-c33a-f3ad-764c-d5c8b3ff1b64" style={{"opacity": "0", "filter": "blur(8px)"}} className="inner-container _650px center">
<div className="text-center">
<div className="subtitle">Contact us</div>
<div className="mg-top-4x-extra-small">
<h2>
Reach us directly</h2>
</div>
<div className="mg-top-4x-extra-small">
<p>
ipsum dolor sit amet consectetur ut consequat luctus a ornare auctor mauris necolmer doloe. </p>
</div>
</div>
</div>
<div className="mg-top-regular">
<div data-w-id="37f8537e-c33a-f3ad-764c-d5c8b3ff1b6a" style={{"opacity": "0", "filter": "blur(8px)"}} className="w-layout-grid contact-cards-grid-v1">
<a data-w-id="c3b7cbc7-6bb0-417d-8af2-d16c83e09934" href="mailto:support@quantumlab.com" className="card contact-card-v1 w-inline-block" target="_blank" rel="noopener noreferrer">
<div className="contact-card-v1-content">
<LottiePlayer src="/assets/cdn-prod-website-files-com/68a342b7066c56fa60eb3af1/68d28ff8a28b3e0d6614fe9b_help-support-animation-row-wave.json" className="contact-card-v1-image" loop autoplay />
<div>
<h3 className="display-4">Help & support</h3>
<div className="mg-top-5x-extra-small">
<p className="text-paragraph">
ipsum dolor sit amet consectetur nec quis suspendisse nulla amet viverra tortor. </p>
</div>
</div>
</div>
<div className="contact-card-v1-link-wrapper">
<div className="contact-link-text">support@quantumlab.com</div>
<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 style={{"width": "0%", "height": "100%"}} className="contact-card-link-bg">
</div>
</div>
</a>
<a data-w-id="9fa843fd-acac-5e66-0694-1c416deeff73" href="mailto:media@quantumlab.com" className="card contact-card-v1 w-inline-block" target="_blank" rel="noopener noreferrer">
<div className="contact-card-v1-content">
<LottiePlayer src="/assets/cdn-prod-website-files-com/68a342b7066c56fa60eb3af1/68d28ff844db76df2f0ca451_press-media-animation-row-wave.json" className="contact-card-v1-image" loop autoplay />
<div>
<h3 className="display-4">Press & media</h3>
<div className="mg-top-5x-extra-small">
<p className="text-paragraph">
ipsum dolor sit amet consectetur nec quis suspendisse nulla amet viverra tortor. </p>
</div>
</div>
</div>
<div className="contact-card-v1-link-wrapper">
<div className="contact-link-text">media@quantumlab.com</div>
<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 style={{"width": "0%", "height": "100%"}} className="contact-card-link-bg">
</div>
</div>
</a>
<a data-w-id="4355aa2b-5646-3ff5-91b3-2f90df58ae42" href="mailto:sales@quantumlab.com" className="card contact-card-v1 w-inline-block" target="_blank" rel="noopener noreferrer">
<div className="contact-card-v1-content">
<LottiePlayer src="/assets/cdn-prod-website-files-com/68a342b7066c56fa60eb3af1/68d28ff8806a1552f46e35ac_sales-inquiries-animation-visual-row.json" className="contact-card-v1-image" loop autoplay />
<div>
<h3 className="display-4">Sales & inquiries</h3>
<div className="mg-top-5x-extra-small">
<p className="text-paragraph">
ipsum dolor sit amet consectetur nec quis suspendisse nulla amet viverra tortor. </p>
</div>
</div>
</div>
<div className="contact-card-v1-link-wrapper">
<div className="contact-link-text">sales@quantumlab.com</div>
<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 style={{"width": "0%", "height": "100%"}} className="contact-card-link-bg">
</div>
</div>
</a>
</div>
</div>
</div>
</section>
)
}