Resolved fernet issue.
This commit is contained in:
parent
56b9aaa021
commit
a0a52fcaa2
244
retoors/static/css/components/content_pages.css
Normal file
244
retoors/static/css/components/content_pages.css
Normal file
@ -0,0 +1,244 @@
|
||||
/* General styles for hero sections on content pages */
|
||||
.hero-intro {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
background-color: var(--card-background);
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px var(--shadow-color);
|
||||
}
|
||||
|
||||
.hero-headline {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.hero-subheadline {
|
||||
font-size: 1.2rem;
|
||||
color: var(--light-text-color);
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Pricing Plans Section */
|
||||
.pricing-plans {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.plan-card {
|
||||
background-color: var(--card-background);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px var(--shadow-color);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.plan-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px var(--shadow-color);
|
||||
}
|
||||
|
||||
.plan-card.featured {
|
||||
border: 2px solid var(--accent-color);
|
||||
box-shadow: 0 6px 15px rgba(0, 188, 212, 0.2);
|
||||
}
|
||||
|
||||
.plan-card h2 {
|
||||
font-size: 1.8rem;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.plan-card .price {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent-color);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.plan-card .price span {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--light-text-color);
|
||||
}
|
||||
|
||||
.plan-card ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-bottom: 2rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.plan-card ul li {
|
||||
margin-bottom: 0.8rem;
|
||||
color: var(--light-text-color);
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.plan-card ul li i {
|
||||
color: var(--accent-color);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.plan-card .btn-primary,
|
||||
.plan-card .btn-outline {
|
||||
width: 100%;
|
||||
padding: 0.8rem 1.5rem;
|
||||
font-size: 1.1rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Security Features Section */
|
||||
.security-features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background-color: var(--card-background);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px var(--shadow-color);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px var(--shadow-color);
|
||||
}
|
||||
|
||||
.feature-card i {
|
||||
font-size: 3rem; /* Placeholder for icon size */
|
||||
color: var(--accent-color);
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.feature-card h2 {
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: var(--light-text-color);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* FAQ Section */
|
||||
.faq-section {
|
||||
background-color: var(--card-background);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px var(--shadow-color);
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.faq-section h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.faq-item:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.faq-item h3 {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.faq-item p {
|
||||
color: var(--light-text-color);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* CTA Section */
|
||||
.cta-section {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
background-color: var(--card-background);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px var(--shadow-color);
|
||||
}
|
||||
|
||||
.cta-section h2 {
|
||||
font-size: 2rem;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cta-section p {
|
||||
font-size: 1.1rem;
|
||||
color: var(--light-text-color);
|
||||
max-width: 700px;
|
||||
margin: 0 auto 1.5rem auto;
|
||||
}
|
||||
|
||||
.cta-section .btn-primary {
|
||||
font-size: 1.2rem;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.hero-headline {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-subheadline {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.pricing-plans,
|
||||
.security-features {
|
||||
grid-template-columns: 1fr; /* Stack cards on smaller screens */
|
||||
}
|
||||
|
||||
.plan-card,
|
||||
.feature-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.plan-card h2,
|
||||
.feature-card h2 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.plan-card .price {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.cta-section h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.cta-section p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
14
retoors/static/css/components/footer.css
Normal file
14
retoors/static/css/components/footer.css
Normal file
@ -0,0 +1,14 @@
|
||||
footer {
|
||||
background-color: var(--card-background); /* Consistent with header */
|
||||
color: var(--light-text-color); /* Subtle text color */
|
||||
padding: 1.5rem 2rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--border-color); /* Separator from content */
|
||||
margin-top: auto; /* Push footer to the bottom */
|
||||
box-shadow: 0 -2px 4px var(--shadow-color); /* Subtle shadow upwards */
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 0; /* Remove default paragraph margin */
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
61
retoors/templates/pages/pricing.html
Normal file
61
retoors/templates/pages/pricing.html
Normal file
@ -0,0 +1,61 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block title %}Pricing - Retoor's Cloud Solutions{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main>
|
||||
<section class="hero-intro">
|
||||
<h1 class="hero-headline">Flexible Pricing for Every Need</h1>
|
||||
<p class="hero-subheadline">Find the perfect plan for your business, team, or individual use.</p>
|
||||
</section>
|
||||
|
||||
<section class="pricing-plans">
|
||||
<div class="plan-card">
|
||||
<h2>Basic Plan</h2>
|
||||
<p class="price">$9.99<span>/month</span></p>
|
||||
<ul>
|
||||
<li><i class="icon-check"></i> 100 GB Storage</li>
|
||||
<li><i class="icon-check"></i> Basic File Sharing</li>
|
||||
<li><i class="icon-check"></i> Email Support</li>
|
||||
</ul>
|
||||
<a href="/register" class="btn-primary">Get Started</a>
|
||||
</div>
|
||||
|
||||
<div class="plan-card featured">
|
||||
<h2>Pro Plan</h2>
|
||||
<p class="price">$19.99<span>/month</span></p>
|
||||
<ul>
|
||||
<li><i class="icon-check"></i> 1 TB Storage</li>
|
||||
<li><i class="icon-check"></i> Advanced File Sharing</li>
|
||||
<li><i class="icon-check"></i> Priority Email Support</li>
|
||||
<li><i class="icon-check"></i> Version History</li>
|
||||
</ul>
|
||||
<a href="/register" class="btn-primary">Choose Pro</a>
|
||||
</div>
|
||||
|
||||
<div class="plan-card">
|
||||
<h2>Enterprise Plan</h2>
|
||||
<p class="price">Custom</p>
|
||||
<ul>
|
||||
<li><i class="icon-check"></i> Unlimited Storage</li>
|
||||
<li><i class="icon-check"></i> Dedicated Support</li>
|
||||
<li><i class="icon-check"></i> Advanced Security Features</li>
|
||||
<li><i class="icon-check"></i> Custom Integrations</li>
|
||||
</ul>
|
||||
<a href="/support" class="btn-outline">Contact Sales</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="faq-section">
|
||||
<h2>Frequently Asked Questions</h2>
|
||||
<div class="faq-item">
|
||||
<h3>What payment methods do you accept?</h3>
|
||||
<p>We accept all major credit cards, PayPal, and bank transfers for annual plans.</p>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<h3>Can I change my plan later?</h3>
|
||||
<p>Yes, you can upgrade or downgrade your plan at any time from your dashboard.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{% endblock %}
|
||||
56
retoors/templates/pages/security.html
Normal file
56
retoors/templates/pages/security.html
Normal file
@ -0,0 +1,56 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block title %}Security - Retoor's Cloud Solutions{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<main>
|
||||
<section class="hero-intro">
|
||||
<h1 class="hero-headline">Bank-Grade Security for Your Data</h1>
|
||||
<p class="hero-subheadline">Protecting your valuable information with advanced measures and unwavering commitment.</p>
|
||||
</section>
|
||||
|
||||
<section class="security-features">
|
||||
<div class="feature-card">
|
||||
<i class="icon-encryption"></i> {# Placeholder for an encryption icon #}
|
||||
<h2>End-to-End Encryption</h2>
|
||||
<p>Your data is encrypted at rest and in transit using industry-leading AES-256 encryption protocols.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<i class="icon-access-control"></i> {# Placeholder for an access control icon #}
|
||||
<h2>Granular Access Controls</h2>
|
||||
<p>Manage who has access to what with detailed permissions and user roles, ensuring data privacy.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<i class="icon-compliance"></i> {# Placeholder for a compliance icon #}
|
||||
<h2>Regulatory Compliance</h2>
|
||||
<p>We adhere to global compliance standards like GDPR, HIPAA, and ISO 27001 to meet your industry needs.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<i class="icon-backup"></i> {# Placeholder for a backup icon #}
|
||||
<h2>Automated Backups & Recovery</h2>
|
||||
<p>Your data is continuously backed up and easily recoverable, protecting against data loss.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<i class="icon-monitoring"></i> {# Placeholder for an monitoring icon #}
|
||||
<h2>24/7 Threat Monitoring</h2>
|
||||
<p>Our systems are constantly monitored for suspicious activity, ensuring rapid response to threats.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<i class="icon-audits"></i> {# Placeholder for an audit icon #}
|
||||
<h2>Regular Security Audits</h2>
|
||||
<p>Independent third-party audits regularly verify the effectiveness of our security measures.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<h2>Have More Security Questions?</h2>
|
||||
<p>Our team is ready to provide detailed answers and discuss your specific security requirements.</p>
|
||||
<a href="/support" class="btn-primary">Contact Support</a>
|
||||
</section>
|
||||
</main>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue
Block a user