build: 更新Next.js配置以支持静态导出并添加新依赖
更新next.config.ts文件以支持静态导出功能，并添加了多个新的依赖项到package.json中，包括UI组件库和动画库。同时生成了构建相关的文件和配置。
This commit is contained in:
张翔
@@ -0,0 +1,158 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Lightbulb, Users, Target, Award } from 'lucide-react';
|
||||
import { COMPANY_INFO, STATS } from '@/lib/constants';
|
||||
|
||||
const values = [
|
||||
{
|
||||
icon: Lightbulb,
|
||||
title: '创新驱动',
|
||||
description: '持续探索前沿技术，以创新思维解决业务挑战，为客户创造差异化价值',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: '客户至上',
|
||||
description: '深入理解客户需求，提供个性化解决方案，建立长期合作伙伴关系',
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: '追求卓越',
|
||||
description: '精益求精的工作态度，确保每个项目都达到最高质量标准',
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: '诚信负责',
|
||||
description: '恪守商业道德，对承诺负责，赢得客户和社会的信任与尊重',
|
||||
},
|
||||
];
|
||||
|
||||
const milestones = [
|
||||
{
|
||||
date: '2026年1月15日',
|
||||
title: '公司成立',
|
||||
description: '四川睿新致远科技有限公司在成都龙泉驿区正式成立，开始提供软件开发服务',
|
||||
},
|
||||
];
|
||||
|
||||
export function AboutSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="about" className="py-24 bg-white" ref={ref}>
|
||||
<div className="container-custom">
|
||||
{/* 头部介绍 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="max-w-4xl mx-auto"
|
||||
>
|
||||
<div className="text-center mb-16">
|
||||
<Badge variant="outline" className="mb-4">
|
||||
关于我们
|
||||
</Badge>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-black mb-6">
|
||||
关于 {COMPANY_INFO.shortName}
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
{COMPANY_INFO.slogan}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 公司简介 */}
|
||||
<div className="prose prose-lg max-w-none mb-16">
|
||||
<h3 className="text-2xl font-bold text-black mb-4">公司简介</h3>
|
||||
<p className="text-gray-600 mb-6 leading-relaxed">
|
||||
{COMPANY_INFO.name}成立于{COMPANY_INFO.founded}年1月15日，总部位于{COMPANY_INFO.location}龙泉驿区幸福路12号。
|
||||
公司专注于信息技术服务与解决方案，致力于为企业提供全方位的数字化转型支持。
|
||||
</p>
|
||||
<p className="text-gray-600 mb-6 leading-relaxed">
|
||||
我们拥有一支经验丰富的技术团队，在软件开发、云计算、数据分析、信息安全等领域具有深厚的技术积累。
|
||||
公司秉承"专注科技创新，驱动智慧未来"的理念，为客户提供高质量的产品和服务，助力企业在数字经济时代实现转型升级。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 数据统计 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16"
|
||||
>
|
||||
{STATS.map((stat, idx) => (
|
||||
<Card key={idx} className="text-center">
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-3xl sm:text-4xl font-bold text-black mb-2">{stat.value}</div>
|
||||
<div className="text-sm text-gray-600">{stat.label}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* 企业价值观 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="mb-16"
|
||||
>
|
||||
<h3 className="text-2xl font-bold text-black mb-8 text-center">企业价值观</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{values.map((value, idx) => (
|
||||
<motion.div
|
||||
key={value.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.4 + idx * 0.1 }}
|
||||
className="flex items-start gap-4 p-6 bg-gray-50 rounded-xl"
|
||||
>
|
||||
<div className="w-12 h-12 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<value.icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-black mb-2">{value.title}</h4>
|
||||
<p className="text-gray-600 text-sm">{value.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 发展历程 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
>
|
||||
<h3 className="text-2xl font-bold text-black mb-8 text-center">发展历程</h3>
|
||||
<div className="space-y-6">
|
||||
{milestones.map((milestone, idx) => (
|
||||
<motion.div
|
||||
key={milestone.title}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.6 + idx * 0.1 }}
|
||||
className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-gray-50 rounded-xl"
|
||||
>
|
||||
<div className="md:w-32 flex-shrink-0">
|
||||
<span className="text-sm font-medium text-gray-500">{milestone.date}</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-black mb-1">{milestone.title}</h4>
|
||||
<p className="text-gray-600 text-sm">{milestone.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
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 { Mail, Phone, MapPin, Send, Loader2, Clock } from 'lucide-react';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
|
||||
export function ContactSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Simulate form submission
|
||||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||||
|
||||
setIsSubmitting(false);
|
||||
setIsSubmitted(true);
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="contact" className="py-24 bg-gray-50" 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"
|
||||
>
|
||||
<Badge variant="outline" className="mb-4">
|
||||
联系我们
|
||||
</Badge>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-black mb-6">
|
||||
与我们取得联系
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
无论您有任何问题或合作意向，我们都很乐意与您交流
|
||||
</p>
|
||||
</motion.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="space-y-8"
|
||||
>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>联系方式</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Clock className="w-5 h-5" />
|
||||
工作时间
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
>
|
||||
<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" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-black mb-2">消息已发送</h3>
|
||||
<p className="text-gray-600">感谢您的留言，我们会尽快与您联系！</p>
|
||||
</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-black">
|
||||
姓名
|
||||
</label>
|
||||
<Input id="name" placeholder="请输入您的姓名" required />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="phone" className="text-sm font-medium text-black">
|
||||
电话
|
||||
</label>
|
||||
<Input id="phone" type="tel" placeholder="请输入您的电话" required />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="email" className="text-sm font-medium text-black">
|
||||
邮箱
|
||||
</label>
|
||||
<Input id="email" type="email" placeholder="请输入您的邮箱" required />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="message" className="text-sm font-medium text-black">
|
||||
留言内容
|
||||
</label>
|
||||
<Textarea
|
||||
id="message"
|
||||
placeholder="请输入您想咨询的内容"
|
||||
rows={5}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full bg-black text-white hover:bg-gray-800"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { COMPANY_INFO, STATS } from '@/lib/constants';
|
||||
|
||||
export function HeroSection() {
|
||||
return (
|
||||
<section id="home" className="relative min-h-screen flex items-center bg-white overflow-hidden pt-20">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 opacity-5">
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundImage: 'radial-gradient(circle at 1px 1px, black 1px, transparent 0)',
|
||||
backgroundSize: '40px 40px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="container-custom relative z-10 py-20">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
{/* Badge */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<Badge variant="secondary" className="mb-8 px-4 py-2 text-sm">
|
||||
<span className="w-2 h-2 rounded-full bg-green-500 mr-2 animate-pulse" />
|
||||
专业科技服务提供商
|
||||
</Badge>
|
||||
</motion.div>
|
||||
|
||||
{/* Main Title */}
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="text-4xl sm:text-5xl lg:text-6xl font-bold text-black leading-tight mb-6"
|
||||
>
|
||||
{COMPANY_INFO.name}
|
||||
</motion.h1>
|
||||
|
||||
{/* Slogan */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-xl sm:text-2xl text-gray-600 mb-8"
|
||||
>
|
||||
{COMPANY_INFO.slogan}
|
||||
</motion.p>
|
||||
|
||||
{/* Description */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="text-lg text-gray-500 max-w-2xl mx-auto mb-10"
|
||||
>
|
||||
{COMPANY_INFO.description}
|
||||
</motion.p>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="flex flex-col sm:flex-row items-center justify-center gap-4"
|
||||
>
|
||||
<Button size="lg" asChild>
|
||||
<Link href="/about">了解更多</Link>
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" asChild>
|
||||
<Link href="/contact">联系我们</Link>
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
{/* Stats */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8"
|
||||
>
|
||||
{STATS.map((stat, index) => (
|
||||
<motion.div
|
||||
key={stat.label}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.6 + index * 0.1 }}
|
||||
className="text-center"
|
||||
>
|
||||
<div className="text-3xl sm:text-4xl font-bold text-black">{stat.value}</div>
|
||||
<div className="text-sm text-gray-500 mt-1">{stat.label}</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
'use client';
|
||||
|
||||
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 { ArrowRight, Calendar } from 'lucide-react';
|
||||
import { NEWS } from '@/lib/constants';
|
||||
|
||||
export function NewsSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="news" className="py-24 bg-white" 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"
|
||||
>
|
||||
<Badge variant="outline" className="mb-4">
|
||||
新闻动态
|
||||
</Badge>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-black mb-6">
|
||||
最新资讯
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
了解公司最新动态、行业资讯和技术分享
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
||||
{NEWS.slice(0, 4).map((news, idx) => (
|
||||
<motion.div
|
||||
key={news.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Badge variant="secondary">{news.category}</Badge>
|
||||
<span className="text-sm text-gray-500 flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{news.date}
|
||||
</span>
|
||||
</div>
|
||||
<CardTitle className="text-xl leading-tight">{news.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 flex flex-col">
|
||||
<CardDescription className="text-base leading-relaxed mb-6 flex-1">
|
||||
{news.excerpt}
|
||||
</CardDescription>
|
||||
<a
|
||||
href={`/news/${news.id}`}
|
||||
className="inline-flex items-center text-sm font-medium text-black hover:underline"
|
||||
>
|
||||
阅读更多
|
||||
<ArrowRight className="ml-1 w-4 h-4" />
|
||||
</a>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 查看更多 - 改为展开更多新闻 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
className="mt-12 text-center"
|
||||
>
|
||||
<button
|
||||
onClick={() => {
|
||||
const newsSection = document.getElementById('news');
|
||||
if (newsSection) {
|
||||
// 展开更多新闻的逻辑可以在这里添加
|
||||
alert('更多新闻功能开发中...');
|
||||
}
|
||||
}}
|
||||
className="inline-flex items-center text-sm font-medium text-black hover:underline cursor-pointer bg-transparent border-none"
|
||||
>
|
||||
查看全部新闻
|
||||
<ArrowRight className="ml-1 w-4 h-4" />
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
'use client';
|
||||
|
||||
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';
|
||||
import { PRODUCTS } from '@/lib/constants';
|
||||
|
||||
export function ProductsSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="products" className="py-24 bg-gray-50" 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"
|
||||
>
|
||||
<Badge variant="outline" className="mb-4">
|
||||
产品服务
|
||||
</Badge>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-black mb-6">
|
||||
我们的产品
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
自主研发的企业级产品，助力企业高效运营，实现数字化转型
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{PRODUCTS.map((product, idx) => (
|
||||
<motion.div
|
||||
key={product.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
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">
|
||||
<CardHeader>
|
||||
<Badge variant="secondary" className="w-fit mb-3">
|
||||
{product.category}
|
||||
</Badge>
|
||||
<CardTitle className="text-xl">{product.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 flex flex-col">
|
||||
<CardDescription className="text-base leading-relaxed mb-4 flex-1">
|
||||
{product.description}
|
||||
</CardDescription>
|
||||
|
||||
{/* 核心功能 */}
|
||||
<div className="mb-4">
|
||||
<p className="text-sm font-medium text-black 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"
|
||||
>
|
||||
<Check className="w-3 h-3 mr-1 text-green-600" />
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 核心价值 */}
|
||||
<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>
|
||||
<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>
|
||||
{benefit}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Button variant="outline" className="w-full mt-auto group-hover:bg-black group-hover:text-white transition-colors">
|
||||
了解详情
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 底部CTA */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
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">
|
||||
需要定制化解决方案？
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
|
||||
</p>
|
||||
<Button size="lg" className="bg-black text-white hover:bg-gray-800">
|
||||
联系我们
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { Code, Cloud, BarChart3, Shield, ArrowRight } from 'lucide-react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { SERVICES } from '@/lib/constants';
|
||||
|
||||
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
||||
Code,
|
||||
Cloud,
|
||||
BarChart3,
|
||||
Shield,
|
||||
};
|
||||
|
||||
export function ServicesSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="services" className="py-24 bg-gray-50" ref={ref}>
|
||||
<div className="container-custom">
|
||||
{/* Section Header */}
|
||||
<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"
|
||||
>
|
||||
<Badge variant="outline" className="mb-4">
|
||||
核心业务
|
||||
</Badge>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-black mb-4">
|
||||
专业服务，助力发展
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
我们提供全方位的技术解决方案，帮助企业实现数字化转型
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Services Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{SERVICES.map((service, index) => {
|
||||
const Icon = iconMap[service.icon];
|
||||
return (
|
||||
<motion.div
|
||||
key={service.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
>
|
||||
<Card className="h-full hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="w-12 h-12 bg-black rounded-lg flex items-center justify-center mb-4">
|
||||
{Icon && <Icon className="w-6 h-6 text-white" />}
|
||||
</div>
|
||||
<CardTitle className="text-xl">{service.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="text-base">
|
||||
{service.description}
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="text-center mt-12"
|
||||
>
|
||||
<Button variant="outline" size="lg" asChild>
|
||||
<Link href="/services">
|
||||
查看全部服务
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user