123 lines
3.7 KiB
TypeScript
123 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import Image, { type StaticImageData } from "next/image";
|
|
|
|
import lawPlan from "@/public/images/landing/intro/law_timeline.png";
|
|
import planPerformance from "@/public/images/landing/intro/performance_left.png";
|
|
import domesticChange from "@/public/images/landing/intro/domestic_textbox.png";
|
|
import policyHistory from "@/public/images/landing/intro/policy_timeline.png";
|
|
import lawRelation from "@/public/images/landing/intro/rel_note.png";
|
|
import domesticLinkage from "@/public/images/landing/intro/linkage.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>
|
|
);
|
|
}
|
|
|
|
function Hr({ className = "" }: { className?: string }) {
|
|
return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
|
|
}
|
|
|
|
function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
|
|
return (
|
|
<div className="w-full overflow-x-auto">
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
className="mx-auto block max-w-none"
|
|
style={{ width: "auto", height: "auto" }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SectionShell({
|
|
id,
|
|
title,
|
|
children,
|
|
className = "",
|
|
}: {
|
|
id: string;
|
|
title: string;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<section id={id} className={`scroll-mt-[120px] ${className}`}>
|
|
<SectionTitle>{title}</SectionTitle>
|
|
<div className="mt-8">{children}</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default function LawIntroSection() {
|
|
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">
|
|
<SectionShell
|
|
id="law-plan"
|
|
title="법률 제·개정 및 기본계획 수립"
|
|
className="mt-10"
|
|
>
|
|
<ImgCard src={lawPlan} alt="법률 제·개정 및 기본계획 수립" />
|
|
</SectionShell>
|
|
|
|
<Hr className="my-11" />
|
|
|
|
<SectionShell
|
|
id="plan-performance"
|
|
title="제2차 계획 대비 실적 현황"
|
|
>
|
|
<ImgCard src={planPerformance} alt="제2차 계획 대비 실적 현황" />
|
|
</SectionShell>
|
|
|
|
<Hr className="my-11" />
|
|
|
|
<SectionShell id="domestic-change" title="우리나라의 수자원 현황 및 물이용 여건">
|
|
<ImgCard src={domesticChange} alt="우리나라의 수자원 현황 및 물이용 여건" />
|
|
</SectionShell>
|
|
|
|
<Hr className="my-11" />
|
|
|
|
<SectionShell
|
|
id="policy-history"
|
|
title="물 재이용 정책 변화 추이"
|
|
>
|
|
<ImgCard src={policyHistory} alt="물 재이용 정책 변화 추이" />
|
|
</SectionShell>
|
|
|
|
<Hr className="my-11" />
|
|
|
|
<SectionShell
|
|
id="law-relation"
|
|
title="타법령과의 관계 검토"
|
|
>
|
|
<ImgCard src={lawRelation} alt="타법령과의 관계 검토" />
|
|
</SectionShell>
|
|
|
|
<Hr className="my-11" />
|
|
|
|
<SectionShell
|
|
id="domestic-linkage"
|
|
title="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요"
|
|
>
|
|
<ImgCard src={domesticLinkage} alt="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요" />
|
|
</SectionShell>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |