Skip to content

Commit 916f033

Browse files
egeakmanegeakman
authored
Enhance CFP submission visibility and refactor CTA logic (#9)
* Emphasize the extended CFP deadline across the site The deadline moved from 25 August to 7 September, but nothing on the site said it had changed. Add a red strike-through treatment for the old date, call it out in the CFP section title, and give the homepage CFP section an actual submit button (it previously only linked to the full CFP page, with no direct path to the form). * Refactor CTA logic into two independent CTAs Replace the single generic event.cta with an event.ctas array (CFP submission and ticket purchase), each carrying its own label, href, hero variant, and a floating flag for whether it also gets a floating button once scrolled past. The hero and the floating-cta script now render/bind off that array instead of hardcoded single-button wiring. Add an "inverted" button variant (white fill, primary-colored text) for the ticket CTA, since it needs to read differently from the CFP button without competing with it for attention. * Rename CtaButton to Button It now supports variants beyond outline/solid CTAs (e.g. the inverted ticket button) and gets reused for plain styled links (the compact agenda link), so "CtaButton" no longer describes what it is. Purely mechanical: file rename plus updated imports/tags, no behavior change. * Turn the CFP page's submit link into a Button The plain underlined link inside the deadline banner didn't stand out as an action next to the ticket/CFP buttons used elsewhere. Reuse Button with the inverted variant instead, matching how it already looks on the hero and homepage. * Silence astro check hint on the floating-cta script define:vars implicitly forces is:inline; make that explicit so `astro check` doesn't flag it.
1 parent 135ccfb commit 916f033

10 files changed

Lines changed: 89 additions & 49 deletions

File tree

src/components/CtaButton.astro renamed to src/components/Button.astro

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
---
22
interface Props {
33
href: string;
4-
variant?: "solid" | "outline";
4+
variant?: "solid" | "outline" | "inverted";
55
class?: string;
66
id?: string;
77
}
88
9+
const variantClass = {
10+
solid: "btn-solid",
11+
outline: "btn-outline",
12+
inverted: "btn-inverted",
13+
};
14+
915
const { href, variant = "solid", class: cls, id } = Astro.props;
1016
const external = href.startsWith("http");
1117
---
@@ -15,7 +21,7 @@ const external = href.startsWith("http");
1521
href={href}
1622
target={external ? "_blank" : undefined}
1723
rel={external ? "noopener noreferrer" : undefined}
18-
class:list={["btn", variant === "outline" ? "btn-outline" : "btn-solid", cls]}
24+
class:list={["btn", variantClass[variant], cls]}
1925
>
2026
<slot />
2127
</a>

‎src/content/prose/cfp-details.mdx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { event } from "@data/event";
2+
import Button from "@components/Button.astro";
23

34
<div class="prose-banner">
4-
<p class="m-0">Submissions close {event.cfp.deadlineDisplay}.</p>
5-
<p class="m-0"><a class="text-white" href={event.cfp.url} target="_blank" rel="noopener noreferrer">Submit your talk →</a></p>
5+
<p class="m-0">Deadline extended!</p>
6+
<p class="m-0">Submissions now close <span class="line-through opacity-70">25 August 2026</span> {event.cfp.deadlineDisplay}.</p>
7+
<Button href={event.cfp.url} variant="inverted" class="mt-6 no-underline">Submit your talk →</Button>
68
</div>
79

810
## Everyone is welcome here

‎src/content/prose/cfp.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@ import { event } from "@data/event";
22

33
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.
44

5-
Talks are 10 minutes, mostly in English, with a few Turkish slots for this first edition. Submissions close **{event.cfp.deadlineDisplay}**.
5+
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‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
// to stand up a new edition.
44

55
const cfpUrl = "https://forms.gle/41Zpwh2N2uS4P1RB8";
6+
const ticketsUrl =
7+
"https://kommunity.com/pythonturkiye/events/python-pizza-istanbul-4fa122d9";
68

79
export const event = {
810
name: "Python Pizza Istanbul",
@@ -14,7 +16,7 @@ export const event = {
1416
startDate: "2026-11-14T11:00:00+03:00",
1517
endDate: "2026-11-14T18:00:00+03:00",
1618
contactEmail: "organizers@pythonturkiye.org",
17-
ticketsUrl: "https://kommunity.com/pythonturkiye/events/python-pizza-istanbul-4fa122d9",
19+
ticketsUrl: ticketsUrl,
1820
maxAttendees: 150,
1921
organizer: {
2022
name: "Python Türkiye",
@@ -31,6 +33,21 @@ export const event = {
3133
url: cfpUrl,
3234
deadlineDisplay: "Monday, 7 September 2026, 23:59 AoE",
3335
},
34-
// whatever is most important right now
35-
cta: { label: "Submit a talk! 🎤", href: cfpUrl },
36+
// shown together in the hero; ctas with floating: true also get a floating button once scrolled past
37+
ctas: [
38+
{
39+
id: "cfp",
40+
label: "Submit a talk! 🎤",
41+
href: cfpUrl,
42+
variant: "outline" as const,
43+
floating: true,
44+
},
45+
{
46+
id: "tickets",
47+
label: "Get your ticket! 🎟️",
48+
href: ticketsUrl,
49+
variant: "inverted" as const,
50+
floating: false,
51+
},
52+
],
3653
};

‎src/pages/cfp.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Base from "@layouts/Base.astro";
33
import Header from "@components/Header.astro";
44
import Footer from "@components/Footer.astro";
55
import Prose from "@components/Prose.astro";
6-
import CtaButton from "@components/CtaButton.astro";
6+
import Button from "@components/Button.astro";
77
import { event } from "@data/event";
88
import Content from "@prose/cfp-details.mdx";
99
---
@@ -19,7 +19,7 @@ import Content from "@prose/cfp-details.mdx";
1919
<Content />
2020
</Prose>
2121
<div class="text-center mt-8">
22-
<CtaButton href={event.cfp.url}>Submit your talk</CtaButton>
22+
<Button href={event.cfp.url}>Submit your talk</Button>
2323
</div>
2424
</main>
2525
<Footer />

‎src/pages/index.astro‎

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
import Base from "@layouts/Base.astro";
33
import Header from "@components/Header.astro";
4-
import CtaButton from "@components/CtaButton.astro";
4+
import Button from "@components/Button.astro";
55
import Section from "@components/Section.astro";
66
import Prose from "@components/Prose.astro";
77
import Footer from "@components/Footer.astro";
@@ -34,21 +34,28 @@ const twitter = socials.find((s) => s.handle);
3434
</Fragment>
3535

3636
<Header />
37-
<CtaButton
38-
id="floating-cta"
39-
href={event.cta.href}
40-
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"
41-
>
42-
{event.cta.label}
43-
</CtaButton>
37+
<div class="fixed right-4 bottom-4 md:right-8 md:bottom-8 z-20 flex flex-col items-end gap-3">
38+
{event.ctas.filter((cta) => cta.floating).map((cta) => (
39+
<Button
40+
id={`floating-${cta.id}`}
41+
href={cta.href}
42+
class="cta-hidden min-w-40 md:min-w-44 shadow-lg"
43+
>
44+
{cta.label}
45+
</Button>
46+
))}
47+
</div>
4448
<main>
4549
<Hero />
4650
<Section id="about" title={`Python Pizza is Coming to ${event.city}!`}>
4751
<Prose><AboutContent /></Prose>
4852
</Section>
49-
<Section id="cfp" title="Call for Proposals is Open! 🎤">
53+
<Section id="cfp" title="Call for Proposals: Deadline Extended! 🎤">
5054
<Prose><CfpContent /></Prose>
51-
<CtaButton href="/cfp/" class="mt-8">Read the full CFP →</CtaButton>
55+
<div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
56+
<Button href={event.cfp.url}>Submit a talk! 🎤</Button>
57+
<Button href="/cfp/">Read the full CFP →</Button>
58+
</div>
5259
</Section>
5360
<Venue />
5461
<Sponsors />
@@ -60,17 +67,21 @@ const twitter = socials.find((s) => s.handle);
6067
</main>
6168
<Footer />
6269

63-
<script>
64-
// floating cta button appears when the hero cta button is scrolled out of view
65-
const heroCta = document.getElementById("hero-cta");
66-
const floatingCta = document.getElementById("floating-cta");
67-
68-
if (heroCta && floatingCta) {
70+
<script is:inline define:vars={{ ctaIds: event.ctas.filter((cta) => cta.floating).map((cta) => cta.id) }}>
71+
// each floating cta appears once its hero counterpart scrolls out of view
72+
function bindFloatingCta(heroId, floatingId) {
73+
const hero = document.getElementById(heroId);
74+
const floating = document.getElementById(floatingId);
75+
if (!hero || !floating) return;
6976
const observer = new IntersectionObserver(
70-
([entry]) => floatingCta.classList.toggle("cta-hidden", entry.isIntersecting),
77+
([entry]) => floating.classList.toggle("cta-hidden", entry.isIntersecting),
7178
{ threshold: 0.4 },
7279
);
73-
observer.observe(heroCta);
80+
observer.observe(hero);
81+
}
82+
83+
for (const id of ctaIds) {
84+
bindFloatingCta(`hero-${id}`, `floating-${id}`);
7485
}
7586
</script>
7687
</Base>

‎src/sections/Hero.astro‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
import { getImage } from "astro:assets";
3-
import CtaButton from "@components/CtaButton.astro";
3+
import Button from "@components/Button.astro";
44
import Wave from "@components/Wave.astro";
55
import { event } from "@data/event";
66
import cityBg from "@assets/city.jpg";
@@ -25,21 +25,16 @@ const optimizedCityBg = await getImage({
2525
<p class="hero-subtext md:text-[2.2rem]">{event.subHeading}</p>
2626
<p class="hero-subtext md:text-[2.2rem]">{event.whenDisplay}</p>
2727
<div class="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4">
28-
<CtaButton
29-
id="hero-cta"
30-
href={event.cta.href}
31-
variant="outline"
32-
class="px-10 py-4 text-lg md:text-xl"
33-
>
34-
{event.cta.label}
35-
</CtaButton>
36-
<CtaButton
37-
href={event.ticketsUrl}
38-
variant="solid"
39-
class="px-10 py-4 text-lg md:text-xl"
40-
>
41-
Get a ticket! 🎟️
42-
</CtaButton>
28+
{event.ctas.map((cta) => (
29+
<Button
30+
id={`hero-${cta.id}`}
31+
href={cta.href}
32+
variant={cta.variant}
33+
class="px-10 py-4 text-lg md:text-xl"
34+
>
35+
{cta.label}
36+
</Button>
37+
))}
4338
</div>
4439
</div>
4540

‎src/sections/Schedule.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
import Section from "@components/Section.astro";
33
import Prose from "@components/Prose.astro";
4-
import CtaButton from "@components/CtaButton.astro";
4+
import Button from "@components/Button.astro";
55
import ScheduleCard from "@components/ScheduleCard.astro";
66
import { getScheduleData } from "@data/schedule";
77
88
const { sessions, speakerMap } = await getScheduleData();
99
---
1010

1111
<Section id="schedule" title="Program">
12-
<CtaButton href="/compact-agenda/" class="px-6 py-2">Compact agenda 🔗</CtaButton>
12+
<Button href="/compact-agenda/" class="px-6 py-2">Compact agenda 🔗</Button>
1313

1414
<Prose class="mt-4">
1515
Join us for a full day of Python talks, coffee breaks, lightning talks, and pizza.

‎src/sections/Venue.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { Image } from "astro:assets";
33
import Section from "@components/Section.astro";
44
import Prose from "@components/Prose.astro";
5-
import CtaButton from "@components/CtaButton.astro";
5+
import Button from "@components/Button.astro";
66
import VenueContent from "@prose/venue.mdx";
77
import { event } from "@data/event";
88
import front from "@assets/venue/startgate-front.jpeg";
@@ -26,9 +26,9 @@ const venuePhotos = [
2626
<div class="prose-banner">
2727
<p class="font-mono font-medium text-lg md:text-xl">{event.venue.name}</p>
2828
<p class="text-lg md:text-xl">{event.venue.addressLine}<br />{event.venue.district}</p>
29-
<CtaButton href={event.venue.mapsUrl} variant="outline" class="mt-6">
29+
<Button href={event.venue.mapsUrl} variant="outline" class="mt-6">
3030
📍 Open in Google Maps
31-
</CtaButton>
31+
</Button>
3232
</div>
3333

3434
<Prose class="prose-callout text-left [&_ul]:mt-2 [&_ul]:mb-0">

‎src/styles/global.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,12 @@
124124
.prose-banner {
125125
@apply bg-primary text-white rounded-lg mb-8 p-6 text-center;
126126
}
127+
.deadline-old {
128+
color: color-mix(in srgb, var(--color-text) 55%, transparent);
129+
text-decoration: line-through;
130+
text-decoration-color: var(--color-primary);
131+
text-decoration-thickness: 2px;
132+
}
127133

128134
/* Section heading (h2 anchors) and legal page title (h1) share this look */
129135
.section-heading {
@@ -180,6 +186,9 @@
180186
.btn-outline {
181187
@apply border-2 border-white bg-white/15 text-white backdrop-blur-sm hover:bg-white hover:text-primary;
182188
}
189+
.btn-inverted {
190+
@apply bg-white text-primary;
191+
}
183192

184193
.cta-hidden {
185194
opacity: 0;

0 commit comments

Comments
 (0)