DeCentN2Madness
c6202d2ac6
Extends Button.astro with a center prop, native <button> element support (type, disabled, aria-describedby), harmonised padding (.65rem), and transition. Removes global .button, .button-small, .button-light, and .button-center rules from components.css, layout.css, and typography.css. Converts all inline class="button" usages across Header, HomeHero, HomeFinancialHelp, HomeServicesIntro, FormShell, TeamPage, CareersPage, and FaqPage to the <Button> component. Updates three scoped style selectors to :global() to reach the child component's elements.
41 lines
1.7 KiB
Plaintext
41 lines
1.7 KiB
Plaintext
---
|
|
import Button from '../Button.astro';
|
|
import type { ServicesIntroSection } from '../../types/home-sections';
|
|
interface Props { section: ServicesIntroSection }
|
|
const { section } = Astro.props;
|
|
---
|
|
<style>
|
|
.services-grid { display: grid; gap: clamp(2rem, 6vw, 5rem); }
|
|
.feature-grid--intro { grid-template-columns: .75fr 1.25fr; }
|
|
.feature-grid--reverse { grid-template-columns: 1.25fr .75fr; }
|
|
.gear-photo { justify-self: center; max-width: 270px; }
|
|
.gear-photo-right { outline-color: #dce0e5; }
|
|
.two-column-list { columns: 2; }
|
|
@media (max-width: 760px) {
|
|
.services-grid { gap: 2rem; }
|
|
.services-grid .feature-grid { grid-template-columns: 1fr; }
|
|
.feature-grid > .gear-photo-right { grid-row: 3; }
|
|
.two-column-list { columns: 1; }
|
|
}
|
|
</style>
|
|
|
|
<section class="section services-intro">
|
|
<div class="container services-grid">
|
|
<div class="feature-grid feature-grid--intro">
|
|
<img class="gear-photo" src={`/assets/images/${section.servicesImage}`} alt={section.servicesImageAlt} />
|
|
<div>
|
|
<h2>{section.servicesHeading}</h2>
|
|
<ul class="source-list">{section.services.map((item) => <li>{item}</li>)}</ul>
|
|
</div>
|
|
</div>
|
|
<div class="feature-grid feature-grid--intro feature-grid--reverse">
|
|
<div>
|
|
<h2 class="no-balance">{section.commitmentsHeading}</h2>
|
|
<ul class="source-list two-column-list">{section.commitments.map((item) => <li>{item}</li>)}</ul>
|
|
<Button href={section.commitmentsCta.href}>{section.commitmentsCta.label}</Button>
|
|
</div>
|
|
<img class="gear-photo gear-photo-right" src={`/assets/images/${section.commitmentsImage}`} alt={section.commitmentsImageAlt} />
|
|
</div>
|
|
</div>
|
|
</section>
|