<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Bundle Comparison - SmartSolTech</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
    
    <style>
        body {
            font-family: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="min-h-screen py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Header -->
            <div class="text-center mb-12">
                <h1 class="text-4xl font-bold text-gray-900 mb-4">
                    SmartSolTech Admin Bundle 비교
                </h1>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                    우리 웹사이트에 가장 적합한 관리자 패널을 선택해보세요. 각 솔루션의 기능과 디자인을 비교해보실 수 있습니다.
                </p>
            </div>

            <!-- Admin Bundle Comparison -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
                <!-- AdminLTE Card -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <div class="p-6 bg-gradient-to-r from-blue-500 to-purple-600 text-white">
                        <h2 class="text-2xl font-bold mb-2">AdminLTE 3</h2>
                        <p class="text-blue-100">무료 오픈소스 관리자 템플릿</p>
                    </div>
                    
                    <div class="p-6">
                        <div class="space-y-4 mb-6">
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3"></i>
                                <span>완전 무료 오픈소스</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3"></i>
                                <span>한국어 지원 우수</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3"></i>
                                <span>풍부한 컴포넌트</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3"></i>
                                <span>jQuery 기반 (안정성)</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3"></i>
                                <span>대규모 커뮤니티</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-star text-yellow-500 mr-3"></i>
                                <span>Bootstrap 4/5 호환</span>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <h4 class="font-semibold mb-3">주요 기능:</h4>
                            <ul class="text-sm text-gray-600 space-y-1">
                                <li>• 반응형 대시보드</li>
                                <li>• 다양한 차트와 위젯</li>
                                <li>• 카드형 레이아웃</li>
                                <li>• 사이드바 접기/펼치기</li>
                                <li>• 어두운/밝은 테마</li>
                            </ul>
                        </div>
                        
                        <div class="flex space-x-3">
                            <a href="/demo/demo-adminlte" target="_blank" 
                               class="flex-1 bg-blue-600 text-white text-center py-3 rounded-lg hover:bg-blue-700 transition-colors">
                                <i class="fas fa-eye mr-2"></i>
                                데모 보기
                            </a>
                            <a href="https://adminlte.io/" target="_blank" 
                               class="flex-1 bg-gray-200 text-gray-700 text-center py-3 rounded-lg hover:bg-gray-300 transition-colors">
                                <i class="fas fa-external-link-alt mr-2"></i>
                                공식 사이트
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Tabler Card -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                    <div class="p-6 bg-gradient-to-r from-purple-500 to-pink-600 text-white">
                        <h2 class="text-2xl font-bold mb-2">Tabler</h2>
                        <p class="text-purple-100">모던 관리자 대시보드 템플릿</p>
                    </div>
                    
                    <div class="p-6">
                        <div class="space-y-4 mb-6">
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3"></i>
                                <span>모던한 디자인</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3"></i>
                                <span>빠른 성능</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-3"></i>
                                <span>SVG 아이콘 시스템</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-star text-yellow-500 mr-3"></i>
                                <span>Bootstrap 5 기반</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-star text-yellow-500 mr-3"></i>
                                <span>TypeScript 지원</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-star text-yellow-500 mr-3"></i>
                                <span>최신 웹 표준</span>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <h4 class="font-semibold mb-3">주요 기능:</h4>
                            <ul class="text-sm text-gray-600 space-y-1">
                                <li>• 깔끔한 미니멀 디자인</li>
                                <li>• 3000+ 무료 SVG 아이콘</li>
                                <li>• 드롭다운 메뉴</li>
                                <li>• 모바일 최적화</li>
                                <li>• 빠른 로딩 속도</li>
                            </ul>
                        </div>
                        
                        <div class="flex space-x-3">
                            <a href="/demo/demo-tabler" target="_blank" 
                               class="flex-1 bg-purple-600 text-white text-center py-3 rounded-lg hover:bg-purple-700 transition-colors">
                                <i class="fas fa-eye mr-2"></i>
                                데모 보기
                            </a>
                            <a href="https://tabler.io/" target="_blank" 
                               class="flex-1 bg-gray-200 text-gray-700 text-center py-3 rounded-lg hover:bg-gray-300 transition-colors">
                                <i class="fas fa-external-link-alt mr-2"></i>
                                공식 사이트
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Comparison Table -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-12">
                <div class="p-6 bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                    <h3 class="text-xl font-bold">상세 비교표</h3>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">기능</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">AdminLTE</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tabler</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">가격</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">완전 무료</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">무료 + Pro 버전</td>
                            </tr>
                            <tr class="bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">한국어 지원</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">우수</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-600">보통</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">디자인</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600">클래식</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-purple-600">모던</td>
                            </tr>
                            <tr class="bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">컴포넌트 수</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">매우 많음</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600">적당함</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">성능</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600">양호</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">우수</td>
                            </tr>
                            <tr class="bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">커뮤니티</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">대규모</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600">성장중</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">학습 곡선</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">쉬움</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-600">보통</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Recommendation -->
            <div class="bg-gradient-to-r from-green-400 to-blue-500 rounded-xl p-8 text-white">
                <div class="text-center">
                    <h3 class="text-2xl font-bold mb-4">
                        <i class="fas fa-thumbs-up mr-2"></i>
                        추천 결과
                    </h3>
                    <p class="text-lg mb-6">
                        SmartSolTech 웹사이트의 특성을 고려한 맞춤 추천
                    </p>
                    
                    <div class="bg-white bg-opacity-20 rounded-lg p-6 max-w-2xl mx-auto">
                        <h4 class="text-xl font-semibold mb-3">
                            🏆 AdminLTE 3 추천
                        </h4>
                        <p class="text-left">
                            <strong>추천 이유:</strong><br>
                            • 한국 고객을 위한 완벽한 한국어 지원<br>
                            • 무료로 모든 기능 사용 가능<br>
                            • 기존 시스템과의 호환성 우수<br>
                            • 풍부한 문서화와 커뮤니티 지원<br>
                            • 기업용 웹사이트에 적합한 안정적인 디자인
                        </p>
                    </div>
                </div>
            </div>

            <!-- Back to Main Site -->
            <div class="text-center mt-12">
                <a href="/" class="inline-flex items-center px-6 py-3 bg-gray-800 text-white rounded-lg hover:bg-gray-900 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>
                    메인 사이트로 돌아가기
                </a>
            </div>
        </div>
    </div>
</body>
</html>