74 lines
3.0 KiB
TypeScript
74 lines
3.0 KiB
TypeScript
import Link from 'next/link';
|
|
import CompatibilityForm from '../components/CompatibilityForm';
|
|
import Header from '@/components/Header';
|
|
import Footer from '@/components/Footer';
|
|
|
|
export default function CompatibilityPage() {
|
|
return (
|
|
<div className="min-h-screen bg-[#F3E7E3]">
|
|
<Header />
|
|
|
|
{/* Hero Section */}
|
|
<section className="pt-32 pb-20 px-4">
|
|
<div className="max-w-4xl mx-auto text-center mb-12">
|
|
<div className="inline-block mb-6 px-6 py-2 bg-white rounded-full text-[#173658] font-bold border-2 border-[#173658]">
|
|
두 사람의 궁합을 확인해보세요
|
|
</div>
|
|
|
|
<h1 className="text-4xl md:text-6xl font-bold text-[#173658] mb-6 leading-tight">
|
|
💕 <span className="gradient-text">궁합</span> 보기
|
|
</h1>
|
|
|
|
<p className="text-xl text-[#5d6d7e] mb-12 max-w-2xl mx-auto leading-relaxed">
|
|
사주팔자를 비교하여 두 사람의 궁합을 확인할 수 있습니다.
|
|
연애, 결혼, 사업 등 다양한 관계의 궁합을 알아보세요.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Input Form */}
|
|
<div className="max-w-6xl mx-auto">
|
|
<CompatibilityForm />
|
|
</div>
|
|
</section>
|
|
|
|
{/* 궁합 정보 */}
|
|
<section className="py-20 px-4 bg-white">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-[#173658] mb-4">궁합이란?</h2>
|
|
<p className="text-xl text-[#5d6d7e]">사주팔자를 통해 알아보는 두 사람의 인연</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
<div className="text-center p-6 glass-panel-light rounded-2xl card-hover">
|
|
<div className="text-5xl mb-4">💑</div>
|
|
<h3 className="text-xl font-bold text-[#173658] mb-3">연애 궁합</h3>
|
|
<p className="text-[#5d6d7e]">
|
|
두 사람의 사랑이 얼마나 잘 맞는지 확인하고 서로를 이해하는 방법을 알아보세요.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="text-center p-6 glass-panel-light rounded-2xl card-hover">
|
|
<div className="text-5xl mb-4">💍</div>
|
|
<h3 className="text-xl font-bold text-[#173658] mb-3">결혼 궁합</h3>
|
|
<p className="text-[#5d6d7e]">
|
|
평생을 함께할 배우자와의 궁합을 확인하고 행복한 결혼 생활을 준비하세요.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="text-center p-6 glass-panel-light rounded-2xl card-hover">
|
|
<div className="text-5xl mb-4">🤝</div>
|
|
<h3 className="text-xl font-bold text-[#173658] mb-3">사업 궁합</h3>
|
|
<p className="text-[#5d6d7e]">
|
|
사업 파트너와의 궁합을 확인하고 성공적인 협력 관계를 만들어보세요.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|