dalcode-website/components/home/BlogPreviewSection.tsx

import Link from "next/link"
import { BLOG_POSTS } from "@/lib/blog-data"

export default function BlogPreviewSection() {
  const featured = BLOG_POSTS.slice(0, 2)

  return (
    <section className="section overflow-hidden">
      <div className="w-layout-blockcontainer container-default w-container">
        <div data-w-id="b227046f-7b8d-96be-04ed-4ad8f3500f81" style={{"opacity": "0", "filter": "blur(8px)"}} className="title-left-content-right">
          <div className="inner-container _480px">
            <div className="subtitle">Insights</div>
            <div className="mg-top-4x-extra-small">
              <h2>把产品判断写成文章，而不是散落在对话里</h2>
            </div>
            <div className="mg-top-5x-extra-small">
              <p>这些内容围绕 DAL Code 的产品隐喻、Agent 执行、多模型路由和 Skills 平台展开。</p>
            </div>
          </div>
          <Link id="w-node-_99805214-dd54-e7f3-2549-05c0df1040fb-df1040fb" href="/blog" 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">
                  </path>
                </svg>
                <div className="button-icon-bg">
                </div>
                <div className="button-icon-bg-inside">
                </div>
              </div>
            </div>
          </Link>
        </div>
        <div className="mg-top-regular">
          <div data-w-id="f1b0018b-51d6-aaa6-2d43-c2ee184868a3" style={{"opacity": "0", "filter": "blur(8px)"}} className="w-dyn-list">
            <div role="list" className="w-dyn-items">
              {featured.map((post) => (
                <div key={post.slug} role="listitem" className="flex-item w-dyn-item">
                  <div className="blog-featured-v1-wrapper">
                    <div className="border-wrapper">
                      <Link href={`/blog-posts/${post.slug}`} className="blog-card-v1 w-inline-block">
                        <div className="blog-v1-image-wrapper" style={{
                          background: "linear-gradient(135deg, var(--core--colors--neutral--200) 0%, var(--core--colors--neutral--300) 100%)",
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "center",
                        }}>
                          <span style={{
                            fontSize: "0.75rem",
                            fontWeight: 600,
                            letterSpacing: "0.08em",
                            textTransform: "uppercase",
                            color: "var(--core--colors--neutral--500)",
                          }}>{post.category}</span>
                        </div>
                        <div className="blog-v1-content">
                          <div className="inner-container _420px">
                            <h3 className="display-6">{post.title}</h3>
                            <div className="mg-top-4x-extra-small">
                              <p className="text-paragraph">{post.excerpt}</p>
                            </div>
                            <div className="mg-top-3x-extra-small">
                              <div className="blog-details-wrapper">
                                <div className="item-details">{post.date}</div>
                                <div className="item-details-divider">&middot;</div>
                                <div className="item-details">{post.category}</div>
                              </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" />
                              </svg>
                              <div className="icon-button-bg" />
                            </div>
                          </div>
                        </div>
                      </Link>
                    </div>
                    <div data-wf--corner-gradient-outline--variant="base" className="corner-gradient-wrapper">
                      <div className="corner-gradient-horizontal top-left" />
                      <div className="corner-gradient-horizontal bottom-left" />
                      <div className="corner-gradient-horizontal top-right" />
                      <div className="corner-gradient-horizontal bottom-right" />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}