feat: 重构网站UI设计并优化布局结构
重构整体UI设计，采用红色主题配色方案 优化页面布局结构，将Header和Footer移至page组件 更新按钮样式和交互效果，增强视觉反馈 调整全局字体配置，使用思源黑体作为中文字体 改进各区块卡片样式，增加悬停动画效果 优化响应式设计，提升移动端体验
This commit is contained in:
张翔
@@ -3,7 +3,6 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Check, TrendingUp } from 'lucide-react';
|
||||
@@ -14,7 +13,7 @@ export function ProductsSection() {
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="products" className="py-24 bg-gray-50" ref={ref}>
|
||||
<section id="products" className="py-24 bg-[#FAF8F8]" ref={ref}>
|
||||
<div className="container-custom">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -22,13 +21,13 @@ export function ProductsSection() {
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
>
|
||||
<Badge variant="outline" className="mb-4">
|
||||
<span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
|
||||
产品服务
|
||||
</Badge>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-black mb-6">
|
||||
我们的产品
|
||||
</span>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
|
||||
我们的<span className="text-[#C41E3A]">产品</span>
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
<p className="text-lg text-[#4A4A4A]">
|
||||
自主研发的企业级产品，助力企业高效运营，实现数字化转型
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -41,28 +40,28 @@ export function ProductsSection() {
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
|
||||
>
|
||||
<Card className="h-full flex flex-col group hover:shadow-lg transition-shadow">
|
||||
<Card className="h-full flex flex-col border-[#E8E0E0] bg-white hover:border-[#C41E3A]/30 hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300 hover:-translate-y-1 group">
|
||||
<CardHeader>
|
||||
<Badge variant="secondary" className="w-fit mb-3">
|
||||
<span className="inline-block px-3 py-1 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-xs font-medium w-fit mb-3">
|
||||
{product.category}
|
||||
</Badge>
|
||||
<CardTitle className="text-xl">{product.title}</CardTitle>
|
||||
</span>
|
||||
<CardTitle className="text-xl text-[#1A1A1A]">{product.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 flex flex-col">
|
||||
<CardDescription className="text-base leading-relaxed mb-4 flex-1">
|
||||
<CardDescription className="text-base leading-relaxed mb-4 flex-1 text-[#6B6B6B]">
|
||||
{product.description}
|
||||
</CardDescription>
|
||||
|
||||
{/* 核心功能 */}
|
||||
<div className="mb-4">
|
||||
<p className="text-sm font-medium text-black mb-2">核心功能</p>
|
||||
<p className="text-sm font-medium text-[#1A1A1A] mb-2">核心功能</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{product.features.slice(0, 4).map((feature, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="inline-flex items-center text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded"
|
||||
className="inline-flex items-center text-xs px-2 py-1 bg-[#F5F0F0] text-[#4A4A4A] rounded"
|
||||
>
|
||||
<Check className="w-3 h-3 mr-1 text-green-600" />
|
||||
<Check className="w-3 h-3 mr-1 text-[#C41E3A]" />
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
@@ -71,21 +70,21 @@ export function ProductsSection() {
|
||||
|
||||
{/* 核心价值 */}
|
||||
<div className="mb-4">
|
||||
<p className="text-sm font-medium text-black mb-2 flex items-center">
|
||||
<TrendingUp className="w-4 h-4 mr-1 text-blue-600" />
|
||||
<p className="text-sm font-medium text-[#1A1A1A] mb-2 flex items-center">
|
||||
<TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
|
||||
核心价值
|
||||
</p>
|
||||
<ul className="space-y-1">
|
||||
{product.benefits.map((benefit, idx) => (
|
||||
<li key={idx} className="text-xs text-gray-600 flex items-start">
|
||||
<span className="text-blue-600 mr-1.5">•</span>
|
||||
<li key={idx} className="text-xs text-[#6B6B6B] flex items-start">
|
||||
<span className="text-[#C41E3A] mr-1.5">•</span>
|
||||
{benefit}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Button variant="outline" className="w-full mt-auto group-hover:bg-black group-hover:text-white transition-colors">
|
||||
<Button variant="outline" className="w-full mt-auto group-hover:bg-[#C41E3A] group-hover:text-white group-hover:border-[#C41E3A] transition-colors">
|
||||
了解详情
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
@@ -102,14 +101,14 @@ export function ProductsSection() {
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
className="mt-20 text-center"
|
||||
>
|
||||
<div className="bg-gradient-to-r from-gray-100 to-gray-200 rounded-2xl p-12">
|
||||
<h3 className="text-2xl sm:text-3xl font-bold text-black mb-4">
|
||||
<div className="bg-gradient-to-r from-[#FEF2F4] to-[#FAF8F8] rounded-2xl p-12 border border-[#E8E0E0]">
|
||||
<h3 className="text-2xl sm:text-3xl font-bold text-[#1A1A1A] mb-4">
|
||||
需要定制化解决方案？
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
<p className="text-[#6B6B6B] mb-8 max-w-2xl mx-auto">
|
||||
我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
|
||||
</p>
|
||||
<Button size="lg" className="bg-black text-white hover:bg-gray-800">
|
||||
<Button size="lg">
|
||||
联系我们
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user