From b5337a6c08b500cd3e603a48f8dfdb4772420929 Mon Sep 17 00:00:00 2001 From: Ben Sima Date: Wed, 17 Dec 2025 23:51:10 -0500 Subject: feat: redesign home page with audio sample, problem/solution, FAQ - Add audio player to preview episode quality - Restructure pricing and signup as side-by-side hero - Add 'Sound Familiar?' problem statement section - Add FAQ section answering common questions - Remove redundant social proof section - Improve visual hierarchy and call-to-action flow --- Biz/PodcastItLater/Web.py | 150 +++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 143 insertions(+), 7 deletions(-) (limited to 'Biz/PodcastItLater/Web.py') diff --git a/Biz/PodcastItLater/Web.py b/Biz/PodcastItLater/Web.py index c472819..4c4a016 100644 --- a/Biz/PodcastItLater/Web.py +++ b/Biz/PodcastItLater/Web.py @@ -925,6 +925,32 @@ class HomePage(Component[AnyChildren, HomePageAttrs]): href="#login", classes=["btn", "btn-primary", "btn-lg"], ), + html.p( + "No credit card needed", + classes=["text-muted", "small", "mt-2"], + ), + html.div( + html.h4( + "Hear the quality:", + classes=["mb-3"], + ), + html.audio( + html.source( + src=episodes[0]["audio_url"] + if episodes + else "", + type="audio/mpeg", + ), + controls=True, + classes=["w-100"], + ) + if episodes + else html.p( + "Sample coming soon", + classes=["text-muted", "small"], + ), + classes=["mt-4"], + ), classes=["text-center", "py-5", "mb-5"], ), # How it works section @@ -1010,18 +1036,85 @@ class HomePage(Component[AnyChildren, HomePageAttrs]): ), classes=["mb-5"], ), - # Social proof section + # Problem section html.div( - html.h4( - "Join others who've converted their reading backlog", + html.h3( + "Sound Familiar?", classes=["text-center", "mb-4"], ), - classes=["mb-4"], + html.p( + "Your reading list keeps growing. " + "No time to actually sit and read. " + "You're already listening to podcasts during your commute. " + "Pocket and Instapaper articles pile up unread.", + classes=["text-center", "text-muted", "lead"], + ), + classes=["mb-5"], ), - # Login form + # Pricing + Login section (hero signup style) html.div( - LoginForm(error=error), - id="login", + html.div( + # Left: pricing info + html.div( + html.h3( + "Simple Pricing", + classes=["fw-bold", "lh-1", "mb-3"], + ), + html.p( + html.strong("Free: "), + "10 articles/month", + classes=["lead", "mb-2"], + ), + html.p( + html.strong("Pro: "), + "$12/month • Unlimited", + classes=["lead"], + ), + classes=[ + "col-lg-7", + "text-center", + "text-lg-start", + ], + ), + # Right: login form + html.div( + html.form( + html.input( + type="email", + name="email", + placeholder="your@email.com", + required=True, + classes=["form-control", "mb-2"], + ), + html.button( + "Login or Register", + type="submit", + classes=["btn", "btn-primary", "w-100"], + ), + html.div( + error or "", + id="login-result", + classes=["mt-2"], + ), + hx_post="/login", + hx_target="#login-result", + hx_swap="innerHTML", + ), + classes=[ + "col-lg-5", + "border", + "rounded", + "p-4", + ], + id="login", + ), + classes=[ + "row", + "align-items-center", + "g-5", + "py-5", + ], + ), classes=["mb-5"], ), # Recent episodes @@ -1032,6 +1125,49 @@ class HomePage(Component[AnyChildren, HomePageAttrs]): user=None, viewing_own_feed=False, ), + classes=["mb-5"], + ), + # FAQ section + html.div( + html.h3( + "Questions?", + classes=["text-center", "mb-4"], + ), + html.div( + html.p( + html.strong("Does it actually sound good?"), + ), + html.p( + "Listen to the sample above—our AI voices are " + "natural and easy to listen to.", + classes=["text-muted", "mb-4"], + ), + html.p( + html.strong("Does it work with my podcast app?"), + ), + html.p( + "Yes—we provide a standard RSS feed that works " + "everywhere.", + classes=["text-muted", "mb-4"], + ), + html.p( + html.strong("What about paywalled content?"), + ), + html.p( + "You need access to the article. We respect " + "paywalls.", + classes=["text-muted", "mb-4"], + ), + html.p( + html.strong("Is my data private?"), + ), + html.p( + "Yes. We don't sell your data or share your " + "reading habits.", + classes=["text-muted"], + ), + classes=["text-center"], + ), ), user=None, current_page="home", -- cgit v1.2.3