初始化项目

components/Footer.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import Image from 'next/image';
+
+export default function Footer() {
+  const productLinks = [
+    'AX-Fund',
+    'AX-Matrix',
+    'Launchpad',
+    'Liquid Market',
+    'Token Factory'
+  ];
+
+  const resourceLinks = [
+    'Docs',
+    'FAQ & Support',
+    'Trust & Security',
+    'Learning Center',
+    'Community Forum'
+  ];
+
+  const companyLinks = [
+    'About Team',
+    'Careers',
+    'Contact Us',
+    'Press & Media'
+  ];
+
+  const socialIcons = [
+    { src: '/component-12.svg', alt: 'Twitter', width: 24, height: 24 },
+    { src: '/component-13.svg', alt: 'Discord', width: 24, height: 24 },
+    { src: '/component-14.svg', alt: 'Telegram', width: 24, height: 24 },
+    { src: '/component-15.svg', alt: 'Medium', width: 24, height: 24 }
+  ];
+
+  return (
+    <footer className="bg-white border-t border-[#e5e7eb] w-full flex flex-col items-center">
+      {/* Main Footer Content */}
+      <div className="w-full max-w-[1280px] px-6 py-20 flex flex-row gap-8">
+
+        {/* Left Section - Logo, Address, Social Icons */}
+        <div className="flex flex-col gap-6 w-[389.33px]">
+          {/* Logo */}
+          <div className="flex items-center">
+            <Image
+              src="/logo2.svg"
+              alt="AssetX Logo"
+              width={160}
+              height={40}
+            />
+          </div>
+
+          {/* Address */}
+          <div
+            className="text-[#9ca1af] text-left font-inter"
+            style={{
+              fontSize: '14px',
+              lineHeight: '150%',
+              fontWeight: 400
+            }}
+          >
+            G/F, Hong Kong Museum Of Art, 10號 Salisbury
+            <br />
+            Rd, Tsim Sha Tsui, HongKong
+          </div>
+
+          {/* Social Icons */}
+          <div className="flex flex-row gap-4 items-center">
+            {socialIcons.map((icon, index) => (
+              <div
+                key={index}
+                className="cursor-pointer hover:opacity-70 transition-opacity"
+              >
+                <Image
+                  src={icon.src}
+                  alt={icon.alt}
+                  width={icon.width}
+                  height={icon.height}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Right Section - Links */}
+        <div className="flex flex-row justify-between flex-1">
+
+          {/* Products Column */}
+          <div className="flex flex-col gap-4 w-[178.67px]">
+            <h3
+              className="text-[#111827] font-inter"
+              style={{
+                fontSize: '16px',
+                lineHeight: '150%',
+                fontWeight: 700
+              }}
+            >
+              Products
+            </h3>
+            <div className="flex flex-col gap-2">
+              {productLinks.map((link, index) => (
+                <a
+                  key={index}
+                  href="#"
+                  className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
+                  style={{
+                    fontSize: '14px',
+                    lineHeight: '150%',
+                    fontWeight: 400
+                  }}
+                >
+                  {link}
+                </a>
+              ))}
+            </div>
+          </div>
+
+          {/* Resources Column */}
+          <div className="flex flex-col gap-4 w-[178.67px]">
+            <h3
+              className="text-[#111827] font-inter"
+              style={{
+                fontSize: '16px',
+                lineHeight: '150%',
+                fontWeight: 700
+              }}
+            >
+              Resources
+            </h3>
+            <div className="flex flex-col gap-2">
+              {resourceLinks.map((link, index) => (
+                <a
+                  key={index}
+                  href="#"
+                  className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
+                  style={{
+                    fontSize: '14px',
+                    lineHeight: '150%',
+                    fontWeight: 400
+                  }}
+                >
+                  {link}
+                </a>
+              ))}
+            </div>
+          </div>
+
+          {/* Company Column */}
+          <div className="flex flex-col gap-4 w-[178.67px]">
+            <h3
+              className="text-[#111827] font-inter"
+              style={{
+                fontSize: '16px',
+                lineHeight: '150%',
+                fontWeight: 700
+              }}
+            >
+              Company
+            </h3>
+            <div className="flex flex-col gap-2">
+              {companyLinks.map((link, index) => (
+                <a
+                  key={index}
+                  href="#"
+                  className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
+                  style={{
+                    fontSize: '14px',
+                    lineHeight: '150%',
+                    fontWeight: 400
+                  }}
+                >
+                  {link}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom Section - Copyright and Legal Links */}
+      <div className="w-full max-w-[1280px] border-t border-[#f3f4f6] px-6 py-8 flex flex-row items-center justify-between">
+        {/* Copyright */}
+        <div
+          className="text-[#9ca1af] font-inter"
+          style={{
+            fontSize: '14px',
+            lineHeight: '150%',
+            fontWeight: 400
+          }}
+        >
+          © 2025 ASSETX Protocol. All rights reserved.
+        </div>
+
+        {/* Legal Links */}
+        <div className="flex flex-row gap-6">
+          <a
+            href="#"
+            className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
+            style={{
+              fontSize: '14px',
+              lineHeight: '150%',
+              fontWeight: 400
+            }}
+          >
+            Privacy Policy
+          </a>
+          <a
+            href="#"
+            className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
+            style={{
+              fontSize: '14px',
+              lineHeight: '150%',
+              fontWeight: 400
+            }}
+          >
+            Terms of Service
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}

components/HeroSection.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import Image from 'next/image';
+
+export default function HeroSection() {
+  return (
+    <section className="relative w-full">
+      {/* .header - 背景容器 */}
+      <div
+        className="flex flex-col items-start justify-center flex-shrink-0 h-[670px] relative"
+        style={{
+          background: 'linear-gradient(to left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55))',
+          padding: '114px 85px'
+        }}
+      >
+        {/* .frame-21 - 主内容容器 */}
+        <div className="flex flex-col gap-[60px] flex-shrink-0 w-[926px] relative">
+
+          {/* .frame-25 - 标题和描述区域 */}
+          <div className="flex flex-col gap-8 items-start justify-start self-stretch flex-shrink-0 relative">
+
+            {/* .frame-22 - 标题容器 */}
+            <div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative">
+              {/* .yield-bearing-asset */}
+              <div
+                className="text-[#fcfcfd] text-left relative self-stretch font-domine"
+                style={{
+                  fontSize: '100px',
+                  lineHeight: '100%',
+                  letterSpacing: '-0.03em',
+                  fontWeight: 400
+                }}
+              >
+                Yield-Bearing Asset
+              </div>
+
+              {/* .on-chain */}
+              <div
+                className="text-[#fcfcfd] text-left relative w-[926px] h-[100px] font-domine"
+                style={{
+                  fontSize: '100px',
+                  lineHeight: '100%',
+                  letterSpacing: '-0.03em',
+                  fontWeight: 700
+                }}
+              >
+                On Chain.
+              </div>
+            </div>
+
+            {/* Description text */}
+            <div
+              className="text-[#fcfcfd] text-left relative w-[488px] flex items-center justify-start font-domine"
+              style={{
+                fontSize: '16px',
+                lineHeight: '150%',
+                fontWeight: 400
+              }}
+            >
+              Access Yield- Bearing Asset like Equities, Real Estate, and
+              Commercial Loans with low barriers. Enjoy 10%-30% APY backed by
+              real assets.
+            </div>
+          </div>
+
+          {/* .frame-23 - 按钮容器 */}
+          <div className="flex flex-row gap-5 items-start justify-start flex-shrink-0 relative">
+
+            {/* .component-82 - Start Investing Button */}
+            <button
+              className="bg-white flex flex-row gap-2 items-center justify-center flex-shrink-0 h-[60px] relative overflow-hidden hover:opacity-90 transition-opacity"
+              style={{
+                borderRadius: '4px',
+                padding: '0px 32px'
+              }}
+            >
+              {/* .text4 */}
+              <div
+                className="text-[#111827] text-center relative flex items-center justify-center font-inter"
+                style={{
+                  fontSize: '18px',
+                  lineHeight: '150%',
+                  fontWeight: 700
+                }}
+              >
+                Start Investing
+              </div>
+
+              {/* .component-1 - Arrow icon */}
+              <Image
+                src="/component-10.svg"
+                alt="Arrow"
+                width={20}
+                height={20}
+                className="flex-shrink-0 w-5 h-5 relative overflow-visible"
+                style={{ aspectRatio: 1 }}
+              />
+            </button>
+
+            {/* .component-9 - Read the Whitepaper Button */}
+            <button
+              className="border border-white/20 flex flex-row gap-2 items-center justify-center self-stretch flex-shrink-0 relative overflow-hidden hover:bg-white/20 transition-colors"
+              style={{
+                background: 'rgba(255, 255, 255, 0.1)',
+                borderRadius: '4px',
+                padding: '12px 32px',
+                backdropFilter: 'blur(30px)'
+              }}
+            >
+              {/* .text5 */}
+              <div
+                className="text-[#fcfcfd] text-center relative flex items-center justify-center font-inter"
+                style={{
+                  fontSize: '18px',
+                  lineHeight: '150%',
+                  fontWeight: 700
+                }}
+              >
+                Read the Whitepaper
+              </div>
+            </button>
+          </div>
+
+        </div>
+      </div>
+    </section>
+  );
+}

components/HowItWorksSection.tsx

@@ -0,0 +1,409 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import Image from 'next/image';
+
+// 数字增长动画Hook
+function useCountUp(end: number, duration: number = 1500, startRangePercent: number = 0.75) {
+  const [mounted, setMounted] = useState(false);
+  const [count, setCount] = useState(end);
+  const [hasAnimated, setHasAnimated] = useState(false);
+  const elementRef = useRef<HTMLDivElement>(null);
+  const startValueRef = useRef<number>(end);
+
+  useEffect(() => {
+    setMounted(true);
+    startValueRef.current = Math.floor(end * (startRangePercent + Math.random() * 0.15));
+    setCount(startValueRef.current);
+  }, [end, startRangePercent]);
+
+  useEffect(() => {
+    if (!mounted) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && !hasAnimated) {
+          setHasAnimated(true);
+          const start = startValueRef.current;
+          const startTime = Date.now();
+
+          const timer = setInterval(() => {
+            const elapsed = Date.now() - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+
+            const easeOutCubic = 1 - Math.pow(1 - progress, 3);
+            const currentCount = Math.floor(start + (end - start) * easeOutCubic);
+
+            setCount(currentCount);
+
+            if (progress === 1) {
+              setCount(end);
+              clearInterval(timer);
+            }
+          }, 16);
+
+          return () => clearInterval(timer);
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (elementRef.current) {
+      observer.observe(elementRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [end, duration, hasAnimated, mounted]);
+
+  return { count, elementRef };
+}
+
+export default function HowItWorksSection() {
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [activeStep, setActiveStep] = useState(1); // 默认第1步激活
+  const sectionRef = useRef<HTMLElement>(null);
+
+  // 数字动画
+  const investAmount = useCountUp(100000, 1500, 0.85);
+  const earnAmount = useCountUp(5150, 1500, 0.85);
+
+  useEffect(() => {
+    setMounted(true);
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !visible) {
+            setVisible(true);
+          }
+        });
+      },
+      {
+        threshold: 0.1,
+      }
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => {
+      if (sectionRef.current) {
+        observer.unobserve(sectionRef.current);
+      }
+    };
+  }, [visible]);
+
+  const steps = [
+    {
+      number: 1,
+      title: 'Deposit & Mint WUSD',
+      description: 'Connect your wallet and deposit USDC to swap WUSD. This serves as the native stablecoin and gateway to the entire AssetX ecosystem.',
+      hasLine: true
+    },
+    {
+      number: 2,
+      title: 'Dual Investment Options',
+      description: 'Choose your strategy: use WUSD to purchase specific Yield-Bearing Assets for real-world returns, or provide liquidity in DeFi Pools to earn trading fees.',
+      hasLine: true
+    },
+    {
+      number: 3,
+      title: 'Earn & Boost',
+      description: 'Receive daily yield distributions. Use Asset Tokens as collateral to borrow WUSD and leverage up to 2.5x for maximized returns.',
+      hasLine: false
+    }
+  ];
+
+  return (
+    <section
+      ref={sectionRef}
+      className="bg-[#f9fafb] flex flex-col items-center justify-center flex-shrink-0 w-full relative"
+      style={{
+        borderStyle: 'solid',
+        borderColor: '#e5e7eb',
+        borderWidth: '1px 0px',
+        padding: '80px 0px'
+      }}
+    >
+      {/* .container20 - Main container */}
+      <div className="flex flex-row items-start justify-between flex-shrink-0 relative w-[1200px]">
+
+        {/* Left Side - Steps (.container21) */}
+        <div className="flex flex-col gap-10 items-start justify-start flex-shrink-0 relative w-[520px]">
+
+          {/* Title (.heading-2) */}
+          <div className="flex flex-col items-start justify-start flex-shrink-0 relative">
+            <h2
+              className="text-[#111827] text-left relative font-inter"
+              style={{
+                fontSize: '48px',
+                lineHeight: '120%',
+                letterSpacing: '-0.01em',
+                fontWeight: 700
+              }}
+            >
+              How it works
+            </h2>
+          </div>
+
+          {/* Steps Container (.frame-34) */}
+          <div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 relative">
+
+            {steps.map((step, index) => {
+              const isActive = activeStep === step.number;
+
+              return (
+              <div
+                key={step.number}
+                onClick={() => setActiveStep(step.number)}
+                className={`flex flex-row gap-6 items-start justify-start flex-shrink-0 relative cursor-pointer transition-all duration-300 ease-out hover:opacity-80 ${
+                  mounted && visible
+                    ? 'translate-x-0 opacity-100'
+                    : '-translate-x-12 opacity-0'
+                }`}
+                style={{
+                  transitionDelay: `${index * 150}ms`
+                }}
+              >
+                {/* Number and Line Container */}
+                <div className="pt-2 flex flex-col items-center justify-start self-stretch flex-shrink-0 relative">
+
+                  {/* Number Badge */}
+                  {isActive ? (
+                    // Active step (black background)
+                    <div
+                      className="bg-[#111827] rounded-[999px] flex items-center justify-center flex-shrink-0 w-8 h-[21.63px] relative transition-all duration-300"
+                      style={{
+                        padding: '0.31px 0px 1.32px 0px'
+                      }}
+                    >
+                      <span
+                        className="text-[#fcfcfd] text-center relative flex items-center justify-center font-inter transition-all duration-300"
+                        style={{
+                          fontSize: '14px',
+                          lineHeight: '150%',
+                          fontWeight: 700
+                        }}
+                      >
+                        {step.number}
+                      </span>
+                    </div>
+                  ) : (
+                    // Inactive step (border)
+                    <div
+                      className="bg-[#f9fafb] rounded-[9999px] border-2 border-[#d1d5db] flex items-center justify-center flex-shrink-0 w-8 h-[24.5px] relative transition-all duration-300"
+                    >
+                      <span
+                        className="text-[#9ca1af] text-center relative flex items-center justify-center font-inter transition-all duration-300"
+                        style={{
+                          fontSize: '14px',
+                          lineHeight: '150%',
+                          fontWeight: 700
+                        }}
+                      >
+                        {step.number}
+                      </span>
+                    </div>
+                  )}
+
+                  {/* Connecting Line */}
+                  {step.hasLine && (
+                    <div className="pt-6 flex flex-col items-start justify-center flex-1 w-[2px] relative">
+                      <div className="bg-[#e5e7eb] flex-1 w-[2px] relative" />
+                    </div>
+                  )}
+                </div>
+
+                {/* Text Content */}
+                <div
+                  className="flex flex-col gap-2 items-start justify-start flex-1 relative"
+                  style={{
+                    paddingBottom: step.hasLine ? '32px' : '0px'
+                  }}
+                >
+                  <h3
+                    className="text-[#111827] text-left relative flex items-center justify-start font-inter transition-all duration-300"
+                    style={{
+                      fontSize: '24px',
+                      lineHeight: '130%',
+                      letterSpacing: '-0.005em',
+                      fontWeight: isActive ? 700 : 500
+                    }}
+                  >
+                    {step.title}
+                  </h3>
+                  <p
+                    className="text-[#9ca1af] text-left relative self-stretch flex items-center justify-start font-inter"
+                    style={{
+                      fontSize: '16px',
+                      lineHeight: '150%',
+                      fontWeight: 400
+                    }}
+                  >
+                    {step.description}
+                  </p>
+                </div>
+              </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Right Side - Calculator Card */}
+        <div
+          className={`calculator-card-container flex flex-col items-start justify-start flex-shrink-0 w-[558px] relative transition-all duration-700 ease-out ${
+            mounted && visible
+              ? 'translate-y-0 opacity-100'
+              : 'translate-y-12 opacity-0'
+          }`}
+          style={{
+            transitionDelay: '450ms',
+            height: '439px'
+          }}
+        >
+          {/* Coin Images Container - Rotated Card */}
+          <div
+            className="bg-[#111827] rounded-[16px] flex flex-row gap-4 items-start justify-start h-[162px] absolute z-0"
+            style={{
+              padding: '25px 25px 1px 25px',
+              left: '205.43px',
+              top: '15.96px',
+              boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
+              transformOrigin: '0 0',
+              transform: 'rotate(6.535deg) scale(1, 1)'
+            }}
+          >
+            {/* USDC Logo */}
+            <Image
+              src="/usd-coin-usdc-logo-10.svg"
+              alt="USDC"
+              width={64}
+              height={64}
+              className="flex-shrink-0"
+            />
+
+            {/* WUSD Logo */}
+            <div className="flex-shrink-0 w-[66px] h-[66px] relative">
+              <div className="absolute inset-0 rounded-full bg-gradient-to-br from-green-400 to-emerald-500" />
+              <Image
+                src="/image-220.png"
+                alt="WUSD"
+                width={66}
+                height={66}
+                className="absolute inset-0 rounded-full"
+              />
+            </div>
+          </div>
+
+          {/* Calculator Card */}
+          <div
+            className="bg-white/85 backdrop-blur-md rounded-[24px] border border-[#e5e7eb] p-8 absolute left-0 top-[99px] w-full shadow-lg z-10"
+            style={{
+              transform: 'rotate(-3deg)',
+              transformOrigin: 'center center'
+            }}
+          >
+
+            {/* Header */}
+            <div className="flex flex-row items-center justify-between mb-6">
+              <div className="flex flex-row gap-3 items-center">
+                <div className="bg-[#111827] rounded-[12px] w-10 h-10 flex items-center justify-center">
+                  <Image
+                    src="/icon1.svg"
+                    alt="Portfolio"
+                    width={24}
+                    height={24}
+                  />
+                </div>
+                <span
+                  className="text-[#111827] font-inter"
+                  style={{
+                    fontSize: '16px',
+                    lineHeight: '150%',
+                    fontWeight: 500
+                  }}
+                >
+                  Portfolio Overview Simulator
+                </span>
+              </div>
+
+              <div className="bg-green-50 rounded-lg px-3 py-1">
+                <span className="text-green-600 font-inter text-sm font-bold">+5.2% APY</span>
+              </div>
+            </div>
+
+            {/* Investment Amount */}
+            <div className="mb-4">
+              <div className="flex flex-col gap-2">
+                <span
+                  className="text-[#9ca1af] font-inter"
+                  style={{
+                    fontSize: '14px',
+                    lineHeight: '150%',
+                    fontWeight: 400
+                  }}
+                >
+                  If you invest
+                </span>
+                <span
+                  ref={investAmount.elementRef}
+                  className="text-[#111827] font-inter"
+                  style={{
+                    fontSize: '32px',
+                    lineHeight: '120%',
+                    letterSpacing: '-0.01em',
+                    fontWeight: 700
+                  }}
+                >
+                  ${investAmount.count.toLocaleString()}
+                </span>
+              </div>
+
+              {/* Range Slider */}
+              <div className="mt-4 h-2 bg-[#e5e7eb] rounded-full relative">
+                <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-[#111827] rounded-full" />
+              </div>
+            </div>
+
+            {/* Earnings */}
+            <div className="mt-6 pt-6 border-t border-[#e5e7eb]">
+              <span
+                className="text-[#9ca1af] font-inter block mb-2"
+                style={{
+                  fontSize: '14px',
+                  lineHeight: '150%',
+                  fontWeight: 400
+                }}
+              >
+                You earn per year
+              </span>
+              <div className="flex flex-row gap-2 items-center">
+                <Image
+                  src="/icon2.svg"
+                  alt="Earn"
+                  width={24}
+                  height={24}
+                />
+                <span
+                  ref={earnAmount.elementRef}
+                  className="text-green-600 font-inter"
+                  style={{
+                    fontSize: '32px',
+                    lineHeight: '120%',
+                    letterSpacing: '-0.01em',
+                    fontWeight: 700
+                  }}
+                >
+                  +${earnAmount.count.toLocaleString()}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </section>
+  );
+}

components/Navbar.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Image from 'next/image';
+import ProductMenu from './ProductMenu';
+import ResourceMenu from './ResourceMenu';
+
+export default function Navbar() {
+  const [scrolled, setScrolled] = useState(false);
+  const [language, setLanguage] = useState<'zh' | 'en'>('zh');
+  const [showLangMenu, setShowLangMenu] = useState(false);
+  const [showProductMenu, setShowProductMenu] = useState(false);
+  const [showResourceMenu, setShowResourceMenu] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 50);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Element;
+      if (showLangMenu && !target.closest('.language-selector')) {
+        setShowLangMenu(false);
+      }
+      if (showProductMenu && !target.closest('.product-menu-container')) {
+        setShowProductMenu(false);
+      }
+      if (showResourceMenu && !target.closest('.resource-menu-container')) {
+        setShowResourceMenu(false);
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  }, [showLangMenu, showProductMenu, showResourceMenu]);
+
+  const toggleLanguage = (lang: 'zh' | 'en') => {
+    setLanguage(lang);
+    setShowLangMenu(false);
+  };
+
+  return (
+    <>
+    <nav className={`fixed top-0 left-0 right-0 z-50 px-10 py-5 flex items-center justify-between transition-all duration-300 ${
+      scrolled
+        ? 'bg-white/70 backdrop-blur-[50px] shadow-sm'
+        : 'bg-white/90 backdrop-blur-[50px]'
+    }`}>
+      {/* Logo Section */}
+      <div className="flex-1">
+        <Image
+          src="/logo0.svg"
+          alt="Logo"
+          width={160}
+          height={40}
+          priority
+        />
+      </div>
+
+      {/* Navigation Menu */}
+      <div className="flex items-center gap-12">
+        <div className="flex items-center gap-6">
+          {/* Product - Active */}
+          <div className="product-menu-container">
+            <div
+              className={`rounded-lg px-4 py-2 h-9 flex items-center justify-center cursor-pointer transition-colors ${
+                showProductMenu ? 'bg-[#f3f4f6]' : 'bg-transparent hover:bg-[#f3f4f6]'
+              }`}
+              onClick={() => {
+                setShowProductMenu(!showProductMenu);
+                setShowResourceMenu(false);
+              }}
+            >
+              <span className={`font-bold text-sm leading-[150%] font-inter ${
+                showProductMenu ? 'text-[#111827]' : 'text-[#4b5563]'
+              }`}>
+                {language === 'zh' ? '产品' : 'Product'}
+              </span>
+            </div>
+          </div>
+
+          {/* Ecosystem */}
+          <div className="bg-transparent rounded-lg px-4 py-2 h-9 flex items-center justify-center hover:bg-[#f3f4f6] transition-colors cursor-pointer">
+            <span className="text-[#4b5563] font-bold text-sm leading-[150%] font-inter">
+              {language === 'zh' ? '生态' : 'Ecosystem'}
+            </span>
+          </div>
+
+          {/* Resource */}
+          <div className="resource-menu-container">
+            <div
+              className={`rounded-lg px-4 py-2 h-9 flex items-center justify-center cursor-pointer transition-colors ${
+                showResourceMenu ? 'bg-[#f3f4f6]' : 'bg-transparent hover:bg-[#f3f4f6]'
+              }`}
+              onClick={() => {
+                setShowResourceMenu(!showResourceMenu);
+                setShowProductMenu(false);
+              }}
+            >
+              <span className={`font-bold text-sm leading-[150%] font-inter ${
+                showResourceMenu ? 'text-[#111827]' : 'text-[#4b5563]'
+              }`}>
+                {language === 'zh' ? '资源' : 'Resource'}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Launch App Button & Language Selector */}
+      <div className="flex-1 flex justify-end items-center gap-4">
+        <div className="bg-[#111827] rounded-lg px-5 py-2.5 h-10 flex items-center justify-center overflow-hidden cursor-pointer hover:opacity-90 transition-opacity">
+          <span className="text-[#fcfcfd] font-bold text-sm leading-[150%] font-inter">
+            {language === 'zh' ? '启动应用' : 'Launch App'}
+          </span>
+        </div>
+
+        {/* Language Selector */}
+        <div className="relative language-selector">
+          <div
+            className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-[#f3f4f6] transition-colors cursor-pointer"
+            onClick={() => setShowLangMenu(!showLangMenu)}
+          >
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 10C18.3333 5.39763 14.6024 1.66667 10 1.66667C5.39763 1.66667 1.66667 5.39763 1.66667 10C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#4B5563" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              <path d="M1.66667 10H18.3333" stroke="#4B5563" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              <path d="M10 1.66667C12.0844 3.94863 13.269 6.91003 13.3333 10C13.269 13.09 12.0844 16.0514 10 18.3333C7.91561 16.0514 6.73104 13.09 6.66667 10C6.73104 6.91003 7.91561 3.94863 10 1.66667Z" stroke="#4B5563" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+            <span className="text-[#4b5563] font-inter text-sm font-bold">
+              {language === 'zh' ? '中文' : 'EN'}
+            </span>
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M3 4.5L6 7.5L9 4.5" stroke="#4B5563" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+          </div>
+
+          {/* Dropdown Menu */}
+          {showLangMenu && (
+            <div className="absolute right-0 mt-2 w-32 bg-white rounded-lg shadow-lg border border-[#e5e7eb] overflow-hidden z-50">
+              <div
+                className={`px-4 py-2.5 hover:bg-[#f3f4f6] cursor-pointer transition-colors ${
+                  language === 'zh' ? 'bg-[#f3f4f6]' : ''
+                }`}
+                onClick={() => toggleLanguage('zh')}
+              >
+                <span className="text-[#111827] font-inter text-sm font-medium">中文</span>
+              </div>
+              <div
+                className={`px-4 py-2.5 hover:bg-[#f3f4f6] cursor-pointer transition-colors ${
+                  language === 'en' ? 'bg-[#f3f4f6]' : ''
+                }`}
+                onClick={() => toggleLanguage('en')}
+              >
+                <span className="text-[#111827] font-inter text-sm font-medium">English</span>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </nav>
+    <ProductMenu
+      isOpen={showProductMenu}
+      onClose={() => setShowProductMenu(false)}
+      language={language}
+    />
+    <ResourceMenu
+      isOpen={showResourceMenu}
+      onClose={() => setShowResourceMenu(false)}
+      language={language}
+    />
+    </>
+  );
+}

components/ProductMenu.tsx

@@ -0,0 +1,292 @@
+'use client';
+
+import Image from 'next/image';
+
+interface ProductMenuProps {
+  isOpen: boolean;
+  onClose: () => void;
+  language: 'zh' | 'en';
+}
+
+export default function ProductMenu({ isOpen, onClose, language }: ProductMenuProps) {
+  if (!isOpen) return null;
+
+  const content = {
+    zh: {
+      coreYieldAssets: '核心收益资产',
+      axFund: 'AX-Fund',
+      axFundDesc: '购买AX-Fund收益代币，获得市场中性收益策略的敞口。收益随时间在代币价格中累积。',
+      axFundBadge: '最高22% APY',
+      axPool: 'AX-Pool',
+      axPoolDesc: '以ALP提供流动性支持收益代币市场并赚取交易费',
+      axPoolBadge: '多元化',
+      platformsProtocols: '平台与协议',
+      launchpad: 'Launchpad',
+      launchpadDesc: '发行与代币化新RWA',
+      defiMarket: 'DeFi市场',
+      defiMarketDesc: '资产代币的交换与借贷',
+      tokenFactory: 'Token Factory',
+      tokenFactoryDesc: '标准化铸造协议',
+      infrastructure: '基础设施',
+      assetCockpit: 'Asset Cockpit',
+      assetCockpitDesc: '投资组合分析与管理',
+      oracleNetwork: 'Oracle Network',
+      oracleNetworkDesc: '实时链下数据源',
+      latestAudit: '最新审计：',
+      auditInfo: 'Oct 2025 (Certik)',
+      viewDocs: '查看文档 →'
+    },
+    en: {
+      coreYieldAssets: 'Core Yield Assets',
+      axFund: 'AX-Fund',
+      axFundDesc: 'Buy the AX-Fund Yield Token to gain exposure to market-neutral yield strategies. Yield accrues in token price over time.',
+      axFundBadge: 'up to 22% APY',
+      axPool: 'AX-Pool',
+      axPoolDesc: 'Provide liquidity as ALP to support Yield Token markets and earn trading fees',
+      axPoolBadge: 'Diversified',
+      platformsProtocols: 'Platforms & Protocols',
+      launchpad: 'Launchpad',
+      launchpadDesc: 'Issue & tokenize new RWAs.',
+      defiMarket: 'Defi Market',
+      defiMarketDesc: 'Swap & Lending for assets tokens.',
+      tokenFactory: 'Token Factory',
+      tokenFactoryDesc: 'Standardized minting protocol.',
+      infrastructure: 'Infrastructure',
+      assetCockpit: 'Asset Cockpit',
+      assetCockpitDesc: 'Portfolio analytics & mgmt.',
+      oracleNetwork: 'Oracle Network',
+      oracleNetworkDesc: 'Real-time off-chain data feeds.',
+      latestAudit: 'Latest Audit:',
+      auditInfo: 'Oct 2025 (Certik)',
+      viewDocs: 'View Documentation →'
+    }
+  };
+
+  const t = content[language];
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/20 z-40 animate-fade-in"
+        onClick={onClose}
+      />
+
+      {/* Menu */}
+      <div className="fixed left-1/2 -translate-x-1/2 bg-white rounded-2xl shadow-xl border border-[#e5e7eb] p-6 z-50 animate-slide-down"
+        style={{ width: '1080px', top: '90px' }}
+      >
+      <div className="flex flex-row gap-8">
+        {/* Left Column - Core Yield Assets */}
+        <div className="flex flex-col gap-2 w-[340px]">
+          {/* Section Title */}
+          <div className="px-4 py-2">
+            <span className="text-[#9ca1af] font-inter text-xs font-medium tracking-wider">
+              {t.coreYieldAssets}
+            </span>
+          </div>
+
+          {/* AX-Fund Card */}
+          <div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
+            <div className="bg-[#111827] rounded-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
+              <Image
+                src="/environment-rainbow0.svg"
+                alt="AX-Fund"
+                width={24}
+                height={24}
+              />
+            </div>
+            <div className="flex flex-col gap-1 flex-1">
+              <div className="flex items-center gap-2">
+                <span className="text-[#111827] font-inter text-sm font-bold">
+                  {t.axFund}
+                </span>
+                <div className="bg-green-50 rounded px-2 py-0.5">
+                  <span className="text-green-600 font-inter text-xs font-medium">
+                    {t.axFundBadge}
+                  </span>
+                </div>
+              </div>
+              <p className="text-[#9ca1af] font-inter text-xs leading-relaxed">
+                {t.axFundDesc}
+              </p>
+            </div>
+          </div>
+
+          {/* AX-Pool Card */}
+          <div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
+            <div className="bg-[#f3f4f6] rounded-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
+              <Image
+                src="/environment-planet0.svg"
+                alt="AX-Pool"
+                width={24}
+                height={24}
+              />
+            </div>
+            <div className="flex flex-col gap-1 flex-1">
+              <div className="flex items-center gap-2">
+                <span className="text-[#111827] font-inter text-sm font-bold">
+                  {t.axPool}
+                </span>
+                <div className="bg-blue-50 rounded px-2 py-0.5">
+                  <span className="text-blue-600 font-inter text-xs font-medium">
+                    {t.axPoolBadge}
+                  </span>
+                </div>
+              </div>
+              <p className="text-[#9ca1af] font-inter text-xs leading-relaxed">
+                {t.axPoolDesc}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Middle Column - Image + Platforms */}
+        <div className="flex flex-col gap-6 flex-1 min-w-[380px]">
+          {/* Image */}
+          <div className="bg-[#f9fafb] rounded-xl p-3 flex items-center justify-center">
+            <Image
+              src="/image-270.png"
+              alt="Product Showcase"
+              width={96}
+              height={96}
+              className="object-cover"
+            />
+          </div>
+
+          {/* Platforms & Protocols */}
+          <div className="flex flex-col gap-2">
+            <div className="px-4 py-2">
+              <span className="text-[#9ca1af] font-inter text-xs font-medium tracking-wider">
+                {t.platformsProtocols}
+              </span>
+            </div>
+            <div className="flex flex-col gap-2">
+              {/* Launchpad */}
+              <div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
+                <div className="bg-[#111827] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
+                  <Image
+                    src="/component-20.svg"
+                    alt="Launchpad"
+                    width={16}
+                    height={16}
+                  />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <span className="text-[#111827] font-inter text-sm font-bold">
+                    {t.launchpad}
+                  </span>
+                  <p className="text-[#9ca1af] font-inter text-xs">
+                    {t.launchpadDesc}
+                  </p>
+                </div>
+              </div>
+
+              {/* DeFi Market */}
+              <div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
+                <div className="bg-[#f3f4f6] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
+                  <Image
+                    src="/component-21.svg"
+                    alt="DeFi Market"
+                    width={16}
+                    height={16}
+                  />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <span className="text-[#111827] font-inter text-sm font-bold">
+                    {t.defiMarket}
+                  </span>
+                  <p className="text-[#9ca1af] font-inter text-xs">
+                    {t.defiMarketDesc}
+                  </p>
+                </div>
+              </div>
+
+              {/* Token Factory */}
+              <div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
+                <div className="bg-[#f3f4f6] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
+                  <Image
+                    src="/vuesax-linear-buy-crypto1.svg"
+                    alt="Token Factory"
+                    width={16}
+                    height={16}
+                  />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <span className="text-[#111827] font-inter text-sm font-bold">
+                    {t.tokenFactory}
+                  </span>
+                  <p className="text-[#9ca1af] font-inter text-xs">
+                    {t.tokenFactoryDesc}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Right Column - Infrastructure */}
+        <div className="flex flex-col gap-2 w-[280px]">
+          <div className="px-4 py-2">
+            <span className="text-[#9ca1af] font-inter text-xs font-medium tracking-wider">
+              {t.infrastructure}
+            </span>
+          </div>
+          <div className="flex flex-col gap-2">
+            {/* Asset Cockpit */}
+            <div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
+              <div className="bg-[#f3f4f6] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
+                <Image
+                  src="/navigation-map0.svg"
+                  alt="Asset Cockpit"
+                  width={16}
+                  height={16}
+                />
+              </div>
+              <div className="flex flex-col gap-1">
+                <span className="text-[#111827] font-inter text-sm font-bold">
+                  {t.assetCockpit}
+                </span>
+                <p className="text-[#9ca1af] font-inter text-xs">
+                  {t.assetCockpitDesc}
+                </p>
+              </div>
+            </div>
+
+            {/* Oracle Network */}
+            <div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
+              <div className="bg-[#f3f4f6] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
+                <Image
+                  src="/component-10.svg"
+                  alt="Oracle Network"
+                  width={16}
+                  height={16}
+                />
+              </div>
+              <div className="flex flex-col gap-1">
+                <span className="text-[#111827] font-inter text-sm font-bold">
+                  {t.oracleNetwork}
+                </span>
+                <p className="text-[#9ca1af] font-inter text-xs">
+                  {t.oracleNetworkDesc}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom Border */}
+      <div className="border-t border-[#f3f4f6] mt-6 pt-4 flex items-center justify-between">
+        <div className="text-[#9ca1af] font-inter text-sm">
+          <span className="font-medium">{t.latestAudit}</span>
+          <span className="ml-1 text-[#111827] font-bold">{t.auditInfo}</span>
+        </div>
+        <div className="text-green-600 font-inter text-sm font-bold cursor-pointer hover:opacity-70 transition-opacity">
+          {t.viewDocs}
+        </div>
+      </div>
+    </div>
+    </>
+  );
+}

components/ResourceMenu.tsx

@@ -0,0 +1,338 @@
+'use client';
+
+import Image from 'next/image';
+
+interface ResourceMenuProps {
+  isOpen: boolean;
+  onClose: () => void;
+  language: 'zh' | 'en';
+}
+
+export default function ResourceMenu({ isOpen, onClose, language }: ResourceMenuProps) {
+  if (!isOpen) return null;
+
+  const content = {
+    zh: {
+      docLearning: '文档与学习',
+      docs: '文档',
+      docsDesc: '阅读技术文档、智能合约参考和集成指南。',
+      docsBadge: '已更新',
+      trustSecurity: '信任与安全',
+      trustSecurityDesc: '查看审计、合规认证和我们的安全实践。',
+      helpSupport: '帮助与支持',
+      learningCenter: '学习中心',
+      learningCenterDesc: '教程与视频指南。',
+      communityForum: '社区论坛',
+      communityForumDesc: '提问与交流。',
+      contactSupport: '联系支持',
+      contactSupportDesc: '从我们的团队获得帮助。',
+      company: '公司',
+      aboutTeam: '关于团队',
+      aboutTeamDesc: '认识AssetX背后的团队。',
+      careers: '招聘',
+      careersDesc: '加入我们不断成长的团队。',
+      contactUs: '联系我们',
+      contactUsDesc: '合作与媒体咨询。',
+      pressMedia: '新闻媒体',
+      pressMediaDesc: '最新消息与品牌资产。',
+      latestAudit: '最新审计：',
+      auditInfo: 'Oct 2025 (Certik)',
+      privacyPolicy: '隐私政策',
+      termsOfService: '服务条款'
+    },
+    en: {
+      docLearning: 'Documentation & Learning',
+      docs: 'Docs',
+      docsDesc: 'Read technical docs, smart contract references, and integration guides.',
+      docsBadge: 'Updated',
+      trustSecurity: 'Trust & Security',
+      trustSecurityDesc: 'Review audits, compliance attestations, and our security practices.',
+      helpSupport: 'Help & Support',
+      learningCenter: 'Learning Center',
+      learningCenterDesc: 'Tutorials & video guides.',
+      communityForum: 'Community Forum',
+      communityForumDesc: 'Ask questions & connect.',
+      contactSupport: 'Contact Support',
+      contactSupportDesc: 'Get help from our team.',
+      company: 'Company',
+      aboutTeam: 'About Team',
+      aboutTeamDesc: 'Meet the people behind AssetX.',
+      careers: 'Careers',
+      careersDesc: 'Join our growing team.',
+      contactUs: 'Contact Us',
+      contactUsDesc: 'Partnerships & media inquiries.',
+      pressMedia: 'Press & Media',
+      pressMediaDesc: 'Latest news & brand assets.',
+      latestAudit: 'Latest Audit:',
+      auditInfo: 'Oct 2025 (Certik)',
+      privacyPolicy: 'Privacy Policy',
+      termsOfService: 'Terms of Service'
+    }
+  };
+
+  const t = content[language];
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/20 z-40 animate-fade-in"
+        onClick={onClose}
+      />
+
+      {/* Menu */}
+      <div className="fixed left-1/2 -translate-x-1/2 bg-white rounded-2xl shadow-xl border border-[#e5e7eb] p-6 z-50 animate-slide-down"
+        style={{ width: '1080px', top: '90px' }}
+      >
+        <div className="flex flex-row gap-8">
+          {/* Left Column - Documentation & Learning */}
+          <div className="flex flex-col gap-2 w-[340px]">
+            {/* Section Title */}
+            <div className="px-4 py-2">
+              <span className="text-[#9ca1af] font-inter text-xs font-medium tracking-wider">
+                {t.docLearning}
+              </span>
+            </div>
+
+            {/* Docs Card */}
+            <div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
+              <div className="bg-[#111827] rounded-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
+                <Image
+                  src="/component-10.svg"
+                  alt="Docs"
+                  width={24}
+                  height={24}
+                />
+              </div>
+              <div className="flex flex-col gap-1 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="text-[#111827] font-inter text-sm font-bold">
+                    {t.docs}
+                  </span>
+                  <div className="bg-green-50 rounded px-2 py-0.5">
+                    <span className="text-green-600 font-inter text-xs font-medium">
+                      {t.docsBadge}
+                    </span>
+                  </div>
+                </div>
+                <p className="text-[#9ca1af] font-inter text-xs leading-relaxed">
+                  {t.docsDesc}
+                </p>
+              </div>
+            </div>
+
+            {/* Trust & Security Card */}
+            <div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
+              <div className="bg-[#f3f4f6] rounded-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
+                <Image
+                  src="/component-11.svg"
+                  alt="Trust & Security"
+                  width={24}
+                  height={24}
+                />
+              </div>
+              <div className="flex flex-col gap-1 flex-1">
+                <span className="text-[#111827] font-inter text-sm font-bold">
+                  {t.trustSecurity}
+                </span>
+                <p className="text-[#9ca1af] font-inter text-xs leading-relaxed">
+                  {t.trustSecurityDesc}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Middle Column - Image + Help & Support */}
+          <div className="flex flex-col gap-6 flex-1 min-w-[380px]">
+            {/* Image */}
+            <div className="bg-[#f9fafb] rounded-xl p-3 flex items-center justify-center">
+              <Image
+                src="/image-280.png"
+                alt="Resource Showcase"
+                width={96}
+                height={96}
+                className="object-cover"
+              />
+            </div>
+
+            {/* Help & Support */}
+            <div className="flex flex-col gap-2">
+              <div className="px-4 py-2">
+                <span className="text-[#9ca1af] font-inter text-xs font-medium tracking-wider">
+                  {t.helpSupport}
+                </span>
+              </div>
+              <div className="flex flex-col gap-2">
+                {/* Learning Center */}
+                <div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
+                  <div className="bg-[#f3f4f6] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
+                    <Image
+                      src="/component-12.svg"
+                      alt="Learning Center"
+                      width={16}
+                      height={16}
+                    />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <span className="text-[#111827] font-inter text-sm font-bold">
+                      {t.learningCenter}
+                    </span>
+                    <p className="text-[#9ca1af] font-inter text-xs">
+                      {t.learningCenterDesc}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Community Forum */}
+                <div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
+                  <div className="bg-[#f3f4f6] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
+                    <Image
+                      src="/communication-chat-conversation0.svg"
+                      alt="Community Forum"
+                      width={16}
+                      height={16}
+                    />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <span className="text-[#111827] font-inter text-sm font-bold">
+                      {t.communityForum}
+                    </span>
+                    <p className="text-[#9ca1af] font-inter text-xs">
+                      {t.communityForumDesc}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Contact Support */}
+                <div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
+                  <div className="bg-[#f3f4f6] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
+                    <Image
+                      src="/component-13.svg"
+                      alt="Contact Support"
+                      width={16}
+                      height={16}
+                    />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <span className="text-[#111827] font-inter text-sm font-bold">
+                      {t.contactSupport}
+                    </span>
+                    <p className="text-[#9ca1af] font-inter text-xs">
+                      {t.contactSupportDesc}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Right Column - Company */}
+          <div className="flex flex-col gap-2 w-[280px]">
+            <div className="px-4 py-2">
+              <span className="text-[#9ca1af] font-inter text-xs font-medium tracking-wider">
+                {t.company}
+              </span>
+            </div>
+            <div className="flex flex-col gap-2">
+              {/* About Team */}
+              <div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
+                <div className="bg-[#f3f4f6] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
+                  <Image
+                    src="/component-14.svg"
+                    alt="About Team"
+                    width={16}
+                    height={16}
+                  />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <span className="text-[#111827] font-inter text-sm font-bold">
+                    {t.aboutTeam}
+                  </span>
+                  <p className="text-[#9ca1af] font-inter text-xs">
+                    {t.aboutTeamDesc}
+                  </p>
+                </div>
+              </div>
+
+              {/* Careers */}
+              <div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
+                <div className="bg-[#f3f4f6] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
+                  <Image
+                    src="/component-20-dark.svg"
+                    alt="Careers"
+                    width={16}
+                    height={16}
+                  />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <span className="text-[#111827] font-inter text-sm font-bold">
+                    {t.careers}
+                  </span>
+                  <p className="text-[#9ca1af] font-inter text-xs">
+                    {t.careersDesc}
+                  </p>
+                </div>
+              </div>
+
+              {/* Contact Us */}
+              <div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
+                <div className="bg-[#f3f4f6] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
+                  <Image
+                    src="/component-21.svg"
+                    alt="Contact Us"
+                    width={16}
+                    height={16}
+                  />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <span className="text-[#111827] font-inter text-sm font-bold">
+                    {t.contactUs}
+                  </span>
+                  <p className="text-[#9ca1af] font-inter text-xs">
+                    {t.contactUsDesc}
+                  </p>
+                </div>
+              </div>
+
+              {/* Press & Media */}
+              <div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
+                <div className="bg-[#f3f4f6] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
+                  <Image
+                    src="/component-22.svg"
+                    alt="Press & Media"
+                    width={16}
+                    height={16}
+                  />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <span className="text-[#111827] font-inter text-sm font-bold">
+                    {t.pressMedia}
+                  </span>
+                  <p className="text-[#9ca1af] font-inter text-xs">
+                    {t.pressMediaDesc}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom Border */}
+        <div className="border-t border-[#f3f4f6] mt-6 pt-4 flex items-center justify-between">
+          <div className="text-[#9ca1af] font-inter text-sm">
+            <span className="font-medium">{t.latestAudit}</span>
+            <span className="ml-1 text-[#111827] font-bold">{t.auditInfo}</span>
+          </div>
+          <div className="flex gap-4">
+            <div className="text-[#9ca1af] font-inter text-sm cursor-pointer hover:text-[#111827] transition-colors">
+              {t.privacyPolicy}
+            </div>
+            <div className="text-[#9ca1af] font-inter text-sm cursor-pointer hover:text-[#111827] transition-colors">
+              {t.termsOfService}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

components/SecuritySection.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import Image from 'next/image';
+
+export default function SecuritySection() {
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const sectionRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !visible) {
+            setVisible(true);
+          }
+        });
+      },
+      {
+        threshold: 0.1,
+      }
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => {
+      if (sectionRef.current) {
+        observer.unobserve(sectionRef.current);
+      }
+    };
+  }, [visible]);
+
+  const features = [
+    {
+      icon: '/interface-search-magnifying-glass0.svg',
+      title: 'Audited',
+      description: 'Smart contracts audited by top-tier firms. Underlying assets undergo strict due diligence and financial auditing.',
+      position: 'top-left'
+    },
+    {
+      icon: '/navigation-building-010.svg',
+      title: 'Segregated',
+      description: 'SPV Setup. User assets are held in segregated Special Purpose Vehicles, isolated from platform risks.',
+      position: 'top-right'
+    },
+    {
+      icon: '/interface-chart-bar-vertical-010.svg',
+      title: 'Transparency',
+      description: 'Real-Time NAV. Fund performance data and asset valuations are publicly available and updated on-chain.',
+      position: 'bottom-left'
+    },
+    {
+      icon: '/component-11.svg',
+      title: 'Powered By NASDAQ & HKEX Listed Partners',
+      description: null,
+      position: 'bottom-right',
+      special: true
+    }
+  ];
+
+  return (
+    <section
+      ref={sectionRef}
+      className="bg-black flex flex-col items-center justify-start self-stretch flex-shrink-0 w-full relative"
+      style={{
+        padding: '1px 24px 0px 24px',
+        gap: '40px'
+      }}
+    >
+      {/* Main Container */}
+      <div className="flex flex-row items-start justify-start flex-shrink-0 w-[1440px] relative">
+
+        {/* Left Side - Title */}
+        <div
+          className={`flex flex-row items-center justify-center flex-shrink-0 w-[459px] h-[604px] relative transition-all duration-700 ease-out ${
+            mounted && visible
+              ? 'translate-x-0 opacity-100'
+              : '-translate-x-12 opacity-0'
+          }`}
+          style={{
+            borderStyle: 'solid',
+            borderColor: '#222222',
+            borderWidth: '0px 0px 1px 0px',
+            padding: '180px 24px 180px 120px'
+          }}
+        >
+          <div className="flex flex-col gap-6 items-start justify-start flex-1 relative">
+            <h2
+              className="text-[#fcfcfd] text-left relative self-stretch font-domine"
+              style={{
+                fontSize: '48px',
+                lineHeight: '120%',
+                letterSpacing: '-0.01em',
+                fontWeight: 400
+              }}
+            >
+              Security First Architecture
+            </h2>
+            <p
+              className="text-[#9ca1af] text-left relative w-[290px] flex items-center justify-start font-domine"
+              style={{
+                fontSize: '16px',
+                lineHeight: '150%',
+                fontWeight: 400
+              }}
+            >
+              Real-time data transparency with segregated asset management.
+            </p>
+          </div>
+        </div>
+
+        {/* Right Side - Grid */}
+        <div
+          className="flex-shrink-0 grid gap-0 relative"
+          style={{
+            width: '981px',
+            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+            gridTemplateRows: 'repeat(2, fit-content(100%))'
+          }}
+        >
+          {features.map((feature, index) => (
+            <div
+              key={feature.title}
+              className={`flex flex-col items-start justify-center relative transition-all duration-700 ease-out ${
+                mounted && visible
+                  ? 'translate-y-0 opacity-100'
+                  : 'translate-y-12 opacity-0'
+              }`}
+              style={{
+                borderStyle: 'solid',
+                borderColor: '#222222',
+                borderWidth:
+                  feature.position === 'top-left' ? '0px 1px 1px 1px' :
+                  feature.position === 'top-right' ? '0px 0px 1px 0px' :
+                  feature.position === 'bottom-left' ? '0px 1px 1px 1px' :
+                  '0px 1px 1px 0px',
+                padding: '72px 48px 72px 48px',
+                gridColumn: feature.position.includes('left') ? '1 / span 1' : '2 / span 1',
+                gridRow: feature.position.includes('top') ? '1 / span 1' : '2 / span 1',
+                height: feature.position === 'bottom-right' ? '302px' : 'auto',
+                transitionDelay: `${index * 150}ms`
+              }}
+            >
+              {feature.special ? (
+                // Special card (bottom-right)
+                <div className="flex flex-col gap-6 items-start justify-center self-stretch flex-shrink-0 h-[166px] relative">
+                  <div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative">
+                    <h3
+                      className="text-[#fcfcfd] text-left relative self-stretch font-domine"
+                      style={{
+                        fontSize: '24px',
+                        lineHeight: '140%',
+                        fontWeight: 400
+                      }}
+                    >
+                      {feature.title}
+                    </h3>
+                    <Image
+                      src={feature.icon}
+                      alt="Icon"
+                      width={24}
+                      height={24}
+                      className="flex-shrink-0"
+                    />
+                  </div>
+                </div>
+              ) : (
+                // Regular cards
+                <div className="flex flex-col gap-6 items-start justify-start self-stretch flex-shrink-0 relative">
+                  <Image
+                    src={feature.icon}
+                    alt={feature.title}
+                    width={32}
+                    height={32}
+                    className="flex-shrink-0"
+                  />
+                  <div className="flex flex-col gap-2 items-start justify-start self-stretch flex-shrink-0 relative">
+                    <h3
+                      className="text-[#fcfcfd] text-left relative self-stretch font-inter"
+                      style={{
+                        fontSize: '24px',
+                        lineHeight: '130%',
+                        letterSpacing: '-0.005em',
+                        fontWeight: 700
+                      }}
+                    >
+                      {feature.title}
+                    </h3>
+                    <p
+                      className="text-[#9ca1af] text-left relative self-stretch font-inter"
+                      style={{
+                        fontSize: '14px',
+                        lineHeight: '150%',
+                        fontWeight: 400
+                      }}
+                    >
+                      {feature.description}
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Logo */}
+      <div className="flex-shrink-0 w-[1200px] h-[187px] relative">
+        <Image
+          src="/logo1.svg"
+          alt="Logo"
+          width={1200}
+          height={187}
+          className="w-full h-full object-contain"
+        />
+      </div>
+    </section>
+  );
+}

components/StatsSection.tsx

@@ -0,0 +1,395 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import Image from 'next/image';
+
+// 数字增长动画Hook
+function useCountUp(end: number, duration: number = 1500, startRangePercent: number = 0.75) {
+  const [mounted, setMounted] = useState(false);
+  const [count, setCount] = useState(end); // 初始值设为目标值，避免hydration错误
+  const [hasAnimated, setHasAnimated] = useState(false);
+  const elementRef = useRef<HTMLDivElement>(null);
+  const startValueRef = useRef<number>(end);
+
+  // 客户端挂载后设置随机起始值
+  useEffect(() => {
+    setMounted(true);
+    startValueRef.current = Math.floor(end * (startRangePercent + Math.random() * 0.15));
+    setCount(startValueRef.current);
+  }, [end, startRangePercent]);
+
+  useEffect(() => {
+    if (!mounted) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && !hasAnimated) {
+          setHasAnimated(true);
+          const start = startValueRef.current;
+          const startTime = Date.now();
+
+          const timer = setInterval(() => {
+            const elapsed = Date.now() - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+
+            // 使用缓动函数 - easeOutCubic 更自然
+            const easeOutCubic = 1 - Math.pow(1 - progress, 3);
+            const currentCount = Math.floor(start + (end - start) * easeOutCubic);
+
+            setCount(currentCount);
+
+            if (progress === 1) {
+              setCount(end); // 确保最终值准确
+              clearInterval(timer);
+            }
+          }, 16);
+
+          return () => clearInterval(timer);
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (elementRef.current) {
+      observer.observe(elementRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [end, duration, hasAnimated, mounted]);
+
+  return { count, elementRef };
+}
+
+// 格式化数字 - 确保始终显示正确的单位
+function formatNumber(num: number, prefix: string = '', suffix: string = '', forceUnit: 'M' | 'K' | '' = '') {
+  if (forceUnit === 'M') {
+    return `${prefix}${Math.floor(num)}${suffix}`;
+  } else if (forceUnit === 'K') {
+    return `${prefix}${Math.floor(num)}${suffix}`;
+  } else if (num >= 1000000) {
+    return `${prefix}${Math.floor(num / 1000000)}M${suffix}`;
+  } else if (num >= 1000) {
+    return `${prefix}${Math.floor(num / 1000)}K${suffix}`;
+  }
+  return `${prefix}${num.toLocaleString()}${suffix}`;
+}
+
+export default function StatsSection() {
+  const tvl = useCountUp(485, 1500, 0.80);     // 从80-95%开始
+  const apy = useCountUp(515, 1500, 0.85);     // 5.15 * 100，从85-100%开始
+  const yield_ = useCountUp(45, 1500, 0.75);   // 从75-90%开始
+  const users = useCountUp(23928, 1800, 0.80); // 从80-95%开始
+
+  const [mounted, setMounted] = useState(false);
+  const [imagesVisible, setImagesVisible] = useState(false);
+
+  useEffect(() => {
+    // 客户端挂载
+    setMounted(true);
+
+    // 延迟显示图片动画
+    const timer = setTimeout(() => {
+      setImagesVisible(true);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
+  return (
+    <section
+      className="bg-white flex flex-row items-center justify-center flex-shrink-0 w-full relative"
+      style={{
+        borderStyle: 'solid',
+        borderColor: '#e5e7eb',
+        borderWidth: '0px 0px 1px 0px',
+        padding: '0px 0px 1px 0px'
+      }}
+    >
+      {/* .section2 */}
+      <div
+        className="flex flex-row items-center justify-center w-[1440px] h-[183px] relative"
+      >
+        {/* .container4 - Grid container */}
+        <div
+          className="flex-shrink-0 grid gap-0 relative w-full"
+          style={{
+            gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+            gridTemplateRows: 'repeat(1, minmax(0, 1fr))'
+          }}
+        >
+          {/* Card 1 - Total Value Locked */}
+          <div
+            className="bg-white flex flex-row items-center justify-between h-[182px] relative"
+            style={{
+              borderStyle: 'solid',
+              borderColor: '#e5e7eb',
+              borderWidth: '0px 1px 0px 0px',
+              gridColumn: '1 / span 1',
+              gridRow: '1 / span 1'
+            }}
+          >
+            <div className="flex flex-col gap-2 items-start justify-center flex-1 relative">
+              <div
+                className="text-[#4b5563] text-left relative font-inter"
+                style={{
+                  fontSize: '16px',
+                  lineHeight: '150%',
+                  fontWeight: 400
+                }}
+              >
+                Total Value Locked
+              </div>
+              <div
+                ref={tvl.elementRef}
+                className="text-[#111827] text-left relative font-jetbrains"
+                style={{
+                  fontSize: '48px',
+                  lineHeight: '110%',
+                  letterSpacing: '-0.01em',
+                  fontWeight: 800
+                }}
+              >
+                {formatNumber(tvl.count, '$', 'M+', 'M')}
+              </div>
+            </div>
+          </div>
+
+          {/* Card 2 - Avg. APY */}
+          <div
+            className="bg-white flex flex-row items-center justify-between h-[182px] relative"
+            style={{
+              borderStyle: 'solid',
+              borderColor: '#e5e7eb',
+              borderWidth: '0px 1px 0px 0px',
+              padding: '0px 32px',
+              gridColumn: '2 / span 1',
+              gridRow: '1 / span 1'
+            }}
+          >
+            <div className="flex flex-col gap-2 items-start justify-center flex-1 relative">
+              <div
+                className="text-[#4b5563] text-left relative font-inter"
+                style={{
+                  fontSize: '16px',
+                  lineHeight: '150%',
+                  fontWeight: 400
+                }}
+              >
+                Avg. APY
+              </div>
+              <div
+                ref={apy.elementRef}
+                className="text-[#111827] text-left relative font-jetbrains"
+                style={{
+                  fontSize: '48px',
+                  lineHeight: '110%',
+                  letterSpacing: '-0.01em',
+                  fontWeight: 800
+                }}
+              >
+                {(apy.count / 100).toFixed(2)}%
+              </div>
+            </div>
+          </div>
+
+          {/* Card 3 - Yield Captured */}
+          <div
+            className="bg-white flex flex-row items-center justify-between h-[182px] relative"
+            style={{
+              borderStyle: 'solid',
+              borderColor: '#e5e7eb',
+              borderWidth: '0px 1px 0px 0px',
+              padding: '0px 32px',
+              gridColumn: '3 / span 1',
+              gridRow: '1 / span 1'
+            }}
+          >
+            <div className="flex flex-col gap-2 items-start justify-center flex-1 relative">
+              <div
+                className="text-[#4b5563] text-left relative font-inter"
+                style={{
+                  fontSize: '16px',
+                  lineHeight: '150%',
+                  fontWeight: 400
+                }}
+              >
+                Yield Captured
+              </div>
+              <div
+                ref={yield_.elementRef}
+                className="text-[#111827] text-left relative self-stretch font-jetbrains"
+                style={{
+                  fontSize: '48px',
+                  lineHeight: '110%',
+                  letterSpacing: '-0.01em',
+                  fontWeight: 800
+                }}
+              >
+                {formatNumber(yield_.count, '$', 'M', 'M')}
+              </div>
+            </div>
+          </div>
+
+          {/* Card 4 - Connected Users */}
+          <div
+            className="bg-white flex flex-row items-center justify-between h-[182px] relative"
+            style={{
+              borderStyle: 'solid',
+              borderColor: 'transparent',
+              borderWidth: '0px 1px 0px 0px',
+              padding: '0px 0px 0px 32px',
+              gridColumn: '4 / span 1',
+              gridRow: '1 / span 1'
+            }}
+          >
+            <div className="flex flex-col gap-2 items-start justify-center flex-1 relative">
+              <div
+                className="text-[#4b5563] text-left relative font-inter"
+                style={{
+                  fontSize: '16px',
+                  lineHeight: '150%',
+                  fontWeight: 400
+                }}
+              >
+                Connected Users
+              </div>
+
+              {/* .frame-38 - Number and avatars */}
+              <div className="flex flex-row items-center justify-between self-stretch flex-shrink-0 relative">
+                {/* Number */}
+                <div
+                  ref={users.elementRef}
+                  className="text-[#111827] text-left relative font-jetbrains"
+                  style={{
+                    fontSize: '48px',
+                    lineHeight: '110%',
+                    letterSpacing: '-0.01em',
+                    fontWeight: 800
+                  }}
+                >
+                  {users.count.toLocaleString()}+
+                </div>
+
+                {/* .container9 - Avatar group */}
+                <div className="flex flex-row items-center justify-start flex-shrink-0 relative overflow-hidden">
+                  {/* Avatar 1 - image-23 */}
+                  <div
+                    className={`flex-shrink-0 w-9 h-9 relative overflow-hidden border-white transition-all duration-700 ease-out ${
+                      mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
+                    }`}
+                    style={{
+                      borderRadius: '15239273px',
+                      borderStyle: 'solid',
+                      borderWidth: '1.82px',
+                      padding: '1.82px',
+                      aspectRatio: 1,
+                      transitionDelay: '100ms'
+                    }}
+                  >
+                    <Image
+                      src="/image-230.png"
+                      alt="User"
+                      width={33}
+                      height={33}
+                      className="absolute object-cover"
+                      style={{
+                        left: '1.82px',
+                        top: '1.82px',
+                        aspectRatio: 1
+                      }}
+                    />
+                  </div>
+
+                  {/* Avatar 2 - image-24 */}
+                  <div
+                    className={`flex-shrink-0 w-9 h-9 relative overflow-hidden border-white transition-all duration-700 ease-out ${
+                      mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
+                    }`}
+                    style={{
+                      margin: '0 0 0 -8px',
+                      borderRadius: '15239273px',
+                      borderStyle: 'solid',
+                      borderWidth: '1.82px',
+                      padding: '1.82px',
+                      aspectRatio: 1,
+                      transitionDelay: '200ms'
+                    }}
+                  >
+                    <Image
+                      src="/image-240.png"
+                      alt="User"
+                      width={36}
+                      height={36}
+                      className="absolute object-cover"
+                      style={{
+                        left: '0px',
+                        top: '0px',
+                        aspectRatio: 1
+                      }}
+                    />
+                  </div>
+
+                  {/* Avatar 3 - image-25 */}
+                  <div
+                    className={`flex-shrink-0 w-9 h-9 relative overflow-hidden border-white transition-all duration-700 ease-out ${
+                      mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
+                    }`}
+                    style={{
+                      margin: '0 0 0 -8px',
+                      borderRadius: '15239273px',
+                      borderStyle: 'solid',
+                      borderWidth: '1.82px',
+                      padding: '1.82px',
+                      aspectRatio: 1,
+                      transitionDelay: '300ms'
+                    }}
+                  >
+                    <Image
+                      src="/image-250.png"
+                      alt="User"
+                      width={40}
+                      height={40}
+                      className="absolute object-cover"
+                      style={{
+                        left: '6px',
+                        top: '0.5px',
+                        aspectRatio: 1
+                      }}
+                    />
+                  </div>
+
+                  {/* Avatar 4 - image-252 */}
+                  <div
+                    className={`flex-shrink-0 w-9 h-9 relative overflow-hidden border-white transition-all duration-700 ease-out ${
+                      mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
+                    }`}
+                    style={{
+                      margin: '0 0 0 -8px',
+                      borderRadius: '15239273px',
+                      borderStyle: 'solid',
+                      borderWidth: '1.82px',
+                      padding: '1.82px',
+                      aspectRatio: 1,
+                      transitionDelay: '400ms'
+                    }}
+                  >
+                    <Image
+                      src="/image-251.png"
+                      alt="User"
+                      width={36}
+                      height={36}
+                      className="absolute object-cover"
+                      style={{
+                        left: '0px',
+                        top: '0px',
+                        aspectRatio: 1
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/TrustedBySection.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import Image from 'next/image';
+
+export default function TrustedBySection() {
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const sectionRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+
+    // 使用 IntersectionObserver 检测元素进入视口
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !visible) {
+            setVisible(true);
+          }
+        });
+      },
+      {
+        threshold: 0.2, // 当20%的元素可见时触发
+      }
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => {
+      if (sectionRef.current) {
+        observer.unobserve(sectionRef.current);
+      }
+    };
+  }, [visible]);
+
+  // 合作伙伴 logo 数据
+  const partners = [
+    {
+      name: 'BlackRock',
+      src: '/nav-ireland0.svg',
+      width: 193,
+      height: 28,
+      className: 'w-[193px] h-[28px]'
+    },
+    {
+      name: 'Coinbase',
+      src: '/coinbase-10.svg',
+      width: 179,
+      height: 32,
+      className: 'w-[179px] h-[32px]'
+    },
+    {
+      name: 'Wintermute',
+      src: '/wintermute0.svg',
+      width: 247,
+      height: 40,
+      className: 'w-[247px] h-[40px]'
+    },
+    {
+      name: 'Circle',
+      src: '/group0.svg',
+      width: 156,
+      height: 40,
+      className: 'w-[156px] h-[40px]'
+    },
+    {
+      name: 'ConsenSys',
+      src: '/logo1.svg', // 临时使用一个 logo
+      width: 176,
+      height: 40,
+      className: 'w-[176px] h-[40px]'
+    }
+  ];
+
+  return (
+    <section
+      ref={sectionRef}
+      className="bg-[#f9fafb] flex flex-col items-center justify-center flex-shrink-0 w-full relative"
+      style={{
+        borderStyle: 'solid',
+        borderColor: '#e5e7eb',
+        borderWidth: '0px 0px 1px 0px',
+        padding: '80px 0px',
+        gap: '32px'
+      }}
+    >
+      {/* 标题 - .text6 */}
+      <div
+        className="text-[#111827] text-center relative flex items-center justify-center font-inter"
+        style={{
+          fontSize: '18px',
+          lineHeight: '150%',
+          fontWeight: 500
+        }}
+      >
+        Trusted by Industry Leaders
+      </div>
+
+      {/* Logo容器 - .frame-26 */}
+      <div
+        className="flex flex-row items-center justify-between flex-shrink-0 w-[1200px] relative"
+      >
+        {partners.map((partner, index) => (
+          <div
+            key={partner.name}
+            className={`flex-shrink-0 relative overflow-hidden transition-all duration-700 ease-out ${partner.className} ${
+              mounted && visible
+                ? 'translate-y-0 opacity-100'
+                : 'translate-y-12 opacity-0'
+            }`}
+            style={{
+              transitionDelay: `${index * 150}ms`, // 每个logo延迟150ms
+              aspectRatio: `${partner.width}/${partner.height}`
+            }}
+          >
+            <Image
+              src={partner.src}
+              alt={partner.name}
+              width={partner.width}
+              height={partner.height}
+              className="w-full h-full object-contain"
+            />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

components/WhyAssetXSection.tsx

@@ -0,0 +1,310 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import Image from 'next/image';
+
+export default function WhyAssetXSection() {
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const sectionRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !visible) {
+            setVisible(true);
+          }
+        });
+      },
+      {
+        threshold: 0.1,
+      }
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => {
+      if (sectionRef.current) {
+        observer.unobserve(sectionRef.current);
+      }
+    };
+  }, [visible]);
+
+  const features = [
+    {
+      id: 'sustainable',
+      icon: '/system-data0.svg',
+      title: 'Sustainable Real Yield',
+      description: 'Access 15%-30% returns from Delta-neutral arbitrage strategies and commercial credit. No inflationary token emissions, just real profits.',
+      image: '/frame-110.svg',
+      imageWidth: 305,
+      imageHeight: 162,
+      large: true
+    },
+    {
+      id: 'reliability',
+      icon: '/warning-shield-check0.svg',
+      title: 'Proven Reliability',
+      description: 'Backed by partners holding HK SFC Licenses (1/2/4/5/9) and NASDAQ-listed entities. Audited, compliant, and transparent.',
+      rightIcon: '/icon0.svg',
+      large: false
+    },
+    {
+      id: 'liquidity',
+      icon: '/arrow-arrow-left-right0.svg',
+      title: 'Flexible Liquidity',
+      description: 'Solve the illiquidity of traditional finance. Enjoy instant exit via secondary markets or leverage your positions for up to 40% APY.',
+      badges: ['40%+ APR', 'Instant Exit'],
+      large: false
+    }
+  ];
+
+  return (
+    <section
+      ref={sectionRef}
+      className="flex flex-row items-center justify-center flex-wrap flex-shrink-0 w-full relative"
+      style={{
+        padding: '80px 0px',
+        gap: '40px',
+        alignContent: 'center'
+      }}
+    >
+      <div className="flex flex-col items-center justify-center w-[1200px]">
+        {/* Header - .frame-27 */}
+        <div className="flex flex-col gap-2 items-start justify-start flex-shrink-0 w-[1200px] relative mb-10">
+          {/* Title - .why-assetx */}
+          <h2
+            className="text-[#111827] text-left relative font-inter"
+            style={{
+              fontSize: '48px',
+              lineHeight: '120%',
+              letterSpacing: '-0.01em',
+              fontWeight: 700
+            }}
+          >
+            Why ASSETX?
+          </h2>
+
+          {/* Subtitle */}
+          <p
+            className="text-[#9ca1af] text-left relative font-inter"
+            style={{
+              fontSize: '20px',
+              lineHeight: '140%',
+              fontWeight: 400
+            }}
+          >
+            Institutional-grade access to real-world yield, with DeFi-native composability.
+          </p>
+        </div>
+
+        {/* Cards Container - .frame-30 */}
+        <div className="flex flex-row gap-6 items-center justify-start flex-shrink-0 w-[1199px] relative">
+
+          {/* Left Large Card - Sustainable Real Yield */}
+          <div
+            className={`bg-white rounded-[24px] border border-[#e5e7eb] p-10 flex flex-col items-start justify-between self-stretch flex-1 relative overflow-hidden
+              ${
+                mounted && visible
+                  ? 'translate-y-0 opacity-100'
+                  : 'translate-y-12 opacity-0'
+              }
+              hover:-translate-y-2 hover:shadow-xl`}
+            style={{
+              transition: 'transform 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.7s ease-out, translate 0.7s ease-out'
+            }}
+          >
+            {/* .frame-33 */}
+            <div className="flex flex-col gap-6 items-start justify-start self-stretch flex-shrink-0 relative">
+              {/* Icon Container - .container12 */}
+              <div className="bg-[#f9fafb] rounded-[16px] flex flex-row items-center justify-center flex-shrink-0 w-12 h-12 relative">
+                <Image
+                  src="/system-data0.svg"
+                  alt="System Data"
+                  width={24}
+                  height={24}
+                />
+              </div>
+
+              {/* Text Content - .frame-31 */}
+              <div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative">
+                <h3
+                  className="text-[#111827] text-left relative font-inter"
+                  style={{
+                    fontSize: '24px',
+                    lineHeight: '130%',
+                    letterSpacing: '-0.005em',
+                    fontWeight: 700
+                  }}
+                >
+                  Sustainable Real Yield
+                </h3>
+                <p
+                  className="text-[#9ca1af] text-left relative self-stretch font-inter"
+                  style={{
+                    fontSize: '16px',
+                    lineHeight: '150%',
+                    fontWeight: 400
+                  }}
+                >
+                  Access 15%-30% returns from Delta-neutral arbitrage strategies and commercial credit. No inflationary token emissions, just real profits.
+                </p>
+              </div>
+            </div>
+
+            {/* Chart Image - .frame-11 */}
+            <Image
+              src="/frame-110.svg"
+              alt="Chart"
+              width={305}
+              height={162}
+              className="flex-shrink-0 relative"
+            />
+          </div>
+
+          {/* Right Column - .frame-29 */}
+          <div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 w-[790px] relative">
+
+            {/* Proven Reliability Card */}
+            <div
+              className={`bg-white rounded-[24px] border border-[#e5e7eb] p-10 flex flex-col items-start justify-start self-stretch flex-shrink-0 relative overflow-hidden
+                ${
+                  mounted && visible
+                    ? 'translate-y-0 opacity-100'
+                    : 'translate-y-12 opacity-0'
+                }
+                hover:-translate-y-2 hover:shadow-xl`}
+              style={{
+                transition: 'transform 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.7s ease-out 0.15s, translate 0.7s ease-out 0.15s'
+              }}
+            >
+              {/* .features2 */}
+              <div className="flex flex-row items-center justify-between self-stretch flex-shrink-0 relative">
+                {/* Left Content - .container13 */}
+                <div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 w-[414px] relative">
+                  {/* Icon */}
+                  <div className="bg-[#f9fafb] rounded-[16px] flex flex-row items-center justify-center flex-shrink-0 w-12 h-12 relative">
+                    <Image
+                      src="/warning-shield-check0.svg"
+                      alt="Shield Check"
+                      width={24}
+                      height={24}
+                    />
+                  </div>
+
+                  {/* Text - .frame-28 */}
+                  <div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative">
+                    <h3
+                      className="text-[#111827] text-left relative self-stretch font-inter"
+                      style={{
+                        fontSize: '24px',
+                        lineHeight: '130%',
+                        letterSpacing: '-0.005em',
+                        fontWeight: 700
+                      }}
+                    >
+                      Proven Reliability
+                    </h3>
+                    <p
+                      className="text-[#9ca1af] text-left relative font-inter"
+                      style={{
+                        fontSize: '16px',
+                        lineHeight: '150%',
+                        fontWeight: 400
+                      }}
+                    >
+                      Backed by partners holding HK SFC Licenses (1/2/4/5/9) and NASDAQ-listed entities. Audited, compliant, and transparent.
+                    </p>
+                  </div>
+                </div>
+
+                {/* Right Icon */}
+                <div className="flex items-center justify-center">
+                  <Image
+                    src="/icon0.svg"
+                    alt="Icon"
+                    width={200}
+                    height={200}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Flexible Liquidity Card */}
+            <div
+              className={`bg-white rounded-[24px] border border-[#e5e7eb] p-10 flex flex-col items-start justify-start self-stretch flex-shrink-0 relative overflow-hidden
+                ${
+                  mounted && visible
+                    ? 'translate-y-0 opacity-100'
+                    : 'translate-y-12 opacity-0'
+                }
+                hover:-translate-y-2 hover:shadow-xl`}
+              style={{
+                transition: 'transform 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.7s ease-out 0.3s, translate 0.7s ease-out 0.3s'
+              }}
+            >
+              <div className="flex flex-col gap-6 items-start justify-start self-stretch flex-shrink-0 relative">
+                {/* Top Section with Icon and Badges */}
+                <div className="flex flex-col gap-6 items-start justify-start flex-shrink-0 relative">
+                  {/* Icon and Badges Row */}
+                  <div className="flex flex-row gap-6 items-center justify-start relative">
+                    {/* Icon */}
+                    <div className="bg-[#f9fafb] rounded-[16px] flex flex-row items-center justify-center flex-shrink-0 w-12 h-12 relative">
+                      <Image
+                        src="/arrow-arrow-left-right0.svg"
+                        alt="Arrow"
+                        width={24}
+                        height={24}
+                      />
+                    </div>
+
+                    {/* Badges */}
+                    <div className="flex flex-col gap-2">
+                      <div className="bg-[#f9fafb] rounded-lg px-3 py-1 flex items-center justify-center">
+                        <span className="text-[#111827] font-inter text-sm font-bold">40%+ APR</span>
+                      </div>
+                      <div className="bg-[#f9fafb] rounded-lg px-3 py-1 flex items-center justify-center">
+                        <span className="text-[#111827] font-inter text-sm font-bold">Instant Exit</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Text Content */}
+                <div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative">
+                  <h3
+                    className="text-[#111827] text-left relative font-inter"
+                    style={{
+                      fontSize: '24px',
+                      lineHeight: '130%',
+                      letterSpacing: '-0.005em',
+                      fontWeight: 700
+                    }}
+                  >
+                    Flexible Liquidity
+                  </h3>
+                  <p
+                    className="text-[#9ca1af] text-left relative font-inter"
+                    style={{
+                      fontSize: '16px',
+                      lineHeight: '150%',
+                      fontWeight: 400
+                    }}
+                  >
+                    Solve the illiquidity of traditional finance. Enjoy instant exit via secondary markets or leverage your positions for up to 40% APY.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}