103 lines
3.2 KiB
TypeScript
103 lines
3.2 KiB
TypeScript
// apps/dm/app/(landing)/reuse/cases/greywater/page.tsx
|
|
"use client";
|
|
|
|
import Image, { type StaticImageData } from "next/image";
|
|
import SubPageHeader from "@/components/SubPageHeader";
|
|
import greywaterOverall from "@/public/images/landing/cases/greywater_overall.png";
|
|
import greywaterFactory from "@/public/images/landing/cases/greywater_factory.png";
|
|
import greywaterBuilding from "@/public/images/landing/cases/greywater_building.png";
|
|
import greywaterUsage from "@/public/images/landing/cases/greywater_usage.png";
|
|
|
|
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-[24px] font-bold text-neutral-900">{children}</h3>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type HrProps = {
|
|
className?: string;
|
|
};
|
|
|
|
function Hr({ className = "" }: HrProps) {
|
|
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
|
}
|
|
|
|
type ImgCardProps = {
|
|
src: StaticImageData;
|
|
alt: string;
|
|
};
|
|
|
|
function ImgCard({ src, alt }: ImgCardProps) {
|
|
return (
|
|
<div className="w-full overflow-x-auto">
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
className="block mx-auto max-w-none"
|
|
style={{ width: "auto", height: "auto" }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function GreywaterPage() {
|
|
return (
|
|
<div className="bg-white">
|
|
<SubPageHeader
|
|
title="중수도(현황)"
|
|
crumbs={[
|
|
{ label: "Home", href: "/reuse" },
|
|
{ label: "물 재이용 현황", href: "/reuse/cases/rain" },
|
|
{ label: "중수도(현황)" },
|
|
]}
|
|
hideFooterLine
|
|
hideGuideText
|
|
wrapClassName="!pb-0"
|
|
/>
|
|
|
|
<Hr className="my-7" />
|
|
|
|
{/* 1) 전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외) */}
|
|
<section className="mt-6">
|
|
<SectionTitle>전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)</SectionTitle>
|
|
<div className="mt-8">
|
|
<ImgCard src={greywaterOverall} alt="전체 중수도 설치 및 이용 현황 설명" />
|
|
</div>
|
|
</section>
|
|
|
|
<Hr className="my-11" />
|
|
|
|
{/* 2) 중수공장 및 발전시설 내 중수도 설치 및 이용 현황 */}
|
|
<section>
|
|
<SectionTitle>공장 및 발전시설 내 중수도 설치 및 이용 현황</SectionTitle>
|
|
<div className="mt-8">
|
|
<ImgCard src={greywaterFactory} alt="공장 및 발전시설 내 중수도 설치 및 이용 현황 설명" />
|
|
</div>
|
|
</section>
|
|
|
|
<Hr className="my-11" />
|
|
|
|
{/* 3) 중수도 건축물별 이용량 현황 */}
|
|
<section className="pb-16">
|
|
<SectionTitle>중수도 건축물별 이용량 현황</SectionTitle>
|
|
<div className="mt-8">
|
|
<ImgCard src={greywaterBuilding} alt="중수도 건축물별 이용량 현황 설명" />
|
|
</div>
|
|
</section>
|
|
|
|
<Hr className="my-11" />
|
|
|
|
{/* 4) 중수도 용도별 이용량 현황 */}
|
|
<section className="pb-[200px]">
|
|
<SectionTitle>중수도 용도별 이용량 현황</SectionTitle>
|
|
<div className="mt-8">
|
|
<ImgCard src={greywaterUsage} alt="중수도 용도별 이용량 현황 설명" />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|