Better public pages style

templates/components/cta_buttons.html

@@ -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> 

templates/components/explainer_video_modal.html

@@ -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> 

templates/components/hero_section.html

@@ -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> 

templates/components/pricing_section.html

@@ -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
+            // Switch to annual prices with animation
-            monthlyPrices.forEach(price => price.style.display = 'none');
+            monthlyPrices.forEach((price, index) => {
-            annualPrices.forEach(price => price.style.display = 'inline');
+                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
+            // Switch to monthly prices with animation
-            monthlyPrices.forEach(price => price.style.display = 'inline');
+            monthlyPrices.forEach((price, index) => {
-            annualPrices.forEach(price => price.style.display = 'none');
+                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);
+            });
         }
     });
 });

templates/home.html

@@ -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">
+    {% with 
-        <div class="container text-center">
+        title="Enterprise Document Management Made Simple",
-            <h1 class="display-3 fw-bold mb-4">Enterprise Document Management<br>Made Simple</h1>
+        description="Secure, intelligent, and scalable document management platform designed for modern enterprises. Streamline workflows, enhance collaboration, and protect your data.",
-            <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>
+        buttons=[
-            <div class="d-flex justify-content-center gap-3 flex-wrap">
+            {
-                <a href="#contact" class="btn btn-light btn-lg px-5 py-3">
+                'type': 'link',
-                    <i class="fas fa-rocket me-2"></i>Get Started
+                'url': url_for('public.pricing'),
-                </a>
+                'text': 'Get Started',
-                <a href="#features" class="btn btn-outline-light btn-lg px-5 py-3">
+                'icon': 'fas fa-rocket',
-                    <i class="fas fa-play me-2"></i>Learn More
+                'style': 'light'
-                </a>
+            },
-            </div>
+            {
-        </div>
+                'type': 'modal',
-    </section>
+                '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">

templates/public/contact.html

@@ -63,12 +63,14 @@
     {% include 'components/header_nav.html' %}
 
     <!-- Hero Section -->
-    <section class="hero-section">
+    {% with 
-        <div class="container text-center">
+        title="Get in Touch",
-            <h1 class="display-4 fw-bold mb-4">Get in Touch</h1>
+        description="We're here to help with your enterprise document management needs",
-            <p class="lead fs-5">We're here to help with your enterprise document management needs</p>
+        title_size="4",
-        </div>
+        description_size="5"
-    </section>
+    %}
+        {% include 'components/hero_section.html' %}
+    {% endwith %}
 
     <!-- Contact Information -->
     <section class="contact-section">

templates/public/pricing.html

@@ -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">
+    {% with 
-        <div class="container text-center">
+        title="Simple, Transparent Pricing",
-            <h1 class="display-4 fw-bold mb-4">Simple, Transparent Pricing</h1>
+        description="Choose the perfect plan for your enterprise. No hidden fees, no surprises.",
-            <p class="lead fs-5">Choose the perfect plan for your enterprise. No hidden fees, no surprises.</p>
+        title_size="4",
-        </div>
+        description_size="5"
-    </section>
+    %}
+        {% include 'components/hero_section.html' %}
+    {% endwith %}
 
     <!-- Pricing Plans -->
     {% with contact_url=url_for('public.contact') %}