Added Features page

PlotLine/Controllers/PublicController.cs

@@ -12,6 +12,81 @@ public sealed class PublicController(IConfiguration configuration) : Controller
     private const string SupportEmail = "hello@plotdirector.com";
     private const string PolicyDate = "June 24, 2026";
     private const string Keywords = "novel planning software, writing software, story planning app, author tools, plot tracking, character tracking, story timeline, novel organisation, fiction writing software, series writing software, continuity tracking, plot threads, story bible";
+    private const string FeaturesDescription = "Explore PlotDirector's features for novel planning, story timelines, character tracking, continuity management, scene organisation, writing schedules, story bibles, floor plans and Microsoft Word integration.";
+    private const string FeaturesKeywords = "novel planning software, story planning software, writing software, book planning tool, story timeline software, character tracking software, continuity software for writers, story bible software, novel writing app, manuscript planning software, plot tracking software, character relationship map, story structure software, writing schedule planner, Microsoft Word writing companion, series bible software, worldbuilding software, fiction writing software, author tools";
+
+    [HttpGet("features", Name = PublicRouteNames.Features)]
+    public IActionResult Features()
+    {
+        var featuresUrl = PublicSeo.AbsoluteUrl(configuration, "/features");
+        var homeUrl = PublicSeo.AbsoluteUrl(configuration, "/");
+        var pricingUrl = PublicSeo.AbsoluteUrl(configuration, "/pricing");
+        PublicSeo.Apply(ViewData, configuration, new SeoMetadata
+        {
+            Title = "PlotDirector Features | Novel Planning, Continuity & Story Writing Software",
+            Description = FeaturesDescription,
+            Keywords = FeaturesKeywords,
+            CanonicalPath = "/features",
+            OgTitle = "PlotDirector Features | Plan, Write and Manage Your Story",
+            OgDescription = "Discover the connected story planning tools inside PlotDirector, including timelines, scene management, characters, relationships, continuity tracking, story health, floor plans, exports and Word integration.",
+            OgType = "website",
+            OgImage = "https://plotdirector.com/images/og/plotdirector-features-og.webp",
+            TwitterCard = "summary_large_image",
+            JsonLd =
+            [
+                PublicSeo.JsonLd(new Dictionary<string, object?>
+                {
+                    ["@context"] = "https://schema.org",
+                    ["@type"] = "WebPage",
+                    ["name"] = "PlotDirector Features",
+                    ["description"] = FeaturesDescription,
+                    ["url"] = featuresUrl,
+                    ["isPartOf"] = new Dictionary<string, object?>
+                    {
+                        ["@type"] = "WebSite",
+                        ["name"] = "PlotDirector",
+                        ["url"] = homeUrl
+                    }
+                }),
+                PublicSeo.JsonLd(new Dictionary<string, object?>
+                {
+                    ["@context"] = "https://schema.org",
+                    ["@type"] = "SoftwareApplication",
+                    ["name"] = "PlotDirector",
+                    ["applicationCategory"] = "WritingApplication",
+                    ["operatingSystem"] = "Web",
+                    ["description"] = "PlotDirector is story planning and writing software for authors, helping writers manage novels, characters, timelines, continuity, story bibles, floor plans, writing schedules and Microsoft Word integration.",
+                    ["url"] = homeUrl,
+                    ["offers"] = new Dictionary<string, object?>
+                    {
+                        ["@type"] = "Offer",
+                        ["url"] = pricingUrl
+                    }
+                }),
+                PublicSeo.BreadcrumbJsonLd(
+                    ("Home", homeUrl),
+                    ("Features", featuresUrl)),
+                PublicSeo.JsonLd(new Dictionary<string, object?>
+                {
+                    ["@context"] = "https://schema.org",
+                    ["@type"] = "FAQPage",
+                    ["mainEntity"] = new[]
+                    {
+                        Faq("What is PlotDirector?", "PlotDirector is story planning and writing software for authors. It helps writers organise books, chapters, scenes, characters, locations, timelines, plot threads, continuity, writing schedules and story bibles in one connected workspace."),
+                        Faq("Can PlotDirector help with story continuity?", "Yes. PlotDirector includes continuity tools for tracking characters, locations, story assets, knowledge, custody, warnings and story state across scenes."),
+                        Faq("Does PlotDirector work with Microsoft Word?", "PlotDirector includes a Microsoft Word Companion designed to connect your manuscript with your planning data, helping sync chapters, scenes, word counts and story details."),
+                        Faq("Can I use PlotDirector for a series?", "Yes. PlotDirector supports projects, books, chapters and scenes, making it suitable for novels, series, screenplays and larger story worlds."),
+                        Faq("Does PlotDirector include character and relationship tracking?", "Yes. PlotDirector includes character profiles, aliases, appearances, relationship tracking, relationship maps and changes over time."),
+                        Faq("Can PlotDirector create a story bible?", "Yes. PlotDirector can produce story bible exports containing key information about characters, settings, plot threads, timelines and other story details.")
+                    }
+                })
+            ]
+        });
+        ViewData["SeoTitle"] = "PlotDirector Features | Novel Planning, Continuity & Story Writing Software";
+        ViewData["OgTitle"] = "PlotDirector Features | Plan, Write and Manage Your Story";
+
+        return View();
+    }
 
     [HttpGet("about", Name = PublicRouteNames.About)]
     public IActionResult About()
@@ -81,4 +156,15 @@ public sealed class PublicController(IConfiguration configuration) : Controller
         SupportEmail = SupportEmail,
         LastUpdated = PolicyDate
     };
+
+    private static Dictionary<string, object?> Faq(string question, string answer) => new()
+    {
+        ["@type"] = "Question",
+        ["name"] = question,
+        ["acceptedAnswer"] = new Dictionary<string, object?>
+        {
+            ["@type"] = "Answer",
+            ["text"] = answer
+        }
+    };
 }

PlotLine/Controllers/SitemapController.cs

@@ -16,6 +16,7 @@ public sealed class SitemapController(IHelpService help, IConfiguration configur
         var urls = new List<SitemapUrl>
         {
             new("/", "weekly", "1.0"),
+            new("/features", "weekly", "0.9"),
             new("/pricing", "weekly", "0.8"),
             new("/help", "weekly", "0.7"),
             new("/about", "monthly", "0.6"),

PlotLine/Services/PublicSeo.cs

@@ -9,6 +9,7 @@ namespace PlotLine.Services;
 public static class PublicRouteNames
 {
     public const string Home = "PublicHome";
+    public const string Features = "PublicFeatures";
     public const string Pricing = "PublicPricing";
     public const string Help = "PublicHelp";
     public const string HelpCategory = "PublicHelpCategory";

PlotLine/Views/Public/Features.cshtml

@@ -0,0 +1,315 @@
+@{
+    ViewData["Title"] = "Features";
+    ViewData["ShellClass"] = "marketing-shell";
+    const string Placeholder = "/images/features/feature-placeholder.webp";
+}
+
+<article class="marketing-home features-page">
+    <section class="features-hero reveal-section">
+        <div class="marketing-container features-hero__grid">
+            <div class="features-hero__copy">
+                <p class="marketing-eyebrow">PlotDirector features</p>
+                <h1>All the tools.<br />One connected story.</h1>
+                <p class="marketing-lead">
+                    PlotDirector brings every part of your story together - plans, characters, places, objects, timelines, secrets and continuity - so you can focus on the bit that matters most: writing something unforgettable.
+                </p>
+                <div class="marketing-actions">
+                    <a class="marketing-btn marketing-btn--primary" asp-controller="Account" asp-action="Register">Start your free trial</a>
+                    <a class="marketing-btn marketing-btn--secondary" asp-route="@PublicRouteNames.Pricing">View pricing</a>
+                </div>
+                <div class="features-hero__highlights" aria-label="Feature highlights">
+                    <article>
+                        <strong>Everything connected</strong>
+                        <span>Changes ripple through your story automatically.</span>
+                    </article>
+                    <article>
+                        <strong>Stay consistent</strong>
+                        <span>Spot continuity problems before your readers do.</span>
+                    </article>
+                    <article>
+                        <strong>Write with confidence</strong>
+                        <span>Know what happens when, where, and why.</span>
+                    </article>
+                </div>
+            </div>
+            <figure class="features-screenshot features-screenshot--hero">
+                <img src="/images/features/hero-timeline.webp"
+                     onerror="this.onerror=null;this.src='@Placeholder';"
+                     width="1920"
+                     height="1080"
+                     alt="PlotDirector timeline overview with scenes, plot threads and story warnings." />
+                <figcaption>Timeline overview with scenes, plot threads and story warnings.</figcaption>
+            </figure>
+        </div>
+    </section>
+
+    <nav class="features-jump reveal-section" aria-label="Jump to a feature area">
+        <div class="marketing-container">
+            <p class="marketing-eyebrow">Jump to a feature area</p>
+            <div class="features-jump__grid">
+                <a href="#plan">Plan Your Story</a>
+                <a href="#create">Create &amp; Write</a>
+                <a href="#world">Build Your World</a>
+                <a href="#consistent">Stay Consistent</a>
+                <a href="#experiment">Experiment</a>
+                <a href="#publish">Publish &amp; Share</a>
+                <a href="#word">Word Companion</a>
+            </div>
+        </div>
+    </nav>
+
+    <section class="features-section reveal-section" id="plan">
+        <div class="marketing-container">
+            <div class="features-section__heading">
+                <p class="marketing-eyebrow">Plan your story</p>
+                <h2>Lay the perfect foundation for your novel, series or screenplay.</h2>
+                <p>See the big picture and the tiny details side by side, without turning your creative process into spreadsheet archaeology.</p>
+            </div>
+            <div class="features-preview-pair">
+                <figure class="features-screenshot features-screenshot--product">
+                    <img src="/images/features/timeline.webp"
+                         onerror="this.onerror=null;this.src='@Placeholder';"
+                         width="1920"
+                         height="1080"
+                         loading="lazy"
+                         alt="PlotDirector main story timeline with readable landscape scene cards and plot thread lanes." />
+                    <figcaption>Timeline with scenes and threads</figcaption>
+                </figure>
+                <figure class="features-screenshot features-screenshot--product">
+                    <img src="/images/features/project-dashboard.webp"
+                         onerror="this.onerror=null;this.src='@Placeholder';"
+                         width="1920"
+                         height="1080"
+                         loading="lazy"
+                         alt="PlotDirector project dashboard showing books, progress and story status." />
+                    <figcaption>Project dashboard</figcaption>
+                </figure>
+            </div>
+            <div class="features-icon-grid">
+                <article class="feature-icon-card"><span aria-hidden="true">PB</span><h3>Projects, Books &amp; Chapters</h3><p>Organise your series, books and chapters in one clean workspace. Track progress, word counts, deadlines and status at a glance.</p></article>
+                <article class="feature-icon-card"><span aria-hidden="true">TL</span><h3>Timeline</h3><p>Your story's command centre. Drag scenes, spot gaps, track threads and see your story unfold across time.</p></article>
+                <article class="feature-icon-card"><span aria-hidden="true">PT</span><h3>Plot Threads</h3><p>Track every promise, mystery, conflict, reveal and payoff. Make sure the thing you set up in chapter three does not quietly vanish into the swamp.</p></article>
+                <article class="feature-icon-card"><span aria-hidden="true">SC</span><h3>Story Structure</h3><p>Build scenes, link them to chapters, and create the skeleton that supports your entire story.</p></article>
+            </div>
+        </div>
+    </section>
+
+    <section class="features-section features-section--soft reveal-section" id="create">
+        <div class="marketing-container">
+            <div class="features-section__heading">
+                <p class="marketing-eyebrow">Create &amp; write</p>
+                <h2>Turn ideas into words without losing the details that make the story work.</h2>
+                <p>Everything you need to draft, revise, polish and keep moving.</p>
+            </div>
+            <div class="features-split">
+                <figure class="features-screenshot features-screenshot--product">
+                    <img src="/images/features/scene-inspector.webp"
+                         onerror="this.onerror=null;this.src='@Placeholder';"
+                         width="1920"
+                         height="1080"
+                         loading="lazy"
+                         alt="PlotDirector Scene Inspector summary view with scene details, people, world and continuity." />
+                    <figcaption>Scene Inspector</figcaption>
+                </figure>
+                <div class="features-split__copy">
+                    <p class="marketing-eyebrow">Scene Inspector</p>
+                    <h3>Every moving part of a scene, visible at once.</h3>
+                    <p>Everything about a scene in one place: characters, locations, assets, goals, outcomes, notes, warnings and more.</p>
+                </div>
+            </div>
+            <div class="features-icon-grid features-icon-grid--three">
+                <article class="feature-icon-card"><span aria-hidden="true">WW</span><h3>Writer Workspace</h3><p>Know exactly what to write next. PlotDirector queues scenes by workflow status, priority and progress.</p></article>
+                <article class="feature-icon-card"><span aria-hidden="true">WS</span><h3>Writing Schedule</h3><p>Turn your deadline into a plan. Set your time, your pace and let PlotDirector build your writing schedule.</p></article>
+                <article class="feature-icon-card"><span aria-hidden="true">RG</span><h3>Revision &amp; Goals</h3><p>Track revisions, set goals and stay motivated with progress that actually means something.</p></article>
+            </div>
+        </div>
+    </section>
+
+    <section class="features-section reveal-section" id="world">
+        <div class="marketing-container">
+            <div class="features-section__heading">
+                <p class="marketing-eyebrow">Build your world</p>
+                <h2>Bring your world to life with rich detail that is easy to find, track and reuse.</h2>
+                <p>Because "the pub near the thing with the man" is not a sustainable world-building strategy.</p>
+            </div>
+            <div class="features-collage">
+                <figure class="features-screenshot features-screenshot--product">
+                    <img src="/images/features/floor-plans.webp"
+                         onerror="this.onerror=null;this.src='@Placeholder';"
+                         width="1920"
+                         height="1080"
+                         loading="lazy"
+                         alt="PlotDirector floor plan editor showing rooms, transitions and occupancy." />
+                    <figcaption>Floor plan editor</figcaption>
+                </figure>
+                <figure class="features-screenshot features-screenshot--product">
+                    <img src="/images/features/relationship-map.webp"
+                         onerror="this.onerror=null;this.src='@Placeholder';"
+                         width="1920"
+                         height="1080"
+                         loading="lazy"
+                         alt="PlotDirector relationship map showing character connections and changing dynamics." />
+                    <figcaption>Relationship map</figcaption>
+                </figure>
+            </div>
+            <div class="features-icon-grid features-icon-grid--five">
+                <article class="feature-icon-card"><span aria-hidden="true">CH</span><h3>Characters</h3><p>Create character profiles with aliases, attributes, images, appearances and arcs across your story.</p></article>
+                <article class="feature-icon-card"><span aria-hidden="true">RE</span><h3>Relationships</h3><p>Map connections, track dynamics and watch relationships evolve over time.</p></article>
+                <article class="feature-icon-card"><span aria-hidden="true">LO</span><h3>Locations</h3><p>Organise places, link them together and see where your story comes alive.</p></article>
+                <article class="feature-icon-card"><span aria-hidden="true">FP</span><h3>Floor Plans</h3><p>Design buildings and spaces. See who is where with interactive occupancy views.</p></article>
+                <article class="feature-icon-card"><span aria-hidden="true">AS</span><h3>Story Assets</h3><p>Track objects, clues, letters, weapons, heirlooms and anything else important to your story.</p></article>
+            </div>
+        </div>
+    </section>
+
+    <section class="features-showcase reveal-section" id="consistent">
+        <div class="marketing-container">
+            <div class="features-showcase__intro">
+                <p class="marketing-eyebrow">Stay consistent</p>
+                <h2>This is where PlotDirector earns its keep.</h2>
+                <p>Track who knows what, who has what, who was where, and what changed from one scene to the next.</p>
+            </div>
+            <figure class="features-screenshot features-screenshot--showcase">
+                <img src="/images/features/continuity-explorer.webp"
+                     onerror="this.onerror=null;this.src='@Placeholder';"
+                     width="1920"
+                     height="1080"
+                     loading="lazy"
+                     alt="PlotDirector Continuity Explorer showing readable story state across a landscape timeline." />
+                <figcaption>Continuity Explorer</figcaption>
+            </figure>
+            <div class="features-icon-grid features-icon-grid--showcase">
+                <article class="feature-icon-card"><span aria-hidden="true">SS</span><h3>Story State</h3><p>Track who knows what, who owns what, and what changed when.</p></article>
+                <article class="feature-icon-card"><span aria-hidden="true">AC</span><h3>Asset Custody</h3><p>Always know who has what, where it is, and when it changed hands.</p></article>
+                <article class="feature-icon-card"><span aria-hidden="true">LA</span><h3>Location Activity</h3><p>See which characters were where, when, and for how long.</p></article>
+                <article class="feature-icon-card"><span aria-hidden="true">WC</span><h3>Warnings &amp; Checks</h3><p>Spot problems early with smart warnings and helpful suggestions.</p></article>
+                <article class="feature-icon-card"><span aria-hidden="true">SH</span><h3>Story Health</h3><p>Measure pacing, balance, thread health and more. Keep your story strong.</p></article>
+            </div>
+            <aside class="features-did-you-know">
+                <strong>Did you know?</strong>
+                <p>Move a scene on the Timeline and PlotDirector keeps the rest of your story model in sync - characters, locations, assets, story state, continuity and writing plans.</p>
+            </aside>
+        </div>
+    </section>
+
+    <section class="features-section reveal-section" id="experiment">
+        <div class="marketing-container">
+            <div class="features-section__heading">
+                <p class="marketing-eyebrow">Experiment safely</p>
+                <h2>Try new ideas without breaking your main story.</h2>
+                <p>Test different orders and explore possibilities while your real manuscript stays steady.</p>
+            </div>
+            <figure class="features-screenshot features-screenshot--wide">
+                <img src="/images/features/scenarios.webp"
+                     onerror="this.onerror=null;this.src='@Placeholder';"
+                     width="1920"
+                     height="1080"
+                     loading="lazy"
+                     alt="PlotDirector scenario timeline for alternate story orders and what-if structures." />
+                <figcaption>Scenario timeline</figcaption>
+            </figure>
+            <div class="features-icon-grid features-icon-grid--three">
+                <article class="feature-icon-card"><span aria-hidden="true">SC</span><h3>Scenarios</h3><p>Create alternate story orders and what-if structures. Perfect for trying bold changes.</p></article>
+                <article class="feature-icon-card"><span aria-hidden="true">CV</span><h3>Compare &amp; Validate</h3><p>See how your scenario compares to the main story and validate the impact.</p></article>
+                <article class="feature-icon-card"><span aria-hidden="true">AP</span><h3>Apply with Confidence</h3><p>When you are happy, apply changes back to your main story in one click.</p></article>
+            </div>
+        </div>
+    </section>
+
+    <section class="features-section features-section--soft reveal-section" id="publish">
+        <div class="marketing-container">
+            <div class="features-section__heading">
+                <p class="marketing-eyebrow">Publish, share &amp; protect</p>
+                <h2>Your story knowledge should never be trapped.</h2>
+                <p>Export it, share it, back it up and keep control of everything you have built.</p>
+            </div>
+            <div class="features-icon-grid features-icon-grid--publish">
+                <article class="feature-icon-card feature-icon-card--large"><span aria-hidden="true">SB</span><h3>Story Bible</h3><p>Create a one-click story bible with characters, settings, timelines, threads and more.</p></article>
+                <article class="feature-icon-card feature-icon-card--large"><span aria-hidden="true">EX</span><h3>Exports</h3><p>Export timelines, character guides, scene briefs and more in useful formats.</p></article>
+                <article class="feature-icon-card feature-icon-card--large"><span aria-hidden="true">BK</span><h3>Backups</h3><p>Create backups and restore points so your work stays safe.</p></article>
+                <article class="feature-icon-card feature-icon-card--large"><span aria-hidden="true">CO</span><h3>Collaboration</h3><p>Invite trusted collaborators, editors or co-writers into your project.</p></article>
+                <article class="feature-icon-card feature-icon-card--large"><span aria-hidden="true">PE</span><h3>Permissions</h3><p>Granular permissions help ensure the right people see the right things.</p></article>
+            </div>
+        </div>
+    </section>
+
+    <section class="features-word reveal-section" id="word">
+        <div class="marketing-container features-word__grid">
+            <div>
+                <p class="marketing-eyebrow">Microsoft Word Companion</p>
+                <h2>Write in Word. Stay connected to your story.</h2>
+                <p>The Microsoft Word Companion links your manuscript to PlotDirector, so your planning and your writing can work together instead of living in separate worlds.</p>
+                <ul class="features-bullet-list">
+                    <li>Sync chapters and scenes</li>
+                    <li>Update word counts automatically</li>
+                    <li>Detect characters, assets and locations</li>
+                    <li>Get suggestions and continuity warnings as you write</li>
+                    <li>Keep PlotDirector focused on the scene you are working on</li>
+                </ul>
+            </div>
+            <figure class="features-screenshot">
+                <img src="/images/features/word-companion.webp"
+                     onerror="this.onerror=null;this.src='@Placeholder';"
+                     width="1920"
+                     height="1080"
+                     loading="lazy"
+                     alt="Microsoft Word document with the PlotDirector Companion pane connected to story planning data." />
+                <figcaption>Word document with PlotDirector Companion pane</figcaption>
+            </figure>
+        </div>
+    </section>
+
+    <section class="features-faq reveal-section" aria-labelledby="features-faq-heading">
+        <div class="marketing-container">
+            <div class="section-heading">
+                <p class="marketing-eyebrow">Questions writers ask</p>
+                <h2 id="features-faq-heading">PlotDirector FAQ</h2>
+            </div>
+            <div class="faq-grid">
+                <article><h3>What is PlotDirector?</h3><p>PlotDirector is story planning and writing software for authors. It helps writers organise books, chapters, scenes, characters, locations, timelines, plot threads, continuity, writing schedules and story bibles in one connected workspace.</p></article>
+                <article><h3>Can PlotDirector help with story continuity?</h3><p>Yes. PlotDirector includes continuity tools for tracking characters, locations, story assets, knowledge, custody, warnings and story state across scenes.</p></article>
+                <article><h3>Does PlotDirector work with Microsoft Word?</h3><p>PlotDirector includes a Microsoft Word Companion designed to connect your manuscript with your planning data, helping sync chapters, scenes, word counts and story details.</p></article>
+                <article><h3>Can I use PlotDirector for a series?</h3><p>Yes. PlotDirector supports projects, books, chapters and scenes, making it suitable for novels, series, screenplays and larger story worlds.</p></article>
+                <article><h3>Does PlotDirector include character and relationship tracking?</h3><p>Yes. PlotDirector includes character profiles, aliases, appearances, relationship tracking, relationship maps and changes over time.</p></article>
+                <article><h3>Can PlotDirector create a story bible?</h3><p>Yes. PlotDirector can produce story bible exports containing key information about characters, settings, plot threads, timelines and other story details.</p></article>
+            </div>
+        </div>
+    </section>
+
+    <section class="final-cta reveal-section">
+        <div class="marketing-container final-cta__inner">
+            <p class="marketing-eyebrow">Ready to bring your story to life?</p>
+            <h2>Ready to bring your story to life?</h2>
+            <p>Join thousands of writers who plan, write and finish with PlotDirector.</p>
+            <div class="marketing-actions">
+                <a class="marketing-btn marketing-btn--primary" asp-controller="Account" asp-action="Register">Start your free trial</a>
+                <a class="marketing-btn marketing-btn--secondary" asp-route="@PublicRouteNames.Pricing">View pricing</a>
+            </div>
+            <small>Free trial available. No card required. Cancel anytime.</small>
+        </div>
+    </section>
+</article>
+
+@section Scripts {
+    <script>
+        (() => {
+            const sections = document.querySelectorAll(".reveal-section");
+            if (!("IntersectionObserver" in window)) {
+                sections.forEach((section) => section.classList.add("is-visible"));
+                return;
+            }
+
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add("is-visible");
+                        observer.unobserve(entry.target);
+                    }
+                });
+            }, { threshold: 0.12 });
+
+            sections.forEach((section) => observer.observe(section));
+        })();
+    </script>
+}
+

PlotLine/Views/Shared/_Layout.cshtml

@@ -138,6 +138,9 @@
                             <li class="nav-item">
                                 <a class="nav-link text-dark" asp-route="@PublicRouteNames.Home">Home</a>
                             </li>
+                            <li class="nav-item">
+                                <a class="nav-link text-dark" asp-route="@PublicRouteNames.Features">Features</a>
+                            </li>
                             <li class="nav-item">
                                 <a class="nav-link text-dark" asp-route="@PublicRouteNames.Pricing">Pricing</a>
                             </li>
@@ -255,6 +258,7 @@
                 <a class="public-footer__brand" asp-route="@PublicRouteNames.Home">PlotDirector</a>
                 <nav class="public-footer__nav" aria-label="Footer navigation">
                     <a asp-route="@PublicRouteNames.Home">Home</a>
+                    <a asp-route="@PublicRouteNames.Features">Features</a>
                     <a asp-route="@PublicRouteNames.About">About</a>
                     <a asp-route="@PublicRouteNames.Pricing">Pricing</a>
                     <a asp-route="@PublicRouteNames.Help">Help</a>

PlotLine/wwwroot/css/plotline-theme.css

@@ -38,6 +38,426 @@
   --app-timeline-bg: var(--plotline-timeline-bg);
 }
 
+/* Public features page */
+.features-page {
+  scroll-behavior: smooth;
+}
+
+.features-hero {
+  position: relative;
+  overflow: hidden;
+  padding: clamp(3.5rem, 7vw, 7.4rem) 0 clamp(3rem, 6vw, 5.25rem);
+  background:
+    radial-gradient(circle at 12% 18%, rgba(212, 165, 116, 0.2), transparent 26rem),
+    radial-gradient(circle at 88% 8%, rgba(95, 120, 108, 0.18), transparent 24rem),
+    linear-gradient(180deg, var(--marketing-cream), var(--marketing-offwhite));
+}
+
+.features-hero__grid,
+.features-word__grid {
+  display: grid;
+  grid-template-columns: minmax(320px, 0.72fr) minmax(560px, 1.28fr);
+  align-items: center;
+  gap: clamp(2rem, 4vw, 4.25rem);
+}
+
+.features-hero__copy {
+  max-width: 620px;
+}
+
+.features-hero__highlights {
+  display: grid;
+  gap: 0.9rem;
+  margin-top: 1.75rem;
+}
+
+.features-hero__highlights article {
+  display: grid;
+  gap: 0.15rem;
+  padding: 1rem 1.1rem;
+  border: 1px solid var(--marketing-line);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.72);
+  box-shadow: 0 18px 46px rgba(31, 42, 68, 0.08);
+}
+
+.features-hero__highlights strong {
+  color: var(--marketing-navy);
+  font-size: 1rem;
+}
+
+.features-hero__highlights span,
+.features-section__heading p,
+.features-showcase__intro p,
+.features-word p,
+.features-bullet-list,
+.feature-icon-card p,
+.features-split__copy p,
+.features-faq p {
+  color: var(--marketing-muted);
+}
+
+.features-screenshot {
+  position: relative;
+  margin: 0;
+  overflow: hidden;
+  border: 1px solid rgba(31, 42, 68, 0.14);
+  border-radius: 28px;
+  background: linear-gradient(180deg, #fffdf8, #f7f0e8);
+  box-shadow: var(--marketing-shadow);
+}
+
+.features-screenshot::before {
+  content: "";
+  display: block;
+  height: 38px;
+  background:
+    radial-gradient(circle at 24px 50%, #d77a68 0 5px, transparent 6px),
+    radial-gradient(circle at 44px 50%, #e2bc72 0 5px, transparent 6px),
+    radial-gradient(circle at 64px 50%, #79a286 0 5px, transparent 6px),
+    linear-gradient(90deg, #f5efe7, #fff);
+}
+
+.features-screenshot img {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  background: #f8f3ec;
+}
+
+.features-screenshot--hero {
+  margin-right: min(-3vw, -1.5rem);
+}
+
+.features-screenshot--product,
+.features-screenshot--wide {
+  box-shadow: 0 28px 70px rgba(31, 42, 68, 0.14);
+}
+
+.features-screenshot--showcase {
+  margin-bottom: 1.35rem;
+  border-color: rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.features-screenshot--wide {
+  max-width: 1180px;
+  margin-bottom: 1.35rem;
+}
+
+.features-screenshot figcaption,
+.feature-icon-card span {
+  color: var(--marketing-rose);
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.features-screenshot figcaption {
+  padding: 0.8rem 1rem 1rem;
+  background: #fff;
+}
+
+.features-jump {
+  padding: 2rem 0;
+  background: var(--marketing-offwhite);
+}
+
+.features-jump__grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.features-jump__grid a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 0.65rem 1rem;
+  border: 1px solid rgba(31, 42, 68, 0.14);
+  border-radius: 999px;
+  background: #fff;
+  color: var(--marketing-navy);
+  font-weight: 800;
+  text-decoration: none;
+  box-shadow: 0 10px 24px rgba(31, 42, 68, 0.07);
+}
+
+.features-jump__grid a:hover,
+.features-jump__grid a:focus {
+  border-color: rgba(212, 165, 116, 0.8);
+  color: var(--marketing-navy);
+  transform: translateY(-1px);
+}
+
+.features-section,
+.features-showcase,
+.features-word,
+.features-faq {
+  padding: clamp(4rem, 8vw, 7rem) 0;
+}
+
+.features-section--soft,
+.features-word {
+  background:
+    linear-gradient(135deg, rgba(212, 165, 116, 0.18), transparent 38%),
+    var(--marketing-cream);
+}
+
+.features-section__heading,
+.features-showcase__intro {
+  max-width: 880px;
+  margin-bottom: clamp(2rem, 4vw, 3.25rem);
+}
+
+.features-section__heading h2,
+.features-showcase__intro h2,
+.features-word h2 {
+  max-width: 780px;
+}
+
+.features-preview-pair,
+.features-collage {
+  display: grid;
+  gap: clamp(1.25rem, 3vw, 2rem);
+  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
+}
+
+.features-preview-pair {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
+}
+
+.features-collage {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.features-split {
+  display: grid;
+  grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.58fr);
+  align-items: center;
+  gap: clamp(1.5rem, 4vw, 3rem);
+  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
+}
+
+.features-split__copy {
+  padding: clamp(1.4rem, 3vw, 2rem);
+}
+
+.features-split__copy h3 {
+  font-size: clamp(1.7rem, 3vw, 2.35rem);
+}
+
+.features-icon-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.features-icon-grid--five {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.features-icon-grid--three {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.features-icon-grid--showcase {
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+}
+
+.features-icon-grid--publish {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.feature-icon-card {
+  min-height: 100%;
+  padding: clamp(1.1rem, 2.5vw, 1.5rem);
+  border: 1px solid rgba(31, 42, 68, 0.12);
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.88);
+  box-shadow: 0 18px 46px rgba(31, 42, 68, 0.09);
+}
+
+.feature-icon-card > span {
+  display: inline-grid;
+  place-items: center;
+  width: 3rem;
+  height: 3rem;
+  margin-bottom: 1rem;
+  border-radius: 16px;
+  background:
+    linear-gradient(135deg, rgba(212, 165, 116, 0.22), rgba(95, 120, 108, 0.16)),
+    #fffaf2;
+  color: var(--marketing-navy);
+  letter-spacing: 0;
+}
+
+.feature-icon-card--large {
+  padding: clamp(1.25rem, 3vw, 1.8rem);
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(250, 248, 245, 0.88)),
+    #fff;
+}
+
+.feature-icon-card h3 {
+  margin: 0 0 0.55rem;
+  overflow-wrap: anywhere;
+  font-size: clamp(1rem, 1.35vw, 1.18rem);
+  line-height: 1.18;
+}
+
+.feature-icon-card p {
+  margin: 0;
+}
+
+.features-showcase {
+  position: relative;
+  overflow: hidden;
+  background:
+    linear-gradient(135deg, rgba(31, 42, 68, 0.96), rgba(49, 66, 99, 0.96)),
+    var(--marketing-navy);
+}
+
+.features-showcase .marketing-eyebrow,
+.features-showcase h2,
+.features-showcase h3 {
+  color: #fff;
+}
+
+.features-showcase__intro p,
+.features-showcase .feature-icon-card p {
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.features-showcase .features-showcase__intro h2,
+.features-showcase .feature-icon-card h3 {
+  color: #f0c995;
+}
+
+.features-showcase .feature-icon-card {
+  border-color: rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
+}
+
+.features-showcase .feature-icon-card > span {
+  background: rgba(255, 255, 255, 0.13);
+  color: #f0c995;
+}
+
+.features-did-you-know {
+  margin-top: 1.4rem;
+  padding: clamp(1.35rem, 3vw, 2rem);
+  border: 1px solid rgba(212, 165, 116, 0.42);
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.11);
+  color: #fff;
+}
+
+.features-did-you-know strong {
+  display: block;
+  margin-bottom: 0.35rem;
+  color: #f0c995;
+  font-size: 1.1rem;
+}
+
+.features-did-you-know p {
+  max-width: 920px;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.features-word {
+  border-top: 1px solid rgba(31, 42, 68, 0.08);
+  border-bottom: 1px solid rgba(31, 42, 68, 0.08);
+}
+
+.features-word__grid {
+  grid-template-columns: minmax(300px, 0.62fr) minmax(560px, 1.38fr);
+}
+
+.features-bullet-list {
+  display: grid;
+  gap: 0.7rem;
+  margin: 1.4rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.features-bullet-list li {
+  position: relative;
+  padding-left: 1.7rem;
+}
+
+.features-bullet-list li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.45rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--marketing-gold), var(--marketing-rose));
+}
+
+.features-faq {
+  background: var(--marketing-offwhite);
+}
+
+.features-page .final-cta small {
+  display: block;
+  margin-top: 1rem;
+  color: rgba(255, 255, 255, 0.72);
+}
+
+@media (max-width: 980px) {
+  .features-hero__grid,
+  .features-word__grid,
+  .features-split,
+  .features-preview-pair,
+  .features-collage {
+    grid-template-columns: 1fr;
+  }
+
+  .features-screenshot--hero {
+    margin-right: 0;
+  }
+
+  .features-icon-grid,
+  .features-icon-grid--three {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 680px) {
+  .features-hero {
+    padding-top: 2.4rem;
+  }
+
+  .features-icon-grid,
+  .features-icon-grid--three,
+  .features-icon-grid--publish {
+    grid-template-columns: 1fr;
+  }
+
+  .features-jump__grid a {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .features-screenshot,
+  .feature-icon-card {
+    border-radius: 18px;
+  }
+
+  .features-screenshot::before {
+    height: 30px;
+  }
+}
+
 [data-theme="dark"] {
   color-scheme: dark;
   --plotline-bg: #14110f;