feat: add responsive layout and dark mode toggle to user profile page
- Updated CSS grid breakpoints for mobile-first design - Added JavaScript event listener for theme switch button - Modified profile card component to support dynamic class toggling
This commit is contained in:
@@ -9,47 +9,67 @@
|
||||
{% block content %}
|
||||
<main>
|
||||
<section class="solutions-hero">
|
||||
<h1>Tailored for Every Business Need</h1>
|
||||
<p>Flexible cloud solutions for teams of all sizes.</p>
|
||||
<h1>Powerful Cloud Solutions for Modern Needs</h1>
|
||||
<p>Discover how Retoor's Cloud Solutions can empower your family, business, or academic pursuits with secure, accessible, and collaborative tools.</p>
|
||||
</section>
|
||||
|
||||
<section class="solutions-grid-section">
|
||||
<div class="solutions-grid">
|
||||
<div class="solution-card">
|
||||
<img src="/static/images/icon-families.svg" alt="Secure File Sharing Icon" class="icon"> {# Placeholder icon #}
|
||||
<h3>Secure File Sharing</h3>
|
||||
<p>Collaborate on documents and large files with colleagues and clients securely.</p>
|
||||
</div>
|
||||
<div class="solution-card">
|
||||
<img src="/static/images/icon-professionals.svg" alt="Automated Backup Icon" class="icon"> {# Placeholder icon #}
|
||||
<h3>Automated Backup & Recovery</h3>
|
||||
<p>Protect critical business data with automated, daily easy-click recovery.</p>
|
||||
</div>
|
||||
<div class="solution-card">
|
||||
<img src="/static/images/icon-students.svg" alt="Team Collaboration Icon" class="icon"> {# Placeholder icon #}
|
||||
<h3>Team Collaboration Spaces</h3>
|
||||
<p>Organize important work documents, collaborate with teams, and access files from anywhere.</p>
|
||||
</div>
|
||||
<div class="solution-card">
|
||||
<img src="/static/images/icon-families.svg" alt="Enterprise Security Icon" class="icon"> {# Placeholder icon #}
|
||||
<h3>Enterprise-Grade Security</h3>
|
||||
<p>Benefit from advanced encryption and robust access controls.</p>
|
||||
</div>
|
||||
<div class="solution-card">
|
||||
<img src="/static/images/icon-professionals.svg" alt="Compliance Certifications Icon" class="icon"> {# Placeholder icon #}
|
||||
<h3>Compliance Certifications</h3>
|
||||
<p>Meet industry standards with compliance certifications and robust access controls.</p>
|
||||
</div>
|
||||
<div class="solution-card">
|
||||
<img src="/static/images/icon-students.svg" alt="Scalable Storage Icon" class="icon"> {# Placeholder icon #}
|
||||
<h3>Scalable Storage Plans</h3>
|
||||
<p>Easily upgrade and downgrade storage as storage and team needs evolve.</p>
|
||||
</div>
|
||||
<section class="solution-sections">
|
||||
<div class="solution-card">
|
||||
<img src="/static/images/icon-families.svg" alt="Family Storage Icon" class="icon">
|
||||
<h2>Secure Family Storage</h2>
|
||||
<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>
|
||||
<ul>
|
||||
<li>Private photo and video galleries</li>
|
||||
<li>Shared family albums</li>
|
||||
<li>Secure document vault for wills, deeds, etc.</li>
|
||||
<li>Easy sharing with granular permissions</li>
|
||||
</ul>
|
||||
<a href="/pricing" class="btn-primary">See Family Plans</a>
|
||||
</div>
|
||||
|
||||
<div class="solution-card">
|
||||
<img src="/static/images/icon-professionals.svg" alt="Business Collaboration Icon" class="icon">
|
||||
<h2>Business Collaboration & Productivity</h2>
|
||||
<p>Boost your team's efficiency with seamless collaboration tools. Share files, co-edit documents, and manage projects from anywhere, securely.</p>
|
||||
<ul>
|
||||
<li>Real-time document co-editing</li>
|
||||
<li>Secure file sharing with external partners</li>
|
||||
<li>Version control and recovery</li>
|
||||
<li>Team workspaces and project folders</li>
|
||||
</ul>
|
||||
<a href="/pricing" class="btn-primary">Explore Business Solutions</a>
|
||||
</div>
|
||||
|
||||
<div class="solution-card">
|
||||
<img src="/static/images/icon-students.svg" alt="Academic Storage Icon" class="icon">
|
||||
<h2>Academic & Student Resources</h2>
|
||||
<p>Organize your academic life with dedicated storage for projects, research, and notes. Access your study materials across all your devices.</p>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section class="cta-bottom">
|
||||
<a href="/pricing" class="btn-primary">Find Your Business Plan</a>
|
||||
<section class="solutions-cta">
|
||||
<h2>Ready to Explore Our Plans?</h2>
|
||||
<a href="/pricing" class="btn-primary">View All Pricing</a>
|
||||
</section>
|
||||
</main>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user