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

69
app/tojeong/page.tsx
View File

@@ -1,38 +1,25 @@
import Link from 'next/link';
import TojeongForm from '../components/TojeongForm';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
export default function TojeongPage() {
return (
<div className="min-h-screen bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-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-amber-600 to-orange-600 bg-clip-text text-transparent">
🔮 사주보기
</Link>
<Link
href="/"
className="text-gray-700 hover:text-amber-600 transition font-medium"
>
처음으로
</Link>
</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 mb-12">
<div className="inline-block mb-6 px-6 py-2 bg-white/50 backdrop-blur-sm rounded-full text-amber-700 font-semibold border border-amber-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-amber-600 to-orange-600 bg-clip-text text-transparent">토정비결</span>
<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-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>
@@ -48,31 +35,31 @@ export default function TojeongPage() {
<section className="py-20 px-4 bg-white">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-4xl font-bold text-gray-900 mb-4">토정비결이란?</h2>
<p className="text-xl text-gray-600">조선시대부터 전해 내려오는 전통 운세</p>
<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 rounded-2xl hover:bg-amber-50 transition">
<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-gray-900 mb-3">한 해 운세</h3>
<p className="text-gray-600">
<h3 className="text-xl font-bold text-[#173658] mb-3">한 해 운세</h3>
<p className="text-[#5d6d7e]">
새해부터 연말까지 전체적인 운의 흐름을 미리 파악할 수 있습니다.
</p>
</div>
<div className="text-center p-6 rounded-2xl hover:bg-orange-50 transition">
<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-gray-900 mb-3">월별 운세</h3>
<p className="text-gray-600">
<h3 className="text-xl font-bold text-[#173658] mb-3">월별 운세</h3>
<p className="text-[#5d6d7e]">
12개월 각각의 운세를 확인하여 중요한 결정을 내리는 데 참고하세요.
</p>
</div>
<div className="text-center p-6 rounded-2xl hover:bg-yellow-50 transition">
<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-gray-900 mb-3">분야별 운세</h3>
<p className="text-gray-600">
<h3 className="text-xl font-bold text-[#173658] mb-3">분야별 운세</h3>
<p className="text-[#5d6d7e]">
재물, 건강, 관운 등 분야별로 세분화된 운세 정보를 제공합니다.
</p>
</div>
@@ -80,21 +67,7 @@ export default function TojeongPage() {
</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-amber-400 to-orange-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-amber-400">쟁승메이드</a></p>
<p className="mt-2">&copy; 2025 쟁승메이드. All rights reserved.</p>
</div>
</div>
</footer>
<Footer />
</div>
);
}