Skip to content

Commit c02b628

Browse files
devandapaigedevandapaige
committed
Add referral page and update affiliate links
Add a new referral page (src/app/referral/page.tsx) that lists the tech stack and referral links with descriptions and CTA buttons. Extend the links page (src/app/links/page.tsx) to include a subtitle field on LinkItem, render subtitles under affiliate names, and add a link to the full referral/tech stack page. Update the affiliate links array to include Cal.com, Cora, Monologue, and re-order Fable, plus minor UI tweaks for clarity.
1 parent c674ed9 commit c02b628

2 files changed

Lines changed: 195 additions & 2 deletions

File tree

‎src/app/links/page.tsx‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ interface LinkItem {
1515
color: string;
1616
icon?: string;
1717
boldPart?: string;
18+
subtitle?: string;
1819
}
1920

2021
// Social media links - easy to update
@@ -139,7 +140,25 @@ const readLinks: LinkItem[] = [
139140
// Affiliate/referral links section
140141
const affiliateLinks: LinkItem[] = [
141142
{
142-
name: 'Join Fable - Book & TV Social App',
143+
name: 'Cal.com',
144+
url: 'https://refer.cal.com/pythoness',
145+
color: 'bg-brand-green-accent/20 hover:bg-brand-green-accent/30',
146+
subtitle: 'Scheduling — what I use for sessions and async bookings'
147+
},
148+
{
149+
name: 'Cora',
150+
url: 'https://cora.computer/w?ref=tTKuEOSD',
151+
color: 'bg-brand-green-accent/20 hover:bg-brand-green-accent/30',
152+
subtitle: 'What I use to keep my email organized'
153+
},
154+
{
155+
name: 'Monologue',
156+
url: 'https://monologue.to/?ref=YVCYPRP',
157+
color: 'bg-brand-green-accent/20 hover:bg-brand-green-accent/30',
158+
subtitle: 'My favorite voice-to-text tool for Mac'
159+
},
160+
{
161+
name: 'Fable — Book & TV Social App',
143162
url: 'https://fable.co/invite/?referralID=YK5IPnrfEW',
144163
color: 'bg-brand-green-accent/20 hover:bg-brand-green-accent/30'
145164
},
@@ -423,6 +442,9 @@ export default function LinksPage() {
423442
{affiliateLinks.length > 0 && (
424443
<div className="space-y-3">
425444
<h2 className="font-display text-xl text-white text-center">Referral Links</h2>
445+
<p className="text-white/80 text-sm text-center mb-2">
446+
<Link href="/referral" className="text-brand-green-accent hover:underline">Full tech stack & referral page →</Link>
447+
</p>
426448
<div className="space-y-3">
427449
{affiliateLinks.map((link) => (
428450
<Link
@@ -432,7 +454,10 @@ export default function LinksPage() {
432454
rel="noopener noreferrer"
433455
className={`block ${link.color} py-2.5 md:py-3 px-6 rounded-lg text-center transition-transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-brand-green-accent focus:ring-offset-2 focus:ring-offset-brand-green-dark`}
434456
>
435-
{link.name}
457+
<span className="font-medium">{link.name}</span>
458+
{link.subtitle && (
459+
<span className="block text-sm opacity-90 mt-0.5">{link.subtitle}</span>
460+
)}
436461
</Link>
437462
))}
438463
</div>

‎src/app/referral/page.tsx‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
import Link from 'next/link'
2+
import { Metadata } from 'next'
3+
4+
export const metadata: Metadata = {
5+
title: 'Tech Stack & Referral Links | Pythoness Programmer',
6+
description: 'Tools I use and recommend: scheduling, email, voice-to-text, browser, design, notes, IDE, passwords, tasks, messaging, deployment, newsletter, and more.',
7+
}
8+
9+
type Tool = {
10+
name: string
11+
tagline: string
12+
description: string
13+
referralUrl?: string
14+
websiteUrl?: string
15+
}
16+
17+
const tools: Tool[] = [
18+
{
19+
name: 'Cal.com',
20+
tagline: 'Scheduling',
21+
description: 'What I use for Software Psychic sessions and async bookings. Open-source, privacy-friendly scheduling that just works.',
22+
referralUrl: 'https://refer.cal.com/pythoness',
23+
},
24+
{
25+
name: 'Cora',
26+
tagline: 'Email',
27+
description: 'What I use to keep my email organized. AI that screens your inbox, drafts in your voice, and briefs the rest so you get to inbox zero without the overwhelm.',
28+
referralUrl: 'https://cora.computer/w?ref=tTKuEOSD',
29+
},
30+
{
31+
name: 'Monologue',
32+
tagline: 'Voice to text',
33+
description: 'My favorite voice-to-text tool for Mac. Effortless dictation that learns your style and works in every app—huge for reducing typing when my hands or focus are tired.',
34+
referralUrl: 'https://monologue.to/?ref=YVCYPRP',
35+
},
36+
{
37+
name: 'Fable',
38+
tagline: 'Books & TV',
39+
description: "Social app for tracking what you read and watch. I use it to share what I'm into and find recommendations.",
40+
referralUrl: 'https://fable.co/invite/?referralID=YK5IPnrfEW',
41+
},
42+
{
43+
name: 'DuckDuckGo Browser',
44+
tagline: 'VPN, data clearing, private AI',
45+
description: 'Privacy-focused browser with built-in VPN, automatic data clearing, and private AI chat. My default for everyday browsing.',
46+
websiteUrl: 'https://duckduckgo.com/browser',
47+
},
48+
{
49+
name: 'Canva Pro',
50+
tagline: 'Design',
51+
description: 'Templates, brand kits, and quick graphics for social, worksheets, and visual content. I use it for guides and resource PDFs.',
52+
websiteUrl: 'https://www.canva.com',
53+
},
54+
{
55+
name: 'Obsidian Sync',
56+
tagline: 'Note sync',
57+
description: 'Keeps my Obsidian vault synced across devices so notes, newsletters, and content stay in one place.',
58+
websiteUrl: 'https://obsidian.md/sync',
59+
},
60+
{
61+
name: 'Cursor IDE',
62+
tagline: 'AI hub & IDE',
63+
description: 'My main AI hub and IDE. Code, edit, and think with AI built in—where most of my technical and writing work happens.',
64+
websiteUrl: 'https://cursor.com',
65+
},
66+
{
67+
name: '1Password',
68+
tagline: 'Passwords',
69+
description: "Password manager for logins, 2FA, and secure notes. One place for credentials so I don't have to remember them.",
70+
websiteUrl: 'https://1password.com',
71+
},
72+
{
73+
name: 'Todoist',
74+
tagline: 'To-do & tasks',
75+
description: 'Free to-do and task manager. Simple lists, due dates, and projects that actually work with my brain.',
76+
websiteUrl: 'https://todoist.com',
77+
},
78+
{
79+
name: 'Signal',
80+
tagline: 'Private messaging',
81+
description: 'Private messaging app with end-to-end encryption. My go-to for sensitive or personal conversations.',
82+
websiteUrl: 'https://signal.org',
83+
},
84+
{
85+
name: 'Netlify',
86+
tagline: 'Site deployment',
87+
description: 'Where I deploy sites. Git-based builds, previews, and hosting that play nice with static sites and modern frameworks.',
88+
websiteUrl: 'https://netlify.com',
89+
},
90+
{
91+
name: 'Beehiiv',
92+
tagline: 'Newsletter',
93+
description: 'Newsletter platform for the Pythoness Programmer newsletter. Growth tools, analytics, and a straightforward editor.',
94+
websiteUrl: 'https://www.beehiiv.com',
95+
},
96+
{
97+
name: 'Etsy',
98+
tagline: 'Digital downloads & inventory',
99+
description: 'Digital downloads and inventory sales for now. Where Sticky Spells and other creative bits live.',
100+
websiteUrl: 'https://www.etsy.com',
101+
},
102+
]
103+
104+
export default function ReferralPage() {
105+
return (
106+
<div className="min-h-screen bg-brand-green-dark text-white py-12 px-4">
107+
<div className="max-w-2xl mx-auto">
108+
<div className="text-center mb-12">
109+
<h1 className="font-display text-3xl md:text-4xl text-white mb-3">
110+
Tech stack & referral links
111+
</h1>
112+
<p className="text-white/80 text-lg mb-2">
113+
Tools I use and recommend. Items marked with <span className="text-brand-green-accent font-medium">*</span> include a referral link—if you sign up through those, I may receive credit or a small benefit. I only share what I personally use and enjoy.
114+
</p>
115+
</div>
116+
117+
<div className="space-y-6">
118+
{tools.map((tool) => (
119+
<div
120+
key={tool.name}
121+
className="bg-white/10 backdrop-blur-md border border-white/20 rounded-xl p-6 hover:bg-white/15 transition-colors"
122+
>
123+
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
124+
<div className="flex-1">
125+
<div className="flex items-center gap-2 mb-1 flex-wrap">
126+
<h2 className="font-display text-xl text-white">
127+
{tool.name}
128+
{tool.referralUrl && (
129+
<span className="text-brand-green-accent font-medium ml-0.5" aria-label="Referral link">*</span>
130+
)}
131+
</h2>
132+
<span className="text-brand-green-accent/90 text-sm font-medium">{tool.tagline}</span>
133+
</div>
134+
<p className="text-white/90 text-sm leading-relaxed mb-4">
135+
{tool.description}
136+
</p>
137+
{(tool.referralUrl || tool.websiteUrl) && (
138+
<Link
139+
href={tool.referralUrl ?? tool.websiteUrl ?? '#'}
140+
target="_blank"
141+
rel="noopener noreferrer"
142+
className="inline-block bg-brand-green-accent text-black px-5 py-2.5 rounded-lg font-medium hover:bg-opacity-90 transition-colors text-sm"
143+
>
144+
{tool.referralUrl ? `Try ${tool.name} →` : 'Visit site →'}
145+
</Link>
146+
)}
147+
</div>
148+
</div>
149+
</div>
150+
))}
151+
</div>
152+
153+
<p className="text-white/50 text-xs text-center mt-10">
154+
<span className="text-brand-green-accent/80">*</span> = referral link. I may receive credit or a small benefit if you sign up through these.
155+
</p>
156+
157+
<div className="mt-10 text-center">
158+
<Link
159+
href="/links"
160+
className="text-brand-green-accent hover:text-white transition-colors text-sm"
161+
>
162+
← Back to all links
163+
</Link>
164+
</div>
165+
</div>
166+
</div>
167+
)
168+
}

0 commit comments

Comments
 (0)