feat: add form validation to contact section with Zod

src/components/sections/contact-section.tsx

@@ -1,27 +1,98 @@
 'use client';
 
-import { useState } from 'react';
-import { motion } from 'framer-motion';
-import { useInView } from 'framer-motion';
-import { useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
+import { z } from 'zod';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Mail, Phone, MapPin, Send, Loader2, Clock, MessageCircle, HeadphonesIcon, Sparkles } from 'lucide-react';
+import { Mail, Phone, MapPin, Send, Loader2, Clock, HeadphonesIcon, CheckCircle2 } from 'lucide-react';
 import { COMPANY_INFO } from '@/lib/constants';
 
+const contactFormSchema = z.object({
+  name: z.string().min(2, '姓名至少需要2个字符'),
+  phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入有效的手机号码'),
+  email: z.string().email('请输入有效的邮箱地址'),
+  message: z.string().min(10, '留言内容至少需要10个字符'),
+});
+
+type ContactFormData = z.infer<typeof contactFormSchema>;
+
+interface FormErrors {
+  name?: string;
+  phone?: string;
+  email?: string;
+  message?: string;
+}
+
 export function ContactSection() {
-  const ref = useRef(null);
-  const isInView = useInView(ref, { once: true, margin: '-100px' });
+  const [isVisible, setIsVisible] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isSubmitted, setIsSubmitted] = useState(false);
+  const [formData, setFormData] = useState<ContactFormData>({
+    name: '',
+    phone: '',
+    email: '',
+    message: '',
+  });
+  const [errors, setErrors] = useState<FormErrors>({});
+  const sectionRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  const validateField = (field: keyof ContactFormData, value: string) => {
+    try {
+      contactFormSchema.shape[field].parse(value);
+      setErrors((prev) => ({ ...prev, [field]: undefined }));
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        setErrors((prev) => ({ ...prev, [field]: error.errors[0].message }));
+      }
+    }
+  };
+
+  const handleChange = (field: keyof ContactFormData, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    if (errors[field]) {
+      validateField(field, value);
+    }
+  };
+
+  const handleBlur = (field: keyof ContactFormData, value: string) => {
+    validateField(field, value);
+  };
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
+    
+    const result = contactFormSchema.safeParse(formData);
+    
+    if (!result.success) {
+      const fieldErrors: FormErrors = {};
+      result.error.errors.forEach((error) => {
+        const field = error.path[0] as keyof ContactFormData;
+        fieldErrors[field] = error.message;
+      });
+      setErrors(fieldErrors);
+      return;
+    }
+
     setIsSubmitting(true);
     
-    // Simulate form submission
     await new Promise(resolve => setTimeout(resolve, 1500));
     
     setIsSubmitting(false);
@@ -29,182 +100,197 @@ export function ContactSection() {
   }
 
   return (
-    <section id="contact" className="py-24 bg-[#FAF8F8]" ref={ref}>
-      <div className="container-custom">
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          animate={isInView ? { opacity: 1, y: 0 } : {}}
-          transition={{ duration: 0.6 }}
-          className="text-center max-w-3xl mx-auto mb-16"
+    <section id="contact" className="section-padding relative" ref={sectionRef}>
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute bottom-0 left-0 w-96 h-96 bg-gradient-radial from-[#C41E3A]/3 to-transparent rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
+      </div>
+
+      <div className="container-wide relative z-10">
+        <div 
+          className={`
+            mb-16 opacity-0 translate-y-4
+            ${isVisible ? 'animate-fade-in-up' : ''}
+          `}
         >
-          <span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
-            联系我们
-          </span>
-          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
-            与我们取得<span className="text-[#C41E3A]">联系</span>
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-8 h-px bg-[#C41E3A]" />
+            <span className="text-sm text-[#525252] tracking-wide">联系我们</span>
+          </div>
+          <h2 className="text-3xl sm:text-4xl font-semibold text-[#171717] tracking-tight chapter-title">
+            开启合作
           </h2>
-          <p className="text-lg text-[#4A4A4A]">
+          <p className="mt-4 text-[#737373] max-w-2xl">
             无论您有任何问题或合作意向，我们都很乐意与您交流
           </p>
-        </motion.div>
+        </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
-          {/* Contact Info */}
-          <motion.div 
-            initial={{ opacity: 0, x: -20 }}
-            animate={isInView ? { opacity: 1, x: 0 } : {}}
-            transition={{ duration: 0.6, delay: 0.2 }}
-            className="flex flex-col gap-6 h-full"
+        <div className="grid lg:grid-cols-5 gap-12 lg:gap-16">
+          <div 
+            className={`
+              lg:col-span-2 space-y-8
+              opacity-0 translate-y-4
+              ${isVisible ? 'animate-fade-in-up stagger-1' : ''}
+            `}
           >
-            <Card className="flex-1 flex flex-col border-[#E8E0E0] bg-white">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-[#1A1A1A]">
-                  <Sparkles className="w-5 h-5 text-[#C41E3A]" />
-                  我们的承诺
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-6 flex-1">
-                <div className="flex items-start gap-4">
-                  <div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center flex-shrink-0">
-                    <HeadphonesIcon className="w-5 h-5 text-[#C41E3A]" />
+            <div>
+              <h3 className="text-lg font-semibold text-[#171717] mb-6">联系方式</h3>
+              <div className="space-y-4">
+                <div className="flex items-start gap-4 group">
+                  <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
+                    <Mail className="w-5 h-5 text-white" />
                   </div>
                   <div>
-                    <h3 className="font-semibold text-[#1A1A1A]">专业响应</h3>
-                    <p className="text-[#6B6B6B]">工作日 2 小时内快速响应您的咨询</p>
+                    <p className="text-sm text-[#737373] mb-1">邮箱</p>
+                    <a href={`mailto:${COMPANY_INFO.email}`} className="text-[#171717] hover:text-[#C41E3A] transition-colors duration-200">
+                      {COMPANY_INFO.email}
+                    </a>
                   </div>
                 </div>
-                <div className="flex items-start gap-4">
-                  <div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center flex-shrink-0">
-                    <MessageCircle className="w-5 h-5 text-[#C41E3A]" />
+                <div className="flex items-start gap-4 group">
+                  <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
+                    <Phone className="w-5 h-5 text-white" />
                   </div>
                   <div>
-                    <h3 className="font-semibold text-[#1A1A1A]">免费咨询</h3>
-                    <p className="text-[#6B6B6B]">提供免费的业务咨询和方案评估服务</p>
+                    <p className="text-sm text-[#737373] mb-1">电话</p>
+                    <a href={`tel:${COMPANY_INFO.phone}`} className="text-[#171717] hover:text-[#C41E3A] transition-colors duration-200">
+                      {COMPANY_INFO.phone}
+                    </a>
                   </div>
                 </div>
-                <div className="flex items-start gap-4">
-                  <div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center flex-shrink-0">
-                    <Sparkles className="w-5 h-5 text-[#C41E3A]" />
+                <div className="flex items-start gap-4 group">
+                  <div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
+                    <MapPin className="w-5 h-5 text-white" />
                   </div>
                   <div>
-                    <h3 className="font-semibold text-[#1A1A1A]">定制方案</h3>
-                    <p className="text-[#6B6B6B]">根据您的需求量身定制最优解决方案</p>
+                    <p className="text-sm text-[#737373] mb-1">地址</p>
+                    <p className="text-[#171717]">{COMPANY_INFO.address}</p>
                   </div>
                 </div>
-              </CardContent>
-            </Card>
+              </div>
+            </div>
 
-            <Card className="border-[#E8E0E0] bg-white">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-[#1A1A1A]">
-                  <Clock className="w-5 h-5 text-[#C41E3A]" />
-                  工作时间
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-2">
-                  <div className="flex justify-between">
-                    <span className="text-[#6B6B6B]">周一至周五</span>
-                    <span className="text-[#1A1A1A] font-medium">9:00 - 18:00</span>
-                  </div>
+            <div className="geometric-card p-5 rounded-lg">
+              <div className="flex items-center gap-2 mb-3">
+                <Clock className="w-4 h-4 text-[#C41E3A]" />
+                <h4 className="text-sm font-medium text-[#171717]">工作时间</h4>
+              </div>
+              <div className="space-y-1">
+                <div className="flex justify-between text-sm">
+                  <span className="text-[#737373]">周一至周五</span>
+                  <span className="text-[#C41E3A]">9:00 - 18:00</span>
                 </div>
-              </CardContent>
-            </Card>
-          </motion.div>
+              </div>
+            </div>
 
-          {/* Contact Form */}
-          <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            animate={isInView ? { opacity: 1, x: 0 } : {}}
-            transition={{ duration: 0.6, delay: 0.3 }}
-            className="h-full"
+            <div className="geometric-card p-5 rounded-lg">
+              <div className="flex items-center gap-2 mb-3">
+                <HeadphonesIcon className="w-4 h-4 text-[#C41E3A]" />
+                <h4 className="text-sm font-medium text-[#171717]">我们的承诺</h4>
+              </div>
+              <div className="space-y-3">
+                <div className="flex items-start gap-2">
+                  <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
+                  <p className="text-sm text-[#737373]">工作日 2 小时内快速响应您的咨询</p>
+                </div>
+                <div className="flex items-start gap-2">
+                  <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
+                  <p className="text-sm text-[#737373]">提供免费的业务咨询和方案评估服务</p>
+                </div>
+                <div className="flex items-start gap-2">
+                  <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
+                  <p className="text-sm text-[#737373]">根据您的需求量身定制最优解决方案</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div 
+            className={`
+              lg:col-span-3
+              opacity-0 translate-y-4
+              ${isVisible ? 'animate-fade-in-up stagger-2' : ''}
+            `}
           >
-            <Card className="h-full flex flex-col border-[#E8E0E0] bg-white">
-              <CardHeader>
-                <CardTitle className="text-[#1A1A1A]">发送消息</CardTitle>
-              </CardHeader>
-              <CardContent>
-                {isSubmitted ? (
-                  <div className="text-center py-12">
-                    <div className="w-16 h-16 bg-[#FEF2F4] rounded-full flex items-center justify-center mx-auto mb-4">
-                      <Send className="w-8 h-8 text-[#C41E3A]" />
-                    </div>
-                    <h3 className="text-xl font-semibold text-[#1A1A1A] mb-2">消息已发送</h3>
-                    <p className="text-[#6B6B6B]">感谢您的留言，我们会尽快与您联系！</p>
+            <div className="geometric-card p-6 sm:p-8 rounded-lg">
+              <h3 className="text-lg font-semibold text-[#171717] mb-6">发送消息</h3>
+              
+              {isSubmitted ? (
+                <div className="text-center py-12">
+                  <div className="w-16 h-16 bg-[#C41E3A] rounded-full flex items-center justify-center mx-auto mb-4 animate-stamp-in">
+                    <CheckCircle2 className="w-8 h-8 text-white" />
                   </div>
-                ) : (
-                  <form onSubmit={handleSubmit} className="space-y-6">
-                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                      <div className="space-y-2">
-                        <label htmlFor="name" className="text-sm font-medium text-[#1A1A1A]">
-                          姓名
-                        </label>
-                        <Input 
-                          id="name" 
-                          placeholder="请输入您的姓名" 
-                          required 
-                          className="border-[#E8E0E0] focus:border-[#C41E3A] focus:ring-[#C41E3A]/20"
-                        />
-                      </div>
-                      <div className="space-y-2">
-                        <label htmlFor="phone" className="text-sm font-medium text-[#1A1A1A]">
-                          电话
-                        </label>
-                        <Input 
-                          id="phone" 
-                          type="tel" 
-                          placeholder="请输入您的电话" 
-                          required 
-                          className="border-[#E8E0E0] focus:border-[#C41E3A] focus:ring-[#C41E3A]/20"
-                        />
-                      </div>
-                    </div>
-                    <div className="space-y-2">
-                      <label htmlFor="email" className="text-sm font-medium text-[#1A1A1A]">
-                        邮箱
-                      </label>
-                      <Input 
-                        id="email" 
-                        type="email" 
-                        placeholder="请输入您的邮箱" 
-                        required 
-                        className="border-[#E8E0E0] focus:border-[#C41E3A] focus:ring-[#C41E3A]/20"
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <label htmlFor="message" className="text-sm font-medium text-[#1A1A1A]">
-                        留言内容
-                      </label>
-                      <Textarea 
-                        id="message" 
-                        placeholder="请输入您想咨询的内容" 
-                        rows={5}
-                        required 
-                        className="border-[#E8E0E0] focus:border-[#C41E3A] focus:ring-[#C41E3A]/20"
-                      />
-                    </div>
-                    <Button 
-                      type="submit" 
-                      className="w-full"
-                      disabled={isSubmitting}
-                    >
-                      {isSubmitting ? (
-                        <>
-                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                          发送中...
-                        </>
-                      ) : (
-                        <>
-                          <Send className="mr-2 h-4 w-4" />
-                          发送消息
-                        </>
-                      )}
-                    </Button>
-                  </form>
-                )}
-              </CardContent>
-            </Card>
-          </motion.div>
+                  <h4 className="text-xl font-semibold text-[#171717] mb-2">消息已发送</h4>
+                  <p className="text-[#737373]">感谢您的留言，我们会尽快与您联系！</p>
+                </div>
+              ) : (
+                <form onSubmit={handleSubmit} className="space-y-5">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <Input 
+                      label="姓名"
+                      id="name" 
+                      placeholder="请输入您的姓名" 
+                      required 
+                      value={formData.name}
+                      onChange={(e) => handleChange('name', e.target.value)}
+                      onBlur={(e) => handleBlur('name', e.target.value)}
+                      error={errors.name}
+                    />
+                    <Input 
+                      label="电话"
+                      id="phone" 
+                      type="tel" 
+                      placeholder="请输入您的电话" 
+                      required 
+                      value={formData.phone}
+                      onChange={(e) => handleChange('phone', e.target.value)}
+                      onBlur={(e) => handleBlur('phone', e.target.value)}
+                      error={errors.phone}
+                    />
+                  </div>
+                  <Input 
+                    label="邮箱"
+                    id="email" 
+                    type="email" 
+                    placeholder="请输入您的邮箱" 
+                    required 
+                    value={formData.email}
+                    onChange={(e) => handleChange('email', e.target.value)}
+                    onBlur={(e) => handleBlur('email', e.target.value)}
+                    error={errors.email}
+                  />
+                  <Textarea 
+                    label="留言内容"
+                    id="message" 
+                    placeholder="请输入您想咨询的内容" 
+                    rows={5}
+                    required 
+                    value={formData.message}
+                    onChange={(e) => handleChange('message', e.target.value)}
+                    onBlur={(e) => handleBlur('message', e.target.value)}
+                    error={errors.message}
+                  />
+                  <Button 
+                    type="submit" 
+                    size="lg"
+                    className="w-full group"
+                    disabled={isSubmitting}
+                  >
+                    {isSubmitting ? (
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        发送中...
+                      </>
+                    ) : (
+                      <>
+                        <Send className="mr-2 h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+                        发送消息
+                      </>
+                    )}
+                  </Button>
+                </form>
+              )}
+            </div>
+          </div>
         </div>
       </div>
     </section>