dalcode-website/components/home/HeroSection.tsx

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

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">
                <div className="subtitle">DAL Code by DeepAILab</div>
                <h1>让 AI 先把需求问清楚，再把它变成代码</h1>
                <div className="mg-top-4x-extra-small">
                  <p>
                    DAL Code 不是另一个只会接 prompt 的 AI IDE。
                    它把 Intent Capture、Mission Mode、Smart Routing 和可审批的工程执行组合成一条完整工作流。
                  </p>
                </div>
                <div className="mg-top-2x-extra-small">
                  <div className="buttons-row left">
                    <Link href="/about" className="primary-button w-inline-block">
                      <div className="button-content">
                        <div>理解产品定位</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" />
                          </svg>
                          <div className="button-icon-bg" />
                          <div className="button-icon-bg-inside" />
                        </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 x="0.509766" y="229" width={76} height={76} stroke="currentColor" />
                <rect x="0.509766" y="153" width={76} height={76} stroke="currentColor" />
                <rect x="0.509766" y="77" width={76} height={76} stroke="currentColor" />
                <rect x="0.509766" y="1" width={76} height={76} stroke="currentColor" />
                <rect x="76.5098" y="305" width={76} height={76} stroke="currentColor" />
                <rect x="76.5098" y="229" width={76} height={76} stroke="currentColor" />
                <rect x="76.5098" y="153" width={76} height={76} stroke="currentColor" />
                <rect x="76.5098" y="77" width={76} height={76} stroke="currentColor" />
                <rect x="76.5098" y="1" width={76} height={76} stroke="currentColor" />
                <rect x="152.51" y="305" width={76} height={76} stroke="currentColor" />
                <rect x="152.51" y="229" width={76} height={76} stroke="currentColor" />
                <rect x="152.51" y="153" width={76} height={76} stroke="currentColor" />
                <rect x="152.51" y="77" width={76} height={76} stroke="currentColor" />
                <rect x="152.51" y="1" width={76} height={76} stroke="currentColor" />
                <rect x="228.51" y="305" width={76} height={76} stroke="currentColor" />
                <rect x="228.51" y="229" width={76} height={76} stroke="currentColor" />
                <rect x="228.51" y="153" width={76} height={76} stroke="currentColor" />
                <rect x="228.51" y="77" width={76} height={76} stroke="currentColor" />
                <rect x="228.51" y="1" width={76} height={76} stroke="currentColor" />
                <rect x="304.51" y="305" width={76} height={76} stroke="currentColor" />
                <rect x="304.51" y="229" width={76} height={76} stroke="currentColor" />
                <rect x="304.51" y="153" width={76} height={76} stroke="currentColor" />
                <rect x="304.51" y="77" width={76} height={76} stroke="currentColor" />
                <rect x="304.51" y="1" width={76} height={76} stroke="currentColor" />
              </svg>
              <div className="hero-v1-bg-gradient" />
            </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">Why DAL Code</div>
            <div className="mg-top-small">
              <p className="about-text">
                传统 AI 编程工具默认用户已经知道怎么提技术需求，所以产品重点落在补全、改代码和聊天上。
                DAL Code 把核心交互改成另一件事：让 AI 主动采访用户，把模糊业务目标变成结构化工程任务。
                然后再通过 Agent、Skills、多模型路由和上下文压缩，把代码、测试、文档和审批一起交付出来。
              </p>
            </div>
          </div>
          <div className="about-section-bottom-content">
            <Link href="/about" className="lightbox-link w-inline-block">
              <Image
                src="/assets/wubflow-shield-nocodexport-dev/68a342b7066c56fa60eb3af1/68a612636043d8e5dcb04ad0_about-us-video-thumbnail-quantum-webflow-template.jpg"
                width={660}
                height={372}
                alt="DAL Code product overview"
                className="lightbox-thumbnail"
              />
            </Link>
            <div className="position-relative---z-index-1">
              <div className="hidden-on-mobile-portrait">
                <div className="display-3 medium text-titles">Intent to build</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 d="M135.811 0L135.811 535" stroke="currentColor" />
                <path d="M506.811 535L355.811 535" stroke="currentColor" />
                <path d="M0 658L135.811 658" stroke="currentColor" />
                <path d="M506.811 658L355.811 658" stroke="currentColor" />
                <path d="M136 535L356 535" stroke="currentColor" />
                <path d="M136 658L356 658" stroke="currentColor" />
              </svg>
              <div className="about-section-gradient top" />
              <div className="about-section-gradient left" />
              <div className="about-section-gradient right" />
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}