diff --git a/package.json b/package.json index 66a03f4..0341efc 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,8 @@ }, "dependencies": { "axios": "^1.13.2", + "framer-motion": "^12.23.26", + "lucide-react": "^0.562.0", "react": "^19.2.0", "react-dom": "^19.2.0", "react-router-dom": "^7.11.0" diff --git a/public/images/hero-bg.svg b/public/images/hero-bg.svg new file mode 100644 index 0000000..a9314fd --- /dev/null +++ b/public/images/hero-bg.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/images/logo.svg b/public/images/logo.svg new file mode 100644 index 0000000..0b64685 --- /dev/null +++ b/public/images/logo.svg @@ -0,0 +1,5 @@ + + + 诚裕集团 + CHENGYU GROUP + diff --git a/public/images/placeholder-honor.svg b/public/images/placeholder-honor.svg new file mode 100644 index 0000000..d0d8179 --- /dev/null +++ b/public/images/placeholder-honor.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/placeholder-news.svg b/public/images/placeholder-news.svg new file mode 100644 index 0000000..afcc1e4 --- /dev/null +++ b/public/images/placeholder-news.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/images/placeholder-services.svg b/public/images/placeholder-services.svg new file mode 100644 index 0000000..cd1a0b9 --- /dev/null +++ b/public/images/placeholder-services.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/placeholder-team.svg b/public/images/placeholder-team.svg new file mode 100644 index 0000000..c4de190 --- /dev/null +++ b/public/images/placeholder-team.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/App.tsx b/src/App.tsx index 257538e..391b6a0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,18 +1,78 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' +import { motion, AnimatePresence } from 'framer-motion' import { Home } from './pages/Home' -import { PostDetail } from './pages/PostDetail' -import { CategoriesPage } from './pages/Categories' -import { CategoryDetail } from './pages/CategoryDetail' +import { About } from './pages/About' +import { Services } from './pages/Services' +import { News } from './pages/News' +import { Contact } from './pages/Contact' + +// 页面切换动画配置 +const pageVariants = { + initial: { + opacity: 0, + y: 20, + }, + animate: { + opacity: 1, + y: 0, + }, + exit: { + opacity: 0, + y: -20, + }, +} + +const pageTransition = { + duration: 0.4, + ease: 'easeInOut', +} + +// 页面包装组件 - 添加动画效果 +const PageWrapper = ({ children }: { children: React.ReactNode }) => ( + + {children} + +) + +// 404 页面组件 +const NotFound = () => ( + +
+
+

404

+

页面不存在

+

抱歉,您访问的页面不存在或已被移除

+ + 返回首页 + +
+
+
+) function App() { return ( - - } /> - } /> - } /> - } /> - + + + } /> + } /> + } /> + } /> + } /> + } /> + + ) } diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index fffde69..9bad864 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,14 +1,250 @@ -import React from 'react' +import { Link } from 'react-router-dom'; +import { motion } from 'framer-motion'; +import { + Building2, + Phone, + Mail, + MapPin, + Clock, + Wechat, + Weibo, + Linkedin, + ArrowRight, +} from 'lucide-react'; +import { + COMPANY_INFO, + FOOTER_LINKS, + SOCIAL_MEDIA, +} from '../../lib/constants'; +/** + * Footer 组件 - 企业官网页脚 + */ + +// 动画变体配置 +const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + 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> = { + Wechat, + Weibo, + Linkedin, +}; + +/** + * 联系方式项组件 + */ +const ContactItem: React.FC<{ + icon: React.ComponentType<{ size?: number; className?: string }>; + title: string; + content: string; +}> = ({ icon: Icon, title, content }) => ( +
+ +
+

{title}

+

{content}

+
+
+); + +/** + * 链接列组件 + */ +const LinkColumn: React.FC<{ + title: string; + links: Array<{ label: string; path: string }>; +}> = ({ title, links }) => ( +
+

+ {title} +

+ +
+); + +/** + * Footer 组件 + */ export const Footer: React.FC = () => { + const currentYear = new Date().getFullYear(); + return ( -