flask-base/templates/index.html

75 lines
2.6 KiB
HTML

{% extends "base.html" %}
{% block navbar %}{% endblock %}
{% block title %}Governance and Compliance Portal - Home{% endblock %}
{% block content %}
<div class="login-logo-container mb-5">
<img src="{{ url_for('static', filename='logo.png') }}" class="login-logo">
</div>
<div class="container mt-5">
<div class="hero-section bg-dark text-white rounded-3 p-5 mb-5 position-relative overflow-hidden">
<div class="hero-overlay"></div>
<div class="position-relative">
<h1 class="display-4 fw-bold mb-4">Governance and Compliance Portal</h1>
<p class="lead mb-4">Your trusted partner for regulatory frameworks, policy documentation, and compliance assurance.</p>
<a href="{{ url_for('login') }}" class="btn btn-primary btn-lg px-5">Access Portal</a>
</div>
</div>
<div class="row g-4 mb-5">
<div class="col-md-4">
<div class="card h-100 shadow">
<img src="/static/images/regulatory-compliance.jpg" alt="Regulatory Compliance" style="height: 200px; object-fit: cover;">
<div class="card-body">
<h5 class="card-title">Regulatory Frameworks</h5>
<p class="card-text">Stay compliant with industry regulations and standards. We help you navigate complex compliance requirements effortlessly.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow">
<img src="/static/images/policy-management.jpg" alt="Policy Management" style="height: 200px; object-fit: cover;">
<div class="card-body">
<h5 class="card-title">Policy Documentation</h5>
<p class="card-text">Access comprehensive policy documents, guidelines, and best practices for organizational governance.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow">
<img src="/static/images/audit-training.jpg" alt="Audit Support & Training" style="height: 200px; object-fit: cover;">
<div class="card-body">
<h5 class="card-title">Compliance Audits & Training</h5>
<p class="card-text">Streamlined audit preparation, compliance training programs, and documentation management.</p>
</div>
</div>
</div>
</div>
</div>
<style>
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(27,50,68,0.8), rgba(49,100,138,0.8));
}
.hero-section {
background-image: url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1350');
background-size: cover;
background-position: center;
}
.bg-governance {
background-color: #2d4a6e;
}
</style>
{% endblock %}