





<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Company News - 
      Pawpaw Technology | Professional Audio Solutions</title>
    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/static/dist/css/styles.f9e87c1a.css" type="text/css" />

    
    <meta property="og:title" content="Company News">
    <meta property="og:locale" content="en_US">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Pawpaw Technology">
    <meta property="og:url" content="https://www.pawpaw.cn/en/news/?page=2">
    
    
    
    
    
    
      <meta name="description" content="Pawpaw Technology&#x27;s news archive covers company news since the website launch, as well as industry news and partner news written or reprinted by Pawpaw Technology, aiming to bring the latest industry-related information to customers.">
      <meta property="og:description" content="Pawpaw Technology&#x27;s news archive covers company news since the website launch, as well as industry news and partner news written or reprinted by Pawpaw Technology, aiming to bring the latest industry-related information to customers.">
    
    
    
    
    
    
    
    
    
    <meta name="twitter:card" content="summary">
    
      <meta name="twitter:title" content="新闻动态 - 木瓜科技">
    
    
      <meta name="twitter:description" content="Pawpaw Technology&#x27;s news archive covers company news since the website launch, as well as industry news and partner news written or reprinted by Pawpaw Technology, aiming to bring the latest industry-related information to customers.">
    
    
    
    
    
<link rel="canonical" href="https://www.pawpaw.cn/en/news/?page=2">



<link rel="alternate" hreflang="zh-hans" href="https://www.pawpaw.cn/zh-hans/news/?page=2">

<link rel="alternate" hreflang="en" href="https://www.pawpaw.cn/en/news/?page=2">

<link rel="alternate" hreflang="x-default" href="https://www.pawpaw.cn/">
 
    <script type="text/javascript">
      // Microsoft Clarity Analytics - Only initialized if consent is given
      window.clarity = window.clarity || function() { (window.clarity.q = window.clarity.q || []).push(arguments); };
    </script>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-48X1WRKFL6"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-48X1WRKFL6');
    </script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" />
    
    <!-- Pawpaw Scripts -->
    <script src="/static/scripts/utils.js"></script>
    <script src="/static/scripts/card_animations.js"></script>
    <!-- Cookie Consent - Must be loaded before Alpine.js -->
    <script src="/static/scripts/cookie_consent.js"></script>
    
    <!-- Alpine Plugins -->
    <script defer src="/static/scripts/alpinejs.collapse.min.js"></script>
    <script defer src="/static/scripts/alpinejs.focus.min.js"></script>
    <!-- Alpine Core -->
    <script defer src="/static/scripts/alpinejs.min.js"></script>
    <script defer src="/static/scripts/gsap.min.js"></script>
    <!-- Lottie.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
    
    
  
  <!-- 新闻列表页结构化数据 -->
  
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  "name": "Company News",
  "description": "Pawpaw Technology's news archive covers company news since the website launch, as well as industry news and partner news written or reprinted by Pawpaw Technology, aiming to bring the latest industry-related information to customers.",
  "url": "https://www.pawpaw.cn/en/news/?page=2",
  "inLanguage": "en-US",
  "isPartOf": {
    "@type": "WebSite",
    "name": "Pawpaw Technology",
    "url": "https://www.pawpaw.cn/"
  }
}
</script>
 

  </head>
  <body class="text-dark">
    


<!-- 导航栏容器 -->
<div x-data="{ 
        isScrolled: false, 
        isMenuHovered: false, 
        isNavHovered: false,
        activeMenuSection: null, // 跟踪当前激活的菜单区域
        mobileMenuOpen: false,
        isDarkTheme: typeof window.navbarDarkTheme === 'boolean' ? window.navbarDarkTheme : false, // 检测是否暗色主题
        toggleMobileMenu() {
            this.mobileMenuOpen = !this.mobileMenuOpen;
        },
        triggerSearch() {
            window.dispatchEvent(new CustomEvent('search-toggle'));
        }
     }" 
     x-init="
        window.navbarState = {};
        Object.defineProperties(window.navbarState, {
            isMenuHovered: {
                get: () => isMenuHovered,
                set: (value) => isMenuHovered = value
            },
            activeMenuSection: {
                get: () => activeMenuSection,
                set: (value) => activeMenuSection = value
            }
        });
     "
     @scroll.window.throttle.100ms="isScrolled = (window.scrollY > 80)"
     @mouseenter="isNavHovered = true"
     @mouseleave="isNavHovered = false; setTimeout(() => { if(!isNavHovered) { isMenuHovered = false; activeMenuSection = null; } }, 100)"
     :class="isDarkTheme ? 'bg-black text-white' : (isMenuHovered || isScrolled ? 'bg-white shadow-sm' : 'bg-transparent')"
     class="w-full sticky top-0 transition-all duration-200 z-50"
     id="main-navbar"
     x-cloak>
    <!-- TODO: 修复滚动条问题 参考 https://www.vivo.com/ -->
    <div class="max-w-[1440px] mx-auto relative h-16 z-50 flex flex-row items-center justify-between py-0 px-4 sm:px-6 md:px-12 box-border gap-4 md:gap-5 text-center text-body-medium"
         :class="isDarkTheme ? 'text-white' : 'text-dark'"
         >
        <div class="flex flex-row items-center h-full">
            <a href="/en/" class="transition duration-300 hover:text-primary block">
                <svg width="120" height="30" viewBox="0 0 120 30" fill="none" xmlns="http://www.w3.org/2000/svg"
                    class="flex-shrink-0 w-[100px] md:w-[120px] min-w-[100px] md:min-w-[120px] relative h-[25px] md:h-[30px] md:pr-5">
                    <g id="Logo">
                        <g id="Pawpaw_LOGO_sRGB 2" clip-path="url(#clip0_1243_481)">
                            <g id="Layer1">
                                <path id="Vector" fill-rule="evenodd" clip-rule="evenodd"
                                    d="M90.4859 8H87.2913L85.4029 11.0979H88.8965C89.5259 11.0979 90.0295 11.5911 90.0295 12.2076C90.0295 12.8241 89.5259 13.3173 88.8965 13.3173H84.0338L78.9352 21.6709H82.6034L85.8136 16.3998H91.9447L95.1549 21.6709H98.8247L90.4859 8Z"
                                    fill="currentColor" />
                                <path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd"
                                    d="M77.1097 8H61.137V11.0979H75.9609C76.5904 11.0979 77.094 11.5911 77.094 12.2076C77.094 12.8241 76.5904 13.3173 75.9609 13.3173H61.137V21.6709H64.3001V16.4152H77.1097C78.8565 16.4152 80.2728 15.0281 80.2728 13.3173V11.0979C80.257 9.38712 78.8565 8 77.1097 8Z"
                                    fill="currentColor" />
                                <path id="Vector_3" fill-rule="evenodd" clip-rule="evenodd"
                                    d="M55.6921 8H58.8552V20.5612C58.8552 21.1777 58.3516 21.6709 57.7221 21.6709H54.26L48.9096 12.596L43.5607 21.6709H38.9797V8H42.1428V17.881L47.9654 8H49.8538L55.6921 17.9041V8Z"
                                    fill="currentColor" />
                                <path id="Vector_4" fill-rule="evenodd" clip-rule="evenodd"
                                    d="M116.837 8H120V20.5612C120 21.1777 119.496 21.6709 118.867 21.6709H115.405L110.054 12.596L104.706 21.6709H100.125V8H103.288V17.881L109.11 8H110.999L116.837 17.9041V8Z"
                                    fill="currentColor" />
                                <path id="Vector_5" fill-rule="evenodd" clip-rule="evenodd"
                                    d="M29.3489 8H26.1544L24.266 11.0979H27.7595C28.389 11.0979 28.8925 11.5911 28.8925 12.2076C28.8925 12.8241 28.389 13.3173 27.7595 13.3173H22.8969L17.7982 21.6709H21.4664L24.6767 16.3998H30.8077L34.018 21.6709H37.6878L29.3489 8Z"
                                    fill="currentColor" />
                                <path id="Vector_6" fill-rule="evenodd" clip-rule="evenodd"
                                    d="M15.9727 8H0V11.0979H14.8239C15.4534 11.0979 15.957 11.5911 15.957 12.2076C15.957 12.8241 15.4534 13.3173 14.8239 13.3173H0V21.6709H3.16307V16.4152H15.9727C17.7195 16.4152 19.1358 15.0281 19.1358 13.3173V11.0979C19.1201 9.38712 17.7195 8 15.9727 8Z"
                                    fill="currentColor" />
                            </g>
                        </g>
                    </g>
                    <defs>
                        <clipPath id="clip0_1243_481">
                            <rect width="120" height="13.6709" fill="white" transform="translate(0 8)" />
                        </clipPath>
                    </defs>
                </svg>
            </a>

            <!-- 导航菜单 - 在容器宽度足够时显示 -->
            <div class="hidden lg:flex self-stretch flex-shrink-0 flex-row items-start justify-start h-full">
                <div class="self-stretch flex-shrink-0 flex flex-row items-start justify-start py-0 px-3 sm:px-4 md:px-6 gap-4 sm:gap-6 md:gap-10 h-full">
                    <div class="group self-stretch flex flex-col items-start justify-center h-full" 
                         @mouseenter="isMenuHovered = true; activeMenuSection = 'solutions'">
                        <div class="flex-shrink-0 rounded-8xs flex flex-row items-center justify-start gap-2.5">
                            <span class="relative leading-[24px] font-medium whitespace-nowrap transition-colors duration-200">Solutions</span>
                            <!-- 内联SVG箭头 -->
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" 
                                 :class="activeMenuSection === 'solutions' ? 'transform rotate-180' : ''"
                                 class="transition-transform duration-200">
                                <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            

<!-- 解决方案下拉菜单，让元素超出其定位父元素范围，同时保持居中对齐-->
<div x-data="{ activeCategory: 'Voice Interface' }" 
     @mouseenter="window.navbarState.isMenuHovered = true; window.navbarState.activeMenuSection = 'solutions'"
     :class="{ 
        'opacity-0 invisible': !(window.navbarState && window.navbarState.activeMenuSection === 'solutions'),
        'opacity-100 visible': window.navbarState && window.navbarState.activeMenuSection === 'solutions'
     }"
     class="fixed left-0 right-0 w-screen transition-all duration-200 ease-in-out z-50 dropdown-menu hidden-initially">
    <div :class="isDarkTheme ? 'bg-dark-7' : 'bg-white'" class="w-full shadow-lg">
        <div class="max-w-[1440px] mx-auto h-[464px] flex flex-col items-start justify-start py-6 px-12 box-border text-left text-body-small font-body-medium-medium"
             :class="isDarkTheme ? 'text-white' : 'text-dark'">
            <div class="flex-1 w-full grid grid-cols-12 gap-8">
                <!-- 左侧菜单 -->
                <div class="col-span-3 pr-4 h-full relative">
                    <div class="flex flex-col h-full space-y-6">
                        <div @mouseenter="activeCategory = 'Voice Interface'" 
                        class="flex items-center justify-between cursor-pointer transition-colors duration-200" 
                        :class="[
                            activeCategory === 'Voice Interface' 
                                ? (isDarkTheme ? 'text-white' : 'text-dark') 
                                : (isDarkTheme ? 'text-gray-400' : 'text-dark-5')
                        ]">
                            <h6>Voice Interface</h6>
                            <svg x-show="activeCategory === 'Voice Interface'" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.25 4.5L15.75 12L8.25 19.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div @mouseenter="activeCategory = 'Professional Audio'" 
                             class="flex items-center justify-between cursor-pointer transition-colors duration-200" 
                             :class="[
                                activeCategory === 'Professional Audio' 
                                    ? (isDarkTheme ? 'text-white' : 'text-dark') 
                                    : (isDarkTheme ? 'text-gray-400' : 'text-dark-5')
                            ]">
                            <h6>Professional Audio</h6>
                            <svg x-show="activeCategory === 'Professional Audio'" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.25 4.5L15.75 12L8.25 19.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div @mouseenter="activeCategory = 'Consumers'" 
                             class="flex items-center justify-between cursor-pointer transition-colors duration-200" 
                             :class="[
                                activeCategory === 'Consumers' 
                                    ? (isDarkTheme ? 'text-white' : 'text-dark') 
                                    : (isDarkTheme ? 'text-gray-400' : 'text-dark-5')
                            ]">
                            <h6>Consumers</h6>
                            <svg x-show="activeCategory === 'Consumers'" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.25 4.5L15.75 12L8.25 19.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div @mouseenter="activeCategory = 'Software'" 
                             class="flex items-center justify-between cursor-pointer transition-colors duration-200" 
                             :class="[
                                activeCategory === 'Software' 
                                    ? (isDarkTheme ? 'text-white' : 'text-dark') 
                                    : (isDarkTheme ? 'text-gray-400' : 'text-dark-5')
                            ]">
                            <h6>Software</h6>
                            <svg x-show="activeCategory === 'Software'" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.25 4.5L15.75 12L8.25 19.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <!-- 底部链接容器 -->
                        <div class="absolute bottom-0 left-0 w-full pt-6" :class="isDarkTheme ? 'bg-dark-7' : 'bg-white'">
                            <div class="flex flex-col items-start gap-y-1 text-left text-body-small font-body-small-medium" 
                                :class="isDarkTheme ? 'text-white' : 'text-black'">
                                <div class="relative leading-[24px] font-medium"><a href="/en/solutions/" class="hover-underline-expand text-body-small">All Solutions</a></div>
                                <!-- <div class="relative leading-[24px] font-medium"><span class="hover-underline-expand text-body-small">Coming Soon</span></div> -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 右侧内容 -->
                <!-- Voice Interface -->
                <template x-if="activeCategory === 'Voice Interface'">
                    <div class="col-span-9 grid grid-cols-9 gap-8">
                        <div :class="isDarkTheme ? 'border-dark-5' : 'border-gainsboro'" class="col-span-4 border-solid box-border">
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">Conference Voice</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><a href="/en/solutions/digitally-variable-directional-microphone/" class="hover-underline-expand">Digitally Variable Directional Microphone</a></div></li>
                                <li><div class="relative leading-[24px] font-medium"><a href="/en/solutions/dual-mic-voice-interface/" class="hover-underline-expand">Dual-mic Voice Interface</a></div></li>
                                <li><div class="relative leading-[24px] font-medium"><a href="/en/solutions/wireless-daisy-chain-speakerphone/" class="hover-underline-expand">Wireless Daisy Chain Speakerphone</a></div></li>
                                <li><div class="relative leading-[24px] font-medium"><a href="/en/solutions/sound-reinforcement/" class="hover-underline-expand">Sound Reinforcement System</a></div></li>
                            </ul>
                        </div>
                        <div class="col-span-4">
                            <!-- <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">Speech Recognition</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Offline AI Keyword Spotting</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Offline ASR</span></div></li>
                            </ul> -->
                        </div>
                        <div class="col-span-1">&nbsp;</div>
                    </div>
                </template>
                <!-- Professional Audio -->
                <template x-if="activeCategory === 'Professional Audio'">
                    <div class="col-span-9 grid grid-cols-9 gap-8">
                        <div :class="isDarkTheme ? 'border-dark-5' : 'border-gainsboro'" class="col-span-3 border-solid box-border">
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">Audio Interfaces</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><a href="/en/solutions/usb-audio-interface/" class="hover-underline-expand">USB Audio Interface</a></div></li>
                                <!-- <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Audio Interface Module</span></div></li> -->
                            </ul>
                        </div>
                        
                        <!-- <div class="col-span-3">
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">HiFi</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Desktop DAC/AMP</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Portable DAC/AMP</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Wireless Amplifier</span></div></li>
                            </ul>
                        </div> -->
                    </div>
                </template>
                <!-- Consumers -->
                <template x-if="activeCategory === 'Consumers'">
                    <div class="col-span-9 grid grid-cols-9 gap-8">
                        <div :class="isDarkTheme ? 'border-dark-5' : 'border-gainsboro'" class="col-span-3 border-solid box-border">
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">Microphone</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><a href="/en/solutions/usb-ai-microphone/" class="hover-underline-expand">AI Noise Removal USB Microphone</a></div></li>
                                <!-- <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Wireless Microphone</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Wireless Microphone (NearLink)</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Variable Pattern Microphone</span></div></li> -->
                            </ul>
                        </div>
                        <!-- <div :class="isDarkTheme ? 'border-dark-5' : 'border-gainsboro'" class="border-r-[1px] col-span-3 border-solid box-border">
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">Headphones</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Gaming Headset</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">TWS Earphone</span></div></li>
                            </ul>
                        </div>
                        <div class="col-span-3">
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">Accessories</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">AI-Powered Vocal Remover</span></div></li>
                            </ul>
                        </div> -->
                    </div>
                </template>
                <!-- Software -->
                <template x-if="activeCategory === 'Software'">
                    <div class="col-span-9 grid grid-cols-9 gap-8">
                        <div :class="isDarkTheme ? 'border-dark-5' : 'border-gainsboro'" class="col-span-3 border-solid box-border">
                            <!-- <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">Metaverse</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Spatial Audio Recording</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Spatial Audio Rendering</span></div></li>
                            </ul> -->
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">AI Audio</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><a href="/en/solutions/algorithms/ai-noise-reduction/" class="hover-underline-expand">AI Noise Remover</a></div></li>
                                <!-- <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Text to Speech</span></div></li> -->
                                <!-- <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Voice Changer</span></div></li> -->
                            </ul>
                        </div>
                        <!-- <div :class="isDarkTheme ? 'border-dark-5' : 'border-gainsboro'" class="border-r-[1px] col-span-3 border-solid box-border">
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">Apps</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Pawpaw Recorder</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Mic Array Manager</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Equalizer</span></div></li>
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">DFU Tool</span></div></li>
                            </ul>
                        </div>
                        <div class="col-span-3">
                            <div class="font-medium text-body-small mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-5'">A2B</div>
                            <ul class="space-y-3">
                                <li><div class="relative leading-[24px] font-medium"><span class="hover-underline-expand">Car Audio System</span></div></li>
                            </ul>
                        </div> -->
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 为下拉菜单项添加悬停效果
    const menuItems = document.querySelectorAll('.dropdown-menu-item');
    
    menuItems.forEach(item => {
        item.addEventListener('mouseenter', function() {
            if (window.navbarState?.isDarkTheme) {
                this.classList.add('bg-dark-5');
            } else {
                this.classList.add('bg-gray-100');
            }
        });
        
        item.addEventListener('mouseleave', function() {
            this.classList.remove('bg-gray-100', 'bg-dark-5');
        });
    });
    
    // 为卡片添加悬停效果
    const cards = document.querySelectorAll('.dropdown-card');
    
    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            if (window.navbarState?.isDarkTheme) {
                this.classList.add('bg-dark-5');
            } else {
                this.classList.add('bg-gray-100');
            }
        });
        
        card.addEventListener('mouseleave', function() {
            this.classList.remove('bg-gray-100', 'bg-dark-5');
        });
    });
});
</script>
                        </div>
                    </div>
                    <div class="group self-stretch flex flex-col items-start justify-center h-full" 
                         @mouseenter="isMenuHovered = true; activeMenuSection = 'application'">
                        <div class="flex-shrink-0 rounded-8xs flex flex-row items-center justify-start gap-2.5">
                            <span class="relative leading-[24px] font-medium whitespace-nowrap transition-colors duration-200">Application</span>
                            <!-- 内联SVG箭头 -->
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" 
                                 :class="activeMenuSection === 'application' ? 'transform rotate-180' : ''"
                                 class="transition-transform duration-200">
                                <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            



    <!-- 应用场景下拉菜单，让元素超出其定位父元素范围，同时保持居中对齐 -->
    <div @mouseenter="window.navbarState.isMenuHovered = true; window.navbarState.activeMenuSection = 'application'" 
         :class="{ 
            'opacity-0 invisible': !(window.navbarState && window.navbarState.activeMenuSection === 'application'),
            'opacity-100 visible': window.navbarState && window.navbarState.activeMenuSection === 'application'
         }"
         class="fixed left-0 right-0 w-screen transition-all duration-200 ease-in-out z-50 dropdown-menu hidden-initially">
        <div :class="isDarkTheme ? 'bg-dark-7' : 'bg-white'" class="w-full shadow-lg">
            <div class="max-w-[1440px] mx-auto flex flex-col items-center justify-start py-6 px-12 box-border text-left text-body-small"
                 :class="isDarkTheme ? 'text-white' : 'text-dark-5'">
                <div class="w-full grid grid-cols-12 flex-row items-start justify-center gap-8">
                    <!-- 第一列 -->
                    <div class="col-span-4 flex flex-col items-start justify-start gap-4">
                        <div class="flex flex-row items-center justify-center">
                            <div class="leading-[22px] font-medium">Application</div>
                        </div>
                        <div class="w-full flex flex-col items-start justify-start text-body-medium"
                             :class="isDarkTheme ? 'text-white' : 'text-dark'">
                            <!-- <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">Consumer Electronics</span>
                                </div>
                            </div> -->
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <a class="hover-underline-expand" href="/en/applications/conference-meeting/">Conference</a>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <a class="hover-underline-expand" href="/en/applications/live-streaming/">Live Streaming</a>
                                </div>
                            </div>
                            <!-- <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">Agriculture</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">Sports</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">Education</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">Smart Home</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">Automotive</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">Robotics</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">Entertainment</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">Media Production</span>
                                </div>
                            </div> -->
                        </div>
                    </div>

                    <!-- 第二列 -->
                    <!-- <div class="col-span-3 flex flex-col items-start justify-start gap-4">
                        <div class="w-[88px] h-[22px] flex flex-row items-center justify-center">
                            <div class="leading-[22px] font-medium hidden">By Industries</div>
                        </div>
                        <div class="w-full flex flex-col items-start justify-start text-body-medium"
                             :class="isDarkTheme ? 'text-white' : 'text-dark'">
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">AR/VR</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">Metaverse</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">Environment</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">Healthcare</span>
                                </div>
                            </div>
                            <div class="w-full pb-3">
                                <div class="leading-[24px] font-medium">
                                    <span class="hover-underline-expand">Baby/Pet</span>
                                </div>
                            </div>
                        </div>
                    </div> -->




                    <!-- 第三列 - Service卡片 -->
                    <div class="col-span-4 flex flex-col items-start justify-start text-body-medium">
                        <a href="/en/about/#services" class="w-full">
                            <div class="w-full rounded-3xl h-[416px] flex flex-col items-start justify-start p-7 box-border gap-2 bg-center bg-cover bg-no-repeat relative shadow-2xl" style="background-image: url('/static/assets/images/homepages/navbar/service.jpg')">
                                <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-black via-black/50 to-transparent rounded-t-3xl"></div>
                                <div class="w-full flex flex-row items-start justify-between text-gray-50 relative z-10">
                                    <b class="leading-[24px]">Our Services</b>
                                    <b class="leading-[24px] font-bold">↗</b>
                                </div>
                                <div class="text-body-small z-10">
                                    <div class="leading-[22px] font-medium text-gray-50">We offer complete services from design to manufacturing, including prototype production, circuit board design, manufacturing, and testing.</div>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- 第四列 - Case Studies卡片 -->
                    
                    <div class="col-span-4 flex flex-col items-start justify-start text-body-medium">
                        <a href="/en/news/category/case-studies/" class="w-full">
                            <div class="w-full rounded-3xl h-[416px] flex flex-col items-start justify-start p-7 box-border gap-2 bg-center bg-cover bg-no-repeat relative shadow-2xl" 
                                    style="background-image: url('/static/assets/images/homepages/navbar/casestudy.jpg')">
                                <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-black via-black/50 to-transparent rounded-t-3xl"></div>
                                <div class="w-full flex flex-row items-start justify-between text-gray-50 relative z-10">
                                    <b class="leading-[24px]">Case Studies</b>
                                    <b class="leading-[24px] font-bold">↗</b>
                                </div>
                                <div class="text-body-small z-10">
                                    <div class="leading-[22px] font-medium text-gray-50">Browse all cases we and our clients went through.</div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
                        </div>
                    </div>
                    <div class="group self-stretch flex flex-col items-start justify-center h-full" 
                         @mouseenter="isMenuHovered = true; activeMenuSection = 'aboutus'">
                        <div class="flex-shrink-0 rounded-8xs flex flex-row items-center justify-start gap-2.5">
                            <span class="relative leading-[24px] font-medium whitespace-nowrap transition-colors duration-200">About</span>
                            <!-- 内联SVG箭头 -->
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" 
                                 :class="activeMenuSection === 'aboutus' ? 'transform rotate-180' : ''"
                                 class="transition-transform duration-200">
                                <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            

<!-- 关于我们下拉菜单，让元素超出其定位父元素范围，同时保持居中对齐 -->
<div @mouseenter="window.navbarState.isMenuHovered = true; window.navbarState.activeMenuSection = 'aboutus'" 
     :class="{ 
        'opacity-0 invisible': !(window.navbarState && window.navbarState.activeMenuSection === 'aboutus'),
        'opacity-100 visible': window.navbarState && window.navbarState.activeMenuSection === 'aboutus'
     }"
     class="fixed left-0 right-0 w-screen transition-all duration-200 ease-in-out z-50 dropdown-menu hidden-initially">
    <div :class="isDarkTheme ? 'bg-dark-7' : 'bg-white'" class="w-full shadow-lg">
        <div class="max-w-[1440px] mx-auto flex flex-col items-center justify-start py-6 px-12 box-border text-left text-body-small"
             :class="isDarkTheme ? 'text-white' : 'text-dark-5'">
            <div class="w-full grid grid-cols-12 items-start gap-8">
                <!-- 第一列 - 关于我们 -->
                <div class="col-span-4 flex flex-col items-start justify-start gap-4">
                    <div class="flex flex-row items-center justify-center">
                        <div class="leading-[22px] font-medium">Company</div>
                    </div>
                    <div class="w-full flex flex-col items-start justify-start text-body-medium"
                         :class="isDarkTheme ? 'text-white' : 'text-dark'">
                        <div class="w-full pb-3">
                            <div class="leading-[24px] font-medium">
                                <a class="hover-underline-expand" href="/en/about/">About Pawpaw</a>
                            </div>
                        </div>
                        <div class="w-full pb-3">
                            <div class="leading-[24px] font-medium">
                                <a class="hover-underline-expand" href="/en/about/careers/">Careers</a>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- 第四列 - 创新历程 -->
                <div class="col-span-4 flex flex-col items-start justify-start text-body-medium">
                    <a href="/en/about/#milestones" class="w-full">
                        <div class="w-full rounded-3xl h-[416px] flex flex-col items-start justify-start p-7 box-border gap-2 bg-center bg-cover bg-no-repeat relative shadow-2xl" style="background-image: url('/static/assets/images/homepages/navbar/innovation_journey.jpg')">
                            <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-black via-black/50 to-transparent rounded-t-3xl"></div>
                            <div class="w-full flex flex-row items-start justify-between text-gray-50 relative z-10">
                                <b class="leading-[24px]">Innovation Journey</b>
                                <b class="leading-[24px] font-bold">↗</b>
                            </div>
                            <div class="text-body-small z-10">
                                <div class="leading-[22px] font-medium text-gray-50">Our timeline of breakthroughs and innovations in audio technology.</div>
                            </div>
                        </div>
                    </a>
                </div>

                
                <!-- 第三列 - 联系我们 -->
                <div class="col-span-4 flex flex-col items-start justify-start text-body-medium">
                    <a href="/en/support/" class="w-full">
                        <div class="w-full rounded-3xl h-[416px] flex flex-col items-start justify-start p-7 box-border gap-2 bg-center bg-cover bg-no-repeat relative shadow-2xl" style="background-image: url('/static/assets/images/homepages/navbar/contact.jpg')">
                            <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-black via-black/50 to-transparent rounded-t-3xl"></div>
                            <div class="w-full flex flex-row items-start justify-between text-gray-50 relative z-10">
                            <b class="leading-[24px]">Contact Us</b>
                            <b class="leading-[24px] font-bold">↗</b>
                        </div>
                        <div class="text-body-small z-10">
                            <div class="leading-[22px] font-medium text-gray-50">We offer complete services from design to manufacturing, including prototype production, circuit board design, manufacturing, and testing.</div>
                        </div>
                    </div>
                </a>
                </div>
            </div>
        </div>
    </div>
</div>
                        </div>
                    </div>
                    <div class="group self-stretch flex flex-col items-start justify-center h-full" 
                         @mouseenter="isMenuHovered = true; activeMenuSection = 'media'">
                        <div class="flex-shrink-0 rounded-8xs flex flex-row items-center justify-start gap-2.5">
                            <span class="relative leading-[24px] font-medium whitespace-nowrap transition-colors duration-200">Media</span>
                            <!-- 内联SVG箭头 -->
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" 
                                 :class="activeMenuSection === 'media' ? 'transform rotate-180' : ''"
                                 class="transition-transform duration-200">
                                <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            



<!-- 媒体中心下拉菜单 -->
<div @mouseenter="window.navbarState.isMenuHovered = true; window.navbarState.activeMenuSection = 'media'" 
     :class="{ 
        'opacity-0 invisible': !(window.navbarState && window.navbarState.activeMenuSection === 'media'),
        'opacity-100 visible': window.navbarState && window.navbarState.activeMenuSection === 'media'
     }"
     class="fixed left-0 right-0 w-screen transition-all duration-200 ease-in-out z-50 dropdown-menu hidden-initially">
    <div :class="isDarkTheme ? 'bg-dark-7' : 'bg-white'" class="w-full shadow-lg">
        <div class="max-w-[1440px] mx-auto flex flex-col items-center justify-start py-6 px-12 box-border text-left text-body-small"
             :class="isDarkTheme ? 'text-white' : 'text-dark-5'">
            <div class="w-full grid grid-cols-12 flex-row items-start justify-center gap-8">
                <!-- 第一列 - 博客和新闻 -->
                <div class="col-span-4 flex flex-col items-start justify-start gap-4">
                    <div class="flex flex-row items-center justify-center">
                        <div class="leading-[22px] font-medium">Blog & News</div>
                    </div>
                    <div class="w-full flex flex-col items-start justify-start text-body-medium"
                         :class="isDarkTheme ? 'text-white' : 'text-dark'">
                        <div class="w-full pb-3">
                            <div class="font-medium">
                                <a class="hover-underline-expand" href="/en/news/">Latest News</a>
                            </div>
                        </div>
                        <div class="w-full pb-3">
                            <div class="font-medium">
                                <a class="hover-underline-expand" href="/en/news/category/blog/">Blog</a>
                            </div>
                        </div>
                        <!-- <div class="w-full pb-3">
                            <div class="font-medium">
                                <a class="hover-underline-expand" href="#">Press Kit</a>
                            </div>
                        </div>
                        <div class="w-full pb-3">
                            <div class="font-medium">
                                <a class="hover-underline-expand" href="#">Media Contact</a>
                            </div>
                        </div> -->
                    </div>
                </div>

                
                

                <!-- 第二列 - 精选新闻卡片 -->
                <div class="col-span-4 flex flex-col items-start justify-start text-body-medium">
                    <a href="/en/news/article/2025-03-27-gas-2025-award/" class="w-full block">
                        <div class="rounded-3xl h-[416px] w-full flex flex-col items-start justify-start p-7 box-border gap-2 bg-center bg-cover bg-no-repeat hover:shadow-lg transition-shadow duration-300 relative shadow-2xl" 
                             style="background-image: url('/media/news_covers/mmexport1008b8624a0c4acd378bf871ebd3e947_1743044932729_1.jpeg')">
                             <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-black via-black/50 to-transparent rounded-t-3xl"></div>
                             <div class="w-full flex flex-row items-start justify-between text-gray-50 relative z-10">
                                <b class="leading-[24px]">Featured News </b>
                                <b class="leading-[24px] font-bold">↗</b>
                            </div>
                            <div class="text-body-small z-10">
                                
                                <div class="text-body-small text-white mb-2">Pawpaw Technology Won The &quot;GAS Consumer Electroni…</div>
                                
                            </div>
                        </div>
                    </a>
                </div>

                <!-- 第三列 - 精选博客卡片 -->
                <div class="col-span-4 flex flex-col items-start justify-start text-body-medium">
                    <a href="/en/news/article/2025-06-20-what-is-digitally-variable-directional-microphone/" class="w-full block">
                        <div class="rounded-3xl h-[416px] w-full flex flex-col items-start justify-start p-7 box-border gap-2 bg-center bg-cover bg-no-repeat hover:shadow-lg transition-shadow duration-300 relative shadow-2xl" 
                             style="background-image: url('/media/news_covers/Linkedin_Post_DVDM_cover.jpg')">
                             <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-black via-black/50 to-transparent rounded-t-3xl"></div>
                            <div class="w-full flex flex-row items-start justify-between text-gray-50 relative z-10">
                                <b class="leading-[24px]">Featured Blog </b>
                                <b class="leading-[24px] font-bold">↗</b>
                            </div>
                            <div class="text-body-small z-10">
                                
                                <div class="text-body-small text-white mb-2">What is Digitally Variable Directional Microphone?</div>
                                
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧图标和按钮 -->
        <div class="flex flex-row items-center justify-end gap-4 md:gap-6">
            <!-- 搜索按钮 -->
            <button class="flex-shrink-0 hidden md:flex w-6 min-w-[24px] relative btn-reset items-center justify-center hover:opacity-70 transition-opacity" @click="triggerSearch()">
                <!-- 内联SVG搜索图标 -->
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21 21L15.0001 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>

            <!-- 全球图标 - 语言切换 -->
            <div class="flex-shrink-0 hidden md:block relative" x-data="{ langMenuOpen: false }">
                <button @click="langMenuOpen = !langMenuOpen" class="w-6 min-w-[24px] relative btn-reset flex items-center">
                    <!-- 内联SVG全球图标 -->
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M3.6001 9H20.4001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M3.6001 15H20.4001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M12 21C13.6569 21 15 16.9706 15 12C15 7.02944 13.6569 3 12 3C10.3431 3 9 7.02944 9 12C9 16.9706 10.3431 21 12 21Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
                
                <!-- 语言切换下拉菜单 -->
                <div x-show="langMenuOpen" 
                     @click.away="langMenuOpen = false"
                     x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 translate-y-1"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     x-transition:leave="transition ease-in duration-150"
                     x-transition:leave-start="opacity-100 translate-y-0"
                     x-transition:leave-end="opacity-0 translate-y-1"
                     :class="isDarkTheme ? 'bg-dark-7 shadow-[0_0_8px_rgba(0,0,0,0.3)]' : 'bg-white shadow-[0_0_8px_rgba(0,0,0,0.1)]'"
                     class="absolute left-1/2 -translate-x-1/2 mt-2 w-32 rounded-md z-50 hidden-initially">
                    
                    
                    
                    <div>
                        
                        <a href="/zh-hans/" 
                           :class="isDarkTheme ? 'hover:bg-dark-5 hover:text-white text-gray-300' : 'hover:bg-gray-100 hover:text-gray-900 text-gray-700'"
                           class="rounded-md language-link block px-4 py-2 text-body-small ">
                            简体中文
                        </a>
                        
                        <a href="/en/" 
                           :class="isDarkTheme ? 'hover:bg-dark-5 hover:text-white text-gray-300' : 'hover:bg-gray-100 hover:text-gray-900 text-gray-700'"
                           class="rounded-md language-link block px-4 py-2 text-body-small  font-bold text-primary ">
                            English
                        </a>
                        
                    </div>
                </div>
            </div>

            <!-- Contact Us 按钮 -->
            <a href="/en/support/" class="flex-shrink-0 relative rounded-full bg-primary hover:bg-primary-hover flex flex-row items-center justify-center py-2 px-4 sm:px-6 box-border text-center text-body-small sm:text-body-medium text-white transition-colors duration-200">
                <span class="relative leading-[22px] sm:leading-[24px] font-semibold">Contact Us</span>
            </a>

            <!-- 在容器宽度不够时显示汉堡菜单 -->
            <button class="flex-shrink-0 lg:hidden min-w-[24px] px-2 relative btn-reset" @click="toggleMobileMenu()">
                <!-- 内联SVG菜单图标 -->
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 12H21M3 6H21M3 18H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        </div>
    </div>

    <!-- 毛玻璃蒙板，导航菜单悬停时显示 -->
    <div x-show="isMenuHovered" 
         x-transition:enter="transition-all duration-300 ease-in-out"
         x-transition:enter-start="opacity-0 backdrop-blur-none"
         x-transition:enter-end="opacity-100 backdrop-blur-md"
         x-transition:leave="transition-all duration-300 ease-in-out"
         x-transition:leave-start="opacity-100 backdrop-blur-md"
         x-transition:leave-end="opacity-0 backdrop-blur-none"
         :class="isDarkTheme ? 'bg-black/30' : 'bg-white/30 dark:bg-dark/30'"
         class="fixed inset-0 backdrop-blur-md z-40 pointer-events-none hidden-initially"
         style="top: 64px;">
    </div>

    <!-- 引入新的移动导航组件 -->
    


<!-- 移动导航组件 - 分层结构 -->
<div x-data="{ 
    currentLevel: 'L1',
    currentSection: null,
    currentSubSection: null,
    langOpen: false,
    isDarkTheme: typeof window.navbarDarkTheme === 'boolean' ? window.navbarDarkTheme : false
}" 
    x-show="mobileMenuOpen"
    x-trap.noscroll="mobileMenuOpen"
    id="mobile-menu"
    :class="isDarkTheme ? 'bg-black' : 'bg-white'"
    class="fixed inset-0 z-50 lg:hidden overflow-hidden hidden-initially"
    x-transition:enter="transition ease-out duration-300 transform"
    x-transition:enter-start="translate-x-full"
    x-transition:enter-end="translate-x-0"
    x-transition:leave="transition ease-in duration-200 transform"
    x-transition:leave-start="translate-x-0"
    x-transition:leave-end="translate-x-full">

    <!-- 顶部导航栏 -->
    <div class="sticky top-0 left-0 right-0 z-10 h-16 flex items-center justify-between p-6"
         :class="isDarkTheme ? 'border-dark-5 text-white' : 'border-gray-200 text-primary'">
        
        <!-- 左侧: Logo/返回按钮 -->
        <div class="flex items-center justify-start">
            <!-- L1层级显示Logo -->
            <template x-if="currentLevel === 'L1'">
                <a href="/en/" class="block py-[6.4px] focus:outline-none">
                    <svg width="96" height="24" viewBox="0 0 120 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g id="Logo">
                            <g id="Pawpaw_LOGO_sRGB 2" clip-path="url(#clip0_1243_481)">
                                <g id="Layer1">
                                    <path id="Vector" fill-rule="evenodd" clip-rule="evenodd"
                                        d="M90.4859 8H87.2913L85.4029 11.0979H88.8965C89.5259 11.0979 90.0295 11.5911 90.0295 12.2076C90.0295 12.8241 89.5259 13.3173 88.8965 13.3173H84.0338L78.9352 21.6709H82.6034L85.8136 16.3998H91.9447L95.1549 21.6709H98.8247L90.4859 8Z"
                                        fill="currentColor" />
                                    <path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd"
                                        d="M77.1097 8H61.137V11.0979H75.9609C76.5904 11.0979 77.094 11.5911 77.094 12.2076C77.094 12.8241 76.5904 13.3173 75.9609 13.3173H61.137V21.6709H64.3001V16.4152H77.1097C78.8565 16.4152 80.2728 15.0281 80.2728 13.3173V11.0979C80.257 9.38712 78.8565 8 77.1097 8Z"
                                        fill="currentColor" />
                                    <path id="Vector_3" fill-rule="evenodd" clip-rule="evenodd"
                                        d="M55.6921 8H58.8552V20.5612C58.8552 21.1777 58.3516 21.6709 57.7221 21.6709H54.26L48.9096 12.596L43.5607 21.6709H38.9797V8H42.1428V17.881L47.9654 8H49.8538L55.6921 17.9041V8Z"
                                        fill="currentColor" />
                                    <path id="Vector_4" fill-rule="evenodd" clip-rule="evenodd"
                                        d="M116.837 8H120V20.5612C120 21.1777 119.496 21.6709 118.867 21.6709H115.405L110.054 12.596L104.706 21.6709H100.125V8H103.288V17.881L109.11 8H110.999L116.837 17.9041V8Z"
                                        fill="currentColor" />
                                    <path id="Vector_5" fill-rule="evenodd" clip-rule="evenodd"
                                        d="M29.3489 8H26.1544L24.266 11.0979H27.7595C28.389 11.0979 28.8925 11.5911 28.8925 12.2076C28.8925 12.8241 28.389 13.3173 27.7595 13.3173H22.8969L17.7982 21.6709H21.4664L24.6767 16.3998H30.8077L34.018 21.6709H37.6878L29.3489 8Z"
                                        fill="currentColor" />
                                    <path id="Vector_6" fill-rule="evenodd" clip-rule="evenodd"
                                        d="M15.9727 8H0V11.0979H14.8239C15.4534 11.0979 15.957 11.5911 15.957 12.2076C15.957 12.8241 15.4534 13.3173 14.8239 13.3173H0V21.6709H3.16307V16.4152H15.9727C17.7195 16.4152 19.1358 15.0281 19.1358 13.3173V11.0979C19.1201 9.38712 17.7195 8 15.9727 8Z"
                                        fill="currentColor" />
                                </g>
                            </g>
                        </g>
                        <defs>
                            <clipPath id="clip0_1243_481">
                                <rect width="120" height="13.6709" fill="white" transform="translate(0 8)" />
                            </clipPath>
                        </defs>
                    </svg>
                </a>
            </template>
            
            <!-- L2及以上层级显示返回箭头 -->
            <template x-if="currentLevel !== 'L1'">
                <button @click="
                    if(currentLevel === 'L3') {
                        currentLevel = 'L2';
                        currentSubSection = null;
                    } else {
                        currentLevel = 'L1';
                        currentSection = null;
                    }" 
                    class="btn-reset py-[6.4px] text-dark">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 19L8 12L15 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </template>
        </div>
        
        <!-- 右侧: 关闭按钮 -->
        <div class="flex items-center justify-end">
            <button @click="toggleMobileMenu()" class="btn-reset py-[6.4px] text-dark">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        </div>
    </div>

    <!-- 内容区域 - 可滚动 -->
    <div class="relative overflow-y-auto h-[calc(100%-64px)] pb-20 px-6" id="mobile-menu-content">
        <!-- 标题 -->
        <div class="text-[24px] leading-[30px] font-semibold"
        :class="currentLevel === 'L2' || currentLevel === 'L3' ? 'pt-4' : 'pt-0'">
            <!-- 不同层级显示不同标题 -->
            <template x-if="currentLevel === 'L2' && currentSection === 'solutions'">
                <span>Solutions</span>
            </template>
            <template x-if="currentLevel === 'L2' && currentSection === 'application'">
                <span>Application</span>
            </template>
            <template x-if="currentLevel === 'L2' && currentSection === 'aboutus'">
                <span>About</span>
            </template>
            <template x-if="currentLevel === 'L2' && currentSection === 'media'">
                <span>Media</span>
            </template>
            <!-- L3层级的标题 - 解决方案子类别 -->
            <template x-if="currentLevel === 'L3' && currentSection === 'solutions'">
                <span x-text="
                    currentSubSection === 'voice_interface' ? 'Voice Interface' :
                    currentSubSection === 'professional_audio' ? 'Professional Audio' :
                    currentSubSection === 'consumers' ? 'Consumers' :
                    currentSubSection === 'software' ? 'Software' : ''
                "></span>
            </template>
        </div>

        <!-- 导入各层级菜单 -->
        <!-- Level 1 Wrapper -->
        <div x-show="currentLevel === 'L1'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            

<!-- L1 主菜单 -->
<div x-show="currentLevel === 'L1'" class="my-1 mb-6">
    <div class="flex flex-col">
        <!-- 解决方案 -->
        <button @click="currentLevel = 'L2'; currentSection = 'solutions'" 
                class="flex items-center justify-between w-full btn-reset my-3">
            <span class="text-[24px] leading-[30px] font-semibold" :class="isDarkTheme ? 'text-white' : 'text-dark'">Solutions</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <!-- 应用场景 -->
        <button @click="currentLevel = 'L2'; currentSection = 'application'" 
                class="flex items-center justify-between w-full btn-reset my-3">
            <span class="text-[24px] leading-[30px] font-semibold" :class="isDarkTheme ? 'text-white' : 'text-dark'">Application</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <!-- 关于我们 -->
        <button @click="currentLevel = 'L2'; currentSection = 'aboutus'" 
                class="flex items-center justify-between w-full btn-reset my-3">
            <span class="text-[24px] leading-[30px] font-semibold" :class="isDarkTheme ? 'text-white' : 'text-dark'">About</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <!-- 媒体中心 -->
        <button @click="currentLevel = 'L2'; currentSection = 'media'" 
                class="flex items-center justify-between w-full btn-reset my-3">
            <span class="text-[24px] leading-[30px] font-semibold" :class="isDarkTheme ? 'text-white' : 'text-dark'">Media</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <div class="h-[1px] w-full my-6" :class="isDarkTheme ? 'bg-gray-800' : 'bg-gray-200'"></div>
        
        <!-- 搜索 -->
        <div class="my-3">
            <button @click="triggerSearch(); toggleMobileMenu();" 
                    class="flex items-center gap-3 btn-reset">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21 21L15.0001 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span class="text-body-large" :class="isDarkTheme ? 'text-white' : 'text-dark'">Search</span>
            </button>
        </div>
        
        <!-- 语言 -->
        <div class="my-3">
            <button @click="langOpen = !langOpen" 
                    class="flex items-center justify-between w-full btn-reset mb-3">
                <div class="flex items-center gap-3">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M3.6001 9H20.4001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M3.6001 15H20.4001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M12 21C13.6569 21 15 16.9706 15 12C15 7.02944 13.6569 3 12 3C10.3431 3 9 7.02944 9 12C9 16.9706 10.3431 21 12 21Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <span class="text-body-large" :class="isDarkTheme ? 'text-white' : 'text-dark'">Language</span>
                </div>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" 
                     :class="langOpen ? 'rotate-180' : ''"
                     class="transition-transform duration-200">
                    <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
            
            <div x-show="langOpen" x-transition 
                 class="pl-8 flex flex-col pt-2 hidden-initially">
                
                
                
                
                <a href="/zh-hans/" 
                   class="language-link text-body-medium py-2 flex items-center"
                   :class="isDarkTheme ? 'text-gray-300' : 'text-gray-700'">
                    简体中文
                    
                </a>
                
                <a href="/en/" 
                   class="language-link text-body-medium py-2 flex items-center font-semibold"
                   :class="isDarkTheme ? 'text-gray-300' : 'text-gray-700'">
                    English
                    
                    <svg width="16" height="16" viewBox="0 0 24 24" class="ml-2" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.5 12.75L10.5 18.75L19.5 5.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    
                </a>
                
            </div>
        </div>
    </div>
</div> 
        </div>

        <!-- Level 2 Solutions Wrapper -->
        <div x-show="currentLevel === 'L2' && currentSection === 'solutions'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            

<!-- L2 解决方案菜单 -->
<div x-show="currentLevel === 'L2' && currentSection === 'solutions'" class="mt-6 mb-12">
    <div class="flex flex-col">
        <!-- 语音接口 -->
        <button @click="currentLevel = 'L3'; currentSubSection = 'voice_interface'" 
                class="flex items-center justify-between w-full btn-reset my-3">
            <span class="text-[30px] leading-[38px] font-bold" :class="isDarkTheme ? 'text-white' : 'text-dark'">Voice Interface</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <!-- 专业音频 -->
        <button @click="currentLevel = 'L3'; currentSubSection = 'professional_audio'" 
                class="flex items-center justify-between w-full btn-reset my-3">
            <span class="text-[30px] leading-[38px] font-bold" :class="isDarkTheme ? 'text-white' : 'text-dark'">Professional Audio</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <!-- 消费类产品 -->
        <button @click="currentLevel = 'L3'; currentSubSection = 'consumers'" 
                class="flex items-center justify-between w-full btn-reset my-3">
            <span class="text-[30px] leading-[38px] font-bold" :class="isDarkTheme ? 'text-white' : 'text-dark'">Consumers</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <!-- 软件 -->
        <button @click="currentLevel = 'L3'; currentSubSection = 'software'" 
                class="flex items-center justify-between w-full btn-reset my-3">
            <span class="text-[30px] leading-[38px] font-bold" :class="isDarkTheme ? 'text-white' : 'text-dark'">Software</span>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        
        <!-- 所有解决方案 -->
        <a href="/en/solutions/" class="flex items-center w-full pt-9 pb-2">
            <span class="text-body-large font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">All Solutions</span>
        </a>
        
        <!-- 即将推出 -->
        <!-- <div class="flex items-center w-full py-2">
            <span class="text-body-large font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Coming Soon</span>
        </div> -->
    </div>
</div> 
        </div>

        <!-- Level 2 Application Wrapper -->
        <div x-show="currentLevel === 'L2' && currentSection === 'application'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            



<!-- L2 应用场景菜单 -->
<div x-show="currentLevel === 'L2' && currentSection === 'application'" class="mb-6">
    <div class="flex flex-col">
        
        <a href="/en/applications/conference-meeting/" class="flex items-center w-full py-2 mt-6">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Conference</span>
        </a>

        <a href="/en/applications/live-streaming/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Live Streaming</span>
        </a>

        <!-- <a href="#" class="flex items-center w-full py-2 mt-6">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Consumer Electronics</span>
        </a>

        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Agriculture</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Sports</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Education</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Smart Home</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Automotive</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Robotics</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Entertainment</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Media Production</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">AR/VR</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Metaverse</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Environment</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Healthcare</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Baby/Pet</span>
        </a> -->

        <div class="h-[0px] my-3"></div>

        
        
        <!-- 特色卡片：服务 -->
        <div class="mt-4 mb-6">
            <a href="/en/about/#services" class="block">
                <div class="rounded-xl overflow-hidden relative shadow-2xl">
                    <div class="h-48 flex flex-col justify-between p-6 bg-center bg-cover relative" 
                         style="background-image: url('/static/assets/images/homepages/navbar/service.jpg')">
                        <div class="absolute inset-0 bg-gradient-to-b via-black/50 from-black to-black/5"></div>
                        <div class="w-full flex justify-between items-start relative z-10">
                            <h3 class="text-body-medium font-bold text-gray-1">
                                Our Services
                            </h3>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7 17L17 7M17 7H7M17 7V17" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="relative z-10">
                            <p class="text-body-small text-gray-1">We offer complete services from design to manufacturing, including prototype production, circuit board design, manufacturing, and testing.</p>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        
        <!-- 特色卡片：案例研究 -->
        <div class="mb-6">
            <a href="/en/news/category/case-studies/" class="block">
                <div class="rounded-xl overflow-hidden relative shadow-2xl">
                    <div class="h-48 flex flex-col justify-between p-6 bg-center bg-cover relative" 
                         style="background-image: url('/static/assets/images/homepages/navbar/casestudy.jpg')">
                        <div class="absolute inset-0 bg-gradient-to-b via-black/50 from-black to-black/5"></div>
                        <div class="w-full flex justify-between items-start relative z-10">
                            <h3 class="text-body-medium font-bold text-gray-1">
                                Case Studies
                            </h3>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7 17L17 7M17 7H7M17 7V17" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="relative z-10">
                            <p class="text-body-small text-gray-1">Browse all cases we and our clients went through.</p>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div> 
        </div>

        <!-- Level 2 About Us Wrapper -->
        <div x-show="currentLevel === 'L2' && currentSection === 'aboutus'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            


<!-- L2 关于我们菜单 -->
<div x-show="currentLevel === 'L2' && currentSection === 'aboutus'">
    <div class="flex flex-col">
        <a href="/en/about/" class="flex items-center w-full py-2 mt-6">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">About Pawpaw</span>
        </a>
        
        <a href="/en/about/careers/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Careers</span>
        </a>
        
        <div class="h-[0px] my-3"></div>
        
        <!-- 特色卡片：我们的服务 -->
        <div class="mt-4 mb-6">
            <a href="/en/support/" class="block">
                <div class="rounded-xl overflow-hidden relative shadow-2xl">
                    <div class="h-48 flex flex-col justify-between p-6 bg-center bg-cover relative" style="background-image: url('/static/assets/images/homepages/navbar/contact.jpg')">
                        <div class="absolute inset-0 bg-gradient-to-b via-black/50 from-black to-black/5"></div>
                        <div class="w-full flex justify-between items-start relative z-10">
                            <h3 class="text-body-medium font-bold text-gray-1">
                                Contact Us
                            </h3>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7 17L17 7M17 7H7M17 7V17" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="relative z-10">
                            <p class="text-body-small text-gray-1">We offer complete services from design to manufacturing, including prototype production, circuit board design, manufacturing, and testing.</p>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        
        <!-- 特色卡片：创新历程 -->
        <div class="mb-6">
            <a href="/en/about/#milestones" class="block">
                <div class="rounded-xl overflow-hidden relative shadow-2xl">
                    <div class="h-48 flex flex-col justify-between p-6 bg-center bg-cover relative" style="background-image: url('/static/assets/images/homepages/navbar/innovation_journey.jpg')">
                        <div class="absolute inset-0 bg-gradient-to-b via-black/50 from-black to-black/5"></div>
                        <div class="w-full flex justify-between items-start relative z-10">
                            <h3 class="text-body-medium font-bold text-gray-1">
                                Innovation Journey
                            </h3>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7 17L17 7M17 7H7M17 7V17" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="relative z-10">
                            <p class="text-body-medium font-bold text-white">Our timeline of breakthroughs and innovations in audio technology.</p>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div> 
        </div>

        <!-- Level 2 Media Wrapper -->
        <div x-show="currentLevel === 'L2' && currentSection === 'media'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            



<!-- L2 媒体中心菜单 -->
<div x-show="currentLevel === 'L2' && currentSection === 'media'">
    <div class="flex flex-col">
        <a href="/en/news/" class="flex items-center w-full py-2 mt-6 ">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Latest News</span>
        </a>
        
        <a href="/en/news/category/blog/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Blog</span>
        </a>
        
        <!-- <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Press Kit</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Media Contact</span>
        </a>
         -->
        <div class="h-[0px] my-3"></div>
        
        
        
        
        <!-- 特色卡片：博客文章 -->
        <div class="mt-4 mb-6">
            <a href="/en/news/article/2025-06-20-what-is-digitally-variable-directional-microphone/" class="block">
                <div class="rounded-xl overflow-hidden relative shadow-2xl">
                    <div class="h-48 flex flex-col justify-between p-6 bg-center bg-cover relative" 
                         style="background-image: url('/media/news_covers/Linkedin_Post_DVDM_cover.jpg')">
                        <div class="absolute inset-0 bg-gradient-to-b via-black/50 from-black to-black/5"></div>
                        <div class="w-full flex justify-between items-start relative z-10">
                            <h3 class="text-body-medium font-bold text-gray-1">
                                Featured Blog
                            </h3>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7 17L17 7M17 7H7M17 7V17" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="relative z-10">
                            
                                <p class="text-body-small text-gray-1">What is Digitally Variable Directional Microphone?</p>
                            
                        </div>
                    </div>
                </div>
            </a>
        </div>
        
        <!-- 特色卡片：新闻稿 -->
        <div class="mb-6">
            <a href="/en/news/article/2025-03-27-gas-2025-award/" class="block">
                <div class="rounded-xl overflow-hidden relative shadow-2xl">
                    <div class="h-48 flex flex-col justify-between p-6 bg-center bg-cover relative" 
                         style="background-image: url('/media/news_covers/mmexport1008b8624a0c4acd378bf871ebd3e947_1743044932729_1.jpeg')">
                        <div class="absolute inset-0 bg-gradient-to-b via-black/50 from-black to-black/5"></div>
                        <div class="w-full flex justify-between items-start relative z-10">
                            <h3 class="text-body-medium font-bold text-gray-1">
                                Featured News
                            </h3>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7 17L17 7M17 7H7M17 7V17" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="relative z-10">
                            
                                <p class="text-body-small text-gray-1">Pawpaw Technology Won The &quot;GAS Consumer Electroni…</p>
                            
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div> 
        </div>

        <!-- Level 3 Voice Interface Wrapper -->
        <div x-show="currentLevel === 'L3' && currentSection === 'solutions' && currentSubSection === 'voice_interface'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            

<!-- L3 语音接口子菜单 -->
<div x-show="currentLevel === 'L3' && currentSection === 'solutions' && currentSubSection === 'voice_interface'" class="pt-8 pb-12">
    <div class="flex flex-col">
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">Conference Voice</div>
             
        <a href="/en/solutions/digitally-variable-directional-microphone/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Digitally Variable Directional Microphone</span>
        </a>
           
        <a href="/en/solutions/dual-mic-voice-interface/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Dual-mic Voice Interface</span>
        </a>
        
        <a href="/en/solutions/wireless-daisy-chain-speakerphone/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Wireless Daisy Chain Speakerphone</span>
        </a>

        
        <a href="/en/solutions/sound-reinforcement/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Sound Reinforcement System</span>
        </a>
        
        <!-- <div class="h-[0px] my-3"></div>
        
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">Speech Recognition</div>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Offline AI Keyword Spotting</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Offline ASR</span>
        </a> -->
    </div>
</div> 
        </div>

        <!-- Level 3 Professional Audio Wrapper -->
        <div x-show="currentLevel === 'L3' && currentSection === 'solutions' && currentSubSection === 'professional_audio'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            

<!-- L3 专业音频子菜单 -->
<div x-show="currentLevel === 'L3' && currentSection === 'solutions' && currentSubSection === 'professional_audio'" class="pt-8 pb-12">
    <div class="flex flex-col">
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">Audio Interfaces</div>
        
        <a href="/en/solutions/usb-audio-interface/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">USB Audio Interface</span>
        </a>
<!--         
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Audio Interface Module</span>
        </a>
        
        <div class="h-[0px] my-3"></div>
        
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">Mixers</div>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">32-ch Multi-Channel Mixer</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">16-ch Multi-Channel Mixer</span>
        </a>
        
        <div class="h-[0px] my-3"></div>
        
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">HiFi</div>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Desktop DAC/AMP</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Portable DAC/AMP</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Wireless Amplifier</span>
        </a> -->
    </div>
</div> 
        </div>

        <!-- Level 3 Consumers Wrapper -->
        <div x-show="currentLevel === 'L3' && currentSection === 'solutions' && currentSubSection === 'consumers'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            

<!-- L3 消费类产品子菜单 -->
<div x-show="currentLevel === 'L3' && currentSection === 'solutions' && currentSubSection === 'consumers'" class="mt-8 mb-12">
    <div class="flex flex-col">
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">Microphone</div>
        
        <a href="/en/solutions/usb-ai-microphone/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">AI Noise Removal USB Microphone</span>
        </a>
        
        <!-- <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Wireless Microphone</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Wireless Microphone (NearLink)</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Variable Pattern Microphone</span>
        </a>
        
        <div class="h-[0px] my-3"></div>
        
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">Headphones</div>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Gaming Headset</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">TWS Earphone</span>
        </a>
        
        <div class="h-[0px] my-3"></div>
        
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">Accessories</div>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">AI-Powered Vocal Remover</span>
        </a> -->
    </div>
</div> 
        </div>

        <!-- Level 3 Software Wrapper -->
        <div x-show="currentLevel === 'L3' && currentSection === 'solutions' && currentSubSection === 'software'"
             x-transition:enter="transition ease-out duration-300 transform"
             x-transition:enter-start="translate-x-full opacity-0"
             x-transition:enter-end="translate-x-0 opacity-100"
             x-transition:leave="transition ease-in duration-200 transform"
             x-transition:leave-start="translate-x-0 opacity-100"
             x-transition:leave-end="-translate-x-full opacity-0">
            

<!-- L3 软件子菜单 -->
<div x-show="currentLevel === 'L3' && currentSection === 'solutions' && currentSubSection === 'software'" class="pt-8 pb-12">
    <div class="flex flex-col">
        <!-- <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">Metaverse</div>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Spatial Audio Recording</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Spatial Audio Rendering</span>
        </a>

         -->
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">AI Audio</div>
        
        <a href="/en/solutions/algorithms/ai-noise-reduction/" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">AI Noise Remover</span>
        </a>
        

        
        <!-- <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Text to Speech</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Voice Changer</span>
        </a>
        
        <div class="h-[0px] my-3"></div>
        
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">Apps</div>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Pawpaw Recorder</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Mic Array Manager</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Equalizer</span>
        </a>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">DFU Tool</span>
        </a>
        
        <div class="h-[0px] my-3"></div>
        
        <div class="font-medium text-body-medium mb-4" :class="isDarkTheme ? 'text-gray-400' : 'text-dark-4'">A2B</div>
        
        <a href="#" class="flex items-center w-full py-2">
            <span class="text-body-medium font-medium" :class="isDarkTheme ? 'text-white' : 'text-dark'">Car Audio System</span>
        </a> -->
    </div>
</div> 
        </div>
    </div>

    <!-- 底部CTA区域 - 固定在底部 -->
    <div class="fixed bottom-0 left-0 right-0 z-10">
        <div class="h-10 bg-gradient-to-t from-white to-transparent pointer-events-none" x-show="!isDarkTheme"></div>
        <div class="h-10 bg-gradient-to-t from-black to-transparent pointer-events-none" x-show="isDarkTheme"></div>
        <div class="h-20 bg-white"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6">
            <a href="/en/support/" 
               class="block w-full text-center rounded-full bg-primary hover:bg-primary-hover py-2 px-6 text-body-medium text-white font-semibold transition-colors duration-200">
                Contact Us
            </a>
        </div>
    </div>
</div> 
</div>

<!-- 搜索弹窗组件 -->



<!-- 搜索弹窗组件 -->
<div x-data="searchModal()" 
     x-cloak
     x-show="isOpen" 
     x-trap.noscroll="isOpen"
     @keydown.escape.window="close()"
     @search-toggle.window="toggle()"
     class="fixed inset-0 z-modal flex items-start justify-center pt-16 sm:pt-24 md:pt-32 px-4 sm:px-6">
    
    <!-- 背景蒙版 -->
    <div x-show="isOpen" 
         x-cloak
         x-transition:enter="transition-opacity duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition-opacity duration-300"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 bg-dark/60 backdrop-blur-md z-modal-backdrop"
         @click="close()"></div>
    
    <!-- 搜索容器 -->
    <div x-show="isOpen" 
         x-cloak
         x-transition:enter="transition-all duration-300"
         x-transition:enter-start="opacity-0 -translate-y-4"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition-all duration-300"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 -translate-y-4"
         @click.stop=""
         class="relative w-full max-w-2xl bg-white rounded-xl shadow-5 overflow-hidden z-modal">
        
        <!-- 搜索头部 -->
        <div class="flex items-center p-4 border-b border-gray-3">
            <div class="flex-1 flex items-center gap-3">
                <img src="/static/assets/heroicons/outline/magnifying-glass.svg" class="w-5 h-5 text-dark-5" alt="Search">
                <input x-model="searchTerm" 
                       x-ref="searchInput"
                       @input.debounce.300ms="search()"
                       @keydown.enter="if(searchTerm.trim()) { window.location.href='/en/search/?q=' + encodeURIComponent(searchTerm); close(); }"
                       type="search" 
                       class="w-full border-0 bg-transparent text-dark placeholder-dark-5 focus:ring-0 text-body-medium p-0 search-input-no-cancel"
                       placeholder="Search products, solutions, technical documents...">
                <button x-show="searchTerm" @click="searchTerm = ''" class="text-dark-5 hover:text-dark">
                    <img src="/static/assets/heroicons/outline/x-mark.svg" class="w-5 h-5" alt="Clear">
                </button>
            </div>

            <button @click="close()" class="text-dark-5 hover:text-dark p-1 block sm:hidden">
                Cancel
            </button>
        </div>
        
        <!-- 搜索结果 -->
        <div class="overflow-y-auto max-h-[50vh] md:max-h-[60vh]">
            <div x-show="isLoading" class="flex items-center justify-center py-10">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
            </div>
            
            <div x-show="!isLoading && searchResults.length === 0 && searchTerm.length > 0" class="py-10 text-center text-dark-5 text-body-medium">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                No matching content found
            </div>
            
            <ul x-show="!isLoading && searchResults.length > 0" class="divide-y divide-gray-3">
                <template x-for="result in searchResults" :key="result.link">
                    <li class="p-4 hover:bg-gray-2">
                        <a :href="result.link" class="block" @click="close()">
                            <h5 class="text-xl font-semibold mb-1 text-dark" x-html="highlightKeyword(result.title)"></h5>
                            <p x-show="result.notes" class="text-body-small text-primary-text mb-1" x-html="highlightKeyword(result.notes)"></p>
                            <span class="text-body-extra-small text-dark-6 truncate block" x-text="formatUrl(result.link)"></span>
                        </a>
                    </li>
                </template>
            </ul>
            
            <div x-show="!isLoading && searchResults.length > 0 && hasMore" class="p-4 text-center">
                <a @click.prevent="window.location.href='/en/search/?q=' + encodeURIComponent(searchTerm); close();" class="text-primary hover:text-primary-hover text-body-medium font-medium transition-colors cursor-pointer">
                    View more results →
                </a>
            </div>
        </div>
    </div>
</div>

<script>
function searchModal() {
    return {
        isOpen: false,
        searchTerm: '',
        searchResults: [],
        isLoading: false,
        hasMore: false,
        
        init() {
            this.$watch('isOpen', value => {
                if (value) {
                    // 打开模态框时
                    document.documentElement.classList.add('modal-open');
                    document.body.classList.add('overflow-hidden');
                    
                    // 聚焦搜索输入框
                    this.$nextTick(() => {
                        this.$refs.searchInput.focus();
                    });
                } else {
                    // 关闭模态框时
                    document.documentElement.classList.remove('modal-open');
                    document.body.classList.remove('overflow-hidden');
                    
                    // 重置搜索状态
                    this.searchTerm = '';
                    this.searchResults = [];
                }
            });
        },
        
        toggle() {
            this.isOpen = !this.isOpen;
        },
        
        close() {
            this.isOpen = false;
        },
        
        async search() {
            if (!this.searchTerm || this.searchTerm.length < 2) {
                this.searchResults = [];
                return;
            }
            
            this.isLoading = true;
            
            try {
                const response = await fetch(`/en/api/search/?q=${encodeURIComponent(this.searchTerm)}&limit=5`);
                if (!response.ok) throw new Error('Search request failed');
                
                const data = await response.json();
                this.searchResults = data.results;
                this.hasMore = data.has_more;
            } catch (error) {
                console.error('Search error:', error);
                this.searchResults = [];
                this.hasMore = false;
            } finally {
                this.isLoading = false;
            }
        },
        
        detectLanguage(text) {
            // 检测是否包含中文字符
            const chinesePattern = /[\u4e00-\u9fff\u3400-\u4dbf\uf900-\ufaff]/;
            return chinesePattern.test(text) ? 'zh' : 'en';
        },
        
        highlightKeyword(text) {
            if (!text || !this.searchTerm) return text;
            
            // 检测搜索词语言
            const language = this.detectLanguage(this.searchTerm);
            
            let terms = [];
            
            if (language === 'zh') {
                // 中文搜索词处理
                // 使用完整关键词
                terms.push(this.searchTerm);
                
                // 如果关键词较长，也可以考虑按字拆分
                if (this.searchTerm.length > 2) {
                    // 分解成单字（用于中文）
                    for (const char of this.searchTerm) {
                        if (char.trim().length > 0) {
                            terms.push(char);
                        }
                    }
                }
            } else {
                // 英文搜索词按空格拆分
                terms = this.searchTerm.toLowerCase().split(/\s+/);
                if (!terms.length) {
                    terms.push(this.searchTerm.toLowerCase());
                }
            }
            
            let result = text;
            
            // 先高亮完整的搜索词（优先级最高）
            const escapedFullTerm = this.searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
            const fullRegex = new RegExp(escapedFullTerm, 'gi');
            result = result.replace(fullRegex, match => `<span class="bg-yellow-200">${match}</span>`);
            
            // 然后高亮各个单词/字符
            terms.forEach(term => {
                if (term && term !== this.searchTerm) { // 避免重复高亮完整关键词
                    const escapedTerm = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                    const regex = new RegExp(escapedTerm, 'gi');
                    result = result.replace(regex, match => `<span class="bg-yellow-200">${match}</span>`);
                }
            });
            
            return result;
        },
        
        formatUrl(url) {
            // 获取域名和路径
            const host = window.location.host;
            return `${window.location.protocol}//${host}${url}`;
        }
    };
}
</script>

<!-- 确保在您的base.html中已经引入了Alpine.js -->
<script>
// 确保在移动设备上正确处理页面导航
document.addEventListener('DOMContentLoaded', function() {
    // 设置语言切换链接
    try {
        const path = window.location.href.match(/\/(zh-hans|en)\/(.*)/);
        if (path && path.length >= 3) {
            const langPath = path[2];
            document.querySelectorAll('.language-link').forEach((link) => {
                // 保留原始链接的语言代码部分，但更新后面的路径
                const langCode = link.getAttribute('href').replace(/^\/([^\/]+)\/.*$/, '/$1/');
                link.href = langCode + langPath;
            });
        }
    } catch (e) {
        console.error('语言链接设置失败:', e);
    }
    
    // 初始化下拉菜单位置
    updateDropdownPosition();
});

// 更新下拉菜单位置的函数
function updateDropdownPosition() {
    const navbar = document.getElementById('main-navbar');
    const dropdowns = document.querySelectorAll('.dropdown-menu');
    
    if (navbar && dropdowns.length) {
        const navbarHeight = navbar.offsetHeight;
        const navbarTop = navbar.getBoundingClientRect().top;
        
        dropdowns.forEach(dropdown => {
            dropdown.style.top = `${navbarTop + navbarHeight}px`;
        });
    }
}

// 在滚动和resize时更新位置
window.addEventListener('scroll', updateDropdownPosition);
window.addEventListener('resize', updateDropdownPosition);

// Alpine.js 初始化后移除隐藏类的脚本
document.addEventListener('alpine:initialized', () => {
    // 找到所有带有 hidden-initially 类的元素并移除该类
    document.querySelectorAll('.hidden-initially').forEach(el => {
        el.classList.remove('hidden-initially');
    });
    
    // 初始化下拉菜单位置
    updateDropdownPosition();
});
</script>

    
<section class="section-layout-1">
  <div class="flex flex-col items-center mb-16">
    <h1 class="text-h2 mb-2 text-center">Pawpaw Newsroom</h1>
    <h6 class="max-w-[600px] text-center">The latest industry news, company updates and customer stories.</h6>
  </div>

  <!-- 主要新闻卡片 -->
  
  <div class="w-full overflow-hidden rounded-4xl bg-white shadow-5 hover:shadow-lg transition duration-300 mb-16">
    <a href="/en/news/article/2025-06-20-what-is-digitally-variable-directional-microphone/" class="block">
      <div class="flex flex-col md:flex-col lg:flex-row h-auto md:h-[741px] lg:h-auto">
        <!-- 左侧图片区域 (比例2:1) -->
        <div class="relative lg:w-2/3 md:flex-shrink md:overflow-hidden lg:h-auto">
          <div class="transform transition-transform duration-500 hover:scale-105">
            
            <img src="/media/news_covers/Linkedin_Post_DVDM_cover.jpg" class="w-full h-full object-cover lg:aspect-[4/3]" alt="What is Digitally Variable Directional Microphone?">
            
          </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="lg:w-1/3 p-8 flex flex-col justify-between md:flex-shrink-0">
          <!-- 日期和标签 - 桌面端 -->
          <div class="hidden md:flex items-center mb-3 lg:mb-0">
            <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
              <p class="text-body-small sm:text-body-small text-body-extra-small">Blog</p>
            </div>
            <small class="text-body-extra-small sm:text-body-small text-dark-4">
              
              <time datetime="">June 20, 2025</time>
              
            </small>
          </div>

          <!-- 中间内容区域 -->
          <div class="flex flex-col gap-2">
            <!-- 标题 -->
            <h4 class="font-bold">What is Digitally Variable Directional Microphone?</h4>
            
            <!-- 描述 -->
            
            <p class="text-body-small sm:text-body-medium text-dark-4">
              Learn how Digitally Variable Directional Microphone utilizes beamforming technology, enabling real-time adjustment of pickup direction, delivering high-quality audio solutions for conferences, healthcare, and content creation.
            </p>
            
          </div>

          <!-- 日期和标签 - 移动端 -->
          <div class="flex md:hidden items-center mt-4">
            <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
              <p class="text-body-extra-small sm:text-body-small">Blog</p>
            </div>
            <small class="text-body-extra-small sm:text-body-small text-dark-4">
              
              <time datetime="">June 20, 2025</time>
              
            </small>
          </div>

          <!-- Read More 按钮 -->
          <div class="mt-6 lg:mt-0 hidden lg:block">
            <span class="inline-block rounded-md bg-secondary text-white font-medium px-7 py-2 hover:bg-opacity-90 transition">
              Read More
            </span>
          </div>
        </div>
      </div>
    </a>
  </div>
  

  <!-- 根据页码选择不同的布局 -->
  
    
      <!-- 第二页及以后使用网格布局 -->
      

<div class="w-full">
  <!-- 引入筛选栏模板 -->
  

<!-- 新闻分类筛选栏 - 横向滚动 -->
<div class="relative mb-8 font-bold">
  <div id="news-categories" class="flex whitespace-nowrap overflow-x-auto scrollbar-hide gap-2">
    <a href="/en/news/" 
       class="rounded-full px-4 py-1 text-body-medium font-semibold transition inline-block bg-secondary-hover text-white">
      All
    </a>
    
    <a href="/en/news/category/company/" 
       class="rounded-full px-4 py-1 text-body-medium font-semibold transition inline-block bg-gray-25 text-dark hover:bg-secondary-hover hover:text-white">
      Company
    </a>
    
    <a href="/en/news/category/blog/" 
       class="rounded-full px-4 py-1 text-body-medium font-semibold transition inline-block bg-gray-25 text-dark hover:bg-secondary-hover hover:text-white">
      Blog
    </a>
    
    <a href="/en/news/category/case-studies/" 
       class="rounded-full px-4 py-1 text-body-medium font-semibold transition inline-block bg-gray-25 text-dark hover:bg-secondary-hover hover:text-white">
      Case Studies
    </a>
    
    <a href="/en/news/category/release/" 
       class="rounded-full px-4 py-1 text-body-medium font-semibold transition inline-block bg-gray-25 text-dark hover:bg-secondary-hover hover:text-white">
      Release
    </a>
    
    <a href="/en/news/category/press/" 
       class="rounded-full px-4 py-1 text-body-medium font-semibold transition inline-block bg-gray-25 text-dark hover:bg-secondary-hover hover:text-white">
      Press
    </a>
    
  </div>
</div>

<style>
  /* 隐藏滚动条但保持可滚动性 */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
  }
</style> 

  
  <!-- 桌面布局(lg及以上) -->
  <div class="hidden lg:block">
    <!-- 网格布局: 12个卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2025-04-14-ai-driven-audio-innovations-in-the-2025-smart-sound-gateway-market/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/night_livingroom_W_1920px.jpg" class="w-full h-full object-cover" alt="AI-Driven Audio Innovations in the 2025 Smart Sound &amp; Gateway Market">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">AI-Driven Audio Innovations in the 2025 Smart Sound &amp; Gateway Market</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            Smart audio devices – from voice-activated speakers and soundbars to AI-powered home audio systems – have become central to modern living. By 2025, t…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Blog</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">April 14, 2025</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2025-03-27-gas-2025-award/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/mmexport1008b8624a0c4acd378bf871ebd3e947_1743044932729_1.jpeg" class="w-full h-full object-cover" alt="Pawpaw Technology Won The &quot;GAS Consumer Electronics Innovation Award&quot;!">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">Pawpaw Technology Won The &quot;GAS Consumer Electronics Innovation Award&quot;!</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            The wireless daisy chain speakerphone solution won the Technology Progress Award for its high-quality conference voice, intelligence, and innovative …
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Company</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">March 27, 2025</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2025-01-06-zjtx/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E4%B8%93%E7%B2%BE%E7%89%B9%E6%96%B0%E4%BC%81%E4%B8%9A%E8%AE%A4%E8%AF%81_%E6%8B%B7%E8%B4%9D.png" class="w-full h-full object-cover" alt="喜讯 | 木瓜科技荣获“专精特新”企业称号">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">喜讯 | 木瓜科技荣获“专精特新”企业称号</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            2024年12月30日，深圳市木瓜电子科技有限公司荣获2024年深圳市专精特新中小企业称号。
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Company</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">January 06, 2025</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2024-10-10-pawpaw-tech-unveils-wireless-cascade-conference-system/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E5%AE%A2%E6%88%B7%E4%BA%A7%E5%93%81hero_%E6%8B%B7%E8%B4%9D.jpg" class="w-full h-full object-cover" alt="Pawpaw Technology Introduces Innovative Wireless Cascade Conference Solution">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">Pawpaw Technology Introduces Innovative Wireless Cascade Conference Solution</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            Pawpaw Technology has introduced an innovative wireless cascading conference solution that greatly improves the performance and user experience of CV…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Release</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">October 10, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2024-08-16-what-is-the-head-related-transfer-function/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/blog_covers/2024-08/spacial_audio.jpg" class="w-full h-full object-cover" alt="What is the Head-Related Transfer Function?">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">What is the Head-Related Transfer Function?</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            Discover the critical role of the Head-Related Transfer Function (HRTF) in virtual reality, audiology, and personalized audio. Learn about its defini…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Blog</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">August 16, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2024-07-04-insights-into-microphone-arrays/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/blog_covers/2024-07/1719885500367YW7ZAwF2.jpeg" class="w-full h-full object-cover" alt="10 Powerful Insights into Microphone Arrays">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">10 Powerful Insights into Microphone Arrays</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            Discover the essential aspects of microphone arrays, from core concepts to future innovations. Learn about the various types, technical specs, and re…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Blog</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">July 09, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2024-06-04-comprehensive-guide-on-usb-interface/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/blog_covers/2024-06/audio-interface-cover.jpg" class="w-full h-full object-cover" alt="Comprehensive Guide on USB Audio Interface">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">Comprehensive Guide on USB Audio Interface</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            A USB audio interface is an external sound card that enhances your audio by plugging into a computer&#x27;s USB port. Learn how to improve sound performan…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Blog</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">June 04, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2024-05-27-usb-audio/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/blog_covers/2024-05/audio-interface-5297802_1280.jpg" class="w-full h-full object-cover" alt="The Ultimate Guide on USB Audio">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">The Ultimate Guide on USB Audio</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            USB audio refers to the transmission of audio signals through a USB (Universal Serial Bus) connection, allowing digital audio data to be sent between…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Blog</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">May 27, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/PXUA-316-MC-MAX/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/PXUA-316-MC-MAX_2.0_TS_W_800px.webp" class="w-full h-full object-cover" alt="PXUA-316-MC-MAX Multi-Channel Audio Evaluation Board">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">PXUA-316-MC-MAX Multi-Channel Audio Evaluation Board</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            ‌‌‌‌‌‌‌The PXUA-316-MC-MAX multi-channel audio evaluation board is a new generation multi-channel audio evaluation board launched by PAWPAW Technolog…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Release</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">April 23, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/GAS/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/640.jpg" class="w-full h-full object-cover" alt="“Sound Without Limits, @The Future” – PawPaw Technology Awaits You at GAS 2024!">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">“Sound Without Limits, @The Future” – PawPaw Technology Awaits You at GAS 2024!</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Company</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">March 21, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/Technology/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E9%AB%98%E6%96%B0%E6%8A%80%E6%9C%AF%E4%BC%81%E4%B8%9A%E8%AE%A4%E8%AF%81_%E5%B0%8F.png" class="w-full h-full object-cover" alt="喜讯 | 恭喜木瓜科技荣获高新技术企业认定">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">喜讯 | 恭喜木瓜科技荣获高新技术企业认定</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Company</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">March 05, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/exhibitions/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/DSC03412_W_2560px_%E5%B0%8F.jpg" class="w-full h-full object-cover" alt="圆满收官 | INTER-AUDIO 2023 展会，木瓜科技将继续前行，探索音频应用更广边界！">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">圆满收官 | INTER-AUDIO 2023 展会，木瓜科技将继续前行，探索音频应用更广边界！</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Company</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">December 22, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
    </div>
  </div>

  <!-- 平板布局(md屏幕) -->
  <div class="hidden md:block lg:hidden">
    <!-- 网格布局 -->
    <div class="grid grid-cols-2 gap-x-8 gap-y-16">
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2025-04-14-ai-driven-audio-innovations-in-the-2025-smart-sound-gateway-market/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/night_livingroom_W_1920px.jpg" class="w-full h-full object-cover" alt="AI-Driven Audio Innovations in the 2025 Smart Sound &amp; Gateway Market">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">AI-Driven Audio Innovations in the 2025 Smart Sound &amp; Gateway Market</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            Smart audio devices – from voice-activated speakers and soundbars to AI-powered home audio systems – have become central to modern living. By 2025, t…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Blog</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">April 14, 2025</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2025-03-27-gas-2025-award/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/mmexport1008b8624a0c4acd378bf871ebd3e947_1743044932729_1.jpeg" class="w-full h-full object-cover" alt="Pawpaw Technology Won The &quot;GAS Consumer Electronics Innovation Award&quot;!">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">Pawpaw Technology Won The &quot;GAS Consumer Electronics Innovation Award&quot;!</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            The wireless daisy chain speakerphone solution won the Technology Progress Award for its high-quality conference voice, intelligence, and innovative …
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Company</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">March 27, 2025</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2025-01-06-zjtx/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E4%B8%93%E7%B2%BE%E7%89%B9%E6%96%B0%E4%BC%81%E4%B8%9A%E8%AE%A4%E8%AF%81_%E6%8B%B7%E8%B4%9D.png" class="w-full h-full object-cover" alt="喜讯 | 木瓜科技荣获“专精特新”企业称号">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">喜讯 | 木瓜科技荣获“专精特新”企业称号</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            2024年12月30日，深圳市木瓜电子科技有限公司荣获2024年深圳市专精特新中小企业称号。
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Company</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">January 06, 2025</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2024-10-10-pawpaw-tech-unveils-wireless-cascade-conference-system/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E5%AE%A2%E6%88%B7%E4%BA%A7%E5%93%81hero_%E6%8B%B7%E8%B4%9D.jpg" class="w-full h-full object-cover" alt="Pawpaw Technology Introduces Innovative Wireless Cascade Conference Solution">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">Pawpaw Technology Introduces Innovative Wireless Cascade Conference Solution</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            Pawpaw Technology has introduced an innovative wireless cascading conference solution that greatly improves the performance and user experience of CV…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Release</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">October 10, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2024-08-16-what-is-the-head-related-transfer-function/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/blog_covers/2024-08/spacial_audio.jpg" class="w-full h-full object-cover" alt="What is the Head-Related Transfer Function?">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">What is the Head-Related Transfer Function?</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            Discover the critical role of the Head-Related Transfer Function (HRTF) in virtual reality, audiology, and personalized audio. Learn about its defini…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Blog</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">August 16, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2024-07-04-insights-into-microphone-arrays/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/blog_covers/2024-07/1719885500367YW7ZAwF2.jpeg" class="w-full h-full object-cover" alt="10 Powerful Insights into Microphone Arrays">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">10 Powerful Insights into Microphone Arrays</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            Discover the essential aspects of microphone arrays, from core concepts to future innovations. Learn about the various types, technical specs, and re…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Blog</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">July 09, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2024-06-04-comprehensive-guide-on-usb-interface/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/blog_covers/2024-06/audio-interface-cover.jpg" class="w-full h-full object-cover" alt="Comprehensive Guide on USB Audio Interface">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">Comprehensive Guide on USB Audio Interface</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            A USB audio interface is an external sound card that enhances your audio by plugging into a computer&#x27;s USB port. Learn how to improve sound performan…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Blog</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">June 04, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2024-05-27-usb-audio/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/blog_covers/2024-05/audio-interface-5297802_1280.jpg" class="w-full h-full object-cover" alt="The Ultimate Guide on USB Audio">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">The Ultimate Guide on USB Audio</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            USB audio refers to the transmission of audio signals through a USB (Universal Serial Bus) connection, allowing digital audio data to be sent between…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Blog</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">May 27, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/PXUA-316-MC-MAX/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/PXUA-316-MC-MAX_2.0_TS_W_800px.webp" class="w-full h-full object-cover" alt="PXUA-316-MC-MAX Multi-Channel Audio Evaluation Board">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">PXUA-316-MC-MAX Multi-Channel Audio Evaluation Board</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            ‌‌‌‌‌‌‌The PXUA-316-MC-MAX multi-channel audio evaluation board is a new generation multi-channel audio evaluation board launched by PAWPAW Technolog…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Release</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">April 23, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/GAS/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/640.jpg" class="w-full h-full object-cover" alt="“Sound Without Limits, @The Future” – PawPaw Technology Awaits You at GAS 2024!">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">“Sound Without Limits, @The Future” – PawPaw Technology Awaits You at GAS 2024!</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Company</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">March 21, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/Technology/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E9%AB%98%E6%96%B0%E6%8A%80%E6%9C%AF%E4%BC%81%E4%B8%9A%E8%AE%A4%E8%AF%81_%E5%B0%8F.png" class="w-full h-full object-cover" alt="喜讯 | 恭喜木瓜科技荣获高新技术企业认定">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">喜讯 | 恭喜木瓜科技荣获高新技术企业认定</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Company</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">March 05, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/exhibitions/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/DSC03412_W_2560px_%E5%B0%8F.jpg" class="w-full h-full object-cover" alt="圆满收官 | INTER-AUDIO 2023 展会，木瓜科技将继续前行，探索音频应用更广边界！">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">圆满收官 | INTER-AUDIO 2023 展会，木瓜科技将继续前行，探索音频应用更广边界！</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Company</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">December 22, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
    </div>
  </div>

  <!-- 移动端布局(sm及以下) -->
  <div class="block md:hidden">
    <!-- 网格布局 -->
    <div class="grid grid-cols-1 gap-x-8 gap-y-8">
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2025-04-14-ai-driven-audio-innovations-in-the-2025-smart-sound-gateway-market/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/night_livingroom_W_1920px.jpg" class="w-full h-full object-cover" alt="AI-Driven Audio Innovations in the 2025 Smart Sound &amp; Gateway Market">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">AI-Driven Audio Innovations in the 2025 Smart Sound &amp; Gateway Market</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            Smart audio devices – from voice-activated speakers and soundbars to AI-powered home audio systems – have become central to modern living. By 2025, t…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Blog</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">April 14, 2025</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2025-03-27-gas-2025-award/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/mmexport1008b8624a0c4acd378bf871ebd3e947_1743044932729_1.jpeg" class="w-full h-full object-cover" alt="Pawpaw Technology Won The &quot;GAS Consumer Electronics Innovation Award&quot;!">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">Pawpaw Technology Won The &quot;GAS Consumer Electronics Innovation Award&quot;!</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            The wireless daisy chain speakerphone solution won the Technology Progress Award for its high-quality conference voice, intelligence, and innovative …
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Company</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">March 27, 2025</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2025-01-06-zjtx/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E4%B8%93%E7%B2%BE%E7%89%B9%E6%96%B0%E4%BC%81%E4%B8%9A%E8%AE%A4%E8%AF%81_%E6%8B%B7%E8%B4%9D.png" class="w-full h-full object-cover" alt="喜讯 | 木瓜科技荣获“专精特新”企业称号">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">喜讯 | 木瓜科技荣获“专精特新”企业称号</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            2024年12月30日，深圳市木瓜电子科技有限公司荣获2024年深圳市专精特新中小企业称号。
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Company</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">January 06, 2025</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2024-10-10-pawpaw-tech-unveils-wireless-cascade-conference-system/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E5%AE%A2%E6%88%B7%E4%BA%A7%E5%93%81hero_%E6%8B%B7%E8%B4%9D.jpg" class="w-full h-full object-cover" alt="Pawpaw Technology Introduces Innovative Wireless Cascade Conference Solution">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">Pawpaw Technology Introduces Innovative Wireless Cascade Conference Solution</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            Pawpaw Technology has introduced an innovative wireless cascading conference solution that greatly improves the performance and user experience of CV…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Release</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">October 10, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2024-08-16-what-is-the-head-related-transfer-function/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/blog_covers/2024-08/spacial_audio.jpg" class="w-full h-full object-cover" alt="What is the Head-Related Transfer Function?">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">What is the Head-Related Transfer Function?</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            Discover the critical role of the Head-Related Transfer Function (HRTF) in virtual reality, audiology, and personalized audio. Learn about its defini…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Blog</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">August 16, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2024-07-04-insights-into-microphone-arrays/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/blog_covers/2024-07/1719885500367YW7ZAwF2.jpeg" class="w-full h-full object-cover" alt="10 Powerful Insights into Microphone Arrays">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">10 Powerful Insights into Microphone Arrays</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            Discover the essential aspects of microphone arrays, from core concepts to future innovations. Learn about the various types, technical specs, and re…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Blog</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">July 09, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2024-06-04-comprehensive-guide-on-usb-interface/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/blog_covers/2024-06/audio-interface-cover.jpg" class="w-full h-full object-cover" alt="Comprehensive Guide on USB Audio Interface">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">Comprehensive Guide on USB Audio Interface</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            A USB audio interface is an external sound card that enhances your audio by plugging into a computer&#x27;s USB port. Learn how to improve sound performan…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Blog</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">June 04, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/2024-05-27-usb-audio/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/blog_covers/2024-05/audio-interface-5297802_1280.jpg" class="w-full h-full object-cover" alt="The Ultimate Guide on USB Audio">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">The Ultimate Guide on USB Audio</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            USB audio refers to the transmission of audio signals through a USB (Universal Serial Bus) connection, allowing digital audio data to be sent between…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Blog</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">May 27, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/PXUA-316-MC-MAX/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/PXUA-316-MC-MAX_2.0_TS_W_800px.webp" class="w-full h-full object-cover" alt="PXUA-316-MC-MAX Multi-Channel Audio Evaluation Board">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">PXUA-316-MC-MAX Multi-Channel Audio Evaluation Board</h6>
          
          
          <p class="text-body-small sm:text-body-medium text-dark-4 mt-2">
            ‌‌‌‌‌‌‌The PXUA-316-MC-MAX multi-channel audio evaluation board is a new generation multi-channel audio evaluation board launched by PAWPAW Technolog…
          </p>
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Release</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">April 23, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/GAS/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/640.jpg" class="w-full h-full object-cover" alt="“Sound Without Limits, @The Future” – PawPaw Technology Awaits You at GAS 2024!">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">“Sound Without Limits, @The Future” – PawPaw Technology Awaits You at GAS 2024!</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Company</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">March 21, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/Technology/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/%E9%AB%98%E6%96%B0%E6%8A%80%E6%9C%AF%E4%BC%81%E4%B8%9A%E8%AE%A4%E8%AF%81_%E5%B0%8F.png" class="w-full h-full object-cover" alt="喜讯 | 恭喜木瓜科技荣获高新技术企业认定">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">喜讯 | 恭喜木瓜科技荣获高新技术企业认定</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Company</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">March 05, 2024</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
        


<div class="h-full card-animation-0">
  <a href="/en/news/article/exhibitions/" class="block h-full">
    <div class="card hover:shadow-lg transition duration-300 overflow-hidden rounded-xl md:rounded-4xl bg-white shadow-5 h-full flex flex-col group">
      <div class="relative w-full overflow-hidden" style="padding-top: 66.67%;">
        <div class="absolute inset-0 transform transition-transform duration-500 group-hover:scale-105">
          
          <img src="/media/news_covers/DSC03412_W_2560px_%E5%B0%8F.jpg" class="w-full h-full object-cover" alt="圆满收官 | INTER-AUDIO 2023 展会，木瓜科技将继续前行，探索音频应用更广边界！">
          
        </div>
      </div>
      <div class="p-6 sm:p-8 flex flex-col flex-grow">
        <div class="flex-grow">          
          <h6 class="hover:text-secondary transition-colors">圆满收官 | INTER-AUDIO 2023 展会，木瓜科技将继续前行，探索音频应用更广边界！</h6>
          
          
        </div>
        
        <div class="flex items-center mt-4">
          <div class="bg-gray-25 rounded-full px-4 py-1 mr-4">
            <p class="text-body-extra-small sm:text-body-small font-medium text-nowrap">Company</p>
          </div>
          <small class="text-body-extra-small sm:text-body-small text-gray-500">
            
            <time datetime="">December 22, 2023</time>
            
          </small>
        </div>
      </div>
    </div>
  </a>
</div> 
      
    </div>
  </div>
  

  <!-- 分页控件 -->
  


<!-- 分页控件 -->

<div class="flex justify-center mt-12">
  <nav class="flex items-center">
    
      <a href="?page=1#news-categories" 
         class="w-9 h-9 rounded-full flex items-center justify-center duration-300 transition hover:bg-transparent-light-hover mr-4">
        <img src="/static/assets/heroicons/outline/chevron-left.svg" class="w-5 h-5 text-dark-6" alt="Previous">
      </a>
    
    
    <div class="flex gap-1">
    
      
        <a href="?page=1#news-categories" 
           class="w-9 h-9 p-[10px] rounded-full text-body-small flex items-center justify-center transition hover:bg-transparent-light-hover active:bg-transparent-light-active">1</a>
      
    
      
        <span class="w-9 h-9 p-[10px] rounded-full bg-transparent-light text-body-small flex items-center justify-center">2</span>
      
    
      
        <a href="?page=3#news-categories" 
           class="w-9 h-9 p-[10px] rounded-full text-body-small flex items-center justify-center transition hover:bg-transparent-light-hover active:bg-transparent-light-active">3</a>
      
    
      
        <a href="?page=4#news-categories" 
           class="w-9 h-9 p-[10px] rounded-full text-body-small flex items-center justify-center transition hover:bg-transparent-light-hover active:bg-transparent-light-active">4</a>
      
    
    </div>
    
    
      <a href="?page=3#news-categories" 
         class="w-9 h-9 rounded-full flex items-center justify-center duration-300 transition hover:bg-transparent-light-hover ml-4">
        <img src="/static/assets/heroicons/outline/chevron-right.svg" class="w-5 h-5 text-dark-6" alt="Next">
      </a>
    
  </nav>
</div>
 
</div> 
    
  
</section>


    

    <div
        class="w-full relative bg-black h-auto overflow-hidden shrink-0 flex flex-col items-start justify-start box-border gap-4 sm:gap-5 text-left text-body-small text-white font-body-extra-small">
        <div class="max-w-[1440px] w-full mx-auto px-4 sm:px-6 md:px-12 py-6 sm:py-8 md:py-12">
            <div class="grid grid-cols-1 md:grid-cols-10 self-stretch flex-1 items-start justify-between">
                <div class="col-span-1 md:col-span-4 self-stretch h-auto sm:h-[200px] md:h-[272px] overflow-hidden shrink-0 flex flex-col items-start justify-between">
                    <div class="flex flex-col items-start justify-start gap-2 sm:gap-3">
                        <img class="w-[150px] sm:w-[180px] md:w-[211px] relative h-4 sm:h-5 md:h-6 overflow-hidden shrink-0" alt="" src="/static/assets/company_logo_srgb.svg">

                        <div class="text-body-small font-medium">Bringing high-end audio within reach. </div>
                    </div>
                    <div class="flex flex-col items-start justify-start gap-2 sm:gap-3 text-body-extra-small sm:text-body-extra-small mt-6 md:mt-0">
                        <div class="w-[280px] hidden flex-col items-start justify-start gap-2">
                            <div class="text-body-extra-small font-medium">Subscribe to the latest news</div>
                            <div class="w-full sm:w-[200px] md:w-[250px] flex flex-col items-start justify-start text-dark-5">
                                <div class="self-stretch flex flex-col items-start justify-start">
                                    <div
                                        class="self-stretch rounded-lg bg-transparency h-7 sm:h-8 md:h-9 flex flex-row items-center justify-start py-2 px-3 box-border">
                                        <div class="flex-1 flex flex-row items-center justify-between">
                                            <div class="text-body-small font-medium">Your email address</div>
                                            <img class="w-3 sm:w-4 relative h-3 sm:h-4 overflow-hidden shrink-0" alt=""
                                                src="/static/assets/heroicons/outline/envelope.svg">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="relative flex flex-row items-center justify-start gap-2 sm:gap-3">
                            <a href="https://www.linkedin.com/company/pawpaw-technology/?viewAsMember=true" target="_blank">
                                <img class="w-4 sm:w-5 relative h-4 sm:h-5 overflow-hidden shrink-0" alt="" src="/static/assets/images/media_icons/Linkedin.svg">
                            </a>
                            <a href="https://www.youtube.com/@Pawpaw-Technology" target="_blank">
                                <img class="w-4 sm:w-5 relative h-4 sm:h-5 overflow-hidden shrink-0" alt="" src="/static/assets/images/media_icons/Youtube.svg">
                            </a>
                            <!-- WeChat QR Component -->
                            


<!-- WeChat QR Component - 可重用的微信二维码组件 -->
<div x-data="{ showQr: false }" class="relative ">
    <!-- 触发器 - 支持图标和文字两种模式 -->
    
        <!-- 图标模式 - 用于footer等场景 -->
        <img 
            @click.prevent="showQr = true; $dispatch('wechat-modal')"
            class="w-4 sm:w-5 relative h-4 sm:h-5 overflow-hidden shrink-0 cursor-pointer" 
            alt="" src="/static/assets/images/media_icons/wechat.svg"
        >
    
    
    <!-- Desktop QR popup - only visible on md and above -->
    <div 
        x-show="showQr"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 translate-y-2"
        @click.outside="showQr = false"
        
            @mouseleave="showQr = false"
        
        class="absolute bottom-full mb-2 md:bottom-full md:top-auto md:mb-2 md:mt-0 left-1/2 -translate-x-1/2 w-28 h-28 p-1 bg-white rounded-md shadow-lg border border-gray-300 z-20 hidden md:block"
    >
        <img class="w-full h-full object-contain" src="/static/assets/images/footer/wechat.jpg" alt="WeChat QR Code">
    </div>
</div>


<!-- Mobile QR Modal with overlay - only visible on smaller than md -->
<!-- 只在指定需要创建移动端弹窗的组件实例中生成此元素 -->
<div 
    x-data="{ showMobileQr: false }"
    x-show="showMobileQr" 
    x-on:wechat-modal.window="showMobileQr = true"
    x-cloak
    class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center md:hidden"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    @click="showMobileQr = false"
>
    <div class="bg-white p-4 rounded-lg max-w-[80%] flex flex-col items-center relative" @click.stop>
        <!-- 关闭按钮 -->
        <button 
            @click="showMobileQr = false"
            class="absolute top-1 right-1 w-8 h-8 flex items-center justify-center text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors duration-200"
        >
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
        
        <img class="w-64 h-64 object-contain" src="/static/assets/images/footer/wechat.jpg" alt="WeChat QR Code">
        <p class="text-black text-center mt-4 text-body-small font-medium">Scan to follow our WeChat Official Account</p>
    </div>
</div>
 
                        </div>
                        <div class="text-body-extra-small font-medium text-neutral-400 whitespace-pre-wrap">© 2025 Pawpaw Technology. All rights reserved. </div>
                    </div>
                </div>
                
                <!-- 桌面端导航菜单 - 只在md及以上显示 -->
                <div
                    class="col-span-1 md:col-span-6 grid-cols-2 sm:grid-cols-4 self-stretch overflow-hidden shrink-0 items-start justify-end gap-6 sm:gap-8 text-body-small sm:text-body-medium mt-6 md:mt-0 hidden md:grid">
                    <div
                        class="col-span-1 self-stretch w-full sm:w-auto md:w-[160px] overflow-hidden shrink-0 flex flex-col items-start justify-start gap-2 sm:gap-3">
                        <div class="text-body-small text-body-medium font-medium">Company</div>
                        <div class="flex flex-col items-start justify-start gap-1 text-body-small text-neutral-400">
                            <a href="/en/about/" class="text-body-small font-medium">About</a>
                            <a href="/en/support/" class="text-body-small font-medium">Contact Us</a>
                        </div>
                    </div>
                    <div
                        class="col-span-1 self-stretch w-full sm:w-auto md:w-[160px] overflow-hidden shrink-0 flex flex-col items-start justify-start gap-2 sm:gap-3">
                        <div class="text-body-small text-body-medium font-medium">Solutions</div>
                        <div class="flex flex-col items-start justify-start gap-1 text-body-small text-neutral-400">
                            <a href="/en/solutions/#Consumers" class="text-body-small font-medium">Consumers</a>
                            <a href="/en/solutions/#Professional Audio" class="text-body-small font-medium">Professional Audio</a>
                            <a href="/en/solutions/#Voice Interface" class="text-body-small font-medium">Voice Interface</a>
                        </div>
                    </div>
                    <div
                        class="col-span-1 self-stretch w-full sm:w-auto md:w-[160px] overflow-hidden shrink-0 flex flex-col items-start justify-start gap-2 sm:gap-3">
                        <div class="text-body-small text-body-medium font-medium">Application</div>
                        <div class="flex flex-col items-start justify-start gap-1 text-body-small text-neutral-400">
                            <a href="/en/applications/conference-meeting/" class="text-body-small font-medium">Conference System</a>
                            <a href="/en/applications/live-streaming/" class="text-body-small font-medium">Live Streaming</a>
                        </div>
                    </div>
                    <div
                        class="col-span-1 self-stretch w-full sm:w-auto md:w-[160px] overflow-hidden shrink-0 flex flex-col items-start justify-start gap-2 sm:gap-3">
                        <div class="text-body-small text-body-medium font-medium">Media</div>
                        <div class="flex flex-col items-start justify-start gap-1 text-body-small text-neutral-400">
                            <a href="/en/news/" class="text-body-small font-medium">Newsroom</a>
                            <a href="/en/news/category/blog/" class="text-body-small font-medium">Blog</a>
                        </div>
                    </div>
                </div>
                
                <!-- 移动端折叠式导航菜单 - 只在小于md尺寸时显示 -->
                <div class="col-span-1 w-full md:hidden mt-6" x-data="{ activeTab: null }">
                    <div class="flex flex-col items-start justify-start gap-2">
                        <!-- Company 折叠项 -->
                        <div class="w-full">
                            <div 
                                class="text-body-small text-body-medium font-medium w-full flex justify-between items-center cursor-pointer py-2"
                                @click="activeTab = activeTab === 'company' ? null : 'company'"
                            >
                                <span>Company</span>
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 transition-transform duration-200" :class="activeTab === 'company' ? 'rotate-180' : ''">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                </svg>
                            </div>
                            <div 
                                class="flex flex-col items-left justify-start gap-2 text-body-small text-neutral-400 overflow-hidden transition-all duration-300 ease-in-out px-2"
                                x-ref="companyPanel"
                                x-bind:style="activeTab === 'company' ? 'max-height: ' + $refs.companyPanel.scrollHeight + 'px; opacity: 1; margin-top: 0.5rem; margin-bottom: 0.5rem;' : 'max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0;'"
                            >
                                <a href="/en/about/" class="text-body-small font-medium py-1">About</a>
                                <a href="/en/support/" class="text-body-small font-medium py-1">Contact Us</a>
                            </div>
                        </div>
                        
                        <!-- Solutions 折叠项 -->
                        <div class="w-full">
                            <div 
                                class="text-body-small text-body-medium font-medium w-full flex justify-between items-center cursor-pointer py-2"
                                @click="activeTab = activeTab === 'solutions' ? null : 'solutions'"
                            >
                                <span>Solutions</span>
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 transition-transform duration-200" :class="activeTab === 'solutions' ? 'rotate-180' : ''">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                </svg>
                            </div>
                            <div 
                                class="flex flex-col items-left justify-start gap-2 text-body-small text-neutral-400 overflow-hidden transition-all duration-300 ease-in-out px-2"
                                x-ref="solutionsPanel"
                                x-bind:style="activeTab === 'solutions' ? 'max-height: ' + $refs.solutionsPanel.scrollHeight + 'px; opacity: 1; margin-top: 0.5rem; margin-bottom: 0.5rem;' : 'max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0;'"
                            >
                                <a href="/en/solutions/#Consumers" class="text-body-small font-medium py-1">Consumers</a>
                                <a href="/en/solutions/#Professional Audio" class="text-body-small font-medium py-1">Professional Audio</a>
                                <a href="/en/solutions/#Voice Interface" class="text-body-small font-medium py-1">Voice Interface</a>
                            </div>
                        </div>
                        
                        <!-- Applications 折叠项 -->
                        <div class="w-full">
                            <div 
                                class="text-body-small text-body-medium font-medium w-full flex justify-between items-center cursor-pointer py-2"
                                @click="activeTab = activeTab === 'applications' ? null : 'applications'"
                            >
                                <span>Application</span>
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 transition-transform duration-200" :class="activeTab === 'applications' ? 'rotate-180' : ''">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                </svg>
                            </div>
                            <div 
                                class="flex flex-col items-left justify-start gap-2 text-body-small text-neutral-400 overflow-hidden transition-all duration-300 ease-in-out px-2"
                                x-ref="applicationsPanel"
                                x-bind:style="activeTab === 'applications' ? 'max-height: ' + $refs.applicationsPanel.scrollHeight + 'px; opacity: 1; margin-top: 0.5rem; margin-bottom: 0.5rem;' : 'max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0;'"
                            >
                                <a href="/en/applications/conference-meeting/" class="text-body-small font-medium py-1">Conference System</a>
                                <a href="/en/applications/live-streaming/" class="text-body-small font-medium py-1">Live Streaming</a>
                            </div>
                        </div>
                        
                        <!-- Media 折叠项 -->
                        <div class="w-full">
                            <div 
                                class="text-body-small text-body-medium font-medium w-full flex justify-between items-center cursor-pointer py-2"
                                @click="activeTab = activeTab === 'media' ? null : 'media'"
                            >
                                <span>Media</span>
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 transition-transform duration-200" :class="activeTab === 'media' ? 'rotate-180' : ''">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                </svg>
                            </div>
                            <div 
                                class="flex flex-col items-left justify-start gap-2 text-body-small text-neutral-400 overflow-hidden transition-all duration-300 ease-in-out px-2"
                                x-ref="mediaPanel"
                                x-bind:style="activeTab === 'media' ? 'max-height: ' + $refs.mediaPanel.scrollHeight + 'px; opacity: 1; margin-top: 0.5rem; margin-bottom: 0.5rem;' : 'max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0;'"
                            >
                                <a href="/en/news/" class="text-body-small font-medium py-1">Newsroom</a>
                                <a href="/en/news/category/blog/" class="text-body-small font-medium py-1">Blog</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div
                class="self-stretch border-dimgray border-t-[1px] border-solid box-border h-auto overflow-hidden shrink-0 
                flex flex-col items-start justify-start mt-4 sm:mt-5 pt-3 sm:pt-4 gap-1 md:gap-3 text-neutral-400"
                >
                <div class="w-full flex flex-col md:flex-row items-center justify-between gap-2 md:gap-0">
                    <div class="text-body-extra-small">
                        <a href="/en/privacy/" class="hover:text-white">Privacy Policy</a>
                    </div>
                    <div class="flex flex-row items-center justify-start gap-3 mt-2 sm:mt-0">
                        <div class="text-body-extra-small font-medium flex gap-2 text-center">
                            
                            
                            
                            
                            <a href="/zh-hans/" 
                               class="language-link hover:text-white text-nowrap  text-neutral-400 ">
                                简体中文
                            </a>
                            
                            <a href="/en/" 
                               class="language-link hover:text-white text-nowrap  font-bold text-white ">
                                English
                            </a>
                            
                        </div>
                    </div>
                </div>
                <div class="w-full text-neutral-400 text-center sm:text-left">
                    <a class="text-[inherit] text-body-extra-small hover:text-white text-nowrap" href="https://beian.miit.gov.cn/#/Integrated/recordQuery"
                        target="_blank">Guangdong ICP No. 2021009045-3</a>
                    <a class="text-[inherit] text-body-extra-small hover:text-white text-nowrap" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030402005402"
                        target="_blank">Guangdong Public Network Security No. 44030402005402</a>
                </div>
            </div>
        </div>
    </div>

<!-- 语言切换功能脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 设置语言切换链接
    try {
        const path = window.location.href.match(/\/(zh-hans|en)\/(.*)/);
        if (path && path.length >= 3) {
            const langPath = path[2];
            document.querySelectorAll('.language-link').forEach((link) => {
                // 保留原始链接的语言代码部分，但更新后面的路径
                const langCode = link.getAttribute('href').replace(/^\/([^\/]+)\/.*$/, '/$1/');
                link.href = langCode + langPath;
            });
        }
    } catch (e) {
        console.error('页脚语言链接设置失败:', e);
    }
});
</script>

    


<!-- 透明蒙版 - 仅在移动设备上显示 -->
<div x-data="{}"
    x-show="$store.cookieConsent.isVisible"
    @click="$store.cookieConsent.overlayClicked()"
    class="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"></div>

<div x-data="cookieConsent"
     x-show="isVisible"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0 transform translate-y-4"
     x-transition:enter-end="opacity-100 transform translate-y-0"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100 transform translate-y-0"
     x-transition:leave-end="opacity-0 transform translate-y-4"
     class="fixed bottom-0 inset-x-0 z-50 p-4 hidden-initially" id="cookie-consent-banner">
    <div class="w-full items-center bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden max-w-full" @click.stop>
        <div class="p-6 w-full">
            <div class="flex flex-col lg:flex-row lg:items-center gap-4 justify-between w-full">
                <div class="lg:flex-1 lg:pr-8 w-full flex items-center">
                    <p class="text-body-medium text-gray-600">
                        We use cookies to enhance your experience on our website. By clicking "Accept All", you agree to the use of cookies on this website. You can also "Customize" your cookie preferences.
                        <a href="/en/privacy/" class="text-primary">Privacy Policy</a>
                    </p>
                </div>
                <div class="flex flex-col sm:flex-row w-full sm:w-auto gap-3 mt-4 lg:mt-0 whitespace-nowrap">
                    <button @click="acceptAll" class="bg-primary hover:bg-primary-hover font-semibold text-white py-2 px-4 rounded-full transition-colors w-full sm:w-auto whitespace-nowrap">
                        Accept All
                    </button>
                    <button @click="toggleSettings" class="border border-gray-300 hover:bg-gray-100 font-semibold py-2 px-4 rounded-full transition-colors w-full sm:w-auto whitespace-nowrap">
                        Customize
                    </button>
                    <button @click="close" class="text-gray-500 hover:text-gray-700 hidden md:block">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Cookie Settings Panel -->
        <div x-show="showSettings" 
             x-collapse 
             class="p-6 flex justify-end">
             <div class="flex flex-col">
                <h4 class="font-bold mb-4">Cookie Settings</h4>
                <div class="space-y-4">
                    <div class="flex items-start">
                        <div class="flex items-center h-6">
                            <input id="necessary-cookies" name="necessary-cookies" type="checkbox" checked disabled
                                class="h-4 w-4 rounded-[6px] border-dark-4 text-primary">
                        </div>
                        <div class="ml-3">
                            <label for="necessary-cookies" class="font-medium">Necessary Cookies</label>
                            <p class="text-body-small text-gray-500">These cookies are required for the website to function and cannot be disabled.</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="flex items-center h-6">
                            <input id="analytics-cookies" name="analytics-cookies" type="checkbox" x-model="settings.analytics"
                                class="h-4 w-4 rounded-[6px] border-dark-4 text-primary">
                        </div>
                        <div class="ml-3">
                            <label for="analytics-cookies" class="font-medium">Analytics Cookies</label>
                            <p class="text-body-small text-gray-500">These cookies help us understand how visitors interact with our website.</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="flex items-center h-6">
                            <input id="marketing-cookies" name="marketing-cookies" type="checkbox" x-model="settings.marketing"
                                class="h-4 w-4 rounded-[6px] border-dark-4 text-primary">
                        </div>
                        <div class="ml-3">
                            <label for="marketing-cookies" class="font-medium">Marketing Cookies</label>
                            <p class="text-body-small text-gray-500">These cookies are used to track effectiveness of marketing campaigns.</p>
                        </div>
                    </div>
                </div>
                <div class="mt-6">
                    <button @click="saveSettings" class="bg-primary hover:bg-primary-hover text-white py-2 px-4 rounded-md transition-colors">
                        Save Preferences
                    </button>
                </div>
            </div>
        </div>
    </div>
</div> 
    
    <script>
      (() => {
          document.querySelectorAll(".markdown-area table").forEach((table) => table.classList.add("table"));
      })()
    </script>
    
    <!-- 子模板可以在这里添加JavaScript -->
    
  </body>
</html>
