feat(components): 添加鼠标交互粒子效果和高级浮动效果组件
refactor(sections): 移除各区块的多余标签元素 style(contact-section): 优化联系表单布局和动画效果
This commit is contained in:
@@ -53,9 +53,6 @@ export function AboutSection() {
|
||||
className="max-w-4xl mx-auto"
|
||||
>
|
||||
<div className="text-center mb-16">
|
||||
<span className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#1C1C1C]/20 bg-[#F5F5F5] text-[#1C1C1C] text-sm font-medium mb-4">
|
||||
关于我们
|
||||
</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
关于 <span className="text-[#C41E3A]">{COMPANY_INFO.shortName}</span>
|
||||
</h2>
|
||||
|
||||
@@ -130,7 +130,7 @@ export function ContactSection() {
|
||||
<div className="grid lg:grid-cols-5 gap-12 lg:gap-16">
|
||||
<div
|
||||
className={`
|
||||
lg:col-span-2 space-y-8
|
||||
lg:col-span-2 space-y-8 flex flex-col
|
||||
opacity-0 translate-y-4
|
||||
${isVisible ? 'animate-fade-in-up stagger-1' : ''}
|
||||
`}
|
||||
@@ -209,16 +209,16 @@ export function ContactSection() {
|
||||
|
||||
<div
|
||||
className={`
|
||||
lg:col-span-3
|
||||
lg:col-span-3 flex flex-col
|
||||
opacity-0 translate-y-4
|
||||
${isVisible ? 'animate-fade-in-up stagger-2' : ''}
|
||||
`}
|
||||
>
|
||||
<div className="bg-[#F5F7FA] p-6 sm:p-8 rounded-lg border border-[#E2E8F0]">
|
||||
<div className="bg-[#F5F7FA] p-6 sm:p-8 rounded-lg border border-[#E2E8F0] flex-1 flex flex-col">
|
||||
<h3 className="text-lg font-semibold text-[#1A1A2E] mb-6">发送消息</h3>
|
||||
|
||||
{isSubmitted ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-center py-12 flex-1 flex items-center justify-center">
|
||||
<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>
|
||||
@@ -226,7 +226,7 @@ export function ContactSection() {
|
||||
<p className="text-[#718096]">感谢您的留言,我们会尽快与您联系!</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<form onSubmit={handleSubmit} className="space-y-5 flex-1 flex flex-col">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<Input
|
||||
label="姓名"
|
||||
@@ -275,7 +275,7 @@ export function ContactSection() {
|
||||
<Button
|
||||
type="submit"
|
||||
size="lg"
|
||||
className="w-full group"
|
||||
className="w-full group mt-auto"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
|
||||
@@ -20,9 +20,6 @@ export function NewsSection() {
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[#1C1C1C]/20 bg-[#F5F5F5] text-[#1C1C1C] text-sm font-medium mb-4">
|
||||
新闻动态
|
||||
</span>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
最新<span className="text-[#C41E3A]">资讯</span>
|
||||
</h2>
|
||||
|
||||
@@ -24,9 +24,6 @@ export function ProductsSection() {
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#1C1C1C]/20 bg-[#F5F5F5] text-[#1C1C1C] text-sm font-medium mb-4">
|
||||
产品服务
|
||||
</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
我们的<span className="text-[#C41E3A]">产品</span>
|
||||
</h2>
|
||||
|
||||
@@ -31,9 +31,6 @@ export function ServicesSection() {
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#1C1C1C]/20 bg-[#F5F5F5] text-[#1C1C1C] text-sm font-medium mb-4">
|
||||
核心业务
|
||||
</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
||||
我们的 <span className="text-[#C41E3A]">核心服务</span>
|
||||
</h2>
|
||||
|
||||
Reference in New Issue
Block a user