67 lines
3.0 KiB
TypeScript
67 lines
3.0 KiB
TypeScript
import Link from 'next/link';
|
|
import SajuForm from '../components/SajuForm';
|
|
import Header from '@/components/Header';
|
|
import Footer from '@/components/Footer';
|
|
|
|
export default function SajuPage() {
|
|
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">
|
|
<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>를<br />
|
|
확인하세요
|
|
</h1>
|
|
|
|
<p className="text-xl text-[#5d6d7e] mb-12 max-w-2xl mx-auto leading-relaxed">
|
|
생년월일시를 입력하면 무료로 사주팔자, 운세, 궁합을 확인할 수 있습니다.
|
|
쉽고 빠르게 나의 운명을 알아보세요.
|
|
</p>
|
|
|
|
{/* Main Input Card */}
|
|
<div className="glass-panel-light rounded-3xl p-8 md:p-12 max-w-2xl mx-auto shadow-2xl">
|
|
<div className="flex items-center justify-center space-x-3 mb-8">
|
|
<div className="w-12 h-12 bg-[#173658] rounded-full flex items-center justify-center">
|
|
<svg className="w-6 h-6 text-[#d4af37]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-[#173658]">생년월일시 입력</h2>
|
|
</div>
|
|
|
|
<SajuForm />
|
|
</div>
|
|
|
|
{/* 안내 카드 */}
|
|
<div className="grid md:grid-cols-3 gap-6 mt-12 max-w-3xl mx-auto">
|
|
<div className="bg-white rounded-xl p-6 text-center">
|
|
<div className="text-3xl mb-3">✨</div>
|
|
<h3 className="text-[#173658] font-bold mb-2">정확한 분석</h3>
|
|
<p className="text-sm text-[#5d6d7e]">전통 명리학에 기반한<br />정밀한 사주 계산</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl p-6 text-center">
|
|
<div className="text-3xl mb-3">🎯</div>
|
|
<h3 className="text-[#173658] font-bold mb-2">무료 제공</h3>
|
|
<p className="text-sm text-[#5d6d7e]">기본 사주팔자는<br />무료로 확인 가능</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl p-6 text-center">
|
|
<div className="text-3xl mb-3">🔐</div>
|
|
<h3 className="text-[#173658] font-bold mb-2">개인정보 보호</h3>
|
|
<p className="text-sm text-[#5d6d7e]">안전하게 보호되는<br />개인정보</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|