Upload 3 files

js/pages/AreaPage.js

@@ -1,135 +1,175 @@
-// pages/AreaPage.js - Reusable area page component
+// pages/AreaPage.js - Single-topic view for area pages
 import { areasData } from '../data/areas.js';
 import { featuredArtifacts } from '../data/artifacts.js';
 import { createArtifactCarousel } from '../cards/ArtifactSummaryCard.js';
 import { sampleResources } from '../data/resources.js';
 import { createResourceCard, initializeResourceCards } from '../cards/ResourceCard.js';
-import { renderSidebar } from '../utils/sidebar.js'; // Import the new sidebar component
 
-export function renderAreaPage(areaId) {
+export function renderAreaPage(areaId, topicId = null) {
     const area = areasData[areaId];
     if (!area) {
         return {
-            content: `<div class="bg-white rounded-lg shadow-sm p-8"><h1 class="text-2xl font-bold text-red-600">Area not found</h1></div>`,
+            content: `<div class="bg-white/90 backdrop-blur-md rounded-lg shadow-sm p-8 mx-4"><h1 class="text-2xl font-bold text-red-600">Area not found</h1></div>`,
             init: () => {}
         };
     }
 
-    // Filter resources by area
-    const areaResources = sampleResources.filter(resource => 
-        resource.areaTags.includes(areaId)
-    );
+    // If no topic specified, show overview of the area
+    if (!topicId) {
+        return renderAreaOverview(area, areaId);
+    }
 
-    // Get sub-areas as array for easier processing
-    const subAreas = Object.entries(area.subAreas).map(([key, value]) => ({
+    // Show specific topic
+    const topic = area.subAreas[topicId];
+    if (!topic) {
+        return {
+            content: `<div class="bg-white/90 backdrop-blur-md rounded-lg shadow-sm p-8 mx-4"><h1 class="text-2xl font-bold text-red-600">Topic not found</h1></div>`,
+            init: () => {}
+        };
+    }
+
+    return renderTopicView(area, areaId, topic, topicId);
+}
+
+function renderAreaOverview(area, areaId) {
+    // Get sub-areas as array
+    const topics = Object.entries(area.subAreas).map(([key, value]) => ({
         id: key,
         name: typeof value === 'string' ? value : value.name,
+        navName: typeof value === 'string' ? value : (value.navName || value.name),
         description: typeof value === 'string' ? '' : (value.description || ''),
-        openness: typeof value === 'string' ? '' : (value.openness || ''),
-        gradient: typeof value === 'object' ? value.gradient : null
+        color: typeof value === 'object' ? value.color : 'bg-gray-200 text-gray-700'
     }));
 
     const content = `
-        <!-- Overview Section -->
-        <section id="overview" class="mb-12 relative z-20">
-            <!-- Overview Background Image -->
-            <div class="absolute inset-0 opacity-10 rounded-lg overflow-hidden">
-                <img src="images/${area.image}" alt="" class="w-full h-full object-cover">
+        <!-- Top spacing -->
+        <div class="mb-8"></div>
+        
+        <!-- Page Navigation Card -->
+        <section class="mb-8 relative z-20 px-4 sm:px-6 lg:px-8">
+            <div class="bg-white/70 backdrop-blur-sm shadow-sm rounded-lg px-6 py-4 w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
+                <div class="flex items-center gap-3 overflow-x-auto">
+                    <span class="text-gray-600 font-semibold whitespace-nowrap">${area.navTitle}:</span>
+                    <a href="/${areaId}" class="px-3 py-1.5 text-sm font-semibold text-blue-600 underline decoration-2 underline-offset-2 hover:bg-blue-50 rounded transition-colors whitespace-nowrap">Overview</a>
+                    ${topics.map((topic, index) => `
+                        ${index === 0 ? '<span class="text-gray-300">•</span>' : ''}
+                        <a href="/${areaId}/${topic.id}" class="px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors whitespace-nowrap">${topic.navName}</a>
+                        ${index < topics.length - 1 ? '<span class="text-gray-300">•</span>' : ''}
+                    `).join('')}
+                </div>
             </div>
-            <div class="bg-white bg-opacity-90 backdrop-blur-sm rounded-lg shadow-sm p-8 mb-6 relative z-10">
-                <h1 class="text-3xl font-bold text-gray-900 mb-6">${area.title}</h1>
+        </section>
+        
+        <!-- Area Overview Section -->
+        <section id="overview" class="mb-16 relative z-20 px-4 sm:px-6 lg:px-8">
+            <div class="bg-white/90 backdrop-blur-md shadow-sm rounded-lg p-6 md:p-10 w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
+                <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">${area.title}</h1>
                 
-                <!-- Description -->
+                <!-- Area Description -->
                 <div class="mb-8">
-                    <p class="text-gray-700 leading-relaxed mb-6">${area.description}</p>
+                    <p class="text-gray-700 leading-relaxed">${area.description}</p>
                 </div>
 
                 <!-- Role of Openness -->
-                <div class="mb-8 px-4 py-4 bg-gradient-to-r from-orange-50 to-yellow-50 border-l-4 border-orange-300 rounded-r-lg">
-                    <p class="font-bold text-orange-900 mb-2">🤗 The Role of Openness</p>
+                ${area.openness ? `
+                <div class="px-4 sm:px-6 py-5 bg-gradient-to-r from-orange-50/95 to-yellow-50/95 backdrop-blur-sm border-l-4 border-orange-400 rounded-r-lg mb-8">
+                    <p class="font-bold text-orange-900 mb-3 text-lg">🤗 The Role of Openness</p>
                     <p class="text-orange-800 italic leading-relaxed">${area.openness}</p>
                 </div>
-
-                <!-- Sub-areas Navigation -->
-                <div class="mb-8">
-                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Explore Sub-areas</h3>
-                    <div class="grid grid-cols-1 md:grid-cols-${Math.min(subAreas.length, 3)} gap-4">
-                        ${subAreas.map(subArea => `
-                            <a 
-                                href="#${subArea.id}"
-                                class="group p-4 bg-gradient-to-br ${subArea.gradient || 'from-gray-50 to-gray-100 hover:from-gray-100 hover:to-gray-200 border-gray-200 hover:border-gray-300 text-gray-900'} rounded-lg border transition-all duration-200 text-left block no-underline"
-                            >
-                                <h4 class="font-semibold text-sm group-hover:scale-105 transition-transform">${subArea.name}</h4>
-                            </a>
-                        `).join('')}
+                ` : ''}
+
+                <!-- Topics within this area -->
+                <div>
+                    <p class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-3">Topics in this area:</p>
+                    <div class="flex flex-wrap gap-2">
+                        ${topics.map(topic => {
+                            // Extract colors from topic.color
+                            let bgColor = 'bg-gray-200';
+                            let textColor = 'text-gray-700';
+                            if (topic.color) {
+                                const bgMatch = topic.color.match(/bg-(\w+)-(\d+)/);
+                                const textMatch = topic.color.match(/text-(\w+)-(\d+)/);
+                                if (bgMatch) bgColor = `bg-${bgMatch[1]}-${bgMatch[2]}`;
+                                if (textMatch) textColor = `text-${textMatch[1]}-700`;
+                            }
+                            return `
+                                <a href="/${areaId}/${topic.id}" class="inline-block px-3 py-1.5 text-sm ${bgColor} ${textColor} rounded hover:opacity-80 transition-opacity">
+                                    ${topic.navName}
+                                </a>
+                            `;
+                        }).join('')}
                     </div>
                 </div>
             </div>
         </section>
+    `;
 
-        <!-- Sub-areas Sections -->
-        ${subAreas.map(subArea => `
-            <section id="${subArea.id}" class="mb-12 relative z-20">
-                <div class="bg-white bg-opacity-90 backdrop-blur-sm rounded-lg shadow-sm p-8">
-                    <h2 class="text-2xl font-bold text-gray-900 mb-6">${subArea.name}</h2>
-                    
-                    ${subArea.description ? `
-                    <div class="mb-6">
-                        <p class="text-gray-700 leading-relaxed">${subArea.description}</p>
-                    </div>
-                    ` : ''}
+    return {
+        content,
+        init: () => {}
+    };
+}
 
-                    ${subArea.openness ? `
-                    <div class="mb-6 px-4 py-4 bg-gradient-to-r from-orange-50 to-yellow-50 border-l-4 border-orange-300 rounded-r-lg">
-                        <p class="font-bold text-orange-900 mb-2">🤗 The Role of Openness</p>
-                        <p class="text-orange-800 italic leading-relaxed">${subArea.openness}</p>
-                    </div>
-                    ` : ''}
+function renderTopicView(area, areaId, topic, topicId) {
+    const topicName = topic.navName || topic.name;
+    const topicDescription = topic.description || '';
+    const topicOpenness = topic.openness || '';
+    
+    // Get all topics for navigation
+    const allTopics = Object.entries(area.subAreas).map(([key, value]) => ({
+        id: key,
+        navName: typeof value === 'string' ? value : (value.navName || value.name)
+    }));
 
-                    <!-- Artifacts Carousel -->
-                    <div class="mb-6">
-                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Related Research & Resources</h3>
-                        <div id="${subArea.id}-artifacts-carousel">
-                            <!-- Carousel will be inserted here -->
-                        </div>
-                    </div>
+    const content = `
+        <!-- Top spacing -->
+        <div class="mb-8"></div>
+        
+        <!-- Page Navigation Card -->
+        <section class="mb-8 relative z-20 px-4 sm:px-6 lg:px-8">
+            <div class="bg-white/70 backdrop-blur-sm shadow-sm rounded-lg px-6 py-4 w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
+                <div class="flex items-center gap-3 overflow-x-auto">
+                    <span class="text-gray-600 font-semibold whitespace-nowrap">${area.navTitle}:</span>
+                    <a href="/${areaId}" class="px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors whitespace-nowrap">Overview</a>
+                    ${allTopics.map((t, index) => `
+                        ${index === 0 ? '<span class="text-gray-300">•</span>' : ''}
+                        <a href="/${areaId}/${t.id}" class="px-3 py-1.5 text-sm font-medium transition-colors whitespace-nowrap rounded ${t.id === topicId ? 'text-blue-600 font-semibold underline decoration-2 underline-offset-2' : 'text-gray-700 hover:text-blue-600 hover:bg-blue-50'}">${t.navName}</a>
+                        ${index < allTopics.length - 1 ? '<span class="text-gray-300">•</span>' : ''}
+                    `).join('')}
+                </div>
+            </div>
+        </section>
+        
+        <!-- Topic Content Section -->
+        <section id="${topicId}" class="mb-16 relative z-20 px-4 sm:px-6 lg:px-8">
+            <div class="bg-white/80 backdrop-blur-md shadow-sm rounded-lg p-6 md:p-10 w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
+                <!-- Breadcrumb -->
+                <div class="mb-4 text-sm text-gray-600">
+                    <a href="/${areaId}" class="hover:text-blue-600 transition-colors">${area.navTitle}</a>
+                    <span class="mx-2">›</span>
+                    <span class="text-gray-900 font-medium">${topicName}</span>
                 </div>
-            </section>
-        `).join('')}
 
-        <!-- Resources Section -->
-        <section id="resources" class="mb-12 relative z-10">
-            <div class="bg-white bg-opacity-90 backdrop-blur-sm rounded-lg shadow-sm p-8">
-                <h2 class="text-2xl font-bold text-gray-900 mb-6">Technical Resources</h2>
+                <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">${topic.name}</h1>
                 
-                <!-- Filter resources by area -->
-                <div class="mb-6">
-                    <p class="text-gray-700 leading-relaxed">
-                        Technical resources and tools related to ${area.name.toLowerCase()} research and development.
-                    </p>
+                <!-- Topic Description -->
+                ${topicDescription ? `
+                <div class="mb-8">
+                    <p class="text-gray-700 leading-relaxed">${topicDescription}</p>
                 </div>
+                ` : ''}
 
-                <!-- Resource Cards Carousel -->
-                <div class="relative">
-                    <div class="resource-carousel-container overflow-hidden" style="width: calc(100% - 2rem); margin: 0 auto;">
-                        <div class="resource-carousel flex gap-6 transition-transform duration-300 ease-in-out" style="width: ${areaResources.length * 624}px;">
-                            ${areaResources.map(resource => createResourceCard(resource)).join('')}
-                        </div>
-                    </div>
-                    
-                    <!-- Carousel Navigation -->
-                    <div class="flex justify-center mt-4 space-x-2">
-                        <button class="resource-carousel-prev bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-2 rounded-md transition-colors">
-                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-                            </svg>
-                        </button>
-                        <button class="resource-carousel-next bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-2 rounded-md transition-colors">
-                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                            </svg>
-                        </button>
-                    </div>
+                <!-- Role of Openness for this topic -->
+                ${topicOpenness ? `
+                <div class="px-4 sm:px-6 py-5 bg-gradient-to-r from-orange-50/95 to-yellow-50/95 backdrop-blur-sm border-l-4 border-orange-400 rounded-r-lg mb-8">
+                    <p class="font-bold text-orange-900 mb-3 text-lg">🤗 The Role of Openness</p>
+                    <p class="text-orange-800 italic leading-relaxed">${topicOpenness}</p>
+                </div>
+                ` : ''}
+
+                <h3 class="text-xl md:text-2xl font-bold text-gray-900 mb-6">Related Research & Resources</h3>
+                <div id="${topicId}-artifacts-carousel" class="overflow-x-auto -mx-2">
+                    <!-- Carousel will be inserted here -->
                 </div>
             </div>
         </section>
@@ -138,158 +178,32 @@ export function renderAreaPage(areaId) {
     return {
         content,
         init: () => {
-            // Initialize artifact carousels for each sub-area with a small delay
-            // to ensure DOM elements are fully rendered
+            // Initialize artifact carousel for this topic
             setTimeout(async () => {
                 try {
-                    console.log('Accessing artifacts from global scope...');
-                    // Access artifacts from global scope
                     const allArtifacts = window.allArtifacts || [];
-                    if (allArtifacts.length === 0) {
-                        console.warn('Global artifacts data not available or empty. Falling back to featuredArtifacts.');
-                    }
                     
-                    subAreas.forEach(subArea => {
-                        try {
-                            // Filter artifacts by topics (subAreaTags in JSON)
-                            const filteredArtifacts = allArtifacts.filter(artifact => 
-                                artifact.topics && artifact.topics.includes(subArea.id)
-                            );
-                            
-                            // Transform field names to match expected format
-                            const transformedArtifacts = filteredArtifacts.map(artifact => ({
-                                ...artifact,
-                                areaTags: artifact.areas,
-                                subAreaTags: artifact.topics,
-                                sourceUrl: artifact.url
-                            }));
-                            
-                            console.log(`Filtered artifacts for ${subArea.id}:`, transformedArtifacts.length);
-                            const carouselId = `${subArea.id}-artifacts-carousel`;
-                            createArtifactCarousel(transformedArtifacts, carouselId);
-                        } catch (error) {
-                            console.error(`Error creating carousel for ${subArea.id}:`, error);
-                            // Fallback to featured artifacts if filtering fails
-                            const carouselId = `${subArea.id}-artifacts-carousel`;
-                            createArtifactCarousel(featuredArtifacts, carouselId);
-                        }
-                    });
+                    // Filter artifacts by this specific topic
+                    const filteredArtifacts = allArtifacts.filter(artifact => 
+                        artifact.topics && artifact.topics.includes(topicId)
+                    );
+                    
+                    // Transform field names to match expected format
+                    const transformedArtifacts = filteredArtifacts.map(artifact => ({
+                        ...artifact,
+                        areaTags: artifact.areas,
+                        subAreaTags: artifact.topics,
+                        sourceUrl: artifact.url
+                    }));
+                    
+                    const carouselId = `${topicId}-artifacts-carousel`;
+                    createArtifactCarousel(transformedArtifacts.length > 0 ? transformedArtifacts : featuredArtifacts, carouselId);
                 } catch (error) {
-                    console.error('Error accessing global artifacts data:', error);
-                    // Fallback to featured artifacts for all carousels
-                    subAreas.forEach(subArea => {
-                        const carouselId = `${subArea.id}-artifacts-carousel`;
-                        createArtifactCarousel(featuredArtifacts, carouselId);
-                    });
+                    console.error(`Error creating carousel for ${topicId}:`, error);
+                    const carouselId = `${topicId}-artifacts-carousel`;
+                    createArtifactCarousel(featuredArtifacts, carouselId);
                 }
             }, 50);
-            
-            // Initialize resource cards
-            initializeResourceCards();
-            
-            // Initialize resource carousel if there are resources
-            if (areaResources.length > 0) {
-                initializeAreaResourceCarousel(areaResources);
-            }
-            
-            // Initialize background attribution
-            initializeAreaBackgroundAttribution();
         }
     };
 }
-
-export function getAreaPageSidebar(areaId) {
-    const area = areasData[areaId];
-    if (!area) {
-        return '<div class="p-4">Area not found</div>';
-    }
-
-    const subAreas = Object.entries(area.subAreas).map(([key, value]) => ({
-        id: key,
-        name: typeof value === 'string' ? value : value.name
-    }));
-
-    const sidebarItems = [
-        {
-            label: 'Overview',
-            href: '#overview',
-            isNested: false,
-            isActive: window.location.hash === '#overview',
-        },
-        {
-            label: 'Topics',
-            isHeader: true,
-            isNested: true,
-            subItems: subAreas.map(subArea => ({
-                label: subArea.name,
-                href: `#${subArea.id}`,
-                isActive: window.location.hash === `#${subArea.id}`,
-            })),
-        },
-        {
-            label: 'Resources',
-            href: '#resources',
-            isNested: false,
-            isActive: window.location.hash === '#resources',
-        },
-    ];
-
-    return renderSidebar('On This Page', sidebarItems);
-}
-
-function initializeAreaResourceCarousel(resources) {
-    const carousel = document.querySelector('.resource-carousel');
-    const prevButton = document.querySelector('.resource-carousel-prev');
-    const nextButton = document.querySelector('.resource-carousel-next');
-    
-    if (!carousel || !prevButton || !nextButton) {
-        return;
-    }
-    
-    let currentIndex = 0;
-    const cardWidth = 624; // 600px card + 24px gap
-    const visibleCards = 1.5; // Show 1.5 cards at a time (larger cards)
-    const maxIndex = resources.length - 1; // Allow going to the last item
-    
-    function updateCarousel() {
-        const translateX = -currentIndex * cardWidth;
-        carousel.style.transform = `translateX(${translateX}px)`;
-        
-        // Update button states - no disabled states for looping
-        prevButton.classList.remove('opacity-50', 'cursor-not-allowed');
-        nextButton.classList.remove('opacity-50', 'cursor-not-allowed');
-    }
-    
-    prevButton.addEventListener('click', () => {
-        currentIndex = currentIndex > 0 ? currentIndex - 1 : maxIndex;
-        updateCarousel();
-    });
-    
-    nextButton.addEventListener('click', () => {
-        currentIndex = currentIndex < maxIndex ? currentIndex + 1 : 0;
-        updateCarousel();
-    });
-    
-    // Initialize carousel state
-    updateCarousel();
-}
-
-function initializeAreaBackgroundAttribution() {
-    const backgroundContainer = document.getElementById('area-background-container');
-    const attribution = document.getElementById('area-bg-attribution');
-    
-    if (!backgroundContainer || !attribution) {
-        return;
-    }
-
-    // Show attribution on hover over the background container
-    backgroundContainer.addEventListener('mouseenter', () => {
-        attribution.style.opacity = '1';
-    });
-
-    backgroundContainer.addEventListener('mouseleave', () => {
-        attribution.style.opacity = '0';
-    });
-}
-
-// Colors are now defined in the areas data and accessed via subArea.gradient

js/pages/HomePage.js

@@ -5,83 +5,89 @@ import { createArtifactCarousel } from '../cards/ArtifactSummaryCard.js';
 import { areasData, homeBackgroundImage } from '../data/areas.js';
 import { featuredArtifacts } from '../data/artifacts.js';
 import { teamMembers } from '../data/team.js';
-import { renderSidebar } from '../utils/sidebar.js'; // Import the new sidebar component
 
 export function renderHomePage() {
     const content = `
-        <!-- Team Introduction Section -->
-        <section id="intro" class="mb-12 relative z-20">
-            <!-- Part 1: Team Introduction and Research Areas -->
-            <div class="bg-white rounded-lg shadow-sm p-8 mb-6">
-                <h3 class="text-3xl font-bold text-gray-900 mb-6">Team Introduction</h3>
+        <!-- Top spacing -->
+        <div class="mb-8"></div>
         
-                <!-- Research Areas Introduction -->
+        <!-- Page Navigation Card -->
+        <section class="mb-8 relative z-20 px-4 sm:px-6 lg:px-8">
+            <div class="bg-white/70 backdrop-blur-sm shadow-sm rounded-lg px-6 py-4 w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
+                <div class="flex items-center gap-3 overflow-x-auto">
+                    <span class="text-gray-600 font-semibold whitespace-nowrap">On this page:</span>
+                    <a href="/#about" class="px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors whitespace-nowrap">About</a>
+                    <span class="text-gray-300">•</span>
+                    <a href="/#recent-works" class="px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors whitespace-nowrap">Recent Works</a>
+                    <span class="text-gray-300">•</span>
+                    <a href="/#research-areas" class="px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors whitespace-nowrap">Research Areas</a>
+                    <span class="text-gray-300">•</span>
+                    <a href="/#team" class="px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors whitespace-nowrap">Team Members</a>
+                </div>
+            </div>
+        </section>
+        
+        <!-- About Section - Responsive Width with Frosted Glass -->
+        <section id="about" class="mb-16 relative z-20 px-4 sm:px-6 lg:px-8">
+            <div class="bg-white/40 backdrop-blur-sm shadow-sm rounded-lg p-6 md:p-10 w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">About</h2>
+                
+                <!-- Introduction Text - Single column -->
                 <div class="mb-8">
-                    <p class="text-gray-700 leading-relaxed mb-6">We're a multidisciplinary team working on research and regulatory questions related to AI systems &mdash; their (open) development, governance, and impact on society at large. Our work spans four key inter-connected areas where AI technology intersects with society:</p>
-                    
-                    <!-- Research Areas Navigation -->
-                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                        ${Object.values(areasData).map(area => `
-                            <a 
-                                href="#${area.id}"
-                                class="group p-4 bg-gradient-to-br ${area.colors.gradient} rounded-lg border transition-all duration-200 text-left block no-underline"
-                            >
-                                <h4 class="font-semibold text-sm mb-1 group-hover:scale-105 transition-transform">${area.title}</h4>
-                                <p class="text-xs opacity-80">${getAreaShortDescription(area.id)}</p>
-                            </a>
-                        `).join('')}
-                    </div>
-
-                    <!-- Perspective and Positionality -->
-                    <div class="mt-8 px-4 py-4 bg-gradient-to-r from-orange-50 to-yellow-50 border-l-4 border-orange-300 rounded-r-lg">
-                        <p class="font-bold text-center text-orange-900 mb-2">🤗 Perspective and Positionality</p>
-                        <p class="text-orange-800 italic leading-relaxed">
-                            Our work on these topics is shaped by the context of our work at Hugging Face, which is the main platform for open and collaborative development and sharing of Artificial Intelligence artifacts. As a result, much of our work discusses the specific roles of openness and transparency in shaping AI technology into a more equitable and better-governed category of technology.
+                    <div>
+                        <p class="text-gray-700 leading-relaxed">
+                            We're a multidisciplinary team working on research and regulatory questions related to AI systems &mdash; their (open) development, governance, and impact on society at large.
+                            Our work spans four key inter-connected areas where AI technology intersects with society:
                         </p>
                     </div>
                 </div>
 
-                
-
-                <!-- Recent & Featured Works -->
-                <div id="recent-featured-works" class="mb-12 border-t border-gray-200 pt-6">
-                    <h4 class="text-lg font-semibold text-gray-900 mb-4">Recent & Featured Works</h4>
-                    <div class="mb-8">
-                        <div id="featured-artifacts-carousel">
-                            <!-- Carousel will be inserted here -->
-                        </div>
-                    </div>
+                <!-- Perspective and Positionality -->
+                <div class="px-4 sm:px-6 py-5 bg-gradient-to-r from-orange-50/95 to-yellow-50/95 backdrop-blur-sm border-l-4 border-orange-400 rounded-r-lg">
+                    <p class="font-bold text-orange-900 mb-3 text-lg">🤗 Perspective and Positionality</p>
+                    <p class="text-orange-800 italic leading-relaxed">
+                        Our work on these topics is shaped by the context of our work at Hugging Face, which is the main platform for open and collaborative development and sharing of Artificial Intelligence artifacts. As a result, much of our work discusses the specific roles of openness and transparency in shaping AI technology into a more equitable and better-governed category of technology.
+                    </p>
                 </div>
+            </div>
+        </section>
 
-
-                <!-- Team and Collaborators -->
-                <div id="team-members" class="border-t border-gray-200 pt-6">
-                    <h4 class="text-lg font-semibold text-gray-900 mb-4">Team Members</h4>
-                    <div class="mb-4">
-                        <div id="team-grid" class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <!-- Team members will be inserted here by JavaScript -->
-                        </div>
-                    </div>                            
-                    <div class="prose text-gray-700">
-                        <p>We also work closely with 
-                            <a href="https://huggingface.co/irenesolaiman" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Irene Solaiman</a> (Chief Policy Officer), 
-                            <a href="https://huggingface.co/evijit" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Avijit Ghosh</a> (Applied Policy Researcher) in the policy team, 
-                            and with <a href="https://huggingface.co/meg" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Meg Mitchell</a> (Chief Ethics Scientist), 
-                            and with <a href="https://huggingface.co/brunatrevelin" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Bruna Trevelin</a> (Legal Counsel)!
-                        </p>
-                    </div>
+        <!-- Featured Works Section - Transparent Card -->
+        <section id="recent-works" class="mb-16 relative z-20 px-4 sm:px-6 lg:px-8">
+            <div class="bg-white/20 backdrop-blur-sm shadow-sm rounded-lg p-6 md:p-10 w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Recent & Featured Works</h2>
+                <div id="featured-artifacts-carousel" class="overflow-x-auto -mx-2">
+                    <!-- Carousel will be inserted here -->
                 </div>
             </div>
         </section>
 
-        <!-- Research Areas Header -->
-        <div id="research-areas-header" class="text-center mb-12 relative z-20">
-            <h2 class="text-3xl font-bold text-gray-900">Research Areas</h2>
-        </div>
+        <!-- Research Areas Section - Transparent Card with 2x2 Grid -->
+        <section id="research-areas" class="mb-16 relative z-20 px-4 sm:px-6 lg:px-8">
+            <div class="bg-white/20 backdrop-blur-sm shadow-sm rounded-lg p-6 md:p-10 w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-8 text-center">Research Areas</h2>
+                <div id="research-areas-grid" class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
+                    <!-- Area cards will be inserted here by JavaScript -->
+                </div>
+            </div>
+        </section>
 
-        <!-- Research Areas -->
-        <section id="research-areas" class="space-y-8 relative z-20">
-            <!-- Area cards will be inserted here by JavaScript -->
+        <!-- Team Members Section - Frosted Background -->
+        <section id="team" class="mb-16 relative z-20 px-4 sm:px-6 lg:px-8">
+            <div class="bg-white/40 backdrop-blur-sm shadow-sm rounded-lg p-6 md:p-10 w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Team Members</h2>
+                <div id="team-grid" class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-6">
+                    <!-- Team members will be inserted here by JavaScript -->
+                </div>
+                <div class="prose max-w-none text-gray-700 pt-4 border-t border-gray-200">
+                    <p>We also work closely with 
+                        <a href="https://huggingface.co/irenesolaiman" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Irene Solaiman</a> (Chief Policy Officer), 
+                        <a href="https://huggingface.co/evijit" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Avijit Ghosh</a> (Applied Policy Researcher) in the policy team, 
+                        and with <a href="https://huggingface.co/meg" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Meg Mitchell</a> (Chief Ethics Scientist), 
+                        and with <a href="https://huggingface.co/brunatrevelin" class="text-blue-600 hover:text-blue-800 transition-colors" target="_blank">Bruna Trevelin</a> (Legal Counsel)!
+                    </p>
+                </div>
+            </div>
         </section>
     `;
 
@@ -96,59 +102,6 @@ export function renderHomePage() {
     };
 }
 
-export function getHomePageSidebar() {
-    const sidebarItems = [
-        {
-            label: 'Team Introduction',
-            href: '#intro',
-            isNested: false,
-            isActive: window.location.hash === '#intro',
-            subItems: [
-                {
-                    label: 'Recent & Featured Works',
-                    href: '#recent-featured-works',
-                    isActive: window.location.hash === '#recent-featured-works',
-                },
-                {
-                    label: 'Team Members',
-                    href: '#team-members',
-                    isActive: window.location.hash === '#team-members',
-                },
-            ],
-        },
-        {
-            label: 'Research Areas',
-            href: '#research-areas-header',
-            isNested: false,
-            isActive: window.location.hash === '#research-areas-header',
-            subItems: [
-                {
-                    label: 'Efficiency & Environment',
-                    href: '#efficiency',
-                    isActive: window.location.hash === '#efficiency',
-                },
-                {
-                    label: 'Consent & Personal Interactions',
-                    href: '#personal',
-                    isActive: window.location.hash === '#personal',
-                },
-                {
-                    label: 'Rights & Regulation',
-                    href: '#rights',
-                    isActive: window.location.hash === '#rights',
-                },
-                {
-                    label: 'Socio-Economic & Technical Ecosystems',
-                    href: '#ecosystems',
-                    isActive: window.location.hash === '#ecosystems',
-                },
-            ],
-        },
-    ];
-
-    return renderSidebar('On This Page', sidebarItems);
-}
-
 function initializeTeamMembers() {
     const teamContainer = document.getElementById('team-grid');
     if (!teamContainer) {
@@ -171,13 +124,89 @@ function getAreaShortDescription(areaId) {
 }
 
 function initializeHomeAreaCards() {
-    const areasContainer = document.getElementById('research-areas');
+    const areasContainer = document.getElementById('research-areas-grid');
     if (!areasContainer) return;
 
     const areas = Object.values(areasData);
-    areasContainer.innerHTML = areas.map(area => 
-        createHomeAreaCard(area.id, area.title, area.description, area.openness, Object.values(area.subAreas).map(sub => typeof sub === 'string' ? sub : sub.name), area.image, area.imagePosition, area.imageAttribution, area.imageAltText)
-    ).join('');
+    areasContainer.innerHTML = areas.map(area => createResearchAreaCard(area)).join('');
+}
+
+function createResearchAreaCard(area) {
+    // Get first sentence of description
+    const shortDesc = area.description.split('.')[0] + '.';
+    
+    // Get topic names and colors from the subAreas - same logic as ArtifactSummaryCard
+    const topics = Object.values(area.subAreas).map(subArea => {
+        const topicName = subArea.navName || subArea.name;
+        let bgColor = 'bg-gray-200';
+        let textColor = 'text-gray-700';
+        
+        // Extract background and text color from the subArea color class
+        if (subArea.color) {
+            // Match pattern like "bg-emerald-100 text-emerald-800"
+            const bgMatch = subArea.color.match(/bg-(\w+)-(\d+)/);
+            const textMatch = subArea.color.match(/text-(\w+)-(\d+)/);
+            
+            if (bgMatch) {
+                bgColor = `bg-${bgMatch[1]}-${bgMatch[2]}`;
+            }
+            if (textMatch) {
+                textColor = `text-${textMatch[1]}-700`; // Use consistent 700 shade like artifact cards
+            }
+        }
+        
+        return {
+            name: topicName,
+            bgColor,
+            textColor
+        };
+    });
+    
+    return `
+        <a href="/${area.id}" 
+           class="group relative block border border-gray-200 rounded-lg overflow-hidden bg-white hover:shadow-lg transition-all duration-200 h-64">
+            
+            <!-- Background image with low opacity -->
+            ${area.image ? `
+            <div class="absolute inset-0 opacity-15 group-hover:opacity-30 transition-opacity">
+                <img src="/images/${area.image}" alt="" class="w-full h-full object-cover">
+            </div>
+            ` : ''}
+            
+            <!-- Content -->
+            <div class="relative p-5 h-full flex flex-col">
+                <!-- Header -->
+                <div class="flex justify-between items-start mb-3 flex-shrink-0">
+                    <h3 class="text-lg font-bold text-gray-900 leading-tight">${area.navTitle}</h3>
+                    <svg class="w-5 h-5 text-gray-400 group-hover:text-blue-600 transition-colors flex-shrink-0 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                    </svg>
+                </div>
+                
+                <!-- Description - scrollable -->
+                <div class="text-md text-gray-700 mb-4 flex-grow overflow-y-auto pr-2">
+                    <p class="leading-relaxed">${area.description}</p>
+                </div>
+                
+                <!-- Topics with colors from subAreas - same style as artifact cards -->
+                <div class="flex-shrink-0">
+                    <p class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-2">Topics:</p>
+                    <div class="flex flex-wrap gap-2">
+                        ${topics.map(topic => `
+                            <span class="inline-block px-2 py-0.5 text-sm ${topic.bgColor} ${topic.textColor} rounded">
+                                ${topic.name}
+                            </span>
+                        `).join('')}
+                    </div>
+                </div>
+                
+                <!-- Image Attribution -->
+                ${area.imageAttribution ? `
+                    <p class="text-xs text-gray-500 mt-3 pt-2 border-t border-gray-100 flex-shrink-0">${area.imageAttribution}</p>
+                ` : ''}
+            </div>
+        </a>
+    `;
 }
 
 function initializeArtifactCarousels() {

js/pages/ResourcesPage.js

@@ -3,7 +3,6 @@ import { homeBackgroundImage, areasData } from '../data/areas.js';
 import { pressMentions } from '../data/press.js';
 import { sampleResources } from '../data/resources.js';
 import { createResourceCard, initializeResourceCards } from '../cards/ResourceCard.js';
-import { renderSidebar } from '../utils/sidebar.js'; // Import the new sidebar component
 
 export function renderResourcesPage() {
     const content = `
@@ -107,7 +106,7 @@ export function renderResourcesPage() {
                                     <div class="bg-gray-50 rounded-lg p-4 ${borderSide} ${borderColor} relative overflow-hidden">
                                         <!-- Background image for this article -->
                                         <div class="absolute inset-0 opacity-5 pointer-events-none">
-                                            <img src="images/${primaryArea?.image || 'ai.png'}" alt="" class="w-full h-full object-cover">
+                                            <img src="/images/${primaryArea?.image || 'ai.png'}" alt="" class="w-full h-full object-cover">
                                         </div>
                                         
                                         <div class="relative z-10">
@@ -156,25 +155,6 @@ export function renderResourcesPage() {
     };
 }
 
-export function getResourcesPageSidebar() {
-    const sidebarItems = [
-        {
-            label: 'Technical Resources',
-            href: '#technical-resources',
-            isNested: false,
-            isActive: window.location.hash === '#technical-resources',
-        },
-        {
-            label: 'Press Mentions',
-            href: '#press-mentions',
-            isNested: false,
-            isActive: window.location.hash === '#press-mentions',
-        },
-    ];
-
-    return renderSidebar('Resources', sidebarItems);
-}
-
 function initializeResourcesBackgroundAttribution() {
     const backgroundContainer = document.getElementById('resources-background-container');
     const attribution = document.getElementById('resources-bg-attribution');