feat(components): 新增硬件和软件产品组件

- 添加 ProductionHard 和 ProductionSoft 组件
- 实现硬件和软件产品的展示页面
- 包含产品简介、图片展示和了解更多按钮
- 响应式设计，适配不同屏幕尺寸

src/components/ProductionHard.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import SubTitle from "@/components/subTitle";
+
+function ProductionHard() {
+  return (
+    <>
+      <div className={"hidden sm:block w-4/5 mx-auto mt-10"}>
+        <SubTitle title="硬件产品"/>
+      </div>
+      <div
+        className="sm:mt-8 bg-[url('/assets/home/18.png')] bg-cover from-blue-600 flex items-center justify-center px-4 py-16">
+        <div className="max-w-6xl mx-auto text-center">
+          <div className="mb-12">
+            <h1 className="text-2xl font-bold text-white mb-4">硬件简介</h1>
+            <div className="w-24 h-1 bg-blue-400 mx-auto mb-8"></div>
+
+            <p className="text-white/90 text-lg md:text-xl leading-relaxed max-w-4xl mx-auto">
+              硬件产品包括：物联网智慧灯杆、物联网智慧园区综合平台、自然灾害应急能力提升平台、物联网环保监测管理平台、水库雨水情测报与大坝安全监测平台等等......
+            </p>
+          </div>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
+            {/* Product 1 - Security Camera */}
+            <div className="flex flex-col items-center">
+              <div
+                className="w-32 h-32 md:w-40 md:h-40 rounded-full bg-white/90 flex items-center justify-center mb-4 shadow-lg bg-[url('/assets/home/19.png')] bg-cover">
+
+              </div>
+            </div>
+
+            <div className="flex flex-col items-center">
+              <div
+                className="w-32 h-32 md:w-40 md:h-40 rounded-full bg-white/90 flex items-center justify-center mb-4 shadow-lg bg-[url('/assets/home/20.png')] bg-cover">
+              </div>
+            </div>
+
+            <div className="flex flex-col items-center">
+              <div
+                className="w-32 h-32 md:w-40 md:h-40 rounded-full bg-white/90 flex items-center justify-center mb-4 shadow-lg bg-[url('/assets/home/21.png')] bg-cover">
+              </div>
+            </div>
+
+            <div className="flex flex-col items-center">
+              <div
+                className="w-32 h-32 md:w-40 md:h-40 rounded-full bg-white/90 flex items-center justify-center mb-4 shadow-lg bg-[url('/assets/home/22.png')] bg-cover">
+              </div>
+            </div>
+          </div>
+
+          <div
+            className="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 text-lg font-medium rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl cursor-pointer">
+            了解更多
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default ProductionHard;

src/components/ProductionSoft.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import SubTitle from "@/components/subTitle";
+import Image from "next/image";
+import Link from 'next/link';
+
+function ProductionSoft() {
+  return (
+    <div className={"w-full mx-auto sm:w-4/5"}>
+      <div className="hidden lg:block">
+        <SubTitle title={"软件产品"}/>
+      </div>
+      <div className="hidden lg:grid grid-cols-1 lg:grid-cols-5 gap-6 h-[600px] mt-10">
+        <div
+          className="lg:col-span-2 bg-[url('/assets/home/14.png')] bg-cover from-blue-900 to-blue-700 rounded-lg p-10 text-white flex flex-col justify-between">
+          <div>
+            <h2 className="text-2xl font-bold mt-10 border-b-2 border-blue-400 pb-2 inline-block">软件简介</h2>
+            <p className="text-white text-2xl leading-relaxed mb-8 mt-10 tracking-widest font-medium">
+              软件产品包括：物联网智慧园区综合平台、物联网智慧园区综合平台、自然灾害应急能力提升平台、物联网环保监测管理平台、水库雨水情测报与大坝安全监测平台等等......
+            </p>
+          </div>
+          <Link
+            href={"/"}
+            className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors w-fit">
+            了解更多
+          </Link>
+        </div>
+
+        <div className="lg:col-span-3 grid grid-cols-2 gap-4">
+          <div
+            className="col-span-2 bg-[url('/assets/home/15.png')] bg-cover from-teal-500 to-green-500 rounded-lg flex items-center justify-center text-white font-semibold text-lg">
+          </div>
+
+          <div
+            className="bg-[url('/assets/home/16.png')] bg-cover from-blue-600 to-cyan-500 rounded-lg flex items-center justify-center text-white font-semibold">
+          </div>
+
+          <div
+            className="bg-[url('/assets/home/17.png')] bg-cover from-slate-700 to-blue-800 rounded-lg flex items-center justify-center text-white font-semibold">
+          </div>
+        </div>
+      </div>
+      <div className="lg:hidden mt-2">
+        <div
+          className="bg-[url('/assets/home/14.png')] bg-cover from-blue-900 to-blue-700 p-10 text-white flex flex-col justify-between">
+          <div>
+            <h2 className="text-1xl font-bold mt-10 border-b-2 border-blue-400 pb-2 inline-block">软件简介</h2>
+            <p className="text-white text-1xl leading-relaxed mt-10 tracking-widest font-medium">
+              软件产品包括：物联网智慧园区综合平台、物联网智慧园区综合平台、自然灾害应急能力提升平台、物联网环保监测管理平台、水库雨水情测报与大坝安全监测平台等等......
+            </p>
+          </div>
+          <Image className="mt-6" src={"/assets/home/16.png"} width={1000} height={1000} alt={"软件产品"} />
+          <Image className="mt-6" src={"/assets/home/17.png"} width={1000} height={1000} alt={"软件产品"} />
+          <Link
+            href={"/"}
+            className="mt-6 bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors w-fit">
+            了解更多
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProductionSoft;