SMANAGE/TempLate/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 lg:grid-cols-2 gap-12">
                <div class="space-y-8">
                    <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>
                <div class="bg-white rounded-xl p-8 md:p-10 shadow-elevated">
                    <h3 class="text-2xl font-semibold mb-8">发送消息</h3>
                    <form class="space-y-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="name" class="block text-sm font-medium text-accent mb-2">姓名</label>
                                <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all-300" placeholder="请输入您的姓名">
                            </div>
                            <div>
                                <label for="phone" class="block text-sm font-medium text-accent mb-2">电话</label>
                                <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all-300" placeholder="请输入您的联系电话">
                            </div>
                        </div>
                        <div>
                            <label for="email" class="block text-sm font-medium text-accent mb-2">电子邮箱</label>
                            <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all-300" placeholder="请输入您的电子邮箱">
                        </div>
                        <div>
                            <label for="subject" class="block text-sm font-medium text-accent mb-2">主题</label>
                            <select id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all-300 bg-white">
                                <option value="" disabled selected>请选择咨询主题</option>
                                <option value="project">项目咨询</option>
                                <option value="service">服务资讯</option>
                                <option value="cooperation">相关合作</option>
                                <option value="invite">加入申请</option>
                                <option value="other">其他问题</option>
                            </select>
                        </div>
                        <div>
                            <label for="message" class="block text-sm font-medium text-accent mb-2">留言内容</label>
                            <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all-300 resize-none"placeholder="请描述您的问题或建议..."></textarea>
                        </div>
                        <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all-300 flex items-center justify-center gap-2"><span>提交留言</span><i class="fa fa-paper-plane"></i></button>
                    </form>
                </div>
            </div>
        </div>
    </main>
</div>