File size: 1,560 Bytes
803ec5a |
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 |
// ContentSection.js - Reusable content section container
// Provides consistent frosted glass styling across all content sections
/**
* Wraps content in a frosted glass container
* @param {string} id - Section ID
* @param {string} content - Inner HTML content
* @param {object} options - Additional options
* @returns {string} HTML string for the section
*/
export function renderContentSection(id, content, options = {}) {
const {
className = 'mb-16',
opacity = '40', // Default 40% opacity like About section
blur = 'sm', // sm, md, lg
padding = 'p-6 md:p-10'
} = options;
return `
<section id="${id}" class="${className} relative z-20 px-4 sm:px-6 lg:px-8">
<div class="bg-white/${opacity} backdrop-blur-${blur} shadow-sm rounded-lg ${padding} w-full" style="max-width: min(90%, 1400px); margin: 0 auto;">
${content}
</div>
</section>
`;
}
/**
* Creates the standard "Role of Openness" callout box
* @param {string} text - The openness text content
* @returns {string} HTML string for the callout
*/
export function renderOpennessCallout(text) {
if (!text) return '';
return `
<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">${text}</p>
</div>
`;
}
|