86 lines
3.3 KiB
TypeScript
86 lines
3.3 KiB
TypeScript
// apps/dm/app/(landing)/reuse/_sections/IntroCards.tsx
|
|
"use client";
|
|
|
|
import Link from "next/link";
|
|
|
|
type IntroCardItem = {
|
|
title: string;
|
|
desc: string;
|
|
image: string;
|
|
href: string;
|
|
};
|
|
|
|
const INTRO_CARDS: IntroCardItem[] = [
|
|
{
|
|
title: "물 재이용 법",
|
|
desc: "물의 재이용 촉진 및 지원에 관한 법률을 시행하고, 일부 법률은 개정되었습니다.",
|
|
image: "/images/landing/card_01.jpg",
|
|
href: "/reuse/intro/law",
|
|
},
|
|
{
|
|
title: "친환경 수자원 빗물",
|
|
desc: "가뭄을 극복하고 홍수를 예방하기 위해 비가 내릴 때 빗물을 모아두었다가 사용합니다.",
|
|
image: "/images/landing/card_02.jpg",
|
|
href: "/reuse/intro/rain",
|
|
},
|
|
{
|
|
title: "알뜰하게 재이용되는 중수",
|
|
desc: "한번 사용한 물을 중수도 시설을 통해 재생하여 개별적 또는 지역적으로 재이용할 수 있습니다.",
|
|
image: "/images/landing/card_03.jpg",
|
|
href: "/reuse/intro/greywater",
|
|
},
|
|
{
|
|
title: "하수처리수 재이용",
|
|
desc: "사용하고 버려진 공공하수처리장으로 모여진 물을 용도에 맞는 처리 후 재이용 할 수 있습니다.",
|
|
image: "/images/landing/card_04.jpg",
|
|
href: "/reuse/intro/treated",
|
|
},
|
|
];
|
|
|
|
export default function IntroCards() {
|
|
return (
|
|
<section id="intro" className="bg-white">
|
|
<div className="mx-auto max-w-[1520px] px-6 py-[90px] h-[870px]">
|
|
<div className="text-center">
|
|
<div className="inline-block">
|
|
<h2 className="text-[40px] font-extrabold tracking-tight text-slate-900 leading-none">물 재이용 소개</h2>
|
|
<div className="h-2 bg-gradient-to-r from-sky-300 to-green-300"></div>
|
|
</div>
|
|
<p className="mt-5 text-xl text-gray-500">
|
|
지속 가능한 미래를 위한 약속, 깨끗한 물의 새로운 순환을 시작합니다.
|
|
</p>
|
|
</div>
|
|
|
|
<section className="mx-auto max-w-8xl px-4 py-12">
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
|
|
{INTRO_CARDS.map((card, idx) => (
|
|
<Link
|
|
key={idx}
|
|
href={card.href}
|
|
aria-label={`${card.title} 상세로 이동`}
|
|
className="group relative h-[280px] md:h-[320px] lg:h-[500px] overflow-hidden rounded-2xl cursor-pointer focus:outline-none focus:ring-2 focus:ring-sky-400/60"
|
|
>
|
|
{/* 배경 이미지 (이미 그라디언트 포함) */}
|
|
<img
|
|
src={card.image}
|
|
alt={card.title}
|
|
className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 hover:scale-105"
|
|
/>
|
|
|
|
{/* 텍스트 영역 */}
|
|
<div className="absolute bottom-0 z-10 p-6 text-white">
|
|
<h3 className="text-lg font-semibold tracking-tight">
|
|
{card.title}
|
|
</h3>
|
|
<p className="mt-2 text-sm leading-relaxed text-white/90 line-clamp-3">
|
|
{card.desc}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |