Update index.html

index.html

@@ -78,6 +78,62 @@
             color: white;
         }
         
+        .nav-right {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
+        
+        /* Community Badges */
+        .community-badges {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+        }
+        
+        .community-badge {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            background: rgba(255, 255, 255, 0.15);
+            padding: 8px 16px;
+            border-radius: 25px;
+            text-decoration: none;
+            color: white;
+            font-size: 14px;
+            font-weight: 500;
+            transition: all 0.3s;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        
+        .community-badge:hover {
+            background: rgba(255, 255, 255, 0.25);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+        }
+        
+        .badge-icon {
+            font-size: 18px;
+        }
+        
+        .discord-badge {
+            background: rgba(88, 101, 242, 0.3);
+            border-color: rgba(88, 101, 242, 0.5);
+        }
+        
+        .discord-badge:hover {
+            background: rgba(88, 101, 242, 0.5);
+        }
+        
+        .kakao-badge {
+            background: rgba(254, 229, 0, 0.3);
+            border-color: rgba(254, 229, 0, 0.5);
+        }
+        
+        .kakao-badge:hover {
+            background: rgba(254, 229, 0, 0.5);
+        }
+        
         .powered-by {
             color: rgba(255, 255, 255, 0.7);
             font-size: 13px;
@@ -428,6 +484,38 @@
         }
         
         /* Responsive */
+        @media (max-width: 1200px) {
+            .nav-container {
+                padding: 15px 20px;
+            }
+            
+            .nav-left {
+                gap: 20px;
+            }
+            
+            .tabs {
+                gap: 15px;
+            }
+            
+            .tab {
+                font-size: 14px;
+                padding: 6px 12px;
+            }
+            
+            .community-badges {
+                gap: 8px;
+            }
+            
+            .community-badge {
+                padding: 6px 12px;
+                font-size: 13px;
+            }
+            
+            .badge-icon {
+                font-size: 16px;
+            }
+        }
+        
         @media (max-width: 768px) {
             .nav-container {
                 padding: 15px 20px;
@@ -453,6 +541,26 @@
                 padding: 6px 12px;
             }
             
+            .nav-right {
+                width: 100%;
+                flex-direction: column;
+                gap: 10px;
+            }
+            
+            .community-badges {
+                width: 100%;
+                justify-content: center;
+            }
+            
+            .community-badge {
+                font-size: 12px;
+                padding: 6px 10px;
+            }
+            
+            .badge-icon {
+                font-size: 14px;
+            }
+            
             .powered-by {
                 font-size: 11px;
             }
@@ -475,7 +583,7 @@
             }
             
             .container {
-                padding-top: 180px;
+                padding-top: 220px;
             }
             
             .news-container {
@@ -497,7 +605,19 @@
                 <a href="#best" class="tab" data-tab="best">베스트 AI</a>
             </div>
         </div>
-        <div class="powered-by">Powered by 비드래프트</div>
+        <div class="nav-right">
+            <div class="community-badges">
+                <a href="https://discord.gg/openfreeai" target="_blank" class="community-badge discord-badge">
+                    <span class="badge-icon">💬</span>
+                    <span>디스코드</span>
+                </a>
+                <a href="http://pf.kakao.com/_MxmLFn" target="_blank" class="community-badge kakao-badge">
+                    <span class="badge-icon">💛</span>
+                    <span>카카오 채널</span>
+                </a>
+            </div>
+            <div class="powered-by">Powered by 비드래프트</div>
+        </div>
     </nav>
     
     <!-- Animated particles background -->