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
25 lines
929 B
Plaintext
25 lines
929 B
Plaintext
---
|
|
interface Props { title: string; eyebrow?: string; description?: string; image?: string; alt?: string; }
|
|
const { title, eyebrow, description, image, alt = '' } = Astro.props;
|
|
---
|
|
<section class="hero">
|
|
<div class="container hero-grid">
|
|
<div>
|
|
{eyebrow && <p class="eyebrow">{eyebrow}</p>}
|
|
<h1>{title}</h1>
|
|
{description && <p class="hero-copy">{description}</p>}
|
|
<a class="button" href="/client-consultation">Get Started</a>
|
|
</div>
|
|
{image && <img src={image} alt={alt} loading="eager" />}
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.hero { background: var(--color-tint); overflow: hidden; padding-block: clamp(3rem, 7vw, 5rem); }
|
|
.hero-grid { align-items: center; display: grid; gap: var(--space-xl); grid-template-columns: 1.05fr .95fr; }
|
|
.hero img { max-height: 430px; object-fit: contain; width: 100%; }
|
|
@media (max-width: 950px) {
|
|
.hero-grid { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|