70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
// apps/dm/app/(landing)/reuse/_sections/Cases.tsx
|
|
"use client";
|
|
|
|
import Image from "next/image";
|
|
import section03 from "@/public/images/landing/section_03.png";
|
|
|
|
export default function Cases() {
|
|
return (
|
|
<section id="cases" className="bg-[#EAF6F6]">
|
|
<div className="mx-auto max-w-[1520px] px-6 h-[870px] flex items-center">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 w-full">
|
|
|
|
{/* 좌측 : 카피 영역 */}
|
|
<div className="flex flex-col justify-center">
|
|
<div className="pl-2 lg:pl-10">
|
|
<p className="text-[32px] font-extrabold text-slate-900 tracking-[-0.02em]">
|
|
빗물+중수도+하수도
|
|
</p>
|
|
|
|
<h2 className="mt-6 leading-[1.1] tracking-[-0.03em]">
|
|
<span className="block text-[64px] font-extrabold text-slate-900">
|
|
데이터로 보는
|
|
</span>
|
|
<span className="mt-3 block text-[64px] font-extrabold text-[#004A94]">
|
|
물 재이용 현황
|
|
</span>
|
|
</h2>
|
|
|
|
<div className="mt-14">
|
|
<a
|
|
href="/reuse/cases/rain"
|
|
className="
|
|
inline-flex items-center justify-center gap-3
|
|
w-[260px] h-[52px]
|
|
bg-[#01ACE5] text-white
|
|
rounded-sm
|
|
hover:bg-[#0A78C0]
|
|
transition-colors
|
|
"
|
|
>
|
|
물 재이용 현황 보러가기
|
|
<span className="text-lg">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 우측 : 이미지 카드 */}
|
|
<div className="flex justify-center lg:justify-end">
|
|
<div
|
|
className="
|
|
relative
|
|
w-full max-w-[720px]
|
|
"
|
|
>
|
|
<Image
|
|
src={section03}
|
|
alt="물 재이용 현황 데이터 테이블"
|
|
className="w-full h-auto object-cover"
|
|
style={{ width: "100%", height: "auto" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|