Skip to content

Commit 112baee

Browse files
jeroenleenartsjeroenleenarts
committed
Improve tickets section.
1 parent 4a629a8 commit 112baee

1 file changed

Lines changed: 183 additions & 32 deletions

File tree

‎src/components/Tickets.astro‎

Lines changed: 183 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,201 @@
11
---
2+
interface Props {
3+
shop?: string;
4+
}
5+
6+
const { shop = "do-ios-2026" } = Astro.props;
7+
const paydroUrl = `https://appforce1.paydro.com/${shop}`;
8+
const embedUrl = `${paydroUrl}/embed?embed=true&header=false&info=false&map=false&social=false`;
29
---
310

4-
<section id="tickets">
5-
<h2>Conference Tickets</h2>
6-
<p>
7-
If below form does not work for you, likely your browser is blocking
8-
pop-ups. <a href="https://appforce1.paydro.com/do-ios-2026" target="_blank"
9-
>Try this link instead</a
10-
>.
11-
</p>
12-
<p>
13-
<iframe
14-
src="https://appforce1.paydro.com/do-ios-2026/embed?embed=true&header=false&info=false&map=false&social=false"
15-
frameborder="0"
16-
width="100%"
17-
height="1240"
18-
marginheight="0"
19-
marginwidth="0"
20-
allowtransparency="true"
21-
id="paydro-iframe"
22-
scrolling="no"
23-
data-shop="do-ios-2026"
24-
style="max-width: 650px;"></iframe>
25-
<!-- <script src="https://appforce1.paydro.com/js/paydro-embed.js"></script> -->
26-
</p>
27-
<p>
28-
If above form does not work for you, likely your browser is blocking
29-
pop-ups. <a href="https://appforce1.paydro.com/do-ios-2026" target="_blank"
30-
>Try this link instead</a
31-
>.
11+
<section id="tickets" class="tickets">
12+
<h2>Tickets</h2>
13+
<p class="tickets-intro">
14+
Choose the pass that fits your schedule. All options are available in our ticket shop.
3215
</p>
16+
17+
<ul class="tickets-types">
18+
<li>
19+
<strong>Workshop tickets</strong> — <span class="tickets-date">November 10</span>
20+
<span class="tickets-detail">Full-day workshops (workshop day only).</span>
21+
</li>
22+
<li>
23+
<strong>Conference tickets</strong> — <span class="tickets-date">November 11 &amp; 12</span>
24+
<span class="tickets-detail">Two days of talks at NEMO Science Museum.</span>
25+
</li>
26+
<li>
27+
<strong>Workshop + conference</strong> — <span class="tickets-date">November 10–12</span>
28+
<span class="tickets-detail">Workshop day plus both conference days (pick your workshop after they are announced).</span>
29+
</li>
30+
</ul>
31+
32+
<div class="tickets-cta">
33+
<a
34+
class="tickets-cta-button"
35+
href={paydroUrl}
36+
target="_blank"
37+
rel="noopener noreferrer"
38+
>
39+
Get your tickets
40+
</a>
41+
<p class="tickets-cta-note">Opens our secure ticket shop in a new tab (iDEAL, cards &amp; more).</p>
42+
</div>
43+
44+
<details class="tickets-embed">
45+
<summary>Or buy tickets on this page</summary>
46+
<div class="tickets-embed-frame">
47+
<iframe
48+
src={embedUrl}
49+
id="paydro-iframe"
50+
data-shop={shop}
51+
title="Do iOS ticket shop"
52+
width="100%"
53+
height="600"
54+
loading="lazy"
55+
allowtransparency="true"
56+
scrolling="no"
57+
></iframe>
58+
</div>
59+
<p class="tickets-fallback">
60+
Form not loading?
61+
<a href={paydroUrl} target="_blank" rel="noopener noreferrer">Open the ticket shop</a>.
62+
</p>
63+
</details>
3364
</section>
65+
66+
<script src="https://appforce1.paydro.com/js/paydro-embed.js" defer></script>
67+
3468
<style>
35-
h2 {
69+
.tickets h2 {
3670
font-size: 36px;
3771
line-height: 48px;
3872
letter-spacing: -1px;
3973
font-weight: 800;
74+
margin: 0;
4075
}
4176

42-
p {
77+
.tickets-intro {
4378
font-size: 18px;
4479
line-height: 28px;
80+
margin: 0 0 1rem;
81+
max-width: 42rem;
82+
}
83+
84+
.tickets-types {
85+
list-style: none;
86+
margin: 0 0 1.5rem;
87+
padding: 0;
88+
max-width: 42rem;
89+
}
90+
91+
.tickets-types li {
92+
font-size: 17px;
93+
line-height: 26px;
94+
padding: 0.75rem 0;
95+
border-bottom: 1px solid #e3e4e5;
96+
}
97+
98+
.tickets-types li:last-child {
99+
border-bottom: 0;
100+
}
101+
102+
.tickets-date {
103+
color: var(--my-blue);
104+
font-weight: 600;
105+
}
106+
107+
.tickets-detail {
108+
display: block;
109+
font-size: 15px;
110+
line-height: 22px;
111+
color: #666;
112+
margin-top: 0.25rem;
113+
}
114+
115+
.tickets-cta {
116+
text-align: center;
117+
margin-bottom: 2rem;
118+
}
119+
120+
.tickets-cta-button {
121+
display: inline-block;
122+
background: #ff6b6b;
123+
color: white;
124+
padding: 1rem 2.5rem;
125+
border-radius: 2rem;
126+
font-size: 1.2rem;
127+
font-weight: bold;
128+
text-decoration: none;
129+
transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
130+
}
131+
132+
.tickets-cta-button:hover {
133+
background: #ff4757;
134+
transform: translateY(-2px);
135+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
136+
}
137+
138+
.tickets-cta-note {
139+
font-size: 15px;
140+
line-height: 22px;
141+
color: #666;
142+
margin: 0.75rem 0 0;
143+
}
144+
145+
.tickets-embed {
146+
margin-top: 1rem;
147+
border-top: 1px solid #e3e4e5;
148+
padding-top: 1rem;
149+
}
150+
151+
.tickets-embed summary {
152+
font-size: 16px;
153+
font-weight: 600;
154+
color: var(--my-blue);
155+
cursor: pointer;
156+
list-style: none;
157+
display: inline-block;
158+
}
159+
160+
.tickets-embed summary::-webkit-details-marker {
161+
display: none;
162+
}
163+
164+
.tickets-embed summary::after {
165+
content: " ↓";
166+
font-size: 0.85em;
167+
}
168+
169+
.tickets-embed[open] summary::after {
170+
content: " ↑";
171+
}
172+
173+
.tickets-embed-frame {
174+
margin: 1.25rem auto 0;
175+
max-width: 650px;
176+
background: #ffffff;
177+
border-radius: 0.75rem;
178+
box-shadow: 0 2px 16px rgba(10, 36, 99, 0.08);
179+
border: 1px solid #e3e4e5;
180+
overflow: hidden;
181+
}
182+
183+
.tickets-embed-frame iframe {
184+
display: block;
185+
width: 100%;
186+
min-height: 400px;
187+
border: 0;
188+
}
189+
190+
.tickets-fallback {
191+
font-size: 15px;
192+
line-height: 22px;
193+
text-align: center;
194+
margin: 0.75rem 0 0;
45195
}
46196

47-
iframe {
48-
height: 1100px;
197+
.tickets-fallback a {
198+
color: var(--my-blue);
199+
font-weight: 600;
49200
}
50201
</style>

0 commit comments

Comments
 (0)