fix: update ticket URLs and improve badge text for purchase and past events pages (#174)

* fix: update ticket URLs and improve badge text for purchase and past events pages

* feat: expire the super early bird ticket

* Revert "feat: expire the super early bird ticket"

This reverts commit b7827a7.

* fix: add deadline and enable properties to CALLS_2026; include ctaNote in PageHero component

Author: suchit-sheth

src/components/PageHero.jsx

@@ -3,9 +3,9 @@ import { useEffect, useRef } from "react";
 /**
  * PageHero — shared hero for all inner pages.
  * Mirrors Hero.jsx design exactly; only content differs via props.
- * @param {{ badge: string, title: string, titleGradient: string, subtitle: string, primaryCta: { text: string, href: string, external?: boolean }, secondaryCta?: { text: string, href: string, external?: boolean } }} props
+ * @param {{ badge: string, title: string, titleGradient: string, subtitle: string, primaryCta: { text: string, href: string, external?: boolean }, secondaryCta?: { text: string, href: string, external?: boolean }, ctaNote?: string }} props
  */
-const PageHero = ({ badge, title, titleGradient, subtitle, primaryCta, secondaryCta }) => {
+const PageHero = ({ badge, title, titleGradient, subtitle, primaryCta, secondaryCta, ctaNote }) => {
   const sectionRef = useRef(null);
   const hashTagList = ["#OSDIn2026", "#OSDIndia2026", "#OpenSourceDay"];
   useEffect(() => {
@@ -71,6 +71,12 @@ const PageHero = ({ badge, title, titleGradient, subtitle, primaryCta, secondary
               </a>
             )}
           </div>
+
+          {ctaNote && (
+            <div class="text-gray-600 mt-6 pt-6 border-t border-gray-200 w-full">
+              <span class="font-semibold">Deadline:</span> {ctaNote}
+            </div>
+          )}
         </div>
 
         {/* Hashtag footer — mirrors Hero.jsx */}

src/config/config.ts

@@ -86,14 +86,18 @@ export const CALLS_2026 = [
     emoji: "🎤",
     color: "from-violet-500 to-purple-600",
     badge: "Open",
+    deadline: "15th March 2026",
+    enable: true,
   },
   {
     title: "Call for Volunteers",
     description: "Help us make OSD 2026 an unforgettable experience for everyone.",
     href: "/cfv",
     emoji: "🙌",
     color: "from-emerald-500 to-green-600",
-    badge: "Open",
+    badge: "CLOSED",
+    deadline: "CLOSED",
+    enable: false,
   },
   {
     title: "Call for Sponsors",
@@ -102,6 +106,8 @@ export const CALLS_2026 = [
     emoji: "🤝",
     color: "from-amber-500 to-orange-600",
     badge: "Open",
+    deadline: "31st March 2026",
+    enable: true,
   },
   {
     title: "Call for Community Partners",
@@ -110,6 +116,8 @@ export const CALLS_2026 = [
     emoji: "🌐",
     color: "from-sky-500 to-blue-600",
     badge: "Open",
+    deadline: "31st March 2026",
+    enable: true,
   },
   {
     title: "Call for Evangelists",
@@ -118,6 +126,8 @@ export const CALLS_2026 = [
     emoji: "📣",
     color: "from-pink-500 to-rose-600",
     badge: "Open",
+    deadline: "21st March 2026",
+    enable: true,
   },
 ];
 
@@ -373,7 +383,7 @@ export const TICKETS = [
       text: "Coming Soon",
       classes: "text-white bg-green-500",
     },
-    konfhubUrl: "",
+    konfhubUrl: "/purchase",
     linkText: "Coming Soon",
   },
   {
@@ -388,7 +398,7 @@ export const TICKETS = [
       text: "Most Popular",
       classes: "text-white bg-green-600",
     },
-    konfhubUrl: "",
+    konfhubUrl: "/purchase",
     linkText: "Coming Soon",
   },
   {
@@ -474,7 +484,7 @@ export const TICKETS = [
       "Appreciation Memento from OSD",
     ],
     popular: false,
-    available: false,
+    available: true,
     konfhubUrl: "mailto:opensourceweekend@gmail.com",
     linkText: "Contact Organizers",
     extra:
@@ -501,7 +511,7 @@ export const TICKETS = [
       "Appreciation Memento from OSD",
     ],
     popular: false,
-    available: false,
+    available: true,
     konfhubUrl: "mailto:opensourceweekend@gmail.com",
     linkText: "Contact Organizers",
     extra:

src/pages/index.astro

@@ -71,24 +71,55 @@ const allSpeakers = ((speakersData as any)?.speakers?.[0]?.ourSpeakers ?? [])
 
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {CALLS_2026.map((call) => (
-          <a
-            href={call.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="group border border-gray-100 bg-white hover:border-green-200 hover:shadow-lg p-7 rounded-2xl transition-all duration-300 flex flex-col"
-          >
-            <div class="w-11 h-11 bg-green-50 border border-green-100 rounded-xl mb-5 flex items-center justify-center text-xl group-hover:bg-green-500 group-hover:scale-110 transition-all duration-300">
-              {call.emoji}
+          <div class="group border border-gray-100 bg-white hover:border-green-200 hover:shadow-lg p-7 rounded-2xl transition-all duration-300 flex flex-col">
+            <!-- Header: Icon + Badge -->
+            <div class="flex items-center justify-between mb-6">
+              <div class="w-11 h-11 bg-green-50 border border-green-100 rounded-xl flex items-center justify-center text-xl group-hover:bg-green-500 group-hover:text-white group-hover:scale-110 transition-all duration-300">
+                {call.emoji}
+              </div>
+              <span class={`text-xs px-2.5 py-1 rounded-full font-bold uppercase tracking-wide border ${
+                call.badge === "Open"
+                  ? "bg-green-50 text-green-700 border-green-100"
+                  : "bg-red-50 text-red-700 border-red-100"
+              }`}>
+                {call.badge}
+              </span>
+            </div>
+
+            <!-- Title -->
+            <h3 class="text-lg font-bold text-gray-900 mb-3">{call.title}</h3>
+
+            <!-- Description -->
+            <p class="text-gray-500 text-sm leading-relaxed flex-1 mb-4">{call.description}</p>
+
+            <!-- Deadline -->
+            <div class="text-sm text-gray-600 mb-6 pb-6 border-b border-gray-100">
+              <span class="font-semibold">Deadline:</span> {call.deadline}
             </div>
-            <h3 class="text-lg font-bold text-gray-900 mb-2">{call.title}</h3>
-            <p class="text-gray-500 text-sm leading-relaxed flex-1">{call.description}</p>
-            <div class="mt-5 flex items-center text-sm font-semibold text-green-600 group-hover:text-green-700">
+
+            <!-- CTA -->
+            {
+              call.enable ? <a
+              href={call.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center justify-center gap-2 bg-green-500 hover:bg-green-600 text-white font-semibold py-3 px-4 rounded-lg transition-all duration-300 group-hover:shadow-md"
+            >
               Apply Now
-              <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
               </svg>
-            </div>
-          </a>
+            </a> : <button
+              class="inline-flex items-center justify-center gap-2 bg-green-500 hover:bg-green-600 text-white font-semibold py-3 px-4 rounded-lg transition-all duration-300 group-hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
+              disabled
+            >
+              Apply Now
+              <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+              </svg>
+            </button>
+            }
+          </div>
         ))}
       </div>
 
@@ -178,7 +209,7 @@ const allSpeakers = ((speakersData as any)?.speakers?.[0]?.ourSpeakers ?? [])
           ))}
         </div>
       </div>
- 
+
     </div>
   </section>
 
@@ -393,13 +424,32 @@ const allSpeakers = ((speakersData as any)?.speakers?.[0]?.ourSpeakers ?? [])
 
         <div class="flex flex-col gap-3 mb-auto">
           {TICKETS.slice(0, 3).map((t) => (
-            <div class="flex justify-between items-center p-3 bg-gray-50 rounded-xl border border-gray-100">
+            <div class="p-3 bg-gray-50 rounded-xl border border-gray-100 flex flex-col gap-4">
+
+            <div class="flex justify-between items-center">
               <div>
                 <div class="font-semibold text-gray-900 text-sm">{t.name}</div>
                 <div class="text-xs text-gray-400 mt-0.5">{t.description?.slice(0, 55)}…</div>
               </div>
               <div class="font-bold text-green-700 text-sm shrink-0 ml-2">{t.price}</div>
             </div>
+            {t.available ? (
+                <a
+                  href={t.konfhubUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class={`block w-full px-6 py-2 rounded-full font-bold text-sm transition-all text-center ${t.popular ? "bg-gray-900 hover:bg-gray-800 text-white" : "border-2 border-gray-200 hover:border-gray-900 text-gray-700"}`}
+                >
+                  {t.linkText || "Coming Soon"}
+                </a>
+              ) : (
+                <button
+                  class={`block w-full px-6 py-2 rounded-full font-bold text-sm transition-all ${t.popular ? "bg-gray-900 hover:bg-gray-800 text-white" : "border-2 border-gray-200 hover:border-gray-900 text-gray-700"}`}
+                >
+                  {t.linkText || "Coming Soon"}
+                </button>
+              )}
+            </div>
           ))}
         </div>
         <a href="/tickets" class="mt-6 block text-center bg-green-500 hover:bg-green-400 text-white px-6 py-3 rounded-full font-bold text-sm transition-all glow-effect hover:scale-105">

src/pages/past-events.astro

@@ -12,7 +12,7 @@ const osd2025Photos = PastEvent[0]?.images?.slice(0, 4) ?? [];
   <!-- Hero -->
   <PageHero
     client:load
-    badge="5 YEARS OF OPEN SOURCE"
+    badge="5 YEARS OF OPEN SOURCE DAY"
     title="OUR"
     titleGradient="PAST EVENTS"
     subtitle="From humble beginnings to India's largest open source conference — look back at the journey."

src/pages/purchase.astro

@@ -1,8 +1,6 @@
 ---
 import Layout from "@/layouts/Layout.astro";
 import "@/styles/2025/global.css";
-import { TICKETS } from "@/config/config.ts";
-import PageHero from "@/components/PageHero.jsx";
 
 import { ticketsData } from "@/lib/graphql/queries/tickets.query.ts";
 console.log(JSON.stringify(ticketsData, null, 2));
@@ -13,7 +11,7 @@ console.log(JSON.stringify(ticketsData, null, 2));
   <section class="py-20 px-4 bg-white">
     <div class="max-w-6xl mx-auto">
       <iframe
-        src="https://konfhub.com/widget/open-source-day-2026?desc=true&secondaryBg=f8fafc&ticketBg=f8fafc&borderCl=f8fafc&bg=e4ffe9&fontColor=000000&ticketCl=000000&btnColor=22c55e&fontFamily=Hind&borderRadius=10&widget_type=standard&tickets=82195%2C82196%2C82197%2C82262%2C82264%2C82265&ticketId=82195"
+        src="https://konfhub.com/widget/open-source-day-2026?desc=true&secondaryBg=f8fafc&ticketBg=f8fafc&borderCl=f8fafc&bg=e4ffe9&fontColor=000000&ticketCl=000000&btnColor=22c55e&fontFamily=Hind&borderRadius=10&widget_type=standard&tickets=82195%2C82196%2C82197%2C82262%2C82264%2C82265"
         id="konfhub-widget"
         title="Register for Open Source Day 2026"
         width="100%"

src/pages/speakers.astro

@@ -48,6 +48,7 @@ const pastSpeakerSection: ResolvedSpeakerSection | null =
     subtitle="Share your knowledge, your open source story, or your latest project with 600+ developers and builders."
     primaryCta={{ text: "Submit a Talk Proposal", href: "/cfspk", external: true }}
     secondaryCta={{ text: "View 2025 Speakers", href: "/2025/speakers" }}
+    ctaNote="15th March 2026"
   />
 
   <!-- ═══ CURRENT SPEAKERS ══════════════════════════════════════════════════ -->