From b541593985190f04e37ef4e7c635f2b4794490ac Mon Sep 17 00:00:00 2001
From: Mladen Macanovic <mladen.macanovic@gmail.com>
Date: Sun, 1 Oct 2023 18:56:03 +0200
Subject: [PATCH] Add link to blocks and optimze pricing UI

---
 .../Components/Commercial/Faq.razor           |  19 ++-
 .../Components/Commercial/PlansComparer.razor | 116 +++++++-------
 .../Components/Commercial/Pricing.razor       | 142 +++++++++---------
 3 files changed, 150 insertions(+), 127 deletions(-)

diff --git a/Documentation/Blazorise.Docs/Components/Commercial/Faq.razor b/Documentation/Blazorise.Docs/Components/Commercial/Faq.razor
index 7d4ed0d71f..4c559591ed 100644
--- a/Documentation/Blazorise.Docs/Components/Commercial/Faq.razor
+++ b/Documentation/Blazorise.Docs/Components/Commercial/Faq.razor
@@ -1,7 +1,7 @@
 @if ( ShowHeader )
 {
-    <Paragraph TextSize="TextSize.Heading1" TextAlignment="TextAlignment.Center" Margin="Margin.Is4.FromBottom">
-        FAQ
+    <Paragraph TextSize="TextSize.Heading1" TextAlignment="TextAlignment.Center" Margin="Margin.Is5.FromTop.Is4.FromBottom">
+        Frequently asked questions
     </Paragraph>
 }
 
@@ -161,5 +161,20 @@
                 </Paragraph>
             }
         },
+
+        new FaqInfo {
+            Title = "What is the difference between Blazorise and Blazorise Blocks?",
+            Body = (__builder) => {
+                <Paragraph>
+                    Blazorise is a component library for Blazor that provides a range of UI components and utilities to help developers build web applications more easily.
+                </Paragraph>
+                <Paragraph>
+                     Blazorise Blocks are a set of predefined UI elements or modules built on top of the Blazorise library. These blocks simplify the web development process by offering ready-to-use sections (like checkout, stats, login forms, etc.) that developers can integrate into their projects without having to design or code them from scratch.
+                </Paragraph>
+                <Paragraph>
+                    In essence, while Blazorise provides the foundational components and tools, Blazorise Blocks offer higher-level, more specialized modules that are based on those foundational components for specific use cases.
+                </Paragraph>
+            }
+        },
     };
 }
\ No newline at end of file
diff --git a/Documentation/Blazorise.Docs/Components/Commercial/PlansComparer.razor b/Documentation/Blazorise.Docs/Components/Commercial/PlansComparer.razor
index 3e2a3e817d..4cffb57b7f 100644
--- a/Documentation/Blazorise.Docs/Components/Commercial/PlansComparer.razor
+++ b/Documentation/Blazorise.Docs/Components/Commercial/PlansComparer.razor
@@ -15,22 +15,22 @@
      <TableBody>
          <TableRow>
              <TableRowHeader TextAlignment="TextAlignment.Start">Public</TableRowHeader>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
          </TableRow>
          <TableRow>
              <TableRowHeader Flex="Flex.JustifyContent.Between">
                  Private
-                 <Tooltip Multiline Text="You get access to all Blazorise private repositories that can include source-code of themes, templates, support forum, and other projects.">
+                 <Tooltip Multiline Text="You get access to all Blazorise private repositories that can include source-code of themes, templates, blocks, support forum, and other projects.">
                      <Icon Name="IconName.InfoCircle" TextColor="TextColor.Muted" />
                  </Tooltip>
              </TableRowHeader>
-             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Light" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Light" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Danger" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Danger" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
          </TableRow>
      </TableBody>
 
@@ -39,19 +39,19 @@
              <TableRowHeader TextAlignment="TextAlignment.Start">
                  Commercial Use
              </TableRowHeader>
-             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Light" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Danger" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
          </TableRow>
          <TableRow>
              <TableRowHeader TextAlignment="TextAlignment.Start">
                  Regular updates
              </TableRowHeader>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
          </TableRow>
          <TableRow>
              <TableRowHeader Flex="Flex.JustifyContent.Between">
@@ -60,42 +60,42 @@
                      <Icon Name="IconName.InfoCircle" TextColor="TextColor.Muted" />
                  </Tooltip>
              </TableRowHeader>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
          </TableRow>
          <TableRow>
              <TableRowHeader Flex="Flex.JustifyContent.Between">
-                 <Blazorise.Link To="themes" TextColor="TextColor.Info">
-                     Themes
+                 <Blazorise.Link To="themes" TextColor="TextColor.Primary">
+                     Blazorise Themes
                  </Blazorise.Link>
                  <Tooltip Multiline Text="Access to source code of premium themes and code samples.">
                      <Icon Name="IconName.InfoCircle" TextColor="TextColor.Muted" />
                  </Tooltip>
              </TableRowHeader>
-             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Light" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Light" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Danger" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Danger" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
          </TableRow>
-         @* <TableRow>
+         <TableRow>
              <TableRowHeader Flex="Flex.JustifyContent.Between">
-                 <Blazorise.Link To="blocks" TextColor="TextColor.Info">
-                     Blocks
-                 </Blazorise.Link>
+                 <Anchor To="blocks" TextColor="TextColor.Primary">
+                     Blazorise Blocks
+                 </Anchor>
                  <Tooltip Multiline Text="Access to the source code of growing list of UI blocks that includes full code samples.">
                      <Icon Name="IconName.InfoCircle" TextColor="TextColor.Muted" />
                  </Tooltip>
              </TableRowHeader>
-             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Light" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Light" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
-         </TableRow> *@
+             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Danger" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Danger" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
+         </TableRow>
          <TableRow>
              <TableRowHeader Flex="Flex.JustifyContent.Between">
-                 <Anchor To="support" Target="Target.Blank" TextColor="TextColor.Primary">
+                 <Anchor To="support" TextColor="TextColor.Primary">
                      1 year premium forum support
                  </Anchor>
                  <Tooltip Multiline Text="You can get the premium support for one year (you can renew your licence to extend it).">
@@ -103,21 +103,21 @@
                  </Tooltip>
              </TableRowHeader>
              <TableRowCell>
-                 <Icon Name="IconName.Times" TextColor="TextColor.Light" />
+                 <Icon Name="IconName.Times" TextColor="TextColor.Danger" />
              </TableRowCell>
              <TableRowCell>
                  <Tooltip Text="With 24 hour response time">
-                     <Icon Name="IconName.Clock" TextColor="TextColor.Info" />
+                     <Icon Name="IconName.Clock" TextColor="TextColor.Success" />
                  </Tooltip>
              </TableRowCell>
              <TableRowCell>
                  <Tooltip Text="With 16 hour response time">
-                     <Icon Name="IconName.Clock" TextColor="TextColor.Info" />
+                     <Icon Name="IconName.Clock" TextColor="TextColor.Success" />
                  </Tooltip>
              </TableRowCell>
              <TableRowCell>
-                 <Tooltip Text="With 16 hour response time">
-                     <Icon Name="IconName.Clock" TextColor="TextColor.Info" />
+                 <Tooltip Text="With 16 hour response time, or a direct call to our developers.">
+                     <Icon Name="IconName.Headset" TextColor="TextColor.Success" />
                  </Tooltip>
              </TableRowCell>
          </TableRow>
@@ -128,7 +128,7 @@
                      <Icon Name="IconName.InfoCircle" TextColor="TextColor.Muted" />
                  </Tooltip>
              </TableRowHeader>
-             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Light" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Danger" /></TableRowCell>
              <TableRowCell>10</TableRowCell>
              <TableRowCell>25</TableRowCell>
              <TableRowCell><Strong TextColor="TextColor.Primary">Unlimited</Strong></TableRowCell>
@@ -140,7 +140,7 @@
                      <Icon Name="IconName.InfoCircle" TextColor="TextColor.Muted" />
                  </Tooltip>
              </TableRowHeader>
-             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Light" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Danger" /></TableRowCell>
              <TableRowCell>24 hours</TableRowCell>
              <TableRowCell>16 hours</TableRowCell>
              <TableRowCell><Strong TextColor="TextColor.Muted">Custom</Strong></TableRowCell>
@@ -152,10 +152,10 @@
                      <Icon Name="IconName.InfoCircle" TextColor="TextColor.Muted" />
                  </Tooltip>
              </TableRowHeader>
-             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Light" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Light" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Danger" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Danger" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
          </TableRow>
          <TableRow>
              <TableRowHeader Flex="Flex.JustifyContent.Between">
@@ -166,10 +166,10 @@
                      <Icon Name="IconName.InfoCircle" TextColor="TextColor.Muted" />
                  </Tooltip>
              </TableRowHeader>
-             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Light" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Light" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Light" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Danger" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Danger" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Danger" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
          </TableRow>
          <TableRow>
              <TableRowHeader Flex="Flex.JustifyContent.Between">
@@ -180,10 +180,10 @@
                      <Icon Name="IconName.InfoCircle" TextColor="TextColor.Muted" />
                  </Tooltip>
              </TableRowHeader>
-             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Light" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Light" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Light" /></TableRowCell>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Danger" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Danger" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Times" TextColor="TextColor.Danger" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
          </TableRow>
          <TableRow>
              <TableRowHeader Flex="Flex.JustifyContent.Between">
@@ -192,7 +192,7 @@
                      <Icon Name="IconName.InfoCircle" TextColor="TextColor.Muted" />
                  </Tooltip>
              </TableRowHeader>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
              <TableRowCell>1 year</TableRowCell>
              <TableRowCell>1 year</TableRowCell>
              <TableRowCell>1 year</TableRowCell>
@@ -201,7 +201,7 @@
              <TableRowHeader Flex="Flex.JustifyContent.Between">
                  Access to new releases
              </TableRowHeader>
-             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Info" /></TableRowCell>
+             <TableRowCell><Icon Name="IconName.Check" TextColor="TextColor.Success" /></TableRowCell>
              <TableRowCell>1 year</TableRowCell>
              <TableRowCell>1 year</TableRowCell>
              <TableRowCell>1 year</TableRowCell>
diff --git a/Documentation/Blazorise.Docs/Components/Commercial/Pricing.razor b/Documentation/Blazorise.Docs/Components/Commercial/Pricing.razor
index ca4fbdf604..d8151d456f 100644
--- a/Documentation/Blazorise.Docs/Components/Commercial/Pricing.razor
+++ b/Documentation/Blazorise.Docs/Components/Commercial/Pricing.razor
@@ -62,32 +62,32 @@
                         <CardBody>
                             <Div TextSize="TextSize.Heading1">
                                 <Span>@($"${( professionalPrices[plan].Price * quantity ).ToString( CultureInfo.InvariantCulture )}")</Span><Small TextColor="TextColor.Muted" TextWeight="TextWeight.Light">/@professionalPrices[plan].Unit</Small>
-                                </Div>
-                                <CardText TextColor="TextColor.Primary" Class="text-decoration-line-through" Display="@(plan == "annually" ? Display.Block : Display.None)">
-                                    <Span>@($"${( professionalPrices[plan].HigherPrice * quantity ).ToString( CultureInfo.InvariantCulture )}")</Span><Small TextColor="TextColor.Muted" TextWeight="TextWeight.Light">/@professionalPrices[plan].Unit</Small>
-                                </CardText>
-                                <CardText TextColor="TextColor.Muted" Margin="Margin.Is2.FromBottom">
-                                    + local tax (if applicable)
-                                </CardText>
-                                <CardText TextColor="TextColor.Muted" Margin="Margin.Is3.FromBottom">
-                                    (per developer, royalty-free subscription)
-                                </CardText>
-                                <Paragraph>
-                                    <UnorderedList Unstyled Class="pricing">
-                                     <UnorderedListItem>
-                                         <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
-                                         Everything from Blazorise Community
-                                     </UnorderedListItem>
-                                     <UnorderedListItem>
-                                         <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
-                                         Premium forum support
-                                     </UnorderedListItem>
-                                     <UnorderedListItem>
-                                         <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
-                                         Dedicated customer support with 24 hour response time
-                                     </UnorderedListItem>
-                                 </UnorderedList>
-                             </Paragraph>
+                            </Div>
+                            <CardText TextColor="TextColor.Primary" Class="text-decoration-line-through" Display="@(plan == "annually" ? Display.Block : Display.None)">
+                                <Span>@($"${( professionalPrices[plan].HigherPrice * quantity ).ToString( CultureInfo.InvariantCulture )}")</Span><Small TextColor="TextColor.Muted" TextWeight="TextWeight.Light">/@professionalPrices[plan].Unit</Small>
+                            </CardText>
+                            <CardText TextColor="TextColor.Muted" Margin="Margin.Is2.FromBottom">
+                                + local tax (if applicable)
+                            </CardText>
+                            <CardText TextColor="TextColor.Muted" Margin="Margin.Is3.FromBottom">
+                                (per developer, royalty-free subscription)
+                            </CardText>
+                            <Paragraph>
+                                <UnorderedList Unstyled Class="pricing">
+                                    <UnorderedListItem Padding="Padding.Is2.OnY">
+                                        <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
+                                        Everything from Blazorise Community
+                                    </UnorderedListItem>
+                                    <UnorderedListItem Padding="Padding.Is2.OnY">
+                                        <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
+                                        Premium forum support
+                                    </UnorderedListItem>
+                                    <UnorderedListItem Padding="Padding.Is2.OnY">
+                                        <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
+                                        Dedicated customer support with 24 hour response time
+                                    </UnorderedListItem>
+                                </UnorderedList>
+                            </Paragraph>
                              <PurchaseButton Color="Color.Secondary" ProductId="@professionalPrices[plan].ProductId" Quantity="@quantity" Upsell="@professionalPrices[plan].Upsell" ProductName="Blazorise Professional">
                                  Buy Now
                              </PurchaseButton>
@@ -104,41 +104,49 @@
                          <CardBody Background="Background.Light">
                              <Div TextSize="TextSize.Heading1">
                                  <Span>@($"${( enterprisePrices[plan].Price * quantity ).ToString( CultureInfo.InvariantCulture )}")</Span><Small TextColor="TextColor.Muted" TextWeight="TextWeight.Light">/@professionalPrices[plan].Unit</Small>
-                                </Div>
-                                <CardText TextColor="TextColor.Primary" Class="text-decoration-line-through" Display="@(plan == "annually" ? Display.Block : Display.None)">
-                                    <Span>@($"${( enterprisePrices[plan].HigherPrice * quantity ).ToString( CultureInfo.InvariantCulture )}")</Span><Small TextColor="TextColor.Muted" TextWeight="TextWeight.Light">/@professionalPrices[plan].Unit</Small>
-                                </CardText>
-                                <CardText TextColor="TextColor.Muted" Margin="Margin.Is2.FromBottom">
-                                    + local tax (if applicable)
-                                </CardText>
-                                <CardText TextColor="TextColor.Muted" Margin="Margin.Is3.FromBottom">
-                                    (per developer, royalty-free subscription)
-                                </CardText>
-                                <Paragraph>
-                                    <UnorderedList Unstyled Class="pricing">
-                                     <UnorderedListItem>
-                                         <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
-                                         Everything from Blazorise Professional
-                                     </UnorderedListItem>
-                                     <UnorderedListItem>
-                                         <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
-                                         <Anchor To="themes" Title="Link to themes page">
-                                             Premium themes
-                                         </Anchor>
-                                     </UnorderedListItem>
-                                     <UnorderedListItem>
-                                         <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
-                                         Priority customer support with 16 hour response time
-                                     </UnorderedListItem>
-                                     <UnorderedListItem>
-                                         <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
-                                         Priority fixes and feature requests
-                                     </UnorderedListItem>
-                                 </UnorderedList>
-                             </Paragraph>
-                             <PurchaseButton Color="Color.Primary" ProductId="@enterprisePrices[plan].ProductId" Quantity="@quantity" Upsell="@professionalPrices[plan].Upsell" ProductName="Blazorise Enterprise">
-                                 Buy Now
-                             </PurchaseButton>
+                            </Div>
+                            <CardText TextColor="TextColor.Primary" Class="text-decoration-line-through" Display="@(plan == "annually" ? Display.Block : Display.None)">
+                                <Span>@($"${( enterprisePrices[plan].HigherPrice * quantity ).ToString( CultureInfo.InvariantCulture )}")</Span><Small TextColor="TextColor.Muted" TextWeight="TextWeight.Light">/@professionalPrices[plan].Unit</Small>
+                            </CardText>
+                            <CardText TextColor="TextColor.Muted" Margin="Margin.Is2.FromBottom">
+                                + local tax (if applicable)
+                            </CardText>
+                            <CardText TextColor="TextColor.Muted" Margin="Margin.Is3.FromBottom">
+                                (per developer, royalty-free subscription)
+                            </CardText>
+                            <Paragraph>
+                                <UnorderedList Unstyled Class="pricing">
+                                    <UnorderedListItem Padding="Padding.Is2.OnY">
+                                        <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
+                                        Everything from Blazorise Professional
+                                    </UnorderedListItem>
+                                    <UnorderedListItem Padding="Padding.Is2.OnY">
+                                        <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
+                                        <Span>Access to</Span>
+                                        <Anchor To="themes" Title="Link to themes page">
+                                            premium themes
+                                        </Anchor>
+                                    </UnorderedListItem>
+                                    <UnorderedListItem Padding="Padding.Is2.OnY">
+                                        <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
+                                        <Span>Access to</Span>
+                                        <Anchor To="blocks" Title="Link to blocks page">
+                                            Blazorise blocks
+                                        </Anchor>
+                                    </UnorderedListItem>
+                                   <UnorderedListItem Padding="Padding.Is2.OnY">
+                                        <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
+                                        Priority customer support with 16 hour response time
+                                    </UnorderedListItem>
+                                    <UnorderedListItem Padding="Padding.Is2.OnY">
+                                        <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
+                                        Priority fixes and feature requests
+                                    </UnorderedListItem>
+                                </UnorderedList>
+                            </Paragraph>
+                            <PurchaseButton Color="Color.Primary" ProductId="@enterprisePrices[plan].ProductId" Quantity="@quantity" Upsell="@professionalPrices[plan].Upsell" ProductName="Blazorise Enterprise">
+                                Buy Now
+                            </PurchaseButton>
                          </CardBody>
                      </Card>
                  </Column>
@@ -158,27 +166,27 @@
                              </CardText>
                              <Paragraph>
                                  <UnorderedList Unstyled Class="pricing">
-                                     <UnorderedListItem>
+                                     <UnorderedListItem Padding="Padding.Is2.OnY">
                                          <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
                                          Everything from Blazorise Enterprise
                                      </UnorderedListItem>
-                                     <UnorderedListItem>
+                                     <UnorderedListItem Padding="Padding.Is2.OnY">
                                          <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
                                          Unlimited seats
                                      </UnorderedListItem>
-                                     <UnorderedListItem>
+                                     <UnorderedListItem Padding="Padding.Is2.OnY">
                                          <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
                                          <Anchor To="enterprise-plus" Title="Link to enterprise plus page">Blazorise Mentor</Anchor>
                                      </UnorderedListItem>
-                                     <UnorderedListItem>
+                                     <UnorderedListItem Padding="Padding.Is2.OnY">
                                          <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
                                          <Anchor To="enterprise-plus" Title="Link to enterprise plus page">Expert on Demand</Anchor>
                                      </UnorderedListItem>
-                                     <UnorderedListItem>
+                                     <UnorderedListItem Padding="Padding.Is2.OnY">
                                          <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
                                          Packaged services
                                      </UnorderedListItem>
-                                     <UnorderedListItem>
+                                     <UnorderedListItem Padding="Padding.Is2.OnY">
                                          <Icon TextColor="TextColor.Success" Padding="Padding.Is2.FromEnd" Name="IconName.Check" />
                                          Customized agreement
                                      </UnorderedListItem>