refactor: remove service detail modal component
This commit is contained in:
张翔
@@ -1,17 +1,22 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useRef } from 'react';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { motion } from 'framer-motion';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
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 { PageHeader } from '@/components/ui/page-header';
|
||||
import { Mail, Phone, MapPin, Send, Loader2 } from 'lucide-react';
|
||||
|
||||
export default function ContactPage() {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
const contentRef = useRef(null);
|
||||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
||||
|
||||
async function handleSubmit(_formData: FormData) {
|
||||
setIsSubmitting(true);
|
||||
@@ -23,75 +28,74 @@ export default function ContactPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pt-32 pb-20">
|
||||
<div className="container-custom">
|
||||
<div className="text-center max-w-3xl mx-auto mb-16">
|
||||
<Badge variant="outline" className="mb-4">
|
||||
联系我们
|
||||
</Badge>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-black mb-6">
|
||||
与我们取得联系
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600">
|
||||
无论您有任何问题或合作意向，我们都很乐意与您交流
|
||||
</p>
|
||||
</div>
|
||||
<div className="min-h-screen bg-white">
|
||||
<PageHeader
|
||||
badge="联系我们"
|
||||
title="与我们取得联系"
|
||||
description="无论您有任何问题或合作意向，我们都很乐意与您交流"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
|
||||
<div className="container-wide relative z-10 py-16" ref={contentRef}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto"
|
||||
>
|
||||
{/* Contact Info */}
|
||||
<div className="space-y-8">
|
||||
<Card>
|
||||
<Card className="border-[#E5E5E5]">
|
||||
<CardHeader>
|
||||
<CardTitle>联系方式</CardTitle>
|
||||
<CardTitle className="text-[#1C1C1C]">联系方式</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<MapPin className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-black">公司地址</h3>
|
||||
<p className="text-gray-600">{COMPANY_INFO.address}</p>
|
||||
<h3 className="font-semibold text-[#1C1C1C]">公司地址</h3>
|
||||
<p className="text-[#5C5C5C]">{COMPANY_INFO.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Phone className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-black">联系电话</h3>
|
||||
<p className="text-gray-600">{COMPANY_INFO.phone}</p>
|
||||
<h3 className="font-semibold text-[#1C1C1C]">联系电话</h3>
|
||||
<p className="text-[#5C5C5C]">{COMPANY_INFO.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Mail className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-black">电子邮箱</h3>
|
||||
<p className="text-gray-600">{COMPANY_INFO.email}</p>
|
||||
<h3 className="font-semibold text-[#1C1C1C]">电子邮箱</h3>
|
||||
<p className="text-[#5C5C5C]">{COMPANY_INFO.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Card className="border-[#E5E5E5]">
|
||||
<CardHeader>
|
||||
<CardTitle>工作时间</CardTitle>
|
||||
<CardTitle className="text-[#1C1C1C]">工作时间</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">周一至周五</span>
|
||||
<span className="text-black font-medium">9:00 - 18:00</span>
|
||||
<span className="text-[#5C5C5C]">周一至周五</span>
|
||||
<span className="text-[#1C1C1C] font-medium">9:00 - 18:00</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">周六</span>
|
||||
<span className="text-black font-medium">9:00 - 12:00</span>
|
||||
<span className="text-[#5C5C5C]">周六</span>
|
||||
<span className="text-[#1C1C1C] font-medium">9:00 - 12:00</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">周日</span>
|
||||
<span className="text-gray-400">休息</span>
|
||||
<span className="text-[#5C5C5C]">周日</span>
|
||||
<span className="text-[#8C8C8C]">休息</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -99,98 +103,108 @@ export default function ContactPage() {
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>发送消息</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isSubmitted ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Send className="w-8 h-8 text-green-600" />
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<Card className="border-[#E5E5E5]">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-[#1C1C1C]">发送消息</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isSubmitted ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Send className="w-8 h-8 text-green-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-2">消息已发送</h3>
|
||||
<p className="text-[#5C5C5C]">感谢您的留言，我们会尽快与您联系！</p>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-black mb-2">消息已发送</h3>
|
||||
<p className="text-gray-600">感谢您的留言，我们会尽快与您联系！</p>
|
||||
</div>
|
||||
) : (
|
||||
<form action={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
) : (
|
||||
<form action={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-[#1C1C1C] mb-2">
|
||||
姓名 *
|
||||
</label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="请输入您的姓名"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-[#1C1C1C] mb-2">
|
||||
电话
|
||||
</label>
|
||||
<Input
|
||||
id="phone"
|
||||
name="phone"
|
||||
type="tel"
|
||||
placeholder="请输入您的电话"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
姓名 *
|
||||
<label htmlFor="email" className="block text-sm font-medium text-[#1C1C1C] mb-2">
|
||||
邮箱 *
|
||||
</label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="请输入您的姓名"
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="请输入您的邮箱"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
电话
|
||||
<label htmlFor="subject" className="block text-sm font-medium text-[#1C1C1C] mb-2">
|
||||
主题 *
|
||||
</label>
|
||||
<Input
|
||||
id="phone"
|
||||
name="phone"
|
||||
type="tel"
|
||||
placeholder="请输入您的电话"
|
||||
id="subject"
|
||||
name="subject"
|
||||
placeholder="请输入消息主题"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
邮箱 *
|
||||
</label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="请输入您的邮箱"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
主题 *
|
||||
</label>
|
||||
<Input
|
||||
id="subject"
|
||||
name="subject"
|
||||
placeholder="请输入消息主题"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
消息内容 *
|
||||
</label>
|
||||
<Textarea
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder="请输入您想要咨询的内容"
|
||||
rows={5}
|
||||
required
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-[#1C1C1C] mb-2">
|
||||
消息内容 *
|
||||
</label>
|
||||
<Textarea
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder="请输入您想要咨询的内容"
|
||||
rows={5}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full bg-[#C41E3A] hover:bg-[#A01830] text-white"
|
||||
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>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user