@armoyu/ui 1.0.0

package/src/components/modules/chat/ChatList.tsx

@@ -0,0 +1,179 @@
+import { useChat } from '../../../context/ChatContext';
+import { useSocket } from '../../../context/SocketContext';
+import { ChatNotes } from './ChatNotes';
+import { useState } from 'react';
+import { Chat } from '@armoyu/core';
+
+import { userList } from '../../../lib/constants/seedData';
+import { useAuth } from '../../../context/AuthContext';
+
+export function ChatList({ contacts, activeId, onSelect }: { contacts: Chat[], activeId: string, onSelect: (id: string) => void }) {
+  const { user } = useAuth();
+  const { closeChat } = useChat();
+  const { isConnected } = useSocket();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeFilter, setActiveFilter] = useState<'all' | 'unread' | 'favorites' | 'groups'>('all');
+
+  const filteredActiveContacts = contacts
+    .filter(c => {
+      // 1. Search Query Filter
+      const matchesSearch = c.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                          (c.lastMessage?.content || '').toLowerCase().includes(searchQuery.toLowerCase());
+      if (!matchesSearch) return false;
+
+      // 2. Category Filter
+      if (activeFilter === 'unread') return c.unreadCount > 0;
+      if (activeFilter === 'favorites') return c.isFavorite;
+      if (activeFilter === 'groups') return c.isGroup;
+      
+      return true; // 'all'
+    })
+    .sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0));
+
+  // 3. New Contact Search (Only when searching)
+  const additionalContacts = searchQuery.length >= 2 
+    ? userList.filter((u: any) => {
+        const matchesSearch = u.displayName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                           u.username.toLowerCase().includes(searchQuery.toLowerCase());
+        const isNotSelf = u.username !== user?.username;
+        const notInContacts = !contacts.some(c => c.id === u.username);
+        return matchesSearch && isNotSelf && notInContacts;
+      }).slice(0, 10)
+    : [];
+
+  return (
+    <div className="w-full h-full flex flex-col bg-armoyu-bg border-r border-gray-200 dark:border-white/5">
+      {/* Arama ve Başlık */}
+      <div className="p-4 md:p-5 border-b border-gray-200 dark:border-white/5">
+        <div className="flex justify-between items-center">
+          <div className="flex items-center gap-2">
+            <h2 className="text-xl font-bold text-armoyu-text tracking-tight flex items-center gap-2">
+              Sohbetler
+            </h2>
+            <div className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5">
+              <div className={`w-1.5 h-1.5 rounded-full ${isConnected ? 'bg-emerald-500 shadow-[0_0_5px_rgba(16,185,129,0.8)]' : 'bg-red-500'} animate-pulse`} />
+              <span className="text-[10px] font-black text-armoyu-text-muted uppercase tracking-tighter">{isConnected ? 'Sockete Bağlı' : 'Bağlanıyor...'}</span>
+            </div>
+          </div>
+          <button onClick={closeChat} className="p-2 -mr-2 text-armoyu-text-muted hover:text-red-500 hover:bg-red-500/10 transition-colors rounded-full" title="Sohbeti Kapat">
+            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </button>
+        </div>
+        <div className="relative mt-4">
+           <svg xmlns="http://www.w3.org/2000/svg" className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+           <input 
+             type="text" 
+             placeholder="Kişi ara..." 
+             value={searchQuery}
+             onChange={(e) => setSearchQuery(e.target.value)}
+             className="w-full bg-white/5 dark:bg-black/20 border border-black/10 dark:border-white/10 rounded-xl pl-10 pr-4 py-2.5 text-sm text-slate-900 dark:text-white placeholder-gray-500 hover:border-black/20 dark:hover:border-white/20 focus:outline-none focus:border-blue-500 transition-all"
+           />
+        </div>
+      </div>
+
+      {/* Instagram Stil Notlar Kısmı */}
+      <ChatNotes />
+
+      {/* Kategori Filtreleri */}
+      <div className="px-4 pb-4 flex gap-2 overflow-x-auto no-scrollbar shrink-0">
+        {[
+          { id: 'all', label: 'Tümü' },
+          { id: 'unread', label: 'Okunmamış' },
+          { id: 'favorites', label: 'Favoriler' },
+          { id: 'groups', label: 'Gruplar' }
+        ].map((filter) => (
+          <button
+            key={filter.id}
+            onClick={() => setActiveFilter(filter.id as any)}
+            className={`px-4 py-2 rounded-xl text-xs font-black transition-all whitespace-nowrap border ${
+              activeFilter === filter.id
+                ? 'bg-blue-500 text-white border-blue-500 shadow-md shadow-blue-500/20 scale-105'
+                : 'bg-black/5 dark:bg-white/5 text-armoyu-text-muted border-transparent hover:bg-black/10 dark:hover:bg-white/10'
+            }`}
+          >
+            {filter.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Kullanıcı Listesi */}
+      <div className="flex-1 overflow-y-auto no-scrollbar p-3 space-y-1.5">
+        {/* Active Conversations Container */}
+        <div className="space-y-1.5">
+           {searchQuery.length > 0 && filteredActiveContacts.length > 0 && (
+             <div className="px-3 py-1 text-[10px] font-black text-armoyu-text-muted uppercase tracking-[0.2em] opacity-50">Sohbet Geçmişi</div>
+           )}
+           {filteredActiveContacts.map(c => (
+             <button 
+               key={c.id}
+               onClick={() => onSelect(c.id)}
+               className={`w-full flex items-center gap-4 p-3 rounded-2xl transition-all cursor-pointer text-left ${
+                 activeId === c.id 
+                   ? 'bg-blue-500/10 dark:bg-blue-500/20 border border-blue-500/20 shadow-inner' 
+                   : 'hover:bg-black/5 dark:hover:bg-white/5 border border-transparent'
+               }`}
+             >
+               {/* Avatar Durumu */}
+               <div className="relative shrink-0">
+                 <img src={c.avatar} alt={c.name} className="w-12 h-12 rounded-full object-cover border border-white/10 shadow-sm" />
+                 {c.isOnline && (
+                   <div className="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-green-500 rounded-full border-2 border-white dark:border-[#0a0a0e] shadow-sm" />
+                 )}
+               </div>
+
+               {/* Kişi Bilgisi */}
+               <div className="flex-1 overflow-hidden">
+                 <div className="flex justify-between items-center mb-1">
+                   <span className="font-black text-slate-900 dark:text-gray-200 text-sm truncate max-w-[130px]">{c.name}</span>
+                   <span className="text-xs text-gray-500 font-black">{c.time}</span>
+                 </div>
+                 <div className="flex justify-between items-center">
+                   <span className={`text-xs truncate max-w-[120px] font-bold ${c.unreadCount > 0 ? 'text-slate-950 dark:text-white' : 'text-slate-500'}`}>
+                     {c.lastMessage?.content || 'Mesaj yok'}
+                   </span>
+                   {c.unreadCount > 0 && (
+                     <span className="bg-blue-500 text-white text-[10px] font-black px-1.5 py-0.5 rounded-md leading-none shadow-md animate-in zoom-in duration-300">
+                       {c.unreadCount > 9 ? '9+' : c.unreadCount}
+                     </span>
+                   )}
+                 </div>
+               </div>
+             </button>
+           ))}
+        </div>
+
+        {/* New Contact Search Results */}
+        {additionalContacts.length > 0 && (
+          <div className="space-y-1.5 mt-6 animate-in fade-in slide-in-from-top-2 duration-500">
+             <div className="px-3 py-1 text-[10px] font-black text-blue-500 uppercase tracking-[0.2em]">Yeni Sohbet Başlat</div>
+             {additionalContacts.map((u: any) => (
+               <button 
+                 key={u.username}
+                 onClick={() => onSelect(u.username)}
+                 className="w-full flex items-center gap-4 p-3 rounded-2xl hover:bg-white/5 border border-transparent transition-all group"
+               >
+                 <div className="relative shrink-0">
+                   <img src={u.avatar} alt={u.displayName} className="w-12 h-12 rounded-full object-cover border border-white/10 shadow-sm opacity-60 group-hover:opacity-100 transition-opacity" />
+                 </div>
+                 <div className="flex-1 min-w-0">
+                    <div className="font-black text-slate-900 dark:text-gray-200 text-sm truncate">{u.displayName}</div>
+                    <div className="text-[10px] font-bold text-armoyu-text-muted uppercase tracking-tighter">@{u.username}</div>
+                 </div>
+                 <div className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500 scale-0 group-hover:scale-100 transition-all duration-300">
+                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+                 </div>
+               </button>
+             ))}
+          </div>
+        )}
+
+        {searchQuery.length > 0 && filteredActiveContacts.length === 0 && additionalContacts.length === 0 && (
+          <div className="py-12 text-center">
+             <div className="text-armoyu-text-muted text-sm font-bold opacity-30">Sonuç bulunamadı</div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+

package/src/components/modules/chat/ChatMessage.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+export interface ChatMessageProps {
+  id: string;
+  sender: {
+    name: string;
+    avatar: string;
+    isSelf: boolean;
+  };
+  content: string;
+  timestamp: string;
+}
+
+export function ChatMessage({ sender, content, timestamp }: ChatMessageProps) {
+  return (
+    <div className={`flex w-full ${sender.isSelf ? 'justify-end' : 'justify-start'} mb-4`}>
+      <div className={`flex gap-3 items-end max-w-[85%] md:max-w-[70%] ${sender.isSelf ? 'flex-row-reverse' : 'flex-row'}`}>
+        
+        {/* Avatar */}
+        <img 
+          src={sender.avatar} 
+          alt={sender.name} 
+          className="w-8 h-8 rounded-full border border-white/10 shadow-sm shrink-0"
+        />
+        
+        {/* Balon & İsim */}
+        <div className={`flex flex-col ${sender.isSelf ? 'items-end' : 'items-start'} gap-1.5`}>
+          <span className="text-xs text-gray-500 font-bold tracking-wide dark:text-gray-400">
+            {sender.name} <span className="opacity-50 mx-1">•</span> {timestamp}
+          </span>
+          <div className={`p-3.5 rounded-2xl text-sm shadow-lg leading-relaxed font-medium ${
+            sender.isSelf 
+              ? 'bg-gradient-to-br from-blue-600 to-blue-500 text-white rounded-br-sm shadow-[0_4px_15px_rgba(37,99,235,0.3)]' 
+              : 'bg-black/5 dark:bg-[#1a1a24] text-armoyu-text rounded-bl-sm border border-black/5 dark:border-white/5'
+          }`}>
+            {content}
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+}

package/src/components/modules/chat/ChatNotes.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useAuth } from '../../../context/AuthContext';
+import { MOCK_NOTES } from '../../../lib/constants/seedData';
+import { Note } from '@armoyu/core';
+
+export function ChatNotes() {
+  return (
+    <div className="w-full px-4 py-6 border-b border-black/5 dark:border-white/5">
+      <div className="flex gap-4 overflow-x-auto no-scrollbar pb-1 px-1">
+        {MOCK_NOTES.map((note: any) => (
+          <NoteItem key={note.id} note={note} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function NoteItem({ note }: { note: Note }) {
+  return (
+    <div className="flex flex-col items-center shrink-0 cursor-pointer group relative">
+      <div className="relative mb-3 flex flex-col items-center">
+
+        {/* Thought Bubble Box */}
+        <div className={`relative px-3 py-1.5 rounded-2xl text-[10px] font-bold max-w-[85px] transition-all group-hover:-translate-y-1 shadow-sm border border-black/5 dark:border-white/10 ${note.isMe
+            ? 'bg-white dark:bg-white/10 text-armoyu-text-muted italic'
+            : 'bg-white dark:bg-white/20 text-armoyu-text animate-in zoom-in duration-500'
+          }`}>
+          <p className="truncate line-clamp-2 text-center leading-tight">
+            {note.note}
+          </p>
+
+          {/* Bubble Tail (Little Triangle) */}
+          <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 rotate-45 border-r border-b border-black/5 dark:border-white/10 bg-inherit" />
+        </div>
+
+        {/* Avatar Area */}
+        <div className="mt-1 relative">
+          <img
+            src={note.user?.avatar}
+            alt={note.user?.username}
+            className="w-11 h-11 md:w-12 md:h-12 rounded-full border-2 border-white dark:border-white/10 shadow-sm"
+          />
+          {note.isMe && (
+            <div className="absolute -top-1 -right-1 w-4 h-4 bg-gray-200 dark:bg-zinc-800 rounded-full border-2 border-white dark:border-zinc-900 flex items-center justify-center text-[10px] font-bold text-gray-600 dark:text-gray-400">
+              +
+            </div>
+          )}
+        </div>
+      </div>
+
+      <span className={`text-[10px] text-armoyu-text-muted font-medium truncate w-14 text-center ${note.isMe ? 'italic' : ''}`}>
+        {note.isMe ? 'Hikayen' : note.user?.displayName || note.user?.username}
+      </span>
+    </div>
+  );
+}
+

package/src/components/modules/community/GroupHeader.tsx

@@ -0,0 +1,111 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Group } from '@armoyu/core';
+
+interface GroupHeaderProps {
+  group: Group;
+  isMember: boolean;
+  onJoin?: () => void;
+  onLeave?: () => void;
+  onReport?: () => void;
+}
+
+export function GroupHeader({ group, isMember, onJoin, onLeave, onReport }: GroupHeaderProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Close menu on click outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setIsMenuOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <div className="relative h-64 md:h-80 lg:h-96 rounded-[60px] overflow-hidden mb-12 shadow-2xl animate-in fade-in slide-in-from-top-4 duration-700">
+      {/* Banner Image */}
+      <img src={group.banner} className="w-full h-full object-cover" alt={group.name} />
+
+      {/* Premium Overlay Gradient */}
+      <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" />
+
+      {/* Header Content */}
+      <div className="absolute bottom-10 left-10 right-10 flex flex-col md:flex-row items-end justify-between gap-6">
+        <div className="flex items-center gap-6">
+          <div className="relative">
+            <img
+              src={group.logo}
+              className="w-24 h-24 md:w-32 md:h-32 rounded-[32px] border-4 border-armoyu-bg bg-white dark:bg-zinc-900 shadow-2xl object-cover"
+              alt="Logo"
+            />
+            <div className="absolute -bottom-2 -right-2 bg-blue-500 text-white p-2 rounded-xl border-4 border-armoyu-bg">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
+            </div>
+          </div>
+          <div className="mb-2 text-left">
+            <div className="flex items-center gap-3 mb-1">
+              <h1 className="text-3xl md:text-5xl font-black text-white uppercase tracking-tighter italic drop-shadow-lg">{group.name}</h1>
+              <span className="px-3 py-1 bg-blue-600 text-white text-[10px] font-black uppercase tracking-widest rounded-lg shadow-lg">{group.category}</span>
+            </div>
+            <p className="text-white/70 font-bold text-lg uppercase tracking-tight">@{group.shortName} &bull; {group.recruitment}</p>
+          </div>
+        </div>
+
+        <div className="flex gap-4 mb-2 relative" ref={menuRef}>
+          {!isMember && (
+            <button
+              onClick={onJoin}
+              className="px-10 py-4 bg-white text-blue-600 font-black text-xs uppercase tracking-[0.2em] rounded-2xl shadow-2xl hover:scale-105 active:scale-95 transition-all"
+            >
+              GRUBA KATIL
+            </button>
+          )}
+
+          <button
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+            className={`px-4 py-4 ${isMenuOpen ? 'bg-blue-600' : 'bg-white/10 backdrop-blur-md'} border border-white/20 text-white rounded-2xl hover:bg-white/20 transition-all group`}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className={`${isMenuOpen ? 'rotate-90' : 'group-hover:rotate-12'} transition-transform`}><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
+          </button>
+
+          {/* Dropdown Menu */}
+          {isMenuOpen && (
+            <div className="absolute bottom-full right-0 mb-4 w-56 glass-panel p-3 rounded-2xl border border-white/20 bg-black/80 backdrop-blur-xl shadow-2xl animate-in fade-in zoom-in-95 duration-200 z-50">
+              <div className="flex flex-col gap-1">
+                <button className="flex items-center gap-3 w-full p-3 rounded-xl hover:bg-white/10 text-white transition-all group text-left">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className="text-white/50 group-hover:text-white transition-colors"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" /><polyline points="16 6 12 2 8 6" /><line x1="12" y1="2" x2="12" y2="15" /></svg>
+                  <span className="text-[10px] font-black uppercase tracking-widest">Grubu Paylaş</span>
+                </button>
+
+                <button
+                  onClick={() => { onReport?.(); setIsMenuOpen(false); }}
+                  className="flex items-center gap-3 w-full p-3 rounded-xl hover:bg-red-500/10 text-red-500 transition-all group text-left"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className="text-red-500/50 group-hover:text-red-500 transition-colors"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" /></svg>
+                  <span className="text-[10px] font-black uppercase tracking-widest">Grubu Şikayet Et</span>
+                </button>
+
+                {isMember && (
+                  <>
+                    <div className="h-px bg-white/10 my-1 mx-2" />
+                    <button
+                      onClick={() => { onLeave?.(); setIsMenuOpen(false); }}
+                      className="flex items-center gap-3 w-full p-3 rounded-xl hover:bg-red-600 text-white transition-all group text-left bg-red-600/20"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className="text-white/70 group-hover:text-white transition-colors"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><polyline points="16 17 21 12 16 7" /><line x1="21" y1="12" x2="9" y2="12" /></svg>
+                      <span className="text-[10px] font-black uppercase tracking-widest">Gruptan Ayrıl</span>
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/src/components/modules/community/GroupMenu.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React from 'react';
+import { Group } from '@armoyu/core';
+import { User } from '@armoyu/core';
+import Link from 'next/link';
+
+interface GroupMenuProps {
+  group: Group;
+  user: User;
+  onLeave?: () => void;
+}
+
+export function GroupMenu({ group, user, onLeave }: GroupMenuProps) {
+  // Check if owner or moderator
+  const isOwner = group.owner?.username === user.username;
+  const isMod = group.moderators?.some(m => m.username === user.username);
+  const isAdmin = isOwner || isMod || user.role?.id === 'admin';
+
+  const menuItems = [
+    { id: 'management', label: 'GRUP YÖNETİMİ', icon: 'shield', color: 'text-blue-500', permission: isAdmin },
+    { id: 'members', label: 'ÜYE LİSTESİ', icon: 'users', color: 'text-armoyu-text' },
+    { id: 'events', label: 'GRUP ETKİNLİKLERİ', icon: 'calendar', color: 'text-armoyu-text' },
+    { id: 'settings', label: 'GRUP AYARLARI', icon: 'settings', color: 'text-armoyu-text', permission: isAdmin },
+  ];
+
+  return (
+    <div className="glass-panel p-8 rounded-[40px] border border-armoyu-card-border bg-armoyu-card-bg relative overflow-hidden">
+      {/* Decorative Gradient */}
+      <div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 blur-[60px] -mr-16 -mt-16 pointer-events-none" />
+
+      <div className="flex items-center justify-between mb-8">
+        <h4 className="text-xs font-black text-armoyu-text uppercase tracking-[0.2em] italic">GRUP MENÜSÜ</h4>
+        <div className="px-2 py-0.5 bg-emerald-500/10 border border-emerald-500/20 rounded-md">
+          <span className="text-[8px] font-black text-emerald-500 tracking-widest">AKTİF ÜYE</span>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        {menuItems.filter(item => item.permission !== false).map((item, idx) => (
+          <Link
+            key={item.id}
+            href={`${group.getGroupUrl()}/${item.id === 'management' || item.id === 'settings' ? 'yonetim' : item.id === 'members' ? 'uyeler' : 'etkinlikler'}`}
+            className="w-full flex items-center justify-between p-4 rounded-2xl bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5 hover:border-blue-500/30 hover:bg-blue-500/5 transition-all group"
+          >
+            <div className="flex items-center gap-4">
+              <div className={`p-2.5 rounded-xl bg-white dark:bg-zinc-900 shadow-sm border border-black/5 dark:border-white/5 group-hover:scale-110 transition-transform ${item.color}`}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                  {item.id === 'management' && <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />}
+                  {item.id === 'members' && <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />}
+                  {item.id === 'members' && <circle cx="9" cy="7" r="4" />}
+                  {item.id === 'members' && <path d="M23 21v-2a4 4 0 0 0-3-3.87" />}
+                  {item.id === 'members' && <path d="M16 3.13a4 4 0 0 1 0 7.75" />}
+                  {item.id === 'events' && <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />}
+                  {item.id === 'events' && <line x1="16" y1="2" x2="16" y2="6" />}
+                  {item.id === 'events' && <line x1="8" y1="2" x2="8" y2="6" />}
+                  {item.id === 'events' && <line x1="3" y1="10" x2="21" y2="10" />}
+                  {item.id === 'settings' && <circle cx="12" cy="12" r="3" />}
+                  {item.id === 'settings' && <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />}
+                </svg>
+              </div>
+              <span className="text-[10px] font-black text-armoyu-text tracking-widest uppercase">{item.label}</span>
+            </div>
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" className="text-armoyu-text-muted opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all">
+              <polyline points="9 18 15 12 9 6"></polyline>
+            </svg>
+          </Link>
+        ))}
+      </div>
+
+      <div className="mt-8 pt-8 border-t border-black/5 dark:border-white/5">
+        <button
+          onClick={onLeave}
+          className="w-full text-[10px] font-black text-red-500 uppercase tracking-[0.2em] hover:text-red-600 transition-colors"
+        >
+          GRUPTAN AYRIL
+        </button>
+      </div>
+    </div>
+  );
+}
+

package/src/components/modules/community/SchoolCard.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { School } from '@armoyu/core';
+import { GraduationCap, Users, Trophy, ChevronRight, MapPin } from 'lucide-react';
+
+interface SchoolCardProps {
+  school: School;
+}
+
+export function SchoolCard({ school }: SchoolCardProps) {
+  return (
+    <Link href={`/egitim/${school.slug}`} className="block group">
+      <div className="glass-panel relative overflow-hidden rounded-[40px] border border-armoyu-card-border bg-armoyu-card-bg hover:border-blue-500/50 hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-500 group">
+
+        {/* Banner / Background */}
+        <div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-br from-blue-600/20 to-purple-600/20 opacity-30 group-hover:opacity-50 transition-opacity" />
+
+        <div className="relative p-8 pt-12">
+          <div className="flex items-start justify-between mb-8">
+            <div className="relative">
+              <div className="w-24 h-24 rounded-3xl bg-white dark:bg-zinc-900 border-4 border-armoyu-bg overflow-hidden shadow-xl group-hover:scale-105 transition-transform duration-500">
+                <img
+                  src={school.logo}
+                  alt={school.name}
+                  className="w-full h-full object-contain p-2"
+                />
+              </div>
+              <div className="absolute -bottom-2 -right-2 px-3 py-1 bg-blue-600 text-white text-[10px] font-black italic rounded-lg shadow-lg uppercase tracking-widest border-2 border-armoyu-bg">
+                Onaylı Okul
+              </div>
+            </div>
+
+            <div className="flex gap-2">
+              <div className="px-5 py-2.5 rounded-2xl bg-black/5 dark:bg-white/5 border border-armoyu-card-border text-[10px] font-black text-armoyu-text-muted uppercase tracking-[0.2em]">
+                {school.id.toUpperCase()}
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-4 mb-8">
+            <h3 className="text-2xl font-black text-armoyu-text uppercase tracking-tighter italic leading-none group-hover:text-blue-500 transition-colors">
+              {school.name}
+            </h3>
+            <div className="flex items-center gap-2 text-armoyu-text-muted">
+              <MapPin size={14} className="text-blue-500" />
+              <span className="text-[11px] font-bold uppercase tracking-widest opacity-60">Türkiye / İstanbul</span>
+            </div>
+          </div>
+
+          {/* Stats Bar */}
+          <div className="grid grid-cols-3 gap-2 py-4 border-y border-armoyu-card-border">
+            <div className="text-center group/stat">
+              <div className="flex items-center justify-center gap-1.5 text-armoyu-text-muted mb-1">
+                <Users size={12} className="group-hover/stat:text-blue-500 transition-colors" />
+                <span className="text-[9px] font-black uppercase tracking-widest opacity-50">Öğrenci</span>
+              </div>
+              <div className="text-sm font-black text-armoyu-text">{school.memberCount}</div>
+            </div>
+            <div className="text-center group/stat border-x border-armoyu-card-border px-2">
+              <div className="flex items-center justify-center gap-1.5 text-armoyu-text-muted mb-1">
+                <GraduationCap size={12} className="group-hover/stat:text-blue-500 transition-colors" />
+                <span className="text-[9px] font-black uppercase tracking-widest opacity-50">Fakülte</span>
+              </div>
+              <div className="text-sm font-black text-armoyu-text">{(school.faculties || []).length}</div>
+            </div>
+            <div className="text-center group/stat">
+              <div className="flex items-center justify-center gap-1.5 text-armoyu-text-muted mb-1">
+                <Trophy size={12} className="group-hover/stat:text-blue-500 transition-colors" />
+                <span className="text-[9px] font-black uppercase tracking-widest opacity-50">Takımlar</span>
+              </div>
+              <div className="text-sm font-black text-armoyu-text">{(school.teams || []).length}</div>
+            </div>
+          </div>
+
+          <div className="mt-8 flex items-center justify-between">
+            <div className="flex -space-x-3">
+              {[1, 2, 3, 4].map((i) => (
+                <img
+                  key={i}
+                  src={`https://api.dicebear.com/7.x/avataaars/svg?seed=Armoyu${i + (school.id as any)}`}
+                  className="w-8 h-8 rounded-full border-2 border-armoyu-bg"
+                  alt="Member"
+                />
+              ))}
+              <div className="w-8 h-8 rounded-full bg-black/5 dark:bg-white/5 border-2 border-armoyu-bg flex items-center justify-center text-[8px] font-black text-armoyu-text-muted uppercase">
+                +{(school.memberCount || 0) - 4}
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2 text-blue-500 text-[10px] font-black uppercase tracking-widest group-hover:translate-x-2 transition-transform">
+              OKUL PORTALI <ChevronRight size={16} strokeWidth={3} />
+            </div>
+          </div>
+        </div>
+
+        {/* Decorative Elements */}
+        <div className="absolute -bottom-8 -right-8 w-32 h-32 bg-blue-500/5 blur-[40px] rounded-full group-hover:bg-blue-500/10 transition-colors" />
+      </div>
+    </Link>
+  );
+}
+