{"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%e3%82%b2%e3%83%bc%e3%83%a0","status":"publish","type":"page","link":"https:\/\/theexchain.com\/ja\/nft%e3%82%b2%e3%83%bc%e3%83%a0\/","title":{"rendered":"nft\u30b2\u30fc\u30e0"},"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\u30b2\u30fc\u30df\u30f3\u30b0\u30fb\u30c6\u30af\u30ce\u30ed\u30b8\u30fc<\/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                        \u30b2\u30fc\u30e0\u306b\u9769\u547d\u3092\u8d77\u3053\u3059\n                        <span class=\"text-secondary block sm:inline\">NFT\u3001\u30e1\u30bf\u30d0\u30fc\u30b9\u3001Web3<\/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\u306eNFT SaaS\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3 - \u30c7\u30b8\u30bf\u30eb\u30a2\u30bb\u30c3\u30c8\u30b2\u30fc\u30e0\u306e\u65b0\u6642\u4ee3\u3002NFT\u306e\u5c02\u9580\u77e5\u8b58\u306b\u3088\u308a\u3001\u30b2\u30fc\u30e0\u4f53\u9a13\u3092Web3\u306e\u672a\u6765\u3078\u3068\u5c0e\u304d\u307e\u3059\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                        \u30b9\u30bf\u30fc\u30c8\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                    \u304a\u554f\u3044\u5408\u308f\u305b\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\">\u30b2\u30fc\u30e0\u30fb\u30d7\u30ed\u30b8\u30a7\u30af\u30c8<\/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\">\u9867\u5ba2\u6e80\u8db3\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\">\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u306b\u304a\u3051\u308bNFT<\/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\">\u53d6\u5f15\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\">\u30b5\u30fc\u30d3\u30b9<\/span>\n                    <h2 class=\"!text-black\">\u30b2\u30fc\u30e0\u306e\u672a\u6765\u306b\u529b\u3092\u4e0e\u3048\u308b<\/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\uff1aWeb3\u30b2\u30fc\u30e0\u9769\u547d\u306e\u30d1\u30fc\u30c8\u30ca\u30fc\n                        <\/h3>\n                        <p class=\"text-lg text-gray-600 mb-4\">\n                            <strong class=\"text-gray-900\">\u30a8\u30af\u30b9\u30c1\u30a7\u30fc\u30f3\u306f\u30c7\u30b8\u30bf\u30eb\u9769\u547d\u306e\u6700\u524d\u7dda\u306b\u3044\u308b<\/strong>\u65e2\u5b58\u306e\u30b2\u30fc\u30e0\u958b\u767a\u8005\u306b\u3068\u3063\u3066\u306e\u8ab2\u984c\u306f\u3001\u8907\u96d1\u306a\u30d6\u30ed\u30c3\u30af\u30c1\u30a7\u30fc\u30f3\u6280\u8853\u3001NFT\u306e\u69cb\u7bc9\u3001\u30e1\u30bf\u30d0\u30fc\u30b9\u306e\u76f8\u4e92\u904b\u7528\u6027\u3092\u30b7\u30fc\u30e0\u30ec\u30b9\u304b\u3064\u5b89\u5168\u306b\u7d71\u5408\u3059\u308b\u3053\u3068\u306b\u3042\u308a\u307e\u3059\u3002\u305d\u306e\u305f\u3081\u306b\u306f\u3001\u5c02\u9580\u7684\u306a\u77e5\u8b58\u3001\u591a\u5927\u306a\u958b\u767a\u6642\u9593\u3001\u8907\u96d1\u306a\u6280\u8853\u7684\u30cf\u30fc\u30c9\u30eb\u3092\u4e57\u308a\u8d8a\u3048\u308b\u3053\u3068\u304c\u3057\u3070\u3057\u3070\u5fc5\u8981\u3068\u306a\u308a\u307e\u3059\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\">\u30d7\u30ec\u30fc\u30e4\u30fc\u306e\u30a8\u30f3\u30b2\u30fc\u30b8\u30e1\u30f3\u30c8\u3092\u9ad8\u3081\u308b\uff1a<\/strong> \u30c0\u30a4\u30ca\u30df\u30c3\u30af\u306a\u7d4c\u6e08\u3068\u771f\u306b\u4fa1\u5024\u3042\u308b\u30c7\u30b8\u30bf\u30eb\u8cc7\u7523\u3092\u5275\u9020\u3057\u3001\u30d7\u30ec\u30a4\u30e4\u30fc\u306e\u30b2\u30fc\u30e0\u4e16\u754c\u3068\u306e\u3064\u306a\u304c\u308a\u3092\u6df1\u3081\u3001\u6295\u8cc7\u3092\u4fc3\u9032\u3057\u307e\u3059\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\">\u65b0\u305f\u306a\u53ce\u76ca\u6e90\u3092\u89e3\u304d\u653e\u3064\uff1a<\/strong> \u30bb\u30ab\u30f3\u30c0\u30ea\u30fc\u30fb\u30de\u30fc\u30b1\u30c3\u30c8\u30d7\u30ec\u30a4\u30b9\u3001Play-to-Earn\u30e2\u30c7\u30eb\u3001NFT\u30c9\u30ed\u30c3\u30d7\u3092\u6d3b\u7528\u3057\u3001\u9769\u65b0\u7684\u306a\u53ce\u5165\u6a5f\u4f1a\u3092\u5275\u51fa\u3059\u308b\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\">\u771f\u306e\u8cc7\u7523\u6240\u6709\u6a29\u306e\u4ed8\u4e0e\uff1a<\/strong> \u30b2\u30fc\u30e0\u5185\u8cc7\u7523\u306e\u6240\u6709\u6a29\u3092\u78ba\u8a8d\u3067\u304d\u308b\u6a29\u9650\u3092\u30d7\u30ec\u30a4\u30e4\u30fc\u306b\u4e0e\u3048\u3001\u4fe1\u983c\u3068\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3092\u80b2\u3080\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\">\u30b2\u30fc\u30e0\u306e\u672a\u6765\u3092\u7bc9\u304f\uff1a<\/strong> \u76f8\u4e92\u63a5\u7d9a\u3055\u308c\u305f\u30e1\u30bf\u30d0\u30fc\u30b9\u306e\u30c7\u30b8\u30bf\u30eb\u9818\u57df\u3078\u3001\u81ea\u4fe1\u3092\u6301\u3063\u3066\u8db3\u3092\u8e0f\u307f\u5165\u308c\u3088\u3046\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\">\u30b2\u30fc\u30e0\u8cc7\u7523\u306e\u30c8\u30fc\u30af\u30f3\u5316<\/h4>\n                            <p class=\"text-gray-600\">\u30b2\u30fc\u30e0\u5185\u30a2\u30a4\u30c6\u30e0\u3092\u3001\u30d7\u30ec\u30a4\u30e4\u30fc\u304c\u771f\u306b\u6240\u6709\u3057\u3001\u53d6\u5f15\u3057\u3001\u53ce\u76ca\u5316\u3067\u304d\u308b\u4fa1\u5024\u3042\u308b\u30c7\u30b8\u30bf\u30eb\u8cc7\u7523\u306b\u5909\u3048\u308b\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\">\u30e1\u30bf\u30d0\u30fc\u30b9\u30fb\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3<\/h4>\n                            <p class=\"text-gray-600\">\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u306a\u30e1\u30bf\u30d0\u30fc\u30b9\u958b\u767a\u30c4\u30fc\u30eb\u30ad\u30c3\u30c8\u3067\u3001\u6ca1\u5165\u611f\u306e\u3042\u308b\u4eee\u60f3\u4e16\u754c\u3092\u69cb\u7bc9\u3057\u307e\u3057\u3087\u3046\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\">\u30b5\u30fc\u30d3\u30b9\u5185\u5bb9<\/span>\n                    <h2>\u5305\u62ec\u7684\u306aNFT\u30b2\u30fc\u30df\u30f3\u30b0\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3<\/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\u306eNFT SaaS\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306f\u3001\u304a\u5ba2\u69d8\u306e\u30b2\u30fc\u30e0\u30d3\u30b8\u30e7\u30f3\u3092Web3\u6642\u4ee3\u306b\u3082\u305f\u3089\u3059\u305f\u3081\u306b\u8a2d\u8a08\u3055\u308c\u305f\u3001\u5805\u7262\u306a\u30c4\u30fc\u30eb\u3068\u30b5\u30fc\u30d3\u30b9\u306e\u30b9\u30a4\u30fc\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002\u304a\u5ba2\u69d8\u306e\u30b2\u30fc\u30e0\u3084\u30e1\u30bf\u30d0\u30fc\u30b9\u306b\u304a\u3051\u308b\u30c7\u30b8\u30bf\u30eb\u30a2\u30bb\u30c3\u30c8\u306e\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u5168\u4f53\u3092\u30ab\u30d0\u30fc\u3059\u308b\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3092\u63d0\u4f9b\u3057\u307e\u3059\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\u30a8\u30f3\u30b8\u30f3<\/h3>\n                        <p class=\"text-gray-300\">\u5c5e\u6027\u3084\u30ec\u30a2\u30ea\u30c6\u30a3\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u308bNFT\u3068\u3057\u3066\u3001\u591a\u69d8\u306a\u30b2\u30fc\u30e0\u5185\u8cc7\u7523\u3092\u7c21\u5358\u306b\u92f3\u9020\u3067\u304d\u307e\u3059\u3002<\/p>\n                        <ul class=\"service-list mt-4\">\n                            <li>\u67d4\u8edf\u306aNFT\u4f5c\u6210<\/li>\n                            <li>\u30ab\u30b9\u30bf\u30e0\u30fb\u30e1\u30bf\u30c7\u30fc\u30bf\u3068\u5c5e\u6027<\/li>\n                            <li>\u30d0\u30c3\u30c1\u9020\u5e63\u6a5f\u80fd<\/li>\n                            <li>\u30af\u30ed\u30b9\u30c1\u30a7\u30fc\u30f3\u4e92\u63db\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\">\u7d71\u5408NFT\u30de\u30fc\u30b1\u30c3\u30c8\u30d7\u30ec\u30a4\u30b9<\/h3>\n                        <p class=\"text-gray-300\">NFT\u30a2\u30bb\u30c3\u30c8\u3092\u53d6\u5f15\u3059\u308b\u305f\u3081\u306e\u5b89\u5168\u306a\u30b2\u30fc\u30e0\u5185\u307e\u305f\u306f\u30b9\u30bf\u30f3\u30c9\u30a2\u30ed\u30f3\u306e\u30de\u30fc\u30b1\u30c3\u30c8\u30d7\u30ec\u30a4\u30b9\u3092\u30d7\u30ec\u30a4\u30e4\u30fc\u306b\u63d0\u4f9b\u3059\u308b\u3002<\/p>\n                        <ul class=\"service-list mt-4\">\n                            <li>\u30b7\u30fc\u30e0\u30ec\u30b9\u306a\u8cc7\u7523\u53d6\u5f15<\/li>\n                            <li>\u30aa\u30fc\u30af\u30b7\u30e7\u30f3\uff06\u5b9a\u4fa1\u51fa\u54c1<\/li>\n                            <li>\u30ed\u30a4\u30e4\u30ea\u30c6\u30a3\u306e\u81ea\u52d5\u57f7\u884c<\/li>\n                            <li>\u5e02\u5834\u5206\u6790\u3068\u30ec\u30dd\u30fc\u30c8<\/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\">\u30e1\u30bf\u30d0\u30fc\u30b9\u3068\u76f8\u4e92\u904b\u7528\u6027<\/h3>\n                        <p class=\"text-gray-300\">\u30b2\u30fc\u30e0\u3092\u4eee\u60f3\u4e16\u754c\u306b\u7d71\u5408\u3057\u305f\u308a\u3001\u72ec\u81ea\u306e\u6ca1\u5165\u578b\u30e1\u30bf\u30d0\u30fc\u30b9\u4f53\u9a13\u3092\u69cb\u7bc9\u3057\u305f\u308a\u3067\u304d\u307e\u3059\u3002<\/p>\n                        <ul class=\"service-list mt-4\">\n                            <li>\u4eee\u60f3\u4e16\u754c\u306e\u7d71\u5408<\/li>\n                            <li>\u30af\u30ed\u30b9\u30b2\u30fc\u30e0\u30fb\u30a2\u30bb\u30c3\u30c8\u306e\u79fb\u690d\u6027<\/li>\n                            <li>\u793e\u4f1a\u7684\u30fb\u7d4c\u6e08\u7684\u67a0\u7d44\u307f<\/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\">\u30a6\u30a9\u30ec\u30c3\u30c8\u306e\u7d71\u5408<\/h3>\n                        <p class=\"text-gray-300\">\u30b2\u30fc\u30de\u30fc\u5411\u3051\u306b\u3001\u30ab\u30b9\u30c8\u30c7\u30a3\u30a2\u30eb\u30fb\u30aa\u30d7\u30b7\u30e7\u30f3\u3084\u975e\u30ab\u30b9\u30c8\u30c7\u30a3\u30a2\u30eb\u30fb\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u542b\u3080\u3001\u30e6\u30fc\u30b6\u30fc\u30d5\u30ec\u30f3\u30c9\u30ea\u30fc\u306a\u30a6\u30a9\u30ec\u30c3\u30c8\u30fb\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3092\u63d0\u4f9b\u3059\u308b\u3002<\/p>\n                        <ul class=\"service-list mt-4\">\n                            <li>\u30b2\u30fc\u30de\u30fc\u30d5\u30ec\u30f3\u30c9\u30ea\u30fc\u306a\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9<\/li>\n                            <li>\u5b89\u5168\u306a\u8cc7\u7523\u4fdd\u7ba1<\/li>\n                            <li>\u30de\u30eb\u30c1\u30c1\u30a7\u30fc\u30f3\u30fb\u30a6\u30a9\u30ec\u30c3\u30c8\u306e\u30b5\u30dd\u30fc\u30c8<\/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\">\u30d7\u30ec\u30fc\u30fb\u30c8\u30a5\u30fb\u30a2\u30fc\u30f3\u306e\u30e1\u30ab\u30cb\u30ba\u30e0<\/h3>\n                        <p class=\"text-gray-300\">\u9b45\u529b\u7684\u306aPlay-to-Earn\u30e2\u30c7\u30eb\u3092\u5c0e\u5165\u3057\u3001\u30d7\u30ec\u30a4\u30e4\u30fc\u306b\u8cb4\u91cd\u306aNFT\u3084\u6697\u53f7\u901a\u8ca8\u3067\u5831\u916c\u3092\u4e0e\u3048\u308b\u3002<\/p>\n                        <ul class=\"service-list mt-4\">\n                            <li>\u5831\u916c\u30b7\u30b9\u30c6\u30e0\u306e\u7d71\u5408<\/li>\n                            <li>\u30b5\u30b9\u30c6\u30a4\u30ca\u30d6\u30eb\u30fb\u30c8\u30fc\u30af\u30ce\u30df\u30af\u30b9\u30fb\u30c7\u30b6\u30a4\u30f3<\/li>\n                            <li>\u5730\u57df\u4e3b\u5c0e\u578b\u30a4\u30f3\u30bb\u30f3\u30c6\u30a3\u30d6<\/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\u767a\u8005SDK\u3068API<\/h3>\n                        <p class=\"text-gray-300\">\u5305\u62ec\u7684\u306aSDK\u3068\u5805\u7262\u306aAPI\u3092\u6d3b\u7528\u3057\u3066\u3001\u4e3b\u8981\u306a\u30b2\u30fc\u30e0\u30a8\u30f3\u30b8\u30f3\u3068\u8fc5\u901f\u306b\u7d71\u5408\u3002<\/p>\n                        <ul class=\"service-list mt-4\">\n                            <li>Unity\u3068Unreal Engine\u306e\u30b5\u30dd\u30fc\u30c8<\/li>\n                            <li>\u30d5\u30eb\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u30aa\u30d7\u30b7\u30e7\u30f3<\/li>\n                            <li>\u52b9\u7387\u7684\u306a\u7d71\u5408\u30d7\u30ed\u30bb\u30b9<\/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\">\u5f53\u793e\u306e\u5f37\u307f<\/span>\n                    <h2 class=\"text-gray-900\">TheExchain\u3068\u63d0\u643a\u3059\u308b\u7406\u7531<\/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                    Web3\u30b2\u30fc\u30e0\u306e\u65c5\u306b\u304a\u3044\u3066\u3001\u9069\u5207\u306a\u30d1\u30fc\u30c8\u30ca\u30fc\u3092\u9078\u3076\u3053\u3068\u306f\u975e\u5e38\u306b\u91cd\u8981\u3067\u3059\u3002TheExchain\u306f\u5c02\u9580\u77e5\u8b58\u3001\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u3001\u30b3\u30df\u30c3\u30c8\u30e1\u30f3\u30c8\u3092\u72ec\u81ea\u306b\u7d44\u307f\u5408\u308f\u305b\u3001\u4ed6\u3068\u306f\u4e00\u7dda\u3092\u753b\u3059\u30b5\u30fc\u30d3\u30b9\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\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\">\u30cf\u30a4\u30d6\u30ea\u30c3\u30c9\u306b\u95a2\u3059\u308b\u6df1\u3044\u5c02\u9580\u77e5\u8b58<\/h3>\n                        <p class=\"text-gray-600\">\u30b2\u30fc\u30e0\u958b\u767a\u3068\u30b2\u30fc\u30e0\u4e2d\u5fc3\u306e\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u306e\u305f\u3081\u306e\u9ad8\u5ea6\u306aWeb3\u6280\u8853\u306e\u4e21\u65b9\u306b\u95a2\u3059\u308b\u6df1\u3044\u77e5\u8b58\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\">\u5b9f\u8a3c\u6e08\u307f\u306e\u30d6\u30ed\u30c3\u30af\u30c1\u30a7\u30fc\u30f3\u306e\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3<\/h3>\n                        <p class=\"text-gray-600\">\u30b9\u30de\u30fc\u30c8\u30b3\u30f3\u30c8\u30e9\u30af\u30c8\u306e\u76e3\u67fb\u3068\u4e0d\u6b63\u9632\u6b62\u30e1\u30ab\u30cb\u30ba\u30e0\u306b\u3088\u308a\u3001\u8cc7\u7523\u3092\u4fdd\u8b77\u3059\u308b\u30a8\u30f3\u30bf\u30fc\u30d7\u30e9\u30a4\u30ba\u30b0\u30ec\u30fc\u30c9\u306e\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\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\">\u5305\u62ec\u7684\u304b\u3064\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u53ef\u80fd<\/h3>\n                        <p class=\"text-gray-600\">\u67d4\u8edf\u306aSaaS\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306b\u3088\u308a\u3001\u30b2\u30fc\u30e0\u72ec\u81ea\u306e\u30c7\u30b6\u30a4\u30f3\u306b\u5408\u308f\u305b\u305f\u6a5f\u80fd\u306e\u7d71\u5408\u304c\u53ef\u80fd\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\">\u7d71\u5408\u306e\u5bb9\u6613\u3055<\/h3>\n                        <p class=\"text-gray-600\">SDK\u3068API\u304c\u5341\u5206\u306b\u6587\u66f8\u5316\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001\u8fc5\u901f\u306b\u7d71\u5408\u3067\u304d\u3001\u304a\u5ba2\u69d8\u306e\u30c1\u30fc\u30e0\u306e\u6280\u8853\u7684\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u3092\u6700\u5c0f\u9650\u306b\u6291\u3048\u307e\u3059\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\">\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9<\/h3>\n                        <p class=\"text-gray-600\">\u5927\u898f\u6a21\u306a\u540c\u6642\u30e6\u30fc\u30b6\u30fc\u3068\u5927\u91cf\u306e\u30c8\u30e9\u30f3\u30b6\u30af\u30b7\u30e7\u30f3\u306b\u5bfe\u5fdc\u3059\u308b\u3001\u5f3e\u529b\u6027\u306e\u3042\u308b\u30a4\u30f3\u30d5\u30e9\u30b9\u30c8\u30e9\u30af\u30c1\u30e3\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\">\u5c02\u7528\u30d1\u30fc\u30c8\u30ca\u30fc\u30b7\u30c3\u30d7<\/h3>\n                        <p class=\"text-gray-600\">\u5e74\u4e2d\u7121\u4f11\u306e\u6280\u8853\u652f\u63f4\u3092\u542b\u3080\u3001\u30b3\u30f3\u30b5\u30eb\u30c6\u30fc\u30b7\u30e7\u30f3\u304b\u3089\u30ed\u30fc\u30f3\u30c1\u5f8c\u306e\u5305\u62ec\u7684\u306a\u30b5\u30dd\u30fc\u30c8\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\">\u5148\u9032\u7684\u306a\u30a4\u30ce\u30d9\u30fc\u30b7\u30e7\u30f3<\/h3>\n                        <p class=\"text-gray-600\">\u6700\u65b0\u306e\u30d6\u30ed\u30c3\u30af\u30c1\u30a7\u30fc\u30f3\u6280\u8853\u3092\u53d6\u308a\u5165\u308c\u308b\u3053\u3068\u3067\u3001\u5e38\u306b\u6700\u5148\u7aef\u306e\u30b2\u30fc\u30e0\u3092\u63d0\u4f9b\u3057\u307e\u3059\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\">\u9078\u624b\u4f53\u9a13\u306e\u91cd\u8996<\/h3>\n                        <p class=\"text-gray-600\">\u30b7\u30fc\u30e0\u30ec\u30b9\u306a\u30a6\u30a9\u30ec\u30c3\u30c8\u7ba1\u7406\u3001\u53d6\u5f15\u3001\u8cc7\u7523\u6240\u6709\u306e\u305f\u3081\u306e\u76f4\u611f\u7684\u306a\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u3092\u512a\u5148\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\u3092\u6301\u3063\u3066\u672a\u6765\u306b\u6295\u8cc7\u3059\u308b<\/h3>\n                            <p class=\"text-gray-600 mb-6\">\n                                TheExchain\u3092\u9078\u629e\u3059\u308b\u3053\u3068\u3067\u3001Web3\u306e\u8907\u96d1\u306a\u72b6\u6cc1\u3092\u4e57\u308a\u5207\u308b\u6280\u8853\u529b\u3001\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3092\u4fdd\u8b77\u3059\u308b\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3001\u305d\u3057\u3066\u6b21\u4e16\u4ee3\u306e\u9769\u65b0\u7684\u306a\u30b2\u30fc\u30e0\u306e\u69cb\u7bc9\u3092\u652f\u63f4\u3059\u308b\u30b3\u30df\u30c3\u30c8\u30e1\u30f3\u30c8\u3092\u5099\u3048\u305f\u4fe1\u983c\u3067\u304d\u308b\u30d1\u30fc\u30c8\u30ca\u30fc\u3092\u5f97\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\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>24\u6642\u9593365\u65e5\u306e\u30c6\u30af\u30cb\u30ab\u30eb\u30fb\u30b5\u30dd\u30fc\u30c8<\/span><\/div>\n                                <div class=\"flex items-center gap-2 text-gray-700\"><i class=\"fas fa-check-circle text-secondary\"><\/i><span>\u6226\u7565\u7684\u30ac\u30a4\u30c0\u30f3\u30b9<\/span><\/div>\n                                <div class=\"flex items-center gap-2 text-gray-700\"><i class=\"fas fa-check-circle text-secondary\"><\/i><span>\u7d99\u7d9a\u7684\u306a\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8<\/span><\/div>\n                                <div class=\"flex items-center gap-2 text-gray-700\"><i class=\"fas fa-check-circle text-secondary\"><\/i><span>\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u91cd\u8996<\/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                                    \u300cTheExchain\u306e\u30b2\u30fc\u30e0\u958b\u767a\u3068\u30d6\u30ed\u30c3\u30af\u30c1\u30a7\u30fc\u30f3\u306e\u4e21\u65b9\u306b\u5bfe\u3059\u308b\u6df1\u3044\u7406\u89e3\u306f\u3001\u79c1\u305f\u3061\u306b\u3068\u3063\u3066\u753b\u671f\u7684\u306a\u3082\u306e\u3067\u3057\u305f\u3002\u5f7c\u3089\u306f\u79c1\u305f\u3061\u304cNFT\u6226\u7565\u3092\u6210\u529f\u3055\u305b\u308b\u305f\u3081\u306b\u5fc5\u8981\u306a\u5b89\u5168\u3067\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u306a\u57fa\u76e4\u3092\u63d0\u4f9b\u3057\u3066\u304f\u308c\u307e\u3057\u305f\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\">\u30ea\u30fc\u30c9\u30fb\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc<\/div>\n                                        <div class=\"text-sm text-gray-500\">\u30d3\u30b8\u30e7\u30ca\u30ea\u30fc\u30fb\u30b2\u30fc\u30e0\u30fb\u30b9\u30bf\u30b8\u30aa<\/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 the Future of Gaming TheExchain: Your Partner in the Web3 Gaming Revolution TheExchain is at the forefront of the digital revolution, The challenge for existing game developers lies in integrating complex blockchain technology, NFT creation, and metaverse interoperability seamlessly and securely. This often requires specialized expertise, significant development time, and navigating intricate technical hurdles. Enhance [&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\/ja\/wp-json\/wp\/v2\/pages\/520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theexchain.com\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/theexchain.com\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/theexchain.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theexchain.com\/ja\/wp-json\/wp\/v2\/comments?post=520"}],"version-history":[{"count":112,"href":"https:\/\/theexchain.com\/ja\/wp-json\/wp\/v2\/pages\/520\/revisions"}],"predecessor-version":[{"id":2279,"href":"https:\/\/theexchain.com\/ja\/wp-json\/wp\/v2\/pages\/520\/revisions\/2279"}],"wp:attachment":[{"href":"https:\/\/theexchain.com\/ja\/wp-json\/wp\/v2\/media?parent=520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}