{"id":520,"date":"2025-05-23T04:14:10","date_gmt":"2025-05-23T04:14:10","guid":{"rendered":"https:\/\/theexchain.com\/?page_id=520"},"modified":"2025-05-30T06:13:54","modified_gmt":"2025-05-30T06:13:54","slug":"nft-%e9%81%8a%e6%88%b2","status":"publish","type":"page","link":"https:\/\/theexchain.com\/zh\/nft-%e9%81%8a%e6%88%b2\/","title":{"rendered":"nft \u904a\u6232"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"520\" class=\"elementor elementor-520\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f15ce9a e-con-full e-flex e-con e-parent\" data-id=\"f15ce9a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c8af664 elementor-widget elementor-widget-html\" data-id=\"c8af664\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <link rel=\"stylesheet\" href=\"styles.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        primary: '#6C5CE7',\n                        secondary: '#e6cfe6',\n                        accent: '#FF3E88',\n                        dark: '#191C26',\n                        light: '#F8FAFC'\n                    },\n                    fontFamily: {\n                        sans: ['Inter', 'sans-serif']\n                    }\n                }\n            }\n        }\n\n        \/**\n * Hero section animated background for TheExchain NFT Gaming Landing Page\n * Creates an interactive particle network animation\n *\/\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Get the hero animation container\n    const heroAnimation = document.querySelector('.hero-animation');\n    \n    if (!heroAnimation) return;\n    \n    \/\/ Create a canvas element for particle animation\n    const canvas = document.createElement('canvas');\n    canvas.classList.add('particle-canvas');\n    canvas.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; height: 100%;';\n    \n    \/\/ Append the canvas to the animation container\n    heroAnimation.appendChild(canvas);\n    \n    \/\/ Setup the canvas context\n    const ctx = canvas.getContext('2d');\n    \n    \/\/ Set canvas dimensions\n    function resizeCanvas() {\n        canvas.width = heroAnimation.clientWidth;\n        canvas.height = heroAnimation.clientHeight;\n    }\n    \n    \/\/ Initial resize\n    resizeCanvas();\n    \n    \/\/ Resize on window resize\n    window.addEventListener('resize', resizeCanvas);\n    \n    \/\/ Particle settings\n    const particleSettings = {\n        count: 120,\n        minSize: 1,\n        maxSize: 3,\n        minSpeed: 0.1,\n        maxSpeed: 0.3,\n        connectionDistance: 150,\n        colors: [\n            'rgba(108, 92, 231, 0.7)', \/\/ Primary\n            'rgba(0, 206, 255, 0.7)',  \/\/ Secondary\n            'rgba(255, 255, 255, 0.5)' \/\/ White\n        ]\n    };\n    \n    \/\/ Create particles array\n    let particles = [];\n    \n    \/\/ Particle class\n    class Particle {\n        constructor() {\n            this.x = Math.random() * canvas.width;\n            this.y = Math.random() * canvas.height;\n            this.size = particleSettings.minSize + Math.random() * (particleSettings.maxSize - particleSettings.minSize);\n            this.vx = (Math.random() - 0.5) * (particleSettings.minSpeed + Math.random() * (particleSettings.maxSpeed - particleSettings.minSpeed));\n            this.vy = (Math.random() - 0.5) * (particleSettings.minSpeed + Math.random() * (particleSettings.maxSpeed - particleSettings.minSpeed));\n            this.color = particleSettings.colors[Math.floor(Math.random() * particleSettings.colors.length)];\n        }\n        \n        update() {\n            \/\/ Move particle\n            this.x += this.vx;\n            this.y += this.vy;\n            \n            \/\/ Bounce off edges\n            if (this.x < 0 || this.x > canvas.width) {\n                this.vx = -this.vx;\n            }\n            \n            if (this.y < 0 || this.y > canvas.height) {\n                this.vy = -this.vy;\n            }\n        }\n        \n        draw() {\n            ctx.fillStyle = this.color;\n            ctx.beginPath();\n            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n            ctx.closePath();\n            ctx.fill();\n        }\n    }\n    \n    \/\/ Initialize particles\n    function initParticles() {\n        particles = [];\n        for (let i = 0; i < particleSettings.count; i++) {\n            particles.push(new Particle());\n        }\n    }\n    \n    \/\/ Draw connection lines between particles\n    function drawConnections() {\n        for (let i = 0; i < particles.length; i++) {\n            for (let j = i + 1; j < particles.length; j++) {\n                const dx = particles[i].x - particles[j].x;\n                const dy = particles[i].y - particles[j].y;\n                const distance = Math.sqrt(dx * dx + dy * dy);\n                \n                if (distance < particleSettings.connectionDistance) {\n                    \/\/ Calculate line opacity based on distance\n                    const opacity = 1 - (distance \/ particleSettings.connectionDistance);\n                    \n                    \/\/ Draw connection\n                    ctx.strokeStyle = `rgba(255, 255, 255, ${opacity * 0.2})`;\n                    ctx.lineWidth = 1;\n                    ctx.beginPath();\n                    ctx.moveTo(particles[i].x, particles[i].y);\n                    ctx.lineTo(particles[j].x, particles[j].y);\n                    ctx.stroke();\n                }\n            }\n        }\n    }\n    \n    \/\/ Main animation loop\n    function animate() {\n        \/\/ Clear canvas\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n        \n        \/\/ Update and draw particles\n        for (let i = 0; i < particles.length; i++) {\n            particles[i].update();\n            particles[i].draw();\n        }\n        \n        \/\/ Draw connections\n        drawConnections();\n        \n        \/\/ Request next frame\n        requestAnimationFrame(animate);\n    }\n    \n    \/\/ Start animation\n    function startAnimation() {\n        initParticles();\n        animate();\n    }\n    \n    \/\/ Make particles follow cursor movement\n    document.addEventListener('mousemove', function(event) {\n        const rect = canvas.getBoundingClientRect();\n        const mouseX = event.clientX - rect.left;\n        const mouseY = event.clientY - rect.top;\n        \n        \/\/ Only affect particles if mouse is over hero section\n        if (mouseX >= 0 && mouseX <= canvas.width && mouseY >= 0 && mouseY <= canvas.height) {\n            particles.forEach(particle => {\n                const dx = mouseX - particle.x;\n                const dy = mouseY - particle.y;\n                const distance = Math.sqrt(dx * dx + dy * dy);\n                \n                \/\/ Move particles away from cursor\n                if (distance < 100) {\n                    \/\/ Direction away from cursor\n                    const angle = Math.atan2(dy, dx);\n                    \n                    \/\/ Move particle away\n                    particle.x -= Math.cos(angle) * 2;\n                    particle.y -= Math.sin(angle) * 2;\n                }\n            });\n        }\n    });\n    \n    \/\/ Start the animation\n    startAnimation();\n    \n    \/\/ Create flowing gradient background\n    const gradientOverlay = document.createElement('div');\n    gradientOverlay.classList.add('gradient-overlay');\n    gradientOverlay.style.cssText = `\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: linear-gradient(\n            45deg,\n            rgba(108, 92, 231, 0.1) 0%,\n            rgba(0, 206, 255, 0.1) 50%,\n            rgba(108, 92, 231, 0.1) 100%\n        );\n        background-size: 200% 200%;\n        animation: gradientFlow 15s ease infinite;\n    `;\n    \n    \/\/ Append the gradient overlay to the animation container\n    heroAnimation.appendChild(gradientOverlay);\n    \n    \/\/ Add keyframes for gradient flow animation\n    if (!document.querySelector('style#hero-animation-styles')) {\n        const style = document.createElement('style');\n        style.id = 'hero-animation-styles';\n        style.textContent = `\n            @keyframes gradientFlow {\n                0% {\n                    background-position: 0% 50%;\n                }\n                50% {\n                    background-position: 100% 50%;\n                }\n                100% {\n                    background-position: 0% 50%;\n                }\n            }\n        `;\n        document.head.appendChild(style);\n    }\n});\n\n\n\/**\n * Enhanced animations for TheExchain NFT Gaming Landing Page\n * Provides additional visual effects and interactions\n *\/\n document.addEventListener('DOMContentLoaded', function() {\n    \/\/ Parallax effect for hero section\n    const heroSection = document.getElementById('hero');\n    const parallaxElements = document.querySelectorAll('.hero-animation');\n    \n    if (heroSection && parallaxElements.length > 0) {\n        window.addEventListener('scroll', function() {\n            const scrollPosition = window.pageYOffset;\n            const heroHeight = heroSection.offsetHeight;\n            \n            if (scrollPosition <= heroHeight) {\n                const scrollPercentage = scrollPosition \/ heroHeight;\n                \n                parallaxElements.forEach(element => {\n                    const yOffset = scrollPercentage * 60;\n                    element.style.transform = `translateY(${yOffset}px)`;\n                });\n            }\n        });\n    }\n    \n    \/\/ Floating animation for cards\n    function applyFloatingAnimation() {\n        const cards = document.querySelectorAll('.feature-card, .service-card, .stat-card, .benefit-card');\n        cards.forEach((card, index) => {\n            \/\/ Create unique animation timing for each card\n            const duration = 3 + Math.random() * 2; \/\/ 3-5s\n            const delay = index * 0.2;\n            const translateY = 5 + Math.random() * 5; \/\/ 5-10px\n            \n            card.style.animation = `float ${duration}s ease-in-out ${delay}s infinite alternate`;\n            \n            \/\/ Add keyframes if they don't exist\n            if (!document.querySelector('style#floating-animations')) {\n                const style = document.createElement('style');\n                style.id = 'floating-animations';\n                style.textContent = `\n                    @keyframes float {\n                        0% {\n                            transform: translateY(0);\n                        }\n                        100% {\n                            transform: translateY(-${translateY}px);\n                        }\n                    }\n                `;\n                document.head.appendChild(style);\n            }\n        });\n    }\n    \n    \/\/ Apply floating animations with a slight delay\n    setTimeout(applyFloatingAnimation, 1000);\n    \n    \/\/ Interactive hover effects for service cards\n    const serviceCards = document.querySelectorAll('.service-card');\n    serviceCards.forEach(card => {\n        card.addEventListener('mouseenter', function() {\n            \/\/ Add glow effect\n            const glow = document.createElement('div');\n            glow.classList.add('card-glow-effect');\n            glow.style.cssText = `\n                position: absolute;\n                top: -50%;\n                left: -50%;\n                width: 200%;\n                height: 200%;\n                opacity: 0;\n                background: radial-gradient(circle at center, rgba(108, 92, 231, 0.3), transparent 70%);\n                transition: opacity 0.5s ease;\n                pointer-events: none;\n                z-index: -1;\n            `;\n            \n            if (card.style.position !== 'relative') {\n                card.style.position = 'relative';\n            }\n            \n            card.appendChild(glow);\n            \n            \/\/ Animate glow in\n            setTimeout(() => {\n                glow.style.opacity = '1';\n            }, 50);\n        });\n        \n        card.addEventListener('mouseleave', function() {\n            const glow = card.querySelector('.card-glow-effect');\n            if (glow) {\n                glow.style.opacity = '0';\n                setTimeout(() => {\n                    glow.remove();\n                }, 500);\n            }\n        });\n    });\n    \n    \/\/ Add background mesh animation to demo section\n    function createMeshAnimation() {\n        const demoSection = document.getElementById('demo');\n        if (!demoSection) return;\n        \n        const demoAnimation = demoSection.querySelector('.demo-animation');\n        if (!demoAnimation) return;\n        \n        \/\/ Create random dots in a grid pattern\n        const dots = [];\n        const dotCount = 30; \/\/ Number of dots in the grid\n        const dotSize = 2; \/\/ Size of each dot in pixels\n        \n        for (let i = 0; i < dotCount; i++) {\n            for (let j = 0; j < dotCount; j++) {\n                \/\/ Create dot element\n                const dot = document.createElement('div');\n                dot.classList.add('mesh-dot');\n                \n                \/\/ Calculate position\n                const xPos = (i \/ dotCount) * 100;\n                const yPos = (j \/ dotCount) * 100;\n                \n                \/\/ Add some randomness to position\n                const xRand = (Math.random() * 2 - 1) * 5; \/\/ \u00b15%\n                const yRand = (Math.random() * 2 - 1) * 5; \/\/ \u00b15%\n                \n                dot.style.cssText = `\n                    position: absolute;\n                    width: ${dotSize}px;\n                    height: ${dotSize}px;\n                    border-radius: 50%;\n                    background-color: rgba(255, 255, 255, ${0.1 + Math.random() * 0.2});\n                    left: ${xPos + xRand}%;\n                    top: ${yPos + yRand}%;\n                    transition: transform 3s ease;\n                    will-change: transform;\n                `;\n                \n                demoAnimation.appendChild(dot);\n                dots.push({\n                    element: dot,\n                    xPos: xPos + xRand,\n                    yPos: yPos + yRand,\n                });\n            }\n        }\n        \n        \/\/ Animate dots\n        function animateDots() {\n            dots.forEach(dot => {\n                \/\/ Add slight movement to each dot\n                const xOffset = (Math.random() * 2 - 1) * 2; \/\/ \u00b12%\n                const yOffset = (Math.random() * 2 - 1) * 2; \/\/ \u00b12%\n                \n                dot.element.style.transform = `translate(${xOffset}px, ${yOffset}px)`;\n            });\n            \n            setTimeout(animateDots, 3000);\n        }\n        \n        animateDots();\n    }\n    \n    \/\/ Initialize the mesh animation\n    createMeshAnimation();\n    \n    \/\/ Button hover effects\n    const buttons = document.querySelectorAll('button:not(.menu-toggle):not(.close-menu)');\n    buttons.forEach(button => {\n        button.addEventListener('mousemove', function(e) {\n            const rect = this.getBoundingClientRect();\n            const x = e.clientX - rect.left;\n            const y = e.clientY - rect.top;\n            \n            this.style.setProperty('--x-pos', x + 'px');\n            this.style.setProperty('--y-pos', y + 'px');\n        });\n    });\n    \n    \/\/ Add button shine effect styles to document\n    if (!document.querySelector('style#button-effects')) {\n        const style = document.createElement('style');\n        style.id = 'button-effects';\n        style.textContent = `\n            button:not(.menu-toggle):not(.close-menu)::after {\n                content: '';\n                position: absolute;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                background: radial-gradient(circle at var(--x-pos, center) var(--y-pos, center), rgba(255,255,255,0.3), transparent 50%);\n                opacity: 0;\n                transition: opacity 0.5s;\n                pointer-events: none;\n            }\n            \n            button:not(.menu-toggle):not(.close-menu):hover::after {\n                opacity: 1;\n            }\n        `;\n        document.head.appendChild(style);\n    }\n});\n\n\/\/ Main script file for TheExchain NFT Gaming Landing Page\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Mobile menu toggles\n    const menuToggle = document.querySelector('.menu-toggle');\n    const closeMenu = document.querySelector('.close-menu');\n    const mobileMenu = document.querySelector('.mobile-menu');\n    const mobileMenuLinks = document.querySelectorAll('.mobile-menu a');\n    \n    \/\/ Open menu\n    if (menuToggle) {\n        menuToggle.addEventListener('click', function() {\n            mobileMenu.classList.remove('hidden');\n            document.body.style.overflow = 'hidden';\n            \n            \/\/ Animate menu items\n            mobileMenuLinks.forEach((link, index) => {\n                link.style.opacity = '0';\n                link.style.transform = 'translateY(20px)';\n                setTimeout(() => {\n                    link.style.transition = 'all 0.3s ease';\n                    link.style.transitionDelay = `${index * 100}ms`;\n                    link.style.opacity = '1';\n                    link.style.transform = 'translateY(0)';\n                }, 100);\n            });\n        });\n    }\n    \n    \/\/ Close menu\n    if (closeMenu) {\n        closeMenu.addEventListener('click', closeMenuFunction);\n    }\n    \n    \/\/ Close menu when clicking on links\n    mobileMenuLinks.forEach(link => {\n        link.addEventListener('click', closeMenuFunction);\n    });\n    \n    function closeMenuFunction() {\n        mobileMenuLinks.forEach(link => {\n            link.style.opacity = '0';\n            link.style.transform = 'translateY(20px)';\n        });\n        \n        setTimeout(() => {\n            mobileMenu.classList.add('hidden');\n            document.body.style.overflow = 'auto';\n        }, 300);\n    }\n    \n    \/\/ Counter animation\n    const counters = document.querySelectorAll('.counter');\n    \n    counters.forEach(counter => {\n        const target = parseInt(counter.getAttribute('data-target'));\n        const duration = 2000; \/\/ ms\n        const frameRate = 60;\n        const frameDuration = 1000 \/ frameRate;\n        const totalFrames = Math.round(duration \/ frameDuration);\n        \n        let frame = 0;\n        let currentCount = 0;\n        \n        const startCounterOnScroll = () => {\n            const rect = counter.getBoundingClientRect();\n            const isVisible = \n                rect.top <= window.innerHeight * 0.8 &&\n                rect.bottom >= 0;\n                \n            if (isVisible && currentCount < target) {\n                frame = 0;\n                currentCount = 0;\n                const counter_interval = setInterval(() => {\n                    frame++;\n                    \/\/ EaseOutQuad easing function\n                    const progress = frame \/ totalFrames;\n                    const easedProgress = -progress * (progress - 2);\n                    currentCount = Math.round(easedProgress * target);\n                    \n                    if (frame === totalFrames) {\n                        currentCount = target;\n                        clearInterval(counter_interval);\n                    }\n                    counter.innerText = currentCount;\n                }, frameDuration);\n                \n                \/\/ Remove the event listener once counter starts\n                window.removeEventListener('scroll', startCounterOnScroll);\n            }\n        };\n        \n        \/\/ Check if counter is visible on initial load\n        startCounterOnScroll();\n        \n        \/\/ Add scroll event listener to check visibility\n        window.addEventListener('scroll', startCounterOnScroll);\n    });\n    \n    \/\/ Smooth scrolling for anchor links\n    document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n        anchor.addEventListener('click', function(e) {\n            e.preventDefault();\n            \n            const targetId = this.getAttribute('href');\n            if (targetId === '#') return;\n            \n            const targetElement = document.querySelector(targetId);\n            if (targetElement) {\n                window.scrollTo({\n                    top: targetElement.offsetTop - 80,\n                    behavior: 'smooth'\n                });\n            }\n        });\n    });\n    \n    \/\/ Handle animation for elements when they come into view\n    const animatedElements = document.querySelectorAll(\n        '.fade-in-up-element, .fade-in-down-element, .fade-in-left-element, .fade-in-right-element, .slide-in-element, .reveal-element'\n    );\n    \n    const handleElementAnimation = () => {\n        animatedElements.forEach(element => {\n            const rect = element.getBoundingClientRect();\n            const isVisible = \n                rect.top <= window.innerHeight * 0.85 &&\n                rect.bottom >= 0;\n                \n            if (isVisible) {\n                element.style.transition = 'opacity 0.8s ease, transform 0.8s ease';\n                element.style.opacity = '1';\n                element.style.transform = 'translateY(0) translateX(0)';\n            }\n        });\n    };\n    \n    \/\/ Check elements on initial load\n    handleElementAnimation();\n    \n    \/\/ Check elements on scroll\n    window.addEventListener('scroll', handleElementAnimation);\n\n    \/\/ Demo video placeholder click interaction\n    const demoShowcase = document.querySelector('.demo-showcase');\n    if (demoShowcase) {\n        demoShowcase.addEventListener('click', function() {\n            this.innerHTML = `\n                <div class=\"aspect-video relative overflow-hidden\">\n                    <div class=\"absolute inset-0 flex items-center justify-center bg-dark\/80\">\n                        <div class=\"text-center p-8\">\n                            <h3 class=\"text-xl font-bold mb-2\">Video Demo Coming Soon<\/h3>\n                            <p class=\"text-gray-300\">Our team is preparing an interactive demo for you. Check back soon or contact us for a personalized demonstration!<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            `;\n        });\n    }\n\n    \/\/ Handle scrolling header transparency\n    const header = document.querySelector('header');\n    window.addEventListener('scroll', function() {\n        if (window.scrollY > 50) {\n            header?.classList.add('backdrop-blur-md', 'bg-dark\/80', 'border-b', 'border-white\/10');\n            header?.classList.remove('bg-transparent');\n        } else {\n            header?.classList.remove('backdrop-blur-md', 'bg-dark\/80', 'border-b', 'border-white\/10');\n            header?.classList.add('bg-transparent');\n        }\n    });\n});\n\n\n    <\/script>\n\n    <style>\n        \/* Main Styles *\/\n.gradient-text {\n  background: linear-gradient(90deg, #6C5CE7,#cfb5ff));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  text-fill-color: transparent;\n}\n\n.gradient-title {\n  background: linear-gradient(90deg, #fff, #cfb5ff);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  text-fill-color: transparent;\n}\n\n.text-gradient {\n  background: linear-gradient(90deg, #6C5CE7, #cfb5ff);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  text-fill-color: transparent;\n}\n\n\/* Buttons and interactive elements *\/\n.hover-glow-button {\n  position: relative;\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.hover-glow-button:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 0 20px rgba(108, 92, 231, 0.6);\n}\n\n.hover-glow-button::before {\n  content: \"\";\n  position: absolute;\n  top: -50%;\n  left: -50%;\n  width: 200%;\n  height: 200%;\n  background: linear-gradient(\n    to bottom right,\n    rgba(255, 255, 255, 0) 0%,\n    rgba(255, 255, 255, 0.1) 100%\n  );\n  transform: rotate(30deg);\n  transition: all 0.3s ease;\n}\n\n.hover-glow-button:hover::before {\n  transform: rotate(30deg) translate(10%, 10%);\n}\n\n.nav-link {\n  position: relative;\n  color: #fff;\n  text-decoration: none;\n  padding-bottom: 4px;\n}\n\n.nav-link::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 0;\n  height: 2px;\n  background: linear-gradient(90deg, #251d63, #6C5CE7);\n  transition: width 0.3s ease;\n}\n\n.nav-link:hover::after {\n  width: 100%;\n}\n\n.hover-float {\n  transition: transform 0.3s ease;\n}\n\n.hover-float:hover {\n  transform: translateY(-5px);\n}\n\n\/* Section titles *\/\n.section-title {\n  text-align: center;\n  margin-bottom: 2rem;\n}\n\n\n.section-title2 {\n  text-align: center;\n  margin-bottom: 2rem;\n}\n\n.section-title .subtitle {\n  display: inline-block;\n  background: linear-gradient(90deg, rgba(108, 92, 231, 0.15), rgba(0, 206, 255, 0.15));\n  padding: 0.5rem 1rem;\n  border-radius: 2rem;\n  font-weight: 500;\n  margin-bottom: 0.5rem;\n  color: #6C5CE7;\n  text-transform: uppercase;\n  font-size: 0.875rem;\n  letter-spacing: 1px;\n}\n\n.section-title2 .subtitle {\n  display: inline-block;\n  background: linear-gradient(90deg, rgba(108, 92, 231, 0.15), rgba(0, 206, 255, 0.15));\n  padding: 0.5rem 1rem;\n  border-radius: 2rem;\n  font-weight: 500;\n  margin-bottom: 0.5rem;\n  color: #6C5CE7;\n  text-transform: uppercase;\n  font-size: 0.875rem;\n  letter-spacing: 1px;\n}\n\n.section-title h2 {\n  font-size: 2.5rem;\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n  background: linear-gradient(90deg, #fff, #e2e8f0);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  text-fill-color: transparent;\n}\n\n.section-title2 h2 {\n  font-size: 2.5rem;\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n  background: linear-gradient(90deg, rgb(29, 29, 29), #4e4e4e);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  text-fill-color: transparent;\n}\n\n\n.title-line {\n  height: 3px;\n  width: 80px;\n  background: linear-gradient(90deg, #6C5CE7, #6C5CE7);\n  margin: 1rem auto;\n  border-radius: 3px;\n}\n\n\/* Cards and containers *\/\n.stat-card {\n  background: rgba(255, 255, 255, 0.05);\n  backdrop-filter: blur(10px);\n  border-radius: 0.75rem;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  padding: 1.25rem;\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.stat-card:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);\n  border-color: rgba(255, 255, 255, 0.2);\n}\n\n.feature-card {\n  background: rgba(255, 255, 255, 0.05);\n  backdrop-filter: blur(10px);\n  border-radius: 1rem;\n  padding: 2rem;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  transition: all 0.3s ease;\n  overflow: hidden;\n}\n\n.feature-card:hover {\n  transform: translateY(-5px);\n  border-color: rgba(255, 255, 255, 0.2);\n  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.3);\n}\n\n.feature-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 70px;\n  height: 70px;\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 1rem;\n  margin-bottom: 1.5rem;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.glow-effect {\n  position: absolute;\n  top: -50%;\n  left: -50%;\n  width: 200%;\n  height: 200%;\n  background: radial-gradient(\n    circle,\n    rgba(108, 92, 231, 0.1) 0%,\n    rgba(0, 0, 0, 0) 70%\n  );\n  opacity: 0;\n  transition: opacity 0.5s ease;\n  pointer-events: none;\n}\n\n.feature-card:hover .glow-effect {\n  opacity: 1;\n}\n\n.service-card {\n  background: rgba(255, 255, 255, 0.03);\n  backdrop-filter: blur(10px);\n  border-radius: 1rem;\n  padding: 2rem;\n  border: 1px solid rgba(255, 255, 255, 0.07);\n  transition: all 0.3s ease;\n  height: 100%;\n}\n\n.service-card:hover {\n  transform: translateY(-5px);\n  border-color: rgba(255, 255, 255, 0.15);\n  box-shadow: 0 20px 40px -20px rgba(108, 92, 231, 0.2);\n}\n\n.service-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 60px;\n  height: 60px;\n  background: linear-gradient(135deg, rgba(108, 92, 231, 0.2), rgba(0, 206, 255, 0.2));\n  border-radius: 1rem;\n  margin-bottom: 1.5rem;\n  color: #6C5CE7;\n}\n\n.service-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.service-list li {\n  position: relative;\n  padding-left: 1.5rem;\n  margin-bottom: 0.5rem;\n  color: #d1d5db;\n}\n\n.service-list li::before {\n  content: \"\u2192\";\n  position: absolute;\n  left: 0;\n  color: #6C5CE7;\n}\n\n.benefit-card {\n  text-align: center;\n  padding: 2rem;\n  border-radius: 1rem;\n  background: rgba(255, 255, 255, 0.02);\n  border: 1px solid rgba(255, 255, 255, 0.07);\n  transition: all 0.3s ease;\n}\n\n.benefit-card:hover {\n  background: rgba(255, 255, 255, 0.05);\n  transform: translateY(-5px);\n  border-color: rgba(255, 255, 255, 0.15);\n}\n\n.benefit-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 70px;\n  height: 70px;\n  background:  #6C5CE7;\n  border-radius: 50%;\n  margin-bottom: 1.5rem;\n  color: #fff;\n  font-size: 1.5rem;\n}\n\n\n\n\n.benefit-card h3 {\n  font-size: 1.25rem;\n  font-weight: 600;\n  margin-bottom: 1rem;\n  color: rgb(26, 26, 26);\n}\n\n.demo-feature {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n}\n\n.demo-feature-icon {\n  flex-shrink: 0;\n  width: 50px;\n  height: 50px;\n  background: linear-gradient(135deg, rgba(108, 92, 231, 0.15), rgba(0, 206, 255, 0.15));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 1rem;\n  color: #6C5CE7;\n  font-size: 1.25rem;\n}\n\n.testimonial-card {\n  background: rgba(255, 255, 255, 0.05);\n  backdrop-filter: blur(10px);\n  border-radius: 1rem;\n  padding: 1.5rem;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  height: 100%;\n}\n\n.social-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 0.5rem;\n  color: #fff;\n  transition: all 0.3s ease;\n}\n\n.social-icon:hover {\n  background: linear-gradient(135deg, rgba(108, 92, 231, 0.3), rgba(0, 206, 255, 0.3));\n  transform: translateY(-3px);\n}\n\n\/* FAQ Styling *\/\n.faq-item {\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.faq-question {\n  padding: 1.25rem 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n}\n\n.faq-question h3 {\n  font-weight: 600;\n  font-size: 1.125rem;\n  margin: 0;\n}\n\n.faq-icon {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.05);\n  transition: all 0.3s ease;\n}\n\n.faq-answer {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease, padding 0.3s ease;\n  padding: 0 0;\n}\n\n.faq-item.active .faq-answer {\n  max-height: 500px;\n  padding: 0 0 1.25rem 0;\n}\n\n.faq-item.active .faq-icon {\n  transform: rotate(45deg);\n  background: linear-gradient(135deg, rgba(108, 92, 231, 0.3), rgba(0, 206, 255, 0.3));\n}\n\n\/* Animation effects *\/\n.pulse-effect {\n  animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n  0% { opacity: 0.6; transform: scale(1); }\n  50% { opacity: 1; transform: scale(1.05); }\n  100% { opacity: 0.6; transform: scale(1); }\n}\n\n.fade-in-up-element {\n  opacity: 0;\n  transform: translateY(20px);\n}\n\n.fade-in-down-element {\n  opacity: 0;\n  transform: translateY(-20px);\n}\n\n.fade-in-left-element {\n  opacity: 0;\n  transform: translateX(-20px);\n}\n\n.fade-in-right-element {\n  opacity: 0;\n  transform: translateX(20px);\n}\n\n.slide-in-element {\n  opacity: 0;\n  transform: translateY(10px);\n}\n\n.reveal-element {\n  opacity: 0;\n  transform: translateY(30px);\n}\n\n.delay-100 {\n  transition-delay: 100ms !important;\n}\n\n.delay-200 {\n  transition-delay: 200ms !important;\n}\n\n.delay-300 {\n  transition-delay: 300ms !important;\n}\n\n.delay-400 {\n  transition-delay: 400ms !important;\n}\n\n.delay-500 {\n  transition-delay: 500ms !important;\n}\n\n.delay-600 {\n  transition-delay: 600ms !important;\n}\n\n\/* Demo animation background *\/\n.demo-animation {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: radial-gradient(circle at 50% 50%, rgba(108, 92, 231, 0.2), transparent 50%), \n              radial-gradient(circle at 80% 20%, rgba(0, 206, 255, 0.2), transparent 30%);\n  filter: blur(70px);\n}\n\n\/* Hero animation background *\/\n.hero-animation {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow: hidden;\n}\n\n\n    <\/style>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<\/head>\n<body class=\"bg-gradient-to-br from-indigo-900 via-dark to-gray-900 text-white font-sans overflow-x-hidden\">\n\n\n\n    <main>\n        <!-- Hero Section -->\n       <section id=\"hero\" class=\"relative min-h-screen bg-gradient-to-br from-purple-950 via-[#1e082a] to-indigo-950 flex items-center\">\n\n\n\n            <div class=\"absolute inset-0 hero-animation -z-10 opacity-30\"><\/div>\n            <div class=\"container mx-auto px-4 py-20 md:py-32\">\n                <div class=\"max-w-4xl mx-auto text-center relative\">\n                    <div class=\"badge slide-in-element mb-4 inline-block px-4 py-1 bg-white\/10 backdrop-blur-sm rounded-full border border-white\/20\">\n                        <span class=\"text-gradient font-medium\">\u6b21\u4e16\u4ee3\u904a\u6232\u6280\u8853<\/span>\n                    <\/div>\n                    <h1 class=\"!text-white text-4xl md:text-6xl lg:text-7xl font-bold mb-6 gradient-title fade-in-up-element\">\n                        \u9769\u65b0\u904a\u6232\n                        <span class=\"text-secondary block sm:inline\">NFT\u3001Metaverse \u8207 Web3<\/span>\n                    <\/h1>\n                    <p class=\"text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto fade-in-up-element delay-200\">\n                        TheExchain \u7684 NFT SaaS \u89e3\u6c7a\u65b9\u6848 - \u6578\u4f4d\u8cc7\u7522\u904a\u6232\u7684\u65b0\u6642\u4ee3\uff0c\u6211\u5011\u5728 NFT \u65b9\u9762\u7684\u5c08\u696d\u77e5\u8b58\u63a8\u52d5\u904a\u6232\u9ad4\u9a57\u9032\u5165 Web3 \u7684\u672a\u4f86\u3002\n                    <\/p>\n                    <div class=\"flex flex-col sm:flex-row gap-4 justify-center fade-in-up-element delay-400\">\n                        <button \n                        onclick=\"document.getElementById('services').scrollIntoView({ behavior: 'smooth' })\" \n                        class=\"hover-glow-button px-6 py-3 rounded-lg bg-gradient-to-r from-primary to-secondary text-white text-lg\"\n                    >\n                        \u958b\u59cb\u4f7f\u7528\n                    <\/button>\n                    <button \n                    onclick=\"window.location.href='\/contact\/'\" \n                    class=\"px-6 py-3 rounded-lg border border-white\/30 hover:border-white\/60 backdrop-blur-sm text-white font-medium text-lg hover-float transition-colors cursor-pointer\"\n                >\n                    \u806f\u7d61\u6211\u5011\n                <\/button>\n                    <\/div>\n\n                    <div class=\"mt-16 grid grid-cols-2 md:grid-cols-4 gap-6 text-center fade-in-up-element delay-600\">\n                        <div class=\"stat-card\">\n                            <div class=\"text-3xl font-bold mb-1 counter !text-white\" data-target=\"500\">0<\/div>\n                            <div class=\"text-gray-400\">\u904a\u6232\u5c08\u6848<\/div>\n                        <\/div>\n                        <div class=\"stat-card\">\n                            <div class=\"text-3xl font-bold mb-1 counter !text-white\" data-target=\"99\">0<\/div>\n                            <div class=\"text-gray-400\">\u5ba2\u6236\u6eff\u610f\u5ea6<\/div>\n                        <\/div>\n                        <div class=\"stat-card\">\n                            <div class=\"text-3xl font-bold mb-1 !text-white\"><span class=\"counter\" data-target=\"1\">0<\/span>M+<\/div>\n                            <div class=\"text-gray-400\">\u751f\u614b\u7cfb\u7d71\u4e2d\u7684 NFT<\/div>\n                        <\/div>\n                        <div class=\"stat-card\">\n                            <div class=\"text-3xl font-bold mb-1 !text-white\">$<span class=\"counter\" data-target=\"200\">0<\/span>M<\/div>\n                            <div class=\"text-gray-400\">\u4ea4\u6613\u91cf<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"absolute bottom-12 left-0 right-0 flex justify-center\">\n                <div class=\"animate-bounce\">\n                    <a href=\"#services\" class=\"w-10 h-10 flex items-center justify-center rounded-full bg-white\/10 backdrop-blur-md border border-white\/20\">\n                        <i class=\"fas fa-chevron-down text-white\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Service Introduction -->\n        <section id=\"services\" class=\"py-20 relative overflow-hidden bg-white\">\n            <div class=\"container mx-auto px-4\">\n                <div class=\"section-title2\">\n                    <span class=\"subtitle bg-primary\/10 text-primary\">\u6211\u5011\u7684\u670d\u52d9<\/span>\n                    <h2 class=\"!text-black\">\u5f37\u5316\u904a\u6232\u7684\u672a\u4f86<\/h2>\n                    <div class=\"title-line bg-gradient-to-r from-primary to-secondary\"><\/div>\n                <\/div>\n        \n                <div class=\"mt-12 grid grid-cols-1 md:grid-cols-2 gap-8\">\n                    <div class=\"order-2 md:order-1 reveal-element\">\n                        <h3 class=\"text-2xl md:text-3xl font-bold mb-4 text-gray-800\">\n                            TheExchain\uff1a\u60a8\u5728 Web3 \u904a\u6232\u9769\u547d\u4e2d\u7684\u5408\u4f5c\u5925\u4f34\n                        <\/h3>\n                        <p class=\"text-lg text-gray-600 mb-4\">\n                            <strong class=\"text-gray-900\">TheExchain \u7ad9\u5728\u6578\u4f4d\u9769\u547d\u7684\u6700\u524d\u7dda<\/strong>, \u73fe\u6709\u904a\u6232\u958b\u767c\u8005\u9762\u81e8\u7684\u6311\u6230\u5728\u65bc\u5982\u4f55\u5b89\u5168\u7121\u7e2b\u5730\u6574\u5408\u8907\u96dc\u7684\u5340\u584a\u93c8\u6280\u8853\u3001NFT \u5275\u5efa\u4ee5\u53ca\u5143\u5b87\u5b99\u4e92\u64cd\u4f5c\u6027\u3002\u9019\u901a\u5e38\u9700\u8981\u5c08\u696d\u7684\u77e5\u8b58\u3001\u5927\u91cf\u7684\u958b\u767c\u6642\u9593\uff0c\u4ee5\u53ca\u901a\u904e\u8907\u96dc\u7684\u6280\u8853\u969c\u7919\u3002 \n                        <\/p>\n                        <p class=\"text-lg text-gray-600 mb-6\">\n                          \n                        <\/p>\n                        <div class=\"space-y-4\">\n                            <div class=\"flex items-start gap-3\">\n                                <div class=\"w-6 h-6 rounded-full bg-primary flex-shrink-0 flex items-center justify-center mt-1\">\n                                    <i class=\"fas fa-check text-xs text-white\"><\/i>\n                                <\/div>\n                                <p class=\"text-gray-700\"><strong class=\"text-gray-900\">\u63d0\u9ad8\u73a9\u5bb6\u53c3\u8207\u5ea6\uff1a<\/strong> \u5275\u9020\u52d5\u614b\u7d93\u6fdf\u548c\u771f\u6b63\u6709\u50f9\u503c\u7684\u6578\u4f4d\u8cc7\u7522\uff0c\u52a0\u6df1\u73a9\u5bb6\u8207\u904a\u6232\u4e16\u754c\u7684\u806f\u7e6b\u548c\u6295\u8cc7\u3002<\/p>\n                            <\/div>\n                            <div class=\"flex items-start gap-3\">\n                                <div class=\"w-6 h-6 rounded-full bg-secondary flex-shrink-0 flex items-center justify-center mt-1\">\n                                    <i class=\"fas fa-check text-xs text-white\"><\/i>\n                                <\/div>\n                                <p class=\"text-gray-700\"><strong class=\"text-gray-900\">\u958b\u555f\u65b0\u7684\u6536\u5165\u4f86\u6e90\uff1a<\/strong> \u5229\u7528\u4e8c\u624b\u5e02\u5834\u3001\u8cfa\u9322\u6a21\u5f0f\u548c NFT \u6295\u8cc7\u4f86\u5275\u9020\u5275\u65b0\u7684\u6536\u5165\u6a5f\u6703\u3002<\/p>\n                            <\/div>\n                            <div class=\"flex items-start gap-3\">\n                                <div class=\"w-6 h-6 rounded-full bg-accent flex-shrink-0 flex items-center justify-center mt-1\">\n                                    <i class=\"fas fa-check text-xs text-white\"><\/i>\n                                <\/div>\n                                <p class=\"text-gray-700\"><strong class=\"text-gray-900\">\u6388\u4e88\u771f\u6b63\u7684\u8cc7\u7522\u6240\u6709\u6b0a\uff1a<\/strong> \u8ce6\u4e88\u73a9\u5bb6\u53ef\u9a57\u8b49\u7684\u904a\u6232\u5167\u8cc7\u7522\u6240\u6709\u6b0a\uff0c\u57f9\u990a\u4fe1\u4efb\u8207\u793e\u7fa4\u3002<\/p>\n                            <\/div>\n                            <div class=\"flex items-start gap-3\">\n                                <div class=\"w-6 h-6 rounded-full bg-primary\/70 flex-shrink-0 flex items-center justify-center mt-1\">\n                                    <i class=\"fas fa-check text-xs text-white\"><\/i>\n                                <\/div>\n                                <p class=\"text-gray-700\"><strong class=\"text-gray-900\">\u6253\u9020\u904a\u6232\u7684\u672a\u4f86\uff1a<\/strong> \u81ea\u4fe1\u5730\u8e0f\u5165 Metaverse \u4e92\u9023\u7684\u6578\u4f4d\u9818\u57df\u3002<\/p>\n                            <\/div>\n                        <\/div>\n                  \n                    <\/div>\n                    <div class=\"order-1 md:order-2 reveal-element\">\n                        <div class=\"feature-card relative bg-white border border-gray-200 shadow-lg hover:shadow-xl\">\n                            <div class=\"glow-effect\"><\/div>\n                            <div class=\"feature-icon bg-primary\/10 text-primary\">\n                                <i class=\"fas fa-gamepad text-4xl text-secondary\"><\/i>\n                            <\/div>\n                            <h4 class=\"text-xl font-semibold mb-3 text-gray-800\">\u904a\u6232\u8cc7\u7522\u4ee3\u7528\u5e63\u5316<\/h4>\n                            <p class=\"text-gray-600\">\u5c07\u904a\u6232\u4e2d\u7684\u7269\u54c1\u8f49\u63db\u70ba\u6709\u50f9\u503c\u7684\u6578\u4f4d\u8cc7\u7522\uff0c\u8b93\u73a9\u5bb6\u53ef\u4ee5\u771f\u6b63\u64c1\u6709\u3001\u4ea4\u6613\u4e26\u8cfa\u9322\u3002<\/p>\n                        <\/div>\n                        <div class=\"feature-card relative mt-8 ml-0 md:ml-8 bg-white border border-gray-200 shadow-lg hover:shadow-xl\">\n                            <div class=\"glow-effect\"><\/div>\n                            <div class=\"feature-icon bg-primary\/10 text-primary\">\n                                <i class=\"fas fa-cubes text-4xl text-accent\"><\/i>\n                            <\/div>\n                            <h4 class=\"text-xl font-semibold mb-3 text-gray-800\">Metaverse \u67b6\u69cb<\/h4>\n                            <p class=\"text-gray-600\">\u4f7f\u7528\u6211\u5011\u53ef\u64f4\u5145\u7684 metaverse \u958b\u767c\u5de5\u5177\u5305\uff0c\u5efa\u7acb\u8eab\u6b77\u5176\u5883\u7684\u865b\u64ec\u4e16\u754c\u3002<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n        \n\n        <!-- Detailed Service Content -->\n        <section id=\"detailed-services\" class=\"py-20 bg-black backdrop-blur-md\">\n            <div class=\"container mx-auto px-4\">\n                <div class=\"section-title\">\n                    <span class=\"subtitle\">\u6211\u5011\u63d0\u4f9b\u7684\u670d\u52d9<\/span>\n                    <h2>\u5168\u9762\u7684 NFT \u904a\u6232\u89e3\u6c7a\u65b9\u6848<\/h2>\n                    <div class=\"title-line\"><\/div>\n                <\/div>\n                <p class=\"text-lg text-gray-300 mb-12 max-w-3xl mx-auto text-center reveal-element\">\n                    TheExchain \u7684 NFT SaaS \u5e73\u53f0\u63d0\u4f9b\u4e86\u4e00\u5957\u5f37\u5927\u7684\u5de5\u5177\u548c\u670d\u52d9\uff0c\u65e8\u5728\u5c07\u60a8\u7684\u904a\u6232\u9858\u666f\u5e36\u5165 Web3 \u6642\u4ee3\u3002\u6211\u5011\u63d0\u4f9b\u7aef\u5c0d\u7aef\u7684\u89e3\u6c7a\u65b9\u6848\uff0c\u6db5\u84cb\u904a\u6232\u548c\u5143\u5b87\u5b99\u4e2d\u6578\u4f4d\u8cc7\u7522\u7684\u6574\u500b\u751f\u547d\u9031\u671f\u3002\n                <\/p>\n\n                <div class=\"mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n                    <div class=\"service-card reveal-element\">\n                        <div class=\"service-icon\">\n                            <i class=\"fas fa-magic text-4xl\"><\/i>\n                        <\/div>\n                        <h3 class=\"text-xl !text-white font-bold mb-3\">NFT \u9020\u5e63\u5f15\u64ce<\/h3>\n                        <p class=\"text-gray-300\">\u8f15\u9b06\u5730\u5c07\u591a\u6a23\u5316\u7684\u904a\u6232\u5167\u8cc7\u7522\u88fd\u6210 NFT\uff0c\u4e26\u53ef\u81ea\u8a02\u5c6c\u6027\u548c\u7a00\u6709\u5ea6\u3002<\/p>\n                        <ul class=\"service-list mt-4\">\n                            <li>\u9748\u6d3b\u7684 NFT \u5275\u5efa<\/li>\n                            <li>\u81ea\u8a02\u5143\u8cc7\u6599\u8207\u5c6c\u6027<\/li>\n                            <li>\u6279\u91cf\u9444\u5e63\u80fd\u529b<\/li>\n                            <li>\u8de8\u93c8\u76f8\u5bb9\u6027<\/li>\n                        <\/ul>\n                    <\/div>\n\n                    <div class=\"service-card reveal-element delay-100\">\n                        <div class=\"service-icon\">\n                            <i class=\"fas fa-store text-4xl\"><\/i>\n                        <\/div>\n                        <h3 class=\"text-xl !text-white font-bold mb-3\">\u6574\u5408\u5f0f NFT \u5e02\u5834<\/h3>\n                        <p class=\"text-gray-300\">\u70ba\u73a9\u5bb6\u63d0\u4f9b\u5b89\u5168\u7684\u904a\u6232\u5167\u6216\u7368\u7acb\u5e02\u5834\uff0c\u4ee5\u4ea4\u6613 NFT \u8cc7\u7522\u3002<\/p>\n                        <ul class=\"service-list mt-4\">\n                            <li>\u7121\u7e2b\u8cc7\u7522\u4ea4\u6613<\/li>\n                            <li>\u62cd\u8ce3\u8207\u56fa\u5b9a\u50f9\u683c\u4e0a\u5e02<\/li>\n                            <li>\u7248\u7a05\u81ea\u52d5\u57f7\u884c<\/li>\n                            <li>\u5e02\u5834\u5206\u6790\u8207\u5831\u544a<\/li>\n                        <\/ul>\n                    <\/div>\n\n                    <div class=\"service-card reveal-element delay-200\">\n                        <div class=\"service-icon\">\n                            <i class=\"fas fa-vr-cardboard text-4xl\"><\/i>\n                        <\/div>\n                        <h3 class=\"text-xl !text-white font-bold mb-3\">Metaverse \u8207\u4e92\u64cd\u4f5c\u6027<\/h3>\n                        <p class=\"text-gray-300\">\u5c07\u60a8\u7684\u904a\u6232\u6574\u5408\u81f3\u865b\u64ec\u4e16\u754c\uff0c\u6216\u5efa\u7acb\u60a8\u81ea\u5df1\u7684\u6c89\u6d78\u5f0f metaverse \u9ad4\u9a57\u3002<\/p>\n                        <ul class=\"service-list mt-4\">\n                            <li>\u865b\u64ec\u4e16\u754c\u6574\u5408<\/li>\n                            <li>\u8de8\u904a\u6232\u8cc7\u7522\u53ef\u651c\u6027<\/li>\n                            <li>\u793e\u6703\u8207\u7d93\u6fdf\u67b6\u69cb<\/li>\n                        <\/ul>\n                    <\/div>\n                \n                    <div class=\"service-card reveal-element delay-300\">\n                        <div class=\"service-icon\">\n                            <i class=\"fas fa-wallet text-4xl\"><\/i>\n                        <\/div>\n                        <h3 class=\"text-xl !text-white font-bold mb-3\">\u9322\u5305\u6574\u5408<\/h3>\n                        <p class=\"text-gray-300\">\u70ba\u904a\u6232\u73a9\u5bb6\u63d0\u4f9b\u4eba\u6027\u5316\u7684\u9322\u5305\u89e3\u6c7a\u65b9\u6848\uff0c\u5305\u62ec\u8a17\u7ba1\u548c\u975e\u8a17\u7ba1\u9078\u9805\u3002<\/p>\n                        <ul class=\"service-list mt-4\">\n                            <li>\u904a\u6232\u73a9\u5bb6\u53cb\u5584\u4ecb\u9762<\/li>\n                            <li>\u5b89\u5168\u7684\u8cc7\u7522\u4fdd\u7ba1<\/li>\n                            <li>\u591a\u93c8\u9322\u5305\u652f\u63f4<\/li>\n                        <\/ul>\n                    <\/div>\n\n                    <div class=\"service-card reveal-element delay-400\">\n                        <div class=\"service-icon\">\n                            <i class=\"fas fa-trophy text-4xl\"><\/i>\n                        <\/div>\n                        <h3 class=\"text-xl !text-white font-bold mb-3\">\u904a\u6232\u7372\u5229\u6a5f\u5236<\/h3>\n                        <p class=\"text-gray-300\">\u5be6\u65bd\u5f15\u4eba\u5165\u52dd\u7684\u904a\u6232\u8cfa\u9322\u6a21\u5f0f\uff0c\u4ee5\u6709\u50f9\u503c\u7684 NFT \u6216\u52a0\u5bc6\u8ca8\u5e63\u734e\u52f5\u73a9\u5bb6\u3002<\/p>\n                        <ul class=\"service-list mt-4\">\n                            <li>\u734e\u52f5\u7cfb\u7d71\u6574\u5408<\/li>\n                            <li>\u6c38\u7e8c\u7684 tokenomics \u8a2d\u8a08<\/li>\n                            <li>\u793e\u5340\u9a45\u52d5\u7684\u734e\u52f5\u63aa\u65bd<\/li>\n                        <\/ul>\n                    <\/div>\n\n                    <div class=\"service-card reveal-element delay-500\">\n                        <div class=\"service-icon\">\n                            <i class=\"fas fa-code-branch text-4xl\"><\/i>\n                        <\/div>\n                        <h3 class=\"text-xl !text-white font-bold mb-3\">\u958b\u767c\u4eba\u54e1 SDK \u8207 API<\/h3>\n                        <p class=\"text-gray-300\">\u5229\u7528\u5168\u9762\u7684 SDK \u548c\u5f37\u5927\u7684 API\uff0c\u5feb\u901f\u8207\u4e3b\u8981\u7684\u904a\u6232\u5f15\u64ce\u6574\u5408\u3002<\/p>\n                        <ul class=\"service-list mt-4\">\n                            <li>\u652f\u63f4 Unity \u8207 Unreal \u5f15\u64ce<\/li>\n                            <li>\u5b8c\u6574\u7684\u5ba2\u88fd\u5316\u9078\u9805<\/li>\n                            <li>\u9ad8\u6548\u7387\u7684\u6574\u5408\u6d41\u7a0b<\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n\n              \n\n              \n            <\/div>\n        <\/section>\n\n        <!-- Why Choose Us -->\n        <section id=\"why-us\" class=\"py-20 relative bg-white\">\n            <div class=\"container mx-auto px-4\">\n                <div class=\"section-title2\">\n                    <span class=\"subtitle bg-primary\/10 text-primary\">\u6211\u5011\u7684\u512a\u52e2<\/span>\n                    <h2 class=\"text-gray-900\">\u70ba\u4ec0\u9ebc\u8981\u8207 TheExchain \u5408\u4f5c\uff1f<\/h2>\n                    <div class=\"title-line bg-gradient-to-r from-primary to-secondary\"><\/div>\n                <\/div>\n                <p class=\"text-lg text-gray-600 mb-12 max-w-3xl mx-auto text-center reveal-element\">\n                    \u70ba\u60a8\u7684 Web3 \u904a\u6232\u65c5\u7a0b\u9078\u64c7\u5408\u9069\u7684\u5408\u4f5c\u5925\u4f34\u81f3\u95dc\u91cd\u8981\u3002TheExchain \u63d0\u4f9b\u4e86\u5c08\u696d\u77e5\u8b58\u3001\u6280\u8853\u548c\u627f\u8afe\u7684\u7368\u7279\u7d44\u5408\uff0c\u4f7f\u6211\u5011\u812b\u7a4e\u800c\u51fa\uff0c\u78ba\u4fdd\u60a8\u5728\u672a\u4f86\u904a\u6232\u4e2d\u7684\u5192\u96aa\u662f\u6210\u529f\u548c\u5b89\u5168\u7684\u3002\n                <\/p>\n        \n                <div class=\"mt-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n                    <div class=\"benefit-card bg-white border border-gray-200 shadow-md hover:shadow-lg\">\n                        <div class=\"benefit-icon bg-primary\/10 text-primary\"><i class=\"fas fa-brain\"><\/i><\/div>\n                        <h3 class=\"text-gray-800\">\u6df1\u539a\u7684\u6df7\u5408\u6280\u8853\u5c08\u696d\u77e5\u8b58<\/h3>\n                        <p class=\"text-gray-600\">\u5728\u904a\u6232\u958b\u767c\u548c\u5148\u9032\u7684 Web3 \u6280\u8853\u65b9\u9762\u64c1\u6709\u6df1\u539a\u7684\u77e5\u8b58\uff0c\u53ef\u63d0\u4f9b\u4ee5\u904a\u6232\u70ba\u4e2d\u5fc3\u7684\u89e3\u6c7a\u65b9\u6848\u3002<\/p>\n                    <\/div>\n                    <div class=\"benefit-card bg-white border border-gray-200 shadow-md hover:shadow-lg reveal-element delay-100\">\n                        <div class=\"benefit-icon bg-primary\/10 text-primary\"><i class=\"fas fa-shield-alt\"><\/i><\/div>\n                        <h3 class=\"text-gray-800\">\u7d93\u904e\u9a57\u8b49\u7684\u5340\u584a\u93c8\u5b89\u5168\u6027<\/h3>\n                        <p class=\"text-gray-600\">\u4f01\u696d\u7b49\u7d1a\u7684\u5b89\u5168\u6027\uff0c\u5177\u5099\u667a\u6167\u578b\u5951\u7d04\u7a3d\u6838\u8207\u53cd\u8a50\u6b3a\u6a5f\u5236\uff0c\u53ef\u4fdd\u8b77\u8cc7\u7522\u3002<\/p>\n                    <\/div>\n                    <div class=\"benefit-card bg-white border border-gray-200 shadow-md hover:shadow-lg reveal-element delay-200\">\n                        <div class=\"benefit-icon bg-primary\/10 text-primary\"><i class=\"fas fa-cogs\"><\/i><\/div>\n                        <h3 class=\"text-gray-800\">\u5168\u9762\u6027\u8207\u5ba2\u88fd\u5316<\/h3>\n                        <p class=\"text-gray-600\">\u5f48\u6027\u7684 SaaS \u5e73\u53f0\uff0c\u5141\u8a31\u91cf\u8eab\u8a02\u505a\u7684\u529f\u80fd\u6574\u5408\uff0c\u4ee5\u7b26\u5408\u60a8\u904a\u6232\u7684\u7368\u7279\u8a2d\u8a08\u3002<\/p>\n                    <\/div>\n                    <div class=\"benefit-card bg-white border border-gray-200 shadow-md hover:shadow-lg reveal-element delay-300\">\n                        <div class=\"benefit-icon bg-primary\/10 text-primary\"><i class=\"fas fa-plug\"><\/i><\/div>\n                        <h3 class=\"text-gray-800\">\u5bb9\u6613\u6574\u5408<\/h3>\n                        <p class=\"text-gray-600\">\u6587\u4ef6\u5b8c\u5099\u7684 SDK \u548c API \u53ef\u5feb\u901f\u6574\u5408\uff0c\u5c07\u60a8\u5718\u968a\u7684\u6280\u8853\u958b\u92b7\u964d\u81f3\u6700\u4f4e\u3002<\/p>\n                    <\/div>\n                    <div class=\"benefit-card bg-white border border-gray-200 shadow-md hover:shadow-lg reveal-element delay-400\">\n                        <div class=\"benefit-icon bg-primary\/10 text-primary\"><i class=\"fas fa-expand-arrows-alt\"><\/i><\/div>\n                        <h3 class=\"text-gray-800\">\u64f4\u5145\u6027\u8207\u6548\u80fd<\/h3>\n                        <p class=\"text-gray-600\">\u5f48\u6027\u57fa\u790e\u67b6\u69cb\u5c08\u70ba\u5927\u91cf\u4e26\u767c\u4f7f\u7528\u8005\u548c\u9ad8\u4ea4\u6613\u91cf\u800c\u8a2d\u8a08\u3002<\/p>\n                    <\/div>\n                    <div class=\"benefit-card bg-white border border-gray-200 shadow-md hover:shadow-lg reveal-element delay-500\">\n                        <div class=\"benefit-icon bg-primary\/10 text-primary\"><i class=\"fas fa-hands-helping\"><\/i><\/div>\n                        <h3 class=\"text-gray-800\">\u5c08\u5c6c\u5408\u4f5c\u5925\u4f34<\/h3>\n                        <p class=\"text-gray-600\">\u5f9e\u8aee\u8a62\u5230\u63a8\u51fa\u5f8c\u7684\u5168\u9762\u652f\u63f4\uff0c\u5305\u62ec 24\/7 \u6280\u8853\u5354\u52a9\u3002<\/p>\n                    <\/div>\n                    <div class=\"benefit-card bg-white border border-gray-200 shadow-md hover:shadow-lg reveal-element delay-600\">\n                        <div class=\"benefit-icon bg-primary\/10 text-primary\"><i class=\"fas fa-lightbulb\"><\/i><\/div>\n                        <h3 class=\"text-gray-800\">\u524d\u77bb\u6027\u5275\u65b0<\/h3>\n                        <p class=\"text-gray-600\">\u81f4\u529b\u65bc\u6574\u5408\u6700\u65b0\u7684\u5340\u584a\u93c8\u9032\u5c55\uff0c\u8b93\u60a8\u7684\u904a\u6232\u4fdd\u6301\u6700\u5148\u9032\u7684\u6c34\u5e73\u3002<\/p>\n                    <\/div>\n                    <div class=\"benefit-card bg-white border border-gray-200 shadow-md hover:shadow-lg reveal-element delay-700\">\n                        <div class=\"benefit-icon bg-primary\/10 text-primary\"><i class=\"fas fa-smile\"><\/i><\/div>\n                        <h3 class=\"text-gray-800\">\u5c08\u6ce8\u65bc\u73a9\u5bb6\u9ad4\u9a57<\/h3>\n                        <p class=\"text-gray-600\">\u512a\u5148\u63a1\u7528\u76f4\u89ba\u5f0f\u4ecb\u9762\uff0c\u63d0\u4f9b\u7121\u7e2b\u7684\u9322\u5305\u7ba1\u7406\u3001\u4ea4\u6613\u548c\u8cc7\u7522\u6240\u6709\u6b0a\u3002<\/p>\n                    <\/div>\n                <\/div>\n        \n                <div class=\"mt-16 bg-gradient-to-r from-primary\/10 to-secondary\/10 rounded-2xl p-8 md:p-12 border border-gray-200 reveal-element\">\n                    <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8 items-center\">\n                        <div class=\"col-span-1 md:col-span-2\">\n                            <h3 class=\"text-2xl md:text-3xl font-bold mb-4 text-gray-800\">\u81ea\u4fe1\u6295\u8cc7\u672a\u4f86<\/h3>\n                            <p class=\"text-gray-600 mb-6\">\n                                \u9078\u64c7 TheExchain\uff0c\u60a8\u5c07\u7372\u5f97\u4e00\u500b\u503c\u5f97\u4fe1\u8cf4\u7684\u5408\u4f5c\u5925\u4f34\uff0c\u8a72\u5408\u4f5c\u5925\u4f34\u64c1\u6709\u50b2\u8996 Web3 \u8907\u96dc\u6027\u7684\u6280\u8853\u80fd\u529b\u3001\u4fdd\u8b77\u60a8\u793e\u7fa4\u7684\u5b89\u5168\u6846\u67b6\uff0c\u4ee5\u53ca\u5e6b\u52a9\u60a8\u6253\u9020\u4e0b\u4e00\u4ee3\u9769\u547d\u6027\u904a\u6232\u7684\u627f\u8afe\u3002\n                            <\/p>\n                            <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n                                <div class=\"flex items-center gap-2 text-gray-700\"><i class=\"fas fa-check-circle text-secondary\"><\/i><span>\u5168\u5929\u5019\u6280\u8853\u652f\u63f4<\/span><\/div>\n                                <div class=\"flex items-center gap-2 text-gray-700\"><i class=\"fas fa-check-circle text-secondary\"><\/i><span>\u7b56\u7565\u6307\u5f15<\/span><\/div>\n                                <div class=\"flex items-center gap-2 text-gray-700\"><i class=\"fas fa-check-circle text-secondary\"><\/i><span>\u6301\u7e8c\u66f4\u65b0<\/span><\/div>\n                                <div class=\"flex items-center gap-2 text-gray-700\"><i class=\"fas fa-check-circle text-secondary\"><\/i><span>\u5c08\u6ce8\u65bc\u793e\u5340<\/span><\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"reveal-element delay-300\">\n                            <div class=\"testimonial-card bg-white border border-gray-200 p-6 rounded-xl shadow-md\">\n                                <div class=\"mb-4\">\n                                    <i class=\"fas fa-quote-left text-3xl text-primary\/30\"><\/i>\n                                <\/div>\n                                <p class=\"italic mb-4 text-gray-600\">\n                                    \"TheExchain\u5c0d\u904a\u6232\u958b\u767c\u548c\u5340\u584a\u93c8\u7684\u6df1\u523b\u7406\u89e3\u6539\u8b8a\u4e86\u6211\u5011\u7684\u904a\u6232\u898f\u5247\u3002\u4ed6\u5011\u63d0\u4f9b\u4e86\u6211\u5011\u6210\u529f\u555f\u52d5 NFT \u7b56\u7565\u6240\u9700\u7684\u5b89\u5168\u3001\u53ef\u64f4\u5c55\u7684\u57fa\u790e\"\u3002\n                                <\/p>\n                                <div class=\"flex items-center gap-3 mt-4\">\n                                    <div class=\"w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center\">\n                                        <span class=\"font-bold text-sm text-white\">LD<\/span>\n                                    <\/div>\n                                    <div>\n                                        <div class=\"font-medium text-gray-800\">\u9996\u5e2d\u958b\u767c\u4eba\u54e1<\/div>\n                                        <div class=\"text-sm text-gray-500\">\u9060\u898b\u904a\u6232\u5de5\u4f5c\u5ba4<\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n        \n\n    \n    <\/main>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Next-Gen Gaming Technology Revolutionize Gaming with NFT, Metaverse &#038; Web3 TheExchain&#8217;s NFT SaaS Solutions \u2013 a new era in digital asset gaming, where our expertise in NFTs propels gaming experiences into the future of Web3. Get Started Contact Us 0 Gaming Projects 0 Client Satisfaction 0M+ NFTs in Ecosystem $0M Transaction Volume Our Services Empowering [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-520","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/theexchain.com\/zh\/wp-json\/wp\/v2\/pages\/520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theexchain.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/theexchain.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/theexchain.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theexchain.com\/zh\/wp-json\/wp\/v2\/comments?post=520"}],"version-history":[{"count":112,"href":"https:\/\/theexchain.com\/zh\/wp-json\/wp\/v2\/pages\/520\/revisions"}],"predecessor-version":[{"id":2279,"href":"https:\/\/theexchain.com\/zh\/wp-json\/wp\/v2\/pages\/520\/revisions\/2279"}],"wp:attachment":[{"href":"https:\/\/theexchain.com\/zh\/wp-json\/wp\/v2\/media?parent=520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}