Skip to content

Commit 951a035

Browse files
4lb4lb
committed
deployment error fix
1 parent bc5c2b6 commit 951a035

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+4905
-4771
lines changed

‎src/components/CTASection.astro‎

Lines changed: 114 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,114 @@
1-
---
2-
import clsx from "clsx";
3-
import ContentLimiter from "./ContentLimiter.astro";
4-
import AstroButton from "./AstroButton.astro";
5-
6-
interface Props {
7-
title: string;
8-
description: string;
9-
buttonText: string;
10-
buttonLink: string;
11-
buttonTarget?: string;
12-
className?: string;
13-
id?: string;
14-
maxWidth?: number;
15-
variant?: 'white' | 'gray';
16-
theme?: 'light' | 'dark';
17-
}
18-
19-
const {
20-
title,
21-
description,
22-
buttonText,
23-
buttonLink,
24-
buttonTarget = "_self",
25-
className,
26-
id,
27-
maxWidth = 900,
28-
variant = 'gray',
29-
theme = 'light',
30-
} = Astro.props;
31-
---
32-
33-
<section
34-
class={clsx(
35-
"cta-section",
36-
`variant-${variant}`,
37-
`theme-${theme}`,
38-
className
39-
)}
40-
id={id}
41-
aria-labelledby={id ? `${id}-title` : undefined}
42-
>
43-
<ContentLimiter maxWidth={maxWidth}>
44-
<div class="cta-content">
45-
<h2 class="cta-title" id={id ? `${id}-title` : undefined}>{title}</h2>
46-
<div class="cta-button-container">
47-
<AstroButton
48-
text={buttonText}
49-
link={{
50-
href: buttonLink,
51-
target: buttonTarget,
52-
preload: true,
53-
}}
54-
/>
55-
</div>
56-
<p class="cta-description">{description}</p>
57-
</div>
58-
</ContentLimiter>
59-
</section>
60-
61-
<style lang="scss">
62-
@use "../styles/mixins" as *;
63-
64-
.cta-section {
65-
width: 100%;
66-
padding: 5rem 0;
67-
68-
&.variant-white {
69-
background-color: var(--background-primary, #f9f9f9);
70-
}
71-
72-
&.variant-gray {
73-
background-color: var(--background-secondary, #f5f5f5);
74-
}
75-
76-
&.theme-light {
77-
color: var(--text-body-primary, #333);
78-
79-
.cta-title {
80-
color: var(--text-heading-primary, #111);
81-
}
82-
}
83-
84-
&.theme-dark {
85-
color: var(--text-body-light, #f5f5f5);
86-
background-color: var(--background-dark, #222);
87-
88-
.cta-title {
89-
color: var(--text-heading-light, white);
90-
}
91-
}
92-
93-
.cta-content {
94-
display: flex;
95-
flex-direction: column;
96-
align-items: center;
97-
justify-content: center;
98-
text-align: center;
99-
width: 100%;
100-
101-
.cta-title {
102-
@include typography(h2);
103-
margin-bottom: 1.5rem;
104-
max-width: 800px;
105-
}
106-
107-
.cta-description {
108-
@include typography(paragraph);
109-
margin-top: 1.5rem;
110-
margin-bottom: 0;
111-
max-width: 700px;
112-
}
113-
114-
.cta-button-container {
115-
margin-bottom: 0;
116-
}
117-
}
118-
}
119-
</style>
120-
1+
---
2+
import clsx from "clsx";
3+
import ContentLimiter from "./ContentLimiter.astro";
4+
import AstroButton from "./AstroButton.astro";
5+
6+
interface Props {
7+
title: string;
8+
description: string;
9+
buttonText: string;
10+
buttonLink: string;
11+
buttonTarget?: string;
12+
className?: string;
13+
id?: string;
14+
maxWidth?: number;
15+
variant?: "white" | "gray";
16+
theme?: "light" | "dark";
17+
}
18+
19+
const {
20+
title,
21+
description,
22+
buttonText,
23+
buttonLink,
24+
buttonTarget = "_self",
25+
className,
26+
id,
27+
maxWidth = 900,
28+
variant = "gray",
29+
theme = "light",
30+
} = Astro.props;
31+
---
32+
33+
<section
34+
class={clsx("cta-section", `variant-${variant}`, `theme-${theme}`, className)}
35+
id={id}
36+
aria-labelledby={id ? `${id}-title` : undefined}
37+
>
38+
<ContentLimiter maxWidth={maxWidth}>
39+
<div class="cta-content">
40+
<h2 class="cta-title" id={id ? `${id}-title` : undefined}>{title}</h2>
41+
<div class="cta-button-container">
42+
<AstroButton
43+
text={buttonText}
44+
link={{
45+
href: buttonLink,
46+
target: buttonTarget,
47+
preload: true,
48+
}}
49+
/>
50+
</div>
51+
<p class="cta-description">{description}</p>
52+
</div>
53+
</ContentLimiter>
54+
</section>
55+
56+
<style lang="scss">
57+
@use "../styles/mixins" as *;
58+
59+
.cta-section {
60+
width: 100%;
61+
padding: 5rem 0;
62+
63+
&.variant-white {
64+
background-color: var(--background-primary, #f9f9f9);
65+
}
66+
67+
&.variant-gray {
68+
background-color: var(--background-secondary, #f5f5f5);
69+
}
70+
71+
&.theme-light {
72+
color: var(--text-body-primary, #333);
73+
74+
.cta-title {
75+
color: var(--text-heading-primary, #111);
76+
}
77+
}
78+
79+
&.theme-dark {
80+
color: var(--text-body-light, #f5f5f5);
81+
background-color: var(--background-dark, #222);
82+
83+
.cta-title {
84+
color: var(--text-heading-light, white);
85+
}
86+
}
87+
88+
.cta-content {
89+
display: flex;
90+
flex-direction: column;
91+
align-items: center;
92+
justify-content: center;
93+
text-align: center;
94+
width: 100%;
95+
96+
.cta-title {
97+
@include typography(h2);
98+
margin-bottom: 1.5rem;
99+
max-width: 800px;
100+
}
101+
102+
.cta-description {
103+
@include typography(paragraph);
104+
margin-top: 1.5rem;
105+
margin-bottom: 0;
106+
max-width: 700px;
107+
}
108+
109+
.cta-button-container {
110+
margin-bottom: 0;
111+
}
112+
}
113+
}
114+
</style>

0 commit comments

Comments
 (0)