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

1 files changed, 143 insertions, 7 deletions

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",