CHORE(merge): merge from develop

- Initial setup and all features from develop branch
- Includes: auth, deploy, docker, style fixes
- K3S deployment configuration

nextjs/components/landing/Intro.tsx

@@ -0,0 +1,77 @@
+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>
+  );
+}
+