웹 디자인 전면 개편

app/page.tsx

@@ -1,232 +1,361 @@
-
 import Link from 'next/link';
-import UserMenu from '@/components/UserMenu';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
 
 export default function Home() {
   return (
-    <div className="min-h-screen bg-gray-950 text-white">
-      {/* Navigation */}
-      <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">
-            <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>
+    <div className="min-h-screen bg-white">
+      <Header />
 
       {/* Hero Section */}
-      <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>
+      <section className="cosmic-pattern pt-32 pb-24 md:pt-40 md:pb-32">
+        <div className="container-custom">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            {/* 왼쪽 텍스트 */}
+            <div className="text-white space-y-8 fade-in-up">
+              <div className="inline-block px-4 py-2 bg-[#F3E7E3] rounded-full">
+                <span className="text-[#173658] text-sm font-bold">AI 명리학 전문 상담</span>
+              </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-4xl md:text-6xl font-bold leading-tight">
+                AI가 만난<br />
+                <span className="text-glow text-[#d4af37]">고대의 지혜</span>
+              </h1>
 
-          <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 md:text-2xl text-gray-400 mb-16 max-w-3xl mx-auto leading-relaxed">
-            수천 년 전통 명리학의 지혜와 최신 AI 기술이 만나<br className="hidden md:block" />
-            당신만을 위한 깊이 있는 사주 해석을 제공합니다.
-          </p>
-
-          {/* 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 className="text-xl md:text-2xl text-gray-200 leading-relaxed">
+                전통 역학과 AI 기술의 만남<br />
+                당신만을 위한 깊이 있는 사주 해석
               </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>
 
-            {/* 궁합 */}
-            <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 className="flex flex-wrap gap-4 pt-4">
+                <Link
+                  href="/saju"
+                  className="bg-[#F3E7E3] hover:bg-[#d4af37] text-[#173658] px-8 py-4 rounded-xl text-lg font-bold transition-all shadow-lg hover:shadow-xl hover:scale-105"
+                >
+                  운명 감정 시작하기
+                </Link>
+                <Link
+                  href="/compatibility"
+                  className="bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white px-8 py-4 rounded-xl text-lg font-bold transition-all border border-white/20"
+                >
+                  궁합 보기
+                </Link>
               </div>
-            </Link>
 
-            {/* 토정비결 */}
-            <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 className="flex flex-wrap gap-6 pt-8">
+                <div className="flex items-center space-x-2">
+                  <svg className="w-6 h-6 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                  </svg>
+                  <span className="text-white font-medium">98% 정확도</span>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <svg className="w-6 h-6 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
+                  </svg>
+                  <span className="text-white font-medium">안전한 보안</span>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <svg className="w-6 h-6 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
+                  </svg>
+                  <span className="text-white font-medium">5,000+ 이용자</span>
+                </div>
               </div>
-            </Link>
-          </div>
-        </div>
-      </section>
-
-      {/* 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 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">
-            <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>
-            <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 className="hidden lg:block">
+              <div className="relative">
+                <div className="glass-panel rounded-3xl p-8 float-animation">
+                  <div className="space-y-6">
+                    <div className="flex items-center space-x-3">
+                      <div className="w-12 h-12 bg-[#d4af37] rounded-full flex items-center justify-center">
+                        <span className="text-white text-xl font-bold">木</span>
+                      </div>
+                      <div>
+                        <p className="text-white font-bold">오행 균형 분석</p>
+                        <p className="text-gray-300 text-sm">정밀한 사주 계산</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-3">
+                      <div className="w-12 h-12 bg-[#1e426a] rounded-full flex items-center justify-center">
+                        <span className="text-white text-xl font-bold">AI</span>
+                      </div>
+                      <div>
+                        <p className="text-white font-bold">AI 심층 해석</p>
+                        <p className="text-gray-300 text-sm">개인 맞춤 분석</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-3">
+                      <div className="w-12 h-12 bg-[#F3E7E3] rounded-full flex items-center justify-center">
+                        <span className="text-[#173658] text-xl font-bold">⚡</span>
+                      </div>
+                      <div>
+                        <p className="text-white font-bold">즉시 결과</p>
+                        <p className="text-gray-300 text-sm">실시간 분석 제공</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </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>
 
-      {/* 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;
+      {/* 서비스 카드 섹션 */}
+      <section className="bg-[#F3E7E3] py-20">
+        <div className="container-custom">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold text-[#173658] mb-4">
+              프리미엄 사주 서비스
+            </h2>
+            <p className="text-lg text-[#5d6d7e]">
+              당신이 원하는 모든 운세를 한 곳에서
             </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="grid md:grid-cols-3 gap-8">
+            {/* 사주 분석 카드 */}
+            <Link href="/saju" className="glass-panel-light rounded-2xl p-8 card-hover">
+              <div className="text-center">
+                <div className="w-16 h-16 bg-[#122a45] rounded-2xl flex items-center justify-center mx-auto mb-6">
+                  <svg className="w-8 h-8 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>
+                <h3 className="text-2xl font-bold text-[#173658] mb-3">사주 분석</h3>
+                <p className="text-[#5d6d7e] mb-6 leading-relaxed">
+                  천간과 지지의 조화로 타고난 성격, 재능, 인생의 흐름을 심층 분석합니다
+                </p>
+                <div className="space-y-2 mb-6 text-sm">
+                  <div className="flex items-center justify-center space-x-2">
+                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                    <span className="text-[#173658]">기본 사주 분석 무료</span>
+                  </div>
+                  <div className="flex items-center justify-center space-x-2">
+                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                    <span className="text-[#173658]">AI 해석 10토큰</span>
+                  </div>
+                </div>
+                <div className="inline-flex items-center text-[#173658] font-bold">
+                  <span>시작하기</span>
+                  <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                  </svg>
+                </div>
+                <div className="absolute top-4 right-4 px-3 py-1 bg-[#d4af37] text-white text-xs font-bold rounded-full">
+                  인기
+                </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>
+            </Link>
+
+            {/* 궁합 카드 */}
+            <Link href="/compatibility" className="glass-panel-light rounded-2xl p-8 card-hover">
+              <div className="text-center">
+                <div className="w-16 h-16 bg-[#122a45] rounded-2xl flex items-center justify-center mx-auto mb-6">
+                  <svg className="w-8 h-8 text-[#d4af37]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+                  </svg>
+                </div>
+                <h3 className="text-2xl font-bold text-[#173658] mb-3">궁합 분석</h3>
+                <p className="text-[#5d6d7e] mb-6 leading-relaxed">
+                  두 사람의 오행 관계와 지지 합충을 분석하여 관계의 조화를 확인합니다
+                </p>
+                <div className="space-y-2 mb-6 text-sm">
+                  <div className="flex items-center justify-center space-x-2">
+                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                    <span className="text-[#173658]">종합 궁합 점수</span>
+                  </div>
+                  <div className="flex items-center justify-center space-x-2">
+                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                    <span className="text-[#173658]">15토큰</span>
+                  </div>
+                </div>
+                <div className="inline-flex items-center text-[#173658] font-bold">
+                  <span>궁합 확인하기</span>
+                  <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                  </svg>
+                </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>
+            </Link>
+
+            {/* 토정비결 카드 */}
+            <Link href="/tojeong" className="glass-panel-light rounded-2xl p-8 card-hover">
+              <div className="text-center">
+                <div className="w-16 h-16 bg-[#122a45] rounded-2xl flex items-center justify-center mx-auto mb-6">
+                  <svg className="w-8 h-8 text-[#d4af37]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                  </svg>
+                </div>
+                <h3 className="text-2xl font-bold text-[#173658] mb-3">토정비결</h3>
+                <p className="text-[#5d6d7e] mb-6 leading-relaxed">
+                  올 한 해의 월별 운세와 카테고리별 운세를 미리 확인하고 준비하세요
+                </p>
+                <div className="space-y-2 mb-6 text-sm">
+                  <div className="flex items-center justify-center space-x-2">
+                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                    <span className="text-[#173658]">월별 운세 12개월</span>
+                  </div>
+                  <div className="flex items-center justify-center space-x-2">
+                    <svg className="w-4 h-4 text-[#d4af37]" fill="currentColor" viewBox="0 0 20 20">
+                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                    </svg>
+                    <span className="text-[#173658]">5토큰</span>
+                  </div>
+                </div>
+                <div className="inline-flex items-center text-[#173658] font-bold">
+                  <span>올해 운세 보기</span>
+                  <svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                  </svg>
+                </div>
               </div>
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* 특징 배너 */}
+      <section className="bg-white py-20">
+        <div className="container-custom">
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+            <div className="text-center">
+              <div className="w-16 h-16 bg-[#F3E7E3] rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <svg className="w-8 h-8 text-[#173658]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                </svg>
+              </div>
+              <h3 className="text-lg font-bold text-[#173658] mb-2">전통 역학</h3>
+              <p className="text-sm text-[#5d6d7e]">수천 년 역사의<br />정통 사주명리학</p>
+            </div>
+
+            <div className="text-center">
+              <div className="w-16 h-16 bg-[#F3E7E3] rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <svg className="w-8 h-8 text-[#173658]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                </svg>
+              </div>
+              <h3 className="text-lg font-bold text-[#173658] mb-2">AI 엔진</h3>
+              <p className="text-sm text-[#5d6d7e]">최첨단 AI가<br />심층 해석</p>
+            </div>
+
+            <div className="text-center">
+              <div className="w-16 h-16 bg-[#F3E7E3] rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <svg className="w-8 h-8 text-[#173658]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+              </div>
+              <h3 className="text-lg font-bold text-[#173658] mb-2">즉시 결과</h3>
+              <p className="text-sm text-[#5d6d7e]">입력 즉시<br />실시간 분석</p>
+            </div>
+
+            <div className="text-center">
+              <div className="w-16 h-16 bg-[#F3E7E3] rounded-2xl flex items-center justify-center mx-auto mb-4">
+                <svg className="w-8 h-8 text-[#173658]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
+                </svg>
+              </div>
+              <h3 className="text-lg font-bold text-[#173658] mb-2">쉬운 해석</h3>
+              <p className="text-sm text-[#5d6d7e]">누구나 이해하기<br />쉬운 설명</p>
             </div>
           </div>
         </div>
       </section>
 
-      {/* CTA Section */}
-      <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 text-gray-400 mb-10">
-            생년월일만 입력하면 무료로 사주팔자를 확인할 수 있습니다.
-          </p>
-          <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 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 />
-                가장 정확한 사주 서비스를 제공합니다.
+      {/* CTA 섹션 */}
+      <section className="bg-[#173658] py-24 pattern-overlay">
+        <div className="container-custom">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div className="text-white space-y-6">
+              <h2 className="text-4xl md:text-5xl font-bold leading-tight">
+                우주의 비밀을<br />
+                <span className="text-[#d4af37]">풀어보세요</span>
+              </h2>
+              <p className="text-xl text-gray-200 leading-relaxed">
+                당신의 생년월일에 숨겨진 운명의 코드.<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 className="flex flex-wrap gap-4 pt-4">
+                <Link
+                  href="/saju"
+                  className="bg-[#d4af37] hover:bg-[#F3E7E3] text-[#173658] px-8 py-4 rounded-xl text-lg font-bold transition-all shadow-lg hover:shadow-xl inline-flex items-center space-x-2"
+                >
+                  <span>무료로 시작하기</span>
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                  </svg>
+                </Link>
+              </div>
+
+              {/* 통계 */}
+              <div className="grid grid-cols-3 gap-6 pt-8">
+                <div>
+                  <div className="text-3xl font-bold text-[#d4af37]">5,000+</div>
+                  <div className="text-sm text-gray-300 mt-1">누적 분석</div>
+                </div>
+                <div>
+                  <div className="text-3xl font-bold text-[#d4af37]">98%</div>
+                  <div className="text-sm text-gray-300 mt-1">정확도</div>
+                </div>
+                <div>
+                  <div className="text-3xl font-bold text-[#d4af37]">4.8</div>
+                  <div className="text-sm text-gray-300 mt-1">만족도</div>
+                </div>
               </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 className="hidden lg:block">
+              <div className="glass-panel rounded-3xl p-8 space-y-4">
+                <div className="bg-[#F3E7E3] rounded-2xl p-6">
+                  <h4 className="text-[#173658] font-bold text-lg mb-2">오늘의 인사이트</h4>
+                  <p className="text-[#5d6d7e] text-sm leading-relaxed">
+                    "목(木) 기운이 강한 당신, 오늘은 새로운 시작을 위한 최적의 날입니다."
+                  </p>
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="bg-white/10 rounded-xl p-4 text-center">
+                    <div className="text-2xl mb-2">🌟</div>
+                    <div className="text-white text-sm font-bold">종합운</div>
+                    <div className="text-[#d4af37] text-xs">85점</div>
+                  </div>
+                  <div className="bg-white/10 rounded-xl p-4 text-center">
+                    <div className="text-2xl mb-2">💰</div>
+                    <div className="text-white text-sm font-bold">재물운</div>
+                    <div className="text-[#d4af37] text-xs">92점</div>
+                  </div>
+                  <div className="bg-white/10 rounded-xl p-4 text-center">
+                    <div className="text-2xl mb-2">❤️</div>
+                    <div className="text-white text-sm font-bold">애정운</div>
+                    <div className="text-[#d4af37] text-xs">78점</div>
+                  </div>
+                  <div className="bg-white/10 rounded-xl p-4 text-center">
+                    <div className="text-2xl mb-2">💼</div>
+                    <div className="text-white text-sm font-bold">직업운</div>
+                    <div className="text-[#d4af37] text-xs">88점</div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-          <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>
+      </section>
+
+      <Footer />
     </div>
   );
 }