{"id":1668,"date":"2020-06-11T11:44:21","date_gmt":"2020-06-11T11:44:21","guid":{"rendered":"https:\/\/webbingstone.com\/service\/mobile-apps-development\/"},"modified":"2026-01-18T21:20:50","modified_gmt":"2026-01-18T19:20:50","slug":"mobile-apps-development","status":"publish","type":"portfolio","link":"https:\/\/webbingstone.com\/zh-hans\/service\/mobile-apps-development\/","title":{"rendered":"\u79fb\u52a8\u5e94\u7528\u5f00\u53d1"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1668\" class=\"elementor elementor-1668 elementor-115\" data-elementor-post-type=\"portfolio\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8e9c88f e-con-full e-flex e-con e-parent\" data-id=\"8e9c88f\" data-element_type=\"container\" data-e-type=\"container\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-ad09762 elementor-widget elementor-widget-html\" data-id=\"ad09762\" 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<!-- GSAP CDN Scripts -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\r\n\r\n<style>\r\n    .mobile-app-page * {\r\n        margin: 0;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .mobile-app-page {\r\n        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n        background: linear-gradient(135deg, #0a0118 0%, #1a0a2e 50%, #16213e 100%);\r\n        color: #ffffff;\r\n        overflow-x: hidden;\r\n    }\r\n\r\n    \/* Hero Section *\/\r\n    .mobile-app-page .hero {\r\n        min-height: 100vh;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        position: relative;\r\n        overflow: hidden;\r\n        padding: 80px 20px;\r\n    }\r\n\r\n    .mobile-app-page .hero::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: -50%;\r\n        left: -50%;\r\n        width: 200%;\r\n        height: 200%;\r\n        background: radial-gradient(circle at center, rgba(68, 39, 100, 0.3) 0%, transparent 70%);\r\n        animation: rotate 20s linear infinite;\r\n    }\r\n\r\n    @keyframes rotate {\r\n        from { transform: rotate(0deg); }\r\n        to { transform: rotate(360deg); }\r\n    }\r\n\r\n    .mobile-app-page .hero-content {\r\n        max-width: 1200px;\r\n        text-align: center;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .mobile-app-page .hero h1 {\r\n        font-size: clamp(2.5rem, 6vw, 5rem);\r\n        font-weight: 800;\r\n        margin-bottom: 30px;\r\n        background: linear-gradient(135deg, #ffffff 0%, #EE5946 50%, #442764 100%);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        background-clip: text;\r\n        line-height: 1.2;\r\n        opacity: 0;\r\n        transform: translateY(50px);\r\n    }\r\n\r\n    .mobile-app-page .hero-subtitle {\r\n        font-size: clamp(1.2rem, 2.5vw, 1.8rem);\r\n        color: rgba(255, 255, 255, 0.8);\r\n        margin-bottom: 30px;\r\n        max-width: 900px;\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n        opacity: 0;\r\n        transform: translateY(50px);\r\n    }\r\n\r\n    .mobile-app-page .platform-badges {\r\n        display: flex;\r\n        gap: 15px;\r\n        justify-content: center;\r\n        flex-wrap: wrap;\r\n        margin-bottom: 40px;\r\n        opacity: 0;\r\n        transform: translateY(50px);\r\n    }\r\n\r\n    .mobile-app-page .platform-badge {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        padding: 12px 25px;\r\n        background: rgba(255, 255, 255, 0.1);\r\n        backdrop-filter: blur(10px);\r\n        border: 1px solid rgba(255, 255, 255, 0.2);\r\n        border-radius: 50px;\r\n        font-size: 1rem;\r\n        font-weight: 600;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .mobile-app-page .platform-badge:hover {\r\n        background: rgba(238, 89, 70, 0.2);\r\n        border-color: rgba(238, 89, 70, 0.4);\r\n        transform: translateY(-3px);\r\n    }\r\n\r\n    .mobile-app-page .hero-cta {\r\n        display: inline-flex;\r\n        gap: 20px;\r\n        flex-wrap: wrap;\r\n        justify-content: center;\r\n        opacity: 0;\r\n        transform: translateY(50px);\r\n    }\r\n\r\n    .mobile-app-page .btn {\r\n        padding: 18px 45px;\r\n        font-size: 1.1rem;\r\n        font-weight: 600;\r\n        border: none;\r\n        border-radius: 50px;\r\n        cursor: pointer;\r\n        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        text-decoration: none;\r\n        display: inline-block;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .mobile-app-page .btn-primary {\r\n        background: linear-gradient(135deg, #EE5946 0%, #442764 100%);\r\n        color: white;\r\n        box-shadow: 0 10px 30px rgba(238, 89, 70, 0.3);\r\n    }\r\n\r\n    .mobile-app-page .btn-primary:hover {\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 15px 40px rgba(238, 89, 70, 0.5);\r\n    }\r\n\r\n    .mobile-app-page .btn-secondary {\r\n        background: rgba(255, 255, 255, 0.1);\r\n        color: white;\r\n        backdrop-filter: blur(10px);\r\n        border: 1px solid rgba(255, 255, 255, 0.2);\r\n    }\r\n\r\n    .mobile-app-page .btn-secondary:hover {\r\n        background: rgba(255, 255, 255, 0.2);\r\n        transform: translateY(-3px);\r\n    }\r\n\r\n    \/* Fallback CSS Animation *\/\r\n    @keyframes fallbackFadeIn {\r\n        from {\r\n            opacity: 0;\r\n            transform: translateY(50px);\r\n        }\r\n        to {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n    }\r\n\r\n    @keyframes fallbackScale {\r\n        from {\r\n            opacity: 0;\r\n            transform: scale(0.8);\r\n        }\r\n        to {\r\n            opacity: 1;\r\n            transform: scale(1);\r\n        }\r\n    }\r\n\r\n    \/* Apply fallback animations if GSAP fails to load after 2 seconds *\/\r\n    .mobile-app-page.no-gsap .hero h1,\r\n    .mobile-app-page.no-gsap .hero-subtitle,\r\n    .mobile-app-page.no-gsap .platform-badges,\r\n    .mobile-app-page.no-gsap .hero-cta,\r\n    .mobile-app-page.no-gsap .section-label,\r\n    .mobile-app-page.no-gsap .section-title,\r\n    .mobile-app-page.no-gsap .section-description,\r\n    .mobile-app-page.no-gsap .service-card,\r\n    .mobile-app-page.no-gsap .process-step,\r\n    .mobile-app-page.no-gsap .stat-item,\r\n    .mobile-app-page.no-gsap .cta-content {\r\n        animation: fallbackFadeIn 1s ease-out forwards;\r\n    }\r\n\r\n    .mobile-app-page.no-gsap .tech-card,\r\n    .mobile-app-page.no-gsap .feature-card {\r\n        animation: fallbackScale 0.8s ease-out forwards;\r\n    }\r\n\r\n    \/* Floating Elements *\/\r\n    .mobile-app-page .floating-element {\r\n        position: absolute;\r\n        border-radius: 50%;\r\n        background: radial-gradient(circle, rgba(238, 89, 70, 0.3), rgba(68, 39, 100, 0.3));\r\n        filter: blur(40px);\r\n        animation: float 6s ease-in-out infinite;\r\n    }\r\n\r\n    .mobile-app-page .floating-element:nth-child(1) {\r\n        width: 300px;\r\n        height: 300px;\r\n        top: 10%;\r\n        left: 10%;\r\n        animation-delay: 0s;\r\n    }\r\n\r\n    .mobile-app-page .floating-element:nth-child(2) {\r\n        width: 250px;\r\n        height: 250px;\r\n        bottom: 15%;\r\n        right: 15%;\r\n        animation-delay: 2s;\r\n    }\r\n\r\n    @keyframes float {\r\n        0%, 100% { transform: translateY(0px); }\r\n        50% { transform: translateY(-30px); }\r\n    }\r\n\r\n    \/* Services Section *\/\r\n    .mobile-app-page .services-section {\r\n        padding: 120px 20px;\r\n        position: relative;\r\n    }\r\n\r\n    .mobile-app-page .container {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .mobile-app-page .section-header {\r\n        text-align: center;\r\n        margin-bottom: 80px;\r\n    }\r\n\r\n    .mobile-app-page .section-label {\r\n        display: inline-block;\r\n        padding: 10px 25px;\r\n        background: rgba(238, 89, 70, 0.1);\r\n        border: 1px solid rgba(238, 89, 70, 0.3);\r\n        border-radius: 50px;\r\n        color: #EE5946;\r\n        font-weight: 600;\r\n        font-size: 0.9rem;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        margin-bottom: 20px;\r\n        opacity: 0;\r\n    }\r\n\r\n    .mobile-app-page .section-title {\r\n        font-size: clamp(2rem, 4vw, 3.5rem);\r\n        font-weight: 800;\r\n        margin-bottom: 20px;\r\n        background: linear-gradient(135deg, #ffffff 0%, #EE5946 100%);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        background-clip: text;\r\n        opacity: 0;\r\n    }\r\n\r\n    .mobile-app-page .section-description {\r\n        font-size: 1.2rem;\r\n        color: rgba(255, 255, 255, 0.7);\r\n        max-width: 800px;\r\n        margin: 0 auto;\r\n        line-height: 1.8;\r\n        opacity: 0;\r\n    }\r\n\r\n    \/* Service Cards Grid *\/\r\n    .mobile-app-page .services-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n        gap: 30px;\r\n        margin-top: 60px;\r\n    }\r\n\r\n    .mobile-app-page .service-card {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        backdrop-filter: blur(20px);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        border-radius: 24px;\r\n        padding: 40px;\r\n        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        position: relative;\r\n        overflow: hidden;\r\n        opacity: 0;\r\n        transform: translateY(50px);\r\n    }\r\n\r\n    .mobile-app-page .service-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        height: 4px;\r\n        background: linear-gradient(90deg, #EE5946 0%, #442764 100%);\r\n        transform: scaleX(0);\r\n        transform-origin: left;\r\n        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n\r\n    .mobile-app-page .service-card:hover::before {\r\n        transform: scaleX(1);\r\n    }\r\n\r\n    .mobile-app-page .service-card:hover {\r\n        transform: translateY(-10px);\r\n        border-color: rgba(238, 89, 70, 0.3);\r\n        background: rgba(255, 255, 255, 0.08);\r\n        box-shadow: 0 20px 60px rgba(238, 89, 70, 0.2);\r\n    }\r\n\r\n    .mobile-app-page .service-icon {\r\n        width: 70px;\r\n        height: 70px;\r\n        background: linear-gradient(135deg, rgba(238, 89, 70, 0.2), rgba(68, 39, 100, 0.2));\r\n        border-radius: 16px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 2rem;\r\n        margin-bottom: 25px;\r\n        transition: all 0.4s ease;\r\n    }\r\n\r\n    .mobile-app-page .service-card:hover .service-icon {\r\n        transform: scale(1.1) rotate(5deg);\r\n        background: linear-gradient(135deg, rgba(238, 89, 70, 0.3), rgba(68, 39, 100, 0.3));\r\n    }\r\n\r\n    .mobile-app-page .service-card h3 {\r\n        font-size: 1.5rem;\r\n        margin-bottom: 15px;\r\n        color: #ffffff;\r\n    }\r\n\r\n    .mobile-app-page .service-card p {\r\n        color: rgba(255, 255, 255, 0.7);\r\n        line-height: 1.7;\r\n        font-size: 1rem;\r\n    }\r\n\r\n    \/* Technologies Section *\/\r\n    .mobile-app-page .tech-section {\r\n        padding: 120px 20px;\r\n        background: linear-gradient(180deg, transparent 0%, rgba(68, 39, 100, 0.1) 100%);\r\n    }\r\n\r\n    .mobile-app-page .tech-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n        gap: 25px;\r\n        margin-top: 60px;\r\n    }\r\n\r\n    .mobile-app-page .tech-card {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        backdrop-filter: blur(20px);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        border-radius: 20px;\r\n        padding: 30px;\r\n        text-align: center;\r\n        transition: all 0.3s ease;\r\n        opacity: 0;\r\n        transform: scale(0.9);\r\n    }\r\n\r\n    .mobile-app-page .tech-card:hover {\r\n        background: rgba(255, 255, 255, 0.08);\r\n        border-color: rgba(238, 89, 70, 0.3);\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    .mobile-app-page .tech-icon {\r\n        font-size: 3rem;\r\n        margin-bottom: 15px;\r\n        display: inline-block;\r\n    }\r\n\r\n    .mobile-app-page .tech-card h4 {\r\n        font-size: 1.2rem;\r\n        color: #ffffff;\r\n        margin-bottom: 8px;\r\n    }\r\n\r\n    .mobile-app-page .tech-card p {\r\n        color: rgba(255, 255, 255, 0.6);\r\n        font-size: 0.9rem;\r\n    }\r\n\r\n    \/* Process Section *\/\r\n    .mobile-app-page .process-section {\r\n        padding: 120px 20px;\r\n    }\r\n\r\n    .mobile-app-page .process-timeline {\r\n        position: relative;\r\n        max-width: 900px;\r\n        margin: 80px auto 0;\r\n    }\r\n\r\n    .mobile-app-page .process-step {\r\n        display: flex;\r\n        gap: 40px;\r\n        margin-bottom: 60px;\r\n        position: relative;\r\n        opacity: 0;\r\n        transform: translateX(-50px);\r\n    }\r\n\r\n    .mobile-app-page .process-step:nth-child(even) {\r\n        flex-direction: row-reverse;\r\n        transform: translateX(50px);\r\n    }\r\n\r\n    .mobile-app-page .process-number {\r\n        min-width: 80px;\r\n        height: 80px;\r\n        background: linear-gradient(135deg, #EE5946 0%, #442764 100%);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 2rem;\r\n        font-weight: 800;\r\n        box-shadow: 0 10px 30px rgba(238, 89, 70, 0.3);\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .mobile-app-page .process-content {\r\n        flex: 1;\r\n        background: rgba(255, 255, 255, 0.05);\r\n        backdrop-filter: blur(20px);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        border-radius: 20px;\r\n        padding: 30px;\r\n    }\r\n\r\n    .mobile-app-page .process-content h3 {\r\n        font-size: 1.6rem;\r\n        margin-bottom: 12px;\r\n        color: #EE5946;\r\n    }\r\n\r\n    .mobile-app-page .process-content p {\r\n        color: rgba(255, 255, 255, 0.7);\r\n        line-height: 1.7;\r\n    }\r\n\r\n    \/* Features Grid *\/\r\n    .mobile-app-page .features-section {\r\n        padding: 120px 20px;\r\n        background: rgba(68, 39, 100, 0.05);\r\n    }\r\n\r\n    .mobile-app-page .features-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n        gap: 30px;\r\n        margin-top: 60px;\r\n    }\r\n\r\n    .mobile-app-page .feature-card {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        backdrop-filter: blur(20px);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        border-radius: 20px;\r\n        padding: 35px;\r\n        text-align: center;\r\n        opacity: 0;\r\n        transform: scale(0.8);\r\n    }\r\n\r\n    .mobile-app-page .feature-icon {\r\n        font-size: 3rem;\r\n        margin-bottom: 20px;\r\n        display: inline-block;\r\n    }\r\n\r\n    .mobile-app-page .feature-card h4 {\r\n        font-size: 1.3rem;\r\n        margin-bottom: 12px;\r\n        color: #ffffff;\r\n    }\r\n\r\n    .mobile-app-page .feature-card p {\r\n        color: rgba(255, 255, 255, 0.7);\r\n        line-height: 1.6;\r\n    }\r\n\r\n    \/* Stats Section *\/\r\n    .mobile-app-page .stats-section {\r\n        padding: 80px 20px;\r\n        background: rgba(68, 39, 100, 0.1);\r\n    }\r\n\r\n    .mobile-app-page .stats-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n        gap: 40px;\r\n        max-width: 1000px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .mobile-app-page .stat-item {\r\n        text-align: center;\r\n        opacity: 0;\r\n        transform: translateY(30px);\r\n    }\r\n\r\n    .mobile-app-page .stat-number {\r\n        font-size: 3.5rem;\r\n        font-weight: 800;\r\n        background: linear-gradient(135deg, #EE5946 0%, #442764 100%);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        background-clip: text;\r\n        margin-bottom: 10px;\r\n        display: inline-block;\r\n        line-height: 1.3;\r\n        padding: 5px 0;\r\n    }\r\n\r\n    .mobile-app-page .stat-label {\r\n        color: rgba(255, 255, 255, 0.7);\r\n        font-size: 1.1rem;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n    }\r\n\r\n    \/* CTA Section *\/\r\n    .mobile-app-page .cta-section {\r\n        padding: 120px 20px;\r\n        text-align: center;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .mobile-app-page .cta-content {\r\n        max-width: 800px;\r\n        margin: 0 auto;\r\n        position: relative;\r\n        z-index: 2;\r\n        background: rgba(255, 255, 255, 0.05);\r\n        backdrop-filter: blur(20px);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        border-radius: 30px;\r\n        padding: 80px 40px;\r\n        opacity: 0;\r\n        transform: translateY(50px);\r\n    }\r\n\r\n    .mobile-app-page .cta-content h2 {\r\n        font-size: clamp(2rem, 4vw, 3rem);\r\n        margin-bottom: 20px;\r\n        background: linear-gradient(135deg, #ffffff 0%, #EE5946 100%);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        background-clip: text;\r\n    }\r\n\r\n    .mobile-app-page .cta-content p {\r\n        font-size: 1.2rem;\r\n        color: rgba(255, 255, 255, 0.7);\r\n        margin-bottom: 40px;\r\n        line-height: 1.8;\r\n    }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 768px) {\r\n        .mobile-app-page .hero {\r\n            padding: 60px 20px;\r\n        }\r\n\r\n        .mobile-app-page .services-section,\r\n        .mobile-app-page .tech-section,\r\n        .mobile-app-page .process-section,\r\n        .mobile-app-page .features-section,\r\n        .mobile-app-page .cta-section {\r\n            padding: 80px 20px;\r\n        }\r\n\r\n        .mobile-app-page .services-grid {\r\n            grid-template-columns: 1fr;\r\n        }\r\n\r\n        .mobile-app-page .process-step,\r\n        .mobile-app-page .process-step:nth-child(even) {\r\n            flex-direction: column;\r\n            gap: 20px;\r\n            transform: translateY(50px);\r\n        }\r\n\r\n        .mobile-app-page .process-number {\r\n            min-width: 60px;\r\n            height: 60px;\r\n            font-size: 1.5rem;\r\n        }\r\n\r\n        .mobile-app-page .cta-content {\r\n            padding: 50px 30px;\r\n        }\r\n\r\n        .mobile-app-page .hero-cta {\r\n            flex-direction: column;\r\n            align-items: center;\r\n        }\r\n\r\n        .mobile-app-page .btn {\r\n            width: 100%;\r\n            max-width: 300px;\r\n        }\r\n\r\n        .mobile-app-page .tech-grid {\r\n            grid-template-columns: repeat(2, 1fr);\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .mobile-app-page .service-card {\r\n            padding: 30px 20px;\r\n        }\r\n\r\n        .mobile-app-page .tech-grid {\r\n            grid-template-columns: 1fr;\r\n        }\r\n\r\n        .mobile-app-page .stats-grid {\r\n            grid-template-columns: 1fr;\r\n            gap: 30px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<!-- Mobile App Development Page Content -->\r\n<div class=\"mobile-app-page\">\r\n    <!-- Hero Section -->\r\n    <section class=\"hero\">\r\n        <div class=\"floating-element\"><\/div>\r\n        <div class=\"floating-element\"><\/div>\r\n        \r\n        <div class=\"hero-content\">\r\n            <h1>\u57c3\u53ca\u79fb\u52a8\u5e94\u7528\u5f00\u53d1<\/h1>\r\n            <p class=\"hero-subtitle\">\r\n                \u5c06\u60a8\u7684\u60f3\u6cd5\u8f6c\u5316\u4e3a\u5f3a\u5927\u7684\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f\u3002\u4e13\u4e1a\u7684 iOS \u548c Android \u5e94\u7528\u5f00\u53d1\u670d\u52a1\uff0c\u4e13\u4e3a\u57c3\u53ca\u5e02\u573a\u91cf\u8eab\u5b9a\u5236\r\n            <\/p>\r\n            <div class=\"platform-badges\">\r\n                <span class=\"platform-badge\">\ud83d\udcf1 iOS \u5f00\u53d1<\/span>\r\n                <span class=\"platform-badge\">\ud83e\udd16 Android \u5f00\u53d1<\/span>\r\n                <span class=\"platform-badge\">\u26a1 \u8de8\u5e73\u53f0<\/span>\r\n            <\/div>\r\n            <div class=\"hero-cta\">\r\n                <a href=\"#contact\" class=\"btn btn-primary\">\u5f00\u59cb\u60a8\u7684\u9879\u76ee<\/a>\r\n                <a href=\"#services\" class=\"btn btn-secondary\">\u67e5\u770b\u670d\u52a1<\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Services Section -->\r\n    <section class=\"services-section\" id=\"services\">\r\n        <div class=\"container\">\r\n            <div class=\"section-header\">\r\n                <span class=\"section-label\">\u6211\u4eec\u6784\u5efa\u4ec0\u4e48<\/span>\r\n                <h2 class=\"section-title\">\u5168\u9762\u7684\u79fb\u52a8\u5e94\u7528\u5f00\u53d1<\/h2>\r\n                <p class=\"section-description\">\r\n                    \u4ece\u6982\u5ff5\u5230\u53d1\u5e03\uff0c\u6211\u4eec\u4e3a\u5404\u79cd\u89c4\u6a21\u7684\u4f01\u4e1a\u63d0\u4f9b\u7aef\u5230\u7aef\u7684\u79fb\u52a8\u5e94\u7528\u89e3\u51b3\u65b9\u6848\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"services-grid\">\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-icon\">\ud83d\udcf1<\/div>\r\n                    <h3>\u539f\u751f iOS \u5f00\u53d1<\/h3>\r\n                    <p>\r\n                        Swift \u548c Objective-C \u5f00\u53d1\u7528\u4e8e iPhone \u548c iPad\u3002\u9488\u5bf9 Apple \u751f\u6001\u7cfb\u7edf\u4f18\u5316\u7684\u9ad8\u6027\u80fd\u5e94\u7528\uff0c\u5b9e\u73b0\u65e0\u7f1d\u96c6\u6210\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-icon\">\ud83e\udd16<\/div>\r\n                    <h3>\u539f\u751f Android \u5f00\u53d1<\/h3>\r\n                    <p>\r\n                        Kotlin \u548c Java \u5f00\u53d1\u7528\u4e8e Android \u8bbe\u5907\u3002\u53ef\u6269\u5c55\u7684\u5e94\u7528\uff0c\u517c\u5bb9\u5404\u79cd Android \u7248\u672c\u548c\u5c4f\u5e55\u5c3a\u5bf8\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-icon\">\u26a1<\/div>\r\n                    <h3>\u8de8\u5e73\u53f0\u5e94\u7528<\/h3>\r\n                    <p>\r\n                        React Native \u548c Flutter \u5f00\u53d1\u3002\u4e00\u6b21\u6784\u5efa\uff0c\u968f\u5904\u90e8\u7f72\u3002\u5177\u6709\u539f\u751f\u6027\u80fd\u7684\u7ecf\u6d4e\u9ad8\u6548\u89e3\u51b3\u65b9\u6848\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-icon\">\ud83d\uded2<\/div>\r\n                    <h3>\u7535\u5546\u5e94\u7528<\/h3>\r\n                    <p>\r\n                        \u529f\u80fd\u4e30\u5bcc\u7684\u8d2d\u7269\u5e94\u7528\uff0c\u96c6\u6210\u652f\u4ed8\u3001\u5e93\u5b58\u7ba1\u7406\u548c\u9488\u5bf9\u57c3\u53ca\u5e02\u573a\u7684\u65e0\u7f1d\u7ed3\u8d26\u4f53\u9a8c\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-icon\">\ud83c\udfe2<\/div>\r\n                    <h3>\u4f01\u4e1a\u79fb\u52a8\u89e3\u51b3\u65b9\u6848<\/h3>\r\n                    <p>\r\n                        \u7528\u4e8e\u5458\u5de5\u7ba1\u7406\u3001CRM\u3001\u5e93\u5b58\u8ddf\u8e2a\u548c\u5185\u90e8\u901a\u4fe1\u7684\u5b9a\u5236\u4e1a\u52a1\u5e94\u7528\uff0c\u5177\u6709\u5f3a\u5927\u7684\u5b89\u5168\u6027\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-icon\">\ud83c\udfae<\/div>\r\n                    <h3>\u6e38\u620f\u4e0e AR\/VR \u5e94\u7528<\/h3>\r\n                    <p>\r\n                        \u6c89\u6d78\u5f0f\u6e38\u620f\u4f53\u9a8c\u548c\u589e\u5f3a\u73b0\u5b9e\u5e94\u7528\u3002Unity \u548c ARKit\/ARCore \u5f00\u53d1\uff0c\u6253\u9020\u5f15\u4eba\u5165\u80dc\u7684\u7528\u6237\u4f53\u9a8c\r\n                    <\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Stats Section -->\r\n    <section class=\"stats-section\">\r\n        <div class=\"stats-grid\">\r\n            <div class=\"stat-item\">\r\n                <span class=\"stat-number\" data-target=\"150\">150<\/span>\r\n                <span class=\"stat-label\">+ \u5df2\u4ea4\u4ed8\u5e94\u7528<\/span>\r\n            <\/div>\r\n            <div class=\"stat-item\">\r\n                <span class=\"stat-number\" data-target=\"2\">2<\/span>\r\n                <span class=\"stat-label\">\u767e\u4e07+ \u6b21\u4e0b\u8f7d<\/span>\r\n            <\/div>\r\n            <div class=\"stat-item\">\r\n                <span class=\"stat-number\" data-target=\"10\">10<\/span>\r\n                <span class=\"stat-label\">\u5e74\u7ecf\u9a8c<\/span>\r\n            <\/div>\r\n            <div class=\"stat-item\">\r\n                <span class=\"stat-number\" data-target=\"98\">98<\/span>\r\n                <span class=\"stat-label\">% \u5ba2\u6237\u6ee1\u610f\u5ea6<\/span>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Technologies Section -->\r\n    <section class=\"tech-section\">\r\n        <div class=\"container\">\r\n            <div class=\"section-header\">\r\n                <span class=\"section-label\">\u6280\u672f<\/span>\r\n                <h2 class=\"section-title\">\u5c16\u7aef\u5f00\u53d1\u6280\u672f\u6808<\/h2>\r\n                <p class=\"section-description\">\r\n                    \u6211\u4eec\u5229\u7528\u6700\u65b0\u6280\u672f\u6784\u5efa\u5f3a\u5927\u3001\u53ef\u6269\u5c55\u7684\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"tech-grid\">\r\n                <div class=\"tech-card\">\r\n                    <div class=\"tech-icon\">\ud83c\udf4e<\/div>\r\n                    <h4>Swift<\/h4>\r\n                    <p>iOS \u539f\u751f<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"tech-card\">\r\n                    <div class=\"tech-icon\">\ud83e\udd16<\/div>\r\n                    <h4>Kotlin<\/h4>\r\n                    <p>Android \u539f\u751f<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"tech-card\">\r\n                    <div class=\"tech-icon\">\u269b\ufe0f<\/div>\r\n                    <h4>React Native<\/h4>\r\n                    <p>\u8de8\u5e73\u53f0<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"tech-card\">\r\n                    <div class=\"tech-icon\">\ud83c\udfaf<\/div>\r\n                    <h4>Flutter<\/h4>\r\n                    <p>\u8de8\u5e73\u53f0<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"tech-card\">\r\n                    <div class=\"tech-icon\">\ud83d\udd25<\/div>\r\n                    <h4>Firebase<\/h4>\r\n                    <p>\u540e\u7aef\u670d\u52a1<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"tech-card\">\r\n                    <div class=\"tech-icon\">\u2601\ufe0f<\/div>\r\n                    <h4>AWS\/Azure<\/h4>\r\n                    <p>\u4e91\u57fa\u7840\u8bbe\u65bd<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"tech-card\">\r\n                    <div class=\"tech-icon\">\ud83d\udd12<\/div>\r\n                    <h4>\u5b89\u5168<\/h4>\r\n                    <p>\u52a0\u5bc6\u4e0e\u8ba4\u8bc1<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"tech-card\">\r\n                    <div class=\"tech-icon\">\ud83d\udcca<\/div>\r\n                    <h4>\u5206\u6790<\/h4>\r\n                    <p>\u7528\u6237\u6d1e\u5bdf<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Process Section -->\r\n    <section class=\"process-section\">\r\n        <div class=\"container\">\r\n            <div class=\"section-header\">\r\n                <span class=\"section-label\">\u6211\u4eec\u7684\u6d41\u7a0b<\/span>\r\n                <h2 class=\"section-title\">\u6211\u4eec\u5982\u4f55\u6784\u5efa\u60a8\u7684\u5e94\u7528<\/h2>\r\n                <p class=\"section-description\">\r\n                    \u7ecf\u8fc7\u9a8c\u8bc1\u7684\u5f00\u53d1\u65b9\u6cd5\uff0c\u786e\u4fdd\u8d28\u91cf\u3001\u6548\u7387\u548c\u6210\u529f\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"process-timeline\">\r\n                <div class=\"process-step\">\r\n                    <div class=\"process-number\">01<\/div>\r\n                    <div class=\"process-content\">\r\n                        <h3>\u53d1\u73b0\u4e0e\u89c4\u5212<\/h3>\r\n                        <p>\r\n                            \u6211\u4eec\u5206\u6790\u60a8\u7684\u9700\u6c42\u3001\u76ee\u6807\u53d7\u4f17\u548c\u7ade\u4e89\u5bf9\u624b\u3002\u5b9a\u4e49\u529f\u80fd\u3001\u521b\u5efa\u7ebf\u6846\u56fe\uff0c\u5e76\u786e\u5b9a\u9879\u76ee\u65f6\u95f4\u8868\u548c\u9884\u7b97\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"process-step\">\r\n                    <div class=\"process-number\">02<\/div>\r\n                    <div class=\"process-content\">\r\n                        <h3>UI\/UX \u8bbe\u8ba1<\/h3>\r\n                        <p>\r\n                            \u8bbe\u8ba1\u76f4\u89c2\u7684\u7528\u6237\u754c\u9762\u548c\u65e0\u7f1d\u7684\u7528\u6237\u4f53\u9a8c\u3002\u5728\u5f00\u53d1\u524d\u521b\u5efa\u4ea4\u4e92\u539f\u578b\u5e76\u6536\u96c6\u53cd\u9988\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"process-step\">\r\n                    <div class=\"process-number\">03<\/div>\r\n                    <div class=\"process-content\">\r\n                        <h3>\u5f00\u53d1<\/h3>\r\n                        <p>\r\n                            \u91c7\u7528\u654f\u6377\u5f00\u53d1\uff0c\u5b9a\u671f\u8fdb\u884c\u8fed\u4ee3\u548c\u66f4\u65b0\u3002\u6784\u5efa\u524d\u7aef\u3001\u540e\u7aef\u3001API \u5e76\u96c6\u6210\u7b2c\u4e09\u65b9\u670d\u52a1\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"process-step\">\r\n                    <div class=\"process-number\">04<\/div>\r\n                    <div class=\"process-content\">\r\n                        <h3>\u8d28\u91cf\u4fdd\u8bc1<\/h3>\r\n                        <p>\r\n                            \u5168\u9762\u6d4b\u8bd5\uff0c\u5305\u62ec\u529f\u80fd\u3001\u6027\u80fd\u3001\u5b89\u5168\u548c\u7528\u6237\u9a8c\u6536\u6d4b\u8bd5\uff0c\u6db5\u76d6\u5404\u79cd\u8bbe\u5907\u548c\u64cd\u4f5c\u7cfb\u7edf\u7248\u672c\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"process-step\">\r\n                    <div class=\"process-number\">05<\/div>\r\n                    <div class=\"process-content\">\r\n                        <h3>\u53d1\u5e03\u4e0e\u90e8\u7f72<\/h3>\r\n                        <p>\r\n                            \u63d0\u4ea4\u5230 App Store \u548c Google Play\uff0c\u5e76\u4f18\u5316\u5e94\u7528\u5217\u8868\u3002\u5904\u7406\u5ba1\u6838\u6d41\u7a0b\u5e76\u786e\u4fdd\u6210\u529f\u53d1\u5e03\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"process-step\">\r\n                    <div class=\"process-number\">06<\/div>\r\n                    <div class=\"process-content\">\r\n                        <h3>\u652f\u6301\u4e0e\u7ef4\u62a4<\/h3>\r\n                        <p>\r\n                            \u6301\u7eed\u66f4\u65b0\u3001\u9519\u8bef\u4fee\u590d\u3001\u6027\u80fd\u4f18\u5316\u548c\u529f\u80fd\u589e\u5f3a\uff0c\u4ee5\u4fdd\u6301\u60a8\u7684\u5e94\u7528\u7ade\u4e89\u529b\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Features Section -->\r\n    <section class=\"features-section\">\r\n        <div class=\"container\">\r\n            <div class=\"section-header\">\r\n                <span class=\"section-label\">\u4e3a\u4ec0\u4e48\u9009\u62e9\u6211\u4eec<\/span>\r\n                <h2 class=\"section-title\">\u6211\u4eec\u7684\u4e0e\u4f17\u4e0d\u540c\u4e4b\u5904<\/h2>\r\n                <p class=\"section-description\">\r\n                    \u884c\u4e1a\u9886\u5148\u7684\u4e13\u4e1a\u77e5\u8bc6\u4e0e\u672c\u5730\u5e02\u573a\u77e5\u8bc6\u76f8\u7ed3\u5408\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <div class=\"features-grid\">\r\n                <div class=\"feature-card\">\r\n                    <div class=\"feature-icon\">\ud83c\uddea\ud83c\uddec<\/div>\r\n                    <h4>\u57c3\u53ca\u5e02\u573a\u4e13\u4e1a\u77e5\u8bc6<\/h4>\r\n                    <p>\u6df1\u5165\u4e86\u89e3\u672c\u5730\u7528\u6237\u884c\u4e3a\u548c\u504f\u597d<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"feature-card\">\r\n                    <div class=\"feature-icon\">\ud83d\udcb0<\/div>\r\n                    <h4>\u652f\u4ed8\u96c6\u6210<\/h4>\r\n                    <p>Fawry\u3001PayMob \u548c\u56fd\u9645\u652f\u4ed8\u7f51\u5173<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"feature-card\">\r\n                    <div class=\"feature-icon\">\ud83c\udf10<\/div>\r\n                    <h4>\u963f\u62c9\u4f2f\u8bed\u4e0e\u82f1\u8bed\u652f\u6301<\/h4>\r\n                    <p>\u5b8c\u6574\u7684 RTL \u652f\u6301\u548c\u53cc\u8bed\u754c\u9762<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"feature-card\">\r\n                    <div class=\"feature-icon\">\ud83d\udd10<\/div>\r\n                    <h4>\u4f01\u4e1a\u7ea7\u5b89\u5168<\/h4>\r\n                    <p>\u94f6\u884c\u7ea7\u52a0\u5bc6\u548c\u6570\u636e\u4fdd\u62a4<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"feature-card\">\r\n                    <div class=\"feature-icon\">\ud83d\udcf1<\/div>\r\n                    <h4>\u54cd\u5e94\u5f0f\u652f\u6301<\/h4>\r\n                    <p>24\/7 \u6280\u672f\u652f\u6301\u548c\u7ef4\u62a4<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"feature-card\">\r\n                    <div class=\"feature-icon\">\u26a1<\/div>\r\n                    <h4>\u5feb\u901f\u4ea4\u4ed8<\/h4>\r\n                    <p>\u654f\u6377\u65b9\u6cd5\u5b9e\u73b0\u5feb\u901f\u5f00\u53d1\u5468\u671f<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- CTA Section -->\r\n    <section class=\"cta-section\" id=\"contact\">\r\n        <div class=\"container\">\r\n            <div class=\"cta-content\">\r\n                <h2>\u51c6\u5907\u597d\u6784\u5efa\u60a8\u7684\u79fb\u52a8\u5e94\u7528\u4e86\u5417\uff1f<\/h2>\r\n                <p>\r\n                    \u901a\u8fc7\u4e13\u4e1a\u7684\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f\u8f6c\u53d8\u60a8\u7684\u4e1a\u52a1\u3002\u8ba9\u6211\u4eec\u8ba8\u8bba\u60a8\u7684\u9879\u76ee\u5e76\u5c06\u60a8\u7684\u613f\u666f\u53d8\u4e3a\u73b0\u5b9e\r\n                <\/p>\r\n                <a href=\"https:\/\/webbingstone.com\/zh-hans\/contact-us\/\" class=\"btn btn-primary\">\u83b7\u53d6\u514d\u8d39\u54a8\u8be2<\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n    'use strict';\r\n\r\n    let gsapInitialized = false;\r\n    const pageElement = document.querySelector('.mobile-app-page');\r\n\r\n    \/\/ Fallback function - show content with CSS animations if GSAP fails\r\n    function activateFallback() {\r\n        if (pageElement && !gsapInitialized) {\r\n            pageElement.classList.add('no-gsap');\r\n            console.warn('GSAP not available - using CSS fallback animations');\r\n            \r\n            \/\/ Show stat numbers immediately if GSAP isn't available\r\n            document.querySelectorAll('.mobile-app-page .stat-number').forEach(el => {\r\n                const target = el.getAttribute('data-target');\r\n                if (target) {\r\n                    el.textContent = target;\r\n                }\r\n            });\r\n        }\r\n    }\r\n\r\n    \/\/ Set fallback timer - activate after 2 seconds if GSAP hasn't initialized\r\n    const fallbackTimer = setTimeout(activateFallback, 2000);\r\n\r\n    \/\/ Initialize GSAP animations\r\n    function initGSAP() {\r\n        \/\/ Check if GSAP is available\r\n        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\r\n            return false;\r\n        }\r\n\r\n        \/\/ Clear fallback timer\r\n        clearTimeout(fallbackTimer);\r\n        gsapInitialized = true;\r\n\r\n        \/\/ Register ScrollTrigger\r\n        gsap.registerPlugin(ScrollTrigger);\r\n\r\n        \/\/ Hero animations\r\n        gsap.to('.mobile-app-page .hero h1', {\r\n            opacity: 1,\r\n            y: 0,\r\n            duration: 1,\r\n            delay: 0.3,\r\n            ease: 'power3.out'\r\n        });\r\n\r\n        gsap.to('.mobile-app-page .hero-subtitle', {\r\n            opacity: 1,\r\n            y: 0,\r\n            duration: 1,\r\n            delay: 0.5,\r\n            ease: 'power3.out'\r\n        });\r\n\r\n        gsap.to('.mobile-app-page .platform-badges', {\r\n            opacity: 1,\r\n            y: 0,\r\n            duration: 1,\r\n            delay: 0.7,\r\n            ease: 'power3.out'\r\n        });\r\n\r\n        gsap.to('.mobile-app-page .hero-cta', {\r\n            opacity: 1,\r\n            y: 0,\r\n            duration: 1,\r\n            delay: 0.9,\r\n            ease: 'power3.out'\r\n        });\r\n\r\n        \/\/ Section labels\r\n        gsap.utils.toArray('.mobile-app-page .section-label').forEach(label => {\r\n            gsap.to(label, {\r\n                opacity: 1,\r\n                duration: 0.8,\r\n                scrollTrigger: {\r\n                    trigger: label,\r\n                    start: 'top 80%',\r\n                    toggleActions: 'play none none reverse'\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ Section titles\r\n        gsap.utils.toArray('.mobile-app-page .section-title').forEach(title => {\r\n            gsap.to(title, {\r\n                opacity: 1,\r\n                duration: 0.8,\r\n                delay: 0.2,\r\n                scrollTrigger: {\r\n                    trigger: title,\r\n                    start: 'top 80%',\r\n                    toggleActions: 'play none none reverse'\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ Section descriptions\r\n        gsap.utils.toArray('.mobile-app-page .section-description').forEach(desc => {\r\n            gsap.to(desc, {\r\n                opacity: 1,\r\n                duration: 0.8,\r\n                delay: 0.4,\r\n                scrollTrigger: {\r\n                    trigger: desc,\r\n                    start: 'top 80%',\r\n                    toggleActions: 'play none none reverse'\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ Service cards\r\n        gsap.utils.toArray('.mobile-app-page .service-card').forEach((card, index) => {\r\n            gsap.to(card, {\r\n                opacity: 1,\r\n                y: 0,\r\n                duration: 0.8,\r\n                delay: index * 0.1,\r\n                scrollTrigger: {\r\n                    trigger: card,\r\n                    start: 'top 85%',\r\n                    toggleActions: 'play none none reverse'\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ Tech cards\r\n        gsap.utils.toArray('.mobile-app-page .tech-card').forEach((card, index) => {\r\n            gsap.to(card, {\r\n                opacity: 1,\r\n                scale: 1,\r\n                duration: 0.5,\r\n                delay: index * 0.05,\r\n                scrollTrigger: {\r\n                    trigger: card,\r\n                    start: 'top 85%',\r\n                    toggleActions: 'play none none reverse'\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ Process steps\r\n        gsap.utils.toArray('.mobile-app-page .process-step').forEach(step => {\r\n            gsap.to(step, {\r\n                opacity: 1,\r\n                x: 0,\r\n                duration: 0.8,\r\n                scrollTrigger: {\r\n                    trigger: step,\r\n                    start: 'top 80%',\r\n                    toggleActions: 'play none none reverse'\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ Feature cards\r\n        gsap.utils.toArray('.mobile-app-page .feature-card').forEach((card, index) => {\r\n            gsap.to(card, {\r\n                opacity: 1,\r\n                scale: 1,\r\n                duration: 0.6,\r\n                delay: index * 0.1,\r\n                scrollTrigger: {\r\n                    trigger: card,\r\n                    start: 'top 85%',\r\n                    toggleActions: 'play none none reverse'\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ Stats with counter\r\n        function animateCounter(element) {\r\n            const target = parseInt(element.getAttribute('data-target'));\r\n            const duration = 2000;\r\n            const increment = target \/ (duration \/ 16);\r\n            let current = 0;\r\n\r\n            const timer = setInterval(() => {\r\n                current += increment;\r\n                if (current >= target) {\r\n                    element.textContent = target;\r\n                    clearInterval(timer);\r\n                } else {\r\n                    element.textContent = Math.floor(current);\r\n                }\r\n            }, 16);\r\n        }\r\n\r\n        gsap.utils.toArray('.mobile-app-page .stat-item').forEach((item, index) => {\r\n            gsap.to(item, {\r\n                opacity: 1,\r\n                y: 0,\r\n                duration: 0.8,\r\n                delay: index * 0.1,\r\n                scrollTrigger: {\r\n                    trigger: item,\r\n                    start: 'top 85%',\r\n                    toggleActions: 'play none none reverse',\r\n                    onEnter: () => {\r\n                        const number = item.querySelector('.stat-number');\r\n                        if (number && number.textContent !== number.getAttribute('data-target')) {\r\n                            animateCounter(number);\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ CTA section\r\n        gsap.to('.mobile-app-page .cta-content', {\r\n            opacity: 1,\r\n            y: 0,\r\n            duration: 1,\r\n            scrollTrigger: {\r\n                trigger: '.mobile-app-page .cta-content',\r\n                start: 'top 80%',\r\n                toggleActions: 'play none none reverse'\r\n            }\r\n        });\r\n\r\n        \/\/ Parallax floating elements\r\n        gsap.to('.mobile-app-page .floating-element:nth-child(1)', {\r\n            y: 100,\r\n            scrollTrigger: {\r\n                trigger: '.mobile-app-page .hero',\r\n                start: 'top top',\r\n                end: 'bottom top',\r\n                scrub: 1\r\n            }\r\n        });\r\n\r\n        gsap.to('.mobile-app-page .floating-element:nth-child(2)', {\r\n            y: -100,\r\n            scrollTrigger: {\r\n                trigger: '.mobile-app-page .hero',\r\n                start: 'top top',\r\n                end: 'bottom top',\r\n                scrub: 1\r\n            }\r\n        });\r\n\r\n        return true;\r\n    }\r\n\r\n    \/\/ Smooth scroll for anchor links\r\n    function initSmoothScroll() {\r\n        document.querySelectorAll('.mobile-app-page a[href^=\"#\"]').forEach(anchor => {\r\n            anchor.addEventListener('click', function(e) {\r\n                e.preventDefault();\r\n                const target = document.querySelector(this.getAttribute('href'));\r\n                if (target) {\r\n                    target.scrollIntoView({\r\n                        behavior: 'smooth',\r\n                        block: 'start'\r\n                    });\r\n                }\r\n            });\r\n        });\r\n    }\r\n\r\n    \/\/ Initialize when DOM is ready\r\n    if (document.readyState === 'loading') {\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            initSmoothScroll();\r\n            setTimeout(() => {\r\n                if (!initGSAP()) {\r\n                    \/\/ Retry after 100ms\r\n                    setTimeout(initGSAP, 100);\r\n                }\r\n            }, 50);\r\n        });\r\n    } else {\r\n        initSmoothScroll();\r\n        setTimeout(() => {\r\n            if (!initGSAP()) {\r\n                setTimeout(initGSAP, 100);\r\n            }\r\n        }, 50);\r\n    }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Webbing Stone \u56e2\u961f\u8ba4\u4e3a\uff0c\u62e5\u6709\u9002\u7528\u4e8e Android \u548c iPhone \u7684\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f\u7684\u6700\u5927\u597d\u5904\u4e4b\u4e00\u662f\uff0c\u6240\u6709\u4f60\u60f3\u63d0\u4f9b\u7ed9\u5ba2\u6237\u7684\u4fe1\u606f\u90fd\u89e6\u624b\u53ef\u53ca\u3002<\/p>\n","protected":false},"featured_media":1247,"template":"","meta":{"footnotes":""},"portfolio_cat":[163],"portfolio_skills":[],"class_list":["post-1668","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry","portfolio_cat-featured-zh-hans"],"_links":{"self":[{"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/portfolio\/1668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/types\/portfolio"}],"version-history":[{"count":5,"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/portfolio\/1668\/revisions"}],"predecessor-version":[{"id":21247,"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/portfolio\/1668\/revisions\/21247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/media\/1247"}],"wp:attachment":[{"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/media?parent=1668"}],"wp:term":[{"taxonomy":"portfolio_cat","embeddable":true,"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/portfolio_cat?post=1668"},{"taxonomy":"portfolio_skills","embeddable":true,"href":"https:\/\/webbingstone.com\/zh-hans\/wp-json\/wp\/v2\/portfolio_skills?post=1668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}