Skip to content

Commit 070c822

Browse files
mike767mike767
authored
Merge pull request #47 from DefGuard/no-onscroll-sections
LP content update - new UVP
2 parents 426ca88 + 58083ff commit 070c822

Some content is hidden

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

50 files changed

+3195
-2021
lines changed

‎public/images/data/api.png

11.4 KB
Loading

‎public/images/data/enrollment-screen.png

30.6 KB
Loading

‎public/images/data/oidc-logos.png

31.4 KB
Loading

‎public/images/data/signinwith.png

13.4 KB
Loading

‎src/components/AstroButton.astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ if (link?.preload) {
4444
.astro-btn {
4545
background-color: transparent;
4646
box-sizing: border-box;
47-
padding: 24px 64px;
47+
padding: 20px 48px;
4848
display: flex;
4949
flex-flow: row;
5050
align-items: center;

‎src/components/CTASection.astro

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,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(
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, white);
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+

‎src/components/FlexibleSection.astro

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
---
2+
import clsx from "clsx";
3+
import ContentLimiter from "./ContentLimiter.astro";
4+
5+
interface Props {
6+
title: string | any;
7+
titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
8+
className?: string;
9+
id?: string;
10+
maxWidth?: number;
11+
variant?: 'white' | 'gray';
12+
theme?: 'light' | 'dark';
13+
}
14+
15+
const {
16+
title,
17+
titleTag: TitleTag = 'h2',
18+
className,
19+
id,
20+
maxWidth = 1100,
21+
variant = 'white',
22+
theme = 'light',
23+
} = Astro.props;
24+
---
25+
26+
<section
27+
class={clsx(
28+
"flexible-section",
29+
`variant-${variant}`,
30+
`theme-${theme}`,
31+
className
32+
)}
33+
id={id}
34+
aria-labelledby={id ? `${id}-title` : undefined}
35+
>
36+
<ContentLimiter maxWidth={maxWidth}>
37+
<div class="flexible-content">
38+
<div class="header">
39+
<TitleTag class="section-title" id={id ? `${id}-title` : undefined} set:html={title}></TitleTag>
40+
</div>
41+
42+
<slot />
43+
44+
<div class="columns-container">
45+
<div class="column left-column">
46+
<slot name="left" />
47+
</div>
48+
49+
<div class="column right-column">
50+
<slot name="right" />
51+
</div>
52+
</div>
53+
</div>
54+
</ContentLimiter>
55+
</section>
56+
57+
<style lang="scss">
58+
@use "../styles/mixins" as *;
59+
60+
.flexible-section {
61+
width: 100%;
62+
padding: 4rem 0;
63+
64+
&.variant-white {
65+
background-color: var(--background-primary, white);
66+
}
67+
68+
&.variant-gray {
69+
background-color: var(--background-secondary, #f5f5f5);
70+
}
71+
72+
&.theme-light {
73+
color: var(--text-body-primary, #333);
74+
75+
.section-title {
76+
color: var(--text-heading-primary, #111);
77+
}
78+
}
79+
80+
&.theme-dark {
81+
color: var(--text-body-light, #f5f5f5);
82+
background-color: var(--background-dark, #222);
83+
84+
.section-title {
85+
color: var(--text-heading-light, white);
86+
}
87+
}
88+
89+
.flexible-content {
90+
display: flex;
91+
flex-direction: column;
92+
width: 100%;
93+
94+
.header {
95+
width: 100%;
96+
box-sizing: border-box;
97+
padding-bottom: 2rem;
98+
99+
.section-title {
100+
margin-bottom: 1rem;
101+
font-size: 2rem;
102+
font-weight: 700;
103+
line-height: 1.2;
104+
105+
@media (min-width: 768px) {
106+
font-size: 2.5rem;
107+
margin-bottom: 1.5rem;
108+
}
109+
}
110+
}
111+
112+
.columns-container {
113+
display: flex;
114+
flex-direction: column;
115+
width: 100%;
116+
gap: 2rem;
117+
118+
@media (min-width: 768px) {
119+
flex-direction: row;
120+
gap: 2rem;
121+
}
122+
123+
.column {
124+
width: 100%;
125+
display: flex;
126+
flex-direction: column;
127+
128+
@media (min-width: 768px) {
129+
width: calc(50% - 1rem); // explicit width calculation
130+
}
131+
132+
&.left-column, &.right-column {
133+
display: flex;
134+
flex-direction: column;
135+
136+
// Container elements with images
137+
> div, > p {
138+
width: 100%;
139+
140+
img {
141+
width: 100%;
142+
height: auto !important; // Force auto height
143+
display: block;
144+
}
145+
}
146+
147+
// Direct image children
148+
> img {
149+
width: 100%;
150+
height: auto !important; // Force auto height
151+
display: block;
152+
}
153+
}
154+
}
155+
}
156+
}
157+
}
158+
</style>
159+

0 commit comments

Comments
 (0)