dalcode-website/components/home/HeroSection.tsx

import LottiePlayer from "@/components/LottiePlayer"
import Image from "next/image"
import Link from "next/link"
import VideoLightbox from "@/components/VideoLightbox"

export default function HeroSection() {
  return (
    <section className="section hero-v1">
      <div className="w-layout-blockcontainer container-default w-container">
        <div className="w-layout-grid hero-v1-grid">
          <div className="position-relative---z-index-1">
            <div className="position-relative---z-index-1">
              <div data-w-id="7939bd8a-3226-7306-66d9-84e6bb7ffc0a" style={{"opacity": "0", "filter": "blur(8px)"}} className="inner-container _480px _100-tablet">
                <h1>
    The future beyond human intelligence                  </h1>
                <div className="mg-top-4x-extra-small">
                  <p>
    ipsum dolor sit amet consectetur convallis ut et in id enim tempus quis amet consequat ut rhoncus morbi ullamcorper faucibus in natoque.                    </p>
                </div>
                <div className="mg-top-2x-extra-small">
                  <div className="buttons-row left">
                    <Link id="w-node-_99805214-dd54-e7f3-2549-05c0df1040fb-df1040fb" href="#about-us" className="primary-button w-inline-block">
                      <div className="button-content">
                        <div>
    About our company</div>
                        <div className="button-icon-wrapper primary">
                          <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 className="button-icon-bg">
                          </div>
                          <div className="button-icon-bg-inside">
                          </div>
                        </div>
                      </div>
                    </Link>
                  </div>
                </div>
              </div>
            </div>
            <div data-w-id="f313e881-ebc1-d314-e333-4417f945cb80" style={{"opacity": "0", "filter": "blur(8px)"}} className="hero-v1-bg-wrapper">
              <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 381 382" fill="none">
                <rect x="0.509766" y="305" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="0.509766" y="229" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="0.509766" y="153" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="0.509766" y="77" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="0.509766" y="1" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="76.5098" y="305" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="76.5098" y="229" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="76.5098" y="153" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="76.5098" y="77" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="76.5098" y="1" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="152.51" y="305" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="152.51" y="229" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="152.51" y="153" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="152.51" y="77" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="152.51" y="1" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="228.51" y="305" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="228.51" y="229" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="228.51" y="153" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="228.51" y="77" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="228.51" y="1" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="304.51" y="305" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="304.51" y="229" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="304.51" y="153" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="304.51" y="77" width={76} height={76} stroke="currentColor">
                </rect>
                <rect x="304.51" y="1" width={76} height={76} stroke="currentColor">
                </rect>
              </svg>
              <div className="hero-v1-bg-gradient">
              </div>
            </div>
          </div>
          <LottiePlayer src="/assets/cdn-prod-website-files-com/68a342b7066c56fa60eb3af1/68d1a7d9c54a9b73191bb531_hero-v1-animation-quantum-webflow-template.json" className="hero-v1-lottie" loop autoplay />
        </div>
        <div id="about-us" data-w-id="bce231a0-6e79-c8d3-8883-56d99499b3ad" style={{"opacity": "0", "filter": "blur(8px)"}} className="about-section-wrapper">
          <div className="about-section-top-content">
            <div className="subtitle">About us</div>
            <div className="mg-top-small">
              <p className="about-text">
                Introducing QuantumLab: Pioneering the Future of AI Research. Engineered to push the limits of artificial intelligence, Quantum identifies emerging trends before they disrupt the industry. Choose Research Mode for in-depth, data-driven analysis or Development Mode for groundbreaking algorithm testing. Built with advanced AI systems and state-of-the-art computational power for unparalleled performance.
                <br />
                Crafted by top-tier experts and fueled by global collaboration, Quantum is not just a lab—it&apos;s the core of tomorrow&apos;s innovations, shaping the future one breakthrough at a time.
              </p>
            </div>
          </div>
          <div className="about-section-bottom-content">
            <VideoLightbox
              thumbnailSrc="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a612636043d8e5dcb04ad0_about-us-video-thumbnail-quantum-webflow-template.jpg"
              videoUrl="https://www.youtube.com/watch?v=Ojiv9Smi4XE"
              className="lightbox-link w-inline-block w-lightbox"
            >
              <Image src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a612636043d8e5dcb04ad0_about-us-video-thumbnail-quantum-webflow-template.jpg" width={660} height={372} alt="About Us Thumbnail" className="lightbox-thumbnail" />
              <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 49 49" fill="none" className="play-button">
                <path d="M33.2598 24.4998L20.5863 31.8168L20.5863 17.1827L33.2598 24.4998Z" fill="currentColor" />
              </svg>
            </VideoLightbox>
            <div className="position-relative---z-index-1">
              <div className="hidden-on-mobile-portrait">
                <div className="display-3 medium text-titles">
    Watch video</div>
              </div>
            </div>
            <div className="about-section-bg">
              <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 507 659" fill="none">
                <path d="M0 535L135.811 535" stroke="currentColor">
                </path>
                <path d="M135.811 0L135.811 535" stroke="currentColor">
                </path>
                <path d="M506.811 535L355.811 535" stroke="currentColor">
                </path>
                <path d="M0 658L135.811 658" stroke="currentColor">
                </path>
                <path d="M506.811 658L355.811 658" stroke="currentColor">
                </path>
                <path d="M136 535L356 535" stroke="currentColor">
                </path>
                <path d="M136 658L356 658" stroke="currentColor">
                </path>
              </svg>
              <div className="about-section-gradient top">
              </div>
              <div className="about-section-gradient left">
              </div>
              <div className="about-section-gradient right">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}