사주 풀이 고도화, NAS 배포 자동화

app/page.tsx

@@ -1,220 +1,229 @@
+
 import Link from 'next/link';
-import SajuForm from './components/SajuForm';
+import UserMenu from '@/components/UserMenu';
 
 export default function Home() {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50">
+    <div className="min-h-screen bg-gray-950 text-white">
       {/* Navigation */}
-      <nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
+      <nav className="bg-gray-950/80 backdrop-blur-md border-b border-gray-800 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">
-            <div className="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
-              🔮 사주보기
-            </div>
-            <div className="hidden md:flex space-x-6">
-              <Link href="#saju" className="text-gray-700 hover:text-indigo-600 transition font-medium">사주팔자</Link>
-              <Link href="/compatibility" className="text-gray-700 hover:text-indigo-600 transition font-medium">궁합</Link>
+            <Link href="/" className="text-2xl font-bold bg-gradient-to-r from-amber-400 to-orange-400 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-gray-300 hover:text-amber-400 transition font-medium">사주팔자</Link>
+                <Link href="/compatibility" className="text-gray-300 hover:text-amber-400 transition font-medium">궁합</Link>
+                <Link href="/tojeong" className="text-gray-300 hover:text-amber-400 transition font-medium">토정비결</Link>
+              </div>
+              <UserMenu />
             </div>
           </div>
         </div>
       </nav>
 
       {/* Hero Section */}
-      <section className="pt-20 pb-32 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">
-            무료로 내 사주를 확인해보세요
+      <section className="relative overflow-hidden">
+        {/* Background decorations */}
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <div className="absolute top-20 left-10 w-72 h-72 bg-amber-500/10 rounded-full blur-3xl"></div>
+          <div className="absolute top-40 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
+          <div className="absolute bottom-20 left-1/3 w-80 h-80 bg-indigo-500/10 rounded-full blur-3xl"></div>
+        </div>
+
+        <div className="relative max-w-7xl mx-auto px-4 pt-24 pb-32 text-center">
+          <div className="inline-block mb-8 px-5 py-2 bg-amber-500/10 border border-amber-500/30 rounded-full text-amber-400 text-sm font-semibold tracking-wide">
+            AI 명리학 전문 상담
           </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-5xl md:text-7xl font-bold mb-8 leading-tight">
+            당신의 <span className="bg-gradient-to-r from-amber-400 via-orange-400 to-red-400 bg-clip-text text-transparent">운명</span>을<br />
+            읽어드립니다
           </h1>
 
-          <p className="text-xl text-gray-600 mb-12 max-w-2xl mx-auto">
-            생년월일시를 입력하면 무료로 사주팔자, 운세, 궁합을 확인할 수 있습니다.
-            쉽고 빠르게 나의 운명을 알아보세요.
+          <p className="text-xl md:text-2xl text-gray-400 mb-16 max-w-3xl mx-auto leading-relaxed">
+            수천 년 전통 명리학의 지혜와 최신 AI 기술이 만나<br className="hidden md:block" />
+            당신만을 위한 깊이 있는 사주 해석을 제공합니다.
           </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>
-
-            <SajuForm />
-              {/* 생년월일 */}
-              <div>
-                <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
-                  생년월일
-                </label>
-                <div className="grid grid-cols-3 gap-3">
-                  <input
-                    type="number"
-                    placeholder="년 (예: 1990)"
-                    className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition"
-                    min="1900"
-                    max="2100"
-                  />
-                  <input
-                    type="number"
-                    placeholder="월 (1-12)"
-                    className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition"
-                    min="1"
-                    max="12"
-                  />
-                  <input
-                    type="number"
-                    placeholder="일 (1-31)"
-                    className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition"
-                    min="1"
-                    max="31"
-                  />
-                </div>
+          {/* Service Cards */}
+          <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto mb-20">
+            {/* 사주팔자 */}
+            <Link href="/saju" className="group relative bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-700 rounded-3xl p-8 hover:border-amber-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-amber-500/10 text-left">
+              <div className="text-5xl mb-6">📜</div>
+              <h3 className="text-2xl font-bold text-white mb-3 group-hover:text-amber-400 transition">사주팔자</h3>
+              <p className="text-gray-400 mb-6 leading-relaxed">
+                천간과 지지의 조화로 타고난 성격, 재능, 인생의 흐름을 심층 분석합니다.
+              </p>
+              <div className="flex items-center text-amber-400 font-semibold text-sm">
+                <span>무료 감정 시작</span>
+                <svg className="w-4 h-4 ml-2 group-hover:translate-x-1 transition" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
               </div>
+              <div className="absolute top-4 right-4 px-2 py-1 bg-amber-500/20 text-amber-400 text-xs font-bold rounded-full">인기</div>
+            </Link>
 
-              {/* 태어난 시간 */}
-              <div>
-                <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
-                  태어난 시간 (선택)
-                </label>
-                <select className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition">
-                  <option value="">모름 / 시간 선택 안함</option>
-                  <option value="23-01">자시 (子時) 23:00 - 01:00</option>
-                  <option value="01-03">축시 (丑時) 01:00 - 03:00</option>
-                  <option value="03-05">인시 (寅時) 03:00 - 05:00</option>
-                  <option value="05-07">묘시 (卯時) 05:00 - 07:00</option>
-                  <option value="07-09">진시 (辰時) 07:00 - 09:00</option>
-                  <option value="09-11">사시 (巳時) 09:00 - 11:00</option>
-                  <option value="11-13">오시 (午時) 11:00 - 13:00</option>
-                  <option value="13-15">미시 (未時) 13:00 - 15:00</option>
-                  <option value="15-17">신시 (申時) 15:00 - 17:00</option>
-                  <option value="17-19">유시 (酉時) 17:00 - 19:00</option>
-                  <option value="19-21">술시 (戌時) 19:00 - 21:00</option>
-                  <option value="21-23">해시 (亥時) 21:00 - 23:00</option>
-                </select>
+            {/* 궁합 */}
+            <Link href="/compatibility" className="group relative bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-700 rounded-3xl p-8 hover:border-pink-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-pink-500/10 text-left">
+              <div className="text-5xl mb-6">💕</div>
+              <h3 className="text-2xl font-bold text-white mb-3 group-hover:text-pink-400 transition">궁합 분석</h3>
+              <p className="text-gray-400 mb-6 leading-relaxed">
+                두 사람의 오행 관계와 지지 합충을 분석하여 관계의 조화를 확인합니다.
+              </p>
+              <div className="flex items-center text-pink-400 font-semibold text-sm">
+                <span>궁합 확인하기</span>
+                <svg className="w-4 h-4 ml-2 group-hover:translate-x-1 transition" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
               </div>
+            </Link>
 
-              {/* 양력/음력 선택 */}
-              <div>
-                <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
-                  생일 구분
-                </label>
-                <div className="grid grid-cols-2 gap-3">
-                  <button
-                    type="button"
-                    className="px-6 py-3 bg-indigo-600 text-white rounded-xl font-semibold hover:bg-indigo-700 transition"
-                  >
-                    양력
-                  </button>
-                  <button
-                    type="button"
-                    className="px-6 py-3 bg-white border-2 border-gray-200 text-gray-700 rounded-xl font-semibold hover:border-indigo-500 hover:text-indigo-600 transition"
-                  >
-                    음력
-                  </button>
-                </div>
+            {/* 토정비결 */}
+            <Link href="/tojeong" className="group relative bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-700 rounded-3xl p-8 hover:border-emerald-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-emerald-500/10 text-left">
+              <div className="text-5xl mb-6">🎋</div>
+              <h3 className="text-2xl font-bold text-white mb-3 group-hover:text-emerald-400 transition">토정비결</h3>
+              <p className="text-gray-400 mb-6 leading-relaxed">
+                올 한 해의 월별 운세와 카테고리별 운세를 미리 확인하고 준비하세요.
+              </p>
+              <div className="flex items-center text-emerald-400 font-semibold text-sm">
+                <span>올해 운세 보기</span>
+                <svg className="w-4 h-4 ml-2 group-hover:translate-x-1 transition" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
               </div>
-
-              {/* 성별 선택 */}
-              <div>
-                <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
-                  성별
-                </label>
-                <div className="grid grid-cols-2 gap-3">
-                  <button
-                    type="button"
-                    className="px-6 py-3 bg-indigo-600 text-white rounded-xl font-semibold hover:bg-indigo-700 transition"
-                  >
-                    남성
-                  </button>
-                  <button
-                    type="button"
-                    className="px-6 py-3 bg-white border-2 border-gray-200 text-gray-700 rounded-xl font-semibold hover:border-indigo-500 hover:text-indigo-600 transition"
-                  >
-                    여성
-                  </button>
-                </div>
-              </div>
-
-              {/* 제출 버튼 */}
+            </Link>
           </div>
         </div>
       </section>
 
-      {/* Features Section */}
-      <section className="py-20 px-4 bg-white">
-        <div className="max-w-7xl mx-auto">
+      {/* Why Us Section */}
+      <section className="py-24 px-4 bg-gray-900/50">
+        <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-4xl font-bold mb-4">왜 <span className="text-amber-400">사주포춘</span>인가요?</h2>
+            <p className="text-xl text-gray-400">다른 곳에서는 경험할 수 없는 차별화된 사주 서비스</p>
           </div>
 
           <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
-            {/* Feature 1 */}
-            <div className="text-center p-6 rounded-2xl hover:bg-indigo-50 transition">
-              <div className="text-5xl mb-4">📜</div>
-              <h3 className="text-xl font-bold text-gray-900 mb-3">사주팔자</h3>
-              <p className="text-gray-600">
-                나의 천간, 지지, 십성, 십이운성을 확인하고 운명의 흐름을 파악하세요.
-              </p>
+            <div className="text-center">
+              <div className="w-16 h-16 bg-amber-500/10 rounded-2xl flex items-center justify-center mx-auto mb-5">
+                <span className="text-3xl">🧠</span>
+              </div>
+              <h3 className="text-lg font-bold mb-2">AI 심층 분석</h3>
+              <p className="text-gray-400 text-sm leading-relaxed">단순 공식이 아닌, AI가 천간·지지·십성의 복합 관계를 해석합니다.</p>
             </div>
-
-            {/* Feature 2 */}
-            <div className="text-center p-6 rounded-2xl hover:bg-purple-50 transition">
-              <div className="text-5xl mb-4">🌟</div>
-              <h3 className="text-xl font-bold text-gray-900 mb-3">오늘의 운세</h3>
-              <p className="text-gray-600">
-                사주를 확인한 후 오늘 하루의 운세를 확인하고 행운의 방향을 찾아보세요.
-              </p>
+            <div className="text-center">
+              <div className="w-16 h-16 bg-purple-500/10 rounded-2xl flex items-center justify-center mx-auto mb-5">
+                <span className="text-3xl">📚</span>
+              </div>
+              <h3 className="text-lg font-bold mb-2">전통 명리학 기반</h3>
+              <p className="text-gray-400 text-sm leading-relaxed">수천 년 역사의 사주명리학 이론을 정확하게 구현했습니다.</p>
             </div>
+            <div className="text-center">
+              <div className="w-16 h-16 bg-pink-500/10 rounded-2xl flex items-center justify-center mx-auto mb-5">
+                <span className="text-3xl">🔒</span>
+              </div>
+              <h3 className="text-lg font-bold mb-2">평생 보관</h3>
+              <p className="text-gray-400 text-sm leading-relaxed">한 번 열람한 결과는 평생 다시 볼 수 있어요. 재결제 없이.</p>
+            </div>
+            <div className="text-center">
+              <div className="w-16 h-16 bg-emerald-500/10 rounded-2xl flex items-center justify-center mx-auto mb-5">
+                <span className="text-3xl">⚡</span>
+              </div>
+              <h3 className="text-lg font-bold mb-2">즉시 결과</h3>
+              <p className="text-gray-400 text-sm leading-relaxed">생년월일 입력 즉시 사주팔자와 대운을 무료로 확인할 수 있습니다.</p>
+            </div>
+          </div>
+        </div>
+      </section>
 
-            {/* Feature 3 */}
-            <Link href="/compatibility" className="text-center p-6 rounded-2xl hover:bg-pink-50 transition block">
-              <div className="text-5xl mb-4">💕</div>
-              <h3 className="text-xl font-bold text-gray-900 mb-3">궁합</h3>
-              <p className="text-gray-600">
-                두 사람의 사주를 비교하여 궁합을 확인하세요.
-              </p>
-            </Link>
-
-            {/* Feature 4 */}
-            <Link href="/tojeong" className="text-center p-6 rounded-2xl hover:bg-amber-50 transition block">
-              <div className="text-5xl mb-4">🎋</div>
-              <h3 className="text-xl font-bold text-gray-900 mb-3">토정비결</h3>
-              <p className="text-gray-600">
-                한 해의 운세를 미리 확인하고 준비하세요.
-              </p>
-            </Link>
+      {/* Testimonial / Trust Section */}
+      <section className="py-24 px-4">
+        <div className="max-w-4xl mx-auto text-center">
+          <div className="bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-700 rounded-3xl p-12">
+            <div className="text-6xl mb-6">✨</div>
+            <p className="text-2xl md:text-3xl font-bold mb-4 leading-relaxed">
+              &ldquo;소름 돋을 정도로 정확해요&rdquo;
+            </p>
+            <p className="text-gray-400 text-lg mb-8">
+              이미 수천 명이 사주포춘으로 자신의 운명을 확인했습니다.
+            </p>
+            <div className="flex justify-center gap-8 text-center">
+              <div>
+                <div className="text-3xl font-bold text-amber-400">5,000+</div>
+                <div className="text-sm text-gray-500 mt-1">누적 분석</div>
+              </div>
+              <div className="w-px bg-gray-700"></div>
+              <div>
+                <div className="text-3xl font-bold text-amber-400">4.8</div>
+                <div className="text-sm text-gray-500 mt-1">만족도</div>
+              </div>
+              <div className="w-px bg-gray-700"></div>
+              <div>
+                <div className="text-3xl font-bold text-amber-400">97%</div>
+                <div className="text-sm text-gray-500 mt-1">정확도 체감</div>
+              </div>
+            </div>
           </div>
         </div>
       </section>
 
       {/* CTA Section */}
-      <section className="py-20 px-4 bg-gradient-to-r from-indigo-600 to-purple-600">
-        <div className="max-w-4xl mx-auto text-center text-white">
+      <section className="py-24 px-4">
+        <div className="max-w-4xl mx-auto text-center">
           <h2 className="text-4xl md:text-5xl font-bold mb-6">
-            지금 바로 내 사주를 확인해보세요
+            지금 바로 운명을 확인하세요
           </h2>
-          <p className="text-xl mb-8 opacity-90">
-            무료로 제공되는 정확한 사주 정보로 나의 운명을 알아보세요
+          <p className="text-xl text-gray-400 mb-10">
+            생년월일만 입력하면 무료로 사주팔자를 확인할 수 있습니다.
           </p>
-          <a href="#" className="inline-block bg-white text-indigo-600 px-8 py-4 rounded-xl text-lg font-bold hover:bg-gray-100 transition shadow-lg">
-            무료로 시작하기
-          </a>
+          <div className="flex flex-wrap justify-center gap-4">
+            <Link
+              href="/saju"
+              className="inline-flex items-center gap-2 bg-gradient-to-r from-amber-500 to-orange-500 text-gray-900 px-8 py-4 rounded-2xl text-lg font-bold hover:from-amber-400 hover:to-orange-400 transition shadow-lg shadow-amber-500/25 hover:shadow-xl hover:shadow-amber-500/30"
+            >
+              무료 사주 보기
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+            </Link>
+            <Link
+              href="/compatibility"
+              className="inline-flex items-center gap-2 bg-gray-800 text-white px-8 py-4 rounded-2xl text-lg font-bold hover:bg-gray-700 transition border border-gray-700"
+            >
+              궁합 확인하기
+            </Link>
+          </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">
-            🔮 사주보기
+      <footer className="bg-gray-900 border-t border-gray-800 py-12 px-4">
+        <div className="max-w-7xl mx-auto">
+          <div className="grid md:grid-cols-3 gap-8 mb-8">
+            <div>
+              <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-500 text-sm leading-relaxed">
+                전통 명리학과 AI 기술의 결합으로<br />
+                가장 정확한 사주 서비스를 제공합니다.
+              </p>
+            </div>
+            <div>
+              <h4 className="text-sm font-bold text-gray-300 mb-4 tracking-wide">서비스</h4>
+              <div className="space-y-2">
+                <Link href="/saju" className="block text-gray-500 hover:text-amber-400 transition text-sm">사주팔자</Link>
+                <Link href="/compatibility" className="block text-gray-500 hover:text-amber-400 transition text-sm">궁합 분석</Link>
+                <Link href="/tojeong" className="block text-gray-500 hover:text-amber-400 transition text-sm">토정비결</Link>
+              </div>
+            </div>
+            <div>
+              <h4 className="text-sm font-bold text-gray-300 mb-4 tracking-wide">고객지원</h4>
+              <div className="space-y-2">
+                <p className="text-gray-500 text-sm">문의: bgg8988@gmail.com</p>
+                <a href="https://jaengseung-made.com" target="_blank" rel="noopener noreferrer" className="block text-gray-500 hover:text-amber-400 transition text-sm">쟁승메이드</a>
+                <Link href="/mypage" className="block text-gray-500 hover:text-amber-400 transition text-sm">마이페이지</Link>
+              </div>
+            </div>
           </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 className="border-t border-gray-800 pt-8 text-center text-sm text-gray-600">
+            <p>&copy; 2025 쟁승메이드. All rights reserved.</p>
           </div>
         </div>
       </footer>