mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2026-02-17 20:16:48 +01:00
288 lines
8.9 KiB
HTML
288 lines
8.9 KiB
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 %} |