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.
31 lines
1.2 KiB
Plaintext
31 lines
1.2 KiB
Plaintext
---
|
|
import Button from '../Button.astro';
|
|
import type { HeroSection } from '../../types/home-sections';
|
|
interface Props { section: HeroSection }
|
|
const { section } = Astro.props;
|
|
---
|
|
<section class="home-hero">
|
|
<div class="container home-hero-grid">
|
|
<div>
|
|
<p class="eyebrow">{section.eyebrow}</p>
|
|
<h1 set:html={section.heading} />
|
|
<p>{section.body}</p>
|
|
<Button href={section.cta.href}>{section.cta.label}</Button>
|
|
</div>
|
|
<img src={`/assets/images/${section.image}`} alt={section.imageAlt} loading="eager" />
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.home-hero { background: var(--color-tint); overflow: hidden; }
|
|
.home-hero-grid { align-items: end; display: grid; grid-template-columns: 1fr .9fr; min-height: 520px; padding-top: 4rem; }
|
|
.home-hero-grid > div { align-self: center; padding-bottom: 4rem; }
|
|
.home-hero-grid p:not(.eyebrow) { max-width: 570px; }
|
|
.home-hero-grid img { align-self: end; justify-self: end; max-height: 500px; object-fit: contain; }
|
|
@media (max-width: 760px) {
|
|
.home-hero-grid { grid-template-columns: 1fr; padding-top: 3rem; text-align: center; }
|
|
.home-hero-grid > div { padding-bottom: 1rem; }
|
|
.home-hero-grid img { justify-self: center; max-height: 330px; }
|
|
}
|
|
</style>
|