69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import SubPageHeader from "@/components/SubPageHeader";
|
|
import CaseImageSlider from "@/components/ImageSlider";
|
|
import BusinessSubNav from "@/components/BusinessSubNav";
|
|
|
|
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 Hr({ className = "" }: { className?: string }) {
|
|
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
|
}
|
|
|
|
export default function RainPage() {
|
|
return (
|
|
<div className="relative bg-white">
|
|
{/* ✅ 추가 */}
|
|
<BusinessSubNav />
|
|
|
|
<SubPageHeader
|
|
title="빗물 재이용 사례"
|
|
crumbs={[
|
|
{ label: "Home", href: "/main" },
|
|
{ label: "물 재이용 사례", href: "/example/rain" },
|
|
{ label: "빗물 재이용 사례" },
|
|
]}
|
|
hideFooterLine
|
|
hideGuideText
|
|
wrapClassName="!pb-0"
|
|
/>
|
|
|
|
<Hr className="my-7" />
|
|
|
|
<section id="suwon" className="scroll-mt-[120px]">
|
|
<SectionTitle>경기도 수원시</SectionTitle>
|
|
|
|
<CaseImageSlider
|
|
className="mt-8"
|
|
maxWidthClassName="max-w-[760px]"
|
|
slides={[
|
|
{ src: "/images/landing/business/rain/rain_01.png", alt: "수원시 사례 1" },
|
|
{ src: "/images/landing/business/rain/rain_02.png", alt: "수원시 사례 2" },
|
|
]}
|
|
/>
|
|
</section>
|
|
|
|
<Hr className="my-16" />
|
|
|
|
<section id="jeju" className="scroll-mt-[120px] pb-[120px]">
|
|
<SectionTitle>제주특별자치도</SectionTitle>
|
|
|
|
<CaseImageSlider
|
|
className="mt-8"
|
|
maxWidthClassName="max-w-[760px]"
|
|
slides={[
|
|
{ src: "/images/landing/business/rain/jeju_01.png", alt: "제주 사례 1" },
|
|
{ src: "/images/landing/business/rain/jeju_02.png", alt: "제주 사례 2" },
|
|
]}
|
|
/>
|
|
</section>
|
|
</div>
|
|
);
|
|
} |