SMANAGE/backup/www/ContactUS.html

<div class="min-h-screen flex flex-col">
    <main class="flex-grow py-12 md:py-20 px-4 md:px-8 lg:px-16">
        <div class="max-w-7xl mx-auto">
            <!-- 头部介绍 -->
            <div class="text-center mb-16">
                <h5 class="text-accent uppercase tracking-wider text-sm md:text-base mb-3">Get In Touch</h5>
                <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark leading-tight text-balance">联系我们</h1>
                <div class="w-20 h-1 bg-primary mx-auto mt-6"></div>
                <p class="mt-6 text-accent max-w-2xl mx-auto text-balance">无论您有任何问题、建议或合作意向，我们的团队都将竭诚为您提供专业、高效的解决方案</p>
            </div>

            <!-- 联系方式卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
                <div class="bg-white rounded-xl p-8 shadow-elevated hover:shadow-hover transition-all-300">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-map-marker text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">公司地址</h3>
                    <p class="text-accent">无物理地址</p>
                </div>
                <div class="bg-white rounded-xl p-8 shadow-elevated hover:shadow-hover transition-all-300">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-phone text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">联系电话</h3>
                    <p class="text-accent mb-2">182-2215-2539</p>
                    <p class="text-accent text-sm">周末 9:00 - 22:00</p>
                </div>
                <div class="bg-white rounded-xl p-8 shadow-elevated hover:shadow-hover transition-all-300">
                    <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                        <i class="fa fa-envelope text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">电子邮箱</h3>
                    <p class="text-accent">support@gvsds.com</p>
                    <p class="text-accent text-sm mt-2">48 小时内回复</p>
                </div>
            </div>

            <!-- 扫码咨询区域 -->
            <section class="bg-white p-8 md:p-12 rounded-xl shadow-elevated mb-20">
                <h2 class="text-2xl md:text-[1.8rem] font-semibold mb-3 pb-4 border-b border-gray-200 inline-block">咨询报价</h2>
                <p class="text-accent max-w-[800px] mb-4 leading-[1.8]">
                    有定制开发需求？我们随时为您服务。无论您需要定制开发、开源项目二次开发，还是长期的运营维护，我们都能提供高性价比的解决方案。
                </p>
                <p class="text-accent max-w-[800px] mb-12 leading-[1.8]">
                    注意：添加企业微信或微信，请备注"咨询报价"明确来意。
                </p>

                <div class="flex justify-center gap-8 md:gap-16 flex-wrap">
                    <!-- 企业微信 -->
                    <div class="w-[260px] p-8 bg-gray-50 rounded-xl text-center transition-all duration-300 ease-[cubic-bezier(0.25,0.8,0.25,1)] hover:-translate-y-1.5 hover:shadow-[0_10px_15px_-3px_rgba(0,0,0,0.08),0_4px_6px_-2px_rgba(0,0,0,0.04)] hover:bg-white">
                        <h3 class="text-base font-medium mb-6 tracking-[0.3px]">企业微信</h3>
                        <div class="w-[180px] h-[180px] mx-auto mb-6 border border-gray-200 p-3 bg-white rounded-lg flex items-center justify-center">
                            <img src="/Project/Service/ContactInfo/wecom.jpg" alt="企业微信二维码" class="w-full h-full object-contain">
                        </div>
                        <p class="text-sm text-accent leading-[1.6]">扫码添加企业微信，一对一沟通报价</p>
                    </div>

                    <!-- 微信 -->
                    <div class="w-[260px] p-8 bg-gray-50 rounded-xl text-center transition-all duration-300 ease-[cubic-bezier(0.25,0.8,0.25,1)] hover:-translate-y-1.5 hover:shadow-[0_10px_15px_-3px_rgba(0,0,0,0.08),0_4px_6px_-2px_rgba(0,0,0,0.04)] hover:bg-white">
                        <h3 class="text-base font-medium mb-6 tracking-[0.3px]">微信</h3>
                        <div class="w-[180px] h-[180px] mx-auto mb-6 border border-gray-200 p-3 bg-white rounded-lg flex items-center justify-center">
                            <img src="/Project/Service/ContactInfo/wx.jpg" alt="微信二维码" class="w-full h-full object-contain">
                        </div>
                        <p class="text-sm text-accent leading-[1.6]">微信：GVSADS，备注咨询报价</p>
                    </div>

                    <!-- QQ -->
                    <div class="w-[260px] p-8 bg-gray-50 rounded-xl text-center transition-all duration-300 ease-[cubic-bezier(0.25,0.8,0.25,1)] hover:-translate-y-1.5 hover:shadow-[0_10px_15px_-3px_rgba(0,0,0,0.08),0_4px_6px_-2px_rgba(0,0,0,0.04)] hover:bg-white">
                        <h3 class="text-base font-medium mb-6 tracking-[0.3px]">QQ</h3>
                        <div class="w-[180px] h-[180px] mx-auto mb-6 border border-gray-200 p-3 bg-white rounded-lg flex items-center justify-center">
                            <img src="/Project/Service/ContactInfo/qq.png" alt="QQ二维码" class="w-full h-full object-contain">
                        </div>
                        <p class="text-sm text-accent leading-[1.6]">扫码添加QQ，获取详细报价方案</p>
                    </div>
                </div>
            </section>

            <!-- 服务流程 -->
            <section class="mb-12">
                <h2 class="text-2xl md:text-[1.8rem] font-semibold text-center mb-16">标准化交付流程</h2>
                <div class="flex justify-between relative px-4 md:px-8 flex-wrap">
                    <!-- 流程连接线 -->
                    <div class="absolute top-5 left-[8%] right-[8%] h-0.5 bg-gray-200 hidden md:block"></div>

                    <div class="flex-1 min-w-[150px] text-center relative px-3 mb-8">
                        <div class="w-10 h-10 bg-slate-800 text-white rounded-full flex items-center justify-center mx-auto mb-6 text-sm">1</div>
                        <h4 class="text-[0.95rem] font-medium mb-3">需求沟通与评估</h4>
                        <p class="text-sm text-accent leading-[1.7]">深入沟通企业需求，评估技术方案与开发成本，提供详细报价与排期。</p>
                    </div>

                    <div class="flex-1 min-w-[150px] text-center relative px-3 mb-8">
                        <div class="w-10 h-10 bg-slate-800 text-white rounded-full flex items-center justify-center mx-auto mb-6 text-sm">2</div>
                        <h4 class="text-[0.95rem] font-medium mb-3">方案设计与确认</h4>
                        <p class="text-sm text-accent leading-[1.7]">输出技术方案、原型设计、功能清单，确认后签订合同启动开发。</p>
                    </div>

                    <div class="flex-1 min-w-[150px] text-center relative px-3 mb-8">
                        <div class="w-10 h-10 bg-slate-800 text-white rounded-full flex items-center justify-center mx-auto mb-6 text-sm">3</div>
                        <h4 class="text-[0.95rem] font-medium mb-3">开发与阶段性交付</h4>
                        <p class="text-sm text-accent leading-[1.7]">分阶段开发与交付，定期同步进度，支持中途需求微调。</p>
                    </div>

                    <div class="flex-1 min-w-[150px] text-center relative px-3 mb-8">
                        <div class="w-10 h-10 bg-slate-800 text-white rounded-full flex items-center justify-center mx-auto mb-6 text-sm">4</div>
                        <h4 class="text-[0.95rem] font-medium mb-3">测试与上线部署</h4>
                        <p class="text-sm text-accent leading-[1.7]">全面功能测试、性能测试，完成后部署上线，提供操作培训。</p>
                    </div>

                    <div class="flex-1 min-w-[150px] text-center relative px-3 mb-8">
                        <div class="w-10 h-10 bg-slate-800 text-white rounded-full flex items-center justify-center mx-auto mb-6 text-sm">5</div>
                        <h4 class="text-[0.95rem] font-medium mb-3">售后维护与迭代</h4>
                        <p class="text-sm text-accent leading-[1.7]">提供 7×24h 售后支持，定期系统维护，按需进行功能迭代。</p>
                    </div>
                </div>
            </section>
        </div>
    </main>
</div>