refactor: 优化网站页面结构和数据展示
- 增强服务数据模型，添加 challenges 和 outcomes 字段 - 简化统计数据配置，改为静态定义 - 重构多个页面组件，优化代码结构 - 新增产品、服务、解决方案相关的布局和组件 - 更新样式和动画配置 - 优化测试用例和类型定义 - 修复 ESLint 错误：移除不必要的 useEffect 和未使用的导入
This commit is contained in:
张翔
@@ -2,58 +2,31 @@
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef, useState, useEffect, useMemo } from 'react';
|
||||
import { useRef, useMemo } from 'react';
|
||||
import { COMPANY_INFO, STATS } from '@/lib/constants';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { PageHeader } from '@/components/ui/page-header';
|
||||
import { FlipClock } from '@/components/ui/flip-clock';
|
||||
import { Lightbulb, Users, Target, Award, MapPin, Mail } from 'lucide-react';
|
||||
import { Lightbulb, Users, Target, MapPin, Mail } from 'lucide-react';
|
||||
|
||||
export function AboutClient() {
|
||||
const contentRef = useRef(null);
|
||||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
||||
const [operationTime, setOperationTime] = useState({ days: 0, months: 0, years: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
const foundingDate = new Date('2026-01-15');
|
||||
const calculateTime = () => {
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - foundingDate.getTime();
|
||||
|
||||
const totalDays = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
const years = Math.floor(totalDays / 365);
|
||||
const months = Math.floor((totalDays % 365) / 30);
|
||||
const days = totalDays % 30;
|
||||
|
||||
setOperationTime({ days, months, years });
|
||||
};
|
||||
|
||||
calculateTime();
|
||||
const timer = setInterval(calculateTime, 60000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
const values = useMemo(() => [
|
||||
{
|
||||
icon: Lightbulb,
|
||||
title: '创新驱动',
|
||||
description: '持续探索前沿技术，以创新思维解决业务挑战，为客户创造差异化价值',
|
||||
title: '务实',
|
||||
description: '不追逐风口，只做真正为客户创造价值的事。每一个方案都源于对业务场景的深入洞察。',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: '客户至上',
|
||||
description: '深入理解客户需求，提供个性化解决方案，建立长期合作伙伴关系',
|
||||
title: '陪伴',
|
||||
description: '交付只是开始，长期陪跑才是我们的承诺。我们关注的不只是项目是否上线，更是您的业务是否真正改善。',
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: '追求卓越',
|
||||
description: '以最高标准要求自己，持续优化产品和服务质量，超越客户期望',
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: '诚信为本',
|
||||
description: '坚持透明沟通，信守承诺，以诚信赢得客户信任和尊重',
|
||||
title: '专业',
|
||||
description: '用扎实的工程能力和行业经验赢得信任。既懂技术又懂业务，提供真正可落地的解决方案。',
|
||||
},
|
||||
], []);
|
||||
|
||||
@@ -75,8 +48,8 @@ export function AboutClient() {
|
||||
},
|
||||
{
|
||||
date: '2026年2月',
|
||||
title: '产品发布',
|
||||
description: '自主研发的ERP、CRM等产品陆续上线，为客户提供一站式数字化服务',
|
||||
title: '产品研发',
|
||||
description: '启动ERP、CRM等自研产品的研发工作，致力于为企业提供一站式数字化服务',
|
||||
},
|
||||
], []);
|
||||
|
||||
@@ -154,12 +127,6 @@ export function AboutClient() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<FlipClock
|
||||
years={operationTime.years}
|
||||
months={operationTime.months}
|
||||
days={operationTime.days}
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
@@ -183,7 +150,7 @@ export function AboutClient() {
|
||||
className="mb-16"
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">核心价值观</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{values.map((value, idx) => (
|
||||
<motion.div
|
||||
key={value.title}
|
||||
|
||||
@@ -87,7 +87,7 @@ jest.mock('@/components/ui/flip-clock', () => ({
|
||||
jest.mock('@/lib/constants', () => ({
|
||||
COMPANY_INFO: {
|
||||
name: '四川睿新致远科技有限公司',
|
||||
shortName: '睿新致遠',
|
||||
shortName: '睿新致远',
|
||||
description: '以智慧连接数字趋势，以伙伴身份陪您成长',
|
||||
address: '四川省成都市龙泉驿区',
|
||||
email: 'contact@ruixin.com',
|
||||
|
||||
@@ -2,7 +2,7 @@ import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { AboutClient } from './client';
|
||||
|
||||
export const metadata = {
|
||||
title: `关于我们 - ${COMPANY_INFO.name}`,
|
||||
title: '关于我们',
|
||||
description: `了解${COMPANY_INFO.name}的品牌故事。我们不只是技术供应商，更是您数字化转型的成长伙伴。以智慧连接数字趋势，以伙伴身份陪您成长。`,
|
||||
};
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: '客户案例 - 睿新致远',
|
||||
description: '与谁同行，决定能走多远',
|
||||
title: '客户案例',
|
||||
description: '了解诺瓦隆在各行业的成功案例，包括制造业、政务服务、酒店管理、智慧农业等领域的数字化转型实践。',
|
||||
};
|
||||
|
||||
export default function CasesLayout({
|
||||
|
||||
@@ -230,23 +230,25 @@ export default function CasesPage() {
|
||||
让我们与您同行，共创美好未来
|
||||
</p>
|
||||
<div className="flex justify-center gap-4">
|
||||
<StaticLink href="/contact">
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
asChild
|
||||
>
|
||||
<StaticLink href="/contact">
|
||||
联系我们
|
||||
</Button>
|
||||
</StaticLink>
|
||||
<StaticLink href="/contact">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
|
||||
>
|
||||
</StaticLink>
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
|
||||
asChild
|
||||
>
|
||||
<StaticLink href="/contact">
|
||||
立即咨询
|
||||
<ArrowLeft className="ml-2 w-4 h-4 rotate-180" />
|
||||
</Button>
|
||||
</StaticLink>
|
||||
</StaticLink>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export const metadata = {
|
||||
title: '联系我们 - 四川睿新致远科技有限公司',
|
||||
description: '无论您有任何问题或合作意向，我们都很乐意与您交流',
|
||||
title: '联系我们',
|
||||
description: '联系四川睿新致远科技有限公司（诺瓦隆）。无论您有任何关于企业数字化转型、软件开发、数据分析等方面的咨询需求，我们都期待与您交流。',
|
||||
};
|
||||
|
||||
export default function ContactLayout({ children }: { children: React.ReactNode }) {
|
||||
|
||||
@@ -37,14 +37,6 @@ const ProductsSection = dynamic(
|
||||
}
|
||||
);
|
||||
|
||||
const CasesSection = dynamic(
|
||||
() => import('@/components/sections/cases-section').then(mod => ({ default: mod.CasesSection })),
|
||||
{
|
||||
loading: () => <SectionSkeleton />,
|
||||
ssr: false
|
||||
}
|
||||
);
|
||||
|
||||
const AboutSection = dynamic(
|
||||
() => import('@/components/sections/about-section').then(mod => ({ default: mod.AboutSection })),
|
||||
{
|
||||
@@ -69,6 +61,8 @@ const NewsSection = dynamic(
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
function HomeContent({ heroStats }: { heroStats: ReactNode }) {
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
@@ -108,10 +102,15 @@ function HomeContent({ heroStats }: { heroStats: ReactNode }) {
|
||||
return (
|
||||
<main id="main-content" className="min-h-screen bg-white dark:bg-(--color-bg-primary)">
|
||||
<HeroSection heroStats={heroStats} />
|
||||
{/* 墨韵分割线 */}
|
||||
<div className="ink-divider" />
|
||||
<ServicesSection />
|
||||
<HomeSolutionsSection />
|
||||
{/* 墨韵分割线 */}
|
||||
<div className="ink-divider" />
|
||||
<ProductsSection />
|
||||
<CasesSection />
|
||||
{/* 墨韵分割线 */}
|
||||
<div className="ink-divider" />
|
||||
<AboutSection />
|
||||
<TeamSection />
|
||||
<NewsSection />
|
||||
|
||||
@@ -4,18 +4,46 @@ import { usePathname } from 'next/navigation';
|
||||
import { ErrorBoundary } from '@/components/ui/error-boundary';
|
||||
import { Header } from '@/components/layout/header';
|
||||
import { Footer } from '@/components/layout/footer';
|
||||
import { ProductHeader } from '@/components/layout/product-header';
|
||||
import { ProductFooter } from '@/components/layout/product-footer';
|
||||
import { ServiceHeader } from '@/components/layout/service-header';
|
||||
import { ServiceFooter } from '@/components/layout/service-footer';
|
||||
import { Breadcrumb } from '@/components/layout/breadcrumb';
|
||||
|
||||
const breadcrumbMap: Record<string, { label: string; href: string }> = {
|
||||
'/about': { label: '关于我们', href: '/about' },
|
||||
'/cases': { label: '成功案例', href: '/cases' },
|
||||
'/services': { label: '核心业务', href: '/services' },
|
||||
'/products': { label: '产品服务', href: '/products' },
|
||||
'/solutions': { label: '解决方案', href: '/solutions' },
|
||||
'/solutions': { label: '行业方案', href: '/solutions' },
|
||||
'/news': { label: '新闻动态', href: '/news' },
|
||||
'/contact': { label: '联系我们', href: '/contact' },
|
||||
'/team': { label: '核心团队', href: '/team' },
|
||||
};
|
||||
|
||||
/**
|
||||
* 判断是否为产品详情页（如 /products/erp、/products/crm 等）
|
||||
* 产品列表页 /products 本身仍使用主站布局
|
||||
*/
|
||||
function isProductDetailPage(pathname: string): boolean {
|
||||
return /^\/products\/[^/]+$/.test(pathname);
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为服务详情页（如 /services/software、/services/data 等）
|
||||
* 服务列表页 /services 本身仍使用主站布局
|
||||
*/
|
||||
function isServiceDetailPage(pathname: string): boolean {
|
||||
return /^\/services\/[^/]+$/.test(pathname);
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为解决方案详情页（如 /solutions/manufacturing 等）
|
||||
* 解决方案列表页 /solutions 本身仍使用主站布局
|
||||
*/
|
||||
function isSolutionDetailPage(pathname: string): boolean {
|
||||
return /^\/solutions\/[^/]+$/.test(pathname);
|
||||
}
|
||||
|
||||
export default function MarketingLayout({
|
||||
children,
|
||||
}: {
|
||||
@@ -23,7 +51,41 @@ export default function MarketingLayout({
|
||||
}) {
|
||||
const pathname = usePathname();
|
||||
const breadcrumbItem = breadcrumbMap[pathname];
|
||||
const isProductDetail = isProductDetailPage(pathname);
|
||||
const isServiceDetail = isServiceDetailPage(pathname);
|
||||
const isSolutionDetail = isSolutionDetailPage(pathname);
|
||||
|
||||
// 产品详情页使用独立布局（ProductHeader + ProductFooter）
|
||||
if (isProductDetail || isSolutionDetail) {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-white">
|
||||
<ProductHeader />
|
||||
<ErrorBoundary>
|
||||
<main id="main-content" className="flex-1 pt-16">
|
||||
{children}
|
||||
</main>
|
||||
</ErrorBoundary>
|
||||
<ProductFooter />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 服务详情页使用独立布局（ServiceHeader + ServiceFooter）
|
||||
if (isServiceDetail) {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-white">
|
||||
<ServiceHeader />
|
||||
<ErrorBoundary>
|
||||
<main id="main-content" className="flex-1 pt-16">
|
||||
{children}
|
||||
</main>
|
||||
</ErrorBoundary>
|
||||
<ServiceFooter />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 其他页面使用主站布局（Header + Footer）
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<Header />
|
||||
|
||||
@@ -114,17 +114,17 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
)}
|
||||
|
||||
<div className="mt-16 flex justify-center gap-4">
|
||||
<StaticLink href="/news">
|
||||
<Button variant="outline" size="lg">
|
||||
<Button variant="outline" size="lg" asChild>
|
||||
<StaticLink href="/news">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
返回新闻列表
|
||||
</Button>
|
||||
</StaticLink>
|
||||
<StaticLink href="/contact">
|
||||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white">
|
||||
</StaticLink>
|
||||
</Button>
|
||||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
|
||||
<StaticLink href="/contact">
|
||||
联系我们
|
||||
</Button>
|
||||
</StaticLink>
|
||||
</StaticLink>
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: '新闻动态',
|
||||
description: '了解四川睿新致远科技有限公司（诺瓦隆）的最新动态、产品发布和行业资讯。',
|
||||
};
|
||||
|
||||
export default function NewsLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
@@ -12,7 +12,7 @@ import { Search, Calendar, Filter, ChevronLeft, ChevronRight, ArrowRight } from
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const categories = ['全部', '公司新闻', '产品发布'];
|
||||
const categories = ['全部', '公司新闻', '产品发布', '研发动态'];
|
||||
const ITEMS_PER_PAGE = 9;
|
||||
|
||||
export default function NewsListPage() {
|
||||
@@ -28,7 +28,7 @@ export default function NewsListPage() {
|
||||
newsItem.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
newsItem.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
return matchesCategory && matchesSearch;
|
||||
});
|
||||
}).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
||||
}, [selectedCategory, searchQuery]);
|
||||
|
||||
const totalPages = Math.ceil(filteredNews.length / ITEMS_PER_PAGE);
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { PRODUCTS } from '@/lib/constants';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { BackButton } from '@/components/ui/back-button';
|
||||
import { CheckCircle2, Zap, Target, Layers, CreditCard, ArrowRight } from 'lucide-react';
|
||||
import { ProductDetailClient } from './product-detail-client';
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return PRODUCTS.map((product) => ({
|
||||
@@ -14,7 +11,7 @@ export async function generateStaticParams() {
|
||||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const product = PRODUCTS.find((p) => p.id === id);
|
||||
|
||||
|
||||
if (!product) {
|
||||
return {
|
||||
title: '产品未找到',
|
||||
@@ -35,195 +32,5 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
|
||||
<div className="container-wide relative z-10 pt-32 pb-20">
|
||||
<BackButton />
|
||||
<div className="max-w-4xl">
|
||||
<div className="inline-block px-4 py-2 bg-[#C41E3A]/10 rounded-full text-[#C41E3A] text-sm mb-6">
|
||||
{product.category}
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
{product.title}
|
||||
</h1>
|
||||
<p className="text-xl text-[#5C5C5C] leading-relaxed">
|
||||
{product.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-wide relative z-10 py-16">
|
||||
<div className="max-w-4xl">
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">产品概述</h2>
|
||||
<p className="text-lg text-[#5C5C5C] leading-relaxed">
|
||||
{product.overview}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||
<Zap className="w-8 h-8 text-[#C41E3A]" />
|
||||
核心功能
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{product.features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-3 p-4 bg-[#F5F7FA] rounded-lg hover:bg-[#FFFBF5] transition-colors"
|
||||
>
|
||||
<div className="w-6 h-6 bg-[#C41E3A] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<CheckCircle2 className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<span className="text-[#1C1C1C]">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||
<Target className="w-8 h-8 text-[#C41E3A]" />
|
||||
产品优势
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{product.benefits.map((benefit, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-3 p-4 bg-gradient-to-r from-[#FFFBF5] to-transparent rounded-lg border-l-4 border-[#C41E3A]"
|
||||
>
|
||||
<div className="w-8 h-8 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Target className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<span className="text-[#1C1C1C] font-medium">{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||
<Layers className="w-8 h-8 text-[#C41E3A]" />
|
||||
实施流程
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{product.process.map((step, index) => (
|
||||
<div key={index} className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div className="flex-1 pb-4">
|
||||
<p className="text-[#1C1C1C] font-medium">{step}</p>
|
||||
{index < product.process.length - 1 && (
|
||||
<div className="absolute left-5 top-10 w-0.5 h-8 bg-[#C41E3A]/20" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||
<Layers className="w-8 h-8 text-[#C41E3A]" />
|
||||
技术规格
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{product.specs.map((spec, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-3 p-4 bg-[#F5F7FA] rounded-lg"
|
||||
>
|
||||
<div className="w-2 h-2 bg-[#C41E3A] rounded-full" />
|
||||
<span className="text-[#1C1C1C]">{spec}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||
<CreditCard className="w-8 h-8 text-[#C41E3A]" />
|
||||
价格方案
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<div className="p-6 bg-[#F5F7FA] rounded-lg border-2 border-transparent hover:border-[#C41E3A] transition-colors">
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-2">基础版</h3>
|
||||
<p className="text-3xl font-bold text-[#C41E3A] mb-4">{product.pricing.base}</p>
|
||||
<ul className="space-y-2 text-sm text-[#5C5C5C]">
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
|
||||
基础功能模块
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
|
||||
邮件支持
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
|
||||
标准报表
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-6 bg-gradient-to-br from-[#C41E3A] to-[#A01830] rounded-lg text-white relative overflow-hidden">
|
||||
<div className="absolute top-4 right-4 bg-white/20 px-3 py-1 rounded-full text-xs">
|
||||
推荐
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">标准版</h3>
|
||||
<p className="text-3xl font-bold mb-4">{product.pricing.standard}</p>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4" />
|
||||
全部功能模块
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4" />
|
||||
电话支持
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4" />
|
||||
自定义报表
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-6 bg-[#F5F7FA] rounded-lg border-2 border-transparent hover:border-[#C41E3A] transition-colors">
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-2">企业版</h3>
|
||||
<p className="text-3xl font-bold text-[#C41E3A] mb-4">{product.pricing.enterprise}</p>
|
||||
<ul className="space-y-2 text-sm text-[#5C5C5C]">
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
|
||||
全部功能模块
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
|
||||
专属客服
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-[#C41E3A]" />
|
||||
定制开发
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
|
||||
<Button variant="outline" size="lg" asChild>
|
||||
<StaticLink href="/contact">
|
||||
联系我们
|
||||
</StaticLink>
|
||||
</Button>
|
||||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
|
||||
<StaticLink href="/contact">
|
||||
立即咨询
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return <ProductDetailClient productId={id} />;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
'use client';
|
||||
|
||||
import dynamic from 'next/dynamic';
|
||||
import { PRODUCTS } from '@/lib/constants/products';
|
||||
|
||||
const ProductHeroSection = dynamic(
|
||||
() => import('@/components/products/product-hero-section').then(mod => ({ default: mod.ProductHeroSection })),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
const ProductOverviewSection = dynamic(
|
||||
() => import('@/components/products/product-overview-section').then(mod => ({ default: mod.ProductOverviewSection })),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
const ProductFeaturesSection = dynamic(
|
||||
() => import('@/components/products/product-features-section').then(mod => ({ default: mod.ProductFeaturesSection })),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
const ProductBenefitsSection = dynamic(
|
||||
() => import('@/components/products/product-benefits-section').then(mod => ({ default: mod.ProductBenefitsSection })),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
const ProductProcessSection = dynamic(
|
||||
() => import('@/components/products/product-process-section').then(mod => ({ default: mod.ProductProcessSection })),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
const ProductSpecsSection = dynamic(
|
||||
() => import('@/components/products/product-specs-section').then(mod => ({ default: mod.ProductSpecsSection })),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
const ProductCTASection = dynamic(
|
||||
() => import('@/components/products/product-cta-section').then(mod => ({ default: mod.ProductCTASection })),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
interface ProductDetailClientProps {
|
||||
productId: string;
|
||||
}
|
||||
|
||||
export function ProductDetailClient({ productId }: ProductDetailClientProps) {
|
||||
const product = PRODUCTS.find(p => p.id === productId) || null;
|
||||
|
||||
// 产品页已改为浅色主题，无需切换 Header 深色模式
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<p className="text-[#999999]">加载中...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen">
|
||||
<ProductHeroSection product={product} />
|
||||
<ProductOverviewSection product={product} />
|
||||
<ProductFeaturesSection product={product} />
|
||||
<ProductBenefitsSection product={product} />
|
||||
<ProductProcessSection product={product} />
|
||||
<ProductSpecsSection product={product} />
|
||||
<ProductCTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: '产品服务',
|
||||
description: '诺瓦隆（四川睿新致远科技）自研产品矩阵，包括睿新ERP管理系统、睿新CRM客户关系管理系统、睿新内容管理系统、睿新商业智能平台等企业级数字化产品。',
|
||||
};
|
||||
|
||||
export default function ProductsLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
@@ -7,10 +7,12 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/com
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { RippleButton } from '@/lib/animations';
|
||||
import { PageHeader } from '@/components/ui/page-header';
|
||||
import { Search, ArrowLeft, Check, TrendingUp, ChevronLeft, ChevronRight, Filter } from 'lucide-react';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { motion } from 'framer-motion';
|
||||
import { InkCard } from '@/lib/animations';
|
||||
|
||||
const categories = ['全部', '企业软件', '数据产品'];
|
||||
const ITEMS_PER_PAGE = 6;
|
||||
@@ -111,15 +113,13 @@ export default function ProductsPage() {
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{paginatedProducts.map((product, index) => (
|
||||
<motion.div
|
||||
{paginatedProducts.map((product) => (
|
||||
<InkCard
|
||||
key={product.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
className="group cursor-pointer rounded-xl border border-[#E5E5E5] bg-white p-0 overflow-hidden hover:border-[#C41E3A] transition-colors"
|
||||
>
|
||||
<StaticLink href={`/products/${product.id}`}>
|
||||
<Card className="h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors">
|
||||
<Card className="h-full border-0 shadow-none bg-transparent">
|
||||
<CardHeader>
|
||||
<Badge variant="secondary" className="w-fit mb-3">
|
||||
{product.category}
|
||||
@@ -161,14 +161,14 @@ export default function ProductsPage() {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Button variant="outline" className="w-full mt-auto group-hover:bg-[#C41E3A] group-hover:text-white group-hover:border-[#C41E3A] transition-colors">
|
||||
<div className="w-full mt-auto px-4 py-2 text-center text-sm font-medium border border-[#E5E5E5] rounded-md group-hover:bg-[#C41E3A] group-hover:text-white group-hover:border-[#C41E3A] transition-colors">
|
||||
了解详情
|
||||
<ArrowLeft className="ml-2 w-4 h-4 rotate-180" />
|
||||
</Button>
|
||||
<ArrowLeft className="ml-2 w-4 h-4 rotate-180 inline" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</StaticLink>
|
||||
</motion.div>
|
||||
</InkCard>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -231,16 +231,12 @@ export default function ProductsPage() {
|
||||
<p className="text-lg text-[#5C5C5C] mb-8 max-w-2xl mx-auto">
|
||||
我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
|
||||
</p>
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
|
||||
asChild
|
||||
>
|
||||
<StaticLink href="/contact">
|
||||
<StaticLink href="/contact">
|
||||
<RippleButton className="inline-flex items-center gap-2 px-6 py-2.5 bg-[#C41E3A] hover:bg-[#A01830] text-white rounded-lg text-sm font-medium transition-colors">
|
||||
联系我们
|
||||
<ArrowLeft className="ml-2 w-4 h-4 rotate-180" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
<ArrowLeft className="w-4 h-4 rotate-180" />
|
||||
</RippleButton>
|
||||
</StaticLink>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
@@ -1,277 +1,97 @@
|
||||
'use client';
|
||||
|
||||
import { useRef } from 'react';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { BackButton } from '@/components/ui/back-button';
|
||||
import {
|
||||
CheckCircle2,
|
||||
TrendingUp,
|
||||
Users,
|
||||
Target,
|
||||
Clock,
|
||||
MessageCircle,
|
||||
ArrowRight
|
||||
} from 'lucide-react';
|
||||
import { SERVICES, CASES } from '@/lib/constants';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { type Service } from '@/lib/constants/services';
|
||||
import { RippleButton, FadeUp } from '@/lib/animations';
|
||||
|
||||
const ServiceHeroSection = dynamic(
|
||||
() => import('@/components/services/service-hero-section').then(mod => ({ default: mod.ServiceHeroSection })),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
const ServiceChallengesSection = dynamic(
|
||||
() => import('@/components/services/service-challenges-section').then(mod => ({ default: mod.ServiceChallengesSection })),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
const ServiceFeaturesSection = dynamic(
|
||||
() => import('@/components/services/service-features-section').then(mod => ({ default: mod.ServiceFeaturesSection })),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
const ServiceProcessSection = dynamic(
|
||||
() => import('@/components/services/service-process-section').then(mod => ({ default: mod.ServiceProcessSection })),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
const ServiceOutcomesSection = dynamic(
|
||||
() => import('@/components/services/service-outcomes-section').then(mod => ({ default: mod.ServiceOutcomesSection })),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
const ServiceCTASection = dynamic(
|
||||
() => import('@/components/services/service-cta-section').then(mod => ({ default: mod.ServiceCTASection })),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
interface ServiceDetailClientProps {
|
||||
service: typeof SERVICES[number];
|
||||
service: Service;
|
||||
}
|
||||
|
||||
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
|
||||
Code: () => (
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
||||
</svg>
|
||||
),
|
||||
BarChart3: () => (
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
),
|
||||
Lightbulb: () => (
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
),
|
||||
Puzzle: () => (
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z" />
|
||||
</svg>
|
||||
),
|
||||
};
|
||||
|
||||
const challenges = {
|
||||
software: [
|
||||
{ title: '需求不明确', description: '业务部门提不出清晰需求，开发团队反复返工' },
|
||||
{ title: '技术选型困难', description: '技术栈更新快，不知道该选什么技术方案' },
|
||||
{ title: '项目延期', description: '开发进度难以把控，上线时间一拖再拖' },
|
||||
{ title: '维护成本高', description: '系统上线后问题不断，运维压力巨大' },
|
||||
],
|
||||
data: [
|
||||
{ title: '数据孤岛', description: '各系统数据分散，无法整合分析' },
|
||||
{ title: '决策盲区', description: '缺乏数据支撑，决策凭感觉' },
|
||||
{ title: '报表滞后', description: '手工制作报表，时效性差' },
|
||||
{ title: '价值难挖', description: '数据很多，但不知道怎么用' },
|
||||
],
|
||||
consulting: [
|
||||
{ title: '方向不明', description: '数字化转型不知道从哪里入手' },
|
||||
{ title: '技术债务', description: '历史系统包袱重，新技术难以引入' },
|
||||
{ title: '人才短缺', description: '缺乏专业的技术规划和架构人才' },
|
||||
{ title: '投入浪费', description: 'IT投入不少，但看不到明显效果' },
|
||||
],
|
||||
solutions: [
|
||||
{ title: '行业壁垒', description: '不了解行业最佳实践，走弯路' },
|
||||
{ title: '方案碎片化', description: '各系统各自为政，无法协同' },
|
||||
{ title: '实施风险', description: '大型项目实施失败率高' },
|
||||
{ title: '效果难量化', description: '投入产出比不清晰，难以评估' },
|
||||
],
|
||||
};
|
||||
|
||||
const outcomes = {
|
||||
software: [
|
||||
{ value: '30%', label: '开发效率提升' },
|
||||
{ value: '50%', label: '返工率降低' },
|
||||
{ value: '100%', label: '按时交付率' },
|
||||
],
|
||||
data: [
|
||||
{ value: '70%', label: '决策效率提升' },
|
||||
{ value: '实时', label: '数据更新' },
|
||||
{ value: '100+', label: '可视化报表' },
|
||||
],
|
||||
consulting: [
|
||||
{ value: '60%', label: '方向明确度' },
|
||||
{ value: '40%', label: '试错成本降低' },
|
||||
{ value: '3x', label: '转型速度提升' },
|
||||
],
|
||||
solutions: [
|
||||
{ value: '50%', label: '实施周期缩短' },
|
||||
{ value: '30%', label: '成本降低' },
|
||||
{ value: '95%', label: '客户满意度' },
|
||||
],
|
||||
};
|
||||
|
||||
export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const serviceChallenges = challenges[service.id as keyof typeof challenges] ?? [];
|
||||
const serviceOutcomes = outcomes[service.id as keyof typeof outcomes] ?? [];
|
||||
const relatedCases = CASES.slice(0, 2);
|
||||
|
||||
const Icon = iconMap[service.icon];
|
||||
|
||||
function InlineCTABanner() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
|
||||
<div className="container-wide relative z-10 pt-32 pb-20">
|
||||
<BackButton />
|
||||
<div className="max-w-4xl mt-8">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="w-16 h-16 bg-[#C41E3A] rounded-2xl flex items-center justify-center text-white">
|
||||
{Icon && <Icon />}
|
||||
</div>
|
||||
<div>
|
||||
<Badge className="mb-2 bg-[#C41E3A]/10 text-[#C41E3A] hover:bg-[#C41E3A]/20">
|
||||
核心业务
|
||||
</Badge>
|
||||
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-[#1C1C1C]">
|
||||
{service.title}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-lg text-[#5C5C5C] leading-relaxed">
|
||||
{service.description}
|
||||
<div className="py-12 md:py-16">
|
||||
<div className="container-wide">
|
||||
<FadeUp delay={0}>
|
||||
<div className="max-w-2xl mx-auto bg-white rounded-2xl border border-[#E5E5E5] p-6 md:p-8 text-center shadow-sm">
|
||||
<p className="text-[#1C1C1C] font-semibold text-lg mb-3">
|
||||
想了解我们的服务如何帮助您的企业？
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref={contentRef} className="container-wide py-12 md:py-16">
|
||||
<div className="max-w-4xl mx-auto space-y-16">
|
||||
|
||||
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-8 border border-[#C41E3A]/20">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
|
||||
<MessageCircle className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
|
||||
您可能面临的挑战
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{serviceChallenges.map((challenge, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-4 bg-white rounded-lg border border-[#E5E5E5] hover:border-[#C41E3A] transition-colors"
|
||||
>
|
||||
<h3 className="font-semibold text-[#1C1C1C] mb-2">{challenge.title}</h3>
|
||||
<p className="text-sm text-[#5C5C5C]">{challenge.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-gradient-to-br from-[#F5F7FA] to-white rounded-2xl p-8 border border-[#E5E5E5]">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
|
||||
<Target className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
|
||||
我们如何帮助您
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-lg text-[#5C5C5C] leading-relaxed mb-6">
|
||||
{service.overview}
|
||||
<p className="text-[#5C5C5C] mb-6">
|
||||
预约一次免费咨询，获取专属数字化转型建议
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
{service.features.map((feature, index) => (
|
||||
<div key={index} className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-[#C41E3A] mt-0.5 flex-shrink-0" />
|
||||
<span className="text-[#1C1C1C]">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||||
<RippleButton
|
||||
href="/contact"
|
||||
rippleColor="rgba(196, 30, 58, 0.3)"
|
||||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white px-6 py-3 rounded-lg font-semibold inline-flex items-center justify-center"
|
||||
>
|
||||
免费咨询
|
||||
</RippleButton>
|
||||
<RippleButton
|
||||
href="/contact"
|
||||
rippleColor="rgba(196, 30, 58, 0.2)"
|
||||
className="border border-[#E5E5E5] text-[#5C5C5C] hover:text-[#C41E3A] hover:border-[#C41E3A]/30 px-6 py-3 rounded-lg font-semibold inline-flex items-center justify-center"
|
||||
>
|
||||
预约演示
|
||||
</RippleButton>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-8 border border-[#C41E3A]/20">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
|
||||
<Clock className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
|
||||
服务流程
|
||||
</h2>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{service.process.map((step, index) => (
|
||||
<div key={index} className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-full flex items-center justify-center flex-shrink-0 text-white font-semibold">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div className="flex-1 pb-4">
|
||||
<p className="text-[#1C1C1C] font-medium">{step}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-gradient-to-br from-[#F5F7FA] to-white rounded-2xl p-8 border border-[#E5E5E5]">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
|
||||
<TrendingUp className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
|
||||
您将获得的改变
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid sm:grid-cols-3 gap-4">
|
||||
{serviceOutcomes.map((outcome, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-6 bg-white rounded-lg border border-[#E5E5E5] hover:border-[#C41E3A] transition-colors text-center"
|
||||
>
|
||||
<div className="text-3xl font-bold text-[#C41E3A] mb-2">
|
||||
{outcome.value}
|
||||
</div>
|
||||
<div className="text-sm text-[#5C5C5C]">{outcome.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-6 p-4 bg-white rounded-lg border border-[#E5E5E5]">
|
||||
<p className="text-sm text-[#5C5C5C]">
|
||||
{service.benefits.map(b => b).join('；')}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-8 border border-[#C41E3A]/20">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center">
|
||||
<Users className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-semibold text-[#1C1C1C]">
|
||||
相关案例
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{relatedCases.map((caseItem) => (
|
||||
<StaticLink
|
||||
key={caseItem.id}
|
||||
href={`/cases/${caseItem.id}`}
|
||||
className="group p-4 bg-white rounded-lg border border-[#E5E5E5] hover:border-[#C41E3A] transition-colors"
|
||||
>
|
||||
<Badge variant="secondary" className="mb-2">
|
||||
{caseItem.industry}
|
||||
</Badge>
|
||||
<h3 className="font-semibold text-[#1C1C1C] group-hover:text-[#C41E3A] transition-colors">
|
||||
{caseItem.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#5C5C5C] mt-2 line-clamp-2">
|
||||
{caseItem.description}
|
||||
</p>
|
||||
</StaticLink>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
|
||||
<StaticLink href="/services">
|
||||
<Button variant="outline" size="lg">
|
||||
查看其他服务
|
||||
</Button>
|
||||
</StaticLink>
|
||||
<StaticLink href="/contact">
|
||||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white">
|
||||
开始您的转型之旅
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</StaticLink>
|
||||
</div>
|
||||
</div>
|
||||
</FadeUp>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
|
||||
if (!service) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<p className="text-[#999999]">加载中...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen">
|
||||
<ServiceHeroSection service={service} />
|
||||
<ServiceChallengesSection service={service} />
|
||||
<ServiceFeaturesSection service={service} />
|
||||
<InlineCTABanner />
|
||||
<ServiceProcessSection service={service} />
|
||||
<ServiceOutcomesSection service={service} />
|
||||
<InlineCTABanner />
|
||||
<ServiceCTASection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { SERVICES } from '@/lib/constants';
|
||||
import { SERVICES } from '@/lib/constants/services';
|
||||
import { ServiceDetailClient } from './client';
|
||||
|
||||
export async function generateStaticParams() {
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: '核心业务',
|
||||
description: '诺瓦隆（四川睿新致远科技）提供软件开发、数据分析、技术咨询、解决方案四大核心业务，助力企业实现全方位数字化转型。',
|
||||
};
|
||||
|
||||
export default function ServicesLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { SOLUTIONS } from '@/lib/constants/solutions';
|
||||
import type { Metadata } from 'next';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { SolutionDetailClient } from './solution-detail-client';
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return SOLUTIONS.map((solution) => ({
|
||||
id: solution.id,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
|
||||
const { id } = await params;
|
||||
const solution = SOLUTIONS.find((s) => s.id === id);
|
||||
if (!solution) {return { title: '解决方案 - 睿新致远' };}
|
||||
return {
|
||||
title: `${solution.industry}数字化转型方案 - 睿新致远`,
|
||||
description: solution.description,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function SolutionDetailPage({ params }: PageProps) {
|
||||
const { id } = await params;
|
||||
const solution = SOLUTIONS.find((s) => s.id === id);
|
||||
if (!solution) {notFound();}
|
||||
return <SolutionDetailClient solutionId={id} />;
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
'use client';
|
||||
|
||||
import { SOLUTIONS } from '@/lib/constants/solutions';
|
||||
import { PRODUCTS } from '@/lib/constants/products';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { CheckCircle, Phone } from 'lucide-react';
|
||||
import {
|
||||
InkReveal,
|
||||
FadeUp,
|
||||
RippleButton,
|
||||
FloatingElement,
|
||||
StaggerContainer,
|
||||
StaggerItem,
|
||||
InkCard,
|
||||
SealStamp,
|
||||
} from '@/lib/animations';
|
||||
import { ScrollReveal, inkRevealVariants, slideInLeftVariants } from '@/components/ui/scroll-animations';
|
||||
|
||||
interface SolutionDetailClientProps {
|
||||
solutionId: string;
|
||||
}
|
||||
|
||||
export function SolutionDetailClient({ solutionId }: SolutionDetailClientProps) {
|
||||
const solution = SOLUTIONS.find((s) => s.id === solutionId) || null;
|
||||
|
||||
if (!solution) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<p className="text-[#999999]">加载中...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen">
|
||||
{/* Section 1: Hero */}
|
||||
<section className="relative py-24 md:py-32 bg-gradient-to-b from-white to-[#F8F8F8]">
|
||||
<div className="container-wide">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<SealStamp
|
||||
delay={0.1}
|
||||
className="inline-block px-4 py-2 bg-[#C41E3A]/20 rounded-full text-[#C41E3A] text-sm mb-6"
|
||||
>
|
||||
{solution.industry}
|
||||
</SealStamp>
|
||||
<InkReveal delay={0.2}>
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-[#1C1C1C] mb-4">
|
||||
{solution.title}
|
||||
</h1>
|
||||
</InkReveal>
|
||||
<InkReveal delay={0.4}>
|
||||
<p className="text-lg md:text-xl text-[#5C5C5C] mb-4">{solution.subtitle}</p>
|
||||
</InkReveal>
|
||||
<InkReveal delay={0.5}>
|
||||
<p className="text-base text-[#5C5C5C] leading-relaxed mb-10 max-w-2xl mx-auto">
|
||||
{solution.description}
|
||||
</p>
|
||||
</InkReveal>
|
||||
<InkReveal delay={0.6}>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<RippleButton
|
||||
href="/contact"
|
||||
className="border-2 border-[#C41E3A] text-[#C41E3A] hover:bg-[#C41E3A] hover:text-white px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center"
|
||||
rippleColor="rgba(196, 30, 58, 0.2)"
|
||||
>
|
||||
预约演示
|
||||
</RippleButton>
|
||||
<RippleButton
|
||||
href="/contact"
|
||||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center"
|
||||
rippleColor="rgba(255, 255, 255, 0.3)"
|
||||
>
|
||||
获取定制方案
|
||||
</RippleButton>
|
||||
</div>
|
||||
</InkReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 2: Challenges */}
|
||||
<section className="py-20 md:py-28 bg-white">
|
||||
<div className="container-wide">
|
||||
<ScrollReveal variants={slideInLeftVariants} className="mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-[#1C1C1C]">行业痛点</h2>
|
||||
<p className="text-[#5C5C5C] mt-2">您是否也面临这些挑战？</p>
|
||||
</ScrollReveal>
|
||||
<StaggerContainer className="grid md:grid-cols-2 gap-6 max-w-5xl">
|
||||
{solution.challenges.map((challenge, index) => (
|
||||
<StaggerItem key={index}>
|
||||
<InkCard
|
||||
className="p-6 bg-[#FFFBF5] rounded-2xl border border-[#C41E3A]/10"
|
||||
hoverScale={1.02}
|
||||
hoverShadow="0 20px 40px rgba(196, 30, 58, 0.08)"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="flex-shrink-0 w-8 h-8 rounded-full bg-[#C41E3A]/10 flex items-center justify-center text-[#C41E3A] font-bold text-sm">
|
||||
{index + 1}
|
||||
</span>
|
||||
<p className="text-[#1C1C1C] leading-relaxed">{challenge}</p>
|
||||
</div>
|
||||
</InkCard>
|
||||
</StaggerItem>
|
||||
))}
|
||||
</StaggerContainer>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 3: Our Solutions */}
|
||||
<section className="py-20 md:py-28 bg-[#F8F8F8]">
|
||||
<div className="container-wide">
|
||||
<ScrollReveal variants={inkRevealVariants} className="mb-12 text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-[#1C1C1C]">我们的解决方案</h2>
|
||||
<p className="text-[#5C5C5C] mt-2">针对行业痛点，量身定制</p>
|
||||
</ScrollReveal>
|
||||
<StaggerContainer className="max-w-3xl mx-auto space-y-6">
|
||||
{solution.solutions.map((item, index) => (
|
||||
<StaggerItem key={index}>
|
||||
<div className="flex items-start gap-4 p-6 bg-white rounded-2xl border border-[#E5E5E5]">
|
||||
<CheckCircle className="w-6 h-6 text-[#C41E3A] flex-shrink-0 mt-0.5" />
|
||||
<p className="text-[#1C1C1C] leading-relaxed text-lg">{item}</p>
|
||||
</div>
|
||||
</StaggerItem>
|
||||
))}
|
||||
</StaggerContainer>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 4: Related Products */}
|
||||
{solution.relatedProducts.length > 0 && (
|
||||
<section className="py-16 md:py-20 bg-white">
|
||||
<div className="container-wide">
|
||||
<div className="text-center mb-10">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-[#1C1C1C]">
|
||||
推荐产品
|
||||
</h2>
|
||||
<p className="text-[#5C5C5C] mt-2">即将上市，敬请期待</p>
|
||||
</div>
|
||||
<div className="grid sm:grid-cols-2 gap-6 max-w-3xl mx-auto">
|
||||
{solution.relatedProducts.map((productId) => {
|
||||
const product = PRODUCTS.find((p) => p.id === productId);
|
||||
if (!product) {return null;}
|
||||
return (
|
||||
<FadeUp key={productId}>
|
||||
<StaticLink href={`/products/${productId}`}>
|
||||
<div className="group p-6 bg-[#F8F8F8] rounded-2xl border border-[#E5E5E5] hover:border-[#C41E3A]/30 transition-all">
|
||||
<span className="inline-block px-3 py-1 bg-[#C41E3A]/10 text-[#C41E3A] text-xs font-semibold rounded-full mb-3">
|
||||
{product.category}
|
||||
</span>
|
||||
<h3 className="text-lg font-bold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
|
||||
{product.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#5C5C5C] line-clamp-2">{product.description}</p>
|
||||
</div>
|
||||
</StaticLink>
|
||||
</FadeUp>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Section 6: CTA */}
|
||||
<section className="relative py-24 md:py-32 bg-gradient-to-r from-[#C41E3A] to-[#E85D75] overflow-hidden">
|
||||
<FloatingElement
|
||||
amplitude={8}
|
||||
duration={5}
|
||||
delay={0.5}
|
||||
className="absolute -top-20 -right-20 pointer-events-none"
|
||||
>
|
||||
<div className="w-[280px] h-[280px] bg-white/10 rounded-full" />
|
||||
</FloatingElement>
|
||||
<FloatingElement
|
||||
amplitude={6}
|
||||
duration={4}
|
||||
delay={1}
|
||||
className="absolute -bottom-16 -left-16 pointer-events-none"
|
||||
>
|
||||
<div className="w-[220px] h-[220px] bg-white/10 rounded-full" />
|
||||
</FloatingElement>
|
||||
<div className="container-wide">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<InkReveal delay={0}>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
|
||||
准备好开启{solution.industry}数字化转型了吗？
|
||||
</h2>
|
||||
</InkReveal>
|
||||
<FadeUp delay={0.15}>
|
||||
<p className="text-lg text-white/90 mb-10">
|
||||
我们的专家团队将为您量身定制专属解决方案
|
||||
</p>
|
||||
</FadeUp>
|
||||
<FadeUp delay={0.3}>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<RippleButton
|
||||
href="/contact"
|
||||
rippleColor="rgba(196, 30, 58, 0.3)"
|
||||
className="bg-white text-[#C41E3A] px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center w-full sm:w-auto"
|
||||
>
|
||||
免费获取方案
|
||||
</RippleButton>
|
||||
<RippleButton
|
||||
href="tel:+8613800138000"
|
||||
rippleColor="rgba(255, 255, 255, 0.2)"
|
||||
className="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center gap-2 w-full sm:w-auto"
|
||||
>
|
||||
<Phone className="w-5 h-5" />
|
||||
电话咨询
|
||||
</RippleButton>
|
||||
</div>
|
||||
</FadeUp>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: '解决方案 - 睿新致远',
|
||||
description: '三种角色，一种身份——您的成长伙伴',
|
||||
title: '行业方案',
|
||||
description: '诺瓦隆为制造业、政务服务、酒店管理、智慧农业等行业提供定制化数字化转型解决方案，助力企业实现数字化升级。',
|
||||
};
|
||||
|
||||
export default function SolutionsLayout({
|
||||
|
||||
@@ -3,11 +3,29 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { PageHeader } from '@/components/ui/page-header';
|
||||
import { ArrowRight, Lightbulb, Cpu, Users, CheckCircle2 } from 'lucide-react';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { MethodologySection } from '@/components/sections/methodology-section';
|
||||
import { SOLUTIONS } from '@/lib/constants/solutions';
|
||||
import { FadeUp } from '@/lib/animations';
|
||||
|
||||
const ConsultingSection = dynamic(
|
||||
() => import('@/components/solutions/consulting-section').then(mod => ({ default: mod.ConsultingSection })),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
const TechSolutionSection = dynamic(
|
||||
() => import('@/components/solutions/tech-solution-section').then(mod => ({ default: mod.TechSolutionSection })),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
const AccompanySection = dynamic(
|
||||
() => import('@/components/solutions/accompany-section').then(mod => ({ default: mod.AccompanySection })),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
export default function SolutionsPage() {
|
||||
const contentRef = useRef(null);
|
||||
@@ -22,221 +40,53 @@ export default function SolutionsPage() {
|
||||
|
||||
<div className="container-wide relative z-10 py-16" ref={contentRef}>
|
||||
<div className="max-w-6xl mx-auto space-y-24">
|
||||
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20"
|
||||
>
|
||||
<div className="flex items-start gap-6 mb-8">
|
||||
<div className="w-16 h-16 bg-[#C41E3A] rounded-2xl flex items-center justify-center flex-shrink-0">
|
||||
<Lightbulb className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-2">
|
||||
模块一：数字化转型咨询 · 参谋伙伴
|
||||
</h2>
|
||||
<p className="text-lg text-[#5C5C5C]">
|
||||
帮您看清前路，迈对第一步
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 mb-8">
|
||||
<p className="text-lg text-[#1C1C1C] leading-relaxed">
|
||||
数字化转型最大的成本，是走错方向的成本。
|
||||
</p>
|
||||
<p className="text-lg text-[#1C1C1C] leading-relaxed">
|
||||
我们用行业智慧帮您洞察趋势，用理性分析帮您避开陷阱。
|
||||
</p>
|
||||
<p className="text-lg text-[#1C1C1C] leading-relaxed">
|
||||
不堆砌概念，只帮您想清楚：该不该做、做什么、怎么做。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-4 flex items-center gap-2">
|
||||
<CheckCircle2 className="w-6 h-6 text-[#C41E3A]" />
|
||||
核心价值点
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
|
||||
<div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
|
||||
<span className="text-[#1C1C1C]">行业趋势洞察报告</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
|
||||
<div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
|
||||
<span className="text-[#1C1C1C]">数字化转型成熟度评估</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
|
||||
<div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
|
||||
<span className="text-[#1C1C1C]">个性化实施路径规划</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
|
||||
onClick={() => {
|
||||
const element = document.getElementById('contact');
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}}
|
||||
>
|
||||
预约一次免费诊断
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20"
|
||||
>
|
||||
<div className="flex items-start gap-6 mb-8">
|
||||
<div className="w-16 h-16 bg-[#C41E3A] rounded-2xl flex items-center justify-center flex-shrink-0">
|
||||
<Cpu className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-2">
|
||||
模块二：信息技术解决方案 · 技术伙伴
|
||||
</h2>
|
||||
<p className="text-lg text-[#5C5C5C]">
|
||||
让技术真正为业务服务
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 mb-8">
|
||||
<p className="text-lg text-[#1C1C1C] leading-relaxed">
|
||||
我们不追逐“最火”的技术，只选择“最对”的技术。
|
||||
</p>
|
||||
<p className="text-lg text-[#1C1C1C] leading-relaxed">
|
||||
将前沿技术深度融入您的业务场景，让每一行代码都产生业务价值。
|
||||
</p>
|
||||
<p className="text-lg text-[#1C1C1C] leading-relaxed">
|
||||
您不必懂技术原理，只需要看见业务在增长。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-4 flex items-center gap-2">
|
||||
<CheckCircle2 className="w-6 h-6 text-[#C41E3A]" />
|
||||
核心价值点
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
|
||||
<div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
|
||||
<span className="text-[#1C1C1C]">业务场景深度调研</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
|
||||
<div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
|
||||
<span className="text-[#1C1C1C]">技术方案定制开发</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
|
||||
<div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
|
||||
<span className="text-[#1C1C1C]">敏捷交付快速迭代</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-[#C41E3A] text-[#C41E3A] hover:bg-[#C41E3A] hover:text-white"
|
||||
onClick={() => {
|
||||
const element = document.getElementById('cases');
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}}
|
||||
>
|
||||
查看技术案例
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20"
|
||||
>
|
||||
<div className="flex items-start gap-6 mb-8">
|
||||
<div className="w-16 h-16 bg-[#C41E3A] rounded-2xl flex items-center justify-center flex-shrink-0">
|
||||
<Users className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-2">
|
||||
模块三：长期陪跑服务 · 同行伙伴
|
||||
</h2>
|
||||
<p className="text-lg text-[#5C5C5C]">
|
||||
交付只是开始，陪伴才是常态
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 mb-8">
|
||||
<p className="text-lg text-[#1C1C1C] leading-relaxed">
|
||||
项目上线那天，是我们真正成为伙伴的开始。
|
||||
</p>
|
||||
<p className="text-lg text-[#1C1C1C] leading-relaxed">
|
||||
我们建立长效服务机制，定期回访、持续优化、随时响应。
|
||||
</p>
|
||||
<p className="text-lg text-[#1C1C1C] leading-relaxed">
|
||||
在您需要的时候，我们始终在场。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-4 flex items-center gap-2">
|
||||
<CheckCircle2 className="w-6 h-6 text-[#C41E3A]" />
|
||||
核心价值点
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
|
||||
<div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
|
||||
<span className="text-[#1C1C1C]">专属客户成功经理</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
|
||||
<div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
|
||||
<span className="text-[#1C1C1C]">季度业务复盘会</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
|
||||
<div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
|
||||
<span className="text-[#1C1C1C]">7×24小时响应通道</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
|
||||
onClick={() => {
|
||||
const element = document.getElementById('contact');
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}}
|
||||
>
|
||||
了解陪跑服务
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</motion.section>
|
||||
<ConsultingSection />
|
||||
<TechSolutionSection />
|
||||
<AccompanySection />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 行业解决方案入口 */}
|
||||
<section className="py-20 md:py-28 bg-[#F8F8F8]">
|
||||
<div className="container-wide">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-[#1C1C1C] mb-3">
|
||||
行业解决方案
|
||||
</h2>
|
||||
<p className="text-[#5C5C5C] text-lg">
|
||||
针对不同行业的数字化痛点，提供定制化解决方案
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-6 max-w-5xl mx-auto">
|
||||
{SOLUTIONS.map((solution, index) => (
|
||||
<FadeUp key={solution.id} delay={index * 0.1}>
|
||||
<StaticLink href={`/solutions/${solution.id}`}>
|
||||
<div className="group p-6 md:p-8 bg-white rounded-2xl border border-[#E5E5E5] hover:border-[#C41E3A]/30 transition-all hover:shadow-lg">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="inline-block px-3 py-1 bg-[#C41E3A]/10 text-[#C41E3A] text-xs font-semibold rounded-full">
|
||||
{solution.industry}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
|
||||
{solution.title}
|
||||
</h3>
|
||||
<p className="text-[#5C5C5C] text-sm mb-4 line-clamp-2">
|
||||
{solution.description}
|
||||
</p>
|
||||
<div className="flex items-center gap-1 text-[#C41E3A] text-sm font-semibold">
|
||||
查看方案
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
</StaticLink>
|
||||
</FadeUp>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<MethodologySection />
|
||||
|
||||
<motion.div
|
||||
@@ -253,15 +103,15 @@ export default function SolutionsPage() {
|
||||
无论您处于哪个阶段，我们都能为您提供合适的解决方案
|
||||
</p>
|
||||
<div className="flex justify-center gap-4">
|
||||
<Button
|
||||
size="lg"
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
asChild
|
||||
>
|
||||
<StaticLink href="/contact">联系我们</StaticLink>
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
|
||||
asChild
|
||||
>
|
||||
|
||||
@@ -11,7 +11,7 @@ import { Shield, Building2, Users, Code, Target, ArrowRight } from 'lucide-react
|
||||
const TEAM_PILLARS = [
|
||||
{
|
||||
icon: Shield,
|
||||
title: '12年+ 行业深耕',
|
||||
title: '12+ 年行业深耕',
|
||||
description: '核心团队长期从事技术咨询、企业数字化等领域，服务覆盖金融、制造、零售、政务、农业等多个行业，积累了丰富的跨行业经验和最佳实践。',
|
||||
},
|
||||
{
|
||||
@@ -44,7 +44,7 @@ export function TeamClient() {
|
||||
<div className="min-h-screen bg-white">
|
||||
<PageHeader
|
||||
title="核心团队"
|
||||
description="核心团队从事技术咨询、企业数字化等行业 12 年+，开发团队成员来自于多个大型传统 IT 企业"
|
||||
description="核心团队从事技术咨询、企业数字化等行业 12 年+，开发团队成员来自多个大型传统 IT 企业"
|
||||
/>
|
||||
|
||||
<div ref={contentRef} className="container-wide py-12 md:py-16">
|
||||
|
||||
@@ -2,7 +2,7 @@ import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { TeamClient } from './client';
|
||||
|
||||
export const metadata = {
|
||||
title: `核心团队 - ${COMPANY_INFO.name}`,
|
||||
title: '核心团队',
|
||||
description: `了解${COMPANY_INFO.name}的核心团队。我们的团队成员拥有丰富的行业经验和技术专长，致力于为客户提供专业的数字化转型服务。`,
|
||||
};
|
||||
|
||||
|
||||
+1
-1
@@ -212,7 +212,7 @@
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* 青柳隷書 - 仅用于品牌标题"睿新致遠" */
|
||||
/* 青柳隷書 - 仅用于品牌标题"睿新致远" */
|
||||
.font-brand {
|
||||
font-family: var(--font-aoyagi-reisho), 'Aoyagi Reisho', 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', serif !important;
|
||||
font-weight: normal;
|
||||
|
||||
+4
-4
@@ -45,9 +45,9 @@ const maShanZheng = Ma_Shan_Zheng({
|
||||
preload: true,
|
||||
});
|
||||
|
||||
// 青柳隷書 - 仅用于品牌标题"睿新致遠"（子集版本，仅包含4个字符）
|
||||
// 青柳隷書 - 仅用于品牌标题"睿新致遠"（完整版，支持繁体字）
|
||||
const aoyagiReisho = localFont({
|
||||
src: "./fonts/AoyagiReisho-subset.ttf",
|
||||
src: "./fonts/AoyagiReisho.ttf",
|
||||
variable: "--font-aoyagi-reisho",
|
||||
display: "swap",
|
||||
preload: true,
|
||||
@@ -60,7 +60,7 @@ export const metadata: Metadata = {
|
||||
template: "%s | 四川睿新致远科技有限公司",
|
||||
},
|
||||
description: "四川睿新致远科技有限公司成立于2026年，专注于企业数字化转型服务，提供软件开发、云计算、数据分析、信息安全等一站式解决方案。",
|
||||
keywords: ["数字化转型", "企业软件", "ERP系统", "CRM系统", "云计算", "数据分析", "软件开发", "成都科技公司", "金融科技", "诺瓦隆"],
|
||||
keywords: ["数字化转型", "企业软件", "ERP系统", "CRM系统", "云计算", "数据分析", "软件开发", "成都科技公司", "诺瓦隆"],
|
||||
authors: [{ name: "四川睿新致远科技有限公司" }],
|
||||
creator: "四川睿新致远科技有限公司",
|
||||
publisher: "四川睿新致远科技有限公司",
|
||||
@@ -101,7 +101,7 @@ export const metadata: Metadata = {
|
||||
canonical: "https://www.novalon.cn",
|
||||
},
|
||||
verification: {
|
||||
google: "your-google-verification-code",
|
||||
google: "pending-verification",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Home, ArrowLeft, Search } from 'lucide-react';
|
||||
import { Home, ArrowLeft, Building2, Briefcase, Package, Trophy } from 'lucide-react';
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
@@ -58,7 +58,7 @@ export default function NotFound() {
|
||||
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
|
||||
>
|
||||
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
|
||||
<Search className="w-5 h-5 text-[#C41E3A]" />
|
||||
<Building2 className="w-5 h-5 text-[#C41E3A]" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="font-semibold text-[#1C1C1C]">关于我们</div>
|
||||
@@ -71,7 +71,7 @@ export default function NotFound() {
|
||||
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
|
||||
>
|
||||
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
|
||||
<Search className="w-5 h-5 text-[#C41E3A]" />
|
||||
<Briefcase className="w-5 h-5 text-[#C41E3A]" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="font-semibold text-[#1C1C1C]">核心业务</div>
|
||||
@@ -84,7 +84,7 @@ export default function NotFound() {
|
||||
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
|
||||
>
|
||||
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
|
||||
<Search className="w-5 h-5 text-[#C41E3A]" />
|
||||
<Package className="w-5 h-5 text-[#C41E3A]" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="font-semibold text-[#1C1C1C]">产品服务</div>
|
||||
@@ -97,10 +97,10 @@ export default function NotFound() {
|
||||
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
|
||||
>
|
||||
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
|
||||
<Search className="w-5 h-5 text-[#C41E3A]" />
|
||||
<Trophy className="w-5 h-5 text-[#C41E3A]" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="font-semibold text-[#1C1C1C]">成功案例</div>
|
||||
<div className="font-semibold text-[#1C1C1C]">客户案例</div>
|
||||
<div className="text-sm text-[#5C5C5C]">客户故事</div>
|
||||
</div>
|
||||
</StaticLink>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: '隐私政策 - 睿新致远',
|
||||
description: '四川睿新致远科技有限公司隐私政策',
|
||||
title: '隐私政策',
|
||||
description: '四川睿新致远科技有限公司（诺瓦隆）隐私政策。我们重视您的隐私，致力于保护您的个人信息安全。',
|
||||
};
|
||||
|
||||
export default function PrivacyPolicyPage() {
|
||||
@@ -22,6 +22,7 @@ export default function PrivacyPolicyPage() {
|
||||
<div className="container-wide py-16">
|
||||
<div className="max-w-4xl">
|
||||
<div className="prose prose-lg max-w-none">
|
||||
<p className="text-sm text-[#718096] mb-6">最后更新日期：2026年4月25日</p>
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">引言</h2>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: '服务条款 - 睿新致远',
|
||||
description: '四川睿新致远科技有限公司服务条款',
|
||||
title: '服务条款',
|
||||
description: '四川睿新致远科技有限公司（诺瓦隆）服务条款。请仔细阅读以下条款，使用我们的服务即表示您同意这些条款。',
|
||||
};
|
||||
|
||||
export default function TermsOfServicePage() {
|
||||
@@ -170,7 +170,7 @@ export default function TermsOfServicePage() {
|
||||
|
||||
<section className="bg-[#FFFBF5] p-6 rounded-lg border-l-4 border-[#C41E3A]">
|
||||
<p className="text-[#1C1C1C] font-medium mb-2">最后更新日期</p>
|
||||
<p className="text-[#5C5C5C]">2026年2月26日</p>
|
||||
<p className="text-[#5C5C5C]">2026年4月25日</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user