Add WhyRating tab with project links

- Brand Site (brand.nuc.lan)
- Templates Site (templates.nuc.lan)
- Outline Docs for documentation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/page.tsx

@@ -5,14 +5,21 @@ import { Header, SearchBar, ServiceCard, BookmarkCard, CategorySection, Icon } f
 import { usePortal } from '@/lib/PortalContext';
 import { categoryLabels, categoryOrder, bookmarkCategoryLabels, bookmarkCategoryOrder, ServiceCategory, BookmarkCategory } from '@/lib/services';
 
-type TabId = 'services' | 'bookmarks' | 'settings';
+type TabId = 'services' | 'bookmarks' | 'whyrating' | 'settings';
 
 const tabs: { id: TabId; label: string; icon: string }[] = [
   { id: 'services', label: 'Services', icon: 'server' },
   { id: 'bookmarks', label: 'Bookmarks', icon: 'external-link' },
+  { id: 'whyrating', label: 'WhyRating', icon: 'star' },
   { id: 'settings', label: 'Settings', icon: 'settings' },
 ];
 
+const whyratingLinks = [
+  { name: 'Brand Site', url: 'http://brand.nuc.lan', icon: 'palette', description: 'WhyRating brand guidelines and assets' },
+  { name: 'Templates Site', url: 'http://templates.nuc.lan', icon: 'layout', description: 'WhyRating email and document templates' },
+  { name: 'Outline Docs', url: 'http://192.168.1.3:3080', icon: 'file-text', description: 'Project documentation and notes' },
+];
+
 export default function Home() {
   const [activeTab, setActiveTab] = useState<TabId>('services');
   const { filteredServices, filteredBookmarks, healthStatus, searchQuery, darkMode, setDarkMode, services } = usePortal();
@@ -136,6 +143,40 @@ export default function Home() {
           </>
         );
 
+      case 'whyrating':
+        return (
+          <div className="max-w-2xl">
+            <div className="mb-6">
+              <h2 className="text-xl font-semibold text-slate-900 dark:text-stone-100 mb-2">
+                WhyRating.com
+              </h2>
+              <p className="text-sm text-slate-500 dark:text-stone-500">
+                Project resources and documentation
+              </p>
+            </div>
+            <div className="grid gap-4">
+              {whyratingLinks.map(link => (
+                <a
+                  key={link.name}
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-4 p-4 bg-white dark:bg-stone-900 rounded-xl border border-slate-100 dark:border-stone-700/50 shadow-sm hover:shadow-md hover:border-slate-200 dark:hover:border-stone-600/50 transition-all"
+                >
+                  <div className="w-12 h-12 flex items-center justify-center rounded-lg bg-slate-100 dark:bg-stone-800">
+                    <Icon name={link.icon} size={24} className="text-slate-600 dark:text-stone-400" />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="font-medium text-slate-900 dark:text-stone-100">{link.name}</h3>
+                    <p className="text-sm text-slate-500 dark:text-stone-500">{link.description}</p>
+                  </div>
+                  <Icon name="external-link" size={16} className="text-slate-400 dark:text-stone-600" />
+                </a>
+              ))}
+            </div>
+          </div>
+        );
+
       case 'settings':
         return (
           <div className="max-w-2xl">