dalcode-website/components/contact/HeroSection.tsx

import Link from "next/link"
import ContactForm from "@/components/ContactForm"

export default function HeroSection() {
  return (
    <section className="section-small top overflow-hidden">
      <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="mg-top-4x-extra-small">
              <h1>
    Contact us</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>
            </div>
          </div>
          <div id="w-node-_77c06870-1d0c-5ed5-aea2-38d8dab4dc54-60eb3ba7" className="position-relative---z-index-2">
            <div data-w-id="29536b1c-822f-a212-7a3f-cf3cd12237b3" style={{"opacity": "0", "filter": "blur(8px)"}} className="corner-gradient-container">
              <div className="border-wrapper">
                <ContactForm />
              </div>
              <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 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">
                    </div>
                    <svg style={{"color": "rgb(22,22,22)"}} 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>
                  </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 style={{"color": "rgb(22,22,22)"}} 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>
      </div>
    </section>
  )
}