Page updates.

Browse Source
This commit is contained in:
retoor 2025-11-08 20:16:19 +01:00
parent fc6a555a33
commit a1b20e2fc2
9 changed files with 559 additions and 423 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
retoors/static/css/components/solutions.css
View File

@ -1,17 +1,13 @@
/* Styles for the Solutions Page */ /* Styles for the Solutions Page (solutions.html) */
.solutions-hero { .solutions-hero {
text-align: center; text-align: center;
padding: 60px 20px; padding: 40px 20px;
background-color: var(--card-background); margin-bottom: 60px;
margin-bottom: 40px;
border-radius: 8px;
box-shadow: 0 6px 20px var(--shadow-color);
} }
.solutions-hero h1 { .solutions-hero h1 {
font-size: 3.2rem; font-size: 3rem;
font-weight: 700;
color: var(--text-color); color: var(--text-color);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -23,25 +19,23 @@
margin: 0 auto; margin: 0 auto;
} }
.solutions-grid-section { .solution-sections {
padding: 40px 20px;
background-color: var(--background-color);
}
.solutions-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px; gap: 30px;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto 60px auto;
padding: 0 20px;
} }
.solution-card { .solution-card {
background-color: var(--card-background); background-color: var(--card-background);
padding: 30px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 15px var(--shadow-color); box-shadow: 0 4px 15px var(--shadow-color);
text-align: center; padding: 30px;
text-align: left;
display: flex;
flex-direction: column;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} }
@ -54,60 +48,88 @@
width: 60px; width: 60px;
height: 60px; height: 60px;
margin-bottom: 20px; margin-bottom: 20px;
color: var(--accent-color); /* Assuming SVG icons can inherit color */ align-self: center; /* Center the icon */
} }
.solution-card h3 { .solution-card h2 {
font-size: 1.5rem; font-size: 1.8rem;
color: var(--text-color); color: var(--text-color);
margin-bottom: 15px; margin-bottom: 15px;
text-align: center;
} }
.solution-card p { .solution-card p {
font-size: 1rem; font-size: 1rem;
color: var(--light-text-color); color: var(--light-text-color);
line-height: 1.6; line-height: 1.6;
margin-bottom: 20px;
} }
.cta-bottom { .solution-card ul {
list-style: none;
padding: 0;
margin-bottom: 20px;
}
.solution-card ul li {
margin-bottom: 8px;
color: var(--text-color);
font-size: 0.95rem;
display: flex;
align-items: flex-start;
}
.solution-card ul li::before {
content: '•'; /* Bullet point */
color: var(--accent-color);
margin-right: 10px;
font-weight: bold;
font-size: 1.2em;
line-height: 1;
}
.solution-card .btn-primary {
margin-top: auto; /* Push button to the bottom */
align-self: center; /* Center the button */
padding: 10px 20px;
font-size: 1rem;
}
.solutions-cta {
text-align: center; text-align: center;
padding: 40px 20px; padding: 40px 20px;
background-color: var(--background-color); background-color: var(--background-color);
border-radius: 8px;
margin-bottom: 40px;
}
.solutions-cta h2 {
font-size: 2rem;
color: var(--text-color);
margin-bottom: 30px;
} }
/* Responsive adjustments */ /* Responsive adjustments */
@media (max-width: 992px) {
.solutions-hero h1 {
font-size: 2.8rem;
}
.solutions-hero p {
font-size: 1.1rem;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.solutions-hero {
padding: 40px 15px;
}
.solutions-hero h1 { .solutions-hero h1 {
font-size: 2.2rem; font-size: 2.5rem;
} }
.solutions-hero p { .solutions-hero p {
font-size: 1rem; font-size: 1rem;
} }
.solutions-grid { .solution-sections {
grid-template-columns: 1fr; /* Stack cards on small screens */ grid-template-columns: 1fr;
} }
.solution-card { .solutions-cta h2 {
padding: 25px; font-size: 1.8rem;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.solutions-hero h1 { .solutions-hero h1 {
font-size: 1.8rem; font-size: 2rem;
} }
.solutions-hero p { .solution-card {
font-size: 0.9rem; padding: 20px;
} }
} }

275
retoors/static/css/components/support.css
View File

@ -1,17 +1,13 @@
/* Styles for the Support Page */ /* Styles for the Support Page (support.html) */
.support-hero { .support-hero {
text-align: center; text-align: center;
padding: 60px 20px; padding: 40px 20px;
background-color: var(--card-background); margin-bottom: 60px;
margin-bottom: 40px;
border-radius: 8px;
box-shadow: 0 6px 20px var(--shadow-color);
} }
.support-hero h1 { .support-hero h1 {
font-size: 3.2rem; font-size: 3rem;
font-weight: 700;
color: var(--text-color); color: var(--text-color);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -20,168 +16,181 @@
font-size: 1.2rem; font-size: 1.2rem;
color: var(--light-text-color); color: var(--light-text-color);
max-width: 800px; max-width: 800px;
margin: 0 auto 30px auto;
}
.search-support {
display: flex;
justify-content: center;
gap: 10px;
max-width: 600px;
margin: 0 auto; margin: 0 auto;
} }
.support-content-grid { .search-support .search-input {
flex-grow: 1;
padding: 12px 20px;
border: 1px solid var(--border-color);
border-radius: 5px;
font-size: 1rem;
}
.search-support .btn-primary {
padding: 12px 25px;
font-size: 1rem;
}
.support-categories {
text-align: center;
margin-bottom: 60px;
}
.support-categories h2 {
font-size: 2.5rem;
color: var(--text-color);
margin-bottom: 40px;
}
.category-grid {
display: grid; display: grid;
grid-template-columns: 2fr 1fr; /* Knowledge Base wider than Contact Support */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px; gap: 30px;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 20px; padding: 0 20px;
} }
.knowledge-base-section { .category-card {
padding: 30px; background-color: var(--card-background);
}
.knowledge-base-section h2 {
font-size: 2rem;
color: var(--text-color);
margin-bottom: 25px;
}
.knowledge-base-section .search-input {
width: 100%;
max-width: none; /* Override base.css max-width */
margin-bottom: 30px;
}
.featured-articles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.article-category {
background-color: var(--background-color);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05); box-shadow: 0 4px 15px var(--shadow-color);
padding: 20px;
text-align: left;
}
.article-category img.icon {
width: 40px;
height: 40px;
margin-bottom: 15px;
color: var(--accent-color);
}
.article-category h3 {
font-size: 1.3rem;
color: var(--text-color);
margin-bottom: 15px;
}
.article-category ul {
list-style: none;
padding: 0;
margin: 0;
}
.article-category ul li {
margin-bottom: 8px;
}
.article-category ul li a {
color: var(--primary-color);
text-decoration: none;
font-size: 0.95rem;
}
.article-category ul li a:hover {
text-decoration: underline;
color: var(--accent-color);
}
.contact-support-section {
padding: 30px; padding: 30px;
}
.contact-support-section h2 {
font-size: 2rem;
color: var(--text-color);
margin-bottom: 25px;
}
.contact-option {
background-color: var(--background-color);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
padding: 20px;
margin-bottom: 20px;
text-align: center; text-align: center;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} }
.contact-option img.icon { .category-card:hover {
width: 50px; transform: translateY(-5px);
height: 50px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
margin-bottom: 15px;
color: var(--accent-color);
} }
.contact-option h3 { .category-card img.icon {
font-size: 1.4rem; width: 70px;
height: 70px;
margin-bottom: 20px;
}
.category-card h3 {
font-size: 1.5rem;
color: var(--text-color); color: var(--text-color);
margin-bottom: 10px; margin-bottom: 10px;
} }
.contact-option p { .category-card p {
font-size: 0.95rem; font-size: 0.95rem;
color: var(--light-text-color); color: var(--light-text-color);
margin-bottom: 15px; line-height: 1.5;
margin-bottom: 20px;
} }
.contact-option .btn-primary { .category-card .btn-link {
width: 100%; color: var(--primary-color);
padding: 0.8rem 1.5rem; text-decoration: none;
font-weight: 500;
}
.category-card .btn-link:hover {
text-decoration: underline;
}
.contact-options {
text-align: center;
margin-bottom: 60px;
}
.contact-options h2 {
font-size: 2.5rem;
color: var(--text-color);
margin-bottom: 40px;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.contact-card {
background-color: var(--card-background);
border-radius: 8px;
box-shadow: 0 4px 15px var(--shadow-color);
padding: 30px;
text-align: center;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.contact-card img.icon {
width: 70px;
height: 70px;
margin-bottom: 20px;
}
.contact-card h3 {
font-size: 1.5rem;
color: var(--text-color);
margin-bottom: 10px;
}
.contact-card p {
font-size: 0.95rem;
color: var(--light-text-color);
line-height: 1.5;
margin-bottom: 20px;
}
.contact-card .btn-primary {
padding: 10px 20px;
font-size: 1rem; font-size: 1rem;
} }
.contact-option .phone-number { .contact-card .phone-hours {
font-size: 1.2rem; font-size: 0.85rem;
font-weight: 700; color: var(--light-text-color);
color: var(--accent-color); margin-top: -10px;
} }
/* Responsive adjustments */ /* Responsive adjustments */
@media (max-width: 992px) {
.support-content-grid {
grid-template-columns: 1fr; /* Stack columns on smaller screens */
}
.knowledge-base-section, .contact-support-section {
padding: 20px;
}
.featured-articles {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.support-hero h1 { .support-hero h1, .support-categories h2, .contact-options h2 {
font-size: 2.5rem; font-size: 2.5rem;
} }
.support-hero p {
font-size: 1.1rem;
}
.knowledge-base-section h2, .contact-support-section h2 {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
.support-hero h1 {
font-size: 2rem;
}
.support-hero p { .support-hero p {
font-size: 1rem; font-size: 1rem;
} }
.article-category h3 { .search-support {
font-size: 1.2rem; flex-direction: column;
} }
.contact-option h3 { .search-support .btn-primary {
font-size: 1.3rem; width: 100%;
}
.category-grid, .contact-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.support-hero h1, .support-categories h2, .contact-options h2 {
font-size: 2rem;
}
.category-card, .contact-card {
padding: 20px;
} }
} }

118
retoors/static/css/components/use_cases.css
View File

@ -1,17 +1,13 @@
/* Styles for the Use Cases Page */ /* Styles for the Use Cases Page (use_cases.html) */
.use-cases-hero { .use-cases-hero {
text-align: center; text-align: center;
padding: 60px 20px; padding: 40px 20px;
background-color: var(--card-background); margin-bottom: 60px;
margin-bottom: 40px;
border-radius: 8px;
box-shadow: 0 6px 20px var(--shadow-color);
} }
.use-cases-hero h1 { .use-cases-hero h1 {
font-size: 3.2rem; font-size: 3rem;
font-weight: 700;
color: var(--text-color); color: var(--text-color);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -23,91 +19,117 @@
margin: 0 auto; margin: 0 auto;
} }
.use-cases-grid-section { .use-case-scenarios {
padding: 40px 20px;
background-color: var(--background-color);
}
.use-cases-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px; gap: 30px;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto 60px auto;
padding: 0 20px;
} }
.use-case-card { .scenario-card {
background-color: var(--card-background); background-color: var(--card-background);
padding: 30px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 15px var(--shadow-color); box-shadow: 0 4px 15px var(--shadow-color);
text-align: center; padding: 30px;
text-align: left;
display: flex;
flex-direction: column;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} }
.use-case-card:hover { .scenario-card:hover {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
} }
.use-case-card img.icon { .scenario-card img.icon {
width: 60px; width: 70px;
height: 60px; height: 70px;
margin-bottom: 20px; margin-bottom: 20px;
color: var(--accent-color); /* Assuming SVG icons can inherit color */ align-self: center; /* Center the icon */
} }
.use-case-card h3 { .scenario-card h2 {
font-size: 1.5rem; font-size: 1.8rem;
color: var(--text-color); color: var(--text-color);
margin-bottom: 15px; margin-bottom: 15px;
text-align: center;
} }
.use-case-card p { .scenario-card p {
font-size: 1rem; font-size: 1rem;
color: var(--light-text-color); color: var(--light-text-color);
line-height: 1.6; line-height: 1.6;
margin-bottom: 15px;
} }
.cta-bottom { .scenario-card ul {
list-style: none;
padding: 0;
margin-bottom: 20px;
}
.scenario-card ul li {
margin-bottom: 8px;
color: var(--text-color);
font-size: 0.95rem;
display: flex;
align-items: flex-start;
}
.scenario-card ul li::before {
content: '•'; /* Bullet point */
color: var(--accent-color);
margin-right: 10px;
font-weight: bold;
font-size: 1.2em;
line-height: 1;
}
.scenario-card .btn-primary {
margin-top: auto; /* Push button to the bottom */
align-self: center; /* Center the button */
padding: 10px 20px;
font-size: 1rem;
}
.use-cases-cta {
text-align: center; text-align: center;
padding: 40px 20px; padding: 40px 20px;
background-color: var(--background-color); background-color: var(--background-color);
border-radius: 8px;
margin-bottom: 40px;
}
.use-cases-cta h2 {
font-size: 2rem;
color: var(--text-color);
margin-bottom: 30px;
} }
/* Responsive adjustments */ /* Responsive adjustments */
@media (max-width: 992px) {
.use-cases-hero h1 {
font-size: 2.8rem;
}
.use-cases-hero p {
font-size: 1.1rem;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.use-cases-hero {
padding: 40px 15px;
}
.use-cases-hero h1 { .use-cases-hero h1 {
font-size: 2.2rem; font-size: 2.5rem;
} }
.use-cases-hero p { .use-cases-hero p {
font-size: 1rem; font-size: 1rem;
} }
.use-cases-grid { .use-case-scenarios {
grid-template-columns: 1fr; /* Stack cards on small screens */ grid-template-columns: 1fr;
} }
.use-case-card { .use-cases-cta h2 {
padding: 25px; font-size: 1.8rem;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.use-cases-hero h1 { .use-cases-hero h1 {
font-size: 1.8rem; font-size: 2rem;
} }
.use-cases-hero p { .scenario-card {
font-size: 0.9rem; padding: 20px;
} }
} }

82
retoors/templates/pages/pricing.html
View File

@ -2,60 +2,80 @@
{% block title %}Pricing - Retoor's Cloud Solutions{% endblock %} {% block title %}Pricing - Retoor's Cloud Solutions{% endblock %}
{% block head %}
<link rel="stylesheet" href="/static/css/components/pricing.css">
{% endblock %}
{% block content %} {% block content %}
<main> <main>
<section class="hero-intro"> <section class="pricing-hero">
<h1 class="hero-headline">Flexible Pricing for Every Need</h1> <h1>Simple, Transparent Pricing</h1>
<p class="hero-subheadline">Find the perfect plan for your business, team, or individual use.</p> <p>Find the perfect plan for your needs.</p>
<div class="pricing-toggle">
<button class="btn-toggle active" data-period="monthly">Monthly</button>
<button class="btn-toggle" data-period="annually">Annually</button>
</div>
</section> </section>
<section class="pricing-plans"> <section class="pricing-tiers">
<div class="plan-card"> <div class="pricing-card">
<h2>Basic Plan</h2> <h3>Free</h3>
<p class="price">$9.99<span>/month</span></p> <p class="price">$0<span>/month</span></p>
<ul> <ul>
<li><i class="icon-check"></i> 100 GB Storage</li> <li>1 GB Storage</li>
<li><i class="icon-check"></i> Basic File Sharing</li> <li>Basic Sync & Share</li>
<li><i class="icon-check"></i> Email Support</li> <li>Standard Support</li>
</ul> </ul>
<a href="/register" class="btn-primary">Get Started</a> <a href="/register" class="btn-primary">Get Started</a>
</div> </div>
<div class="plan-card featured"> <div class="pricing-card featured">
<h2>Pro Plan</h2> <h3>Personal</h3>
<p class="price">$19.99<span>/month</span></p> <p class="price">$9<span>/month</span></p>
<ul> <ul>
<li><i class="icon-check"></i> 1 TB Storage</li> <li>100 GB Storage</li>
<li><i class="icon-check"></i> Advanced File Sharing</li> <li>Advanced Sync & Share</li>
<li><i class="icon-check"></i> Priority Email Support</li> <li>Priority Support</li>
<li><i class="icon-check"></i> Version History</li> <li>Version History</li>
</ul> </ul>
<a href="/register" class="btn-primary">Choose Pro</a> <a href="/register" class="btn-primary">Sign Up Now</a>
</div> </div>
<div class="plan-card"> <div class="pricing-card">
<h2>Enterprise Plan</h2> <h3>Professional</h3>
<p class="price">Custom</p> <p class="price">$29<span>/month</span></p>
<ul> <ul>
<li><i class="icon-check"></i> Unlimited Storage</li> <li>1 TB Storage</li>
<li><i class="icon-check"></i> Dedicated Support</li> <li>Team Collaboration</li>
<li><i class="icon-check"></i> Advanced Security Features</li> <li>24/7 Premium Support</li>
<li><i class="icon-check"></i> Custom Integrations</li> <li>Advanced Security</li>
</ul> </ul>
<a href="/support" class="btn-outline">Contact Sales</a> <a href="/register" class="btn-primary">Sign Up Now</a>
</div>
<div class="pricing-card">
<h3>Business</h3>
<p class="price">$99<span>/month</span></p>
<ul>
<li>Unlimited Storage</li>
<li>Custom Solutions</li>
<li>Dedicated Account Manager</li>
<li>Advanced Analytics</li>
</ul>
<a href="/register" class="btn-primary">Contact Sales</a>
</div> </div>
</section> </section>
<section class="faq-section"> <section class="pricing-faq">
<h2>Frequently Asked Questions</h2> <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"> <div class="faq-item">
<h3>Can I change my plan later?</h3> <h3>Can I change my plan later?</h3>
<p>Yes, you can upgrade or downgrade your plan at any time from your dashboard.</p> <p>Yes, you can upgrade or downgrade your plan at any time from your dashboard.</p>
</div> </div>
<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>
</section> </section>
</main> </main>
{% endblock %} {% endblock %}

82
retoors/templates/pages/security.html
View File

@ -2,54 +2,60 @@
{% block title %}Security - Retoor's Cloud Solutions{% endblock %} {% block title %}Security - Retoor's Cloud Solutions{% endblock %}
{% block head %}
<link rel="stylesheet" href="/static/css/components/security.css">
{% endblock %}
{% block content %} {% block content %}
<main> <main>
<section class="hero-intro"> <section class="security-hero">
<h1 class="hero-headline">Bank-Grade Security for Your Data</h1> <h1>Your Data, Our Priority. Uncompromising Security.</h1>
<p class="hero-subheadline">Protecting your valuable information with advanced measures and unwavering commitment.</p> <p>At Retoor's Cloud Solutions, we understand the critical importance of data security and privacy. We employ industry-leading measures to ensure your information is always protected.</p>
</section> </section>
<section class="security-features"> <section class="security-pillars">
<div class="feature-card"> <div class="pillar-card">
<i class="icon-encryption"></i> {# Placeholder for an encryption icon #} <img src="/static/images/icon-professionals.svg" alt="Encryption Icon" class="icon">
<h2>End-to-End Encryption</h2> <h3>Robust Encryption</h3>
<p>Your data is encrypted at rest and in transit using industry-leading AES-256 encryption protocols.</p> <p>All your data is encrypted both in transit (TLS 1.2+) and at rest (AES-256), ensuring maximum confidentiality and integrity.</p>
</div> </div>
<div class="pillar-card">
<div class="feature-card"> <img src="/static/images/icon-professionals.svg" alt="Access Control Icon" class="icon">
<i class="icon-access-control"></i> {# Placeholder for an access control icon #} <h3>Advanced Access Control</h3>
<h2>Granular Access Controls</h2> <p>Implement granular permissions, multi-factor authentication (MFA), and strict access policies to keep your data safe from unauthorized access.</p>
<p>Manage who has access to what with detailed permissions and user roles, ensuring data privacy.</p>
</div> </div>
<div class="pillar-card">
<div class="feature-card"> <img src="/static/images/icon-families.svg" alt="Privacy Icon" class="icon">
<i class="icon-compliance"></i> {# Placeholder for a compliance icon #} <h3>Unwavering Privacy</h3>
<h2>Regulatory Compliance</h2> <p>We are committed to your privacy. Our policies are transparent, and we comply with global data protection regulations like GDPR and CCPA.</p>
<p>We adhere to global compliance standards like GDPR, HIPAA, and ISO 27001 to meet your industry needs.</p>
</div> </div>
<div class="pillar-card">
<div class="feature-card"> <img src="/static/images/icon-professionals.svg" alt="Infrastructure Icon" class="icon">
<i class="icon-backup"></i> {# Placeholder for a backup icon #} <h3>Secure Infrastructure</h3>
<h2>Automated Backups & Recovery</h2> <p>Our data centers are physically secured, and our network is protected by advanced firewalls and intrusion detection systems, regularly audited for vulnerabilities.</p>
<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> </div>
</section> </section>
<section class="cta-section"> <section class="security-certifications">
<h2>Have More Security Questions?</h2> <h2>Trust & Compliance</h2>
<p>Our team is ready to provide detailed answers and discuss your specific security requirements.</p> <div class="cert-grid">
<div class="cert-item">
<img src="/static/images/icon-professionals.svg" alt="ISO 27001 Certified" class="cert-logo">
<p>ISO 27001 Certified</p>
</div>
<div class="cert-item">
<img src="/static/images/icon-professionals.svg" alt="SOC 2 Compliant" class="cert-logo">
<p>SOC 2 Compliant</p>
</div>
<div class="cert-item">
<img src="/static/images/icon-families.svg" alt="GDPR Compliant" class="cert-logo">
<p>GDPR Compliant</p>
</div>
</div>
</section>
<section class="security-cta">
<h2>Have More Questions About Security?</h2>
<a href="/support" class="btn-primary">Contact Support</a> <a href="/support" class="btn-primary">Contact Support</a>
</section> </section>
</main> </main>

92
retoors/templates/pages/solutions.html
View File

@ -9,47 +9,67 @@
{% block content %} {% block content %}
<main> <main>
<section class="solutions-hero"> <section class="solutions-hero">
<h1>Tailored for Every Business Need</h1> <h1>Powerful Cloud Solutions for Modern Needs</h1>
<p>Flexible cloud solutions for teams of all sizes.</p> <p>Discover how Retoor's Cloud Solutions can empower your family, business, or academic pursuits with secure, accessible, and collaborative tools.</p>
</section> </section>
<section class="solutions-grid-section"> <section class="solution-sections">
<div class="solutions-grid"> <div class="solution-card">
<div class="solution-card"> <img src="/static/images/icon-families.svg" alt="Family Storage Icon" class="icon">
<img src="/static/images/icon-families.svg" alt="Secure File Sharing Icon" class="icon"> {# Placeholder icon #} <h2>Secure Family Storage</h2>
<h3>Secure File Sharing</h3> <p>Keep your family's precious memories safe and accessible. Securely store photos, videos, and important documents, and easily share them with loved ones.</p>
<p>Collaborate on documents and large files with colleagues and clients securely.</p> <ul>
</div> <li>Private photo and video galleries</li>
<div class="solution-card"> <li>Shared family albums</li>
<img src="/static/images/icon-professionals.svg" alt="Automated Backup Icon" class="icon"> {# Placeholder icon #} <li>Secure document vault for wills, deeds, etc.</li>
<h3>Automated Backup & Recovery</h3> <li>Easy sharing with granular permissions</li>
<p>Protect critical business data with automated, daily easy-click recovery.</p> </ul>
</div> <a href="/pricing" class="btn-primary">See Family Plans</a>
<div class="solution-card"> </div>
<img src="/static/images/icon-students.svg" alt="Team Collaboration Icon" class="icon"> {# Placeholder icon #}
<h3>Team Collaboration Spaces</h3> <div class="solution-card">
<p>Organize important work documents, collaborate with teams, and access files from anywhere.</p> <img src="/static/images/icon-professionals.svg" alt="Business Collaboration Icon" class="icon">
</div> <h2>Business Collaboration & Productivity</h2>
<div class="solution-card"> <p>Boost your team's efficiency with seamless collaboration tools. Share files, co-edit documents, and manage projects from anywhere, securely.</p>
<img src="/static/images/icon-families.svg" alt="Enterprise Security Icon" class="icon"> {# Placeholder icon #} <ul>
<h3>Enterprise-Grade Security</h3> <li>Real-time document co-editing</li>
<p>Benefit from advanced encryption and robust access controls.</p> <li>Secure file sharing with external partners</li>
</div> <li>Version control and recovery</li>
<div class="solution-card"> <li>Team workspaces and project folders</li>
<img src="/static/images/icon-professionals.svg" alt="Compliance Certifications Icon" class="icon"> {# Placeholder icon #} </ul>
<h3>Compliance Certifications</h3> <a href="/pricing" class="btn-primary">Explore Business Solutions</a>
<p>Meet industry standards with compliance certifications and robust access controls.</p> </div>
</div>
<div class="solution-card"> <div class="solution-card">
<img src="/static/images/icon-students.svg" alt="Scalable Storage Icon" class="icon"> {# Placeholder icon #} <img src="/static/images/icon-students.svg" alt="Academic Storage Icon" class="icon">
<h3>Scalable Storage Plans</h3> <h2>Academic & Student Resources</h2>
<p>Easily upgrade and downgrade storage as storage and team needs evolve.</p> <p>Organize your academic life with dedicated storage for projects, research, and notes. Access your study materials across all your devices.</p>
</div> <ul>
<li>Centralized storage for assignments and research</li>
<li>Easy access from campus or home</li>
<li>Secure sharing for group projects</li>
<li>Integration with academic tools (coming soon)</li>
</ul>
<a href="/pricing" class="btn-primary">View Student Plans</a>
</div>
<div class="solution-card">
<img src="/static/images/icon-families.svg" alt="Automated Backup & Recovery Icon" class="icon">
<h2>Automated Backup & Recovery</h2>
<p>Never lose a file again. Our automated backup solutions ensure your data is always safe, with easy recovery options for any scenario.</p>
<ul>
<li>Scheduled automatic backups</li>
<li>Point-in-time recovery</li>
<li>Disaster recovery planning</li>
<li>Secure, off-site data replication</li>
</ul>
<a href="/pricing" class="btn-primary">Learn About Backup</a>
</div> </div>
</section> </section>
<section class="cta-bottom"> <section class="solutions-cta">
<a href="/pricing" class="btn-primary">Find Your Business Plan</a> <h2>Ready to Explore Our Plans?</h2>
<a href="/pricing" class="btn-primary">View All Pricing</a>
</section> </section>
</main> </main>
{% endblock %} {% endblock %}

99
retoors/templates/pages/support.html
View File

@ -9,65 +9,64 @@
{% block content %} {% block content %}
<main> <main>
<section class="support-hero"> <section class="support-hero">
<h1>We're Here to Help</h1> <h1>We're Here to Help You Succeed</h1>
<p>Flexible cloud solutions for all teams with ease.</p> <p>Find answers to your questions, troubleshoot issues, or contact our support team for personalized assistance.</p>
<div class="search-support">
<input type="text" placeholder="Search our knowledge base..." class="search-input">
<button class="btn-primary">Search</button>
</div>
</section> </section>
<section class="support-content-grid"> <section class="support-categories">
<div class="knowledge-base-section card"> <h2>Quick Answers & Popular Topics</h2>
<h2>Knowledge Base</h2> <div class="category-grid">
<input type="text" class="search-input" placeholder="Search articles and FAQs..."> <div class="category-card">
<img src="/static/images/icon-students.svg" alt="Getting Started Icon" class="icon">
<div class="featured-articles"> <h3>Getting Started</h3>
<div class="article-category"> <p>Guides to help you set up your account and start using Retoor's.</p>
<img src="/static/images/icon-families.svg" alt="Getting Started Icon" class="icon"> {# Placeholder icon #} <a href="#" class="btn-link">View Articles</a>
<h3>Getting Started Guides</h3> </div>
<ul> <div class="category-card">
<li><a href="#">How to upload your first files</a></li> <img src="/static/images/icon-professionals.svg" alt="Billing Icon" class="icon">
<li><a href="#">Setting up your account</a></li> <h3>Billing & Payments</h3>
<li><a href="#">Understanding your dashboard</a></li> <p>Information about your subscription, invoices, and payment methods.</p>
</ul> <a href="#" class="btn-link">View Articles</a>
</div> </div>
<div class="article-category"> <div class="category-card">
<img src="/static/images/icon-professionals.svg" alt="Troubleshooting Icon" class="icon"> {# Placeholder icon #} <img src="/static/images/icon-students.svg" alt="Troubleshooting Icon" class="icon">
<h3>Troubleshooting Common Issues</h3> <h3>Troubleshooting</h3>
<ul> <p>Solutions to common issues and technical problems.</p>
<li><a href="#">Resetting your password</a></li> <a href="#" class="btn-link">View Articles</a>
<li><a href="#">File synchronization problems</a></li> </div>
<li><a href="#">Contacting support for technical issues</a></li> <div class="category-card">
</ul> <img src="/static/images/icon-professionals.svg" alt="Account Management Icon" class="icon">
</div> <h3>Account Management</h3>
<div class="article-category"> <p>Manage your profile, security settings, and user permissions.</p>
<img src="/static/images/icon-students.svg" alt="Security Icon" class="icon"> {# Placeholder icon #} <a href="#" class="btn-link">View Articles</a>
<h3>Security & Privacy FAQs</h3>
<ul>
<li><a href="#">Understanding data encryption</a></li>
<li><a href="#">Our privacy policy explained</a></li>
<li><a href="#">Reporting a security vulnerability</a></li>
</ul>
</div>
</div> </div>
</div> </div>
</section>
<div class="contact-support-section card"> <section class="contact-options">
<h2>Contact Support</h2> <h2>Need More Help? Contact Us.</h2>
<div class="contact-option"> <div class="contact-grid">
<img src="/static/images/icon-families.svg" alt="Chat Icon" class="icon"> {# Placeholder icon #} <div class="contact-card">
<img src="/static/images/icon-students.svg" alt="Live Chat Icon" class="icon">
<h3>Live Chat</h3> <h3>Live Chat</h3>
<p>Get instant help from our support team.</p> <p>Get instant support from our team. Available 9 AM - 5 PM EST.</p>
<button class="btn-primary">Chat Now</button> <button class="btn-primary">Chat with Us Now</button>
</div> </div>
<div class="contact-option"> <div class="contact-card">
<img src="/static/images/icon-professionals.svg" alt="Email Icon" class="icon"> {# Placeholder icon #} <img src="/static/images/icon-professionals.svg" alt="Support Ticket Icon" class="icon">
<h3>Email Support</h3> <h3>Submit a Ticket</h3>
<p>Submit a detailed request and we'll get back to you.</p> <p>For non-urgent inquiries, submit a detailed support ticket.</p>
<button class="btn-primary">Submit a Ticket</button> <a href="#" class="btn-primary">Submit a Ticket</a>
</div> </div>
<div class="contact-option"> <div class="contact-card">
<img src="/static/images/icon-students.svg" alt="Phone Icon" class="icon"> {# Placeholder icon #} <img src="/static/images/icon-students.svg" alt="Phone Support Icon" class="icon">
<h3>Phone Support</h3> <h3>Phone Support</h3>
<p>Speak directly with a support agent.</p> <p>Speak directly with a support agent. Call us at 1-800-RET-OORS.</p>
<p class="phone-number">+00 77 5379 033</p> <p class="phone-hours">Mon-Fri, 9 AM - 5 PM EST</p>
</div> </div>
</div> </div>
</section> </section>

102
retoors/templates/pages/use_cases.html
View File

@ -9,57 +9,67 @@
{% block content %} {% block content %}
<main> <main>
<section class="use-cases-hero"> <section class="use-cases-hero">
<h1>Cloud Solutions for Every Industry & Challenge</h1> <h1>Retoor's for Your World: Real Solutions, Real Impact</h1>
<p>Flexible cloud storage tailored to your needs.</p> <p>Discover how Retoor's Cloud Solutions empowers diverse users to achieve their goals, from personal organization to professional collaboration.</p>
</section> </section>
<section class="use-cases-grid-section"> <section class="use-case-scenarios">
<div class="use-cases-grid"> <div class="scenario-card">
<div class="use-case-card"> <img src="/static/images/icon-families.svg" alt="Family Photo Archiving Icon" class="icon">
<img src="/static/images/icon-families.svg" alt="Secure File Collaboration Icon" class="icon"> {# Placeholder icon #} <h2>Family Photo Archiving</h2>
<h3>Secure File Collaboration</h3> <p>Challenge: Losing precious family photos and videos due to device failures or disorganization.</p>
<p>For marketing and creative teams to share large files and co-edit documents securely.</p> <p>Solution: Retoor's provides a secure, centralized hub for all your family's digital memories, accessible from anywhere.</p>
</div> <ul>
<div class="use-case-card"> <li>Automatic backup from multiple devices</li>
<img src="/static/images/icon-professionals.svg" alt="Automated Data Backup Icon" class="icon"> {# Placeholder icon #} <li>Easy sharing with family members</li>
<h3>Automated Data Backup</h3> <li>Long-term preservation of memories</li>
<p>Protect critical business data with automated, daily easy-click recovery.</p> </ul>
</div> <a href="/solutions" class="btn-primary">Learn More for Families</a>
<div class="use-case-card"> </div>
<img src="/static/images/icon-students.svg" alt="Client & Partner Portals Icon" class="icon"> {# Placeholder icon #}
<h3>Client & Partner Portals</h3> <div class="scenario-card">
<p>For consulting firms handling sensitive client data, ensure secure access and sharing.</p> <img src="/static/images/icon-professionals.svg" alt="Remote Team Collaboration Icon" class="icon">
</div> <h2>Remote Team Collaboration</h2>
<div class="use-case-card"> <p>Challenge: Dispersed teams struggling with file sharing, version control, and real-time document editing.</p>
<img src="/static/images/icon-families.svg" alt="Remote Team Access Icon" class="icon"> {# Placeholder icon #} <p>Solution: Retoor's offers seamless collaboration tools that keep your team productive and connected, regardless of location.</p>
<h3>Remote Team Access</h3> <ul>
<p>For businesses with remote workforces needing seamless access to company files from anywhere.</p> <li>Real-time co-editing of documents</li>
</div> <li>Secure file sharing with external clients</li>
<div class="use-case-card"> <li>Version history and recovery for all files</li>
<img src="/static/images/icon-professionals.svg" alt="Centralized Project Storage Icon" class="icon"> {# Placeholder icon #} </ul>
<h3>Centralized Project Storage</h3> <a href="/solutions" class="btn-primary">Explore Business Solutions</a>
<p>Streamline project management by centralizing all related documents and assets.</p> </div>
</div>
<div class="use-case-card"> <div class="scenario-card">
<img src="/static/images/icon-students.svg" alt="Remote Team Archiving Icon" class="icon"> {# Placeholder icon #} <img src="/static/images/icon-students.svg" alt="Academic Research Storage Icon" class="icon">
<h3>Remote Team Archiving</h3> <h2>Academic Research Storage</h2>
<p>Efficiently archive old projects and data, ensuring compliance and easy retrieval.</p> <p>Challenge: Students and researchers needing reliable storage and access to large files, notes, and research papers.</p>
</div> <p>Solution: Retoor's provides ample, secure storage and easy access to all academic materials, supporting your studies and projects.</p>
<div class="use-case-card"> <ul>
<img src="/static/images/icon-families.svg" alt="Data Compliance Icon" class="icon"> {# Placeholder icon #} <li>Centralized storage for all academic work</li>
<h3>Data Compliance & Governance</h3> <li>Access from any device, on or off campus</li>
<p>Meet regulatory requirements with robust data governance and audit trails.</p> <li>Secure sharing for group projects and peer review</li>
</div> </ul>
<div class="use-case-card"> <a href="/solutions" class="btn-primary">View Student Plans</a>
<img src="/static/images/icon-professionals.svg" alt="Disaster Recovery Icon" class="icon"> {# Placeholder icon #} </div>
<h3>Disaster Recovery Planning</h3>
<p>Ensure business continuity with comprehensive disaster recovery solutions.</p> <div class="scenario-card">
</div> <img src="/static/images/icon-students.svg" alt="Creative Portfolio Management Icon" class="icon">
<h2>Creative Portfolio Management</h2>
<p>Challenge: Artists, designers, and photographers needing to store, organize, and share large creative files and portfolios.</p>
<p>Solution: Retoor's offers high-capacity storage and robust sharing features perfect for managing and showcasing your creative work.</p>
<ul>
<li>High-capacity storage for large media files</li>
<li>Customizable sharing links for portfolios</li>
<li>Secure backup of all creative assets</li>
</ul>
<a href="/solutions" class="btn-primary">Discover Creative Solutions</a>
</div> </div>
</section> </section>
<section class="cta-bottom"> <section class="use-cases-cta">
<a href="/solutions" class="btn-primary">Find Solutions For Your Team</a> <h2>Find Your Specific Solution Today</h2>
<a href="/pricing" class="btn-primary">View Pricing Plans</a>
</section> </section>
</main> </main>
{% endblock %} {% endblock %}

28
retoors/views/site.py
View File

@ -15,6 +15,14 @@ class SiteView(web.View):
return await self.dashboard() return await self.dashboard()
elif self.request.path == "/solutions": elif self.request.path == "/solutions":
return await self.solutions() return await self.solutions()
elif self.request.path == "/pricing":
return await self.pricing()
elif self.request.path == "/security":
return await self.security()
elif self.request.path == "/support":
return await self.support()
elif self.request.path == "/use_cases":
return await self.use_cases()
return aiohttp_jinja2.render_template( return aiohttp_jinja2.render_template(
"pages/index.html", self.request, {"request": self.request, "errors": {}, "user": self.request.get("user")} "pages/index.html", self.request, {"request": self.request, "errors": {}, "user": self.request.get("user")}
) )
@ -32,6 +40,26 @@ class SiteView(web.View):
"pages/solutions.html", self.request, {"request": self.request, "errors": {}, "user": self.request.get("user")} "pages/solutions.html", self.request, {"request": self.request, "errors": {}, "user": self.request.get("user")}
) )
async def pricing(self):
return aiohttp_jinja2.render_template(
"pages/pricing.html", self.request, {"request": self.request, "errors": {}, "user": self.request.get("user")}
)
async def security(self):
return aiohttp_jinja2.render_template(
"pages/security.html", self.request, {"request": self.request, "errors": {}, "user": self.request.get("user")}
)
async def support(self):
return aiohttp_jinja2.render_template(
"pages/support.html", self.request, {"request": self.request, "errors": {}, "user": self.request.get("user")}
)
async def use_cases(self):
return aiohttp_jinja2.render_template(
"pages/use_cases.html", self.request, {"request": self.request, "errors": {}, "user": self.request.get("user")}
)
async def support(self): async def support(self):
return aiohttp_jinja2.render_template( return aiohttp_jinja2.render_template(
"pages/support.html", self.request, {"request": self.request, "errors": {}, "user": self.request.get("user")} "pages/support.html", self.request, {"request": self.request, "errors": {}, "user": self.request.get("user")}