头部和尾部布局

apps/web/app/page.tsx

@@ -1,5 +1,15 @@
 'use client';
 
+import Content from "@/components/content/page";
+import Footer from "@/components/footer/footer";
+import Header from "@/components/header/header";
+
 export default function HomePage() {
-	return <>sss</>;
+	return (
+		<>
+			<Header />
+			<Content />
+			<Footer />
+		</>
+	);
 }

apps/web/components/content/page.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Content: React.FC = () => {
+  return (
+    <div className="w-[1920px] min-h-[calc(100vh-710px-758px)]  relative left-1/2 transform -translate-x-1/2 bg-center flex justify-center items-center" style={{backgroundColor:'#000000'}}
+       >
+      <div className="p-5">
+        <p className="text-white">内容区域</p>
+      </div>
+    </div>
+  );
+};
+
+export default Content;

apps/web/components/footer/footer.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+const Footer: React.FC = () => {
+	return (
+		<div
+			className="flex flex-col items-center justify-center relative bottom-0 left-1/2 transform -translate-x-1/2 w-[1920px] h-[758px] bg-cover bg-center"
+			style={{ backgroundImage: `url('/footer.png')` }}
+		>
+			{/* 主标题 */}
+			<div className="mb-8 mt-15">
+				<p className=" tracking-widest" style={{ fontSize: '32px' }}>
+					春风拂面花开满园心OO情愉悦
+				</p>
+			</div>
+
+			{/* 版权声明 */}
+			<div className="mb-8 text-center space-y-2 ">
+				<p className="text-sm opacity-80" style={{ color: '#818da3' }}>
+					免责声明：免责条款的提出必须是明示的，不允许以默示方式作出，也不允许法官推定免责条款的存在。
+				</p>
+				<p className="text-sm opacity-80 mt-5" style={{ color: '#818da3' }}>
+					版权所有：Copyright©2016-2019 包图网ibaotu.com 版权所有
+				</p>
+			</div>
+
+			{/* 导航链接 */}
+			<div className="flex space-x-12 mt-5">
+				<a href="#" className="hover:text-blue-300 transition-colors" style={{ color: '#818da3' }}>
+					首页
+				</a>
+				<a href="#" className="hover:text-blue-300 transition-colors" style={{ color: '#818da3' }}>
+					关于我们
+				</a>
+				<a href="#" className="hover:text-blue-300 transition-colors" style={{ color: '#818da3' }}>
+					新闻中心
+				</a>
+				<a href="#" className="hover:text-blue-300 transition-colors" style={{ color: '#818da3' }}>
+					政务公开
+				</a>
+				<a href="#" className="hover:text-blue-300 transition-colors" style={{ color: '#818da3' }}>
+					交流互动
+				</a>
+				<a href="#" className="hover:text-blue-300 transition-colors" style={{ color: '#818da3' }}>
+					便民服务
+				</a>
+			</div>
+		</div>
+	);
+};
+
+export default Footer;

apps/web/components/header/header.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Header: React.FC = () => {
+	return (
+		<div
+			className="relative left-1/2 transform -translate-x-1/2 w-[1920px] min-h-[710px] bg-cover bg-center "
+			style={{ backgroundImage: `url('/header.png')` }}
+		>
+			<div className="p-5">
+				<p className="text-white">头部内容区域</p>
+			</div>
+		</div>
+	);
+};
+
+export default Header;