DeCentN2Madness
a163ff98c9
- relocate header, footer, nav, hero, and page-hero styles into their owning components - move blog index, blog post, team, video, insurance, CTA, and home-section styles out of the global sheet - keep focused on shared primitives such as buttons, cards, links, and list styling - preserve existing layout and responsive behavior while reducing global CSS scope
43 lines
1.5 KiB
Plaintext
43 lines
1.5 KiB
Plaintext
---
|
|
import type { ProcessSection } from '../../types/home-sections';
|
|
interface Props { section: ProcessSection }
|
|
const { section } = Astro.props;
|
|
---
|
|
<section class="section cream-section process-section">
|
|
<div class="container">
|
|
<h2>{section.heading}</h2>
|
|
<div class="process-grid">
|
|
{section.steps.map(({ icon, label }) => (
|
|
<div>
|
|
<img src={`/assets/images/${icon}`} alt="" />
|
|
<p>{label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.process-section h2 { text-align: center; }
|
|
.process-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
|
|
.process-grid div { background: white; min-height: 190px; padding: 3.2rem 1rem; position: relative; text-align: center; transition: transform .3s ease-in-out; }
|
|
.process-grid div:hover { transform: scale(1.05); z-index: 1; }
|
|
.process-grid img { margin: 0 auto 1rem; width: 42%; }
|
|
@media (max-width: 760px) {
|
|
.process-grid { grid-template-columns: 1fr 1fr; }
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function equalizeProcessCards() {
|
|
const cards = [...document.querySelectorAll('.process-grid > div')] as HTMLElement[];
|
|
cards.forEach(c => (c.style.height = ''));
|
|
const max = Math.max(...cards.map(c => c.offsetHeight));
|
|
if (max > 0) cards.forEach(c => (c.style.height = `${max}px`));
|
|
}
|
|
document.fonts.ready.then(() => {
|
|
equalizeProcessCards();
|
|
window.addEventListener('resize', equalizeProcessCards);
|
|
});
|
|
</script>
|