Initial idea for the ticket page

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

@@ -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>

src/components/note/note.tsx

@@ -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>
   );
 };

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

@@ -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 (14-15 July)",
+      "Access to Sprint Weekend (19-20 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 (16-18 July)</strong>",
+      "Access to Sprint Weekend (19-20 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 (14-20 July)</strong>",
+      "Workshop/Tutorial Days (14-15 July)",
+      "Conference Days (16-18 July)",
+      "Sprint Weekend (19-20 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 27 June 2025, 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 (16-18 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 (16-18 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>