Skip to content

Initial idea for the ticket page #1042

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Initial idea for the ticket page #1042

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1e119c4
Initial idea for the ticket page
artcz Mar 12, 2025
ad1ba4c
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Mar 12, 2025
29033f2
Apply suggestions from code review
clytaemnestra Mar 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions src/components/hero-section/title-with-cta.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
---
import ButtonLink from "../button-link/button-link.astro";
import { Title } from "../typography/title";

interface Props {
title: string;
subtitle: string;
buttonText?: string;
buttonUrl?: string;
}

const { title, subtitle, buttonText, buttonUrl } = Astro.props;
---

<div class="py-12 text-center">
<Title level={1} className="mb-4">{title}</Title>
<p class="text-2xl max-w-3xl mx-auto mb-8">{subtitle}</p>

{buttonText && buttonUrl && (
<div class="mt-8">
<ButtonLink url={buttonUrl}>{buttonText}</ButtonLink>
</div>
)}

<slot />
</div>
6 changes: 4 additions & 2 deletions src/components/note/note.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
export const Note = ({ children }: { children: string }) => {
export const Note = ({ children }: { children: React.ReactNode }) => {
return (
<p className="note text-xl p-4 border-l-4 border-primary">{children}</p>
<p className="note text-xl p-4 border-l-4 border-primary bg-primary-light my-6">
{children}
</p>
);
};
212 changes: 212 additions & 0 deletions src/components/ticket-tiers/ticket-tiers.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
---
import { Title } from "../typography/title";

interface Props {
ticketShopLink: string;
}

interface TicketTierProps {
title: string;
educationPrice: number | string;
personalPrice: number | string;
businessPrice: number | string;
lateBusinessPrice?: number | string;
latePersonalPrice?: number | string;
features: string[];
}

const tiers: TicketTierProps[] = [
{
title: "Tutorial Only",
educationPrice: 100,
personalPrice: 200,
businessPrice: 400,
features: [
"Access to Workshop/Tutorial Days (8-9 July)",
"Access to Sprint Weekend (13-14 July)",
"<strong>Does NOT include</strong> the main Conference Days",
"Break refreshments and light lunch included",
"Free childcare available if needed",
"T-shirt"
],
},
{
title: "Conference Only",
educationPrice: 135,
personalPrice: 300,
businessPrice: 500,
latePersonalPrice: 450,
lateBusinessPrice: 750,
features: [
"<strong>Access to Conference Days (10-12 July)</strong>",
"Access to Sprint Weekend (13-14 July)",
"Limited access to specific sponsored workshops",
"Break refreshments and light lunch included",
"Free childcare available if needed",
"T-shirt"
],
},
{
title: "Combined",
educationPrice: 210,
personalPrice: 450,
businessPrice: 800,
latePersonalPrice: 675,
lateBusinessPrice: 1200,
features: [
"<strong>Access to ALL conference dates (8-14 July)</strong>",
"Workshop/Tutorial Days (8-9 July)",
"Conference Days (10-12 July)",
"Sprint Weekend (13-14 July)",
"Break refreshments and light lunch included",
"Free childcare available if needed",
"T-shirt",
"<strong>Limited to only 300, due to Tutorial capacity</strong>"
],
},
];

const formatPrice = (price: number | string) => {
if (typeof price === "string") return price;
return new Intl.NumberFormat("en", {
style: "currency",
currency: "EUR",
maximumFractionDigits: 0,
minimumFractionDigits: 0,
}).format(price);
};
---

<div class="ticket-tiers-container">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold">Ticket Types</h2>
<p class="text-xl mt-2">Choose the ticket that best fits your conference needs</p>
<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>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-10 md:gap-6 lg:gap-10">
{tiers.map((tier) => (
<div class="bg-white text-black rounded-2xl p-6 pb-20 relative not-prose z-0">
<div class="h-[160px]">
<Title level={3} className="mt-0 !mb-2">
{tier.title}
</Title>

<div class="mt-4">
<div class="font-bold text-lg">Education: <span class="text-xl">{formatPrice(tier.educationPrice)}</span></div>
<div class="font-bold text-lg">Personal: <span class="text-xl">{formatPrice(tier.personalPrice)}</span>
{tier.latePersonalPrice && (
<span class="text-sm font-normal ml-2">(Late: {formatPrice(tier.latePersonalPrice)})</span>
)}
</div>
<div class="font-bold text-lg">Business: <span class="text-xl">{formatPrice(tier.businessPrice)} (+ VAT)</span>
{tier.lateBusinessPrice && (
<span class="text-sm font-normal ml-2">(Late: {formatPrice(tier.lateBusinessPrice)} + VAT)</span>
)}
</div>
</div>
</div>

<p class="font-bold text-base">This ticket includes:</p>
<ul class="text-base list-none pl-0">
{tier.features.map((feature) => (
<li class="flex items-start">
<span class="flex-shrink-0 w-6">✔️</span>
<span set:html={feature}></span>
</li>
))}
</ul>
</div>
))}
</div>

<div class="text-center mb-8 mt-16">
<h2 class="text-3xl font-bold">Remote Tickets</h2>
<p class="text-xl mt-2 mb-12">For those who cannot attend in person but want to participate virtually</p>
</div>

<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">
<div class="bg-white text-black rounded-2xl p-6 pb-20 relative not-prose z-0">
<div class="h-[160px]">
<Title level={3} className="mt-0 !mb-2">
Remote Personal
</Title>
<div class="font-bold text-3xl">€80</div>
<div class="text-xl mt-4">Conference days only</div>
</div>

<p class="font-bold text-base">This ticket includes:</p>
<ul class="text-base list-none pl-0">
<li class="flex items-start">
<span class="flex-shrink-0 w-6">✔️</span>
<span>Remote participation for Conference Days (10-12 July)</span>
</li>
<li class="flex items-start">
<span class="flex-shrink-0 w-6">✔️</span>
<span>Watch live talks, keynotes & panels in all 6 tracks</span>
</li>
<li class="flex items-start">
<span class="flex-shrink-0 w-6">✔️</span>
<span>Live text-based Q&A</span>
</li>
<li class="flex items-start">
<span class="flex-shrink-0 w-6">✔️</span>
<span>Interact with speakers and attendees in chat channels</span>
</li>
</ul>
</div>

<div class="bg-white text-black rounded-2xl p-6 pb-20 relative not-prose z-0">
<div class="h-[160px]">
<Title level={3} className="mt-0 !mb-2">
Remote Business
</Title>
<div class="font-bold text-3xl">€150</div>
<div class="text-xl mt-4">Conference days only</div>
</div>

<p class="font-bold text-base">This ticket includes:</p>
<ul class="text-base list-none pl-0">
<li class="flex items-start">
<span class="flex-shrink-0 w-6">✔️</span>
<span>Remote participation for Conference Days (10-12 July)</span>
</li>
<li class="flex items-start">
<span class="flex-shrink-0 w-6">✔️</span>
<span>Watch live talks, keynotes & panels in all 6 tracks</span>
</li>
<li class="flex items-start">
<span class="flex-shrink-0 w-6">✔️</span>
<span>Live text-based Q&A</span>
</li>
<li class="flex items-start">
<span class="flex-shrink-0 w-6">✔️</span>
<span>Interact with speakers and attendees in chat channels</span>
</li>
<li class="flex items-start">
<span class="flex-shrink-0 w-6">✔️</span>
<span><strong>Proper VAT invoice listing company name</strong></span>
</li>
</ul>
</div>
</div>
</div>

<style is:global>
.ticket-tiers-container {
width: 100vw;
max-width: 1400px;
margin-left: 50%;
transform: translateX(-50%);
position: relative;
padding: 0 40px;
}

@media (max-width: 768px) {
.ticket-tiers-container {
width: 100%;
padding: 0 10px;
position: relative;
}
}
</style>
Loading