diff options
Diffstat (limited to 'Biz')
| -rw-r--r-- | Biz/PodcastItLater/Web.py | 119 |
1 files changed, 110 insertions, 9 deletions
diff --git a/Biz/PodcastItLater/Web.py b/Biz/PodcastItLater/Web.py index 257938f..bc12000 100644 --- a/Biz/PodcastItLater/Web.py +++ b/Biz/PodcastItLater/Web.py @@ -906,19 +906,114 @@ class HomePage(Component[AnyChildren, HomePageAttrs]): error = self.attrs.get("error") if not user: - # Show public feed with login form for logged-out users + # Marketing landing page for logged-out users return UI.PageLayout( - LoginForm(error=error), + # Hero section html.div( - html.h4( - html.i(classes=["bi", "bi-broadcast", "me-2"]), - "Public Feed", - classes=["mb-3", "mt-4"], + html.h1( + "Your Reading List, Now a Podcast", + classes=["display-5", "fw-bold", "mb-3"], ), html.p( - "Featured articles converted to audio. " - "Sign up to create your own personal feed!", - classes=["text-muted", "mb-3"], + "Convert web articles to audio. " + "Listen during your commute, workout, or chores.", + classes=["lead", "text-muted", "mb-4"], + ), + html.a( + "Start Listening", + href="#login", + classes=["btn", "btn-primary", "btn-lg"], + ), + classes=["text-center", "py-5", "mb-5"], + ), + # How it works section + html.div( + html.h3( + "How It Works", + classes=["text-center", "mb-4"], + ), + html.div( + html.div( + html.div( + html.div( + html.span( + "1", + classes=[ + "badge", + "bg-primary", + "rounded-circle", + "fs-5", + "mb-3", + ], + ), + html.h5("Paste any article URL"), + html.p( + "Copy the link to any article you want to listen to.", + classes=["text-muted", "small"], + ), + classes=["card-body", "text-center"], + ), + classes=["card", "h-100"], + ), + classes=["col-md-4", "mb-3"], + ), + html.div( + html.div( + html.div( + html.span( + "2", + classes=[ + "badge", + "bg-primary", + "rounded-circle", + "fs-5", + "mb-3", + ], + ), + html.h5("We convert it to audio"), + html.p( + "Our AI reads the article and creates a podcast episode.", + classes=["text-muted", "small"], + ), + classes=["card-body", "text-center"], + ), + classes=["card", "h-100"], + ), + classes=["col-md-4", "mb-3"], + ), + html.div( + html.div( + html.div( + html.span( + "3", + classes=[ + "badge", + "bg-primary", + "rounded-circle", + "fs-5", + "mb-3", + ], + ), + html.h5("Listen in your podcast app"), + html.p( + "Subscribe to your personal RSS feed in any podcast app.", + classes=["text-muted", "small"], + ), + classes=["card-body", "text-center"], + ), + classes=["card", "h-100"], + ), + classes=["col-md-4", "mb-3"], + ), + classes=["row"], + ), + classes=["mb-5"], + ), + # Social proof section + html.div( + html.h4( + "Join others who've converted their reading backlog", + classes=["text-center", "mb-4"], ), EpisodeList( episodes=episodes, @@ -926,6 +1021,12 @@ class HomePage(Component[AnyChildren, HomePageAttrs]): user=None, viewing_own_feed=False, ), + classes=["mb-5"], + ), + # Login form + html.div( + LoginForm(error=error), + id="login", ), user=None, current_page="home", |