Upload 3 files

js/pages/AreaPage.js

@@ -0,0 +1,260 @@
+// pages/AreaPage.js - Reusable area page component
+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';
+
+export function renderAreaPage(areaId) {
+    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>`,
+            init: () => {}
+        };
+    }
+
+    // Filter resources by area
+    const areaResources = sampleResources.filter(resource => 
+        resource.areaTags.includes(areaId)
+    );
+
+    // Get sub-areas as array for easier processing
+    const subAreas = Object.entries(area.subAreas).map(([key, value]) => ({
+        id: key,
+        name: typeof value === 'string' ? value : value.name,
+        description: typeof value === 'string' ? '' : (value.description || ''),
+        openness: typeof value === 'string' ? '' : (value.openness || ''),
+        gradient: typeof value === 'object' ? value.gradient : null
+    }));
+
+    const content = `
+        <!-- Page Background Image for Main Content -->
+        <div class="fixed opacity-40 z-0" style="top: 104px; left: 256px; right: 0; bottom: 0;" id="area-background-container">
+            <img src="images/${area.image}" alt="" class="w-full h-full object-cover pointer-events-none">
+            <!-- Attribution Tooltip -->
+            <div id="area-bg-attribution" class="absolute bottom-4 right-4 bg-black bg-opacity-75 text-white text-xs px-2 py-1 rounded opacity-0 transition-opacity duration-200 max-w-xs z-50">
+                <a href="${area.imageSourceUrl}" target="_blank" class="text-blue-300 hover:text-blue-100">
+                    ${area.imageAttribution}
+                </a>
+            </div>
+        </div>
+
+        <!-- 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">
+            </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>
+                
+                <!-- Description -->
+                <div class="mb-8">
+                    <p class="text-gray-700 leading-relaxed mb-6">${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>
+                    <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('')}
+                    </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>
+                    ` : ''}
+
+                    ${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>
+                    ` : ''}
+
+                    <!-- 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>
+                </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>
+                
+                <!-- 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>
+                </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>
+                </div>
+            </div>
+        </section>
+    `;
+
+    return {
+        content,
+        init: () => {
+            // Initialize artifact carousels for each sub-area with a small delay
+            // to ensure DOM elements are fully rendered
+            setTimeout(() => {
+                subAreas.forEach(subArea => {
+                    // For now, show all artifacts in each carousel
+                    // Later this will be filtered by the backend
+                    const carouselId = `${subArea.id}-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
+    }));
+
+    return `
+        <nav class="p-4">
+            <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">On This Page</h3>
+            <ul class="space-y-1">
+                <li><a href="#overview" class="page-nav-link block px-3 py-2 text-sm text-blue-600 bg-blue-50 rounded-md">Overview</a></li>
+                <li class="ml-4">
+                    <ul class="space-y-1">
+                        ${subAreas.map(subArea => `
+                            <li><a href="#${subArea.id}" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">${subArea.name}</a></li>
+                        `).join('')}
+                    </ul>
+                </li>
+                <li><a href="#resources" class="page-nav-link block px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors">Resources</a></li>
+            </ul>
+        </nav>
+    `;
+}
+
+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

@@ -0,0 +1,189 @@
+// pages/HomePage.js - Home page functionality for SPA
+import { createTeamMember } from '../main.js';
+import { createHomeAreaCard } from '../cards/HomeAreaCard.js';
+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';
+
+export function renderHomePage() {
+    const content = `
+        <!-- Page Background Image for Main Content -->
+        <div class="fixed opacity-40 z-0" style="top: 104px; left: 256px; right: 0; bottom: 0;" id="home-background-container">
+            <img src="images/${homeBackgroundImage.image}" alt="" class="w-full h-full object-cover pointer-events-none">
+            <!-- Attribution Tooltip -->
+            <div id="home-bg-attribution" class="absolute bottom-4 right-4 bg-black bg-opacity-75 text-white text-xs px-2 py-1 rounded opacity-0 transition-opacity duration-200 max-w-xs z-50">
+                <a href="${homeBackgroundImage.sourceUrl}" target="_blank" class="text-blue-300 hover:text-blue-100">
+                    ${homeBackgroundImage.attribution}
+                </a>
+            </div>
+        </div>
+        
+        <!-- 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>
+        
+                <!-- Research Areas Introduction -->
+                <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.
+                        </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>
+                </div>
+
+
+                <!-- 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>
+                </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 id="research-areas" class="space-y-8 relative z-20">
+            <!-- Area cards will be inserted here by JavaScript -->
+        </section>
+    `;
+
+    return {
+        content,
+        init: () => {
+            initializeTeamMembers();
+            initializeHomeAreaCards();
+            initializeArtifactCarousels();
+            initializeBackgroundAttribution();
+        }
+    };
+}
+
+export function getHomePageSidebar() {
+    return `
+        <nav class="p-4">
+            <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">On This Page</h3>
+            <ul class="space-y-1">
+                <li><a href="#intro" class="page-nav-link block px-3 py-2 text-sm text-blue-600 bg-blue-50 rounded-md">Team Introduction</a></li>
+                <li class="ml-4">
+                    <ul class="space-y-1">
+                        <li><a href="#recent-featured-works" class="page-nav-link block px-3 py-2 text-xs text-blue-600 bg-blue-50 rounded-md">Recent & Featured Works</a></li>
+                        <li><a href="#team-members" class="page-nav-link block px-3 py-2 text-xs text-blue-600 bg-blue-50 rounded-md">Team Members</a></li>        
+                    </ul>
+                </li>
+                <li><a href="#research-areas-header" class="page-nav-link block px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors">Research Areas</a></li>
+                <li class="ml-4">
+                    <ul class="space-y-1">
+                        <li><a href="#efficiency" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Efficiency & Environment</a></li>
+                        <li><a href="#personal" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Consent & Personal Interactions</a></li>
+                        <li><a href="#rights" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Rights & Regulation</a></li>
+                        <li><a href="#ecosystems" class="page-nav-link block px-3 py-2 text-xs text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md transition-colors">Socio-Economic & Technical Ecosystems</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </nav>
+    `;
+}
+
+function initializeTeamMembers() {
+    const teamContainer = document.getElementById('team-grid');
+    if (!teamContainer) {
+        return;
+    }
+
+    teamContainer.innerHTML = teamMembers.map(member => 
+        createTeamMember(member.name, member.role, member.username, member.tags)
+    ).join('');
+}
+
+function getAreaShortDescription(areaId) {
+    const descriptions = {
+        efficiency: 'Costs, energy, sustainability',
+        personal: 'Personal interactions, agency',
+        rights: 'Legal frameworks, compliance',
+        ecosystems: 'Markets, labor, power dynamics'
+    };
+    return descriptions[areaId] || '';
+}
+
+function initializeHomeAreaCards() {
+    const areasContainer = document.getElementById('research-areas');
+    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.imagePosition, area.imageAttribution, area.imageAltText)
+    ).join('');
+}
+
+function initializeArtifactCarousels() {
+    const carouselContainer = document.getElementById('featured-artifacts-carousel');
+    if (!carouselContainer) return;
+    
+    createArtifactCarousel(featuredArtifacts, 'featured-artifacts-carousel');
+}
+
+function initializeBackgroundAttribution() {
+    const backgroundContainer = document.getElementById('home-background-container');
+    const attribution = document.getElementById('home-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';
+    });
+}

js/pages/ResourcesPage.js

@@ -0,0 +1,234 @@
+// pages/ResourcesPage.js - Resources page functionality for SPA
+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';
+
+export function renderResourcesPage() {
+    const content = `
+        <!-- Page Background Image for Main Content -->
+        <div class="fixed opacity-40 z-0" style="top: 104px; left: 256px; right: 0; bottom: 0;" id="resources-background-container">
+            <img src="images/${homeBackgroundImage.image}" alt="" class="w-full h-full object-cover pointer-events-none">
+            <!-- Attribution Tooltip -->
+            <div id="resources-bg-attribution" class="absolute bottom-4 right-4 bg-black bg-opacity-75 text-white text-xs px-2 py-1 rounded opacity-0 transition-opacity duration-200 max-w-xs z-50">
+                <a href="${homeBackgroundImage.sourceUrl}" target="_blank" class="text-blue-300 hover:text-blue-100">
+                    ${homeBackgroundImage.attribution}
+                </a>
+            </div>
+        </div>
+
+        <!-- Technical Resources Section -->
+        <section id="technical-resources" 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-3xl font-bold text-gray-900 mb-6">Technical Resources</h2>
+                
+                <div class="mb-8">
+                    <p class="text-gray-700 leading-relaxed mb-6">
+                        Our team develops technical artifacts in the course of their research and policy work. 
+                        These resources include datasets, tools, benchmarks, and interactive applications that 
+                        support transparency, reproducibility, and accessibility in AI research and governance.
+                    </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: ${sampleResources.length * 624}px;">
+                            ${sampleResources.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>
+                </div>
+            </div>
+        </section>
+
+        <!-- Press Mentions Section -->
+        <section id="press-mentions" 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-3xl font-bold text-gray-900 mb-6">Press Mentions</h2>
+                
+                <div class="space-y-3">
+                    ${pressMentions.map((article, index) => {
+                        // Get the primary area for this article
+                        const primaryArea = areasData[article.areaTags[0]];
+                        const primaryColor = primaryArea?.primaryColor || 'gray';
+                        
+                        // Determine alignment (alternating)
+                        const isLeftAligned = index % 2 === 0;
+                        const alignment = isLeftAligned ? 'justify-start' : 'justify-end';
+                        const borderSide = isLeftAligned ? 'border-l-2' : 'border-r-2';
+                        const borderColor = `border-${primaryColor}-200`;
+                        
+                        // Format date
+                        const formattedDate = new Date(article.date).toLocaleDateString('en-US', {
+                            year: 'numeric',
+                            month: 'long',
+                            day: 'numeric'
+                        });
+                        
+                        // Generate area tags
+                        const areaTagsHtml = article.areaTags.map(areaId => {
+                            const area = areasData[areaId];
+                            if (!area) return '';
+                            return `<span class="px-2 py-1 rounded-full text-xs font-medium ${area.colors.medium}">${area.name}</span>`;
+                        }).join('');
+                        
+                        // Generate sub-area tags
+                        const subAreaTagsHtml = article.subAreaTags.map(subAreaKey => {
+                            // Find the sub-area name and color by looking through all areas
+                            let subAreaName = subAreaKey; // fallback to key if not found
+                            let textColor = 'text-gray-700'; // fallback color
+                            
+                            for (const areaKey in areasData) {
+                                const area = areasData[areaKey];
+                                if (area.subAreas && area.subAreas[subAreaKey]) {
+                                    const subArea = area.subAreas[subAreaKey];
+                                    subAreaName = typeof subArea === 'string' ? subArea : subArea.name;
+                                    // Extract just the text color from the sub-area color
+                                    if (typeof subArea === 'object' && subArea.color) {
+                                        const colorMatch = subArea.color.match(/text-(\w+)-(\d+)/);
+                                        if (colorMatch) {
+                                            textColor = `text-${colorMatch[1]}-700`; // Use consistent 700 shade
+                                        }
+                                    }
+                                    break;
+                                }
+                            }
+                            return `<span class="inline-block px-2 py-0.5 text-xs bg-gray-200 ${textColor} rounded">${subAreaName}</span>`;
+                        }).join('');
+                        
+                        return `
+                            <!-- Press Article ${index + 1} - ${isLeftAligned ? 'Left' : 'Right'} aligned -->
+                            <div class="flex items-center ${alignment}">
+                                <div class="flex-1 max-w-2xl">
+                                    <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">
+                                        </div>
+                                        
+                                        <div class="relative z-10">
+                                            <h3 class="text-base font-medium text-gray-900 mb-2">
+                                                <a href="${article.sourceUrl}" target="_blank" class="text-gray-900 hover:text-blue-600 transition-colors">
+                                                    "${article.title}"
+                                                </a>
+                                            </h3>
+                                            
+                                            <div class="flex items-center text-sm text-gray-600 mb-2">
+                                                <span class="bg-gray-600 text-white px-3 py-1 rounded-md text-xs font-semibold mr-3 shadow-sm">${article.source}</span>
+                                                <span class="mr-3">${formattedDate}</span>
+                                                <a href="${article.sourceUrl}" target="_blank" class="text-gray-400 hover:text-blue-600 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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                                                    </svg>
+                                                </a>
+                                            </div>
+                                            
+                                            <!-- Tags -->
+                                            <div class="flex flex-wrap gap-1">
+                                                ${areaTagsHtml}
+                                                ${subAreaTagsHtml}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        `;
+                    }).join('')}
+                </div>
+            </div>
+        </section>
+    `;
+
+    return {
+        content,
+        init: () => {
+            // Initialize background attribution
+            initializeResourcesBackgroundAttribution();
+            // Initialize resource cards
+            initializeResourceCards();
+            // Initialize resource carousel
+            initializeResourceCarousel();
+        }
+    };
+}
+
+export function getResourcesPageSidebar() {
+    return `
+        <nav class="p-4">
+            <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Resources</h3>
+            <ul class="space-y-1">
+                <li><a href="#technical-resources" class="page-nav-link block px-3 py-2 text-sm text-blue-600 bg-blue-50 rounded-md">Technical Resources</a></li>
+                <li><a href="#press-mentions" class="page-nav-link block px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors">Press Mentions</a></li>
+            </ul>
+        </nav>
+    `;
+}
+
+function initializeResourcesBackgroundAttribution() {
+    const backgroundContainer = document.getElementById('resources-background-container');
+    const attribution = document.getElementById('resources-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';
+    });
+}
+
+function initializeResourceCarousel() {
+    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 = sampleResources.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();
+}