225 lines
7.8 KiB
TypeScript
225 lines
7.8 KiB
TypeScript
"use client";
|
|
|
|
import CaseImageSlider from "@/components/CaseImageSlider";
|
|
|
|
function SectionTitle({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<span className="h-5 w-[3px] bg-sky-500" />
|
|
<h3 className="text-2xl font-bold text-neutral-900">{children}</h3>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function BlockTitle({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<span className="relative inline-block h-[16px] w-[27px] align-middle">
|
|
<span className="absolute left-0 top-0 h-[16px] w-[16px] rounded-full bg-[#01ACE5]/40" />
|
|
<span className="absolute left-[7px] top-0 h-[16px] w-[16px] rounded-full bg-[#6DBB4F]/40" />
|
|
</span>
|
|
<h4 className="text-[20px] font-semibold text-[#1A1A1A]">{children}</h4>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Hr({ className = "" }: { className?: string }) {
|
|
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
|
}
|
|
|
|
function InfoList({
|
|
projectName,
|
|
purpose,
|
|
details,
|
|
}: {
|
|
projectName: string;
|
|
purpose: string;
|
|
details: string[];
|
|
}) {
|
|
return (
|
|
<div className="mt-10 space-y-9 px-10">
|
|
<div>
|
|
<BlockTitle>사업명</BlockTitle>
|
|
<ul className="mt-4 list-disc pl-8 text-[16px] leading-[1.8] text-[#4F4F4F]">
|
|
<li>{projectName}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<BlockTitle>사업목적</BlockTitle>
|
|
<ul className="mt-4 list-disc pl-8 text-[16px] leading-[1.8] text-[#4F4F4F]">
|
|
<li>{purpose}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<BlockTitle>사업 주요 내용</BlockTitle>
|
|
<ul className="mt-4 list-disc pl-8 text-[16px] leading-[1.8] text-[#4F4F4F]">
|
|
{details.map((item, index) => (
|
|
<li key={index}>{item}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type RainTableRow = {
|
|
facility: string;
|
|
storage: string;
|
|
supply: string;
|
|
pipe: string;
|
|
};
|
|
|
|
function RainTable({ rows }: { rows: RainTableRow[] }) {
|
|
return (
|
|
<div className="mt-8 overflow-x-auto">
|
|
<table className="w-full min-w-[860px] border border-[#D8DDE3] text-center">
|
|
<thead>
|
|
<tr>
|
|
<th className="border border-[#D8DDE3] bg-[#14A9D9] px-4 py-3 text-[18px] font-medium text-white">
|
|
시설명
|
|
</th>
|
|
<th className="border border-[#D8DDE3] bg-[#39B2BD] px-4 py-3 text-[18px] font-medium text-white">
|
|
저류조용량(㎥)
|
|
</th>
|
|
<th className="border border-[#D8DDE3] bg-[#58B99A] px-4 py-3 text-[18px] font-medium text-white">
|
|
빗물공급기
|
|
</th>
|
|
<th className="border border-[#D8DDE3] bg-[#70BF4B] px-4 py-3 text-[18px] font-medium text-white">
|
|
빗물분사장치(m)
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{rows.map((row, index) => (
|
|
<tr key={`${row.facility}-${index}`}>
|
|
<td className="border border-[#D8DDE3] bg-white px-4 py-3 text-[16px] text-[#4F4F4F]">
|
|
{row.facility}
|
|
</td>
|
|
<td className="border border-[#D8DDE3] bg-white px-4 py-3 text-[16px] text-[#4F4F4F]">
|
|
{row.storage}
|
|
</td>
|
|
|
|
{index === 0 && (
|
|
<td
|
|
rowSpan={rows.length}
|
|
className="border border-[#D8DDE3] bg-white px-4 py-3 text-[16px] text-[#4F4F4F]"
|
|
>
|
|
{row.supply}
|
|
</td>
|
|
)}
|
|
|
|
<td className="border border-[#D8DDE3] bg-white px-4 py-3 text-[16px] text-[#4F4F4F]">
|
|
{row.pipe}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function RainExampleSection() {
|
|
const title = "빗물 재이용 사례";
|
|
|
|
return (
|
|
<div className="bg-white">
|
|
<div className="inline-block">
|
|
<h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
|
|
<span className="relative z-10">{title}</span>
|
|
<span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="mt-10 pb-[120px]">
|
|
<section id="example-rain-suwon" className="scroll-mt-[120px]">
|
|
<SectionTitle>경기도 수원시</SectionTitle>
|
|
|
|
<CaseImageSlider
|
|
className="mt-8"
|
|
maxWidthClassName="max-w-[1240px]"
|
|
slides={[
|
|
{ src: "/images/landing/business/rain/suwon_01.png", alt: "수원시 빗물이용시설 사례 1" },
|
|
{ src: "/images/landing/business/rain/suwon_02.png", alt: "수원시 빗물이용시설 사례 2" },
|
|
{ src: "/images/landing/business/rain/suwon_03.png", alt: "수원시 빗물이용시설 사례 3" },
|
|
{ src: "/images/landing/business/rain/suwon_04.png", alt: "수원시 빗물이용시설 사례 4" },
|
|
{ src: "/images/landing/business/rain/suwon_05.png", alt: "수원시 빗물이용시설 사례 5" },
|
|
]}
|
|
/>
|
|
|
|
<InfoList
|
|
projectName="수원시 빗물이용시설 설치사업"
|
|
purpose="월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물공급기를 설치하여 축서기 도시 열섬효과 및 도로 비산먼지 저감"
|
|
details={[
|
|
"총사업비 : 20억원",
|
|
"위치 : 수원시 영통구, 팔달구 및 장안구 일원",
|
|
]}
|
|
/>
|
|
|
|
<div className="mt-9 px-10">
|
|
<BlockTitle>사업량</BlockTitle>
|
|
|
|
<RainTable
|
|
rows={[
|
|
{
|
|
facility: "광교중학교",
|
|
storage: "4,500",
|
|
supply: "1대",
|
|
pipe: "160",
|
|
},
|
|
{
|
|
facility: "수원월드컵경기장",
|
|
storage: "12,000",
|
|
supply: "1대",
|
|
pipe: "451",
|
|
},
|
|
{
|
|
facility: "수원종합운동장",
|
|
storage: "10,000",
|
|
supply: "1대",
|
|
pipe: "231",
|
|
},
|
|
{
|
|
facility: "수원컨벤션센터",
|
|
storage: "3,600",
|
|
supply: "1대",
|
|
pipe: "460",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<Hr className="my-20" />
|
|
|
|
<section id="example-rain-jeju" className="scroll-mt-[120px]">
|
|
<SectionTitle>제주특별자치도</SectionTitle>
|
|
|
|
<CaseImageSlider
|
|
className="mt-8"
|
|
maxWidthClassName="max-w-[1240px]"
|
|
slides={[
|
|
{ src: "/images/landing/business/rain/jeju_01.png", alt: "제주특별자치도 빗물이용시설 사례 1" },
|
|
{ src: "/images/landing/business/rain/jeju_02.png", alt: "제주특별자치도 빗물이용시설 사례 2" },
|
|
{ src: "/images/landing/business/rain/jeju_03.png", alt: "제주특별자치도 빗물이용시설 사례 3" },
|
|
]}
|
|
/>
|
|
|
|
<InfoList
|
|
projectName="제주특별자치도 중규모 빗물이용시설 설치사업"
|
|
purpose="강우시 비닐하우스에서 발생하는 대체수자원인 빗물을 순환 활용하고자 하는 사업으로, 지하수 사용 저감과 집중호우시 도로와 농경지 침수피해 예방"
|
|
details={[
|
|
"총사업비 : 278억원",
|
|
"위치 : 제주특별자치도 서귀포시 남원읍 위미리 일원",
|
|
"사업량 : 저류조 7,000㎥, 배수갑 500㎡, 관로 21.7km",
|
|
"사업기간 : 2024. 5. ~ 2028. 12.",
|
|
]}
|
|
/>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |