72 lines
2.1 KiB
TypeScript
72 lines
2.1 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 Hr({ className = "" }: { className?: string }) {
|
|
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
|
}
|
|
|
|
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 tracking-tight leading-none text-slate-900">
|
|
<span className="relative z-10">{title}</span>
|
|
<span className="absolute left-0 bottom-[-4px] z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
|
|
</h2>
|
|
</div>
|
|
|
|
<section id="example-rain-suwon" className="mt-10 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="example-rain-jeju" className="scroll-mt-[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>
|
|
);
|
|
} |