Open-source event organizing web application and a reference DDD solution.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

136 lines
5.2 KiB

@page "/pricing/{organizationName}"
@using EventHub.Localization
@using Microsoft.AspNetCore.Mvc.Localization
@model EventHub.Web.Pages.Pricing
@inject IHtmlLocalizer<EventHubResource> L
@section styles {
<abp-style src="/Pages/Pricing.css" />
}
<div class="container-fluid flex-grow-1 container-p-y pricing-table">
<div class="container px-0">
<h1 class="text-center font-weight-bolder pt-5 mb-3">
Pricing plans
</h1>
<div class="text-center text-muted text-large font-weight-light">
Choose the plan best for your organization.
</div>
<div class="row no-gutters row-bordered ui-bordered text-center mt-3">
<div class="d-flex col-md flex-column py-4">
<div class="display-1 text-primary my-4"><i class="lnr lnr-briefcase text-big"></i></div>
<h5 class="m-0 ml-2">Free account</h5>
<div class="flex-grow-1">
<div class="py-4 my-2">
<span class="d-inline-block text-muted text-big align-middle mr-2">$</span>
<span class="display-3 d-inline-block font-weight-bold align-middle">0</span>
</div>
<div class="pb-5">
<p class="ui-company-text mb-2">1 event per month</p>
<p class="ui-company-text mb-2">300 attendees per event</p>
</div>
</div>
<div class="px-md-3 px-lg-5">
</div>
</div>
@if(Model.PremiumPlanInfo is not null)
{
<div class="d-flex col-md flex-column py-4">
<div class="display-1 text-primary my-4"><i class="lnr lnr-store text-big"></i></div>
<h5 class="m-0">
@Model.PremiumPlanInfo.PlanType account
@if (Model.Organization.IsPremium)
{
<span class="align-top text-dark font-weight-bold" style="font-size: x-small" abp-badge-pill="Info"> Current Plan </span>
}
</h5>
<div class="flex-grow-1">
<div class="py-4 my-2">
<span class="d-inline-block text-muted text-big align-middle mr-2">$</span>
<span class="display-3 d-inline-block font-weight-bold align-middle">@Model.PremiumPlanInfo.Price</span>
</div>
<div class="pb-5">
<p class="ui-company-text mb-2">unlimited events</p>
<p class="ui-company-text mb-2">unlimited attendees</p>
</div>
</div>
<div class="px-md-3 px-lg-5">
@if (Model.Organization.IsPremium)
{
<form id="Extend" method="post" asp-page-handler="Extend">
<abp-input asp-for="TargetPlanToUpgrade" value="@Model.PremiumPlanInfo.PlanType"></abp-input>
<abp-input asp-for="OrganizationName"></abp-input>
<a onclick="document.getElementById('Extend').submit()" class="btn btn-primary btn-lg rounded-pill">Extend Now</a>
</form>
}
else
{
<form id="Upgrade" method="post" asp-page-handler="Upgrade">
<abp-input asp-for="TargetPlanToUpgrade" value="@Model.PremiumPlanInfo.PlanType"></abp-input>
<abp-input asp-for="OrganizationName"></abp-input>
<a onclick="document.getElementById('Upgrade').submit()" class="btn btn-primary btn-lg rounded-pill">Upgrade To @Model.PremiumPlanInfo.PlanType</a>
</form>
}
</div>
</div>
}
</div>
@*
<h3 class="text-center font-weight-light my-5">Frequently Asked Questions</h3>
<div class="row">
<div class="col-md-6">
<h5 class="mb-2">Dapibus ac facilisis in?</h5>
<p class="ui-company-text text-muted mb-4">
Lorem ipsum dolor sit amet, ius virtute suscipit te. Ius prima euismod consequat eu.
</p>
<h5 class="mb-2">Cras justo odio?</h5>
<p class="ui-company-text text-muted mb-4">
Etiam vivendo eu sea, purto ponderum mediocritatem at pro.
</p>
<h5 class="mb-2">Porta ac consectetur ac?</h5>
<p class="ui-company-text text-muted mb-4">
Iuvaret deleniti vulputate nec ne, id vix lucilius legendos deseruisse.
</p>
<h5 class="mb-2">Ne ornatus albucius ius?</h5>
<p class="ui-company-text text-muted mb-4">
Lorem ipsum dolor sit amet, mea in pertinax hendrerit gloriatur.
</p>
</div>
<div class="col-md-6">
<h5 class="mb-2">Ne ornatus albucius ius?</h5>
<p class="ui-company-text text-muted mb-4">
Lorem ipsum dolor sit amet, mea in pertinax hendrerit gloriatur.
</p>
<h5 class="mb-2">Quo insolens intellegam dissentiet at?</h5>
<p class="ui-company-text text-muted mb-4">
Ex fugit legimus fuisset per. Ex quidam option diceret ius.
</p>
<h5 class="mb-2">Ad his assum delenit blandit?</h5>
<p class="ui-company-text text-muted mb-4">
Ne ornatus albucius ius, nostrum dignissim repudiandae an usu.
</p>
<h5 class="mb-2">Dapibus ac facilisis in?</h5>
<p class="ui-company-text text-muted mb-4">
Lorem ipsum dolor sit amet, ius virtute suscipit te. Ius prima euismod consequat eu.
</p>
</div>
</div>
*@
</div>
</div>