Skip to content

Commit 1e119c4

Browse files
artczartcz
committed
Initial idea for the ticket page
1 parent ba0cbb1 commit 1e119c4

File tree

4 files changed

+429
-2
lines changed

4 files changed

+429
-2
lines changed

‎src/components/hero-section/title-with-cta.astro

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
import ButtonLink from "../button-link/button-link.astro";
3+
import { Title } from "../typography/title";
4+
5+
interface Props {
6+
title: string;
7+
subtitle: string;
8+
buttonText?: string;
9+
buttonUrl?: string;
10+
}
11+
12+
const { title, subtitle, buttonText, buttonUrl } = Astro.props;
13+
---
14+
15+
<div class="py-12 text-center">
16+
<Title level={1} className="mb-4">{title}</Title>
17+
<p class="text-2xl max-w-3xl mx-auto mb-8">{subtitle}</p>
18+
19+
{buttonText && buttonUrl && (
20+
<div class="mt-8">
21+
<ButtonLink url={buttonUrl}>{buttonText}</ButtonLink>
22+
</div>
23+
)}
24+
25+
<slot />
26+
</div>

‎src/components/note/note.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
export const Note = ({ children }: { children: string }) => {
1+
export const Note = ({ children }: { children: React.ReactNode }) => {
22
return (
3-
<p className="note text-xl p-4 border-l-4 border-primary">{children}</p>
3+
<p className="note text-xl p-4 border-l-4 border-primary bg-primary-light my-6">{children}</p>
44
);
55
};

‎src/components/ticket-tiers/ticket-tiers.astro

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
---
2+
import { Title } from "../typography/title";
3+
4+
interface Props {
5+
ticketShopLink: string;
6+
}
7+
8+
interface TicketTierProps {
9+
title: string;
10+
educationPrice: number | string;
11+
personalPrice: number | string;
12+
businessPrice: number | string;
13+
lateBusinessPrice?: number | string;
14+
latePersonalPrice?: number | string;
15+
features: string[];
16+
}
17+
18+
const tiers: TicketTierProps[] = [
19+
{
20+
title: "Tutorial Only",
21+
educationPrice: 100,
22+
personalPrice: 200,
23+
businessPrice: 400,
24+
features: [
25+
"Access to Workshop/Tutorial Days (8-9 July)",
26+
"Access to Sprint Weekend (13-14 July)",
27+
"<strong>Does NOT include</strong> the main Conference Days",
28+
"Break refreshments and light lunch included",
29+
"Free childcare available if needed",
30+
"T-shirt"
31+
],
32+
},
33+
{
34+
title: "Conference Only",
35+
educationPrice: 135,
36+
personalPrice: 300,
37+
businessPrice: 500,
38+
latePersonalPrice: 450,
39+
lateBusinessPrice: 750,
40+
features: [
41+
"<strong>Access to Conference Days (10-12 July)</strong>",
42+
"Access to Sprint Weekend (13-14 July)",
43+
"Limited access to specific sponsored workshops",
44+
"Break refreshments and light lunch included",
45+
"Free childcare available if needed",
46+
"T-shirt"
47+
],
48+
},
49+
{
50+
title: "Combined",
51+
educationPrice: 210,
52+
personalPrice: 450,
53+
businessPrice: 800,
54+
latePersonalPrice: 675,
55+
lateBusinessPrice: 1200,
56+
features: [
57+
"<strong>Access to ALL conference dates (8-14 July)</strong>",
58+
"Workshop/Tutorial Days (8-9 July)",
59+
"Conference Days (10-12 July)",
60+
"Sprint Weekend (13-14 July)",
61+
"Break refreshments and light lunch included",
62+
"Free childcare available if needed",
63+
"T-shirt",
64+
"<strong>Limited to only 300, due to Tutorial capacity</strong>"
65+
],
66+
},
67+
];
68+
69+
const formatPrice = (price: number | string) => {
70+
if (typeof price === "string") return price;
71+
return new Intl.NumberFormat("en", {
72+
style: "currency",
73+
currency: "EUR",
74+
maximumFractionDigits: 0,
75+
minimumFractionDigits: 0,
76+
}).format(price);
77+
};
78+
---
79+
80+
<div class="ticket-tiers-container">
81+
<div class="text-center mb-8">
82+
<h2 class="text-3xl font-bold">Ticket Types</h2>
83+
<p class="text-xl mt-2">Choose the ticket that best fits your conference needs</p>
84+
<p class="text-xl mt-[-10px] mb-12 font-bold italic">Regular tickets available until 21 June 2024, after which Late-bird rates apply</p>
85+
</div>
86+
87+
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-10 md:gap-6 lg:gap-10">
88+
{tiers.map((tier) => (
89+
<div class="bg-white text-black rounded-2xl p-6 pb-20 relative not-prose z-0">
90+
<div class="h-[160px]">
91+
<Title level={3} className="mt-0 !mb-2">
92+
{tier.title}
93+
</Title>
94+
95+
<div class="mt-4">
96+
<div class="font-bold text-lg">Education: <span class="text-xl">{formatPrice(tier.educationPrice)}</span></div>
97+
<div class="font-bold text-lg">Personal: <span class="text-xl">{formatPrice(tier.personalPrice)}</span>
98+
{tier.latePersonalPrice && (
99+
<span class="text-sm font-normal ml-2">(Late: {formatPrice(tier.latePersonalPrice)})</span>
100+
)}
101+
</div>
102+
<div class="font-bold text-lg">Business: <span class="text-xl">{formatPrice(tier.businessPrice)} (+ VAT)</span>
103+
{tier.lateBusinessPrice && (
104+
<span class="text-sm font-normal ml-2">(Late: {formatPrice(tier.lateBusinessPrice)} + VAT)</span>
105+
)}
106+
</div>
107+
</div>
108+
</div>
109+
110+
<p class="font-bold text-base">This ticket includes:</p>
111+
<ul class="text-base list-none pl-0">
112+
{tier.features.map((feature) => (
113+
<li class="flex items-start">
114+
<span class="flex-shrink-0 w-6">✔️</span>
115+
<span set:html={feature}></span>
116+
</li>
117+
))}
118+
</ul>
119+
</div>
120+
))}
121+
</div>
122+
123+
<div class="text-center mb-8 mt-16">
124+
<h2 class="text-3xl font-bold">Remote Tickets</h2>
125+
<p class="text-xl mt-2 mb-12">For those who cannot attend in person but want to participate virtually</p>
126+
</div>
127+
128+
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-9 lg:gap-10 w-full md:w-5/6 lg:w-3/4 mx-auto">
129+
<div class="bg-white text-black rounded-2xl p-6 pb-20 relative not-prose z-0">
130+
<div class="h-[160px]">
131+
<Title level={3} className="mt-0 !mb-2">
132+
Remote Personal
133+
</Title>
134+
<div class="font-bold text-3xl">€80</div>
135+
<div class="text-xl mt-4">Conference days only</div>
136+
</div>
137+
138+
<p class="font-bold text-base">This ticket includes:</p>
139+
<ul class="text-base list-none pl-0">
140+
<li class="flex items-start">
141+
<span class="flex-shrink-0 w-6">✔️</span>
142+
<span>Remote participation for Conference Days (10-12 July)</span>
143+
</li>
144+
<li class="flex items-start">
145+
<span class="flex-shrink-0 w-6">✔️</span>
146+
<span>Watch live talks, keynotes & panels in all 6 tracks</span>
147+
</li>
148+
<li class="flex items-start">
149+
<span class="flex-shrink-0 w-6">✔️</span>
150+
<span>Live text-based Q&A</span>
151+
</li>
152+
<li class="flex items-start">
153+
<span class="flex-shrink-0 w-6">✔️</span>
154+
<span>Interact with speakers and attendees in chat channels</span>
155+
</li>
156+
</ul>
157+
</div>
158+
159+
<div class="bg-white text-black rounded-2xl p-6 pb-20 relative not-prose z-0">
160+
<div class="h-[160px]">
161+
<Title level={3} className="mt-0 !mb-2">
162+
Remote Business
163+
</Title>
164+
<div class="font-bold text-3xl">€150</div>
165+
<div class="text-xl mt-4">Conference days only</div>
166+
</div>
167+
168+
<p class="font-bold text-base">This ticket includes:</p>
169+
<ul class="text-base list-none pl-0">
170+
<li class="flex items-start">
171+
<span class="flex-shrink-0 w-6">✔️</span>
172+
<span>Remote participation for Conference Days (10-12 July)</span>
173+
</li>
174+
<li class="flex items-start">
175+
<span class="flex-shrink-0 w-6">✔️</span>
176+
<span>Watch live talks, keynotes & panels in all 6 tracks</span>
177+
</li>
178+
<li class="flex items-start">
179+
<span class="flex-shrink-0 w-6">✔️</span>
180+
<span>Live text-based Q&A</span>
181+
</li>
182+
<li class="flex items-start">
183+
<span class="flex-shrink-0 w-6">✔️</span>
184+
<span>Interact with speakers and attendees in chat channels</span>
185+
</li>
186+
<li class="flex items-start">
187+
<span class="flex-shrink-0 w-6">✔️</span>
188+
<span><strong>Proper VAT invoice listing company name</strong></span>
189+
</li>
190+
</ul>
191+
</div>
192+
</div>
193+
</div>
194+
195+
<style is:global>
196+
.ticket-tiers-container {
197+
width: 100vw;
198+
max-width: 1400px;
199+
margin-left: 50%;
200+
transform: translateX(-50%);
201+
position: relative;
202+
padding: 0 40px;
203+
}
204+
205+
@media (max-width: 768px) {
206+
.ticket-tiers-container {
207+
width: 100%;
208+
padding: 0 10px;
209+
position: relative;
210+
}
211+
}
212+
</style>

0 commit comments

Comments
 (0)