build: 更新Next.js配置以支持静态导出并添加新依赖
更新next.config.ts文件以支持静态导出功能，并添加了多个新的依赖项到package.json中，包括UI组件库和动画库。同时生成了构建相关的文件和配置。
This commit is contained in:
张翔
@@ -0,0 +1,183 @@
|
||||
import { COMPANY_INFO, STATS } from '@/lib/constants';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Lightbulb, Users, Target, Award, MapPin, Mail, Phone } from 'lucide-react';
|
||||
|
||||
export const metadata = {
|
||||
title: `关于我们 - ${COMPANY_INFO.name}`,
|
||||
description: `了解${COMPANY_INFO.name}的发展历程、企业文化和核心价值观。成立于2026年，专注于企业数字化转型服务。`,
|
||||
};
|
||||
|
||||
export default function AboutPage() {
|
||||
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: '四川睿新致远科技有限公司在成都龙泉驿区正式成立，开始提供软件开发服务',
|
||||
},
|
||||
{
|
||||
date: '2026年1月20日',
|
||||
title: '推出转型方案',
|
||||
description: '发布企业数字化转型解决方案，整合云计算、大数据、人工智能等前沿技术',
|
||||
},
|
||||
{
|
||||
date: '2026年1月25日',
|
||||
title: '战略合作',
|
||||
description: '与本地知名制造企业签署战略合作协议，共同打造智能制造示范工厂',
|
||||
},
|
||||
{
|
||||
date: '2026年2月1日',
|
||||
title: '行业认可',
|
||||
description: '正式加入四川省软件行业协会，成为协会成员单位',
|
||||
},
|
||||
{
|
||||
date: '2026年2月2日',
|
||||
title: '官网上线',
|
||||
description: '公司官方网站正式上线，为客户提供更加便捷的信息获取渠道',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="pt-32 pb-20">
|
||||
<div className="container-custom">
|
||||
{/* 头部介绍 */}
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<Badge variant="outline" className="mb-4">
|
||||
关于我们
|
||||
</Badge>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-black mb-6">
|
||||
关于 {COMPANY_INFO.shortName}
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600">
|
||||
{COMPANY_INFO.slogan}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 公司简介 */}
|
||||
<div className="prose prose-lg max-w-none mb-16">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">公司简介</h2>
|
||||
<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>
|
||||
|
||||
{/* 数据统计 */}
|
||||
<div 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>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 核心价值观 */}
|
||||
<div className="mb-16">
|
||||
<h2 className="text-2xl font-bold text-black mb-6 text-center">核心价值观</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{values.map((value, idx) => (
|
||||
<Card key={idx} className="group hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 bg-gray-100 rounded-lg group-hover:bg-black group-hover:text-white transition-colors">
|
||||
<value.icon className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">{value.title}</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">{value.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 发展历程 */}
|
||||
<div className="mb-16">
|
||||
<h2 className="text-2xl font-bold text-black mb-6 text-center">发展历程</h2>
|
||||
<div className="space-y-6">
|
||||
{milestones.map((milestone, idx) => (
|
||||
<div key={idx} className="flex gap-4 md:gap-6">
|
||||
<div className="w-32 md:w-40 flex-shrink-0">
|
||||
<div className="font-semibold text-black text-sm md:text-base">{milestone.date}</div>
|
||||
</div>
|
||||
<div className="flex-1 pb-6 border-l-2 border-gray-200 pl-6 relative">
|
||||
<div className="absolute -left-[9px] top-1 w-4 h-4 bg-black rounded-full"></div>
|
||||
<h3 className="font-semibold text-black mb-1">{milestone.title}</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">{milestone.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 联系我们 */}
|
||||
<div className="bg-gray-50 rounded-2xl p-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-6 text-center">联系我们</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-white rounded-lg">
|
||||
<MapPin className="w-5 h-5 text-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">公司地址</p>
|
||||
<p className="text-sm font-medium">{COMPANY_INFO.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-white rounded-lg">
|
||||
<Mail className="w-5 h-5 text-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">电子邮箱</p>
|
||||
<p className="text-sm font-medium">{COMPANY_INFO.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-white rounded-lg">
|
||||
<Phone className="w-5 h-5 text-gray-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">联系电话</p>
|
||||
<p className="text-sm font-medium">{COMPANY_INFO.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,198 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
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 { Mail, Phone, MapPin, Send, Loader2 } from 'lucide-react';
|
||||
|
||||
export default function ContactPage() {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
|
||||
async function handleSubmit(formData: FormData) {
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Simulate form submission
|
||||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||||
|
||||
setIsSubmitting(false);
|
||||
setIsSubmitted(true);
|
||||
}
|
||||
|
||||
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="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
|
||||
{/* Contact Info */}
|
||||
<div 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>工作时间</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 className="flex justify-between">
|
||||
<span className="text-gray-600">周六</span>
|
||||
<span className="text-black 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>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</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" />
|
||||
</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">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
姓名 *
|
||||
</label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="请输入您的姓名"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
电话
|
||||
</label>
|
||||
<Input
|
||||
id="phone"
|
||||
name="phone"
|
||||
type="tel"
|
||||
placeholder="请输入您的电话"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { Header } from '@/components/layout/header';
|
||||
import { Footer } from '@/components/layout/footer';
|
||||
|
||||
export default function MarketingLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<Header />
|
||||
<main className="flex-1">{children}</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import { COMPANY_INFO, NEWS } from '@/lib/constants';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Calendar, ArrowLeft } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface NewsDetailPageProps {
|
||||
params: Promise<{
|
||||
slug: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
// 定义新闻项类型
|
||||
type NewsItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
excerpt: string;
|
||||
date: string;
|
||||
category: string;
|
||||
image: string;
|
||||
content?: string;
|
||||
};
|
||||
|
||||
export function generateStaticParams() {
|
||||
return NEWS.map((news) => ({
|
||||
slug: news.id,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: NewsDetailPageProps) {
|
||||
const { slug } = await params;
|
||||
const news = (NEWS as unknown as NewsItem[]).find((n) => n.id === slug);
|
||||
|
||||
if (!news) {
|
||||
return {
|
||||
title: `新闻未找到 - ${COMPANY_INFO.name}`,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${news.title} - ${COMPANY_INFO.name}`,
|
||||
description: news.excerpt,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function NewsDetailPage({ params }: NewsDetailPageProps) {
|
||||
const { slug } = await params;
|
||||
const news = (NEWS as unknown as NewsItem[]).find((n) => n.id === slug);
|
||||
|
||||
if (!news) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pt-32 pb-20">
|
||||
<div className="container-custom">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<Button variant="ghost" asChild className="mb-8">
|
||||
<Link href="/news">
|
||||
<ArrowLeft className="mr-2 w-4 h-4" />
|
||||
返回新闻列表
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
<article>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Badge>{news.category}</Badge>
|
||||
<span className="text-sm text-gray-500 flex items-center gap-1">
|
||||
<Calendar className="w-4 h-4" />
|
||||
{news.date}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-3xl sm:text-4xl font-bold text-black mb-8">
|
||||
{news.title}
|
||||
</h1>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-8">
|
||||
<div className="prose prose-lg max-w-none">
|
||||
{news.content ? (
|
||||
news.content.split('\n\n').map((paragraph, idx) => (
|
||||
<p key={idx} className="text-gray-600 leading-relaxed mb-6">
|
||||
{paragraph}
|
||||
</p>
|
||||
))
|
||||
) : (
|
||||
<>
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
{news.excerpt}
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed mt-6">
|
||||
四川睿新致远科技有限公司始终致力于为客户提供最优质的技术服务和解决方案，
|
||||
不断创新，追求卓越。我们相信，通过技术的力量，可以帮助更多企业实现数字化转型，
|
||||
提升竞争力。
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import Link from 'next/link';
|
||||
import { COMPANY_INFO, NEWS } from '@/lib/constants';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { ArrowRight, Calendar } from 'lucide-react';
|
||||
|
||||
export const metadata = {
|
||||
title: `新闻动态 - ${COMPANY_INFO.name}`,
|
||||
description: `了解${COMPANY_INFO.name}的最新动态和行业资讯`,
|
||||
};
|
||||
|
||||
export default function NewsPage() {
|
||||
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="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
||||
{NEWS.map((news) => (
|
||||
<Card key={news.id} className="h-full flex flex-col">
|
||||
<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>
|
||||
<Link
|
||||
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" />
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { HeroSection } from '@/components/sections/hero-section';
|
||||
import { AboutSection } from '@/components/sections/about-section';
|
||||
import { ServicesSection } from '@/components/sections/services-section';
|
||||
import { ProductsSection } from '@/components/sections/products-section';
|
||||
import { NewsSection } from '@/components/sections/news-section';
|
||||
import { ContactSection } from '@/components/sections/contact-section';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
|
||||
export const metadata = {
|
||||
title: `${COMPANY_INFO.name} - 专业科技服务提供商`,
|
||||
description: COMPANY_INFO.description,
|
||||
};
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<HeroSection />
|
||||
<AboutSection />
|
||||
<ServicesSection />
|
||||
<ProductsSection />
|
||||
<NewsSection />
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import { COMPANY_INFO, PRODUCTS } from '@/lib/constants';
|
||||
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';
|
||||
|
||||
export const metadata = {
|
||||
title: `产品服务 - ${COMPANY_INFO.name}`,
|
||||
description: `了解${COMPANY_INFO.name}的产品和服务解决方案，包括ERP、CRM、OA、BI、物联网和AI智能应用`,
|
||||
};
|
||||
|
||||
export default function ProductsPage() {
|
||||
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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{PRODUCTS.map((product) => (
|
||||
<Card key={product.id} 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>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 底部CTA */}
|
||||
<div className="mt-20 text-center">
|
||||
<div className="bg-gradient-to-r from-gray-50 to-gray-100 rounded-2xl p-12">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-black mb-4">
|
||||
需要定制化解决方案？
|
||||
</h2>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import { COMPANY_INFO, SERVICES } from '@/lib/constants';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Code, Cloud, BarChart3, Shield } from 'lucide-react';
|
||||
|
||||
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
||||
Code,
|
||||
Cloud,
|
||||
BarChart3,
|
||||
Shield,
|
||||
};
|
||||
|
||||
export const metadata = {
|
||||
title: `核心业务 - ${COMPANY_INFO.name}`,
|
||||
description: `了解${COMPANY_INFO.name}的核心业务领域和专业服务`,
|
||||
};
|
||||
|
||||
export default function ServicesPage() {
|
||||
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="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
||||
{SERVICES.map((service) => {
|
||||
const Icon = iconMap[service.icon];
|
||||
return (
|
||||
<Card key={service.id} className="h-full">
|
||||
<CardHeader>
|
||||
<div className="w-14 h-14 bg-black rounded-xl flex items-center justify-center mb-4">
|
||||
{Icon && <Icon className="w-7 h-7 text-white" />}
|
||||
</div>
|
||||
<CardTitle className="text-2xl">{service.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="text-base leading-relaxed">
|
||||
{service.description}
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+117
-12
@@ -1,26 +1,131 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.145 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.145 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.145 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
@layer utilities {
|
||||
.container-custom {
|
||||
@apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
|
||||
}
|
||||
}
|
||||
|
||||
+69
-5
@@ -1,5 +1,5 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { Geist, Geist_Mono, Ma_Shan_Zheng, ZCOOL_XiaoWei, Noto_Serif_SC } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
@@ -12,9 +12,61 @@ const geistMono = Geist_Mono({
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
// 书法字体
|
||||
const maShanZheng = Ma_Shan_Zheng({
|
||||
weight: "400",
|
||||
variable: "--font-ma-shan-zheng",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const zcoolXiaoWei = ZCOOL_XiaoWei({
|
||||
weight: "400",
|
||||
variable: "--font-zcool-xiaowei",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
// 思源宋体 - 作为青柳隶书的替代
|
||||
const notoSerifSC = Noto_Serif_SC({
|
||||
weight: ["400", "700"],
|
||||
variable: "--font-noto-serif-sc",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: {
|
||||
default: "四川睿新致远科技有限公司 - 企业数字化转型服务商",
|
||||
template: "%s | 四川睿新致远科技有限公司",
|
||||
},
|
||||
description: "四川睿新致远科技有限公司成立于2026年，专注于企业数字化转型服务，提供软件开发、云计算、数据分析、信息安全等一站式解决方案。联系电话：028-88888888",
|
||||
keywords: ["数字化转型", "企业软件", "ERP系统", "CRM系统", "云计算", "数据分析", "软件开发", "成都科技公司"],
|
||||
authors: [{ name: "四川睿新致远科技有限公司" }],
|
||||
creator: "四川睿新致远科技有限公司",
|
||||
publisher: "四川睿新致远科技有限公司",
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
openGraph: {
|
||||
type: "website",
|
||||
locale: "zh_CN",
|
||||
url: "https://www.novalon.cn",
|
||||
siteName: "四川睿新致远科技有限公司",
|
||||
title: "四川睿新致远科技有限公司 - 企业数字化转型服务商",
|
||||
description: "专注于企业数字化转型服务，提供软件开发、云计算、数据分析、信息安全等一站式解决方案",
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "四川睿新致远科技有限公司",
|
||||
description: "企业数字化转型服务商",
|
||||
},
|
||||
verification: {
|
||||
// 可以添加搜索引擎验证代码
|
||||
// google: "your-google-verification-code",
|
||||
// baidu: "your-baidu-verification-code",
|
||||
},
|
||||
alternates: {
|
||||
canonical: "https://www.novalon.cn",
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -23,9 +75,21 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
{/* Favicon */}
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="apple-touch-icon" href="/favicon.svg" />
|
||||
{/* 中文字体 - 从Google Fonts加载 */}
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
className={`${geistSans.variable} ${geistMono.variable} ${maShanZheng.variable} ${zcoolXiaoWei.variable} ${notoSerifSC.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { Mail, Phone, MapPin } from 'lucide-react';
|
||||
import { COMPANY_INFO, NAVIGATION, SOCIAL_LINKS } from '@/lib/constants';
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="bg-black text-white">
|
||||
<div className="container-custom py-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
||||
{/* Company Info */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="flex items-center mb-6">
|
||||
<img src="/logo-white.svg" alt="四川睿新致远科技有限公司" className="h-12 w-auto" />
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm leading-relaxed mb-6">
|
||||
{COMPANY_INFO.description}
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
{SOCIAL_LINKS.map((social) => (
|
||||
<a
|
||||
key={social.name}
|
||||
href={social.href}
|
||||
className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition-colors"
|
||||
aria-label={social.name}
|
||||
>
|
||||
<span className="text-sm">{social.name[0]}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-6">快速链接</h3>
|
||||
<ul className="space-y-3">
|
||||
{NAVIGATION.map((item) => (
|
||||
<li key={item.id}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-6">服务项目</h3>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<Link href="/services" className="text-gray-400 hover:text-white transition-colors">
|
||||
软件开发
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/services" className="text-gray-400 hover:text-white transition-colors">
|
||||
云服务
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/services" className="text-gray-400 hover:text-white transition-colors">
|
||||
数据分析
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/services" className="text-gray-400 hover:text-white transition-colors">
|
||||
信息安全
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-6">联系方式</h3>
|
||||
<ul className="space-y-4">
|
||||
<li className="flex items-start gap-3">
|
||||
<MapPin className="w-5 h-5 text-gray-400 mt-0.5" />
|
||||
<span className="text-gray-400">{COMPANY_INFO.address}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<Phone className="w-5 h-5 text-gray-400" />
|
||||
<span className="text-gray-400">{COMPANY_INFO.phone}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<Mail className="w-5 h-5 text-gray-400" />
|
||||
<span className="text-gray-400">{COMPANY_INFO.email}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom */}
|
||||
<div className="border-t border-white/10 mt-12 pt-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p className="text-gray-400 text-sm">
|
||||
© {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
|
||||
</p>
|
||||
<div className="flex gap-6">
|
||||
<Link href="#" className="text-gray-400 hover:text-white text-sm transition-colors">
|
||||
隐私政策
|
||||
</Link>
|
||||
<Link href="#" className="text-gray-400 hover:text-white text-sm transition-colors">
|
||||
服务条款
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Menu, X } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
|
||||
import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export function Header() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [activeSection, setActiveSection] = useState('home');
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
|
||||
// 处理平滑滚动
|
||||
const handleNavClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
|
||||
e.preventDefault();
|
||||
const targetId = href.replace('#', '');
|
||||
const element = document.getElementById(targetId);
|
||||
|
||||
if (element) {
|
||||
const headerOffset = 80; // header高度
|
||||
const elementPosition = element.getBoundingClientRect().top;
|
||||
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
||||
|
||||
window.scrollTo({
|
||||
top: offsetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
setActiveSection(targetId);
|
||||
setIsOpen(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 监听滚动，更新激活状态和header样式
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
// 更新header背景
|
||||
setIsScrolled(window.scrollY > 10);
|
||||
|
||||
// 计算当前激活的section
|
||||
const sections = NAVIGATION.map(item => item.href.replace('#', ''));
|
||||
const scrollPosition = window.scrollY + 100; // 添加偏移量
|
||||
|
||||
for (let i = sections.length - 1; i >= 0; i--) {
|
||||
const section = document.getElementById(sections[i]);
|
||||
if (section) {
|
||||
const sectionTop = section.offsetTop;
|
||||
if (scrollPosition >= sectionTop) {
|
||||
setActiveSection(sections[i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
handleScroll(); // 初始化
|
||||
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header
|
||||
className={cn(
|
||||
"fixed top-0 left-0 right-0 z-50 transition-all duration-300",
|
||||
isScrolled
|
||||
? "bg-white/95 backdrop-blur-md shadow-sm border-b border-slate-200/50"
|
||||
: "bg-slate-50/85 backdrop-blur-md border-b border-slate-200"
|
||||
)}
|
||||
>
|
||||
<div className="container-custom">
|
||||
<div className="flex items-center justify-between h-20">
|
||||
{/* Logo */}
|
||||
<Link
|
||||
href="#home"
|
||||
onClick={(e) => handleNavClick(e, '#home')}
|
||||
className="flex items-center"
|
||||
>
|
||||
<img src="/logo.svg" alt={COMPANY_INFO.name} className="h-12 w-auto" />
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden lg:flex items-center gap-1">
|
||||
{NAVIGATION.map((item) => (
|
||||
<a
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
onClick={(e) => handleNavClick(e, item.href)}
|
||||
className={cn(
|
||||
"px-4 py-2 text-sm font-medium rounded-full transition-all duration-200",
|
||||
activeSection === item.id.replace('#', '')
|
||||
? "text-black bg-black/5"
|
||||
: "text-gray-600 hover:text-black hover:bg-black/5"
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<Sheet open={isOpen} onOpenChange={setIsOpen}>
|
||||
<SheetTrigger asChild className="lg:hidden">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Menu className="h-6 w-6" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="right" className="w-[300px]">
|
||||
<div className="flex flex-col gap-2 mt-8">
|
||||
{NAVIGATION.map((item) => (
|
||||
<a
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
onClick={(e) => handleNavClick(e, item.href)}
|
||||
className={cn(
|
||||
"px-4 py-3 text-lg font-medium rounded-lg transition-all duration-200",
|
||||
activeSection === item.id.replace('#', '')
|
||||
? "text-black bg-black/5"
|
||||
: "text-gray-600 hover:text-black hover:bg-black/5"
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||
ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 [a&]:hover:underline",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"span"> &
|
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : "span"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="badge"
|
||||
data-variant={variant}
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
@@ -0,0 +1,64 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm": "size-8",
|
||||
"icon-lg": "size-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
@@ -0,0 +1,92 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
@@ -0,0 +1,143 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
||||
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
||||
}
|
||||
|
||||
function SheetTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
||||
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
||||
}
|
||||
|
||||
function SheetClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
||||
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
||||
}
|
||||
|
||||
function SheetPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
||||
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
||||
}
|
||||
|
||||
function SheetOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
||||
return (
|
||||
<SheetPrimitive.Overlay
|
||||
data-slot="sheet-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetContent({
|
||||
className,
|
||||
children,
|
||||
side = "right",
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
||||
side?: "top" | "right" | "bottom" | "left"
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
data-slot="sheet-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||
side === "right" &&
|
||||
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
||||
side === "left" &&
|
||||
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
||||
side === "top" &&
|
||||
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
|
||||
side === "bottom" &&
|
||||
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
||||
<XIcon className="size-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
)}
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-header"
|
||||
className={cn("flex flex-col gap-1.5 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-footer"
|
||||
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
||||
return (
|
||||
<SheetPrimitive.Title
|
||||
data-slot="sheet-title"
|
||||
className={cn("text-foreground font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
||||
return (
|
||||
<SheetPrimitive.Description
|
||||
data-slot="sheet-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<textarea
|
||||
data-slot="textarea"
|
||||
className={cn(
|
||||
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Textarea }
|
||||
Reference in New Issue
Block a user