Skip to content

Commit 2d2f440

Browse files
author
Michał Gryczka
committed
Enhance BookDemoForm component: added discussion topics with checkboxes for user selection, updated form submission to include selected topics, and improved styling for better user experience. Updated demo page layout and content for clarity and engagement.
1 parent cc74731 commit 2d2f440

5 files changed

Lines changed: 956 additions & 81 deletions

File tree

‎src/components/form/BookDemoForm/BookDemoForm.tsx‎

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,19 @@ interface BookDemoFormProps {
1818
submit_text?: string;
1919
}
2020

21+
const discussionTopics = [
22+
{ id: "legacy_vpn", label: "Migrating from OpenVPN / FortiGate / Cisco etc." },
23+
{ id: "sso_integration", label: "SSO integration (Entra ID, Google, Okta)" },
24+
{ id: "compliance", label: "How to set up MFA for WireGuard" },
25+
{ id: "deployment", label: "Automated deployment (Intune, MDM)" },
26+
{ id: "high_availability", label: "Secure By Design Architecture principles" },
27+
{ id: "multi_cloud", label: "Multi-cloud / hybrid infrastructure" },
28+
];
29+
2130
const BookDemoForm = ({ submit_text = "Submit" }: BookDemoFormProps) => {
2231
const [okMessage, setOkMessage] = useState(false);
2332
const [errorMessage, setErrorMessage] = useState(false);
33+
const [selectedTopics, setSelectedTopics] = useState<string[]>([]);
2434
const [values, setValues] = useState<BookDemoType>({
2535
first_name: "",
2636
last_name: "",
@@ -41,14 +51,32 @@ const BookDemoForm = ({ submit_text = "Submit" }: BookDemoFormProps) => {
4151
setValues({ ...values, [name]: value });
4252
};
4353

54+
const handleTopicChange = (topicId: string, checked: boolean) => {
55+
if (checked) {
56+
setSelectedTopics([...selectedTopics, topicId]);
57+
} else {
58+
setSelectedTopics(selectedTopics.filter(t => t !== topicId));
59+
}
60+
};
61+
4462
const onSubmit = () => {
4563
const data = new FormData();
4664

65+
// Build topics string
66+
const selectedTopicLabels = discussionTopics
67+
.filter(t => selectedTopics.includes(t.id))
68+
.map(t => `• ${t.label}`)
69+
.join("\n");
70+
71+
const topicsSection = selectedTopicLabels
72+
? `\n\nTopics to discuss:\n${selectedTopicLabels}`
73+
: "";
74+
4775
data.append("email", values.email);
4876
data.append("website_url", values.website_url);
4977
data.append(
5078
"tell_us_more",
51-
`${values.tell_us_more} \n\nform_source:${window.location.pathname + window.location.search + window.location.hash}`,
79+
`${values.tell_us_more}${topicsSection}\n\nform_source:${window.location.pathname + window.location.search + window.location.hash}`,
5280
);
5381
data.append("company_name",values.first_name+" "+values.last_name);
5482
data.append("vat_id", "");
@@ -101,9 +129,30 @@ const BookDemoForm = ({ submit_text = "Submit" }: BookDemoFormProps) => {
101129
<input type="text" required name="website_url" onChange={handleInputChange} />
102130
</label>
103131
</div>
132+
<div className="topics-section">
133+
<p className="topics-label">What would you like to discuss? <span className="optional">(optional)</span></p>
134+
<div className="topics-grid">
135+
{discussionTopics.map((topic) => (
136+
<label key={topic.id} className="topic-checkbox">
137+
<input
138+
type="checkbox"
139+
checked={selectedTopics.includes(topic.id)}
140+
onChange={(e) => { handleTopicChange(topic.id, e.target.checked); }}
141+
/>
142+
<span className="checkmark"></span>
143+
<span className="topic-label">{topic.label}</span>
144+
</label>
145+
))}
146+
</div>
147+
</div>
104148
<label className="single-input" htmlFor="tell_us_more">
105-
Anything else you wish to tell us?
106-
<textarea rows={7} name="tell_us_more" onChange={handleInputChange}></textarea>
149+
Anything else you wish to tell us? <span className="optional">(optional)</span>
150+
<textarea
151+
rows={5}
152+
name="tell_us_more"
153+
onChange={handleInputChange}
154+
placeholder="e.g., Current VPN solution, number of users, specific requirements..."
155+
></textarea>
107156
</label>
108157
<div className="button">
109158
<Button text={submit_text} type="submit" />

‎src/components/form/BookDemoForm/style.scss‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,4 +105,109 @@
105105
padding: 16px 32px;
106106
}
107107
}
108+
109+
.optional {
110+
font-weight: 400;
111+
color: var(--text-body-secondary, #666);
112+
font-size: 0.875em;
113+
}
114+
115+
.topics-section {
116+
display: flex;
117+
flex-direction: column;
118+
gap: 12px;
119+
120+
.topics-label {
121+
@include typography(paragraph);
122+
margin: 0;
123+
font-weight: 500;
124+
}
125+
126+
.topics-grid {
127+
display: grid;
128+
grid-template-columns: repeat(2, 1fr);
129+
gap: 10px;
130+
131+
@include break-down(md) {
132+
grid-template-columns: 1fr;
133+
}
134+
}
135+
136+
.topic-checkbox {
137+
display: flex;
138+
align-items: center;
139+
gap: 10px;
140+
cursor: pointer;
141+
padding: 10px 12px;
142+
border: 1px solid var(--border-separator, #e5e7eb);
143+
border-radius: 8px;
144+
transition: all 0.2s ease;
145+
flex-direction: row;
146+
147+
&:hover {
148+
border-color: var(--surface-main-primary);
149+
background: rgba(12, 140, 224, 0.02);
150+
}
151+
152+
&:has(input:checked) {
153+
border-color: var(--surface-main-primary);
154+
background: rgba(12, 140, 224, 0.05);
155+
}
156+
157+
input[type="checkbox"] {
158+
display: none;
159+
}
160+
161+
.checkmark {
162+
width: 18px;
163+
height: 18px;
164+
min-width: 18px;
165+
border: 2px solid var(--border-separator, #d1d5db);
166+
border-radius: 4px;
167+
display: flex;
168+
align-items: center;
169+
justify-content: center;
170+
transition: all 0.2s ease;
171+
172+
&::after {
173+
content: "";
174+
width: 10px;
175+
height: 10px;
176+
background: var(--surface-main-primary);
177+
border-radius: 2px;
178+
opacity: 0;
179+
transform: scale(0);
180+
transition: all 0.2s ease;
181+
}
182+
}
183+
184+
input:checked + .checkmark {
185+
border-color: var(--surface-main-primary);
186+
187+
&::after {
188+
opacity: 1;
189+
transform: scale(1);
190+
}
191+
}
192+
193+
.topic-label {
194+
font-size: 13px;
195+
color: var(--text-body-primary);
196+
line-height: 1.4;
197+
}
198+
}
199+
}
200+
201+
textarea {
202+
min-height: 100px;
203+
padding: 12px;
204+
font-family: inherit;
205+
font-size: 14px;
206+
line-height: 1.5;
207+
resize: vertical;
208+
209+
&::placeholder {
210+
color: var(--text-body-secondary, #999);
211+
}
212+
}
108213
}

‎src/pages/_home/components/TrustedBy.astro‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import ContentLimiter from "../../../components/ContentLimiter.astro";
33
44
import { Image } from "astro:assets";
5-
import wideStreet from "./assets/trustedBy/widestreet.png";
5+
// import wideStreet from "./assets/trustedBy/widestreet.png";
66
import vki from "./assets/trustedBy/vki.png";
77
import deepImage from "./assets/trustedBy/deep-image.png";
88
import prusa from "./assets/trustedBy/prusa.png";
@@ -25,7 +25,7 @@ const { forceScroll = false } = Astro.props;
2525
<div class="track">
2626
<Image src={prusa} alt="prusa logo image" />
2727
<!-- <Image src={penske} alt="team penske logo image" /> -->
28-
<Image src={wideStreet} alt="widestreet logo image" />
28+
<!-- <Image src={wideStreet} alt="widestreet logo image" /> -->
2929
<Image src={acquinox} alt="acquinox logo image" />
3030
<Image src={hostinger} alt="hostinger logo image" />
3131
<Image src={vki} alt="vki logo image" />
@@ -35,7 +35,7 @@ const { forceScroll = false } = Astro.props;
3535
<div class="scroll-duplicate">
3636
<Image src={prusa} alt="prusa logo image" />
3737
<!-- <Image src={penske} alt="team penske logo image" /> -->
38-
<Image src={wideStreet} alt="widestreet logo image" />
38+
<!-- <Image src={wideStreet} alt="widestreet logo image" /> -->
3939
<Image src={acquinox} alt="acquinox logo image" />
4040
<Image src={hostinger} alt="hostinger logo image" />
4141
<Image src={vki} alt="vki logo image" />
@@ -87,11 +87,21 @@ const { forceScroll = false } = Astro.props;
8787
align-items: center;
8888
column-gap: 50px;
8989

90+
img {
91+
max-height: 48px;
92+
width: auto;
93+
}
94+
9095
@include break-up(lg) {
9196
flex-flow: row wrap;
9297
justify-content: space-between;
93-
row-gap: 8px;
98+
row-gap: 12px;
9499
column-gap: 50px;
100+
101+
img {
102+
max-height: 56px;
103+
width: auto;
104+
}
95105
}
96106

97107
@include break-down(lg) {
@@ -100,7 +110,7 @@ const { forceScroll = false } = Astro.props;
100110
padding: 15px 0;
101111

102112
img {
103-
max-height: 40px;
113+
max-height: 48px;
104114
width: auto;
105115
}
106116
}
@@ -129,7 +139,7 @@ const { forceScroll = false } = Astro.props;
129139
justify-content: flex-start;
130140

131141
img {
132-
max-height: 50px;
142+
max-height: 56px;
133143
width: auto;
134144
}
135145

@@ -151,10 +161,15 @@ const { forceScroll = false } = Astro.props;
151161
flex-flow: row nowrap;
152162
justify-content: flex-start;
153163

164+
img {
165+
max-height: 60px;
166+
width: auto;
167+
}
168+
154169
.scroll-duplicate {
155170
display: flex;
156171
align-items: center;
157-
column-gap: 30px;
172+
column-gap: 40px;
158173
}
159174
}
160175
}

0 commit comments

Comments
 (0)