diff --git a/src/app/(marketing)/about/client.tsx b/src/app/(marketing)/about/client.tsx index 266e966..fd4d36a 100644 --- a/src/app/(marketing)/about/client.tsx +++ b/src/app/(marketing)/about/client.tsx @@ -1,253 +1,147 @@ 'use client'; -import { motion } from 'framer-motion'; -import { useInView } from 'framer-motion'; -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 { Button } from '@/components/ui/button'; +import { motion, useInView } from 'framer-motion'; +import { useRef } from 'react'; import { StaticLink } from '@/components/ui/static-link'; -import { Lightbulb, Users, Target, MapPin, Mail, ArrowRight } from 'lucide-react'; +import { RippleButton } from '@/components/ui/ripple-button'; +import { COMPANY_INFO } from '@/lib/constants'; +import { ArrowRight, Target, HeartHandshake, Award, Shield, Building2, Users, Code, TrendingUp } from 'lucide-react'; +import { useReducedMotion } from '@/hooks/use-reduced-motion'; +import { InkReveal, BlurReveal, StaggerContainer, StaggerItem, CountUp } from '@/lib/animations'; +import { TextReveal } from '@/components/ui/scroll-animations'; + +const VALUES = [ + { title: '务实', description: '不追逐风口，只做真正为客户创造价值的事。', icon: Target }, + { title: '陪伴', description: '交付只是开始，长期陪跑才是我们的承诺。', icon: HeartHandshake }, + { title: '专业', description: '用扎实的工程能力和行业经验赢得信任。', icon: Award }, +]; + +const TEAM_PILLARS = [ + { icon: Shield, title: '12+ 年行业深耕', description: '核心团队长期从事技术咨询、企业数字化等领域，服务覆盖金融、制造、零售、政务、农业等多个行业。' }, + { icon: Building2, title: '大型 IT 企业背景', description: '开发团队成员来自多个大型传统 IT 企业，具备扎实的工程能力和规范化的交付经验。' }, + { icon: Users, title: '复合型技术团队', description: '团队成员既懂技术又懂业务，能够深入理解客户的真实场景和痛点。' }, + { icon: Code, title: '全栈技术能力', description: '掌握从前端到后端、从云原生到数据智能的全栈技术能力。' }, + { icon: TrendingUp, title: '结果导向交付', description: '以"客户业务是否真正改善"为衡量标准，追求可量化的业务价值。' }, +]; + +const COMPANY_STATS = [ + { value: 12, label: '年+核心成员行业经验', suffix: '' }, + { value: 5, label: '覆盖行业', suffix: '+' }, + { value: 6, label: '自研产品', suffix: '款' }, + { value: 98, label: '客户满意度', suffix: '%' }, +]; export function AboutClient() { - const contentRef = useRef(null); - const isContentInView = useInView(contentRef, { once: true, margin: '-100px' }); - - const values = useMemo(() => [ - { - icon: Lightbulb, - title: '务实', - description: '不追逐风口，只做真正为客户创造价值的事。每一个方案都源于对业务场景的深入洞察。', - }, - { - icon: Users, - title: '陪伴', - description: '交付只是开始，长期陪跑才是我们的承诺。我们关注的不只是项目是否上线，更是您的业务是否真正改善。', - }, - { - icon: Target, - title: '专业', - description: '用扎实的工程能力和行业经验赢得信任。既懂技术又懂业务，提供真正可落地的解决方案。', - }, - ], []); - - const milestones = useMemo(() => [ - { - date: '2026年1月', - title: '公司成立', - description: '四川睿新致远科技有限公司在成都龙泉驿区正式成立，专注于企业数字化转型解决方案', - }, - { - date: '2026年1月', - title: '团队组建', - description: '核心团队到位，技术团队拥有丰富的行业经验和专业技能', - }, - { - date: '2026年2月', - title: '业务启动', - description: '推出企业数字化转型解决方案，开始服务首批客户', - }, - { - date: '2026年2月', - title: '产品研发', - description: '启动ERP、CRM等自研产品的研发工作，致力于为企业提供一站式数字化服务', - }, - ], []); + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: '-100px' }); + const shouldReduceMotion = useReducedMotion(); return (
- + {/* Hero - InkReveal */} +
+
+ +
+
+ 关于我们 +
+

+ 关于 {COMPANY_INFO.shortName} +

+

{COMPANY_INFO.slogan}

+ +
+
-
+
+ {/* 品牌理念 - TextReveal 逐词揭示 */} + + + {/* 核心理念 - BlurReveal */} + +

+ 我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。 +

+ + + {/* 数据指标 - CountUp */} -
-

睿新的选择

-

- 所以我们选择了一条不同的路。 -

- -
-

智连未来

-

- 我们坚持对行业趋势的深度研究，不追逐昙花一现的概念。 -

-

- 每一次方案，都源于对您业务场景的洞察； -

-

- 每一次连接，都为了让技术真正服务于您的未来。 -

-
- -
-

成长伙伴

-

- 我们不把“项目交付”当作终点。 -

-

- 您的业务增长了吗？您的团队能力提升了吗？ -

-

- 您下一次遇到难题时，还会第一个想到我们吗？ -

-

- 这些问题，比“项目是否按时交付”更让我们在意。 -

-
-
- -
-

品牌承诺

-

- 我们承诺： -

-
    -
  • - ✅ - 不卖您用不上的技术 -
    • -
  • - ✅ - 不说不懂业务的术语 -
    • -
  • - ✅ - 不做路过就忘的“一锤子买卖” -
    • -
-

- 我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。 -

-
- - - {STATS.map((stat, idx) => ( - - -
{stat.value}
-
{stat.label}
- - - ))} - - - -

核心价值观

-
- {values.map((value, idx) => ( - -
- -
-
-

{value.title}

-

{value.description}

-
- - ))} -
- - - -

发展历程

-
- {milestones.map((milestone, idx) => ( - -
- {milestone.date} -
-
-

{milestone.title}

-

{milestone.description}

-
- - ))} -
- - - -

联系我们

-
-
-
- -
-
-

公司地址

-

{COMPANY_INFO.address}

-
+ {COMPANY_STATS.map((stat) => ( +
+
+ + {stat.suffix}
-
-
- -
-
-

电子邮箱

- - {COMPANY_INFO.email} - -
-
- +
{stat.label}
- + ))} + - {/* Bottom CTA */} -
-

- 想了解更多？ -

-

- 我们期待与您交流，共同探讨数字化转型之路 -

- -
+ {/* 核心价值观 - StaggerContainer */} + + {VALUES.map((value) => { + const Icon = value.icon; + return ( + +
+
+ +
+

{value.title}

+

{value.description}

+
+ + ); + })} + + + {/* 团队优势 - StaggerContainer */} + + {TEAM_PILLARS.map((item, idx) => { + const Icon = item.icon; + return ( + +
= 3 ? 'md:col-span-1 lg:col-start-1' : ''}`}> +
+ +
+

{item.title}

+

{item.description}

+
+ + ); + })} + + + {/* CTA */} + +

+ 想了解更多？ +

+

+ 我们期待与您交流，共同探讨数字化转型之路 +

+ + + 立即咨询 + + +
diff --git a/src/app/(marketing)/about/page.test.tsx b/src/app/(marketing)/about/page.test.tsx index d866ea4..3a80045 100644 --- a/src/app/(marketing)/about/page.test.tsx +++ b/src/app/(marketing)/about/page.test.tsx @@ -97,7 +97,7 @@ jest.mock('@/lib/constants', () => ({ { value: '10+', label: '企业客户' }, { value: '20+', label: '成功案例' }, { value: '30+', label: '项目交付' }, - { value: '12+', label: '年行业经验' }, + { value: '12+', label: '年核心成员行业经验' }, ], })); diff --git a/src/app/(marketing)/cases/[id]/client.tsx b/src/app/(marketing)/cases/[id]/client.tsx index 298f989..13df1bf 100644 --- a/src/app/(marketing)/cases/[id]/client.tsx +++ b/src/app/(marketing)/cases/[id]/client.tsx @@ -1,6 +1,5 @@ 'use client'; -import { useEffect, useRef, useState } from 'react'; import { StaticLink } from '@/components/ui/static-link'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; @@ -13,6 +12,8 @@ import { Award, TrendingUp, } from 'lucide-react'; +import { InkReveal, StaggerContainer, StaggerItem } from '@/lib/animations'; +import { ScrollReveal } from '@/components/ui/scroll-animations'; interface CaseKeyMoment { title: string; @@ -39,17 +40,11 @@ interface CaseItem { slug: string; date: string; image?: string; - /** 客户面临的挑战 */ challenge: string; - /** 我们的解决方案 */ solution: string; - /** 关键时刻 */ keyMoments: CaseKeyMoment[]; - /** 成果数据 */ results: CaseResult[]; - /** 客户证言 */ testimonial?: CaseTestimonial; - /** 合作时长 */ duration: string; } @@ -58,32 +53,13 @@ interface CaseDetailClientProps { } export function CaseDetailClient({ caseItem }: CaseDetailClientProps) { - const [isVisible, setIsVisible] = useState(false); - const contentRef = useRef(null); - - useEffect(() => { - const observer = new IntersectionObserver( - ([entry]) => { - if (entry?.isIntersecting) { - setIsVisible(true); - } - }, - { threshold: 0.1 } - ); - - if (contentRef.current) { - observer.observe(contentRef.current); - } - - return () => observer.disconnect(); - }, []); - return (
+ {/* Hero - InkReveal */}
-
+ {caseItem.category} @@ -91,193 +67,199 @@ export function CaseDetailClient({ caseItem }: CaseDetailClientProps) { {caseItem.title}

{caseItem.excerpt}

-
+
-
-
+
+
- {/* 客户遇到的成长瓶颈 */} -
-
-
- + {/* 客户遇到的成长瓶颈 - ScrollReveal */} + +
+
+
+ +
+

+ 客户遇到的成长瓶颈 +

-

- 客户遇到的成长瓶颈 -

-
-

- {caseItem.challenge} -

-
- - {/* 我们如何智连未来 */} -
-
-
- -
-

- 我们如何智连未来 -

-
-

- {caseItem.solution} + {caseItem.challenge}

-
-
- - {/* 共同成长的故事 */} - {caseItem.keyMoments && caseItem.keyMoments.length > 0 && ( -
-
-
- -
-

- 共同成长的故事 -

-
-
- {caseItem.keyMoments.map((moment, index) => ( -
-
- -
-

- {moment.title} -

-

- {moment.description} -

-
-
-
- ))} -
- )} + - {/* 今天，他们走到了哪里 */} - {caseItem.results && caseItem.results.length > 0 && ( + {/* 我们如何智连未来 - ScrollReveal */} +
- +

- 今天，他们走到了哪里 + 我们如何智连未来

-
- {caseItem.results.map((result, index) => ( -
- -
- {result.value} -
-
- {result.label} -
-
- ))} -
-
- )} - - {/* 客户证言精选 */} - {caseItem.testimonial && ( -
-
-
- -
-

- 客户证言精选 -

-
-
- -

- {caseItem.testimonial.quote} +

+

+ {caseItem.solution}

-
-
- 客 -
-
-

- {caseItem.testimonial.author} -

-

- {caseItem.testimonial.role} -

-
-
+ + + {/* 共同成长的故事 - StaggerContainer */} + {caseItem.keyMoments && caseItem.keyMoments.length > 0 && ( + +
+
+
+ +
+

+ 共同成长的故事 +

+
+ + {caseItem.keyMoments.map((moment, index) => ( + +
+
+ +
+

+ {moment.title} +

+

+ {moment.description} +

+
+
+
+ + ))} + +
+ + )} + + {/* 今天，他们走到了哪里 - StaggerContainer 数据指标 */} + {caseItem.results && caseItem.results.length > 0 && ( + +
+
+
+ +
+

+ 今天，他们走到了哪里 +

+
+ + {caseItem.results.map((result, index) => ( + +
+ +
+ {result.value} +
+
+ {result.label} +
+
+ + ))} + +
+ + )} + + {/* 客户证言精选 - ScrollReveal */} + {caseItem.testimonial && ( + +
+
+
+ +
+

+ 客户证言精选 +

+
+
+ +

+ {caseItem.testimonial.quote} +

+
+
+ 客 +
+
+

+ {caseItem.testimonial.author} +

+

+ {caseItem.testimonial.role} +

+
+
+
+
+ )}
{/* 侧边栏 */}
-
-

- 项目信息 -

-
-
-
客户名称
-
- {caseItem.testimonial?.author || '客户企业'} -
-
-
-
行业领域
-
- {caseItem.category} -
-
-
-
合作时长
-
- {caseItem.duration || '3年'} -
-
-
-
发布时间
-
{caseItem.date}
-
-
-
+ +
+

+ 项目信息 +

+
+
+
客户名称
+
+ {caseItem.testimonial?.author || '客户企业'} +
+
+
+
行业领域
+
+ {caseItem.category} +
+
+
+
合作时长
+
+ {caseItem.duration || '3年'} +
+
+
+
发布时间
+
{caseItem.date}
+
+
+
+ -
-

想要了解更多？

-

- 联系我们的专家团队，获取定制化解决方案 -

- -
+ +
+

想要了解更多？

+

+ 联系我们的专家团队，获取定制化解决方案 +

+ +
+
diff --git a/src/app/(marketing)/cases/page.tsx b/src/app/(marketing)/cases/page.tsx index 715aa16..7492d84 100644 --- a/src/app/(marketing)/cases/page.tsx +++ b/src/app/(marketing)/cases/page.tsx @@ -1,7 +1,6 @@ 'use client'; -import { useState, useMemo, useRef, ChangeEvent } from 'react'; -import { useInView } from 'framer-motion'; +import { useState, useMemo, ChangeEvent } from 'react'; import { CASES } from '@/lib/constants'; import { Badge } from '@/components/ui/badge'; import { Input } from '@/components/ui/input'; @@ -9,8 +8,9 @@ import { Button } from '@/components/ui/button'; import { PageHeader } from '@/components/ui/page-header'; import { Search, ArrowLeft, Building2, Calendar, TrendingUp, Filter, SearchX } from 'lucide-react'; import { StaticLink } from '@/components/ui/static-link'; -import { motion } from 'framer-motion'; import { Pagination } from '@/components/ui/pagination'; +import { InkReveal, StaggerContainer, StaggerItem } from '@/lib/animations'; +import { ScrollReveal } from '@/components/ui/scroll-animations'; const industries = ['全部', ...Array.from(new Set(CASES.map((c) => c.industry)))]; const ITEMS_PER_PAGE = 6; @@ -19,8 +19,6 @@ export default function CasesPage() { const [selectedIndustry, setSelectedIndustry] = useState('全部'); const [searchQuery, setSearchQuery] = useState(''); const [currentPage, setCurrentPage] = useState(1); - const contentRef = useRef(null); - const isContentInView = useInView(contentRef, { once: true, margin: '-100px' }); const filteredCases = useMemo(() => { return CASES.filter((caseItem) => { @@ -60,14 +58,10 @@ export default function CasesPage() { description="我们与优秀的企业同行，共同成长，共创未来" /> -
+
- + {/* 筛选区 - InkReveal */} +
@@ -102,7 +96,7 @@ export default function CasesPage() { aria-label="搜索案例" />
- + {paginatedCases.length === 0 ? (
@@ -119,14 +113,10 @@ export default function CasesPage() {
) : ( <> -
- {paginatedCases.map((caseItem, index) => ( - + {/* 卡片网格 - StaggerContainer */} + + {paginatedCases.map((caseItem) => ( +
- + ))} -
+ @@ -189,20 +179,17 @@ export default function CasesPage() {
- -
-

- 准备开始您的数字化转型之旅？ -

-

- 让我们与您同行，共创美好未来 -

- +
- +
); } diff --git a/src/app/(marketing)/contact/page.tsx b/src/app/(marketing)/contact/page.tsx index c1768e2..f5a7139 100644 --- a/src/app/(marketing)/contact/page.tsx +++ b/src/app/(marketing)/contact/page.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useEffect, useRef, Suspense } from 'react'; +import { useState, Suspense } from 'react'; import { useSearchParams } from 'next/navigation'; import { z } from 'zod'; import { Button } from '@/components/ui/button'; @@ -10,6 +10,8 @@ import { Toast } from '@/components/ui/toast'; import { Mail, MapPin, Send, Loader2, Clock, HeadphonesIcon, CheckCircle2 } from 'lucide-react'; import { COMPANY_INFO } from '@/lib/constants'; import { trackContactForm, trackConversion } from '@/lib/analytics'; +import { InkReveal, StaggerContainer, StaggerItem } from '@/lib/animations'; +import { ScrollReveal } from '@/components/ui/scroll-animations'; const contactFormSchema = z.object({ name: z.string().min(2, '姓名至少需要2个字符'), @@ -32,7 +34,6 @@ interface FormErrors { function ContactFormContent() { const searchParams = useSearchParams(); const isSuccessFromRedirect = searchParams.get('success') === 'true'; - const [isVisible, setIsVisible] = useState(false); const [showToast, setShowToast] = useState(isSuccessFromRedirect); const [toastMessage, setToastMessage] = useState( isSuccessFromRedirect ? '表单提交成功！我们会尽快与您联系。' : '' @@ -50,13 +51,6 @@ function ContactFormContent() { message: '', }); const [errors, setErrors] = useState({}); - const sectionRef = useRef(null); - - useEffect(() => { - requestAnimationFrame(() => { - setIsVisible(true); - }); - }, []); const validateField = (field: keyof ContactFormData, value: string) => { try { @@ -162,18 +156,14 @@ function ContactFormContent() { /> )} -
+
-
+ {/* 标题区 - InkReveal */} +
联系我们 @@ -184,91 +174,87 @@ function ContactFormContent() {

无论您有任何问题或合作意向，我们都很乐意与您交流

-
+
-
-
-

联系方式

-
-
-
- + {/* 左侧联系信息 - StaggerContainer */} + + +
+

联系方式

+
+
+
+ +
+
- -
-
-
- -
-
-

地址

-

{COMPANY_INFO.address}

+
+
+ +
+
+

地址

+

{COMPANY_INFO.address}

+
-
+ -
-
- -

工作时间

-
-
-
- 周一至周五 - 9:00 - 18:00 + +
+
+ +

工作时间

+
+
+
+ 周一至周五 + 9:00 - 18:00 +
-
+ -
-
- -

我们的承诺

-
-
-
-
-

工作日 2 小时内快速响应您的咨询

+ +
+
+ +

我们的承诺

-
-
-

提供免费的业务咨询和方案评估服务

-
-
-
-

根据您的需求量身定制最优解决方案

+
+
+
+

工作日 2 小时内快速响应您的咨询

+
+
+
+

提供免费的业务咨询和方案评估服务

+
+
+
+

根据您的需求量身定制最优解决方案

+
-
-
+ + -
+ {/* 右侧表单 - ScrollReveal */} +

发送消息

{isSubmitted ? (
-
+

消息已发送

@@ -314,9 +300,9 @@ function ContactFormContent() { required value={formData.email} onChange={(e) => handleChange('email', e.target.value)} - onBlur={(e) => handleBlur('email', e.target.value)} - error={errors.email} - /> + onBlur={(e) => handleBlur('email', e.target.value)} + error={errors.email} + /> handleChange('subject', e.target.value)} - onBlur={(e) => handleBlur('subject', e.target.value)} - error={errors.subject} - /> + onChange={(e) => handleChange('subject', e.target.value)} + onBlur={(e) => handleBlur('subject', e.target.value)} + error={errors.subject} + />