gahusb/saju-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

웹 디자인 전면 개편

Browse Source
This commit is contained in:
gahusb
2026-02-17 08:15:41 +09:00
parent 7042373448
commit 028bda551f
16 changed files with 1850 additions and 1050 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
app/saju/page.tsx
View File

@@ -1,71 +1,66 @@
import Link from 'next/link';
import SajuForm from '../components/SajuForm';
import UserMenu from '@/components/UserMenu';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
export default function SajuPage() {
return (
<div className="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50">
{/* Navigation */}
<nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
<Link href="/" className="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
🔮 사주포춘
</Link>
<div className="flex items-center space-x-6">
<div className="hidden md:flex space-x-6 mr-4">
<Link href="/saju" className="text-indigo-600 font-bold">사주팔자</Link>
<Link href="/compatibility" className="text-gray-700 hover:text-indigo-600 transition font-medium">궁합</Link>
<Link href="/tojeong" className="text-gray-700 hover:text-indigo-600 transition font-medium">토정비결</Link>
</div>
<UserMenu />
</div>
</div>
</div>
</nav>
<div className="min-h-screen bg-[#F3E7E3]">
<Header />
{/* Hero Section */}
<section className="pt-20 pb-32 px-4">
<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/50 backdrop-blur-sm rounded-full text-indigo-700 font-semibold border border-indigo-200">
<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-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight">
나의 <span className="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">사주팔자</span>를<br />
<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-gray-600 mb-12 max-w-2xl mx-auto">
<p className="text-xl text-[#5d6d7e] mb-12 max-w-2xl mx-auto leading-relaxed">
생년월일시를 입력하면 무료로 사주팔자, 운세, 궁합을 확인할 수 있습니다.
쉽고 빠르게 나의 운명을 알아보세요.
</p>
{/* Main Input Card */}
<div className="bg-white rounded-3xl shadow-2xl p-8 md:p-12 max-w-2xl mx-auto">
<h2 className="text-2xl font-bold text-gray-900 mb-8">생년월일시 입력</h2>
<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 */}
<footer className="bg-gray-900 text-white py-12 px-4">
<div className="max-w-7xl mx-auto text-center">
<div className="text-2xl font-bold mb-4 bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">
🔮 사주포춘
</div>
<p className="text-gray-400 mb-6">
쟁승메이드가 제공하는 사주 서비스
</p>
<div className="text-sm text-gray-500">
<p>문의: bgg8988@gmail.com | <a href="https://jaengseung-made.com" target="_blank" rel="noopener noreferrer" className="hover:text-indigo-400">쟁승메이드</a></p>
<p className="mt-2">&copy; 2025 쟁승메이드. All rights reserved.</p>
</div>
</div>
</footer>
<Footer />
</div>
);
}