Better public pages style
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
<!-- CTA Buttons Component -->
|
||||
<div class="d-flex justify-content-center gap-3 flex-wrap">
|
||||
<a href="{{ primary_url }}" class="btn btn-lg px-5 py-3" style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); border: none; color: white; border-radius: 25px; font-weight: 600;">
|
||||
<a href="{{ primary_url }}" class="btn btn-primary btn-lg px-5 py-3">
|
||||
<i class="{{ primary_icon }} me-2"></i>{{ primary_text }}
|
||||
</a>
|
||||
<a href="{{ secondary_url }}" class="btn btn-lg px-5 py-3" style="border: 2px solid var(--primary-color); color: var(--primary-color); background: transparent; border-radius: 25px; font-weight: 600;">
|
||||
<a href="{{ secondary_url }}" class="btn btn-outline-primary btn-lg px-5 py-3">
|
||||
<i class="{{ secondary_icon }} me-2"></i>{{ secondary_text }}
|
||||
</a>
|
||||
</div>
|
||||
111
templates/components/explainer_video_modal.html
Normal file
111
templates/components/explainer_video_modal.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!-- Reusable Explainer Video Modal Component -->
|
||||
<div class="modal fade" id="explainerVideoModal" tabindex="-1" aria-labelledby="explainerVideoModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="explainerVideoModalLabel">
|
||||
<i class="fas fa-play-circle me-2"></i>{{ modal_title|default('DocuPulse Overview') }}
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="ratio ratio-16x9">
|
||||
<div class="bg-dark d-flex align-items-center justify-content-center" style="border-radius: 8px;">
|
||||
<div class="text-center text-white">
|
||||
<i class="fas fa-video fa-3x mb-3 opacity-50"></i>
|
||||
<h5>{{ video_title|default('Explainer Video') }}</h5>
|
||||
<p class="text-muted">{{ video_placeholder|default('Video placeholder - Replace with actual explainer video') }}</p>
|
||||
<button class="btn btn-primary btn-lg px-4 py-3">
|
||||
<i class="fas fa-play me-2"></i>Play Video
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<h6>{{ learning_title|default('What you\'ll learn:') }}</h6>
|
||||
<ul class="list-unstyled">
|
||||
{% for point in learning_points|default([
|
||||
'How DocuPulse streamlines document management',
|
||||
'Room-based collaboration features',
|
||||
'Security and permission controls',
|
||||
'Real-time messaging and notifications'
|
||||
]) %}
|
||||
<li><i class="fas fa-check text-success me-2"></i>{{ point }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary btn-lg px-4 py-3" data-bs-dismiss="modal">Close</button>
|
||||
<a href="{{ cta_url|default(url_for('public.pricing')) }}" class="btn btn-primary btn-lg px-4 py-3">
|
||||
<i class="fas fa-rocket me-2"></i>{{ cta_text|default('Get Started Now') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Unified button styling for modal */
|
||||
.modal .btn-close {
|
||||
background: none;
|
||||
border: none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0.6;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.modal .btn-close:hover {
|
||||
background: rgba(108, 117, 125, 0.1);
|
||||
transform: translateY(-1px);
|
||||
opacity: 1;
|
||||
}
|
||||
.modal .btn-close::before {
|
||||
content: '×';
|
||||
color: var(--text-dark);
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.modal .btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
padding: 12px 30px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.modal .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);
|
||||
}
|
||||
|
||||
.modal .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;
|
||||
}
|
||||
.modal .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;
|
||||
}
|
||||
|
||||
.modal .btn-lg {
|
||||
padding: 15px 40px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
</style>
|
||||
73
templates/components/hero_section.html
Normal file
73
templates/components/hero_section.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!-- Reusable Hero Section Component -->
|
||||
<section class="hero-section">
|
||||
<div class="floating-elements">
|
||||
<div class="floating-element"></div>
|
||||
<div class="floating-element"></div>
|
||||
<div class="floating-element"></div>
|
||||
</div>
|
||||
<div class="container text-center position-relative">
|
||||
<h1 class="display-{{ title_size|default('3') }} fw-bold mb-4">{{ title }}</h1>
|
||||
<p class="lead fs-{{ description_size|default('4') }} mb-5">{{ description }}</p>
|
||||
{% if buttons %}
|
||||
<div class="d-flex justify-content-center gap-3 flex-wrap">
|
||||
{% for button in buttons %}
|
||||
{% if button.type == 'link' %}
|
||||
<a href="{{ button.url }}" class="btn btn-{{ button.style|default('light') }} btn-lg px-5 py-3">
|
||||
{% if button.icon %}<i class="{{ button.icon }} me-2"></i>{% endif %}{{ button.text }}
|
||||
</a>
|
||||
{% elif button.type == 'modal' %}
|
||||
<button type="button" class="btn btn-{{ button.style|default('outline-light') }} btn-lg px-5 py-3" data-bs-toggle="modal" data-bs-target="{{ button.target }}">
|
||||
{% if button.icon %}<i class="{{ button.icon }} me-2"></i>{% endif %}{{ button.text }}
|
||||
</button>
|
||||
{% elif button.type == 'button' %}
|
||||
<button type="button" class="btn btn-{{ button.style|default('light') }} btn-lg px-5 py-3" onclick="{{ button.onclick }}">
|
||||
{% if button.icon %}<i class="{{ button.icon }} me-2"></i>{% endif %}{{ button.text }}
|
||||
</button>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
color: white;
|
||||
padding: 120px 0 100px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.floating-elements {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.floating-element {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%);
|
||||
border-radius: 50%;
|
||||
opacity: 0.3;
|
||||
animation: float-around 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.floating-element:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
|
||||
.floating-element:nth-child(2) { top: 60%; right: 15%; animation-delay: 2s; }
|
||||
.floating-element:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 4s; }
|
||||
|
||||
@keyframes float-around {
|
||||
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||
25% { transform: translate(20px, -20px) rotate(90deg); }
|
||||
50% { transform: translate(-10px, -40px) rotate(180deg); }
|
||||
75% { transform: translate(-30px, -10px) rotate(270deg); }
|
||||
}
|
||||
</style>
|
||||
@@ -24,7 +24,7 @@
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Email support</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="{{ contact_url }}" class="btn btn-outline-primary w-100 mt-auto">Get Started</a>
|
||||
<a href="{{ contact_url }}" class="btn btn-outline-primary btn-lg w-100 mt-auto px-4 py-3">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -51,7 +51,7 @@
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Priority support</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="{{ contact_url }}" class="btn btn-primary w-100 mt-auto">Get Started</a>
|
||||
<a href="{{ contact_url }}" class="btn btn-primary btn-lg w-100 mt-auto px-4 py-3">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,7 +73,7 @@
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>24/7 dedicated support</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="{{ contact_url }}" class="btn btn-outline-primary w-100 mt-auto">Get Started</a>
|
||||
<a href="{{ contact_url }}" class="btn btn-outline-primary btn-lg w-100 mt-auto px-4 py-3">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -92,7 +92,7 @@
|
||||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>Dedicated account manager</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="{{ contact_url }}" class="btn btn-outline-primary w-100 mt-auto">Contact Sales</a>
|
||||
<a href="{{ contact_url }}" class="btn btn-outline-primary btn-lg w-100 mt-auto px-4 py-3">Contact Sales</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -126,18 +126,62 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
.form-check-input:focus {
|
||||
box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25) !important;
|
||||
}
|
||||
|
||||
.price-number {
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Function to animate number counting
|
||||
function animateNumber(element, startValue, endValue, duration = 500) {
|
||||
const start = performance.now();
|
||||
const difference = endValue - startValue;
|
||||
|
||||
function updateNumber(currentTime) {
|
||||
const elapsed = currentTime - start;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
|
||||
// Easing function for smooth animation
|
||||
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
||||
const currentValue = startValue + (difference * easeOutQuart);
|
||||
|
||||
element.textContent = '€' + Math.round(currentValue);
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(updateNumber);
|
||||
} else {
|
||||
// Ensure the final value is correct
|
||||
element.textContent = '€' + endValue;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(updateNumber);
|
||||
}
|
||||
|
||||
billingToggle.addEventListener('change', function() {
|
||||
if (this.checked) {
|
||||
// Show annual prices
|
||||
monthlyPrices.forEach(price => price.style.display = 'none');
|
||||
annualPrices.forEach(price => price.style.display = 'inline');
|
||||
// Switch to annual prices with animation
|
||||
monthlyPrices.forEach((price, index) => {
|
||||
const monthlyValue = parseInt(price.textContent.replace('€', ''));
|
||||
const annualValue = parseInt(annualPrices[index].textContent.replace('€', ''));
|
||||
|
||||
// Store the original monthly value for later use
|
||||
price.setAttribute('data-original-monthly', monthlyValue);
|
||||
|
||||
// Simply animate the number change
|
||||
animateNumber(price, monthlyValue, annualValue);
|
||||
});
|
||||
} else {
|
||||
// Show monthly prices
|
||||
monthlyPrices.forEach(price => price.style.display = 'inline');
|
||||
annualPrices.forEach(price => price.style.display = 'none');
|
||||
// Switch to monthly prices with animation
|
||||
monthlyPrices.forEach((price, index) => {
|
||||
const currentValue = parseInt(price.textContent.replace('€', ''));
|
||||
const originalMonthlyValue = parseInt(price.getAttribute('data-original-monthly'));
|
||||
|
||||
// Simply animate the number change back to monthly
|
||||
animateNumber(price, currentValue, originalMonthlyValue);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -63,12 +63,14 @@
|
||||
{% include 'components/header_nav.html' %}
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="container text-center">
|
||||
<h1 class="display-4 fw-bold mb-4">Get in Touch</h1>
|
||||
<p class="lead fs-5">We're here to help with your enterprise document management needs</p>
|
||||
</div>
|
||||
</section>
|
||||
{% with
|
||||
title="Get in Touch",
|
||||
description="We're here to help with your enterprise document management needs",
|
||||
title_size="4",
|
||||
description_size="5"
|
||||
%}
|
||||
{% include 'components/hero_section.html' %}
|
||||
{% endwith %}
|
||||
|
||||
<!-- Contact Information -->
|
||||
<section class="contact-section">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -51,16 +51,29 @@
|
||||
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);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -68,12 +81,14 @@
|
||||
{% include 'components/header_nav.html' %}
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="container text-center">
|
||||
<h1 class="display-4 fw-bold mb-4">Simple, Transparent Pricing</h1>
|
||||
<p class="lead fs-5">Choose the perfect plan for your enterprise. No hidden fees, no surprises.</p>
|
||||
</div>
|
||||
</section>
|
||||
{% with
|
||||
title="Simple, Transparent Pricing",
|
||||
description="Choose the perfect plan for your enterprise. No hidden fees, no surprises.",
|
||||
title_size="4",
|
||||
description_size="5"
|
||||
%}
|
||||
{% include 'components/hero_section.html' %}
|
||||
{% endwith %}
|
||||
|
||||
<!-- Pricing Plans -->
|
||||
{% with contact_url=url_for('public.contact') %}
|
||||
|
||||
Reference in New Issue
Block a user