tighter introduction

js/data/areas.js

@@ -134,7 +134,7 @@ export const areasData = {
         topics: {
             power: {
                 id: 'power',
-                name: 'De-Centralized Markets, Development, and Sovereignty',
+                name: '(De-)Centralized Markets, Development, and Sovereignty',
                 description: {
                     short: 'Market concentration dynamics and technological sovereignty questions.',
                     paragraphs: [

js/pages/HomePage.js

@@ -41,23 +41,50 @@ export function renderHomePage() {
         ${renderHomeNavigation()}
         
         ${renderContentSection('about-and-works', `
-            <h3 id="about" class="text-xl md:text-2xl font-bold text-gray-900 mb-8 text-center">About</h3>
+            <h3 id="about" class="text-xl md:text-2xl font-bold text-gray-900 mb-8 text-center">AI, ML, and Society</h3>
             
-            <div class="space-y-2 text-gray-900 leading-relaxed mb-8">
-                <p>
-                    Artificial Intelligence has evolved rapidly over the past five years: from a largely hidden infrastructure to a visible, consumer-facing force driven by generative systems that now shape everyday interactions.
-                    This change has expanded how AI interacts with society, making shared understanding and collaborative engagement – outside of the control of a limited set of commercial developers – more critical.
-                    Openly accessible models, documented datasets, and reproducible workflows are an essential component of this engagement.
-                </p>
+            <div class="space-y-4 text-gray-900 mb-10">
+                <div class="text-base">
+                    Artificial Intelligence has evolved rapidly over the last five years from a hidden foundation of digital infrastructure to a ubiquitous consumer-facing technology, expanding its societal roles and interactions; 
+                    and with it, the need for structures that enable all concerned parties to understand, verify, and broadly participate in its design, including notably when looking to:
+                </div>
                 
-                <p>
-                    In the broader context of ${createInlineLink('Hugging Face', 'https://huggingface.co', 'bg-yellow-100 text-yellow-800')} efforts to support this open approach to AI,
-                    the ${createInlineLink('Machine Learning and Society', 'https://huggingface.co/hfmlsoc', 'bg-blue-100 text-blue-800')} team works on projects targeting topics at the boundary between technology and society.
-                    These include measuring and improving the ${createInlineLink('Sustainability', '/sustainability', areasData.sustainability.color, areasData.sustainability.description.short)} of the technology,
-                    characterizing and supporting the ${createInlineLink('Agency', '/agency', areasData.agency.color, areasData.agency.description.short)} of individuals and communities in their interactions with AI,
-                    and understanding the economic and regulatory ${createInlineLink('Ecosystems of AI', '/ecosystems', areasData.ecosystems.color, areasData.ecosystems.description.short)} that shape who benefits from the technology.
-                    Our approach is rooted in open production of research and tools, and we actively invite partners from all areas of expertise to reach out and collaborate.
-                </p>
+                <!-- Compact, elegant list with strong visual identity -->
+                <ul class="my-8 ml-12">
+                    <li class="relative pl-12 py-3 border-l-2 border-green-200/60 hover:border-green-300 transition-colors">
+                        <span class="absolute left-[-0.6rem] top-[1.1rem] w-4 h-4 rounded-full bg-white border-2 border-green-300 shadow-sm"></span>
+                        <div class="text-base leading-loose font-medium">
+                            The ${createInlineLink('Sustainability', '/sustainability', areasData.sustainability.color, areasData.sustainability.description.short)} of the technology, through better
+                            ${createInlineLink('measurement', '/sustainability#measuring', areasData.sustainability.topics.measuring.color, areasData.sustainability.topics.measuring.description.short)} and
+                            ${createInlineLink('efficiency', '/sustainability#efficiency', areasData.sustainability.topics.efficiency.color, areasData.sustainability.topics.efficiency.description.short)}.
+                        </div>
+                    </li>
+                    
+                    <li class="relative pl-12 py-3 border-l-2 border-purple-200/60 hover:border-purple-300 transition-colors">
+                        <span class="absolute left-[-0.6rem] top-[1.1rem] w-4 h-4 rounded-full bg-white border-2 border-purple-300 shadow-sm"></span>
+                        <div class="text-base leading-loose font-medium">
+                            The ${createInlineLink('Agency', '/agency', areasData.agency.color, areasData.agency.description.short)} of
+                            ${createInlineLink('individuals', '/agency#personal', areasData.agency.topics.personal.color, areasData.agency.topics.personal.description.short)} and
+                            ${createInlineLink('communities', '/agency#community', areasData.agency.topics.community.color, areasData.agency.topics.community.description.short)} in their interactions with AI.
+                        </div>
+                    </li>
+                    
+                    <li class="relative pl-12 py-3 border-l-2 border-orange-200/60 hover:border-orange-300 transition-colors">
+                        <span class="absolute left-[-0.6rem] top-[1.1rem] w-4 h-4 rounded-full bg-white border-2 border-orange-300 shadow-sm"></span>
+                        <div class="text-base leading-loose font-medium">
+                            The ${createInlineLink('Ecosystems', '/ecosystems', areasData.ecosystems.color, areasData.ecosystems.description.short)} that shape AI,
+                            including ${createInlineLink('economic', '/ecosystems#economy', areasData.ecosystems.topics.economy.color, areasData.ecosystems.topics.economy.description.short)} and
+                            ${createInlineLink('regulatory', '/ecosystems#regulation', areasData.ecosystems.topics.regulation.color, areasData.ecosystems.topics.regulation.description.short)} and the impact of
+                            ${createInlineLink('concentrations of resources', '/ecosystems#power', areasData.ecosystems.topics.power.color, areasData.ecosystems.topics.power.description.short)} on those.
+                        </div>
+                    </li>
+                </ul>
+                
+                <div class="text-base pt-4">
+                    This website presents the work of the ${createInlineLink('Machine Learning and Society', 'https://huggingface.co/hfmlsoc', 'bg-blue-100 text-blue-800')} team at Hugging Face on these topics.
+                    Our approach is rooted in open production of research and tools and in leveraging the unique contributions of open models, datasets, and research.
+                    We actively invite partners from all areas of expertise to reach out and collaborate.
+                </div>
             </div>
             
             <h3 id="recent-works" class="text-xl md:text-2xl font-bold text-gray-900 mb-8 text-center mt-8 pt-8 border-t border-gray-200">Recent & Featured Works</h3>
@@ -76,7 +103,7 @@ export function renderHomePage() {
             <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">
+            <div class="prose text-base 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,