Enhance CFP submission visibility and refactor CTA logic

src/components/CtaButton.astro → src/components/Button.astro

@@ -1,11 +1,17 @@
 ---
 interface Props {
   href: string;
-  variant?: "solid" | "outline";
+  variant?: "solid" | "outline" | "inverted";
   class?: string;
   id?: string;
 }
 
+const variantClass = {
+  solid: "btn-solid",
+  outline: "btn-outline",
+  inverted: "btn-inverted",
+};
+
 const { href, variant = "solid", class: cls, id } = Astro.props;
 const external = href.startsWith("http");
 ---
@@ -15,7 +21,7 @@ const external = href.startsWith("http");
   href={href}
   target={external ? "_blank" : undefined}
   rel={external ? "noopener noreferrer" : undefined}
-  class:list={["btn", variant === "outline" ? "btn-outline" : "btn-solid", cls]}
+  class:list={["btn", variantClass[variant], cls]}
 >
   <slot />
 </a>

src/content/prose/cfp-details.mdx

@@ -1,8 +1,10 @@
 import { event } from "@data/event";
+import Button from "@components/Button.astro";
 
 <div class="prose-banner">
-  <p class="m-0">Submissions close {event.cfp.deadlineDisplay}.</p>
-  <p class="m-0"><a class="text-white" href={event.cfp.url} target="_blank" rel="noopener noreferrer">Submit your talk →</a></p>
+  <p class="m-0">Deadline extended!</p>
+  <p class="m-0">Submissions now close <span class="line-through opacity-70">25 August 2026</span> {event.cfp.deadlineDisplay}.</p>
+  <Button href={event.cfp.url} variant="inverted" class="mt-6 no-underline">Submit your talk →</Button>
 </div>
 
 ## Everyone is welcome here

src/content/prose/cfp.mdx

@@ -2,4 +2,4 @@ import { event } from "@data/event";
 
 The CFP is open! Got a Python project, story, or hard-won lesson to share? We want to hear it - all experience levels welcome, first-time speakers especially.
 
-Talks are 10 minutes, mostly in English, with a few Turkish slots for this first edition. Submissions close **{event.cfp.deadlineDisplay}**.
+Talks are 10 minutes, mostly in English, with a few Turkish slots for this first edition. Submissions close <span class="deadline-old">25 August 2026</span>{" "}<strong>{event.cfp.deadlineDisplay}</strong>.

src/data/event.ts

@@ -3,6 +3,8 @@
 // to stand up a new edition.
 
 const cfpUrl = "https://forms.gle/41Zpwh2N2uS4P1RB8";
+const ticketsUrl =
+  "https://kommunity.com/pythonturkiye/events/python-pizza-istanbul-4fa122d9";
 
 export const event = {
   name: "Python Pizza Istanbul",
@@ -14,7 +16,7 @@ export const event = {
   startDate: "2026-11-14T11:00:00+03:00",
   endDate: "2026-11-14T18:00:00+03:00",
   contactEmail: "organizers@pythonturkiye.org",
-  ticketsUrl: "https://kommunity.com/pythonturkiye/events/python-pizza-istanbul-4fa122d9",
+  ticketsUrl: ticketsUrl,
   maxAttendees: 150,
   organizer: {
     name: "Python Türkiye",
@@ -31,6 +33,21 @@ export const event = {
     url: cfpUrl,
     deadlineDisplay: "Monday, 7 September 2026, 23:59 AoE",
   },
-  // whatever is most important right now
-  cta: { label: "Submit a talk! 🎤", href: cfpUrl },
+  // shown together in the hero; ctas with floating: true also get a floating button once scrolled past
+  ctas: [
+    {
+      id: "cfp",
+      label: "Submit a talk! 🎤",
+      href: cfpUrl,
+      variant: "outline" as const,
+      floating: true,
+    },
+    {
+      id: "tickets",
+      label: "Get your ticket! 🎟️",
+      href: ticketsUrl,
+      variant: "inverted" as const,
+      floating: false,
+    },
+  ],
 };

src/pages/cfp.astro

@@ -3,7 +3,7 @@ import Base from "@layouts/Base.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Prose from "@components/Prose.astro";
-import CtaButton from "@components/CtaButton.astro";
+import Button from "@components/Button.astro";
 import { event } from "@data/event";
 import Content from "@prose/cfp-details.mdx";
 ---
@@ -19,7 +19,7 @@ import Content from "@prose/cfp-details.mdx";
       <Content />
     </Prose>
     <div class="text-center mt-8">
-      <CtaButton href={event.cfp.url}>Submit your talk</CtaButton>
+      <Button href={event.cfp.url}>Submit your talk</Button>
     </div>
   </main>
   <Footer />

src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
 import Base from "@layouts/Base.astro";
 import Header from "@components/Header.astro";
-import CtaButton from "@components/CtaButton.astro";
+import Button from "@components/Button.astro";
 import Section from "@components/Section.astro";
 import Prose from "@components/Prose.astro";
 import Footer from "@components/Footer.astro";
@@ -34,21 +34,28 @@ const twitter = socials.find((s) => s.handle);
   </Fragment>
 
   <Header />
-  <CtaButton
-    id="floating-cta"
-    href={event.cta.href}
-    class="cta-hidden fixed right-4 bottom-4 md:right-8 md:bottom-8 z-20 min-w-40 md:min-w-44 shadow-lg"
-  >
-    {event.cta.label}
-  </CtaButton>
+  <div class="fixed right-4 bottom-4 md:right-8 md:bottom-8 z-20 flex flex-col items-end gap-3">
+    {event.ctas.filter((cta) => cta.floating).map((cta) => (
+      <Button
+        id={`floating-${cta.id}`}
+        href={cta.href}
+        class="cta-hidden min-w-40 md:min-w-44 shadow-lg"
+      >
+        {cta.label}
+      </Button>
+    ))}
+  </div>
   <main>
     <Hero />
     <Section id="about" title={`Python Pizza is Coming to ${event.city}!`}>
       <Prose><AboutContent /></Prose>
     </Section>
-    <Section id="cfp" title="Call for Proposals is Open! 🎤">
+    <Section id="cfp" title="Call for Proposals: Deadline Extended! 🎤">
       <Prose><CfpContent /></Prose>
-      <CtaButton href="/cfp/" class="mt-8">Read the full CFP →</CtaButton>
+      <div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
+        <Button href={event.cfp.url}>Submit a talk! 🎤</Button>
+        <Button href="/cfp/">Read the full CFP →</Button>
+      </div>
     </Section>
     <Venue />
     <Sponsors />
@@ -60,17 +67,21 @@ const twitter = socials.find((s) => s.handle);
   </main>
   <Footer />
 
-  <script>
-    // floating cta button appears when the hero cta button is scrolled out of view
-    const heroCta = document.getElementById("hero-cta");
-    const floatingCta = document.getElementById("floating-cta");
-
-    if (heroCta && floatingCta) {
+  <script is:inline define:vars={{ ctaIds: event.ctas.filter((cta) => cta.floating).map((cta) => cta.id) }}>
+    // each floating cta appears once its hero counterpart scrolls out of view
+    function bindFloatingCta(heroId, floatingId) {
+      const hero = document.getElementById(heroId);
+      const floating = document.getElementById(floatingId);
+      if (!hero || !floating) return;
       const observer = new IntersectionObserver(
-        ([entry]) => floatingCta.classList.toggle("cta-hidden", entry.isIntersecting),
+        ([entry]) => floating.classList.toggle("cta-hidden", entry.isIntersecting),
         { threshold: 0.4 },
       );
-      observer.observe(heroCta);
+      observer.observe(hero);
+    }
+
+    for (const id of ctaIds) {
+      bindFloatingCta(`hero-${id}`, `floating-${id}`);
     }
   </script>
 </Base>

src/sections/Hero.astro

@@ -1,6 +1,6 @@
 ---
 import { getImage } from "astro:assets";
-import CtaButton from "@components/CtaButton.astro";
+import Button from "@components/Button.astro";
 import Wave from "@components/Wave.astro";
 import { event } from "@data/event";
 import cityBg from "@assets/city.jpg";
@@ -25,21 +25,16 @@ const optimizedCityBg = await getImage({
     <p class="hero-subtext md:text-[2.2rem]">{event.subHeading}</p>
     <p class="hero-subtext md:text-[2.2rem]">{event.whenDisplay}</p>
     <div class="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4">
-      <CtaButton
-        id="hero-cta"
-        href={event.cta.href}
-        variant="outline"
-        class="px-10 py-4 text-lg md:text-xl"
-      >
-        {event.cta.label}
-      </CtaButton>
-      <CtaButton
-        href={event.ticketsUrl}
-        variant="solid"
-        class="px-10 py-4 text-lg md:text-xl"
-      >
-        Get a ticket! 🎟️
-      </CtaButton>
+      {event.ctas.map((cta) => (
+        <Button
+          id={`hero-${cta.id}`}
+          href={cta.href}
+          variant={cta.variant}
+          class="px-10 py-4 text-lg md:text-xl"
+        >
+          {cta.label}
+        </Button>
+      ))}
     </div>
   </div>
 

src/sections/Schedule.astro

@@ -1,15 +1,15 @@
 ---
 import Section from "@components/Section.astro";
 import Prose from "@components/Prose.astro";
-import CtaButton from "@components/CtaButton.astro";
+import Button from "@components/Button.astro";
 import ScheduleCard from "@components/ScheduleCard.astro";
 import { getScheduleData } from "@data/schedule";
 
 const { sessions, speakerMap } = await getScheduleData();
 ---
 
 <Section id="schedule" title="Program">
-  <CtaButton href="/compact-agenda/" class="px-6 py-2">Compact agenda 🔗</CtaButton>
+  <Button href="/compact-agenda/" class="px-6 py-2">Compact agenda 🔗</Button>
 
   <Prose class="mt-4">
     Join us for a full day of Python talks, coffee breaks, lightning talks, and pizza.

src/sections/Venue.astro

@@ -2,7 +2,7 @@
 import { Image } from "astro:assets";
 import Section from "@components/Section.astro";
 import Prose from "@components/Prose.astro";
-import CtaButton from "@components/CtaButton.astro";
+import Button from "@components/Button.astro";
 import VenueContent from "@prose/venue.mdx";
 import { event } from "@data/event";
 import front from "@assets/venue/startgate-front.jpeg";
@@ -26,9 +26,9 @@ const venuePhotos = [
   <div class="prose-banner">
     <p class="font-mono font-medium text-lg md:text-xl">{event.venue.name}</p>
     <p class="text-lg md:text-xl">{event.venue.addressLine}<br />{event.venue.district}</p>
-    <CtaButton href={event.venue.mapsUrl} variant="outline" class="mt-6">
+    <Button href={event.venue.mapsUrl} variant="outline" class="mt-6">
       📍 Open in Google Maps
-    </CtaButton>
+    </Button>
   </div>
 
   <Prose class="prose-callout text-left [&_ul]:mt-2 [&_ul]:mb-0">

src/styles/global.css

@@ -124,6 +124,12 @@
   .prose-banner {
     @apply bg-primary text-white rounded-lg mb-8 p-6 text-center;
   }
+  .deadline-old {
+    color: color-mix(in srgb, var(--color-text) 55%, transparent);
+    text-decoration: line-through;
+    text-decoration-color: var(--color-primary);
+    text-decoration-thickness: 2px;
+  }
 
   /* Section heading (h2 anchors) and legal page title (h1) share this look */
   .section-heading {
@@ -180,6 +186,9 @@
   .btn-outline {
     @apply border-2 border-white bg-white/15 text-white backdrop-blur-sm hover:bg-white hover:text-primary;
   }
+  .btn-inverted {
+    @apply bg-white text-primary;
+  }
 
   .cta-hidden {
     opacity: 0;