首页已完成

2026-05-28 09:01:30 +08:00
parent acaf262f3f
commit 0cf72dc47f
30 changed files with 7227 additions and 0 deletions
@@ -0,0 +1,106 @@
+import { useState } from 'react';
+
+const productOptions = [
+  '校企益邦',
+  '商咖五级进阶',
+  '智慧党建平台',
+  '科研管理系统',
+];
+
+const initialFormState = {
+  name: '',
+  phone: '',
+  company: '',
+  product: '',
+  message: '',
+};
+
+export default function ContactForm() {
+  const [form, setForm] = useState(initialFormState);
+
+  function handleChange(e) {
+    const { name, value } = e.target;
+    setForm((prev) => ({ ...prev, [name]: value }));
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    alert(
+      '感谢您的咨询！\n\n' +
+        '姓名：' + form.name + '\n' +
+        '联系电话：' + form.phone + '\n' +
+        '单位名称：' + form.company + '\n' +
+        '关注产品：' + form.product + '\n' +
+        '留言内容：' + form.message + '\n\n' +
+        '我们将在1个工作日内与您联系！'
+    );
+    setForm(initialFormState);
+  }
+
+  const inputClass = 'w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#004ec4]/20 focus:border-[#004ec4]/40 transition-shadow placeholder-[#94a3b8] bg-white text-[#334155]';
+
+  return (
+    <section className="py-20 px-4 bg-white">
+      <div className="max-w-2xl mx-auto">
+        <div className="text-center mb-12">
+          <p className="text-xs text-[#004ec4] tracking-[0.25em] uppercase mb-3 font-semibold">Inquiry</p>
+          <h2 className="text-3xl md:text-4xl font-bold text-[#0f172a] mb-4">在线咨询</h2>
+          <p className="text-[#64748b] text-base">填写表单，我们将在 1 个工作日内与您联系</p>
+        </div>
+
+        <div className="bg-[#f8fafc] border border-gray-100 rounded-2xl p-8">
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-[#334155] mb-1.5">
+                姓名 <span className="text-red-400">*</span>
+              </label>
+              <input type="text" id="name" name="name" required value={form.name} onChange={handleChange}
+                placeholder="请输入您的姓名" className={inputClass} />
+            </div>
+
+            <div>
+              <label htmlFor="phone" className="block text-sm font-medium text-[#334155] mb-1.5">
+                联系电话 <span className="text-red-400">*</span>
+              </label>
+              <input type="tel" id="phone" name="phone" required value={form.phone} onChange={handleChange}
+                placeholder="请输入您的联系电话" className={inputClass} />
+            </div>
+
+            <div>
+              <label htmlFor="company" className="block text-sm font-medium text-[#334155] mb-1.5">单位名称</label>
+              <input type="text" id="company" name="company" value={form.company} onChange={handleChange}
+                placeholder="请输入您的单位名称" className={inputClass} />
+            </div>
+
+            <div>
+              <label htmlFor="product" className="block text-sm font-medium text-[#334155] mb-1.5">
+                关注产品 <span className="text-[#94a3b8] text-xs">(可选)</span>
+              </label>
+              <select id="product" name="product" value={form.product} onChange={handleChange}
+                className="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#004ec4]/20 focus:border-[#004ec4]/40 transition-shadow bg-white text-[#64748b]">
+                <option value="">请选择关注的产品</option>
+                {productOptions.map((product) => (
+                  <option key={product} value={product}>{product}</option>
+                ))}
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="message" className="block text-sm font-medium text-[#334155] mb-1.5">留言内容</label>
+              <textarea id="message" name="message" rows={4} value={form.message} onChange={handleChange}
+                placeholder="请输入您的留言内容" className={inputClass + ' resize-none'} />
+            </div>
+
+            <button
+              type="submit"
+              className="w-full py-3 text-white font-semibold rounded-xl text-sm transition-all focus:outline-none focus:ring-2 focus:ring-[#004ec4]/20 focus:ring-offset-2 hover:shadow-[0_4px_15px_rgba(0,78,196,0.25)]"
+              style={{ background: 'linear-gradient(135deg, #0078b8, #004ec4)' }}
+            >
+              提交咨询
+            </button>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}