From 864d9089a7dff3f1b9938a2abf8c76b785945d94 Mon Sep 17 00:00:00 2001 From: Nick Beckley Date: Sun, 7 Jun 2026 21:11:44 +0100 Subject: [PATCH] Pricing page creation --- PlotLine/Controllers/PricingController.cs | 79 +++++++ PlotLine/ViewModels/AuthViewModels.cs | 7 + PlotLine/Views/Pricing/Index.cshtml | 211 ++++++++++++++++++ PlotLine/Views/Shared/_Layout.cshtml | 3 + PlotLine/wwwroot/css/plotline-theme.css | 251 +++++++++++++++++++++- 5 files changed, 549 insertions(+), 2 deletions(-) create mode 100644 PlotLine/Controllers/PricingController.cs create mode 100644 PlotLine/Views/Pricing/Index.cshtml diff --git a/PlotLine/Controllers/PricingController.cs b/PlotLine/Controllers/PricingController.cs new file mode 100644 index 0000000..9998ba1 --- /dev/null +++ b/PlotLine/Controllers/PricingController.cs @@ -0,0 +1,79 @@ +using Microsoft.AspNetCore.Authorization; +using Microsoft.AspNetCore.Mvc; +using PlotLine.Data; +using PlotLine.Models; +using PlotLine.Services; +using PlotLine.ViewModels; + +namespace PlotLine.Controllers; + +[AllowAnonymous] +public sealed class PricingController( + ICurrentUserService currentUser, + IUserRepository users, + ISubscriptionService subscriptions, + IStripeBillingService stripeBilling) : Controller +{ + [HttpGet] + public async Task Index() + { + UserSubscriptionDetail? currentSubscription = null; + if (currentUser.UserId is int userId) + { + currentSubscription = await subscriptions.GetCurrentSubscriptionAsync(userId); + } + + return View(new PricingViewModel + { + Plans = await subscriptions.GetActiveSubscriptionLevelsAsync(), + CurrentSubscriptionLevelID = currentSubscription?.SubscriptionLevelID, + IsSignedIn = currentUser.UserId.HasValue + }); + } + + [HttpGet] + public IActionResult StartTrial() + { + if (!currentUser.UserId.HasValue) + { + return RedirectToAction("Register", "Account"); + } + + return RedirectToAction("Subscription", "ManageAccount"); + } + + [HttpGet] + public async Task Checkout(int id, string billingInterval = "Monthly") + { + if (!currentUser.UserId.HasValue) + { + var returnUrl = Url.Action(nameof(Checkout), "Pricing", new { id, billingInterval }) ?? "/Pricing"; + return RedirectToAction("Login", "Account", new { returnUrl }); + } + + var user = await users.GetByIdAsync(currentUser.UserId.Value); + if (user is null) + { + return RedirectToAction("Login", "Account"); + } + + var request = new StripeCheckoutRequest + { + SubscriptionLevelID = id, + BillingInterval = string.Equals(billingInterval, "Annual", StringComparison.OrdinalIgnoreCase) + ? "Annual" + : "Monthly" + }; + + var successUrl = Url.Action("SubscriptionSuccess", "ManageAccount", null, Request.Scheme) ?? string.Empty; + var cancelUrl = Url.Action(nameof(Index), "Pricing", null, Request.Scheme) ?? string.Empty; + var result = await stripeBilling.StartCheckoutOrChangePlanAsync(user, request, successUrl, cancelUrl); + if (result.Succeeded && !string.IsNullOrWhiteSpace(result.RedirectUrl)) + { + return Redirect(result.RedirectUrl); + } + + TempData["PricingMessage"] = result.Message; + return RedirectToAction(nameof(Index)); + } +} diff --git a/PlotLine/ViewModels/AuthViewModels.cs b/PlotLine/ViewModels/AuthViewModels.cs index 74a05e9..cd9cba3 100644 --- a/PlotLine/ViewModels/AuthViewModels.cs +++ b/PlotLine/ViewModels/AuthViewModels.cs @@ -17,6 +17,13 @@ public sealed class ManageSubscriptionViewModel public IReadOnlyList AvailableLevels { get; set; } = []; } +public sealed class PricingViewModel +{ + public IReadOnlyList Plans { get; set; } = []; + public int? CurrentSubscriptionLevelID { get; set; } + public bool IsSignedIn { get; set; } +} + public sealed class RegisterViewModel { [Required(ErrorMessage = "Enter your email address.")] diff --git a/PlotLine/Views/Pricing/Index.cshtml b/PlotLine/Views/Pricing/Index.cshtml new file mode 100644 index 0000000..73f88c5 --- /dev/null +++ b/PlotLine/Views/Pricing/Index.cshtml @@ -0,0 +1,211 @@ +@model PricingViewModel +@{ + ViewData["Title"] = "Pricing"; + ViewData["ShellClass"] = "marketing-shell"; + var paidPlans = Model.Plans.Where(x => x.RequiresStripeSubscription).ToList(); + var suggestedPlanId = paidPlans.Count >= 2 ? paidPlans[paidPlans.Count / 2].SubscriptionLevelID : (int?)null; +} + +
+
+
+

Pricing

+

Simple pricing for stories of every size.

+

Start free, subscribe when you're ready, or choose a plan straight away.

+
+ Start Free Trial + Compare Plans +
+
+
+ + @if (TempData["PricingMessage"] is string pricingMessage) + { +
+
@pricingMessage
+
+ } + +
+
+
+

Plans

+

Choose the space your story needs.

+
+ + @if (!Model.Plans.Any()) + { +
+

Plans are being prepared.

+

Active subscription levels are not available yet. Please check back soon.

+
+ } + else + { +
+ @foreach (var plan in Model.Plans) + { + var isCurrent = Model.CurrentSubscriptionLevelID == plan.SubscriptionLevelID; + var isSuggested = suggestedPlanId == plan.SubscriptionLevelID; +
+ @if (isSuggested) + { +

Most Popular

+ } +
+

@plan.DisplayName

+

@PlanTagline(plan)

+
+ +
+ @if (plan.RequiresStripeSubscription) + { + @FormatMoney(plan.MonthlyPricePence, plan.CurrencyCode) + per month + @if (plan.AnnualPricePence.HasValue) + { + @FormatMoney(plan.AnnualPricePence, plan.CurrencyCode) billed annually + } + } + else + { + Free + trial workspace + Assigned when you create an account. + } +
+ +
    +
  • @FormatLimit(plan.MaxBooks) books
    • +
  • @FormatLimit(plan.MaxCharactersPerProject) characters per project
    • +
  • @FormatLimit(plan.MaxScenesPerBook) scenes per book
    • +
  • @FormatStorageAllowance(plan.MaxStorageMB) storage
    • +
  • @FormatLimit(plan.MaxCollaborators) collaborators
    • +
+ +
+ @if (!plan.RequiresStripeSubscription) + { + Start Free Trial + } + else + { + + @(isCurrent ? "Current Plan" : "Subscribe Now") + + @if (plan.AnnualPricePence.HasValue) + { + Choose annual billing + } + } +
+
+ } +
+ } +
+
+ +
+
+
+

What is included

+

Everything you need to keep a complex novel coherent.

+
+
+
+

Planning capacity

+

Database-backed limits for books, chapters, scenes, characters, storage, and collaborators scale with the plan you choose.

+
+
+

Story organisation

+

Characters, plot threads, story assets, locations, and the story bible help keep the moving pieces of your manuscript in one place.

+
+
+

Structure and flow

+

Timeline, scene metrics, story health, and analytics views help you understand pacing, pressure, and revision priorities.

+
+
+

Continuity confidence

+

Relationship mapping, continuity warnings, import, export, backups, and restore points support serious drafting and revision work.

+
+
+
+
+ +
+
+
+

Questions

+

Pricing FAQ

+
+
+
+

Can I start with a free trial?

+

Yes. Creating an account starts you on the Draft Desk evaluation plan, so you can try the workspace before choosing a paid subscription.

+
+
+

Can I subscribe without using the trial?

+

Yes. Choose a paid plan from this page. If you are not signed in, PlotWeaver will ask you to log in before continuing to checkout.

+
+
+

Can I change plan later?

+

Yes. Signed-in users can manage subscription changes from the account subscription area.

+
+
+

What happens to my work if I cancel?

+

Your existing story data remains in PlotWeaver. Your account may return to the application-managed Draft Desk level after the paid subscription ends.

+
+
+

Is PlotWeaver suitable for a series?

+

Yes. The higher plan limits are designed for authors managing multiple books, long arcs, and larger casts.

+
+
+

Do I need a credit card for the trial?

+

The registration flow creates the evaluation workspace. Payment details are only handled when you choose a paid subscription through Stripe Checkout.

+
+
+
+
+ +
+
+

Begin with clarity

+

Ready to take control of your story?

+

Try PlotWeaver Studio free, or choose the paid plan that fits the novel you are building.

+
+ Start Free Trial + View Plans +
+
+
+
+ +@functions { + private const int PracticalUnlimited = 999999; + + private static string FormatLimit(int value) => + value >= PracticalUnlimited ? "Unlimited" : value.ToString("N0"); + + private static string FormatStorageAllowance(int megabytes) => + megabytes >= PracticalUnlimited + ? "Unlimited" + : StorageUsage.FormatBytes(megabytes * 1024L * 1024L); + + private static string FormatMoney(int? pence, string? currencyCode) + { + if (!pence.HasValue) + { + return "Contact us"; + } + + return string.Equals(currencyCode, "GBP", StringComparison.OrdinalIgnoreCase) + ? $"GBP {pence.Value / 100m:0.00}" + : $"{pence.Value / 100m:0.00} {(string.IsNullOrWhiteSpace(currencyCode) ? "GBP" : currencyCode.ToUpperInvariant())}"; + } + + private static string PlanTagline(SubscriptionLevel plan) => + string.IsNullOrWhiteSpace(plan.Description) + ? plan.RequiresStripeSubscription ? "For authors ready to build with confidence." : "A calm place to begin." + : plan.Description; +} diff --git a/PlotLine/Views/Shared/_Layout.cshtml b/PlotLine/Views/Shared/_Layout.cshtml index 3478b52..a6c301a 100644 --- a/PlotLine/Views/Shared/_Layout.cshtml +++ b/PlotLine/Views/Shared/_Layout.cshtml @@ -37,6 +37,9 @@
  • Home
    • +
  • + Pricing +
    • @if (User.Identity?.IsAuthenticated == true) {
  • diff --git a/PlotLine/wwwroot/css/plotline-theme.css b/PlotLine/wwwroot/css/plotline-theme.css index 167628a..ab6b13d 100644 --- a/PlotLine/wwwroot/css/plotline-theme.css +++ b/PlotLine/wwwroot/css/plotline-theme.css @@ -2218,7 +2218,7 @@ a:focus-visible { .marketing-hero { position: relative; - padding: clamp(4rem, 8vw, 7.25rem) 0 clamp(3.5rem, 7vw, 6rem); + padding: clamp(2rem, 5vw, 3.75rem) 0 clamp(3.5rem, 7vw, 6rem); } .marketing-hero::before { @@ -2908,6 +2908,240 @@ a:focus-visible { color: #241b12; } +.pricing-page { + margin-top: -1rem; +} + +.pricing-hero { + padding: clamp(4rem, 8vw, 7rem) 0 clamp(2.5rem, 6vw, 4.5rem); + background: + radial-gradient(circle at 18% 20%, rgba(212, 165, 116, 0.2), transparent 24rem), + linear-gradient(180deg, var(--marketing-cream), var(--marketing-offwhite)); +} + +.pricing-hero__inner { + display: grid; + justify-items: center; + gap: 1.1rem; + text-align: center; +} + +.pricing-hero h1 { + max-width: 12ch; +} + +.pricing-hero .marketing-lead { + max-width: 46rem; +} + +.pricing-message { + border: 1px solid rgba(31, 42, 68, 0.12); + border-radius: 16px; + padding: 1rem 1.1rem; + margin: 1rem 0 0; + color: var(--marketing-navy); + background: rgba(255, 253, 249, 0.9); + box-shadow: 0 14px 32px rgba(31, 42, 68, 0.08); + font-weight: 750; +} + +.pricing-plans, +.pricing-compare, +.pricing-faq { + padding: clamp(3.5rem, 7vw, 6rem) 0; +} + +.pricing-plans { + background: var(--marketing-offwhite); +} + +.pricing-compare { + background: + radial-gradient(circle at 90% 20%, rgba(95, 120, 108, 0.12), transparent 24rem), + var(--marketing-cream); +} + +.pricing-faq { + background: var(--marketing-offwhite); +} + +.pricing-empty { + border: 1px solid rgba(31, 42, 68, 0.11); + border-radius: 22px; + padding: clamp(1.5rem, 4vw, 2.5rem); + background: rgba(255, 253, 249, 0.92); + box-shadow: 0 18px 42px rgba(31, 42, 68, 0.08); + text-align: center; +} + +.pricing-empty p { + margin: 0.75rem auto 0; + max-width: 42rem; + color: var(--marketing-muted); + line-height: 1.7; +} + +.pricing-card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1rem; + align-items: stretch; +} + +.pricing-card { + position: relative; + display: grid; + gap: 1.25rem; + align-content: start; + min-height: 100%; + border: 1px solid rgba(31, 42, 68, 0.11); + border-radius: 22px; + padding: clamp(1.2rem, 2.4vw, 1.65rem); + background: + linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(250, 248, 245, 0.9)), + #fff; + box-shadow: 0 18px 42px rgba(31, 42, 68, 0.08); +} + +.pricing-card--featured { + border-color: rgba(212, 165, 116, 0.7); + box-shadow: 0 26px 58px rgba(31, 42, 68, 0.13); +} + +.pricing-badge { + width: fit-content; + margin: 0; + border: 1px solid rgba(212, 165, 116, 0.55); + border-radius: 999px; + padding: 0.38rem 0.7rem; + color: #634019; + background: rgba(212, 165, 116, 0.22); + font-size: 0.76rem; + font-weight: 850; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.pricing-card__heading { + display: grid; + gap: 0.5rem; +} + +.pricing-card h3, +.comparison-grid h3, +.faq-grid h3 { + margin: 0; + color: var(--marketing-navy); + font-family: Georgia, "Times New Roman", serif; + font-size: clamp(1.35rem, 2vw, 1.75rem); + line-height: 1.12; +} + +.pricing-card__heading p { + margin: 0; + color: var(--marketing-muted); + line-height: 1.55; +} + +.pricing-price { + display: grid; + gap: 0.2rem; + border-top: 1px solid rgba(31, 42, 68, 0.1); + border-bottom: 1px solid rgba(31, 42, 68, 0.1); + padding: 1rem 0; +} + +.pricing-price strong { + color: var(--marketing-navy); + font-family: Georgia, "Times New Roman", serif; + font-size: clamp(2.15rem, 4vw, 3rem); + line-height: 1; +} + +.pricing-price span, +.pricing-price small { + color: var(--marketing-muted); + font-weight: 720; +} + +.pricing-price small { + font-size: 0.88rem; +} + +.pricing-feature-list { + display: grid; + gap: 0.65rem; + margin: 0; + padding: 0; + list-style: none; +} + +.pricing-feature-list li { + position: relative; + padding-left: 1.35rem; + color: var(--marketing-navy); + font-weight: 740; + line-height: 1.35; +} + +.pricing-feature-list li::before { + content: ""; + position: absolute; + left: 0; + top: 0.44rem; + width: 0.58rem; + height: 0.58rem; + border-radius: 999px; + background: var(--marketing-gold); + box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.18); +} + +.pricing-card__actions { + display: grid; + gap: 0.7rem; + margin-top: auto; +} + +.pricing-card__actions .marketing-btn { + width: 100%; +} + +.pricing-link { + display: inline-flex; + justify-content: center; + color: var(--marketing-navy); + font-weight: 820; + text-decoration-color: rgba(31, 42, 68, 0.24); +} + +.pricing-link:hover, +.pricing-link:focus { + color: #8b612e; +} + +.comparison-grid, +.faq-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1rem; +} + +.comparison-grid article, +.faq-grid article { + border: 1px solid rgba(31, 42, 68, 0.1); + border-radius: 18px; + padding: clamp(1.1rem, 2.2vw, 1.5rem); + background: rgba(255, 253, 249, 0.9); + box-shadow: 0 16px 36px rgba(31, 42, 68, 0.07); +} + +.comparison-grid p, +.faq-grid p { + margin: 0.7rem 0 0; + color: var(--marketing-muted); + line-height: 1.7; +} + .reveal-section { opacity: 0; transform: translateY(24px); @@ -2970,6 +3204,11 @@ a:focus-visible { .testimonial-grid { grid-template-columns: 1fr; } + + .comparison-grid, + .faq-grid { + grid-template-columns: 1fr; + } } @media (max-width: 760px) { @@ -2982,7 +3221,7 @@ a:focus-visible { } .marketing-hero { - padding-top: 2.25rem; + padding-top: 1.8rem; } .marketing-actions, @@ -3071,6 +3310,14 @@ a:focus-visible { .founder-mark { max-width: 220px; } + + .pricing-hero { + padding-top: 3rem; + } + + .pricing-card-grid { + grid-template-columns: 1fr; + } } @media (max-width: 520px) {