1---
2interface Props {
3 eyebrow: string;
4 title: string;
5 highlight?: string;
6 description?: string;
7}
8const { eyebrow, title, highlight, description } = Astro.props;
9---
10
11<div class="page-hero">
12 <div class="page-hero__inner">
13 <div class="page-hero__eyebrow">{eyebrow}</div>
14 <h1 class="page-hero__title">
15 {highlight && <span class="page-hero__highlight">{highlight}</span>}
16 {highlight && " "}
17 {title}
18 </h1>
19 {description && <p class="page-hero__desc">{description}</p>}
20 <div class="page-hero__cta"><slot name="cta" /></div>
21 </div>
22</div>
23
24<style>
25 .page-hero {
26 text-align: center;
27 padding: 8px 0 8px;
28 }
29 .page-hero__inner {
30 max-width: 760px;
31 margin: 0 auto;
32 }
33 .page-hero__eyebrow {
34 font-family: var(--alc-font-mono);
35 font-size: 11px;
36 letter-spacing: 0.14em;
37 text-transform: uppercase;
38 color: var(--alc-accent-deep);
39 font-weight: 500;
40 }
41 .page-hero__title {
42 font-family: var(--alc-font-serif);
43 font-weight: 500;
44 font-size: 56px;
45 line-height: 1.06;
46 letter-spacing: -0.02em;
47 margin: 18px 0 18px;
48 color: var(--alc-fg-1);
49 }
50 .page-hero__highlight {
51 color: var(--alc-accent-deep);
52 font-style: italic;
53 }
54 .page-hero__desc {
55 font-size: 17px;
56 line-height: 1.55;
57 color: var(--alc-fg-2);
58 max-width: 620px;
59 margin: 0 auto 26px;
60 }
61 .page-hero__cta {
62 display: flex;
63 justify-content: center;
64 gap: 10px;
65 flex-wrap: wrap;
66 }
67</style>