gitadmin/a42cacc9-7e1b-4f64-b679-38fd42f28ecf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

manual save(2026-01-22 11:48)

Browse Source
This commit is contained in:
SiteAgent Bot
2026-01-22 11:48:48 +08:00
parent faa74086fe
commit 0986f8b726
19 changed files with 716 additions and 621 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@@ -4,10 +4,10 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="示例集团 - 集科技研发、金融服务、产业投资于一体的综合性企业集团" /> <meta name="description" content="诚裕集团品牌官网（内容占位，后续根据正式资料完善）" />
<meta name="keywords" content="示例集团,金融服务,科技研发,产业投资,企业咨询" /> <meta name="keywords" content="诚裕集团,集团概况,服务范围,服务案例,新闻中心" />
<meta name="author" content="示例集团" /> <meta name="author" content="诚裕集团" />
<title>示例集团 - 稳健前行 · 携手共赢</title> <title>诚裕集团</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

15
src/App.tsx
View File

@@ -5,6 +5,8 @@ import { About } from './pages/About'
import { Services } from './pages/Services' import { Services } from './pages/Services'
import { News } from './pages/News' import { News } from './pages/News'
import { Contact } from './pages/Contact' import { Contact } from './pages/Contact'
import { Cases } from './pages/Cases'
import { Learning } from './pages/Learning'
// 页面切换动画配置 // 页面切换动画配置
const pageVariants = { const pageVariants = {
@@ -24,7 +26,6 @@ const pageVariants = {
const pageTransition = { const pageTransition = {
duration: 0.4, duration: 0.4,
ease: 'easeInOut',
} }
// 页面包装组件 - 添加动画效果 // 页面包装组件 - 添加动画效果
@@ -68,8 +69,20 @@ function App() {
<Route path="/" element={<PageWrapper><Home /></PageWrapper>} /> <Route path="/" element={<PageWrapper><Home /></PageWrapper>} />
<Route path="/about" element={<PageWrapper><About /></PageWrapper>} /> <Route path="/about" element={<PageWrapper><About /></PageWrapper>} />
<Route path="/services" element={<PageWrapper><Services /></PageWrapper>} /> <Route path="/services" element={<PageWrapper><Services /></PageWrapper>} />
<Route path="/cases" element={<PageWrapper><Cases /></PageWrapper>} />
<Route path="/news" element={<PageWrapper><News /></PageWrapper>} /> <Route path="/news" element={<PageWrapper><News /></PageWrapper>} />
<Route path="/learning" element={<PageWrapper><Learning /></PageWrapper>} />
<Route path="/contact" element={<PageWrapper><Contact /></PageWrapper>} /> <Route path="/contact" element={<PageWrapper><Contact /></PageWrapper>} />
{/* English routes */}
<Route path="/en" element={<PageWrapper><Home /></PageWrapper>} />
<Route path="/en/about" element={<PageWrapper><About /></PageWrapper>} />
<Route path="/en/services" element={<PageWrapper><Services /></PageWrapper>} />
<Route path="/en/cases" element={<PageWrapper><Cases /></PageWrapper>} />
<Route path="/en/news" element={<PageWrapper><News /></PageWrapper>} />
<Route path="/en/learning" element={<PageWrapper><Learning /></PageWrapper>} />
<Route path="/en/contact" element={<PageWrapper><Contact /></PageWrapper>} />
<Route path="*" element={<NotFound />} /> <Route path="*" element={<NotFound />} />
</Routes> </Routes>
</AnimatePresence> </AnimatePresence>

324
src/components/Footer.tsx
View File

@@ -1,250 +1,122 @@
import { Link } from 'react-router-dom'; import { motion } from 'framer-motion'
import { motion } from 'framer-motion'; import { Building2, Mail, MapPin, Phone } from 'lucide-react'
import { import { Link, useLocation } from 'react-router-dom'
Building2, import { COMPANY_INFO, NAVIGATION_MENU } from '../lib/constants'
Phone, import { getLocaleFromPathname, withLocalePath } from '../lib/i18n'
Mail,
MapPin,
Clock,
MessageCircle,
Share2,
Linkedin as LinkedinIcon,
ArrowRight,
} from 'lucide-react';
import {
COMPANY_INFO,
FOOTER_LINKS,
SOCIAL_MEDIA,
} from '../lib/constants';
/** export const Footer: React.FC = () => {
* Footer 组件 - 企业官网页脚 const location = useLocation()
*/ const locale = getLocaleFromPathname(location.pathname)
const currentYear = new Date().getFullYear()
// 动画变体配置 return (
const containerVariants = { <footer className="bg-primary-dark text-white" role="contentinfo">
hidden: { opacity: 0 }, <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
visible: { <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
opacity: 1, <div className="space-y-5">
transition: {
staggerChildren: 0.1,
delayChildren: 0.2,
},
},
};
const itemVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.5 },
},
};
// 图标映射
const iconMap: Record<string, React.ComponentType<{ size?: number; className?: string }>> = {
Wechat: MessageCircle,
Weibo: Share2,
Linkedin: LinkedinIcon,
};
/**
* 联系方式项组件
*/
const ContactItem: React.FC<{
icon: React.ComponentType<{ size?: number; className?: string }>;
title: string;
content: string;
}> = ({ icon: Icon, title, content }) => (
<div className="flex items-start gap-3">
<Icon size={18} className="text-accent mt-0.5 flex-shrink-0" />
<div>
<p className="text-xs text-gray-400 mb-0.5">{title}</p>
<p className="text-sm text-gray-200">{content}</p>
</div>
</div>
);
/**
* 链接列组件
*/
const LinkColumn: React.FC<{
title: string;
links: Array<{ label: string; path: string }>;
}> = ({ title, links }) => (
<div>
<h3 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">
{title}
</h3>
<ul className="space-y-3">
{links.map((link) => (
<li key={link.path}>
<Link <Link
to={link.path} to={withLocalePath(locale, '/')}
className="flex items-center gap-2 text-sm text-gray-300 hover:text-accent transition-colors duration-200 group" className="inline-flex items-center gap-3"
aria-label={locale === 'en' ? 'Go to homepage' : '返回首页'}
> >
<ArrowRight <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-accent text-primary-dark">
size={14} <Building2 size={22} />
className="opacity-0 -ml-4 group-hover:opacity-100 group-hover:ml-0 transition-all duration-200" </div>
/> <div>
<span className="group-hover:translate-x-1 transition-transform duration-200"> <div className="text-base font-semibold">{locale === 'en' ? COMPANY_INFO.nameEn : COMPANY_INFO.name}</div>
{link.label} <div className="text-[11px] tracking-wider text-white/70">{COMPANY_INFO.nameEn.toUpperCase()}</div>
</span> </div>
</Link>
<p className="text-sm text-white/75 leading-relaxed max-w-sm">{COMPANY_INFO.description}</p>
<ul className="space-y-2 text-sm text-white/75">
<li className="flex items-start gap-2">
<MapPin size={16} className="mt-0.5 text-accent" />
<span>{COMPANY_INFO.headquarters}</span>
</li>
<li className="flex items-start gap-2">
<Phone size={16} className="mt-0.5 text-accent" />
<span>{COMPANY_INFO.phone}</span>
</li>
<li className="flex items-start gap-2">
<Mail size={16} className="mt-0.5 text-accent" />
<span>{COMPANY_INFO.email}</span>
</li>
</ul>
</div>
<div>
<h2 className="text-sm font-semibold tracking-wider text-white/90 uppercase">
{locale === 'en' ? 'Navigation' : '网站导航'}
</h2>
<ul className="mt-4 space-y-2 text-sm">
{NAVIGATION_MENU.filter((n) => n.id !== 'home').map((n) => (
<li key={n.id}>
<Link
to={withLocalePath(locale, n.path)}
className="text-white/75 hover:text-white transition-colors"
>
{locale === 'en'
? n.id === 'about'
? 'About'
: n.id === 'scope'
? 'Services'
: n.id === 'cases'
? 'Cases'
: n.id === 'news'
? 'News'
: n.id === 'learning'
? 'Learning'
: n.id === 'contact'
? 'Contact'
: n.label
: n.label}
</Link> </Link>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
);
/** <div>
* Footer 组件 <h2 className="text-sm font-semibold tracking-wider text-white/90 uppercase">
*/ {locale === 'en' ? 'Notes' : '说明'}
export const Footer: React.FC = () => { </h2>
const currentYear = new Date().getFullYear(); <p className="mt-4 text-sm text-white/75 leading-relaxed">
{locale === 'en'
? 'This website is a placeholder version. Content and data will be updated after official materials are provided.'
: '本网站为占位版本，内容与数据后续将根据集团正式资料完善与更新。'}
</p>
</div>
return ( <div>
<footer className="bg-primary-dark text-white" role="contentinfo"> <h2 className="text-sm font-semibold tracking-wider text-white/90 uppercase">
{/* 主内容区域 */} {locale === 'en' ? 'Contact' : '联系'}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16"> </h2>
<motion.div <div className="mt-4 space-y-3 text-sm text-white/75">
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12" <div>
variants={containerVariants} <div className="text-white/60">{locale === 'en' ? 'Email' : '邮箱'}</div>
initial="hidden" <div className="text-white/85">{COMPANY_INFO.email}</div>
whileInView="visible"
viewport={{ once: true }}
>
{/* 企业信息 */}
<motion.div className="lg:col-span-2 space-y-6" variants={itemVariants}>
{/* Logo */}
<Link to="/" className="flex items-center gap-3 group" aria-label="返回首页">
<div className="flex items-center justify-center w-12 h-12 rounded-lg bg-accent text-primary-dark">
<Building2 size={28} />
</div> </div>
<div> <div>
<span className="text-xl font-bold text-white group-hover:text-accent transition-colors"> <div className="text-white/60">{locale === 'en' ? 'Phone' : '电话'}</div>
示例集团 <div className="text-white/85">{COMPANY_INFO.phone}</div>
</span> </div>
<p className="text-xs text-gray-400">Chengyu Group</p>
</div> </div>
</Link>
{/* 企业简介 */}
<p className="text-sm text-gray-300 leading-relaxed max-w-sm">
{COMPANY_INFO.description}
</p>
{/* 联系方式 */}
<div className="space-y-3 pt-2">
<ContactItem
icon={MapPin}
title="总部地址"
content={COMPANY_INFO.headquarters}
/>
<ContactItem
icon={Phone}
title="服务热线"
content={COMPANY_INFO.phone}
/>
<ContactItem
icon={Mail}
title="商务邮箱"
content={COMPANY_INFO.email}
/>
<ContactItem
icon={Clock}
title="工作时间"
content={COMPANY_INFO.workingHours}
/>
</div> </div>
</motion.div>
{/* 产品服务 */}
<motion.div variants={itemVariants}>
<LinkColumn title="产品服务" links={FOOTER_LINKS.products} />
</motion.div>
{/* 公司信息 */}
<motion.div variants={itemVariants}>
<LinkColumn title="关于我们" links={FOOTER_LINKS.company} />
</motion.div>
{/* 社交媒体 */}
<motion.div variants={itemVariants}>
<h3 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">
关注我们
</h3>
<p className="text-xs text-gray-400 mb-4">
了解更多企业动态
</p>
<div className="flex flex-wrap gap-3">
{SOCIAL_MEDIA.map((social) => {
const Icon = iconMap[social.icon] || MessageCircle;
return (
<motion.a
key={social.id}
href={social.url}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 px-3 py-2 bg-white/10 rounded-lg text-sm text-gray-300 hover:bg-accent hover:text-primary-dark transition-all duration-200"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
aria-label={social.label}
>
<Icon size={18} />
<span className="hidden sm:inline">{social.label}</span>
</motion.a>
);
})}
</div> </div>
</motion.div>
</motion.div>
</div> </div>
{/* 底部版权栏 */}
<div className="border-t border-white/10"> <div className="border-t border-white/10">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col md:flex-row items-center justify-between gap-3">
<div className="flex flex-col md:flex-row items-center justify-between gap-4"> <motion.p className="text-xs text-white/60" initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }}>
{/* 版权信息 */} © {currentYear} {COMPANY_INFO.fullName}. {locale === 'en' ? 'All rights reserved.' : '版权所有。'}
<motion.p
className="text-sm text-gray-400"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
>
© {currentYear} {COMPANY_INFO.fullName} 版权所有
</motion.p> </motion.p>
<p className="text-xs text-white/50">{locale === 'en' ? 'ICP filing: TBD' : 'ICP备案：待补充'}</p>
{/* 备案和链接 */}
<motion.div
className="flex flex-wrap items-center justify-center gap-4 text-sm text-gray-400"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ delay: 0.1 }}
>
<span>京ICP备XXXXXXXX号</span>
<span className="hidden sm:inline">|</span>
<Link
to="/privacy"
className="hover:text-accent transition-colors duration-200"
>
隐私政策
</Link>
<span className="hidden sm:inline">|</span>
<Link
to="/terms"
className="hover:text-accent transition-colors duration-200"
>
使用条款
</Link>
</motion.div>
</div>
</div> </div>
</div> </div>
</footer> </footer>
); )
}; }
export default Footer; export default Footer

402
src/components/Header.tsx
View File

@@ -1,296 +1,204 @@
import { useState, useEffect, useCallback } from 'react'; import { useEffect, useMemo, useState } from 'react'
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation, useNavigate } from 'react-router-dom'
import { motion, AnimatePresence } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion'
import { Menu, X, Building2, Phone, Mail, Search, ChevronDown } from 'lucide-react'; import { Building2, Globe, Menu, X } from 'lucide-react'
import { NAVIGATION_MENU } from '../lib/constants'; import { COMPANY_INFO, NAVIGATION_MENU } from '../lib/constants'
import {
DEFAULT_LOCALE,
getLocaleFromPathname,
stripLocalePrefix,
toOppositeLocale,
withLocalePath,
} from '../lib/i18n'
/** type NavLabel = {
* Header 组件 - 企业官网导航栏 zh: string
*/ en: string
export const Header: React.FC = () => {
const [isScrolled, setIsScrolled] = useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const location = useLocation();
// 监听滚动事件
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 20);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
// 关闭移动端菜单 - 使用回调避免直接 setState
const closeMobileMenu = useCallback(() => {
setIsMobileMenuOpen(false);
}, []);
useEffect(() => {
closeMobileMenu();
}, [location.pathname, closeMobileMenu]);
// 检查当前路径是否为活动状态
const isActive = (path: string): boolean => {
if (path === '/') {
return location.pathname === '/';
} }
return location.pathname.startsWith(path);
}; const navLabelMap: Record<string, NavLabel> = {
home: { zh: '首页', en: 'Home' },
about: { zh: '集团概况', en: 'About' },
scope: { zh: '服务范围', en: 'Services' },
cases: { zh: '服务案例', en: 'Cases' },
news: { zh: '新闻中心', en: 'News' },
learning: { zh: '培训学习', en: 'Learning' },
contact: { zh: '联系我们', en: 'Contact' },
}
export const Header: React.FC = () => {
const [isScrolled, setIsScrolled] = useState(false)
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
const location = useLocation()
const navigate = useNavigate()
const locale = useMemo(() => getLocaleFromPathname(location.pathname), [location.pathname])
useEffect(() => {
const handleScroll = () => setIsScrolled(window.scrollY > 20)
window.addEventListener('scroll', handleScroll)
return () => window.removeEventListener('scroll', handleScroll)
}, [])
useEffect(() => {
setIsMobileMenuOpen(false)
}, [location.pathname])
const navItems = useMemo(
() =>
NAVIGATION_MENU.map((item) => ({
...item,
label: locale === 'en' ? navLabelMap[item.id]?.en ?? item.label : navLabelMap[item.id]?.zh ?? item.label,
to: withLocalePath(locale, item.path),
})),
[locale],
)
const isActive = (to: string) => {
const current = stripLocalePrefix(location.pathname)
const target = stripLocalePrefix(to)
if (target === '/') return current === '/'
return current.startsWith(target)
}
const handleToggleLocale = () => {
const next = toOppositeLocale(locale)
const nextPath = withLocalePath(next, stripLocalePrefix(location.pathname))
try {
localStorage.setItem('preferredLocale', next)
} catch {
// ignore
}
navigate(nextPath)
}
useEffect(() => {
if (getLocaleFromPathname(location.pathname) !== DEFAULT_LOCALE) return
try {
const preferred = localStorage.getItem('preferredLocale')
if (preferred === 'en') {
navigate(withLocalePath('en', stripLocalePrefix(location.pathname)), { replace: true })
}
} catch {
// ignore
}
}, [location.pathname, navigate])
return ( return (
<>
{/* 顶部信息栏 - 玻璃效果 */}
<motion.div
className={`fixed top-0 left-0 right-0 z-50 text-white text-xs transition-all duration-300 border-b border-white/10 ${
isScrolled ? 'h-0 opacity-0 overflow-hidden' : 'h-10'
}`}
style={{
background: 'linear-gradient(to right, rgba(20, 56, 93, 0.85), rgba(33, 93, 155, 0.85))',
backdropFilter: 'blur(12px) saturate(150%)',
WebkitBackdropFilter: 'blur(12px) saturate(150%)',
}}
initial={{ y: -40 }}
animate={{ y: 0 }}
transition={{ duration: 0.3 }}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center justify-between">
<div className="flex items-center gap-6">
<div className="flex items-center gap-2">
<Phone size={14} />
<span>400-123-4567</span>
</div>
<div className="hidden sm:flex items-center gap-2">
<Mail size={14} />
<span>contact@chengyu.com</span>
</div>
</div>
<div className="hidden md:flex items-center gap-4">
<span className="text-white/80">欢迎来到示例集团官网</span>
<div className="flex items-center gap-2">
<span className="text-white/60">|</span>
<button className="hover:text-accent transition-colors">简体中文</button>
<span className="text-white/60">/</span>
<button className="hover:text-accent transition-colors">English</button>
</div>
</div>
</div>
</motion.div>
{/* 主导航栏 */}
<motion.header <motion.header
className={`fixed left-0 right-0 z-50 transition-all duration-300 ${ className={`fixed left-0 right-0 z-50 transition-all duration-300 border-b ${
isScrolled isScrolled ? 'top-0 bg-white/90 shadow-sm border-gray-100' : 'top-0 bg-white/70 border-transparent'
? 'top-0 bg-white/80 backdrop-blur-xl backdrop-saturate-150 shadow-lg border-b border-white/20'
: 'top-10 bg-white/60 backdrop-blur-lg backdrop-saturate-120 shadow-md border-b border-white/30'
}`} }`}
initial={{ y: -100 }}
animate={{ y: 0 }}
transition={{ duration: 0.3, delay: 0.1 }}
style={{ style={{
background: isScrolled backdropFilter: 'blur(16px) saturate(140%)',
? 'rgba(255, 255, 255, 0.8)' WebkitBackdropFilter: 'blur(16px) saturate(140%)',
: 'rgba(255, 255, 255, 0.6)',
backdropFilter: isScrolled
? 'blur(20px) saturate(150%)'
: 'blur(16px) saturate(120%)',
WebkitBackdropFilter: isScrolled
? 'blur(20px) saturate(150%)'
: 'blur(16px) saturate(120%)',
}} }}
initial={{ y: -24, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.25 }}
> >
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-[80px]"> <div className="flex items-center justify-between h-16">
{/* Logo 区域 - 增强版 */}
<Link <Link
to="/" to={withLocalePath(locale, '/')}
className="flex items-center gap-3 group relative" className="flex items-center gap-3"
aria-label="返回首页" aria-label={locale === 'en' ? 'Go to homepage' : '返回首页'}
> >
<motion.div <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-primary text-white">
className="relative flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-primary-light text-white shadow-lg" <Building2 size={22} />
whileHover={{ scale: 1.05, rotate: 5 }} </div>
whileTap={{ scale: 0.95 }}
>
<Building2 size={26} />
{/* 光晕效果 */}
<div className="absolute inset-0 rounded-xl bg-gradient-to-br from-primary to-primary-light opacity-20 blur-xl group-hover:opacity-40 transition-opacity" />
</motion.div>
<div className="hidden sm:block"> <div className="hidden sm:block">
<span className="text-xl font-bold bg-gradient-to-r from-primary-dark to-primary bg-clip-text text-transparent group-hover:from-primary group-hover:to-primary-light transition-all"> <div className="text-base font-semibold text-primary-dark leading-tight">
示例集团 {locale === 'en' ? COMPANY_INFO.nameEn : COMPANY_INFO.name}
</span> </div>
<p className="text-xs text-gray-500 -mt-1 font-medium tracking-wider">CHENGYU GROUP</p> <div className="text-[11px] tracking-wider text-gray-500">{COMPANY_INFO.nameEn.toUpperCase()}</div>
</div> </div>
</Link> </Link>
{/* 桌面端导航菜单 - 增强版 */} <nav className="hidden lg:flex items-center gap-1" aria-label={locale === 'en' ? 'Main navigation' : '主导航'}>
<nav {navItems.map((item) => (
className="hidden lg:flex items-center gap-1"
role="navigation"
aria-label="主导航"
>
{NAVIGATION_MENU.map((item, index) => (
<motion.div
key={item.id}
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
>
<Link <Link
to={item.path} key={item.id}
className={`group relative px-5 py-3 text-sm font-medium rounded-xl transition-all duration-300 flex items-center gap-2 ${ to={item.to}
isActive(item.path) className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
? 'text-primary bg-primary/5' isActive(item.to) ? 'text-primary bg-primary/5' : 'text-gray-700 hover:bg-gray-50 hover:text-primary'
: 'text-gray-700 hover:text-primary hover:bg-primary/5'
}`} }`}
aria-current={isActive(item.path) ? 'page' : undefined} aria-current={isActive(item.to) ? 'page' : undefined}
> >
<span className="relative z-10">{item.label}</span> {item.label}
{/* 悬停背景效果 */}
<motion.div
className="absolute inset-0 rounded-xl bg-gradient-to-r from-primary/10 to-accent/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
initial={false}
/>
</Link> </Link>
</motion.div>
))} ))}
</nav> </nav>
{/* 桌面端操作区域 */} <div className="flex items-center gap-2">
<div className="hidden lg:flex items-center gap-3"> <button
{/* 搜索按钮 */} type="button"
<motion.button onClick={handleToggleLocale}
className="p-2.5 rounded-lg text-gray-600 hover:text-primary hover:bg-primary/5 transition-all" className="hidden md:inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-50"
whileHover={{ scale: 1.05 }} aria-label={locale === 'en' ? 'Switch language' : '切换语言'}
whileTap={{ scale: 0.95 }}
aria-label="搜索"
> >
<Search size={20} /> <Globe size={16} />
</motion.button> <span>{locale === 'en' ? '中文' : 'English'}</span>
</button>
{/* 联系电话按钮 */} <button
<motion.a type="button"
href="tel:400-123-4567" onClick={() => setIsMobileMenuOpen((v) => !v)}
className="flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-primary border-2 border-primary rounded-lg hover:bg-primary hover:text-white transition-all" className="lg:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg text-gray-700 hover:bg-gray-50"
whileHover={{ scale: 1.02 }} aria-label={isMobileMenuOpen ? (locale === 'en' ? 'Close menu' : '关闭菜单') : locale === 'en' ? 'Open menu' : '打开菜单'}
whileTap={{ scale: 0.98 }}
>
<Phone size={16} />
<span className="hidden xl:inline">400-123-4567</span>
</motion.a>
{/* CTA 按钮 - 渐变风格 */}
<motion.button
className="relative px-6 py-2.5 text-sm font-medium text-white rounded-lg overflow-hidden group"
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
<div className="absolute inset-0 bg-gradient-to-r from-primary to-primary-light" />
<div className="absolute inset-0 bg-gradient-to-r from-accent to-primary opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
<span className="relative z-10 flex items-center gap-2">
立即咨询
<motion.span
animate={{ x: [0, 3, 0] }}
transition={{ repeat: Infinity, duration: 1.5 }}
>
→
</motion.span>
</span>
</motion.button>
</div>
{/* 移动端菜单按钮 */}
<motion.button
className="lg:hidden p-2.5 rounded-xl text-gray-600 hover:bg-primary/5 hover:text-primary transition-all"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
aria-label={isMobileMenuOpen ? '关闭菜单' : '打开菜单'}
aria-expanded={isMobileMenuOpen} aria-expanded={isMobileMenuOpen}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
> >
<motion.div {isMobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
animate={{ rotate: isMobileMenuOpen ? 90 : 0 }} </button>
transition={{ duration: 0.2 }} </div>
>
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
</motion.div>
</motion.button>
</div> </div>
</div> </div>
{/* 移动端菜单 - 玻璃效果版 */}
<AnimatePresence> <AnimatePresence>
{isMobileMenuOpen && ( {isMobileMenuOpen && (
<motion.nav <motion.nav
initial={{ opacity: 0, height: 0 }} className="lg:hidden border-t border-gray-100 bg-white/95"
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
transition={{ duration: 0.3 }}
className="lg:hidden overflow-hidden shadow-xl border-b border-white/20"
style={{ style={{
background: 'rgba(255, 255, 255, 0.85)', backdropFilter: 'blur(16px) saturate(140%)',
backdropFilter: 'blur(20px) saturate(150%)', WebkitBackdropFilter: 'blur(16px) saturate(140%)',
WebkitBackdropFilter: 'blur(20px) saturate(150%)',
}} }}
role="navigation" initial={{ height: 0, opacity: 0 }}
aria-label="移动端导航" animate={{ height: 'auto', opacity: 1 }}
> exit={{ height: 0, opacity: 0 }}
<div className="px-4 py-6 space-y-3"> transition={{ duration: 0.2 }}
{NAVIGATION_MENU.map((item, index) => ( aria-label={locale === 'en' ? 'Mobile navigation' : '移动端导航'}
<motion.div
key={item.id}
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: index * 0.05 }}
> >
<div className="px-4 py-4 space-y-2">
{navItems.map((item) => (
<Link <Link
to={item.path} key={item.id}
className={`block px-5 py-3.5 rounded-xl text-base font-medium transition-all duration-200 ${ to={item.to}
isActive(item.path) className={`block px-4 py-3 rounded-xl text-sm font-medium transition-colors ${
? 'bg-gradient-to-r from-primary/15 to-accent/15 text-primary shadow-sm backdrop-blur-sm' isActive(item.to) ? 'bg-primary/5 text-primary' : 'text-gray-700 hover:bg-gray-50'
: 'text-gray-700 hover:bg-white/30 active:scale-95 backdrop-blur-sm'
}`} }`}
aria-current={isActive(item.path) ? 'page' : undefined} aria-current={isActive(item.to) ? 'page' : undefined}
> >
<div className="flex items-center justify-between"> {item.label}
<span>{item.label}</span>
</div>
</Link> </Link>
</motion.div>
))} ))}
{/* 移动端联系方式 */} <button
<motion.div type="button"
className="pt-4 mt-2 border-t border-white/20 space-y-3" onClick={handleToggleLocale}
initial={{ opacity: 0 }} className="w-full mt-2 flex items-center justify-between px-4 py-3 rounded-xl text-sm font-medium text-gray-700 hover:bg-gray-50"
animate={{ opacity: 1 }}
transition={{ delay: 0.3 }}
> >
<a <span>{locale === 'en' ? 'Language' : '语言'}</span>
href="tel:400-123-4567" <span className="text-gray-500">{locale === 'en' ? '中文' : 'English'}</span>
className="flex items-center gap-3 px-5 py-3 rounded-xl text-gray-700 hover:bg-white/30 transition-all backdrop-blur-sm" </button>
>
<Phone size={18} className="text-primary" />
<span className="text-sm font-medium">400-123-4567</span>
</a>
<motion.button
className="w-full px-5 py-3.5 text-base font-medium text-white rounded-xl bg-gradient-to-r from-primary to-primary-light shadow-lg shadow-primary/30 backdrop-blur-sm"
whileTap={{ scale: 0.98 }}
>
立即咨询
</motion.button>
</motion.div>
</div> </div>
</motion.nav> </motion.nav>
)} )}
</AnimatePresence> </AnimatePresence>
</motion.header> </motion.header>
</> )
); }
};
export default Header; export default Header

7
src/components/Hero.tsx
View File

@@ -29,6 +29,9 @@ const CountUpNumber: React.FC<{
// 数字递增动画 // 数字递增动画
let current = 0; let current = 0;
const increment = numValue / (duration * 60); const increment = numValue / (duration * 60);
const element = ref.current;
if (!element) return;
const timer = setInterval(() => { const timer = setInterval(() => {
current += increment; current += increment;
if (current >= numValue) { if (current >= numValue) {
@@ -39,9 +42,11 @@ const CountUpNumber: React.FC<{
if (hasYi) { if (hasYi) {
display = Math.floor(current); display = Math.floor(current);
} }
ref.current.textContent = display.toLocaleString() + (hasPlus ? '+' : '') + (hasYi ? '亿' : suffix); element.textContent =
display.toLocaleString() + (hasPlus ? '+' : '') + (hasYi ? '亿' : suffix);
}, 1000 / 60); }, 1000 / 60);
return () => clearInterval(timer); return () => clearInterval(timer);
} }
}, [isInView, value, suffix, duration, controls]); }, [isInView, value, suffix, duration, controls]);

2
src/components/Home/ServicesSection.tsx
View File

@@ -28,7 +28,7 @@ const ServiceCard: React.FC<{
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ delay: index * 0.1, duration: 0.5 }} transition={{ delay: index * 0.1, duration: 0.5 }}
whileHover={{ y: -8, shadow: '0 20px 40px rgba(0,0,0,0.1)' }} whileHover={{ y: -8, boxShadow: '0 20px 40px rgba(0,0,0,0.1)' }}
> >
{/* 背景装饰 */} {/* 背景装饰 */}
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-primary/5 to-accent/5 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-500" /> <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-primary/5 to-accent/5 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-500" />

35
src/hooks/usePageMeta.ts Normal file
View File

@@ -0,0 +1,35 @@
import { useEffect } from 'react'
import { COMPANY_INFO } from '../lib/constants'
import type { Locale } from '../lib/i18n'
type PageMetaInput = {
title: string
description?: string
locale: Locale
}
function setMetaTag(name: string, content: string) {
const meta = document.querySelector(`meta[name="${name}"]`)
if (meta) meta.setAttribute('content', content)
}
export function usePageMeta({ title, description, locale }: PageMetaInput) {
useEffect(() => {
const previousTitle = document.title
const previousLang = document.documentElement.lang
const suffix = locale === 'en' ? COMPANY_INFO.nameEn : COMPANY_INFO.name
document.title = title ? `${title} - ${suffix}` : suffix
document.documentElement.lang = locale === 'en' ? 'en' : 'zh-CN'
if (description) {
setMetaTag('description', description)
}
return () => {
document.title = previousTitle
document.documentElement.lang = previousLang
}
}, [description, locale, title])
}

2
src/hooks/usePageTitle.ts
View File

@@ -5,7 +5,7 @@ import { useEffect } from 'react';
* @param title 页面标题 * @param title 页面标题
* @param suffix 标题后缀，默认为 "示例集团" * @param suffix 标题后缀，默认为 "示例集团"
*/ */
export const usePageTitle = (title: string, suffix: string = '示例集团') => { export const usePageTitle = (title: string, suffix: string = '诚裕集团') => {
useEffect(() => { useEffect(() => {
const prevTitle = document.title; const prevTitle = document.title;
document.title = title ? `${title} - ${suffix}` : suffix; document.title = title ? `${title} - ${suffix}` : suffix;

57
src/lib/constants.ts
View File

@@ -4,25 +4,28 @@
// 企业基本信息 // 企业基本信息
export const COMPANY_INFO = { export const COMPANY_INFO = {
name: '示例集团', name: '诚裕集团',
nameEn: 'Chengyu Group', nameEn: 'Chengyu Group',
slogan: '稳健前行，携手共赢', slogan: '以专业为本，以稳健致远',
description: '示例集团成立于2010年，是一家集科技研发、金融服务、产业投资于一体的综合性企业集团。秉承"诚信、创新、共赢"的经营理念，致力于为客户提供高品质的产品和服务。', description:
fullName: '示例集团有限公司', '诚裕集团是一家以综合服务为核心的集团型企业，围绕客户在经营与管理中的关键需求，提供系统化、可持续的解决方案。本网站内容为占位示例，后续将根据集团正式资料进行完善与更新。',
registrationNumber: '91110000XXXXXXXX', fullName: '诚裕集团',
established: '2010年', registrationNumber: '统一社会信用代码（待补充）',
headquarters: '北京市朝阳区建国路88号', established: '成立时间（待补充）',
phone: '400-888-8888', headquarters: '总部地址（待补充）',
email: 'contact@chengyu-group.com', phone: '联系电话（待补充）',
workingHours: '周一至周五 9:00-18:00', email: '邮箱（待补充）',
workingHours: '工作时间（待补充）',
}; };
// 导航菜单配置 // 导航菜单配置
export const NAVIGATION_MENU = [ export const NAVIGATION_MENU = [
{ id: 'home', label: '首页', path: '/' }, { id: 'home', label: '首页', path: '/' },
{ id: 'about', label: '关于我们', path: '/about' }, { id: 'about', label: '集团概况', path: '/about' },
{ id: 'services', label: '产品服务', path: '/services' }, { id: 'scope', label: '服务范围', path: '/services' },
{ id: 'news', label: '新闻资讯', path: '/news' }, { id: 'cases', label: '服务案例', path: '/cases' },
{ id: 'news', label: '新闻中心', path: '/news' },
{ id: 'learning', label: '培训学习', path: '/learning' },
{ id: 'contact', label: '联系我们', path: '/contact' }, { id: 'contact', label: '联系我们', path: '/contact' },
]; ];
@@ -123,24 +126,32 @@ export const COMPANY_STATS = [
// 页面元信息 // 页面元信息
export const PAGE_META = { export const PAGE_META = {
home: { home: {
title: '示例集团 - 稳健前行，携手共赢', title: '诚裕集团',
description: '示例集团是一家集科技研发、金融服务、产业投资于一体的综合性企业集团', description: '诚裕集团品牌官网（内容占位，后续根据正式资料完善）',
}, },
about: { about: {
title: '关于我们 - 示例集团', title: '集团概况',
description: '了解示例集团的发展历程、企业文化和核心价值观', description: '了解诚裕集团的基本信息、文化理念与发展概况（占位内容）',
}, },
services: { services: {
title: '产品服务 - 示例集团', title: '服务范围',
description: '提供金融服务、科技研发、产业投资、咨询管理等专业服务', description: '围绕客户关键需求提供系统化服务（占位内容）',
},
cases: {
title: '服务案例',
description: '典型项目与解决思路展示（占位内容）',
}, },
news: { news: {
title: '新闻资讯 - 示例集团', title: '新闻中心',
description: '了解示例集团最新动态、行业资讯和荣誉资质', description: '集团新闻、行业动态与公告（占位内容）',
},
learning: {
title: '培训学习',
description: '课程与学习资源（占位内容）',
}, },
contact: { contact: {
title: '联系我们 - 示例集团', title: '联系我们',
description: '获取示例集团联系方式，欢迎随时与我们沟通', description: '联系信息与留言反馈（占位内容）',
}, },
}; };

26
src/lib/i18n.ts Normal file
View File

@@ -0,0 +1,26 @@
export type Locale = 'zh' | 'en'
export const DEFAULT_LOCALE: Locale = 'zh'
export function getLocaleFromPathname(pathname: string): Locale {
return pathname === '/en' || pathname.startsWith('/en/') ? 'en' : 'zh'
}
export function stripLocalePrefix(pathname: string): string {
if (pathname === '/en') return '/'
if (pathname.startsWith('/en/')) return pathname.replace(/^\/en/, '')
return pathname
}
export function withLocalePath(locale: Locale, path: string): string {
if (locale === 'en') {
if (path === '/') return '/en'
return `/en${path}`
}
return path
}
export function toOppositeLocale(locale: Locale): Locale {
return locale === 'en' ? 'zh' : 'en'
}

88
src/pages/About.tsx
View File

@@ -10,55 +10,50 @@ import {
Building2, Building2,
Globe, Globe,
} from 'lucide-react'; } from 'lucide-react';
import { Header } from '../components/Header'; import { Header } from '../components/Header'
import { Footer } from '../components/Footer'; import { Footer } from '../components/Footer'
import { COMPANY_INFO } from '../lib/constants'; import { COMPANY_INFO, PAGE_META } from '../lib/constants'
import { usePageTitle } from '../hooks/usePageTitle'; import { usePageMeta } from '../hooks/usePageMeta'
import { getLocaleFromPathname } from '../lib/i18n'
// 发展历程数据 // 发展历程数据
const milestones = [ const milestones = [
{ {
year: '2010', year: '年份',
title: '公司成立', title: '关键节点（待补充）',
description: '示例集团在北京成立，开始布局金融服务业务', description: '根据集团正式资料补充发展历程与重要节点。',
icon: Building2, icon: Building2,
}, },
{ {
year: '2012', year: '年份',
title: '首次战略融资', title: '关键节点（待补充）',
description: '完成 A 轮融资，获得知名投资机构认可', description: '根据集团正式资料补充发展历程与重要节点。',
icon: TrendingUp, icon: TrendingUp,
}, },
{ {
year: '2015', year: '年份',
title: '业务扩展', title: '关键节点（待补充）',
description: '成立科技研发子公司，进军科技领域', description: '根据集团正式资料补充发展历程与重要节点。',
icon: Globe, icon: Globe,
}, },
{ {
year: '2018', year: '年份',
title: '规模扩张', title: '关键节点（待补充）',
description: '员工规模突破 200 人，服务客户超过 500 家', description: '根据集团正式资料补充发展历程与重要节点。',
icon: Users, icon: Users,
}, },
{ {
year: '2020', year: '年份',
title: '产业投资布局', title: '关键节点（待补充）',
description: '成立产业投资基金，全面进入投资领域', description: '根据集团正式资料补充发展历程与重要节点。',
icon: Target, icon: Target,
}, },
{ {
year: '2023', year: '年份',
title: '集团化运营', title: '关键节点（待补充）',
description: '正式更名为示例集团，形成多元化业务体系', description: '根据集团正式资料补充发展历程与重要节点。',
icon: Award, icon: Award,
}, },
{
year: '2025',
title: '新里程碑',
description: '管理资产突破 500 亿，员工规模超过 500 人',
icon: Calendar,
},
]; ];
// 核心价值观数据 // 核心价值观数据
@@ -127,8 +122,14 @@ const honors = [
* About 组件 - 关于我们页面 * About 组件 - 关于我们页面
*/ */
export const About: React.FC = () => { export const About: React.FC = () => {
const timelineRef = useRef<HTMLDivElement>(null); const timelineRef = useRef<HTMLDivElement>(null)
usePageTitle('关于我们'); const locale = getLocaleFromPathname(window.location.pathname)
usePageMeta({
title: locale === 'en' ? 'About' : PAGE_META.about.title,
description: PAGE_META.about.description,
locale,
})
return ( return (
<motion.div <motion.div
@@ -152,10 +153,12 @@ export const About: React.FC = () => {
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
> >
<h1 className="text-4xl md:text-5xl font-bold mb-4"> <h1 className="text-4xl md:text-5xl font-bold mb-4">
关于示例集团 {locale === 'en' ? 'About Chengyu Group' : '集团概况'}
</h1> </h1>
<p className="text-xl text-white/80 max-w-3xl mx-auto"> <p className="text-xl text-white/80 max-w-3xl mx-auto">
示例集团成立于 2010 年，是一家集科技研发、金融服务、产业投资于一体的综合性企业集团 {locale === 'en'
? 'This is a placeholder introduction. Content will be updated after official materials are provided.'
: '本页面为占位示例，将在收到集团正式资料后完善集团介绍、文化理念与组织信息。'}
</p> </p>
</motion.div> </motion.div>
</div> </div>
@@ -177,16 +180,22 @@ export const About: React.FC = () => {
<div className="space-y-6 text-gray-600 leading-relaxed"> <div className="space-y-6 text-gray-600 leading-relaxed">
<p> <p>
<strong>{COMPANY_INFO.fullName}</strong> <strong>{COMPANY_INFO.fullName}</strong>
成立于 {COMPANY_INFO.established}，总部位于 {COMPANY_INFO.headquarters}。 {locale === 'en'
经过十余年的稳健发展，示例集团已形成了以金融服务、科技研发、产业投资为核心的多元化业务体系。 ? `Established: ${COMPANY_INFO.established}. Headquarters: ${COMPANY_INFO.headquarters}.`
: `成立于 ${COMPANY_INFO.established}，总部位于 ${COMPANY_INFO.headquarters}。`}
{locale === 'en'
? ' This section is a placeholder and will be updated.'
: '本段为占位示例，后续将依据正式资料完善业务结构与治理信息。'}
</p> </p>
<p> <p>
集团秉承"诚信、创新、共赢"的核心价值观，致力于为客户创造最大价值。 集团秉承"诚信、创新、共赢"的核心价值观，致力于为客户创造最大价值。
我们拥有一支经验丰富、专业高效的管理团队，汇聚了金融、科技、投资等领域的优秀人才。 我们拥有一支经验丰富、专业高效的管理团队，汇聚了金融、科技、投资等领域的优秀人才。
</p> </p>
<p> <p>
截至目前，示例集团已成功为超过 1000 家企业客户提供专业服务， {locale === 'en'
管理资产规模突破 500 亿元人民币，业务范围覆盖全国主要城市。 ? 'Key data will be provided and verified before publication.'
: '关键数据与范围将于正式资料确认后发布。'}
</p> </p>
</div> </div>
@@ -217,14 +226,15 @@ export const About: React.FC = () => {
<div className="aspect-[4/3] rounded-2xl overflow-hidden shadow-xl"> <div className="aspect-[4/3] rounded-2xl overflow-hidden shadow-xl">
<img <img
src="/images/about-office.jpg" src="/images/about-office.jpg"
alt="示例集团办公环境" alt={locale === 'en' ? 'Office environment' : '办公环境'}
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent flex items-end justify-center p-8"> <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent flex items-end justify-center p-8">
<div className="text-center text-white"> <div className="text-center text-white">
<div className="text-4xl font-bold mb-2">示例集团</div> <div className="text-4xl font-bold mb-2">{COMPANY_INFO.name}</div>
<div className="text-xl opacity-90">稳健前行 · 携手共赢</div> <div className="text-xl opacity-90">{COMPANY_INFO.slogan}</div>
</div> </div>
</div> </div>
</div> </div>
{/* 装饰元素 */} {/* 装饰元素 */}

73
src/pages/Cases.tsx Normal file
View File

@@ -0,0 +1,73 @@
import { motion } from 'framer-motion'
import { Header } from '../components/Header'
import { Footer } from '../components/Footer'
import { usePageMeta } from '../hooks/usePageMeta'
import { getLocaleFromPathname } from '../lib/i18n'
import { PAGE_META } from '../lib/constants'
type CaseCategory = {
id: string
zh: string
en: string
}
const caseCategories: CaseCategory[] = [
{ id: 'separation', zh: '分立类案例', en: 'Separation Cases' },
{ id: 'accounts', zh: '整账类案例', en: 'Accounts Cases' },
{ id: 'internal-audit', zh: '企业内审类案例', en: 'Internal Audit Cases' },
{ id: 'tax-advisory', zh: '财税顾问案例', en: 'Tax & Finance Advisory' },
{ id: 'planning', zh: '涉税筹划类案例', en: 'Tax Planning Cases' },
{ id: 'insolvency', zh: '破产清算类案例', en: 'Insolvency & Liquidation' },
]
export const Cases: React.FC = () => {
const locale = getLocaleFromPathname(window.location.pathname)
usePageMeta({
title: locale === 'en' ? 'Cases' : PAGE_META.cases.title,
description: PAGE_META.cases.description,
locale,
})
return (
<motion.div className="min-h-screen bg-background" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
<Header />
<main>
<section className="pt-32 pb-12 bg-white border-b border-gray-100">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl md:text-4xl font-semibold text-primary-dark">
{locale === 'en' ? 'Cases' : '服务案例'}
</h1>
<p className="mt-4 text-gray-600 max-w-3xl leading-relaxed">
{locale === 'en'
? 'A placeholder showcase of representative engagements. Content will be updated after official materials are provided.'
: '以典型项目为线索，展示工作方法与交付路径。本页面为占位示例，后续将根据集团正式资料完善。'}
</p>
</div>
</section>
<section className="py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{caseCategories.map((c) => (
<div key={c.id} className="bg-white rounded-2xl border border-gray-100 p-6">
<h2 className="text-lg font-semibold text-primary-dark">{locale === 'en' ? c.en : c.zh}</h2>
<p className="mt-2 text-sm text-gray-600 leading-relaxed">
{locale === 'en'
? 'Add representative case summaries, scope, and outcomes.'
: '后续补充：案例背景、服务范围、关键工作、成果与影响。'}
</p>
</div>
))}
</div>
</div>
</section>
</main>
<Footer />
</motion.div>
)
}
export default Cases

5
src/pages/Categories.tsx
View File

@@ -53,7 +53,7 @@ export const CategoriesPage: React.FC = () => {
<main className="container mx-auto px-4 py-8"> <main className="container mx-auto px-4 py-8">
<section className="mb-12"> <section className="mb-12">
<h2 className="text-3xl font-bold text-gray-900 mb-2">📂 文章分类</h2> <h2 className="text-3xl font-bold text-gray-900 mb-2">文章分类</h2>
<p className="text-gray-600">浏览所有分类</p> <p className="text-gray-600">浏览所有分类</p>
</section> </section>
@@ -93,7 +93,8 @@ export const CategoriesPage: React.FC = () => {
/> />
<div className="w-full h-full flex items-center justify-center hidden"> <div className="w-full h-full flex items-center justify-center hidden">
<div className="text-center text-primary"> <div className="text-center text-primary">
<div className="text-4xl mb-2">📁</div> <div className="text-4xl mb-2">Category</div>
<p className="text-sm font-medium">{category.title}</p> <p className="text-sm font-medium">{category.title}</p>
</div> </div>
</div> </div>

4
src/pages/CategoryDetail.tsx
View File

@@ -125,7 +125,7 @@ export const CategoryDetail: React.FC = () => {
/> />
<div className="w-full h-full bg-gradient-to-br from-primary/10 to-primary-light/10 flex items-center justify-center hidden"> <div className="w-full h-full bg-gradient-to-br from-primary/10 to-primary-light/10 flex items-center justify-center hidden">
<div className="text-center text-primary"> <div className="text-center text-primary">
<div className="text-6xl mb-4">📂</div> <div className="text-6xl mb-4">Category</div>
<p className="text-2xl font-medium">{category.title}</p> <p className="text-2xl font-medium">{category.title}</p>
</div> </div>
</div> </div>
@@ -133,7 +133,7 @@ export const CategoryDetail: React.FC = () => {
</div> </div>
)} )}
<h2 className="text-3xl font-bold text-gray-900 mb-2"> <h2 className="text-3xl font-bold text-gray-900 mb-2">
📂 {category?.title || '分类'} {category?.title || '分类'}
</h2> </h2>
<p className="text-gray-600">探索该分类下的所有内容</p> <p className="text-gray-600">探索该分类下的所有内容</p>
</section> </section>

12
src/pages/Contact.tsx
View File

@@ -183,8 +183,15 @@ export const Contact: React.FC = () => {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
{CONTACT_INFO.map((info, index) => { {CONTACT_INFO.map((info, index) => {
const Icon = info.icon; const iconMap = {
MapPin,
Phone,
Mail,
Clock,
};
const Icon = iconMap[info.icon as keyof typeof iconMap] || MapPin;
return ( return (
<motion.div <motion.div
key={info.id} key={info.id}
className="bg-white rounded-xl shadow-lg p-6 text-center hover:shadow-xl transition-shadow" className="bg-white rounded-xl shadow-lg p-6 text-center hover:shadow-xl transition-shadow"
@@ -414,8 +421,9 @@ export const Contact: React.FC = () => {
/> />
<div className="absolute bottom-4 left-4 right-4 bg-white/95 backdrop-blur-sm rounded-lg p-3 shadow-lg"> <div className="absolute bottom-4 left-4 right-4 bg-white/95 backdrop-blur-sm rounded-lg p-3 shadow-lg">
<p className="text-primary-dark font-medium text-sm mb-1"> <p className="text-primary-dark font-medium text-sm mb-1">
📍 示例集团总部 示例集团总部
</p> </p>
<p className="text-gray-600 text-xs"> <p className="text-gray-600 text-xs">
北京市朝阳区建国路88号示例大厦 北京市朝阳区建国路88号示例大厦
</p> </p>

26
src/pages/Home.tsx
View File

@@ -1,17 +1,25 @@
import { motion } from 'framer-motion'; import { motion } from 'framer-motion'
import { Header } from '../components/Header'; import { Header } from '../components/Header'
import { Footer } from '../components/Footer'; import { Footer } from '../components/Footer'
import { Hero } from '../components/Hero'; import { Hero } from '../components/Hero'
import { AboutSection } from '../components/Home/AboutSection'; import { AboutSection } from '../components/Home/AboutSection'
import { ServicesSection } from '../components/Home/ServicesSection'; import { ServicesSection } from '../components/Home/ServicesSection'
import { NewsSection } from '../components/Home/NewsSection'; import { NewsSection } from '../components/Home/NewsSection'
import { usePageTitle } from '../hooks/usePageTitle'; import { usePageMeta } from '../hooks/usePageMeta'
import { getLocaleFromPathname } from '../lib/i18n'
import { PAGE_META } from '../lib/constants'
/** /**
* Home 组件 - 企业官网首页 * Home 组件 - 企业官网首页
*/ */
export const Home: React.FC = () => { export const Home: React.FC = () => {
usePageTitle('首页'); const locale = getLocaleFromPathname(window.location.pathname)
usePageMeta({
title: locale === 'en' ? 'Home' : PAGE_META.home.title,
description: PAGE_META.home.description,
locale,
})
return ( return (
<motion.div <motion.div

90
src/pages/Learning.tsx Normal file
View File

@@ -0,0 +1,90 @@
import { motion } from 'framer-motion'
import { Header } from '../components/Header'
import { Footer } from '../components/Footer'
import { usePageMeta } from '../hooks/usePageMeta'
import { getLocaleFromPathname } from '../lib/i18n'
import { PAGE_META } from '../lib/constants'
type LearningItem = {
id: string
titleZh: string
titleEn: string
descZh: string
descEn: string
}
const learningItems: LearningItem[] = [
{
id: 'topic-1',
titleZh: '专题课程（占位）',
titleEn: 'Topic Courses (Placeholder)',
descZh: '用于发布培训课程、专题学习、内部分享等内容。',
descEn: 'For publishing courses, learning topics, and internal knowledge sharing.',
},
{
id: 'topic-2',
titleZh: '视频学习（占位）',
titleEn: 'Video Learning (Placeholder)',
descZh: '用于沉淀公开视频/回放与配套资料。',
descEn: 'For public videos/recordings and supporting materials.',
},
{
id: 'topic-3',
titleZh: '资料下载（占位）',
titleEn: 'Downloads (Placeholder)',
descZh: '用于提供白皮书、指南、研究简报等下载入口。',
descEn: 'For whitepapers, guides, and research briefs downloads.',
},
]
export const Learning: React.FC = () => {
const locale = getLocaleFromPathname(window.location.pathname)
usePageMeta({
title: locale === 'en' ? 'Learning' : PAGE_META.learning.title,
description: PAGE_META.learning.description,
locale,
})
return (
<motion.div className="min-h-screen bg-background" initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
<Header />
<main>
<section className="pt-32 pb-12 bg-white border-b border-gray-100">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl md:text-4xl font-semibold text-primary-dark">
{locale === 'en' ? 'Learning' : '培训学习'}
</h1>
<p className="mt-4 text-gray-600 max-w-3xl leading-relaxed">
{locale === 'en'
? 'A placeholder section for learning resources. Content will be updated after official materials are provided.'
: '用于发布课程、视频与学习资料。本页面为占位示例，后续将根据集团正式资料完善。'}
</p>
</div>
</section>
<section className="py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{learningItems.map((item) => (
<div key={item.id} className="bg-white rounded-2xl border border-gray-100 p-6">
<h2 className="text-lg font-semibold text-primary-dark">
{locale === 'en' ? item.titleEn : item.titleZh}
</h2>
<p className="mt-2 text-sm text-gray-600 leading-relaxed">
{locale === 'en' ? item.descEn : item.descZh}
</p>
</div>
))}
</div>
</div>
</section>
</main>
<Footer />
</motion.div>
)
}
export default Learning

49
src/pages/News.tsx
View File

@@ -13,11 +13,12 @@ import {
VolumeX, VolumeX,
} from 'lucide-react'; } from 'lucide-react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Header } from '../components/Header'; import { Header } from '../components/Header'
import { Footer } from '../components/Footer'; import { Footer } from '../components/Footer'
import { formatDate } from '../lib/utils'; import { formatDate } from '../lib/utils'
import { NEWS_CATEGORIES } from '../lib/constants'; import { NEWS_CATEGORIES, PAGE_META } from '../lib/constants'
import { usePageTitle } from '../hooks/usePageTitle'; import { usePageMeta } from '../hooks/usePageMeta'
import { getLocaleFromPathname } from '../lib/i18n'
// 模拟新闻数据 // 模拟新闻数据
const allNews = [ const allNews = [
@@ -322,9 +323,10 @@ const Pagination: React.FC<{
}; };
/** /**
* 数字人视频播放器组件 * 视频区（占位）
*/ */
const DigitalHumanVideo: React.FC = () => { const DigitalHumanVideo: React.FC<{ locale: 'zh' | 'en' }> = ({ locale }) => {
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null);
const [isPlaying, setIsPlaying] = useState(false); const [isPlaying, setIsPlaying] = useState(false);
const [isMuted, setIsMuted] = useState(true); const [isMuted, setIsMuted] = useState(true);
@@ -401,7 +403,7 @@ const DigitalHumanVideo: React.FC = () => {
<div className="absolute top-4 left-4"> <div className="absolute top-4 left-4">
<span className="px-3 py-1 bg-red-500 text-white text-xs font-medium rounded-full flex items-center gap-2"> <span className="px-3 py-1 bg-red-500 text-white text-xs font-medium rounded-full flex items-center gap-2">
<span className="w-2 h-2 bg-white rounded-full animate-pulse" /> <span className="w-2 h-2 bg-white rounded-full animate-pulse" />
数字人播报 {locale === 'en' ? 'Video' : '视频'}
</span> </span>
</div> </div>
</div> </div>
@@ -411,28 +413,36 @@ const DigitalHumanVideo: React.FC = () => {
<div className="lg:col-span-2 p-6 flex flex-col justify-center"> <div className="lg:col-span-2 p-6 flex flex-col justify-center">
<div className="mb-4"> <div className="mb-4">
<span className="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-3"> <span className="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-3">
AI 数字人 {locale === 'en' ? 'Video (Placeholder)' : '视频（占位）'}
</span> </span>
<h3 className="text-2xl font-bold text-primary-dark mb-3"> <h3 className="text-2xl font-bold text-primary-dark mb-3">
示例集团新闻播报 {locale === 'en' ? 'Updates' : '资讯更新'}
</h3> </h3>
<p className="text-gray-600 leading-relaxed mb-4"> <p className="text-gray-600 leading-relaxed mb-4">
欢迎收看示例集团最新资讯播报。我们使用先进的AI数字人技术，为您带来最新的企业动态、行业资讯和重要公告。 {locale === 'en'
? 'This is a placeholder module for media updates. It can be replaced by videos, announcements, or featured content.'
: '本模块为占位示例，可替换为公告、视频、专栏等重点内容入口。'}
</p> </p>
</div> </div>
<div className="space-y-3 text-sm text-gray-600"> <div className="space-y-3 text-sm text-gray-600">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-2 h-2 bg-primary rounded-full" /> <div className="w-2 h-2 bg-primary rounded-full" />
<span>24小时不间断播报</span> <span>{locale === 'en' ? 'Featured slot' : '重点内容位'}</span>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-2 h-2 bg-primary rounded-full" /> <div className="w-2 h-2 bg-primary rounded-full" />
<span>实时更新企业资讯</span> <span>{locale === 'en' ? 'Timely updates' : '更新及时'}</span>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-2 h-2 bg-primary rounded-full" /> <div className="w-2 h-2 bg-primary rounded-full" />
<span>多语言智能播报</span> <span>{locale === 'en' ? 'Bilingual ready' : '支持双语结构'}</span>
</div> </div>
</div> </div>
@@ -454,7 +464,14 @@ const DigitalHumanVideo: React.FC = () => {
* News 组件 - 新闻资讯页面 * News 组件 - 新闻资讯页面
*/ */
export const News: React.FC = () => { export const News: React.FC = () => {
usePageTitle('新闻资讯'); const locale = getLocaleFromPathname(window.location.pathname)
usePageMeta({
title: locale === 'en' ? 'News' : PAGE_META.news.title,
description: PAGE_META.news.description,
locale,
})
const [activeCategory, setActiveCategory] = useState('all'); const [activeCategory, setActiveCategory] = useState('all');
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
@@ -516,7 +533,7 @@ export const News: React.FC = () => {
<section className="py-12"> <section className="py-12">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* 数字人视频播放器 */} {/* 数字人视频播放器 */}
<DigitalHumanVideo /> <DigitalHumanVideo locale={locale} />
<div className="grid lg:grid-cols-3 gap-8"> <div className="grid lg:grid-cols-3 gap-8">
{/* 左侧新闻列表 */} {/* 左侧新闻列表 */}

48
src/pages/Services.tsx
View File

@@ -17,13 +17,15 @@ import {
Users, Users,
Zap, Zap,
} from 'lucide-react'; } from 'lucide-react';
import { Header } from '../components/Header'; import { Header } from '../components/Header'
import { Footer } from '../components/Footer'; import { Footer } from '../components/Footer'
import { SERVICES } from '../lib/constants'; import { PAGE_META, SERVICES } from '../lib/constants'
import { usePageTitle } from '../hooks/usePageTitle'; import { usePageMeta } from '../hooks/usePageMeta'
import { getLocaleFromPathname } from '../lib/i18n'
/** /**
* Services 组件 - 产品服务页面 * Services 组件 - 服务范围页面
*/ */
// 详细服务数据 // 详细服务数据
@@ -196,7 +198,14 @@ const CaseCard: React.FC<{ case: typeof cases[0]; index: number }> = ({ case: ca
* Services 组件 * Services 组件
*/ */
export const Services: React.FC = () => { export const Services: React.FC = () => {
usePageTitle('产品服务'); const locale = getLocaleFromPathname(window.location.pathname)
usePageMeta({
title: locale === 'en' ? 'Services' : PAGE_META.services.title,
description: PAGE_META.services.description,
locale,
})
const [activeCategory, setActiveCategory] = useState('all'); const [activeCategory, setActiveCategory] = useState('all');
const filteredCases = activeCategory === 'all' const filteredCases = activeCategory === 'all'
@@ -225,10 +234,12 @@ export const Services: React.FC = () => {
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
> >
<h1 className="text-4xl md:text-5xl font-bold mb-4"> <h1 className="text-4xl md:text-5xl font-bold mb-4">
产品服务 {locale === 'en' ? 'Services' : '服务范围'}
</h1> </h1>
<p className="text-xl text-white/80 max-w-3xl mx-auto"> <p className="text-xl text-white/80 max-w-3xl mx-auto">
为客户提供全方位的专业服务解决方案 {locale === 'en'
? 'A structured overview of service scope (placeholder).'
: '围绕客户关键需求提供系统化服务（占位示例）。'}
</p> </p>
</motion.div> </motion.div>
</div> </div>
@@ -245,10 +256,12 @@ export const Services: React.FC = () => {
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
> >
<h2 className="text-3xl font-bold text-primary-dark mb-4"> <h2 className="text-3xl font-bold text-primary-dark mb-4">
核心业务板块 {locale === 'en' ? 'Service Areas' : '服务范围概览'}
</h2> </h2>
<p className="text-lg text-gray-600"> <p className="text-lg text-gray-600">
四大核心业务，构建全方位服务体系 {locale === 'en'
? 'Grouped capabilities and deliverables (placeholder).'
: '以条目化方式呈现能力范围与交付物（占位示例）。'}
</p> </p>
</motion.div> </motion.div>
@@ -435,10 +448,13 @@ export const Services: React.FC = () => {
> >
<div> <div>
<h2 className="text-3xl font-bold text-primary-dark mb-2"> <h2 className="text-3xl font-bold text-primary-dark mb-2">
成功案例 {locale === 'en' ? 'Representative Cases' : '典型案例（占位）'}
</h2> </h2>
<p className="text-lg text-gray-600"> <p className="text-lg text-gray-600">
真实项目，展现专业实力 {locale === 'en'
? 'Placeholder cases for structure demonstration.'
: '用于展示案例结构，后续以真实案例替换。'}
</p> </p>
</div> </div>
@@ -480,10 +496,12 @@ export const Services: React.FC = () => {
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
> >
<h2 className="text-3xl font-bold text-primary-dark mb-4"> <h2 className="text-3xl font-bold text-primary-dark mb-4">
合作伙伴 {locale === 'en' ? 'Partners' : '合作伙伴（占位）'}
</h2> </h2>
<p className="text-lg text-gray-600"> <p className="text-lg text-gray-600">
与众多知名企业建立深度合作关系 {locale === 'en'
? 'Partner list will be updated after confirmation.'
: '合作伙伴信息将于正式资料确认后发布。'}
</p> </p>
</motion.div> </motion.div>
@@ -521,7 +539,7 @@ export const Services: React.FC = () => {
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
> >
<h2 className="text-3xl font-bold mb-4">服务流程</h2> <h2 className="text-3xl font-bold mb-4">{locale === 'en' ? 'Process' : '服务流程（占位）'}</h2>
<p className="text-lg text-gray-300"> <p className="text-lg text-gray-300">
标准化流程，确保服务质量 标准化流程，确保服务质量
</p> </p>