Mayne0213
f78454c2a1
- Initial setup and all features from develop branch - Includes: auth, deploy, docker, style fixes - K3S deployment configuration
78 lines
3.4 KiB
TypeScript
78 lines
3.4 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import introImage1 from "@/public/home/intro/church1.webp";
|
|
import introImage3 from "@/public/home/intro/pray.webp";
|
|
|
|
export default function Intro() {
|
|
const items = [
|
|
{
|
|
image: introImage1,
|
|
title: "주일 설교",
|
|
subtitle: "Sunday Sermon",
|
|
category: "sermon",
|
|
},
|
|
{
|
|
image: introImage3,
|
|
title: "금요 성령집회",
|
|
subtitle: "Friday Meeting",
|
|
category: "friday",
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section id="intro" className="py-16 smalltablet:py-20 pc:py-24 bg-gray-50">
|
|
<div className="max-w-7xl mx-auto px-4 smalltablet:px-6 pc:px-8">
|
|
<div className="flex flex-col smalltablet:flex-row justify-between smalltablet:items-end gap-6 smalltablet:gap-4 mb-12 smalltablet:mb-16">
|
|
<div>
|
|
<h2 className="text-3xl smalltablet:text-4xl pc:text-5xl font-black text-gray-800 mb-2 tracking-tight">Worship services.</h2>
|
|
<p className="text-gray-600 text-lg smalltablet:text-xl font-semibold">금주의 예배와 찬양</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 smalltablet:grid-cols-2 pc:grid-cols-2 gap-3 smalltablet:gap-4 pc:gap-8 smalltablet:max-w-2xl smalltablet:mx-auto pc:max-w-7xl">
|
|
{items.map((item, index) => (
|
|
<Link
|
|
key={index}
|
|
href={`/worship?category=${item.category}`}
|
|
className="group hover:cursor-pointer rounded-2xl smalltablet:rounded-3xl p-8 smalltablet:p-10 relative overflow-hidden hover:shadow-xl transition-shadow col-span-2 aspect-2/1 pc:col-span-1 pc:aspect-[16/9] block"
|
|
>
|
|
{/* 배경 이미지 레이어 */}
|
|
<Image
|
|
src={item.image}
|
|
alt={item.title}
|
|
fill
|
|
placeholder="blur"
|
|
className="object-cover transition-transform duration-500 group-hover:scale-110"
|
|
sizes="(max-width: 768px) 100vw, 50vw"
|
|
/>
|
|
{/* 검은색 오버레이 */}
|
|
<div className="absolute inset-0 z-10 bg-black opacity-50 group-hover:opacity-20 transition-opacity"/>
|
|
|
|
{/* 컨텐츠 */}
|
|
<div className="absolute inset-0 z-20 flex flex-col justify-center items-center">
|
|
{/* 텍스트 */}
|
|
<div className="flex flex-col justify-center items-center w-full">
|
|
<h3 className="text-4xl smalltablet:text-5xl pc:text-5xl font-extrabold text-white mb-0 smalltablet:mb-3 text-center smalltablet:text-left">
|
|
{item.title}
|
|
</h3>
|
|
<h4 className="smalltablet:block text-xl smalltablet:text-2xl font-bold text-white mb-3 smalltablet:mb-3 pc:mb-6">
|
|
{item.subtitle}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 오른쪽 아래 화살표 */}
|
|
<div className="hidden smalltablet:block absolute bottom-5 right-5 smalltablet:bottom-6 smalltablet:right-6 z-20">
|
|
<svg className="w-6 h-6 smalltablet:w-8 smalltablet:h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
|
</svg>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|