zksy-website-front/src/components/ProductionSoft.tsx

import React from 'react';
import SubTitle from "@/components/subTitle";
import Image from "next/image";
import Link from 'next/link';

function ProductionSoft({softIntroduction}: {softIntroduction: string}) {
  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">
              {softIntroduction}
            </p>
          </div>
          <Link
            href={"/products?keyword=软件产品"}
            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.jpg')] 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.jpg')] 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.jpg')] 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={"/products?keyword=软件产品"}
            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;