File size: 2,233 Bytes
aeeb334 a2ed9b3 aeeb334 a2ed9b3 aeeb334 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
// HomeAreaCard.js - Area card component for homepage
import { areasData } from '../data/areas.js';
export function createHomeAreaCard(id, title, description, openness, subAreas, image, imagePosition = 'left', imageAttribution = null, altText = null) {
const flexDirection = imagePosition === 'left' ? 'lg:flex-row' : 'lg:flex-row-reverse';
const subAreasList = subAreas.map(area => `<li>${area}</li>`).join('');
// Use provided alt text or fallback to title
const imgAlt = altText || title;
// Create attribution text if provided
const attribution = imageAttribution ?
`<p class="text-xs text-gray-500 mt-2 text-center">${imageAttribution}</p>` : '';
return `
<div id="${id}" class="bg-white rounded-lg shadow-sm overflow-hidden" style="min-height: 300px;">
<div class="flex flex-col ${flexDirection}">
<div class="lg:w-2/3 p-8">
<h2 class="text-2xl font-bold text-gray-900 mb-4">${title}</h2>
<p class="text-gray-700 mb-6">${description}</p>
${openness ? `
<div class="mb-6 px-6 pt-4 pb-6 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-3">The Role of Openness</p>
<p class="text-orange-800 italic leading-relaxed">${openness}</p>
</div>
` : ''}
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-900 mb-3">Sub-areas</h3>
<ul class="list-disc list-inside text-gray-700 space-y-1">
${subAreasList}
</ul>
</div>
</div>
<div class="lg:w-1/3 bg-gray-100">
<div class="h-full flex flex-col items-center justify-center p-8">
<img src="images/${image}" alt="${imgAlt}" class="max-w-full max-h-full object-contain">
${attribution}
</div>
</div>
</div>
</div>
`;
}
|