Better public pages style
This commit is contained in:
@@ -38,7 +38,9 @@
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
color: white;
|
||||
padding: 100px 0;
|
||||
padding: 120px 0 100px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.stats-section {
|
||||
background-color: var(--bg-color);
|
||||
@@ -64,16 +66,100 @@
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
padding: 12px 30px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px var(--primary-opacity-15);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.btn-outline-primary {
|
||||
border: 2px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
border-radius: 25px;
|
||||
padding: 12px 30px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.btn-outline-primary:hover {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
background: rgba(var(--primary-color-rgb), 0.05);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(var(--primary-color-rgb), 0.1);
|
||||
}
|
||||
.btn-secondary {
|
||||
background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
padding: 12px 30px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
color: white;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
|
||||
color: white;
|
||||
}
|
||||
.btn-light {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
padding: 12px 30px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.btn-light:hover {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.btn-outline-light {
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
color: white;
|
||||
border-radius: 25px;
|
||||
padding: 12px 30px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.btn-outline-light:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.btn-lg {
|
||||
padding: 15px 40px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.btn-close {
|
||||
background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.btn-close:hover {
|
||||
background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
|
||||
opacity: 1;
|
||||
}
|
||||
.btn-close::before {
|
||||
content: '×';
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Navigation dropdown styles */
|
||||
@@ -101,26 +187,46 @@
|
||||
.dropdown-item {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
/* Ensure hero buttons are clickable */
|
||||
.hero-section .d-flex {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-section .btn {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{% include 'components/header_nav.html' %}
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="container text-center">
|
||||
<h1 class="display-3 fw-bold mb-4">Enterprise Document Management<br>Made Simple</h1>
|
||||
<p class="lead mb-5 fs-4">Secure, intelligent, and scalable document management platform designed for modern enterprises. Streamline workflows, enhance collaboration, and protect your data.</p>
|
||||
<div class="d-flex justify-content-center gap-3 flex-wrap">
|
||||
<a href="#contact" class="btn btn-light btn-lg px-5 py-3">
|
||||
<i class="fas fa-rocket me-2"></i>Get Started
|
||||
</a>
|
||||
<a href="#features" class="btn btn-outline-light btn-lg px-5 py-3">
|
||||
<i class="fas fa-play me-2"></i>Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% with
|
||||
title="Enterprise Document Management Made Simple",
|
||||
description="Secure, intelligent, and scalable document management platform designed for modern enterprises. Streamline workflows, enhance collaboration, and protect your data.",
|
||||
buttons=[
|
||||
{
|
||||
'type': 'link',
|
||||
'url': url_for('public.pricing'),
|
||||
'text': 'Get Started',
|
||||
'icon': 'fas fa-rocket',
|
||||
'style': 'light'
|
||||
},
|
||||
{
|
||||
'type': 'modal',
|
||||
'target': '#explainerVideoModal',
|
||||
'text': 'Learn More',
|
||||
'icon': 'fas fa-play',
|
||||
'style': 'outline-light'
|
||||
}
|
||||
]
|
||||
%}
|
||||
{% include 'components/hero_section.html' %}
|
||||
{% endwith %}
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="py-5">
|
||||
@@ -287,7 +393,7 @@
|
||||
<div class="col-md-8 text-center">
|
||||
<h2 class="display-5 fw-bold mb-3">Ready to Get Started?</h2>
|
||||
<p class="lead text-muted mb-5">Contact us today to learn how DocuPulse can transform your document management</p>
|
||||
{% with primary_url=url_for('public.pricing'), primary_icon='fas fa-rocket', primary_text='Get Started', secondary_url='#contact', secondary_icon='fas fa-envelope', secondary_text='Contact Sales' %}
|
||||
{% with primary_url=url_for('public.pricing'), primary_icon='fas fa-rocket', primary_text='Get Started', secondary_url=url_for('public.contact'), secondary_icon='fas fa-envelope', secondary_text='Contact Sales' %}
|
||||
{% include 'components/cta_buttons.html' %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
@@ -297,6 +403,24 @@
|
||||
|
||||
{% include 'components/footer_nav.html' %}
|
||||
|
||||
<!-- Explainer Video Modal -->
|
||||
{% with
|
||||
modal_title='DocuPulse Overview',
|
||||
video_title='Explainer Video',
|
||||
video_placeholder='Video placeholder - Replace with actual explainer video',
|
||||
learning_title='What you\'ll learn:',
|
||||
learning_points=[
|
||||
'How DocuPulse streamlines document management',
|
||||
'Room-based collaboration features',
|
||||
'Security and permission controls',
|
||||
'Real-time messaging and notifications'
|
||||
],
|
||||
cta_url=url_for('public.pricing'),
|
||||
cta_text='Get Started Now'
|
||||
%}
|
||||
{% include 'components/explainer_video_modal.html' %}
|
||||
{% endwith %}
|
||||
|
||||
<!-- Hidden Admin Link -->
|
||||
<div class="admin-link">
|
||||
<a href="{{ url_for('auth.login') }}" title="Admin Login">
|
||||
|
||||
Reference in New Issue
Block a user