File: //usr/local/CyberCP/websiteFunctions/templates/websiteFunctions/CyberpanelPricing.html
{% extends "baseTemplate/index.html" %}
{% load i18n %}
{% block title %}{% trans "Pricing - CyberPanel" %}{% endblock %}
{% block header_scripts %}
<style>
/* Page Specific Styles */
.pricing-wrapper {
background: transparent;
padding: 20px;
}
.pricing-container {
max-width: 1400px;
margin: 0 auto;
}
/* Page Header */
.page-header {
background: white;
border-radius: 12px;
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
text-align: center;
}
.page-header h1 {
font-size: 32px;
font-weight: 700;
color: #2f3640;
margin: 0 0 20px 0;
line-height: 1.3;
}
.page-header .subtitle {
font-size: 18px;
color: #64748b;
line-height: 1.6;
margin: 0 auto;
max-width: 800px;
}
/* Video Section */
.video-section {
background: white;
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 800px;
margin: 0 auto;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Pricing Content */
.pricing-content {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
}
/* Features Section */
.features-section {
background: white;
border-radius: 12px;
padding: 40px;
margin-top: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e8e9ff;
}
.features-title {
font-size: 28px;
font-weight: 700;
color: #2f3640;
text-align: center;
margin-bottom: 40px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 25px;
}
.feature-card {
background: #f8f9ff;
border: 1px solid #e8e9ff;
border-radius: 12px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
border-color: #5b5fcf;
background: white;
}
.feature-icon {
width: 60px;
height: 60px;
background: #5b5fcf;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: white;
font-size: 28px;
}
.feature-title {
font-size: 18px;
font-weight: 700;
color: #2f3640;
margin-bottom: 15px;
}
.feature-desc {
font-size: 14px;
color: #64748b;
line-height: 1.6;
}
/* Loading States */
[ng-cloak] {
display: none !important;
}
/* Responsive */
@media (max-width: 768px) {
.page-header {
padding: 25px;
}
.page-header h1 {
font-size: 24px;
}
.page-header .subtitle {
font-size: 16px;
}
.features-grid {
grid-template-columns: 1fr;
}
}
</style>
{% endblock %}
{% block content %}
{% load static %}
{% get_current_language as LANGUAGE_CODE %}
<div class="pricing-wrapper" ng-controller="BuyAddons" ng-cloak>
<div class="pricing-container">
<!-- Page Header -->
<div class="page-header">
<h1>{% trans "Managing Your WordPress sites was never so easy!" %}</h1>
<p class="subtitle">
{% trans "43% of all Websites on the Internet are built with WordPress, so it deserves some love! With CyberPanel WordPress Manager, you can easily Monitor, Analyze, Optimize and keep your website in Top-Notch performance, all the time." %}
</p>
</div>
<!-- Video Section -->
<div class="video-section">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/c-ffIKgjrBU"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</div>
<!-- Pricing Content -->
<div class="pricing-content">
<stripe-pricing-table
pricing-table-id="prctbl_1PhTRPRs6rG0dTDlJZMzTw0k"
publishable-key="pk_live_51PgodkRs6rG0dTDl3jCUgxjyjI983GmCdHjzuLfZIsssmDLgKgnXnwQghVCctKMNFIC5K4oMcviTFrHf1ytsYZGa00AGySiWlF">
</stripe-pricing-table>
</div>
<!-- Features Section -->
<div class="features-section">
<h2 class="features-title">{% trans "Features You'll Love" %}</h2>
<div class="features-grid">
<!-- Backups -->
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-download"></i>
</div>
<h3 class="feature-title">{% trans "Backups" %}</h3>
<p class="feature-desc">
{% trans "Worried about your site backups? WordPress Manager allows you to take data or database level backups." %}
</p>
</div>
<!-- Staging Sites -->
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-copy"></i>
</div>
<h3 class="feature-title">{% trans "Staging Sites" %}</h3>
<p class="feature-desc">
{% trans "Not ready to go live yet? You can create staging sites and easily deploy them to production with one-click using WordPress Manager" %}
</p>
</div>
<!-- One Click SSL -->
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-lock"></i>
</div>
<h3 class="feature-title">{% trans "One Click SSL" %}</h3>
<p class="feature-desc">
{% trans "Free One Click SSL Certificates by Let's Encrypt. With Auto-renewal enabled by default, CyberPanel will automagically renew your Certificates before they expire!" %}
</p>
</div>
<!-- One Click Install -->
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-rocket"></i>
</div>
<h3 class="feature-title">{% trans "One Click Install" %}</h3>
<p class="feature-desc">
{% trans "Deploy WordPress sites within 1 minute using our brand new WordPress Manager. We will take care of Speed, Security and maintenance of your WordPress site." %}
</p>
</div>
<!-- Auto Login -->
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-sign-in-alt"></i>
</div>
<h3 class="feature-title">{% trans "Auto Login" %}</h3>
<p class="feature-desc">
{% trans "Have you forgotten your WordPress dashboard login information? To access your WordPress admin account, simply use the CyberPanel WordPress manager Auto Login feature." %}
</p>
</div>
<!-- LiteSpeed Cache -->
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-tachometer-alt"></i>
</div>
<h3 class="feature-title">{% trans "LiteSpeed Cache" %}</h3>
<p class="feature-desc">
{% trans "Nothing beats LSCache plugin on LiteSpeed server. Every WordPress site deployed via WordPress manager gets LSCache plugin installed and configured." %}
</p>
</div>
</div>
</div>
</div>
</div>
<script async src="https://js.stripe.com/v3/pricing-table.js"></script>
{% endblock %}