refactor(home): move page content into per-language YAML sections
All visible text, lists, image refs, and CTAs for the home page now live in en/index.md and es/index.md as a typed `sections:` frontmatter array. HomePage.astro is reduced to a thin router; each section type is rendered by a dedicated component in src/components/home/. Adds .no-balance utility class to suppress text-wrap: balance on the commitments heading. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,18 @@
|
||||
---
|
||||
import type { BenefitsSection } from '../../types/home-sections';
|
||||
interface Props { section: BenefitsSection }
|
||||
const { section } = Astro.props;
|
||||
---
|
||||
<section class="section cream-section">
|
||||
<div class="container feature-grid benefit-grid">
|
||||
<div>
|
||||
<h2>{section.heading}</h2>
|
||||
<h3>{section.subheading}</h3>
|
||||
<ul class="source-list">{section.items.map((item) => <li>{item}</li>)}</ul>
|
||||
</div>
|
||||
<a class="video-card" href={section.videoHref}>
|
||||
<img src={`/assets/images/${section.videoImage}`} alt={section.videoImageAlt} />
|
||||
<span>▶</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
import type { DirectorSection } from '../../types/home-sections';
|
||||
interface Props { section: DirectorSection }
|
||||
const { section } = Astro.props;
|
||||
---
|
||||
<section class="section family-section">
|
||||
<div class="container feature-grid">
|
||||
<div class="director-card">
|
||||
<img src={`/assets/images/${section.photo}`} alt={section.photoAlt} />
|
||||
<p><strong>{section.name}</strong><br />{section.credentials}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>{section.heading}</h2>
|
||||
<p>{section.quote}</p>
|
||||
<img class="signature" src={`/assets/images/${section.signature}`} alt={section.signatureAlt} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
import type { EsaSection } from '../../types/home-sections';
|
||||
interface Props { section: EsaSection }
|
||||
const { section } = Astro.props;
|
||||
---
|
||||
<section class="section cream-section">
|
||||
<div class="container feature-grid esa-grid">
|
||||
<div>
|
||||
<h2>{section.heading}</h2>
|
||||
<p>{section.body}</p>
|
||||
</div>
|
||||
<img src={`/assets/images/${section.image}`} alt={section.imageAlt} />
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
import type { FinancialHelpSection } from '../../types/home-sections';
|
||||
interface Props { section: FinancialHelpSection }
|
||||
const { section } = Astro.props;
|
||||
---
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2>{section.heading}</h2>
|
||||
<p>{section.body}</p>
|
||||
<a class="button" href={section.cta.href}>{section.cta.label}</a>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,16 @@
|
||||
---
|
||||
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="script-label">{section.eyebrow}</p>
|
||||
<h1 set:html={section.heading} />
|
||||
<p>{section.body}</p>
|
||||
<a class="button" href={section.cta.href}>{section.cta.label}</a>
|
||||
</div>
|
||||
<img src={`/assets/images/${section.image}`} alt={section.imageAlt} loading="eager" />
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,16 @@
|
||||
---
|
||||
import type { InsuranceSection } from '../../types/home-sections';
|
||||
interface Props { section: InsuranceSection }
|
||||
const { section } = Astro.props;
|
||||
---
|
||||
<section class="section insurance-section">
|
||||
<div class="container">
|
||||
<h2>{section.heading}</h2>
|
||||
<p>{section.body}</p>
|
||||
<div class="logo-row">
|
||||
{section.logos.map(({ file, alt }) => (
|
||||
<img src={`/assets/images/${file}`} alt={alt} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
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>
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
import type { ServicesIntroSection } from '../../types/home-sections';
|
||||
interface Props { section: ServicesIntroSection }
|
||||
const { section } = Astro.props;
|
||||
---
|
||||
<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>
|
||||
<a class="button" href={section.commitmentsCta.href}>{section.commitmentsCta.label}</a>
|
||||
</div>
|
||||
<img class="gear-photo gear-photo-right" src={`/assets/images/${section.commitmentsImage}`} alt={section.commitmentsImageAlt} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
import type { SkillsSection } from '../../types/home-sections';
|
||||
interface Props { section: SkillsSection }
|
||||
const { section } = Astro.props;
|
||||
---
|
||||
<section class="skills-section">
|
||||
<div class="container">
|
||||
<h2>{section.heading}</h2>
|
||||
<div class="skills-grid">
|
||||
{section.skills.map(({ icon, label }) => (
|
||||
<div>
|
||||
<img src={`/assets/images/${icon}`} alt="" />
|
||||
<span>{label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,15 @@
|
||||
---
|
||||
import type { TestimonialsSection } from '../../types/home-sections';
|
||||
interface Props { section: TestimonialsSection }
|
||||
const { section } = Astro.props;
|
||||
---
|
||||
<section class="section cream-section testimonial-section">
|
||||
<div class="container">
|
||||
<h2>{section.heading}</h2>
|
||||
<blockquote>
|
||||
<strong>{section.featured.author}</strong>
|
||||
{section.featured.paragraphs.map((p) => <p>{p}</p>)}
|
||||
</blockquote>
|
||||
<div class="testimonial-dots" aria-hidden="true">• • • • • • • • • • •</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user